feat: update dashboard tool

src/store/modules/selectors.ts

@@ -77,7 +77,7 @@ export const selectorStore = defineStore({
         duration: this.durationTime,
       });
       if (!res.data.errors) {
-        this.instances = res.data.data.instances || [];
+        this.instances = res.data.data.pods || [];
         this.pods = this.instances;
         this.currentPod = this.pods.length ? this.pods[0].value : "";
       }
@@ -96,7 +96,7 @@ export const selectorStore = defineStore({
         keyword: params.keyword,
       });
       if (!res.data.errors) {
-        this.endpoints = res.data.data.endpoints || [];
+        this.endpoints = res.data.data.pods || [];
         this.pods = this.endpoints;
         this.currentPod = this.pods.length ? this.pods[0].value : "";
       }

src/views/dashboard/configuration/ConfigEdit.vue

@@ -64,7 +64,7 @@ limitations under the License. -->
         <el-collapse-item :title="t('selectVisualization')" name="2">
           <div class="chart-types">
             <span
-              v-for="(type, index) in ChartTypes"
+              v-for="(type, index) in states.visType"
               :key="index"
               @click="changeChartType(type)"
               :class="{ active: type.value === states.graph.type }"
@@ -107,6 +107,7 @@ limitations under the License. -->
 <script lang="ts">
 import { reactive, defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { ElMessage } from "element-plus";
@@ -115,6 +116,7 @@ import {
   MetricQueryTypes,
   ChartTypes,
   DefaultGraphConfig,
+  PodsChartTypes,
 } from "../data";
 import { Option } from "@/types/app";
 import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard";
@@ -137,6 +139,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
     const { selectedGrid } = dashboardStore;
+    const params = useRoute().params;
     const states = reactive<{
       metrics: string[];
       valueTypes: Option[];
@@ -148,6 +151,7 @@ export default defineComponent({
       graph: GraphConfig;
       widget: WidgetConfig | any;
       standard: StandardConfig;
+      visType: Option[];
     }>({
       metrics: selectedGrid.metrics || [],
       valueTypes: [],
@@ -159,11 +163,20 @@ export default defineComponent({
       graph: selectedGrid.graph,
       widget: selectedGrid.widget,
       standard: selectedGrid.standard,
+      visType: [],
     });
     if (states.metrics[0]) {
       queryMetricType(states.metrics[0]);
     }
 
+    if (PodsChartTypes.includes(String(params.entity))) {
+      states.visType = ChartTypes.filter(
+        (d: Option) => !PodsChartTypes.includes(d.value)
+      );
+    } else {
+      states.visType = ChartTypes;
+    }
+
     async function changeMetrics(arr: Option[]) {
       if (!arr.length) {
         states.valueTypes = [];

src/views/dashboard/data.ts

@@ -14,6 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export const PodsChartTypes = ["EndpointList", "InstanceList"];
+
 export const ChartTypes = [
   { label: "Bar", value: "Bar" },
   { label: "Line", value: "Line" },

src/views/dashboard/panel/Tool.vue

@@ -15,10 +15,10 @@ limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
     <div class="flex-h">
-      <div class="selectors-item" v-if="states.key < 3">
+      <div class="selectors-item">
         <span class="label">$Service</span>
         <Selector
-          :value="selectorStore.currentService"
+          v-model="selectorStore.currentService"
           :options="selectorStore.services"
           size="mini"
           placeholder="Select a service"
@@ -31,18 +31,20 @@ limitations under the License. -->
         <span class="label">
           {{ states.entity === "endpoint" ? "$Endpoint" : "$ServiceInstance" }}
         </span>
-        <el-cascader
+        <Selector
-          placeholder="Please Select data"
+          v-model="selectorStore.currentPod"
-          :props="propScascader"
+          :options="selectorStore.pods"
           size="mini"
-          filterable
+          placeholder="Select a data"
-          :style="{ minWidth: '300px' }"
+          @change="changePods"
+          class="selectors"
+          :borderRadius="4"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 2">
         <span class="label">$DestinationService</span>
         <Selector
-          :value="selectorStore.currentDestService"
+          v-model="selectorStore.currentDestService"
           :options="selectorStore.services"
           size="mini"
           placeholder="Select a service"
@@ -52,12 +54,14 @@ limitations under the License. -->
       </div>
       <div class="selectors-item" v-if="states.key === 4">
         <span class="label">$DestinationServiceInstance</span>
-        <el-cascader
+        <Selector
-          placeholder="Select a instance"
+          v-model="selectorStore.currentPod"
-          :props="propScascader"
+          :options="selectorStore.pods"
           size="mini"
-          filterable
+          placeholder="Select a data"
-          :style="{ minWidth: '300px' }"
+          @change="changePods"
+          class="selectors"
+          :borderRadius="4"
         />
       </div>
     </div>
@@ -84,7 +88,6 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 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();
@@ -96,34 +99,13 @@ const states = reactive<{
   destService: string;
   destPod: string;
   key: number;
-  pods: { value: string; label: string; children: Option[] }[];
-  pod: Option[];
 }>({
-  pod: [], // instances or endpoints
   destService: "",
   destPod: "",
   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);
 onBeforeMount(async () => {
@@ -135,10 +117,24 @@ onBeforeMount(async () => {
     ElMessage.error(json.errors);
     return;
   }
+  fetchPods(states.entity);
 });
 
-function changeService(service: { value: string; label: string }) {
+async function changeService(service: Option[]) {
-  selectorStore.setCurrentService(service.value);
+  if (service[0]) {
+    selectorStore.setCurrentService(service[0].value);
+    fetchPods(states.entity);
+  } else {
+    selectorStore.setCurrentService("");
+  }
+}
+
+function changePods(pod: Option[]) {
+  if (pod[0]) {
+    selectorStore.setCurrentPod(pod[0].value);
+  } else {
+    selectorStore.setCurrentPod("");
+  }
 }
 
 function clickIcons(t: { id: string; content: string; name: string }) {
@@ -160,21 +156,20 @@ function clickIcons(t: { id: string; content: string; name: string }) {
   }
 }
 
-async function fetchPods(type: string, params: unknown) {
+async function fetchPods(type: string) {
   let resp;
   switch (type) {
     case "endpoint":
-      resp = await selectorStore.getEndpoints(params);
+      resp = await selectorStore.getEndpoints();
       break;
     case "serviceInstance":
-      resp = await selectorStore.getServiceInstances(params);
+      resp = await selectorStore.getServiceInstances();
       break;
   }
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return [];
   }
-  return resp.data.pods || [];
 }
 </script>
 <style lang="scss" scoped>