Ver Fonte

HUE-9101 [editor] Move clear history logic into the new history component

Johan Ahlen há 6 anos atrás
pai
commit
b4b8e1c8a0

+ 35 - 15
desktop/core/src/desktop/js/apps/notebook2/components/__snapshots__/ko.queryHistory.test.js.snap

@@ -1,19 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.queryHistory.js should render component 1`] = `
-"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;query-history&quot;, params: params }\\"><div class=\\"margin-top-10 margin-left-10\\">
-    <i class=\\"fa fa-spinner fa-spin muted\\"></i>
-  </div><div class=\\"margin-top-10 margin-left-10\\" style=\\"font-style: italic\\">No queries to be shown.</div><div class=\\"margin-top-10 margin-left-10\\" style=\\"font-style: italic\\">No queries found for <strong data-bind=\\"text: historyFilter\\"></strong>.</div><table class=\\"table table-condensed margin-top-10 history-table\\">
-      <tbody data-bind=\\"foreach: history\\"></tbody>
-    </table><div class=\\"pagination\\" data-bind=\\"visible: historyTotalPages() > 1\\" style=\\"display: none;\\">
-    <ul>
-      <li data-bind=\\"css: { 'disabled' : historyCurrentPage() === 1 }\\" class=\\"disabled\\">
-        <a href=\\"javascript: void(0);\\" data-bind=\\"click: prevHistoryPage.bind($data)\\">Prev</a>
-      </li>
-      <li class=\\"active\\"><span data-bind=\\"text: historyCurrentPage() + '/' + historyTotalPages()\\">1/1</span></li>
-      <li data-bind=\\"css: { 'disabled' : historyCurrentPage() === historyTotalPages() }\\" class=\\"disabled\\">
-        <a href=\\"javascript: void(0);\\" data-bind=\\"click: nextHistoryPage.bind($data)\\">Next</a>
-      </li>
-    </ul>
-  </div></div>"
+"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;query-history&quot;, params: params }\\"><div class=\\"clear-history-modal modal hide fade\\">
+  <div class=\\"modal-header\\">
+    <button type=\\"button\\" class=\\"close\\" data-dismiss=\\"modal\\" aria-label=\\"Close\\"><span aria-hidden=\\"true\\">×</span></button>
+    <h2 class=\\"modal-title\\">Confirm History Clear</h2>
+  </div>
+  <div class=\\"modal-body\\">
+    <p>Are you sure you want to clear the query history?</p>
+  </div>
+  <div class=\\"modal-footer\\">
+    <a class=\\"btn\\" data-dismiss=\\"modal\\">No</a>
+    <a class=\\"btn btn-danger disable-feedback\\" data-bind=\\"click: clearHistory.bind($data)\\">Yes</a>
+  </div>
+</div><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=\\"Search...\\" data-bind=\\"
+        textInput: historyFilter,
+        clearable: historyFilter
+      \\">
+  </form>
+  <div class=\\"pull-right\\">
+    <div class=\\"btn-group\\">
+      <button class=\\"btn btn-mini btn-editor\\" data-bind=\\"enable: history().length, click: showClearHistoryModal.bind($data)\\" disabled=\\"\\">
+        <i class=\\"fa fa-fw fa-calendar-times-o\\"></i> Clear
+      </button>
+    </div>
+  </div>
+</div><div class=\\"snippet-tab-body\\">
+  <!-- ko if: loadingHistory -->
+    <div>
+      <h1 class=\\"empty\\"><i class=\\"fa fa-spinner fa-spin\\"></i> Loading...</h1>
+    </div>
+  <!-- /ko -->
+  
+  <!-- ko ifnot: loadingHistory --><!-- /ko -->
+</div></div>"
 `;

+ 73 - 5
desktop/core/src/desktop/js/apps/notebook2/components/ko.queryHistory.js

@@ -14,6 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import $ from 'jquery';
 import * as ko from 'knockout';
 
 import apiHelper from 'api/apiHelper';
@@ -22,11 +23,28 @@ import DisposableComponent from 'ko/components/DisposableComponent';
 import I18n from 'utils/i18n';
 import { EXECUTION_STATUS } from 'apps/notebook2/execution/executable';
 import { sleep } from 'utils/hueUtils';
+import hueAnalytics from 'utils/hueAnalytics';
+import huePubSub from 'utils/huePubSub';
 
 export const NAME = 'query-history';
+export const HISTORY_CLEARED_EVENT = 'query.history.cleared';
 
 // prettier-ignore
 const TEMPLATE = `
+<div class="clear-history-modal modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-label="${ I18n('Close') }"><span aria-hidden="true">&times;</span></button>
+    <h2 class="modal-title">${ I18n('Confirm History Clear') }</h2>
+  </div>
+  <div class="modal-body">
+    <p>${ I18n('Are you sure you want to clear the query history?') }</p>
+  </div>
+  <div class="modal-footer">
+    <a class="btn" data-dismiss="modal">${ I18n('No') }</a>
+    <a class="btn btn-danger disable-feedback" data-bind="click: clearHistory.bind($data)">${ I18n('Yes') }</a>
+  </div>
+</div>
+    
 <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="
@@ -34,6 +52,13 @@ const TEMPLATE = `
         clearable: historyFilter
       "/>
   </form>
+  <div class="pull-right">
+    <div class="btn-group">
+      <button class="btn btn-mini btn-editor" data-bind="enable: history().length, click: showClearHistoryModal.bind($data)">
+        <i class="fa fa-fw fa-calendar-times-o"></i> ${ I18n('Clear') }
+      </button>
+    </div>
+  </div>
 </div>
 
 <div class="snippet-tab-body">
@@ -130,11 +155,12 @@ const STARTING_RUNNING_INTERVAL = 30000;
 const trimEllipsis = str => str.substring(0, 1000) + (str.length > 1000 ? '...' : '');
 
 class QueryHistory extends DisposableComponent {
-  constructor(params) {
+  constructor(params, element) {
     super();
     this.currentNotebook = params.currentNotebook;
     this.type = params.type;
     this.openFunction = params.openFunction;
+    this.element = element;
 
     this.loadingHistory = ko.observable(true);
     this.history = ko.observableArray();
@@ -149,17 +175,52 @@ class QueryHistory extends DisposableComponent {
       this.refreshStatusFailed = true; // Cancels the status check intervals
     });
 
+    let fetchTimeout = -1;
+    const throttledFetch = () => {
+      window.clearTimeout(fetchTimeout);
+      fetchTimeout = window.setTimeout(this.fetchHistory.bind(this), 10);
+    };
+
     this.subscribe(this.historyFilter, () => {
       if (this.historyCurrentPage() !== 1) {
         this.historyCurrentPage(1);
       } else {
-        this.fetchHistory();
+        throttledFetch();
       }
     });
 
-    this.subscribe(this.historyCurrentPage, this.fetchHistory.bind(this));
+    this.subscribe(this.historyCurrentPage, throttledFetch);
+
+    throttledFetch();
+  }
+
+  showClearHistoryModal() {
+    const $modal = $(this.element).find('.clear-history-modal');
+    $modal.modal('show');
+  }
+
+  async clearHistory() {
+    hueAnalytics.log('notebook', 'clearHistory');
+
+    apiHelper
+      .clearNotebookHistory({
+        notebookJson: await this.currentNotebook.toContextJson(),
+        docType: this.type()
+      })
+      .then(() => {
+        this.history.removeAll();
+        this.historyTotalPages(1);
+        this.historyFilter('');
+        huePubSub.publish(HISTORY_CLEARED_EVENT);
+      })
+      .fail(xhr => {
+        if (xhr.status !== 502) {
+          $(document).trigger('error', xhr.responseText);
+        }
+      });
 
-    this.fetchHistory();
+    const $modal = $(this.element).find('.clear-history-modal');
+    $modal.modal('hide');
   }
 
   async fetchHistory() {
@@ -273,4 +334,11 @@ class QueryHistory extends DisposableComponent {
   }
 }
 
-componentUtils.registerComponent(NAME, QueryHistory, TEMPLATE);
+componentUtils.registerComponent(
+  NAME,
+  {
+    createViewModel: (params, componentInfo) =>
+      new QueryHistory(params, componentInfo.element.parentElement)
+  },
+  TEMPLATE
+);

+ 9 - 26
desktop/core/src/desktop/js/apps/notebook2/notebook.js

@@ -25,6 +25,7 @@ import hueUtils from 'utils/hueUtils';
 import sessionManager from 'apps/notebook2/execution/sessionManager';
 
 import Snippet, { STATUS as SNIPPET_STATUS } from 'apps/notebook2/snippet';
+import { HISTORY_CLEARED_EVENT } from 'apps/notebook2/components/ko.queryHistory';
 
 export default class Notebook {
   constructor(vm, notebookRaw) {
@@ -123,6 +124,14 @@ export default class Notebook {
       }
     }
 
+    huePubSub.subscribe(HISTORY_CLEARED_EVENT, () => {
+      if (this.isHistory()) {
+        this.id(null);
+        this.uuid(hueUtils.UUID());
+        this.parentVm.changeURL(this.parentVm.URLS.editor + '?type=' + this.parentVm.editorType());
+      }
+    });
+
     huePubSub.subscribeOnce(
       'assist.db.panel.ready',
       () => {
@@ -182,32 +191,6 @@ export default class Notebook {
     return newSnippet;
   }
 
-  async clearHistory() {
-    hueAnalytics.log('notebook', 'clearHistory');
-    apiHelper
-      .clearNotebookHistory({
-        notebookJson: await this.toContextJson(),
-        docType: this.selectedSnippet(),
-        isNotificationManager: this.parentVm.isNotificationManager()
-      })
-      .then(() => {
-        this.history.removeAll();
-        if (this.isHistory()) {
-          this.id(null);
-          this.uuid(hueUtils.UUID());
-          this.parentVm.changeURL(
-            this.parentVm.URLS.editor + '?type=' + this.parentVm.editorType()
-          );
-        }
-      })
-      .fail(xhr => {
-        if (xhr.status !== 502) {
-          $(document).trigger('error', xhr.responseText);
-        }
-      });
-    $(document).trigger('hideHistoryModal');
-  }
-
   clearResults() {
     this.snippets().forEach(snippet => {
       snippet.result.clear();

Diff do ficheiro suprimidas por serem muito extensas
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css


+ 1 - 1
desktop/libs/notebook/src/notebook/static/notebook/less/notebook2.less

@@ -249,7 +249,7 @@
   }
 
   .snippet-tab-actions {
-    padding: 5px;
+    padding: 10px 5px 5px 5px;
     height: 30px;
 
     .search-input {

+ 0 - 22
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -495,14 +495,6 @@
                 <i class="fa fa-fw fa-ellipsis-v"></i>
               </a>
               <ul class="dropdown-menu">
-                <li data-bind="visible: $parent.history().length > 0">
-                  <!-- ko if: editorMode -->
-                  <a data-target="#clearHistoryModal${ suffix }" data-toggle="modal" rel="tooltip">
-                    <i class="fa fa-fw fa-calendar-times-o"></i> Clear
-                  </a>
-                  <!-- /ko -->
-                  <!-- ko ifnot: editorMode --><!-- /ko -->
-                </li>
                 <li><a href="javascript:void(0);" data-bind="click: exportHistory.bind($data)"><i class="fa fa-fw fa-download"></i> ${_('Export')}</a></li>
                 <li><a href="javascript:void(0);" data-bind="publish: { 'show.import.documents.modal': { importedCallback: refreshHistory.bind($data.parentNotebook), isHistory: true }}"><i class="fa fa-fw fa-upload"></i> ${_('Import' )}</a></li>
               </ul>
@@ -1430,20 +1422,6 @@
     </div>
   </div>
 
-  <div id="clearHistoryModal${ suffix }" class="modal hide fade">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="${ _('Close') }"><span aria-hidden="true">&times;</span></button>
-      <h2 class="modal-title">${_('Confirm History Clear')}</h2>
-    </div>
-    <div class="modal-body">
-      <p>${_('Are you sure you want to clear the query history?')}</p>
-    </div>
-    <div class="modal-footer">
-      <a class="btn" data-dismiss="modal">${_('No')}</a>
-      <a class="btn btn-danger disable-feedback" data-bind="click: function() { $root.selectedNotebook().clearHistory(); }">${_('Yes')}</a>
-    </div>
-  </div>
-
   <!-- ko if: $root.selectedNotebook() -->
   <!-- ko with: $root.selectedNotebook() -->
   <div id="retryModal${ suffix }" class="modal hide fade" data-keyboard="false" data-backdrop="static">

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff