Переглянути джерело

[frontend] Add a SqlContextSelector Vue component

Johan Ahlen 4 роки тому
батько
коміт
c162081f8f

+ 23 - 0
desktop/core/src/desktop/js/components/SqlContextSelector.d.ts

@@ -0,0 +1,23 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Compute, EditorInterpreter, Namespace } from 'config/types';
+
+export interface SqlContext {
+  connector: EditorInterpreter;
+  namespace: Namespace;
+  compute: Compute;
+}

+ 84 - 0
desktop/core/src/desktop/js/components/SqlContextSelector.vue

@@ -0,0 +1,84 @@
+<template>
+  <DropdownMenu
+    :if="connectors.length > 1"
+    :link="true"
+    :text="modelValue?.connector.name || I18n('Source')"
+  >
+    <DropdownMenuButton
+      v-for="connector in connectors"
+      :key="connector.id"
+      @click="connectorSelected(connector)"
+    >
+      {{ connector.displayName }}
+    </DropdownMenuButton>
+  </DropdownMenu>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType, ref, toRefs } from 'vue';
+
+  import DropdownMenuButton from './dropdown/DropdownMenuButton.vue';
+  import DropdownMenu from './dropdown/DropdownMenu.vue';
+  import { SqlContext } from './SqlContextSelector';
+  import SubscriptionTracker from './utils/SubscriptionTracker';
+  import { EditorInterpreter } from 'config/types';
+  import { filterEditorConnectors, getConfig } from 'config/hueConfig';
+  import { CONFIG_REFRESHED_TOPIC, ConfigRefreshedEvent } from 'config/events';
+  import I18n from 'utils/i18n';
+  import { getNamespaces } from '../catalog/contextCatalog';
+
+  export default defineComponent({
+    name: 'SqlContextSelector',
+    components: { DropdownMenuButton, DropdownMenu },
+    props: {
+      modelValue: {
+        type: Object as PropType<SqlContext | null>,
+        default: null
+      }
+    },
+    emits: ['update:model-value'],
+    setup(props, { emit }) {
+      const { modelValue } = toRefs(props);
+      const subTracker = new SubscriptionTracker();
+      const connectors = ref<EditorInterpreter[]>([]);
+
+      const connectorSelected = async (connector: EditorInterpreter | null) => {
+        if (connector) {
+          const { namespaces } = await getNamespaces({ connector });
+          const namespacesWithCompute = namespaces.filter(namespace => namespace.computes.length);
+          if (namespacesWithCompute.length) {
+            // TODO: Add support for namespace and compute selection
+            const namespace = namespacesWithCompute[0];
+            const compute = namespace.computes[0];
+            emit('update:model-value', { connector, namespace, compute });
+          } else {
+            console.warn(`Couldn't find a namespace and/or compute for connector: ${connector.id}`);
+          }
+        }
+      };
+
+      const updateConnectors = () => {
+        connectors.value = filterEditorConnectors(connector => connector.is_sql);
+
+        let updatedConnector: EditorInterpreter | undefined = undefined;
+        // Set the activeConnector to 1. updated version, 2. same dialect, 3. first connector
+        if (modelValue.value) {
+          updatedConnector =
+            connectors.value.find(connector => connector.id === modelValue.value!.connector.id) ||
+            connectors.value.find(
+              connector => connector.dialect === modelValue.value!.connector.dialect
+            );
+        }
+        if (!updatedConnector && connectors.value.length) {
+          updatedConnector = connectors.value[0];
+        }
+        connectorSelected(updatedConnector || null);
+      };
+
+      getConfig().then(updateConnectors);
+      subTracker.subscribe<ConfigRefreshedEvent>(CONFIG_REFRESHED_TOPIC, updateConnectors);
+
+      return { connectors, connectorSelected, I18n };
+    }
+  });
+</script>