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

[editor] Add database selection in the snippet header

It shows the active database in the upper right corner and allows the user to switch in the dropdown. Later we'll make it a combobox with search and hueach.
Johan Ahlen 9 жил өмнө
parent
commit
868441e

+ 6 - 4
desktop/core/src/desktop/static/desktop/js/assist/assistHelper.js

@@ -42,7 +42,7 @@
     var self = this;
     self.i18n = i18n;
     self.user = user;
-    self.lastKnownDatabases = [];
+    self.lastKnownDatabases = {};
   }
 
   AssistHelper.prototype.hasExpired = function (timestamp) {
@@ -392,6 +392,8 @@
    * @param {Function} options.successCallback
    * @param {Function} [options.errorCallback]
    * @param {boolean} [options.silenceErrors]
+   *
+   * @param {string} options.sourceType
    **/
   AssistHelper.prototype.loadDatabases = function (options) {
     var self = this;
@@ -401,10 +403,10 @@
       successCallback: function (data) {
         var databases = data.databases || [];
         // Blacklist of system databases
-        self.lastKnownDatabases = $.grep(databases, function(database) {
+        self.lastKnownDatabases[options.sourceType] = $.grep(databases, function(database) {
           return database !== "_impala_builtins";
         });
-        options.successCallback(self.lastKnownDatabases);
+        options.successCallback(self.lastKnownDatabases[options.sourceType]);
       },
       errorCallback: function (response) {
         if (response.status == 401) {
@@ -413,7 +415,7 @@
           }});
           return;
         }
-        self.lastKnownDatabases = [];
+        self.lastKnownDatabases[options.sourceType] = [];
         self.assistErrorCallback(options)(response);
       }
     }));

+ 3 - 3
desktop/core/src/desktop/static/desktop/js/sqlAutocompleter.js

@@ -68,7 +68,7 @@
         if (ref.indexOf('.') > 0) {
           var refParts = ref.split('.');
 
-          if(self.snippet.getAssistHelper().lastKnownDatabases.indexOf(refParts[0]) > -1) {
+          if(self.snippet.getAssistHelper().lastKnownDatabases[self.snippet.type()].indexOf(refParts[0]) > -1) {
             return {
               database: refParts.shift(),
               table: refParts.join('.')
@@ -300,7 +300,7 @@
       if (! excludeDatabases) {
         // No FROM prefix
         prependedFields = prependedFields.concat(fields);
-        fields = $.map(self.snippet.getAssistHelper().lastKnownDatabases, function(database) {
+        fields = $.map(self.snippet.getAssistHelper().lastKnownDatabases[self.snippet.type()], function(database) {
           return {
             name: database + ".",
             type: "database"
@@ -370,7 +370,7 @@
     var impalaFieldRef = impalaSyntax && beforeCursor.slice(-1) === '.';
 
     if (keywordBeforeCursor === "USE") {
-      var databases = self.snippet.getAssistHelper().lastKnownDatabases;
+      var databases = self.snippet.getAssistHelper().lastKnownDatabases[self.snippet.type()];
       databases.sort();
       callback($.map(databases, function(db, idx) {
         return {

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

@@ -789,7 +789,11 @@ table.airy tr td {
 
 .execution-timer {
   color: #d1d1d1;
-  padding-right: 10px;
+  font-size: 12px;
+  font-weight: lighter;
+}
+
+.active-database span {
   font-size: 12px;
   font-weight: lighter;
 }

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

@@ -166,9 +166,9 @@
       return vm.getSnippetViewSettings(self.type()).aceMode;
     };
 
-    self.isSqlDialect = function () {
+    self.isSqlDialect = ko.pureComputed(function () {
       return vm.getSnippetViewSettings(self.type()).sqlDialect;
-    };
+    });
 
     self.getPlaceHolder = function() {
       return vm.getSnippetViewSettings(self.type()).placeHolder;
@@ -180,6 +180,23 @@
 
     self.database = ko.observable(typeof snippet.database != "undefined" && snippet.database != null ? snippet.database : null);
 
+    self.availableDatabases = ko.observableArray();
+
+    var updateDatabases = function () {
+      if (self.isSqlDialect()) {
+        self.getAssistHelper().loadDatabases({
+          sourceType: self.type(),
+          silenceErrors: true,
+          successCallback: self.availableDatabases
+        });
+      } else {
+        self.availableDatabases([]);
+      }
+    };
+
+    self.isSqlDialect.subscribe(updateDatabases);
+    updateDatabases();
+
     huePubSub.subscribe("assist.database.set", function (databaseDef) {
       if (databaseDef.source === self.type() && self.database() !== databaseDef.name) {
         self.database(databaseDef.name);

+ 11 - 3
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -471,10 +471,18 @@ ${ require.config() }
 </script>
 
 <script type="text/html" id="editor-snippet-header">
-  <div class="hover-actions inline pull-right" style="font-size: 15px;">
-    <a class="inactive-action" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { $data.showLogs(! $data.showLogs()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
+  <div class="hover-actions inline pull-right" style="font-size: 15px; position: relative;">
     <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
-    <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
+    <!-- ko if: availableDatabases().length > 0 -->
+    <a class="inactive-action active-database margin-left-10" data-toggle="dropdown" href="javascript:void(0)"><span data-bind="visible: isSqlDialect, text: database"></span> <i class="fa fa-caret-down"></i></a>
+    <ul class="dropdown-menu" data-bind="foreach: availableDatabases">
+      <li>
+        <a href="javascript:void(0)" data-bind="text: $data, click: function () { $parent.database($data); }"></a>
+      </li>
+    </ul>
+    <!-- /ko -->
+    <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { $data.showLogs(! $data.showLogs()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
+    <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
   </div>
 </script>