feat: support multiple metrics for querys

src/store/data.ts

@@ -26,6 +26,8 @@ export const NewControl = {
   },
   graph: {},
   standard: {},
+  metrics: [],
+  metricTypes: [],
 };
 export const ConfigData: any = {
   x: 0,
@@ -33,8 +35,8 @@ export const ConfigData: any = {
   w: 8,
   h: 12,
   i: "0",
-  metrics: ["service_resp_time"],
-  metricTypes: ["readMetricsValues"],
+  metrics: ["service_resp_time", "service_cpm"],
+  metricTypes: ["readMetricsValues", "readMetricsValues"],
   type: "Widget",
   widget: {
     title: "Title",
@@ -49,3 +51,39 @@ export const ConfigData: any = {
   },
   children: [],
 };
+export const RespFields: any = {
+  readMetricsValues: `{
+    label
+    values {
+      values {value}
+    }
+  }`,
+  readMetricsValue: "",
+  sortMetrics: `{
+    name
+    id
+    value
+    refId
+  }`,
+  readLabeledMetricsValues: `{
+    label
+    values {
+      values {value}
+    }
+  }`,
+  readHeatMap: `{
+    values {
+      id
+      values
+    }
+    buckets {
+      min
+      max
+    }
+  }`,
+  readSampledRecords: `{
+    name
+    value
+    refId
+  }`,
+};

src/store/modules/dashboard.ts

@@ -18,10 +18,13 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graph from "@/graph";
-import { AxiosResponse } from "axios";
 import { ConfigData } from "../data";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { NewControl } from "../data";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { NewControl, RespFields } from "../data";
+import { Duration } from "@/types/app";
+import axios, { AxiosResponse } from "axios";
+import { cancelToken } from "@/utils/cancelToken";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -29,6 +32,8 @@ interface DashboardState {
   entity: string;
   layerId: string;
   activedGridItem: string;
+  durationTime: Duration;
+  selectorStore: any;
 }
 
 export const dashboardStore = defineStore({
@@ -40,6 +45,8 @@ export const dashboardStore = defineStore({
     entity: "",
     layerId: "",
     activedGridItem: "",
+    durationTime: useAppStoreWithOut().durationTime,
+    selectorStore: useSelectorStore(),
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -172,25 +179,83 @@ export const dashboardStore = defineStore({
 
       return res.data;
     },
-    async fetchMetricValue() {
-      // if (!config.metricTypes) {
-      //   return;
-      // }
-      const appStoreWithOut = useAppStoreWithOut();
-      const variable = {
-        condition: {
-          name: "service_resp_time",
-          entity: {
-            normal: true,
-            scope: "Service",
-            serviceName: "agentless::app",
-          },
-        },
-        duration: appStoreWithOut.durationTime,
+    async fetchMetricValue(config: LayoutConfig) {
+      if (!(config.metrics && config.metrics.length)) {
+        return;
+      }
+      const conditions: any = {
+        duration: this.durationTime,
       };
-      const res: AxiosResponse = await graph
-        .query("readMetricsValues")
-        .params(variable);
+      const variables: string[] = [`$duration: Duration!`];
+      const { currentPod, currentService, currentDestPod, currentDestService } =
+        this.selectorStore;
+      const isRelation = [
+        "ServiceRelation",
+        "ServiceInstanceRelation",
+        "EndpointRelation",
+      ].includes(this.entity);
+      const fragment = config.metrics.map((name: string, index: number) => {
+        const metricTypes = config.metricTypes[index] || "";
+        if (["readSampledRecords", "sortMetrics"].includes(metricTypes)) {
+          variables.push(`$condition${index}: TopNCondition!`);
+          conditions[`condition${index}`] = {
+            name,
+            parentService: currentService,
+            normal: true,
+            scope: this.entity,
+            topN: Number(config.standard.maxItemNum || 10),
+            order: config.standard.sortOrder || "DES",
+          };
+        } else {
+          variables.push(`$condition${index}: MetricsCondition!`);
+          conditions[`condition${index}`] = {
+            name,
+            entity: {
+              scope: this.entity,
+              serviceName: currentService,
+              normal: true,
+              serviceInstanceName: this.entity.includes("ServiceInstance")
+                ? currentPod
+                : undefined,
+              endpointName: this.entity.includes("Endpoint")
+                ? currentPod
+                : undefined,
+              destNormal: true,
+              destServiceName: isRelation ? currentDestService : undefined,
+              destServiceInstanceName:
+                this.entity === "ServiceInstanceRelation"
+                  ? currentDestPod
+                  : undefined,
+              destEndpointName:
+                this.entity === "EndpointRelation" ? currentDestPod : undefined,
+            },
+          };
+        }
+
+        return `${name}${index}: ${metricTypes}(condition: $condition${index}, duration: $duration)${RespFields[metricTypes]}`;
+      });
+      const graphStr = `query queryData(${variables}) {${fragment}}`;
+      const res: AxiosResponse = await axios.post(
+        "/graphql",
+        { query: graphStr, variables: { ...conditions } },
+        { cancelToken: cancelToken() }
+      );
+
+      // const appStoreWithOut = useAppStoreWithOut();
+      // const variable = {
+      //   condition: {
+      //     name: "service_resp_time",
+      //     entity: {
+      //       normal: true,
+      //       scope: "Service",
+      //       serviceName: "agentless::app",
+      //     },
+      //   },
+      //   duration: appStoreWithOut.durationTime,
+      // };
+      // const res: AxiosResponse = await graph
+      //   .query("readMetricsValues")
+      //   .params(variable);
 
       return res.data;
     },

src/store/modules/selectors.ts

@@ -29,6 +29,7 @@ interface SelectorState {
   currentService: string;
   currentPod: string;
   currentDestService: string;
+  currentDestPod: string;
   durationTime: Duration;
 }
 
@@ -42,6 +43,7 @@ export const selectorStore = defineStore({
     currentService: "",
     currentPod: "",
     currentDestService: "",
+    currentDestPod: "",
     durationTime: useAppStoreWithOut().durationTime,
   }),
   actions: {