Преглед изворни кода

HUE-9101 [editor] Move history search into the query history panel

Johan Ahlen пре 6 година
родитељ
комит
8da347825d

+ 90 - 81
desktop/core/src/desktop/js/apps/notebook2/components/ko.queryHistory.js

@@ -27,88 +27,99 @@ export const NAME = 'query-history';
 
 // prettier-ignore
 const TEMPLATE = `
-<!-- ko if: loadingHistory -->
-  <div class="margin-top-10 margin-left-10">
-    <i class="fa fa-spinner fa-spin muted"></i>
-  </div>
-<!-- /ko -->
+<div class="snippet-tab-actions">
+  <form autocomplete="off" class="inline-block">
+    <input class="input-small search-input" type="text" autocorrect="off" autocomplete="do-not-autocomplete" autocapitalize="off" spellcheck="false" placeholder="${ I18n('Search...') }" data-bind="
+        textInput: historyFilter,
+        clearable: historyFilter
+      "/>
+  </form>
+</div>
 
-<!-- ko ifnot: loadingHistory -->
-  <!-- ko if: !history().length -->
-    <!-- ko ifnot: historyFilter -->
-      <div class="margin-top-10 margin-left-10" style="font-style: italic">${ I18n("No queries to be shown.") }</div>
-    <!-- /ko -->
-    <!-- ko if: historyFilter -->
-      <div class="margin-top-10 margin-left-10" style="font-style: italic">${ I18n('No queries found for') } <strong data-bind="text: historyFilter"></strong>.</div>
-    <!-- /ko -->
+<div class="snippet-tab-body">
+  <!-- ko if: loadingHistory -->
+    <div>
+      <h1 class="empty"><i class="fa fa-spinner fa-spin"></i> ${ I18n('Loading...') }</h1>
+    </div>
   <!-- /ko -->
-
-  <!-- ko if: history().length -->
-    <table class="table table-condensed margin-top-10 history-table">
-      <tbody data-bind="foreach: history">
-        <tr data-bind="
-            click: function() {
-              $parent.openNotebook(uuid);
-            },
-            css: {
-              'highlight': uuid === $parent.currentNotebook.uuid(),
-              'pointer': uuid !== $parent.currentNotebook.uuid()
-            }
-          ">
-          <td style="width: 100px" class="muted" data-bind="style: { 'border-top-width': $index() === 0 ? '0' : ''}">
-            <span data-bind="momentFromNow: { data: lastExecuted, interval: 10000, titleFormat: 'LLL' }"></span>
-          </td>
-          <td style="width: 25px" class="muted" data-bind="style: { 'border-top-width': $index() === 0 ? '0' : ''}">
-            <!-- ko switch: status -->
-              <!-- ko case: 'running' -->
-              <div class="history-status" data-bind="tooltip: { title: '${ I18n("Query running") }', placement: 'bottom' }"><i class="fa fa-fighter-jet fa-fw"></i></div>
-              <!-- /ko -->
-              <!-- ko case: 'failed' -->
-              <div class="history-status" data-bind="tooltip: { title: '${ I18n("Query failed") }', placement: 'bottom' }"><i class="fa fa-exclamation fa-fw"></i></div>
-              <!-- /ko -->
-              <!-- ko case: 'available' -->
-              <div class="history-status" data-bind="tooltip: { title: '${ I18n("Result available") }', placement: 'bottom' }"><i class="fa fa-check fa-fw"></i></div>
-              <!-- /ko -->
-              <!-- ko case: 'expired' -->
-              <div class="history-status" data-bind="tooltip: { title: '${ I18n("Result expired") }', placement: 'bottom' }"><i class="fa fa-unlink fa-fw"></i></div>
-              <!-- /ko -->
-            <!-- /ko -->
-          </td>
-          <td style="width: 25px" class="muted" data-bind="
-              ellipsis: {
-                data: name,
-                length: 30
-              },
-              style: {
-                'border-top-width': $index() === 0 ? '0' : ''
-              }
-            "></td>
-          <td data-bind="
-              style: {
-                'border-top-width': $index() === 0 ? '0' : ''
-              },
+  
+  <!-- ko ifnot: loadingHistory -->
+    <!-- ko if: !history().length -->
+      <!-- ko ifnot: historyFilter -->
+        <div class="margin-top-10 margin-left-10" style="font-style: italic">${ I18n("No queries to be shown.") }</div>
+      <!-- /ko -->
+      <!-- ko if: historyFilter -->
+        <div class="margin-top-10 margin-left-10" style="font-style: italic">${ I18n('No queries found for') } <strong data-bind="text: historyFilter"></strong>.</div>
+      <!-- /ko -->
+    <!-- /ko -->
+  
+    <!-- ko if: history().length -->
+      <table class="table table-condensed margin-top-10 history-table">
+        <tbody data-bind="foreach: history">
+          <tr data-bind="
               click: function() {
-                $parent.openNotebook(uuid)
+                $parent.openNotebook(uuid);
               },
-              clickBubble: false
-            "><div data-bind="highlight: { value: query, dialect: $parent.type }"></div></td>
-        </tr>
-      </tbody>
-    </table>
+              css: {
+                'highlight': uuid === $parent.currentNotebook.uuid(),
+                'pointer': uuid !== $parent.currentNotebook.uuid()
+              }
+            ">
+            <td style="width: 100px" class="muted" data-bind="style: { 'border-top-width': $index() === 0 ? '0' : ''}">
+              <span data-bind="momentFromNow: { data: lastExecuted, interval: 10000, titleFormat: 'LLL' }"></span>
+            </td>
+            <td style="width: 25px" class="muted" data-bind="style: { 'border-top-width': $index() === 0 ? '0' : ''}">
+              <!-- ko switch: status -->
+                <!-- ko case: 'running' -->
+                <div class="history-status" data-bind="tooltip: { title: '${ I18n("Query running") }', placement: 'bottom' }"><i class="fa fa-fighter-jet fa-fw"></i></div>
+                <!-- /ko -->
+                <!-- ko case: 'failed' -->
+                <div class="history-status" data-bind="tooltip: { title: '${ I18n("Query failed") }', placement: 'bottom' }"><i class="fa fa-exclamation fa-fw"></i></div>
+                <!-- /ko -->
+                <!-- ko case: 'available' -->
+                <div class="history-status" data-bind="tooltip: { title: '${ I18n("Result available") }', placement: 'bottom' }"><i class="fa fa-check fa-fw"></i></div>
+                <!-- /ko -->
+                <!-- ko case: 'expired' -->
+                <div class="history-status" data-bind="tooltip: { title: '${ I18n("Result expired") }', placement: 'bottom' }"><i class="fa fa-unlink fa-fw"></i></div>
+                <!-- /ko -->
+              <!-- /ko -->
+            </td>
+            <td style="width: 25px" class="muted" data-bind="
+                ellipsis: {
+                  data: name,
+                  length: 30
+                },
+                style: {
+                  'border-top-width': $index() === 0 ? '0' : ''
+                }
+              "></td>
+            <td data-bind="
+                style: {
+                  'border-top-width': $index() === 0 ? '0' : ''
+                },
+                click: function() {
+                  $parent.openNotebook(uuid)
+                },
+                clickBubble: false
+              "><div data-bind="highlight: { value: query, dialect: $parent.type }"></div></td>
+          </tr>
+        </tbody>
+      </table>
+    <!-- /ko -->
+  
+    <div class="pagination" data-bind="visible: historyTotalPages() > 1" style="display: none;">
+      <ul>
+        <li data-bind="css: { 'disabled' : historyCurrentPage() === 1 }">
+          <a href="javascript: void(0);" data-bind="click: prevHistoryPage.bind($data)">${ I18n("Prev") }</a>
+        </li>
+        <li class="active"><span data-bind="text: historyCurrentPage() + '/' + historyTotalPages()"></span></li>
+        <li data-bind="css: { 'disabled' : historyCurrentPage() === historyTotalPages() }">
+          <a href="javascript: void(0);" data-bind="click: nextHistoryPage.bind($data)">${ I18n("Next") }</a>
+        </li>
+      </ul>
+    </div>
   <!-- /ko -->
-
-  <div class="pagination" data-bind="visible: historyTotalPages() > 1" style="display: none;">
-    <ul>
-      <li data-bind="css: { 'disabled' : historyCurrentPage() === 1 }">
-        <a href="javascript: void(0);" data-bind="click: prevHistoryPage.bind($data)">${ I18n("Prev") }</a>
-      </li>
-      <li class="active"><span data-bind="text: historyCurrentPage() + '/' + historyTotalPages()"></span></li>
-      <li data-bind="css: { 'disabled' : historyCurrentPage() === historyTotalPages() }">
-        <a href="javascript: void(0);" data-bind="click: nextHistoryPage.bind($data)">${ I18n("Next") }</a>
-      </li>
-    </ul>
-  </div>
-<!-- /ko -->
+</div>
 `;
 
 const QUERIES_PER_PAGE = 50;
@@ -127,7 +138,7 @@ class QueryHistory extends DisposableComponent {
 
     this.loadingHistory = ko.observable(true);
     this.history = ko.observableArray();
-    this.historyFilter = ko.observable('');
+    this.historyFilter = ko.observable('').extend({ rateLimit: 900 });
 
     this.historyCurrentPage = ko.observable(1);
     this.historyTotalPages = ko.observable(1);
@@ -146,9 +157,7 @@ class QueryHistory extends DisposableComponent {
       }
     });
 
-    this.subscribe(this.historyCurrentPage, () => {
-      this.fetchHistory();
-    });
+    this.subscribe(this.historyCurrentPage, this.fetchHistory.bind(this));
 
     this.fetchHistory();
   }

+ 0 - 17
desktop/core/src/desktop/js/apps/notebook2/notebook.js

@@ -77,23 +77,6 @@ export default class Notebook {
         : []
     );
 
-    // This is to keep the "Saved Query" tab selected when opening a doc from the left assist
-    // TODO: Refactor code to reflect purpose
-    this.history.subscribe(val => {
-      if (
-        this.id() == null &&
-        val.length === 0 &&
-        this.historyFilter() === '' &&
-        !vm.isNotificationManager()
-      ) {
-        this.snippets()[0].currentQueryTab('savedQueries');
-      }
-    });
-
-    this.historyFilter = ko.observable('');
-    this.historyFilterVisible = ko.observable(false);
-    this.historyFilter.extend({ rateLimit: { method: 'notifyWhenChangesStop', timeout: 900 } });
-
     this.schedulerViewModel = null;
     this.schedulerViewModelIsLoaded = ko.observable(false);
     this.schedulerViewerViewModel = ko.observable();

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css


+ 8 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook2.less

@@ -251,6 +251,14 @@
   .snippet-tab-actions {
     padding: 5px;
     height: 30px;
+
+    .search-input {
+      margin: 0;
+      padding: 5px 6px;
+      height: 12px;
+      border-radius: 2px;
+      width: 150px;
+    }
   }
 
   .snippet-tab-actions .btn-group,

+ 1 - 3
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -488,10 +488,8 @@
     <div class="query-history-container" data-bind="onComplete: function(){ redrawFixedHeaders(200); }">
       <div data-bind="delayedOverflow: 'slow', css: resultsKlass" style="margin-top: 5px; position: relative;">
         <ul class="nav nav-tabs nav-tabs-editor">
-          <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}, onClickOutside: function () { if ($parent.historyFilterVisible() && $parent.historyFilter() === '') { $parent.historyFilterVisible(false) } }">
+          <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}">
             <a class="inactive-action" style="display:inline-block" href="#queryHistory" data-toggle="tab">${_('Query History')}</a>
-            <div style="margin-left: -15px;" class="inline-block inactive-action pointer visible-on-hover" title="${_('Search the query history')}" data-bind="click: function(data, e){ $parent.historyFilterVisible(!$parent.historyFilterVisible()); if ($parent.historyFilterVisible()) { window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); } else { $parent.historyFilter('') }}"><i class="snippet-icon fa fa-search"></i></div>
-            <input class="input-small inline-tab-filter" type="text" data-bind="visible: $parent.historyFilterVisible, clearable: $parent.historyFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">
             <div class="dropdown inline-block inactive-action pointer visible-on-hover">
               <a class="" data-toggle="dropdown" href="javascript: void(0)">
                 <i class="fa fa-fw fa-ellipsis-v"></i>

Неке датотеке нису приказане због велике количине промена