feat: switch dashboard with entity

src/graph/fragments/selector.ts

@@ -36,7 +36,8 @@ export const Instances = {
   variable: "$serviceId: ID!, $duration: Duration!",
   query: `
   pods: listInstances(duration: $duration, serviceId: $serviceId) {
-    value: id
+     id
+     value: name
       label: name
       language
       instanceUUID
@@ -52,7 +53,8 @@ export const Endpoints = {
   variable: "$serviceId: ID!, $keyword: String!",
   query: `
   pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
-      value: id
+    id
+    value: name
      label: name
     }
 `,

src/hooks/useProcessor.ts

@@ -32,14 +32,11 @@ export function useQueryProcessor(config: any) {
     duration: appStore.durationTime,
   };
   const variables: string[] = [`$duration: Duration!`];
-  const { currentPod, currentService, currentDestPod, currentDestService } =
-    selectorStore;
-  const { entity } = dashboardStore;
   const isRelation = [
     "ServiceRelation",
     "ServiceInstanceRelation",
     "EndpointRelation",
-  ].includes(entity);
+  ].includes(dashboardStore.entity);
   const fragment = config.metrics.map((name: string, index: number) => {
     const metricType = config.metricTypes[index] || "";
     const labels = ["0", "1", "2", "3", "4"];
@@ -52,11 +49,11 @@ export function useQueryProcessor(config: any) {
       variables.push(`$condition${index}: TopNCondition!`);
       conditions[`condition${index}`] = {
         name,
-        parentService: ["Service", "All"].includes(entity)
+        parentService: ["Service", "All"].includes(dashboardStore.entity)
           ? null
-          : currentService.value,
-        normal: currentService.normal,
-        scope: entity,
+          : selectorStore.currentService.value,
+        normal: selectorStore.currentService.normal,
+        scope: dashboardStore.entity,
         topN: 10,
         order: "DES",
       };
@@ -69,19 +66,35 @@ export function useQueryProcessor(config: any) {
       conditions[`condition${index}`] = {
         name,
         entity: {
-          scope: entity,
-          serviceName: entity === "All" ? undefined : currentService.value,
-          normal: entity === "All" ? undefined : currentService.normal,
-          serviceInstanceName: entity.includes("ServiceInstance")
-            ? currentPod
+          scope: dashboardStore.entity,
+          serviceName:
+            dashboardStore.entity === "All"
+              ? undefined
+              : selectorStore.currentService.value,
+          normal:
+            dashboardStore.entity === "All"
+              ? undefined
+              : selectorStore.currentService.normal,
+          serviceInstanceName: dashboardStore.entity.includes("ServiceInstance")
+            ? selectorStore.currentPod
+            : undefined,
+          endpointName: dashboardStore.entity.includes("Endpoint")
+            ? selectorStore.currentPod
+            : undefined,
+          destNormal: isRelation
+            ? selectorStore.currentDestService.normal
+            : undefined,
+          destServiceName: isRelation
+            ? selectorStore.currentDestService.value
             : undefined,
-          endpointName: entity.includes("Endpoint") ? currentPod : undefined,
-          destNormal: isRelation ? currentDestService.normal : undefined,
-          destServiceName: isRelation ? currentDestService.value : undefined,
           destServiceInstanceName:
-            entity === "ServiceInstanceRelation" ? currentDestPod : undefined,
+            dashboardStore.entity === "ServiceInstanceRelation"
+              ? selectorStore.currentDestPod
+              : undefined,
           destEndpointName:
-            entity === "EndpointRelation" ? currentDestPod : undefined,
+            dashboardStore.entity === "EndpointRelation"
+              ? selectorStore.currentDestPod
+              : undefined,
         },
       };
     }

src/store/data.ts

@@ -35,15 +35,65 @@ export const ConfigData: any = {
   w: 8,
   h: 12,
   i: "0",
-  metrics: ["service_resp_time", "service_apdex"],
-  metricTypes: ["readMetricsValues", "readMetricsValues"],
+  metrics: ["service_resp_time"],
+  metricTypes: ["readMetricsValues"],
   type: "Widget",
   widget: {
-    title: "Title",
+    title: "service_resp_time",
     tips: "Tooltip",
   },
   graph: {
     type: "Line",
+    showXAxis: true,
+    showYAxis: true,
+  },
+  standard: {
+    sortOrder: "DEC",
+    unit: "min",
+  },
+  children: [],
+};
+export const ConfigData1: any = {
+  x: 0,
+  y: 0,
+  w: 8,
+  h: 12,
+  i: "0",
+  metrics: ["service_instance_resp_time"],
+  metricTypes: ["readMetricsValues"],
+  type: "Widget",
+  widget: {
+    title: "service_instance_resp_time",
+    tips: "Tooltip",
+  },
+  graph: {
+    type: "Line",
+    showXAxis: true,
+    showYAxis: true,
+  },
+  standard: {
+    sortOrder: "DEC",
+    unit: "min",
+  },
+  children: [],
+};
+export const ConfigData2: any = {
+  x: 0,
+  y: 0,
+  w: 8,
+  h: 12,
+  i: "0",
+  metrics: ["endpoint_avg"],
+  metricTypes: ["readMetricsValues"],
+  type: "Widget",
+  widget: {
+    title: "endpoint_avg",
+    tips: "Tooltip",
+  },
+  graph: {
+    type: "Line",
+    showXAxis: true,
+    showYAxis: true,
   },
   standard: {
     sortOrder: "DEC",

src/store/modules/dashboard.ts

@@ -18,7 +18,7 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graph from "@/graph";
-import { ConfigData } from "../data";
+import { ConfigData, ConfigData1, ConfigData2 } from "../data";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl } from "../data";
@@ -144,6 +144,12 @@ export const dashboardStore = defineStore({
     },
     setEntity(type: string) {
       this.entity = type;
+      if (type === "ServiceInstance") {
+        this.layout = [ConfigData1];
+      }
+      if (type === "Endpoint") {
+        this.layout = [ConfigData2];
+      }
     },
     setConfigs(param: { [key: string]: unknown }) {
       const actived = this.activedGridItem.split("-");

src/views/dashboard/Edit.vue

@@ -35,8 +35,8 @@ import Tool from "./panel/Tool.vue";
 import ConfigEdit from "./configuration/ConfigEdit.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
-const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+const { t } = useI18n();
 // fetch layout data from serve side
 // const layout: any[] = [
 //   { x: 0, y: 0, w: 4, h: 12, i: "0" },
@@ -56,6 +56,7 @@ const dashboardStore = useDashboardStore();
 //   { x: 8, y: 27, w: 4, h: 15, i: "16" },
 // ];
 // dashboardStore.setLayout(layout);
+
 function handleClick(e: any) {
   e.stopPropagation();
   if (e.target.className === "ds-main") {

src/views/dashboard/controls/Widget.vue

@@ -119,13 +119,27 @@ export default defineComponent({
       }
     }
     watch(
-      () => [
-        props.data.metricTypes,
-        props.data.metrics,
-        selectorStore.currentService,
-      ],
-      (data, old) => {
-        if (data[0] === old[0] && data[1] === old[1] && data[2] === old[2]) {
+      () => [props.data.metricTypes, props.data.metrics],
+      () => {
+        queryMetrics();
+      }
+    );
+    watch(
+      () => selectorStore.currentService,
+      () => {
+        if (dashboardStore.entity !== "Service") {
+          return;
+        }
+        queryMetrics();
+      }
+    );
+    watch(
+      () => selectorStore.currentPod,
+      () => {
+        if (
+          dashboardStore.entity === "All" ||
+          dashboardStore.entity === "Service"
+        ) {
           return;
         }
         queryMetrics();

src/views/dashboard/data.ts

@@ -42,10 +42,14 @@ export const DefaultGraphConfig: { [key: string]: any } = {
     step: false,
     smooth: false,
     showSymbol: false,
+    showXAxis: true,
+    showYAxis: true,
   },
   Area: {
     type: "Area",
     opacity: 0.4,
+    showXAxis: true,
+    showYAxis: true,
   },
   Card: {
     type: "Card",

src/views/dashboard/panel/Tool.vue

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
-    <div class="flex-h">
-      <div class="selectors-item">
+    <div class="flex-h" v-if="!params.serviceId">
+      <div class="selectors-item" v-if="states.key !== 10">
         <span class="label">$Service</span>
         <Selector
           v-model="states.currentService"
@@ -24,12 +24,15 @@ limitations under the License. -->
           placeholder="Select a service"
           @change="changeService"
           class="selectors"
-          :borderRadius="4"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 3 || states.key === 4">
         <span class="label">
-          {{ states.entity === "endpoint" ? "$Endpoint" : "$ServiceInstance" }}
+          {{
+            dashboardStore.entity === "Endpoint"
+              ? "$Endpoint"
+              : "$ServiceInstance"
+          }}
         </span>
         <Selector
           v-model="selectorStore.currentPod"
@@ -38,7 +41,6 @@ limitations under the License. -->
           placeholder="Select a data"
           @change="changePods"
           class="selectors"
-          :borderRadius="4"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 2">
@@ -95,8 +97,6 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const params = useRoute().params;
 const states = reactive<{
-  entity: string;
-  layerId: string | string[];
   destService: string;
   destPod: string;
   key: number;
@@ -105,32 +105,31 @@ const states = reactive<{
   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) || "",
+  currentService: "",
 });
-dashboardStore.setLayer(states.layerId);
-dashboardStore.setEntity(states.entity);
+dashboardStore.setLayer(String(params.layerId));
+dashboardStore.setEntity(String(params.entity));
 
 getServices();
 
 async function getServices() {
-  if (!states.layerId) {
+  if (!dashboardStore.layerId) {
     return;
   }
-  const json = await selectorStore.fetchServices(states.layerId);
+  const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
-  fetchPods(states.entity);
+  states.currentService = selectorStore.currentService.value;
+  fetchPods(dashboardStore.entity);
 }
 
 async function changeService(service: Service[]) {
   if (service[0]) {
+    states.currentService = service[0].value;
     selectorStore.setCurrentService(service[0]);
-    fetchPods(states.entity);
+    fetchPods(dashboardStore.entity);
   } else {
     selectorStore.setCurrentService("");
   }
@@ -166,10 +165,10 @@ function clickIcons(t: { id: string; content: string; name: string }) {
 async function fetchPods(type: string) {
   let resp;
   switch (type) {
-    case "endpoint":
+    case "Endpoint":
       resp = await selectorStore.getEndpoints();
       break;
-    case "serviceInstance":
+    case "ServiceInstance":
       resp = await selectorStore.getServiceInstances();
       break;
     default: