Quellcode durchsuchen

HUE-3596 [editor] Move results and explain to the tabs

Enrico Berti vor 9 Jahren
Ursprung
Commit
66126d7

+ 5 - 1
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -964,4 +964,8 @@ h4.header {
 
 .player-toolbar img {
   margin-top: 12px;
-}
+}
+
+.table-results table > thead > tr > td:first-child, .table-results table > tbody > tr > td:first-child {
+  background-color: #f9f9f9;
+}

+ 9 - 19
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -211,7 +211,7 @@
       }
     };
 
-    self.currentQueryTab = ko.observable('queryHistory');
+    self.currentQueryTab = ko.observable(typeof snippet.currentQueryTab != "undefined" && snippet.currentQueryTab != null ? snippet.currentQueryTab : 'queryHistory');
 
     self.errorLoadingQueries = ko.observable(false);
     self.loadingQueries = ko.observable(false);
@@ -247,6 +247,7 @@
 
     var lastQueriesPage = 1;
     self.currentQueryTab.subscribe(function (newValue) {
+      huePubSub.publish('redraw.fixed.headers');
       if (newValue === 'savedQueries' && (self.queries().length === 0 || lastQueriesPage !== self.queriesCurrentPage())) {
         fetchQueries();
       }
@@ -379,6 +380,9 @@
     }
 
     self.result = new Result(snippet, snippet.result);
+    if (!self.result.hasSomeResults()) {
+      self.currentQueryTab('queryHistory');
+    }
     self.showGrid = ko.observable(typeof snippet.showGrid != "undefined" && snippet.showGrid != null ? snippet.showGrid : true);
     self.showChart = ko.observable(typeof snippet.showChart != "undefined" && snippet.showChart != null ? snippet.showChart : false);
     var defaultShowLogs = false;
@@ -545,8 +549,6 @@
         return;
       }
 
-      notebook.showHistory(false);
-
       self.previousChartOptions = {
         chartScope: typeof self.chartScope() !== "undefined" ? self.chartX() : self.previousChartOptions.chartX,
         chartX: typeof self.chartX() !== "undefined" ? self.chartX() : self.previousChartOptions.chartX,
@@ -586,6 +588,7 @@
         notebook: vm.editorMode ? ko.mapping.toJSON(notebook, NOTEBOOK_MAPPING) : ko.mapping.toJSON(notebook.getContext()),
         snippet: ko.mapping.toJSON(self.getContext())
       }, function (data) {
+        self.currentQueryTab('queryResults');
         self.statusForButtons('executed');
         if (vm.editorMode && data.history_id) {
           hueUtils.changeURL('/notebook/editor?editor=' + data.history_id);
@@ -657,7 +660,6 @@
       logGA('clear');
       self.ace().setValue('', 1);
       self.result.clear();
-      notebook.showHistory(true);
     };
 
     self.explain = function () {
@@ -675,7 +677,7 @@
         snippet: ko.mapping.toJSON(self.getContext())
       }, function(data) {
         if (data.status == 0) {
-          notebook.showHistory(false);
+          self.currentQueryTab('queryExplain');
           self.result.fetchedOnce(true);
           self.result.explanation(data.explanation);
         } else {
@@ -993,8 +995,7 @@
     });
 
     self.history = ko.observableArray([]);
-    // TODO: Move showHistory, fetchHistory and clearHistory into the Snippet and drop self.selectedSnippet
-    self.showHistory = ko.observable(typeof notebook.showHistory != "undefined" && notebook.showHistory != null ? notebook.showHistory : false);
+    // TODO: Move fetchHistory and clearHistory into the Snippet and drop self.selectedSnippet
 
     self.getSession = function (session_type) {
       var _s = null;
@@ -1275,12 +1276,6 @@
       });
     };
 
-    self.showHistory.subscribe(function (val) {
-      if (val) {
-        self.fetchHistory();
-      }
-    });
-
     self.schedule = function() {
       logGA('schedule');
       $.post("/oozie/editor/document/schedule/", {
@@ -1299,7 +1294,6 @@
         doc_type: self.selectedSnippet()
       }, function (data) {
         self.history.removeAll();
-        self.showHistory(false);
         if (self.isHistory()) {
           self.id(null);
           self.uuid(UUID());
@@ -1362,11 +1356,7 @@
         self.addSnippet(snippet);
       });
       if (vm.editorMode) {
-        if (notebook.snippets.length == 0) {
-          self.showHistory(true); // Show history when new query
-        } else if (self.showHistory()) {
-          self.fetchHistory(); // Show on saved query with history selected
-        }
+        self.fetchHistory();
       }
     }
   };

+ 38 - 25
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -507,23 +507,28 @@ ${ hueIcons.symbols() }
   </div>
 </script>
 
-<script type="text/html" id="query-history">
-  <!-- ko if: $root.editorMode -->
-  <div class="query-history-container" data-bind="slideVisible: $parent.showHistory, onComplete: function(){ redrawFixedHeaders(200); }" style="display: none;">
+<script type="text/html" id="query-tabs">
+  <div class="query-history-container" data-bind="onComplete: function(){ redrawFixedHeaders(200); }">
     <div data-bind="delayedOverflow, css: resultsKlass" style="margin-top: 5px; position: relative;">
       <ul class="nav nav-tabs">
-        <li class="active" data-bind="click: function(){ currentQueryTab('queryHistory'); }">
+        <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}">
           <a class="inactive-action" href="#queryHistory" data-toggle="tab">${_('Query History')}
             <div class="inline-block inactive-action margin-left-10 hand" title="${_('Clear the query history')}" data-target="#clearHistoryModal" data-toggle="modal" rel="tooltip" data-bind="visible: $parent.history().length > 0"><i class="snippet-icon fa fa-calendar-times-o"></i></div>
           </a>
         </li>
-        <li data-bind="click: function(){ currentQueryTab('savedQueries'); }"><a class="inactive-action" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}</a></li>
+        <li data-bind="click: function(){ currentQueryTab('savedQueries'); }, css: {'active': currentQueryTab() == 'savedQueries'}"><a class="inactive-action" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}</a></li>
         %if ENABLE_QUERY_BUILDER.get():
-        <li data-bind="click: function(){ currentQueryTab('queryBuilderTab'); }"><a class="inactive-action" href="#queryBuilderTab" data-toggle="tab">${_('Query Builder')}</a></li>
+        <li data-bind="click: function(){ currentQueryTab('queryBuilderTab'); }, css: {'active': currentQueryTab() == 'queryBuilderTab'}"><a class="inactive-action" href="#queryBuilderTab" data-toggle="tab">${_('Query Builder')}</a></li>
         %endif
+        <!-- ko if: result.hasSomeResults -->
+        <li data-bind="click: function(){ currentQueryTab('queryResults'); }, css: {'active': currentQueryTab() == 'queryResults'}"><a class="inactive-action" href="#queryResults" data-toggle="tab">${_('Results')}</a></li>
+        <!-- /ko -->
+        <!-- ko if: result.explanation().length > 0 -->
+        <li data-bind="click: function(){ currentQueryTab('queryExplain'); }, css: {'active': currentQueryTab() == 'queryExplain'}"><a class="inactive-action" href="#queryExplain" data-toggle="tab">${_('Explain')}</a></li>
+        <!-- /ko -->
       </ul>
       <div class="tab-content" style="border: none">
-        <div class="tab-pane active" id="queryHistory">
+        <div class="tab-pane" id="queryHistory" data-bind="css: {'active': currentQueryTab() == 'queryHistory'}">
           <!-- ko if: $parent.history().length === 0 -->
           <div class="margin-top-20 margin-left-10" style="font-style: italic">${ _("No queries to be shown.") }</div>
           <!-- /ko -->
@@ -555,7 +560,7 @@ ${ hueIcons.symbols() }
           <!-- /ko -->
         </div>
 
-        <div class="tab-pane" id="savedQueries">
+        <div class="tab-pane" id="savedQueries" data-bind="css: {'active': currentQueryTab() == 'savedQueries'}">
           <!-- ko spinner: loadingQueries --><!-- /ko -->
           <!-- ko if: queriesHasErrors() -->
           <div class="margin-top-20 margin-left-10" style="font-style: italic">${ _("Error loading my queries") }</div>
@@ -592,7 +597,7 @@ ${ hueIcons.symbols() }
           <!-- /ko -->
         </div>
         %if ENABLE_QUERY_BUILDER.get():
-        <div class="tab-pane margin-top-10" id="queryBuilderTab">
+        <div class="tab-pane margin-top-10" id="queryBuilderTab" data-bind="css: {'active': currentQueryTab() == 'queryBuilderTab'}">
           <div id="queryBuilderAlert" style="display: none" class="alert">${ _('There are currently no rules defined. To get started, right click on any table column in the SQL Assist panel.') }</div>
           <table id="queryBuilder" class="table table-condensed">
             <thead>
@@ -609,11 +614,18 @@ ${ hueIcons.symbols() }
           </div>
         </div>
         %endif
+        <div class="tab-pane" id="queryResults" data-bind="css: {'active': currentQueryTab() == 'queryResults'}">
+          <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'snippet-results' } --><!-- /ko -->
+        </div>
+        <!-- ko if: result.explanation().length > 0 -->
+        <div class="tab-pane" id="queryExplain" data-bind="css: {'active': currentQueryTab() == 'queryExplain'}">
+          <!-- ko template: { name: 'snippet-explain' } --><!-- /ko -->
+        </div>
+        <!-- /ko -->
       </div>
 
     </div>
   </div>
-  <!-- /ko -->
 </script>
 
 <script type="text/html" id="notebook-snippet-header">
@@ -671,9 +683,14 @@ ${ hueIcons.symbols() }
           </div>
           <!-- ko template: { if: ['text', 'markdown'].indexOf(type()) == -1, name: 'snippet-execution-status' } --><!-- /ko -->
           <!-- ko template: { if: $root.editorMode, name: 'snippet-code-resizer' } --><!-- /ko -->
+          <!-- ko if: $root.editorMode -->
+          <!-- ko template: 'snippet-log' --><!-- /ko -->
+          <!-- ko template: 'query-tabs' --><!-- /ko -->
+          <!-- /ko -->
+          <!-- ko ifnot: $root.editorMode -->
           <!-- ko template: 'snippet-log' --><!-- /ko -->
-          <!-- ko template: 'query-history' --><!-- /ko -->
           <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'snippet-results' } --><!-- /ko -->
+          <!-- /ko -->
 
           <div class="clearfix"></div>
         </div>
@@ -943,15 +960,11 @@ ${ hueIcons.symbols() }
   </div>
 </script>
 
-<script type="text/html" id="snippet-results">
-  <!-- ko if: result.explanation().length > 0 -->
-    <div class="snippet-row">
-      <div class="result-body">
-        <pre class="no-margin-bottom" data-bind="text: result.explanation"></pre>
-      </div>
-    </div>
-  <!-- /ko -->
+<script type="text/html" id="snippet-explain">
+  <pre class="no-margin-bottom" data-bind="text: result.explanation"></pre>
+</script>
 
+<script type="text/html" id="snippet-results">
   <div class="snippet-row" data-bind="slideVisible: result.hasSomeResults">
     <div class="snippet-left-bar">
       <!-- ko template: { if: result.type() == 'table' && result.hasSomeResults(), name: 'snippet-result-controls' }--><!-- /ko -->
@@ -1174,18 +1187,13 @@ ${ hueIcons.symbols() }
       </ul>
       <!-- /ko -->
     </div>
-    <!-- ko if: $root.editorMode -->
-      <a class="snippet-side-btn" data-bind="click: function() { hideFixedHeaders(); $parent.showHistory(!$parent.showHistory()); }, css: {'blue': $parent.showHistory() }" title="${ _('Show query history') }">
-        <i class="fa fa-fw fa-history"></i>
-      </a>
-    <!-- /ko -->
   </div>
 </script>
 
 <script type="text/html" id="snippet-result-controls">
   <div class="snippet-actions" style="opacity:1">
     <div style="margin-top:25px;">
-      <a class="snippet-side-btn" href="javascript: void(0)" data-bind="click: function() { $data.showGrid(true); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
+      <a class="snippet-side-btn" href="javascript: void(0)" data-bind="click: function() { $data.showGrid(true); huePubSub.publish('redraw.fixed.headers'); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
         <i class="fa fa-fw fa-th"></i>
       </a>
     </div>
@@ -2134,6 +2142,11 @@ ${ hueIcons.symbols() }
       }, 200);
     });
 
+    huePubSub.subscribe('redraw.fixed.headers', function(){
+      hideFixedHeaders();
+      redrawFixedHeaders(200);
+    });
+
     window.redrawFixedHeaders = redrawFixedHeaders;
 
     function addAce (content, snippetType) {