فهرست منبع

HUE-8704 [jb] Add resizing for profile details.

jdesjean 6 سال پیش
والد
کامیت
b51ecc0

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css


+ 34 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/js/impala_dagre.js

@@ -96,9 +96,24 @@ function impalaDagre(id) {
       });
       return button;
     });
+
+    $parent = $("#"+id);
+    d3.select("#"+id)
+    .append('div')
+      .classed('resizer', true);
     d3.select("#"+id)
     .append('div')
       .classed('details', true);
+
+    $( '#'+id + ' .resizer' ).draggable({
+      axis: 'x',
+      containment: 'parent',
+      scroll: false,
+      cursor: 'col-resize',
+      drag: function(e, ui) {
+        updateDetailsPosition(ui.position.left);
+      }
+    });
   }
 
   // Set up zoom support
@@ -510,6 +525,20 @@ function impalaDagre(id) {
     d3.select('#' + id + '.query-plan .details .metric-title').on('click', function () {
       toggleDetails();
     });
+    updateDetailsPosition();
+  }
+
+  function updateDetailsPosition(resizerX) {
+    if (!d3.select('#' + id + '.query-plan').classed('open')) {
+      return;
+    }
+    if (resizerX == null || resizerX == undefined) {
+      resizerX = $('#'+id + ' .resizer').css('left').slice(0, -2);
+    }
+    var right = $('#'+id).width() - resizerX - 4;
+    $('#'+id + ' .details').css('width', right + 'px')
+    $('#'+id + ' .details table tr:nth-child(1)').css('max-width', (right - 83) + 'px');
+    $('#'+id + ' .buttons').css('left', (resizerX - 4 - 32) + 'px');
   }
 
   function appendTimelineAndLegend(detailsContent, data, title, icon, max) {
@@ -594,6 +623,8 @@ function impalaDagre(id) {
     d3.select('#' + id + '.query-plan .details .metric-title').on('click', function () {
       toggleDetails();
     });
+
+    updateDetailsPosition();
   }
 
   function hideDetail(id) {
@@ -634,6 +665,9 @@ function impalaDagre(id) {
   function toggleDetails() {
     var queryPlan = d3.select('#' + id + '.query-plan');
     queryPlan.classed('open', !queryPlan.classed('open'));
+    $("#"+id + ' .details').width('200px');
+    $("#"+id + ' .resizer').css({'left': 'auto'});
+    $("#"+id + ' .buttons').css({'left': 'auto'});
   }
 
   function renderGraph() {

+ 15 - 1
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -173,6 +173,7 @@
       position: absolute;
       background-color: white;
       box-shadow: 0 0 5px 0;
+      width:32px;
       right: 45px;
       bottom: 5px;
       color: @cui-gray-600;
@@ -229,6 +230,11 @@
       fill: @cui-blue-400 !important;
       background-color: @cui-blue-400;
     }
+    .resizer {
+      top: 0px;
+      right: 200px;
+      visibility: hidden;
+    }
     .details {
       background-color: @cui-white;
       box-shadow: 0 0 10px 0;
@@ -239,6 +245,9 @@
       width: 200px;
       height: 100%;
       flex-direction: column;
+      header {
+        white-space: nowrap;
+      }
       .divider {
         background-color: @cui-gray-300;
         width: calc(~"100% - 10px");
@@ -317,9 +326,11 @@
       table.clickable tr:hover {
         background-color: @cui-purple-gray-050 !important;
       }
+      table tr:nth-child(1) {
+        max-width: 107px;
+      }
       table tr td {
         color: @cui-gray-800;
-        max-width: 107px;
         overflow: hidden;
         white-space: nowrap;
         padding-right: 5px;
@@ -357,6 +368,9 @@
     }
   }
   .query-plan.open {
+    .resizer {
+      visibility: visible;
+    }
     .details {
       right: 0;
       display: flex;

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است