refactor: update selectors structure

src/hooks/useProcessor.ts

@@ -33,7 +33,7 @@ export function useQueryProcessor(config: any) {
   const variables: string[] = [`$duration: Duration!`];
   const { currentPod, currentService, currentDestPod, currentDestService } =
     selectorStore;
-  const { normal, destNormal, entity } = dashboardStore;
+  const { entity } = dashboardStore;
   const isRelation = [
     "ServiceRelation",
     "ServiceInstanceRelation",
@@ -53,8 +53,8 @@ export function useQueryProcessor(config: any) {
         name,
         parentService: ["Service", "All"].includes(entity)
           ? null
-          : currentService,
-        normal: normal,
+          : currentService.value,
+        normal: currentService.normal,
         scope: entity,
         topN: 10,
         order: "DES",
@@ -69,14 +69,14 @@ export function useQueryProcessor(config: any) {
         name,
         entity: {
           scope: entity,
-          serviceName: entity === "All" ? undefined : currentService,
-          normal: entity === "All" ? undefined : normal,
+          serviceName: entity === "All" ? undefined : currentService.value,
+          normal: entity === "All" ? undefined : currentService.normal,
           serviceInstanceName: entity.includes("ServiceInstance")
             ? currentPod
             : undefined,
           endpointName: entity.includes("Endpoint") ? currentPod : undefined,
-          destNormal: entity === "All" ? undefined : undefined,
-          destServiceName: isRelation ? currentDestService : undefined,
+          destNormal: isRelation ? currentDestService.normal : undefined,
+          destServiceName: isRelation ? currentDestService.value : undefined,
           destServiceInstanceName:
             entity === "ServiceInstanceRelation" ? currentDestPod : undefined,
           destEndpointName:

src/store/modules/dashboard.ts

@@ -34,8 +34,6 @@ interface DashboardState {
   activedGridItem: string;
   durationTime: Duration;
   selectorStore: any;
-  normal: boolean;
-  destNormal: boolean;
 }
 
 export const dashboardStore = defineStore({
@@ -49,8 +47,6 @@ export const dashboardStore = defineStore({
     activedGridItem: "",
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
-    normal: true,
-    destNormal: true,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {

src/store/modules/selectors.ts

@@ -16,19 +16,20 @@
  */
 import { defineStore } from "pinia";
 import { Option, Duration } from "@/types/app";
+import { Service } from "@/types/selector";
 import { store } from "@/store";
 import graph from "@/graph";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface SelectorState {
-  services: Option[];
+  services: Service[];
   instances: Option[];
   pods: Option[];
   endpoints: Option[];
-  currentService: string;
+  currentService: Nullable<Service>;
   currentPod: string;
-  currentDestService: string;
+  currentDestService: Nullable<Service>;
   currentDestPod: string;
   durationTime: Duration;
 }
@@ -40,14 +41,14 @@ export const selectorStore = defineStore({
     instances: [],
     pods: [],
     endpoints: [],
-    currentService: "",
+    currentService: null,
     currentPod: "",
-    currentDestService: "",
+    currentDestService: null,
     currentDestPod: "",
     durationTime: useAppStoreWithOut().durationTime,
   }),
   actions: {
-    setCurrentService(service: string) {
+    setCurrentService(service: Service) {
       this.currentService = service;
     },
     setCurrentPod(pod: string) {
@@ -65,17 +66,19 @@ export const selectorStore = defineStore({
 
       if (!res.data.errors) {
         this.services = res.data.data.services || [];
-        this.currentService = this.services.length
-          ? this.services[0].value
-          : "";
+        this.currentService = this.services.length ? this.services[0] : null;
       }
       return res.data;
     },
     async getServiceInstances(param?: {
       serviceId: string;
-    }): Promise<AxiosResponse> {
+    }): Promise<Nullable<AxiosResponse>> {
+      const serviceId = param ? param.serviceId : this.currentService?.id;
+      if (!serviceId) {
+        return null;
+      }
       const res: AxiosResponse = await graph.query("queryInstances").params({
-        serviceId: param ? param.serviceId : this.currentService,
+        serviceId,
         duration: this.durationTime,
       });
       if (!res.data.errors) {
@@ -88,15 +91,19 @@ export const selectorStore = defineStore({
     async getEndpoints(params?: {
       keyword?: string;
       serviceId?: string;
-    }): Promise<AxiosResponse> {
+    }): Promise<Nullable<AxiosResponse>> {
       if (!params) {
         params = {};
       }
       if (!params.keyword) {
         params.keyword = "";
       }
+      const serviceId = params.serviceId || this.currentService?.id;
+      if (!serviceId) {
+        return null;
+      }
       const res: AxiosResponse = await graph.query("queryEndpoints").params({
-        serviceId: params.serviceId || this.currentService,
+        serviceId,
         duration: this.durationTime,
         keyword: params.keyword,
       });

src/types/selector.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF 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.
+ */
+export type Service = {
+  id: string;
+  label: string;
+  value: string;
+  layers: string[];
+  normal: boolean;
+  group: string;
+};

src/views/dashboard/graphs/EndpointList.vue

@@ -39,7 +39,7 @@ limitations under the License. -->
           <router-link
             target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/endpoint/${selectorStore.currentService}/${scope.row.value}/${config.dashboardName}`"
+            :to="`/dashboard/${scope.row.layer}/endpoint/${selectorStore.currentService.value}/${scope.row.value}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}

src/views/dashboard/graphs/InstanceList.vue

@@ -39,7 +39,7 @@ limitations under the License. -->
           <router-link
             target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/serviceInstance/${selectorStore.currentService}/${scope.row.value}/${config.dashboardName}`"
+            :to="`/dashboard/${scope.row.layer}/serviceInstance/${selectorStore.currentService.value}/${scope.row.value}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}

src/views/dashboard/graphs/ServiceList.vue

@@ -39,7 +39,7 @@ limitations under the License. -->
           <router-link
             target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/service/${selectorStore.currentService}/${config.dashboardName}`"
+            :to="`/dashboard/${scope.row.layer}/service/${selectorStore.currentService.value}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}

src/views/dashboard/panel/Tool.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
       <div class="selectors-item">
         <span class="label">$Service</span>
         <Selector
-          v-model="selectorStore.currentService"
+          v-model="states.currentService"
           :options="selectorStore.services"
           size="mini"
           placeholder="Select a service"
@@ -82,13 +82,14 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { reactive, onBeforeMount } from "vue";
+import { reactive } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { EntityType, ToolIcons } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
+import { Service } from "@/types/selector";
 
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
@@ -99,12 +100,15 @@ const states = reactive<{
   destService: string;
   destPod: string;
   key: number;
+  currentService: string;
 }>({
   destService: "",
   destPod: "",
   key: EntityType.filter((d: Option) => d.value === params.entity)[0].key || 0,
   entity: String(params.entity),
   layerId: params.layerId,
+  currentService:
+    (selectorStore.currentService && selectorStore.currentService.value) || "",
 });
 dashboardStore.setLayer(states.layerId);
 dashboardStore.setEntity(states.entity);
@@ -123,9 +127,9 @@ async function getServices() {
   fetchPods(states.entity);
 }
 
-async function changeService(service: Option[]) {
+async function changeService(service: Service[]) {
   if (service[0]) {
-    selectorStore.setCurrentService(service[0].value);
+    selectorStore.setCurrentService(service[0]);
     fetchPods(states.entity);
   } else {
     selectorStore.setCurrentService("");