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

HUE-9143 [frontend] Add interpreter and context selection to the quick query component

Johan Ahlen 5 жил өмнө
parent
commit
52e9f4198d

+ 2 - 21
desktop/core/src/desktop/js/ko/components/contextPopover/__snapshots__/ko.quickQueryContext.test.js.snap

@@ -2,26 +2,7 @@
 
 exports[`ko.quickQueryContext.js should render component 1`] = `
 "<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;quick-query-context&quot;, params: params }\\"><div class=\\"context-popover-flex-fill\\" style=\\"overflow: auto;\\">
-  <div style=\\"margin: 10px;\\" data-bind=\\"
-    component: { 
-      name: 'hue-simple-ace-editor-multi',
-      params: {
-        autocomplete: autocomplete,
-        value: statement,
-        lines: 5,
-        aceOptions: {
-          minLines: 10,
-          maxLines: 25
-        },
-        mode: dialect,
-        database: database,
-        namespace: namespace,
-        compute: compute,
-        temporaryOnly: true
-      }
-    }
-  \\" id=\\"uuid-uuid\\"><div class=\\"simple-ace-multi-line\\">
-    <div class=\\"ace-editor\\"></div>
-  </div></div>
+  <!-- ko hueSpinner: { spin: loadingConfig, center: true, size: 'xlarge' } --><!-- /ko -->
+  <!-- ko ifnot: loadingConfig --><!-- /ko -->
 </div></div>"
 `;

+ 110 - 25
desktop/core/src/desktop/js/ko/components/contextPopover/ko.quickQueryContext.js

@@ -14,37 +14,74 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import ko from 'knockout';
+import * as ko from 'knockout';
 
 import 'ko/components/simpleAceEditor/ko.simpleAceEditor';
+import 'ko/components/ko.contextSelector';
+import 'ko/components/ko.dropDown';
 
 import componentUtils from 'ko/components/componentUtils';
 import DisposableComponent from 'ko/components/DisposableComponent';
+import { CONFIG_REFRESHED_EVENT, GET_KNOWN_CONFIG_EVENT } from 'utils/hueConfig';
+import huePubSub from 'utils/huePubSub';
 
 export const NAME = 'quick-query-context';
 
 // prettier-ignore
 const TEMPLATE = `
 <div class="context-popover-flex-fill" style="overflow: auto;">
-  <div style="margin: 10px;" data-bind="
-    component: { 
-      name: 'hue-simple-ace-editor-multi',
-      params: {
-        autocomplete: autocomplete,
-        value: statement,
-        lines: 5,
-        aceOptions: {
-          minLines: 10,
-          maxLines: 25
-        },
-        mode: dialect,
-        database: database,
-        namespace: namespace,
-        compute: compute,
-        temporaryOnly: true
+  <!-- ko hueSpinner: { spin: loadingConfig, center: true, size: 'xlarge' } --><!-- /ko -->
+  <!-- ko ifnot: loadingConfig -->
+    <div style="display: inline-block" data-bind="component: { 
+        name: 'hue-drop-down',
+        params: {
+          value: interpreter,
+          labelAttribute: 'displayName',
+          entries: availableInterpreters,
+          linkTitle: 'Active connector'
+        }
       }
-    }
-  "></div>
+    "></div>
+    <!-- ko if: interpreter() -->
+      <div class="margin-left-10" style="display: inline-block">
+        <!-- ko component: {
+          name: 'hue-context-selector',
+          params: {
+            sourceType: interpreter().type,
+            compute: compute,
+            namespace: namespace,
+            availableDatabases: availableDatabases,
+            database: database,
+            hideLabels: true
+          }
+        } --><!-- /ko -->
+      </div>
+    <!-- /ko -->
+    <!-- ko ifnot: loadingContext -->
+    <div style="margin: 10px;" data-bind="
+      component: { 
+        name: 'hue-simple-ace-editor-multi',
+        params: {
+          autocomplete: autocomplete,
+          value: statement,
+          lines: 5,
+          aceOptions: {
+            minLines: 10,
+            maxLines: 25
+          },
+          mode: dialect,
+          database: database,
+          namespace: namespace,
+          compute: compute,
+          temporaryOnly: true
+        }
+      }
+    "></div>
+    <div>
+      
+    </div>
+    <!-- /ko -->
+  <!-- /ko -->
 </div>
 `;
 
@@ -52,15 +89,63 @@ class QuickQueryContext extends DisposableComponent {
   constructor(params) {
     super(params);
 
-    this.database = ko.observable('default');
-    this.statement = ko.observable();
+    this.availableInterpreters = ko.observableArray();
+    this.interpreter = ko.observable();
+
+    this.availableDatabases = ko.observableArray();
+    this.database = ko.observable();
 
     // TODO: Switch over to connector in ko.simpleAceEditor
-    this.dialect = ko.observable('impala');
-    this.namespace = ko.observable({ id: 'foo' });
-    this.compute = ko.observable({ id: 'foo' });
+    this.namespace = ko.observable();
+    this.compute = ko.observable();
+
+    this.loadingConfig = ko.observable(true);
+
+    this.statement = ko.observable();
+
+    this.loadingContext = ko.pureComputed(
+      () => !this.namespace() || !this.compute() || !this.database()
+    );
 
-    this.autocomplete = ko.pureComputed(() => ({ type: this.dialect() }));
+    this.executor = undefined;
+
+    this.dialect = ko.pureComputed(() => this.interpreter() && this.interpreter().dialect);
+    this.autocomplete = ko.pureComputed(
+      () => this.interpreter() && { type: this.interpreter().dialect }
+    );
+
+    this.subscribe(CONFIG_REFRESHED_EVENT, this.updateFromConfig.bind(this));
+    huePubSub.publish(GET_KNOWN_CONFIG_EVENT, this.updateFromConfig.bind(this));
+  }
+
+  updateFromConfig(config) {
+    if (
+      config &&
+      config.app_config &&
+      config.app_config.editor &&
+      config.app_config.editor.interpreters
+    ) {
+      this.availableInterpreters(
+        config.app_config.editor.interpreters.filter(interpreter => interpreter.is_sql)
+      );
+    } else {
+      this.availableInterpreters([]);
+    }
+
+    const found =
+      this.interpreter() &&
+      this.availableInterpreters().some(interpreter => {
+        if (interpreter.type === this.interpreter().type) {
+          this.interpreter(interpreter);
+          return true;
+        }
+      });
+    if (!found) {
+      this.interpreter(
+        this.availableInterpreters().length ? this.availableInterpreters()[0] : undefined
+      );
+    }
+    this.loadingConfig(false);
   }
 }
 

+ 1 - 1
desktop/core/src/desktop/js/ko/components/simpleAceEditor/ko.simpleAceEditor.js

@@ -79,7 +79,7 @@ class SimpleAceEditor {
     editor.setTheme($.totalStorage('hue.ace.theme') || 'ace/theme/hue');
     self.ace(editor);
 
-    if (params.autocomplete) {
+    if (params.autocomplete && ko.unwrap(params.autocomplete)) {
       const autocomplete = ko.unwrap(params.autocomplete);
       const sourceType =
         autocomplete.type.indexOf('Query') !== -1