Selaa lähdekoodia

HUE-9101 [editor] Move the import and export actions into the new history component

Johan Ahlen 6 vuotta sitten
vanhempi
commit
fa1a85c442

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

@@ -26,6 +26,14 @@ exports[`ko.queryHistory.js should render component 1`] = `
         <i class=\\"fa fa-fw fa-calendar-times-o\\"></i> Clear
       </button>
     </div>
+    <div class=\\"btn-group\\">
+      <button class=\\"btn btn-mini btn-editor\\" data-bind=\\"enable: history().length, click: exportHistory.bind($data)\\" disabled=\\"\\">
+        <i class=\\"fa fa-fw fa-download\\"></i> Export
+      </button>
+      <button class=\\"btn btn-mini btn-editor\\" data-bind=\\"click: importHistory.bind($data)\\">
+        <i class=\\"fa fa-fw fa-upload\\"></i> import
+      </button>
+    </div>
   </div>
 </div><div class=\\"snippet-tab-body\\">
   <!-- ko if: loadingHistory -->
@@ -33,7 +41,7 @@ exports[`ko.queryHistory.js should render component 1`] = `
       <h1 class=\\"empty\\"><i class=\\"fa fa-spinner fa-spin\\"></i> Loading...</h1>
     </div>
   <!-- /ko -->
-  
+
   <!-- ko ifnot: loadingHistory --><!-- /ko -->
 </div></div>"
 `;

+ 38 - 13
desktop/core/src/desktop/js/apps/notebook2/components/ko.queryHistory.js

@@ -25,6 +25,7 @@ import { EXECUTION_STATUS } from 'apps/notebook2/execution/executable';
 import { sleep } from 'utils/hueUtils';
 import hueAnalytics from 'utils/hueAnalytics';
 import huePubSub from 'utils/huePubSub';
+import { SHOW_EVENT } from 'ko/components/ko.importDocumentsModal';
 
 export const NAME = 'query-history';
 export const HISTORY_CLEARED_EVENT = 'query.history.cleared';
@@ -45,7 +46,7 @@ const TEMPLATE = `
     <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="
@@ -59,6 +60,14 @@ const TEMPLATE = `
         <i class="fa fa-fw fa-calendar-times-o"></i> ${ I18n('Clear') }
       </button>
     </div>
+    <div class="btn-group">
+      <button class="btn btn-mini btn-editor" data-bind="enable: history().length, click: exportHistory.bind($data)">
+        <i class="fa fa-fw fa-download"></i> ${ I18n('Export') }
+      </button>
+      <button class="btn btn-mini btn-editor" data-bind="click: importHistory.bind($data)">
+        <i class="fa fa-fw fa-upload"></i> ${ I18n('import') }
+      </button>
+    </div>
   </div>
 </div>
 
@@ -68,7 +77,7 @@ const TEMPLATE = `
       <h1 class="empty"><i class="fa fa-spinner fa-spin"></i> ${ I18n('Loading...') }</h1>
     </div>
   <!-- /ko -->
-  
+
   <!-- ko ifnot: loadingHistory -->
     <!-- ko if: !history().length -->
       <!-- ko ifnot: historyFilter -->
@@ -78,7 +87,7 @@ const TEMPLATE = `
         <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">
@@ -132,7 +141,7 @@ const TEMPLATE = `
         </tbody>
       </table>
     <!-- /ko -->
-  
+
     <div class="pagination" data-bind="visible: historyTotalPages() > 1" style="display: none;">
       <ul>
         <li data-bind="css: { 'disabled' : historyCurrentPage() === 1 }">
@@ -197,11 +206,6 @@ class QueryHistory extends DisposableComponent {
     throttledFetch();
   }
 
-  showClearHistoryModal() {
-    const $modal = $(this.element).find('.clear-history-modal');
-    $modal.modal('show');
-  }
-
   async clearHistory() {
     hueAnalytics.log('notebook', 'clearHistory');
 
@@ -226,6 +230,18 @@ class QueryHistory extends DisposableComponent {
     $modal.modal('hide');
   }
 
+  async exportHistory() {
+    const historyResponse = await apiHelper.getHistory({ type: this.type(), limit: 500 });
+
+    if (historyResponse && historyResponse.history) {
+      window.location.href =
+        window.HUE_BASE_URL +
+        '/desktop/api2/doc/export?history=true&documents=[' +
+        historyResponse.history.map(historyDoc => historyDoc.id).join(',') +
+        ']';
+    }
+  }
+
   async fetchHistory() {
     this.loadingHistory(true);
 
@@ -266,10 +282,8 @@ class QueryHistory extends DisposableComponent {
     this.refreshStatus([EXECUTION_STATUS.available], AVAILABLE_INTERVAL);
   }
 
-  prevHistoryPage() {
-    if (this.historyCurrentPage() !== 1) {
-      this.historyCurrentPage(this.historyCurrentPage() - 1);
-    }
+  importHistory() {
+    huePubSub.publish(SHOW_EVENT, { importedCallback: this.fetchHistory.bind(this) });
   }
 
   nextHistoryPage() {
@@ -284,6 +298,12 @@ class QueryHistory extends DisposableComponent {
     }
   }
 
+  prevHistoryPage() {
+    if (this.historyCurrentPage() !== 1) {
+      this.historyCurrentPage(this.historyCurrentPage() - 1);
+    }
+  }
+
   async refreshStatus(statusesToRefresh, interval) {
     const statusIndex = {};
     statusesToRefresh.forEach(status => {
@@ -335,6 +355,11 @@ class QueryHistory extends DisposableComponent {
       this.refreshStatus(statusesToRefresh, interval);
     }
   }
+
+  showClearHistoryModal() {
+    const $modal = $(this.element).find('.clear-history-modal');
+    $modal.modal('show');
+  }
 }
 
 componentUtils.registerComponent(

+ 1 - 1
desktop/core/src/desktop/js/apps/notebook2/components/ko.snippetResults.js

@@ -76,7 +76,7 @@ const TEMPLATE = `
       </button>
     </div>
   </div>
-  
+
   <div class="snippet-tab-body">
     <div data-bind="visible: type() !== 'table'" style="display:none; margin: 10px 0; overflow-y: auto">
       <!-- ko if: data().length && data()[0][1] != "" -->

+ 0 - 12
desktop/core/src/desktop/js/apps/notebook2/snippet.js

@@ -1155,18 +1155,6 @@ export default class Snippet {
     huePubSub.publish(EXECUTE_ACTIVE_EXECUTABLE_EVENT, this.activeExecutable());
   }
 
-  async exportHistory() {
-    const historyResponse = await apiHelper.getHistory({ type: this.type(), limit: 500 });
-
-    if (historyResponse && historyResponse.history) {
-      window.location.href =
-        window.HUE_BASE_URL +
-        '/desktop/api2/doc/export?history=true&documents=[' +
-        historyResponse.history.map(historyDoc => historyDoc.id).join(',') +
-        ']';
-    }
-  }
-
   fetchExecutionAnalysis() {
     if (this.type() === TYPE.impala) {
       // TODO: Use real query ID

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

@@ -490,15 +490,6 @@
         <ul class="nav nav-tabs nav-tabs-editor">
           <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 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>
-              </a>
-              <ul class="dropdown-menu">
-                <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>
-            </div>
           </li>
           <li class="margin-right-20" data-bind="click: function(){ currentQueryTab('savedQueries'); }, css: {'active': currentQueryTab() == 'savedQueries'}, onClickOutside: function () { if (queriesFilterVisible() && queriesFilter() === '') { queriesFilterVisible(false) } }">
             <a class="inactive-action" style="display:inline-block" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}</a>