feat: support multiple metrics for querys

src/components/TimePicker.vue

@@ -332,8 +332,6 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-
-
 @keyframes datepicker-anim-in {
   0% {
     opacity: 0;

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: {

src/types/dashboard.ts

@@ -20,12 +20,12 @@ export interface LayoutConfig {
   w: number;
   h: number;
   i: string;
-  widget?: WidgetConfig;
-  graph?: GraphConfig;
-  standard?: StandardConfig;
-  metrics?: string[];
-  type?: string;
-  metricTypes?: string[];
+  widget: WidgetConfig;
+  graph: GraphConfig;
+  standard: StandardConfig;
+  metrics: string[];
+  type: string;
+  metricTypes: string[];
   children?: any;
 }
 
@@ -45,6 +45,7 @@ export interface StandardConfig {
   divide?: string;
   milliseconds?: string;
   seconds?: string;
+  maxItemNum?: number;
 }
 
 export type GraphConfig =

src/views/dashboard/configuration/MetricOptions.vue

@@ -46,7 +46,7 @@ limitations under the License. -->
     />
     <Icon
       class="cp mr-5"
-      v-show="index === states.metrics.length - 1 && index < 6"
+      v-show="index === states.metrics.length - 1 && states.metrics.length < 5"
       iconName="add_circle_outlinecontrol_point"
       size="middle"
       @click="addMetric"
@@ -61,7 +61,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import type { PropType } from "vue";
 import { useRoute } from "vue-router";
 import { Option } from "@/types/app";
@@ -203,6 +203,13 @@ function deleteMetric(index: number) {
   states.metrics.splice(index, 1);
   states.metricTypes.splice(index, 1);
 }
+watch(
+  () => props.graph,
+  (data: any) => {
+    states.isTable = TableChartTypes.includes(data.type);
+    console.log(data);
+  }
+);
 </script>
 <style lang="scss" scoped>
 .ds-name {

src/views/dashboard/controls/Widget.vue

@@ -96,16 +96,13 @@ export default defineComponent({
         ElMessage.error(json.error);
         return;
       }
-      const metricVal = json.data.readMetricsValues.values.values.map(
-        (d: any) => d.value
-      );
-      const m = props.data.metrics && props.data.metrics[0];
-      if (!m) {
-        return;
-      }
-      state.source = {
-        [m]: metricVal,
-      };
+      const keys = Object.keys(json.data);
+      keys.map((key: string, index) => {
+        const m = props.data.metrics[index];
+        state.source = {
+          [m]: json.data[key].values.values.map((d: any) => d.value),
+        };
+      });
     }
 
     function removeWidget() {

src/views/dashboard/data.ts

@@ -147,23 +147,23 @@ export enum MetricsName {
   SERVICE_APDEX = "service_apdex",
 }
 export const EntityType = [
-  { value: "service", label: "Service", key: 1 },
-  { value: "all", label: "All", key: 10 },
-  { value: "endpoint", label: "Service Endpoint", key: 3 },
-  { value: "serviceInstance", label: "Service Instance", key: 3 },
-  { value: "serviceRelationClient", label: "Service Relation(client)", key: 2 },
-  { value: "serviceRelationServer", label: "Service Relation(server)", key: 2 },
+  { value: "Service", label: "Service", key: 1 },
+  { value: "All", label: "All", key: 10 },
+  { value: "Endpoint", label: "Service Endpoint", key: 3 },
+  { value: "ServiceInstance", label: "Service Instance", key: 3 },
+  { value: "ServiceRelationClient", label: "Service Relation(client)", key: 2 },
+  { value: "ServiceRelationServer", label: "Service Relation(server)", key: 2 },
   {
-    value: "serviceInstanceRelationClient",
+    value: "ServiceInstanceRelationClient",
     label: "Service Instance Relation(client)",
     key: 4,
   },
   {
-    value: "serviceInstanceRelationServer",
+    value: "ServiceInstanceRelationServer",
     label: "Service Instance Relation(server)",
     key: 4,
   },
-  { value: "endpointRelation", label: "Endpoint Relation", key: 4 },
+  { value: "EndpointRelation", label: "Endpoint Relation", key: 4 },
 ];
 export const SortOrder = [
   { label: "DES", value: "DES" },

src/views/dashboard/graphs/EndpointList.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <el-table
       v-loading="chartLoading"
       :data="endpoints"
-      style="width: 100%; height: 100%; overflow: auto"
+      style="width: 100%; height: 320px; overflow: auto"
     >
       <el-table-column label="Endpoints">
         <template #default="scope">
@@ -51,7 +51,7 @@ limitations under the License. -->
       class="pagination"
       background
       layout="prev, pager, next"
-      :page-size="6"
+      :page-size="pageSize"
       :total="selectorStore.endpoints.length"
       @current-change="changePage"
       @prev-click="changePage"

src/views/dashboard/graphs/ServiceList.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <el-table
       v-loading="chartLoading"
       :data="services"
-      style="width: 100%; height: 100%; overflow: auto"
+      style="width: 100%; height: 320px; overflow: auto"
     >
       <el-table-column label="Services">
         <template #default="scope">
@@ -51,7 +51,7 @@ limitations under the License. -->
       class="pagination"
       background
       layout="prev, pager, next"
-      :page-size="6"
+      :page-size="pageSize"
       :total="selectorStore.services.length"
       @current-change="changePage"
       @prev-click="changePage"
@@ -78,7 +78,7 @@ defineProps({
 });
 const selectorStore = useSelectorStore();
 const chartLoading = ref<boolean>(false);
-const pageSize = 6;
+const pageSize = 7;
 const services = ref<{ label: string; layer: string }[]>([]);
 const searchServices = ref<{ layer: string; label: string }[]>([]);
 const searchText = ref<string>("");