Эх сурвалжийг харах

HUE-8674 [jb] Add reset button to Impala plan.

jdesjean 7 жил өмнө
parent
commit
03850f1

+ 2 - 2
apps/jobbrowser/src/jobbrowser/apis/query_api.py

@@ -192,9 +192,9 @@ class QueryApi(Api):
         'NESTED LOOP JOIN': { 'type': 'LOOP_JOIN', 'icon': { 'svg': 'hi-nested-loop' } },
         'SUBPLAN': { 'type': 'SUBPLAN', 'icon': { 'svg': 'hi-map' } },
         'UNNEST': { 'type': 'UNNEST', 'icon': { 'svg': 'hi-unnest' } },
-        'SINGULAR ROW SRC': { 'type': 'SINGULAR', 'icon': { 'svg': 'hi-narrow' } },
+        'SINGULAR ROW SRC': { 'type': 'SINGULAR', 'icon': { 'svg': 'hi-vertical-align' } },
         'ANALYTIC': { 'type': 'SINGULAR', 'icon': { 'svg': 'hi-timeline' } },
-        'UNION': { 'type': 'UNION', 'icon': { 'svg': 'hi-merge' } },
+        'UNION': { 'type': 'UNION', 'icon': { 'svg': 'hi-merge' } }
       }
       def process(node, mapping=mapping):
         node['id'], node['name'] = node['label'].split(':')

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css


+ 35 - 17
apps/jobbrowser/src/jobbrowser/static/jobbrowser/js/impala_dagre.js

@@ -13,6 +13,12 @@ function impalaDagre(id) {
   var svg = d3.select("#"+id + " svg");
   var inner = svg.select("g");
   var _impalaDagree = {
+    init: function (initialScale) {
+      _impalaDagree.scale = initialScale;
+      zoom.translate([((svg.attr("width") || $("#"+id).width()) - g.graph().width * initialScale) / 2, 20])
+      .scale(initialScale)
+      .event(svg);
+    },
     update: function(plan) {
       renderGraph(plan);
       _impalaDagree._width = $(svg[0]).width();
@@ -25,13 +31,13 @@ function impalaDagre(id) {
     },
     action: function(type) {
       if (type == 'plus') {
-        zoom.scale(zoom.scale() + 0.25);
-        inner.attr("transform", "translate(" + zoom.translate() + ")" +
-            "scale(" + zoom.scale() + ")");
+        zoom.scale(zoom.scale() + 0.25)
+        .event(svg);
       } else if (type == 'minus') {
-        zoom.scale(zoom.scale() - 0.25);
-        inner.attr("transform", "translate(" + zoom.translate() + ")" +
-            "scale(" + zoom.scale() + ")");
+        zoom.scale(zoom.scale() - 0.25)
+        .event(svg);
+      } else if (type == 'reset') {
+        _impalaDagree.init(1);
       }
     },
     moveTo: function(id) {
@@ -50,15 +56,30 @@ function impalaDagre(id) {
       .style('position', 'absolute')
       .style('right', '5px')
       .style('bottom', '5px')
-      .classed('button', true)
-    .selectAll('button').data([{ type: 'reset', icon: 'fa-plus' }, { type: 'plus', icon: 'fa-plus' }, { type: 'minus', icon: 'fa-minus' }])
+      .classed('buttons', true)
+    .selectAll('button').data([{ type: 'reset', svg: 'hi-crop-free', divider: true }, { type: 'plus', icon: 'fa-plus', divider: true }, { type: 'minus', icon: 'fa-minus' }])
     .enter()
     .append(function (data) {
-       var button = $("<div class='fa fa-fw valign-middle " + data.icon + "'></div>")[0];
-       $(button).on('click', function () {
-         _impalaDagree.action(data.type);
-       });
-       return button;
+      var text = "";
+      if (data.svg) {
+        text += "<div><svg class='hi'><use xlink:href='#"+ data.svg +"'></use></svg>";
+        if (data.divider) {
+          text += "<div class='divider'></div>";
+        }
+        text += "</div>";
+        button = $()[0];
+      } else if (data.icon) {
+        text += "<div><div class='fa fa-fw valign-middle " + data.icon + "'></div>";
+        if (data.divider) {
+          text += "<div class='divider'></div></div>";
+        }
+        text += "</div>";
+      }
+      var button = $(text)[0];
+      $(button).on('click', function () {
+        _impalaDagree.action(data.type);
+      });
+      return button;
     });
   }
 
@@ -233,10 +254,7 @@ function impalaDagre(id) {
     // Center the graph, but only the first time through (so as to not lose user zooms).
     if (is_first) {
       var initialScale = 1;
-      _impalaDagree.scale = initialScale;
-      zoom.translate([((svg.attr("width") || $("#"+id).width()) - g.graph().width * initialScale) / 2, 20])
-        .scale(initialScale)
-        .event(svg);
+      _impalaDagree.init(initialScale);
       svg.attr('height', Math.min(g.graph().height * initialScale + 40, 600));
       is_first = false;
     }

+ 18 - 2
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -119,13 +119,27 @@
       padding-top: 3px;
       padding-right: 2px;
     }
-    .hi {
+    svg .hi {
       color: @cui-gray-600 !important;
       float: left;
       width: 2.2em !important;
       height: 2.2em !important;
       padding-right: 5px;
     }
+    .buttons {
+      .hi {
+        color: @cui-gray-600 !important;
+        width: 2.2em !important;
+        height: 2.2em !important;
+        padding-left: 2px;
+      }
+      .divider {
+        background-color: @cui-gray-300;
+        width: 10px;
+        height: 1px;
+        margin-left: 5px;
+      }
+    }
     .id {
       display: none;
     }
@@ -142,7 +156,9 @@
         stroke: @cui-gray-600;
       }
     }
-    .button {
+    .buttons {
+      background-color: white;
+      box-shadow: 0px 0px 2px 0px;
       border: 1px solid @cui-gray-300;
       color: @cui-gray-600;
       div {

+ 5 - 2
desktop/core/src/desktop/templates/hue_icons.mako

@@ -329,8 +329,8 @@
     <symbol id="hi-full-screen" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
     </symbol>
-    <symbol id="hi-narrow" viewBox="0 0 32 32">
-      <path d="M23.021 15.007v-3.396l-4.847 4.842 4.823 4.863 0.023-3.353h6.965v-2.957h-6.964zM14 29h3v-25h-3v25zM8.040 15.007h-7.026v2.957h7.026l-0.039 3.353 4.824-4.863-4.785-4.843v3.396z"></path>
+    <symbol id="hi-vertical-align" viewBox="0 0 24 24">
+      <path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z"/>
     </symbol>
     <symbol id="hi-sort" viewBox="0 0 24 24">
       <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
@@ -350,6 +350,9 @@
     <symbol id="hi-merge" viewBox="0 0 24 24">
       <path d="M17 20.41L18.41 19 15 15.59 13.59 17 17 20.41zM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8z"/>
     </symbol>
+    <symbol id="hi-crop-free" viewBox="0 0 24 24">
+      <path d="M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"/>
+    </symbol>
   </svg>
 
   <script type="text/html" id="app-switcher-icon-template">

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно