Browse Source

HUE-8758 [frontend] Add connector support in the quick query component

Johan Ahlen 5 năm trước cách đây
mục cha
commit
ae46f57b90

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

@@ -6,9 +6,9 @@ exports[`ko.quickQueryContext.js should render component 1`] = `
     component: {
       name: 'hue-drop-down',
       params: {
-        value: interpreter,
+        value: connector,
         labelAttribute: 'displayName',
-        entries: availableInterpreters,
+        entries: availableConnectors,
         linkTitle: 'Active connector'
       }
     }
@@ -31,12 +31,12 @@ exports[`ko.quickQueryContext.js should render component 1`] = `
       <!-- /ko -->
     </div>
   </div></div>
-  <!-- ko if: interpreter() -->
+  <!-- ko if: connector() -->
     <div class=\\"margin-left-10\\" style=\\"display: inline-block\\" data-bind=\\"
       component: {
         name: 'hue-context-selector',
         params: {
-          sourceType: interpreter().type,
+          sourceType: connector().type,
           compute: compute,
           namespace: namespace,
           availableDatabases: availableDatabases,

+ 17 - 19
desktop/core/src/desktop/js/ko/components/contextPopover/ko.quickQueryContext.js

@@ -38,19 +38,19 @@ const TEMPLATE = `
     component: {
       name: '${ DROP_DOWN }',
       params: {
-        value: interpreter,
+        value: connector,
         labelAttribute: 'displayName',
-        entries: availableInterpreters,
+        entries: availableConnectors,
         linkTitle: 'Active connector'
       }
     }
   "></div>
-  <!-- ko if: interpreter() -->
+  <!-- ko if: connector() -->
     <div class="margin-left-10" style="display: inline-block" data-bind="
       component: {
         name: '${ CONTEXT_SELECTOR }',
         params: {
-          sourceType: interpreter().type,
+          sourceType: connector().type,
           compute: compute,
           namespace: namespace,
           availableDatabases: availableDatabases,
@@ -61,7 +61,7 @@ const TEMPLATE = `
     "></div>
   <!-- /ko -->
   <!-- ko ifnot: loadingContext -->
-    <!-- ko with: interpreter -->
+    <!-- ko with: connector -->
       <div style="margin: 10px;" data-bind="
         component: {
           name: '${ SIMPLE_ACE_MULTI }',
@@ -104,8 +104,8 @@ class QuickQueryContext extends DisposableComponent {
   constructor(params) {
     super(params);
 
-    this.availableInterpreters = ko.observableArray();
-    this.interpreter = ko.observable();
+    this.availableConnectors = ko.observableArray();
+    this.connector = ko.observable();
 
     this.availableDatabases = ko.observableArray();
     this.database = ko.observable();
@@ -121,20 +121,20 @@ class QuickQueryContext extends DisposableComponent {
     this.loadingContext = ko.pureComputed(
       () => !this.namespace() || !this.compute() || !this.database()
     );
-    this.dialect = ko.pureComputed(() => this.interpreter() && this.interpreter().dialect);
-    this.type = ko.pureComputed(() => this.interpreter() && this.interpreter().type);
+    this.dialect = ko.pureComputed(() => this.connector() && this.connector().dialect);
+    this.type = ko.pureComputed(() => this.connector() && this.connector().type);
     this.defaultLimit = ko.observable(10);
 
     this.executor = new Executor({
       sourceType: this.type,
       namespace: this.namespace,
       compute: this.compute,
-      connector: this.interpreter,
+      connector: this.connector,
       defaultLimit: this.defaultLimit
     });
 
     this.autocomplete = ko.pureComputed(
-      () => this.interpreter() && { type: this.interpreter().dialect }
+      () => this.connector() && { type: this.connector().dialect, connector: this.connector }
     );
 
     this.updateFromConfig();
@@ -162,20 +162,18 @@ class QuickQueryContext extends DisposableComponent {
 
   updateFromConfig() {
     const configuredSqlConnectors = filterEditorConnectors(connector => connector.is_sql);
-    this.availableInterpreters(configuredSqlConnectors);
+    this.availableConnectors(configuredSqlConnectors);
 
     const found =
-      this.interpreter() &&
-      this.availableInterpreters().some(interpreter => {
-        if (interpreter.type === this.interpreter().type) {
-          this.interpreter(interpreter);
+      this.connector() &&
+      this.availableConnectors().some(connector => {
+        if (connector.type === this.connector().type) {
+          this.connector(connector);
           return true;
         }
       });
     if (!found) {
-      this.interpreter(
-        this.availableInterpreters().length ? this.availableInterpreters()[0] : undefined
-      );
+      this.connector(this.availableConnectors().length ? this.availableConnectors()[0] : undefined);
     }
   }
 }

+ 15 - 8
desktop/core/src/desktop/js/ko/components/simpleAceEditor/ko.simpleAceEditor.js

@@ -26,6 +26,7 @@ import SolrQueryAutocompleter from './solrQueryAutocompleter';
 import SqlAutocompleter from 'sql/sqlAutocompleter';
 import sqlWorkerHandler from 'sql/sqlWorkerHandler';
 import AceGutterHandler from 'ko/bindings/ace/aceGutterHandler';
+import { findEditorConnector } from '../../../utils/hueConfig';
 
 export const NAME = 'hue-simple-ace-editor';
 export const MULTI_NAME = 'hue-simple-ace-editor-multi';
@@ -100,17 +101,23 @@ class SimpleAceEditor {
 
     if (params.autocomplete && ko.unwrap(params.autocomplete)) {
       const autocomplete = ko.unwrap(params.autocomplete);
-      const sourceType =
-        autocomplete.type.indexOf('Query') !== -1
-          ? autocomplete.type.replace('Query', '')
-          : autocomplete.type;
+      let connector = ko.unwrap(autocomplete.connector);
+
+      if (!connector) {
+        const type =
+          autocomplete.type.indexOf('Query') !== -1
+            ? autocomplete.type.replace('Query', '')
+            : autocomplete.type;
+        connector = findEditorConnector(connector => connector.type === type);
+      }
 
       const snippet = {
         autocompleteSettings: {
           temporaryOnly: params.temporaryOnly
         },
-        type: ko.observable(sourceType),
-        dialect: ko.observable(sourceType),
+        type: ko.observable(connector.type),
+        dialect: ko.observable(connector.dialect),
+        connector: ko.observable(connector),
         id: ko.observable($element.attr('id')),
         namespace: params.namespace,
         compute: params.compute,
@@ -137,12 +144,12 @@ class SimpleAceEditor {
           promise.dispose = function() {};
           return promise;
         },
-        isSqlDialect: ko.observable(true),
+        isSqlDialect: ko.observable(connector.is_sql),
         aceCursorPosition: ko.observable(),
         inFocus: ko.observable()
       };
 
-      if (ko.unwrap(sourceType) === 'hive' || ko.unwrap(sourceType) === 'impala') {
+      if (connector.dialect === 'hive' || connector.dialect === 'impala') {
         sqlWorkerHandler.registerWorkers();
         const aceLocationHandler = new AceLocationHandler({
           editor: editor,