feat: update selectors

src/components/Selector.vue

@@ -59,9 +59,6 @@ const props = defineProps({
 });
 const selected = ref<string[] | string>(props.value);
 function changeSelected() {
-  if (!props.multiple) {
-    return;
-  }
   const options = props.options.filter((d: Option) =>
     props.multiple
       ? selected.value.includes(d.value)

src/graph/fragments/selector.ts

@@ -33,8 +33,8 @@ export const Layers = {
 export const Instances = {
   variable: "$serviceId: ID!, $duration: Duration!",
   query: `
-  instances: listInstances(duration: $duration, serviceId: $serviceId) {
-      key: id
+  pods: listInstances(duration: $duration, serviceId: $serviceId) {
+    value: id
       label: name
       language
       instanceUUID
@@ -49,8 +49,8 @@ export const Instances = {
 export const Endpoints = {
   variable: "$serviceId: ID!, $keyword: String!",
   query: `
-  endpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
-      key: id
+  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
+      value: id
       label: name
     }
 `,

src/store/modules/selectors.ts

@@ -29,7 +29,7 @@ interface SelectorState {
   currentService: string;
   currentPod: string;
   currentDestService: string;
-  durationTime: any;
+  durationTime: Duration;
 }
 
 export const selectorStore = defineStore({
@@ -69,9 +69,11 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getServiceInstances(): Promise<AxiosResponse> {
+    async getServiceInstances(param?: {
+      serviceId: string;
+    }): Promise<AxiosResponse> {
       const res: AxiosResponse = await graph.query("queryInstances").params({
-        serviceId: this.currentService,
+        serviceId: param ? param.serviceId : this.currentService,
         duration: this.durationTime,
       });
       if (!res.data.errors) {
@@ -81,12 +83,15 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getEndpoints(params: { keyword: string }): Promise<AxiosResponse> {
+    async getEndpoints(params: {
+      keyword: string;
+      serviceId?: string;
+    }): Promise<AxiosResponse> {
       if (!params.keyword) {
         params.keyword = "";
       }
       const res: AxiosResponse = await graph.query("queryEndpoints").params({
-        serviceId: this.currentService,
+        serviceId: params.serviceId || this.currentService,
         duration: this.durationTime,
         keyword: params.keyword,
       });

src/views/dashboard/New.vue

@@ -37,7 +37,7 @@ limitations under the License. -->
     <div class="item">
       <div class="label">{{ t("entityType") }}</div>
       <Selector
-        :value="states.entity"
+        v-model="states.entity"
         :options="EntityType"
         size="small"
         placeholder="Select a entity"

src/views/dashboard/data.ts

@@ -159,47 +159,3 @@ export const ToolIcons = [
   { name: "settings", content: "Settings", id: "settings" },
   { name: "save", content: "Apply", id: "applay" },
 ];
-export const SelectOpts = [
-  {
-    value: "guide",
-    label: "Guide",
-    children: [
-      {
-        value: "disciplines",
-        label: "Disciplines",
-        children: [
-          {
-            value: "consistency",
-            label: "Consistency",
-          },
-          {
-            value: "feedback",
-            label: "Feedback",
-          },
-          {
-            value: "efficiency",
-            label: "Efficiency",
-          },
-          {
-            value: "controllability",
-            label: "Controllability",
-          },
-        ],
-      },
-      {
-        value: "navigation",
-        label: "Navigation",
-        children: [
-          {
-            value: "side nav",
-            label: "Side Navigation",
-          },
-          {
-            value: "top nav",
-            label: "Top Navigation",
-          },
-        ],
-      },
-    ],
-  },
-];

src/views/dashboard/panel/Tool.vue

@@ -33,7 +33,7 @@ limitations under the License. -->
         </span>
         <el-cascader
           placeholder="Please Select data"
-          :options="SelectOpts"
+          :props="propScascader"
           size="mini"
           filterable
           :style="{ minWidth: '300px' }"
@@ -46,7 +46,6 @@ limitations under the License. -->
           :options="selectorStore.services"
           size="mini"
           placeholder="Select a service"
-          :borderRadius="0"
           @change="changeService"
           class="selectors"
         />
@@ -55,7 +54,7 @@ limitations under the License. -->
         <span class="label">$DestinationServiceInstance</span>
         <el-cascader
           placeholder="Select a instance"
-          :options="SelectOpts"
+          :props="propScascader"
           size="mini"
           filterable
           :style="{ minWidth: '300px' }"
@@ -82,28 +81,48 @@ limitations under the License. -->
 import { reactive, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { SelectOpts, EntityType, ToolIcons } from "../data";
+import { EntityType, ToolIcons } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
+import { useTimeoutFn } from "@/hooks/useTimeout";
+import { Option } from "@/types/app";
 
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const params = useRoute().params;
 const states = reactive<{
-  entity: string | string[];
+  entity: string;
   layerId: string | string[];
-  pod: string;
   destService: string;
   destPod: string;
   key: number;
+  pods: { value: string; label: string; children: Option[] }[];
+  pod: Option[];
 }>({
-  pod: "", // instances or endpoints
+  pod: [], // instances or endpoints
   destService: "",
   destPod: "",
-  key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0,
-  entity: params.entity,
+  key: EntityType.filter((d: Option) => d.value === params.entity)[0].key || 0,
+  entity: String(params.entity),
   layerId: params.layerId,
+  pods: [],
 });
+const propScascader = {
+  lazy: true,
+  lazyLoad(node: any, resolve: any) {
+    useTimeoutFn(async () => {
+      console.log(node);
+      const params = node.value ? { serviceId: node.label } : undefined;
+      const pods = fetchPods(states.entity, params);
+      if (node.index) {
+        states.pods[node.index].children = pods;
+      } else {
+        states.pods = pods;
+      }
+      resolve(states.pods);
+    }, 100);
+  },
+};
 
 dashboardStore.setLayer(states.layerId);
 dashboardStore.setEntity(states.entity);
@@ -116,12 +135,6 @@ onBeforeMount(async () => {
     ElMessage.error(json.errors);
     return;
   }
-  const resp = await selectorStore.getServiceInstances();
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  // states.pods =
 });
 
 function changeService(service: { value: string; label: string }) {
@@ -146,6 +159,23 @@ function clickIcons(t: { id: string; content: string; name: string }) {
       dashboardStore.addControl("Widget");
   }
 }
+
+async function fetchPods(type: string, params: unknown) {
+  let resp;
+  switch (type) {
+    case "endpoint":
+      resp = await selectorStore.getEndpoints(params);
+      break;
+    case "serviceInstance":
+      resp = await selectorStore.getServiceInstances(params);
+      break;
+  }
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return [];
+  }
+  return resp.data.pods || [];
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {