feat: add hooks for querys

src/hooks/data.ts

@@ -32,7 +32,7 @@ export enum screenEnum {
   XXL = 1600,
 }
 
-const screenMap = new Map<sizeEnum, number>();
+export const screenMap = new Map<sizeEnum, number>();
 
 screenMap.set(sizeEnum.XS, screenEnum.XS);
 screenMap.set(sizeEnum.SM, screenEnum.SM);
@@ -41,4 +41,39 @@ screenMap.set(sizeEnum.LG, screenEnum.LG);
 screenMap.set(sizeEnum.XL, screenEnum.XL);
 screenMap.set(sizeEnum.XXL, screenEnum.XXL);
 
-export { screenMap };
+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/hooks/useProcessor.ts

@@ -0,0 +1,89 @@
+/**
+ * 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.
+ */
+import { Duration } from "@/types/app";
+import { RespFields } from "./data";
+
+export function useQueryProcessor(
+  config: any,
+  selectorStore: any,
+  dashboardStore: any,
+  durationTime: Duration
+) {
+  if (!(config.metrics && config.metrics.length)) {
+    return;
+  }
+  const conditions: any = {
+    duration: durationTime,
+  };
+  const variables: string[] = [`$duration: Duration!`];
+  const { currentPod, currentService, currentDestPod, currentDestService } =
+    selectorStore;
+  const isRelation = [
+    "ServiceRelation",
+    "ServiceInstanceRelation",
+    "EndpointRelation",
+  ].includes(dashboardStore.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: dashboardStore.entity,
+        topN: Number(config.standard.maxItemNum || 10),
+        order: config.standard.sortOrder || "DES",
+      };
+    } else {
+      variables.push(`$condition${index}: MetricsCondition!`);
+      conditions[`condition${index}`] = {
+        name,
+        entity: {
+          scope: dashboardStore.entity,
+          serviceName: currentService,
+          normal: true,
+          serviceInstanceName: dashboardStore.entity.includes("ServiceInstance")
+            ? currentPod
+            : undefined,
+          endpointName: dashboardStore.entity.includes("Endpoint")
+            ? currentPod
+            : undefined,
+          destNormal: true,
+          destServiceName: isRelation ? currentDestService : undefined,
+          destServiceInstanceName:
+            dashboardStore.entity === "ServiceInstanceRelation"
+              ? currentDestPod
+              : undefined,
+          destEndpointName:
+            dashboardStore.entity === "EndpointRelation"
+              ? currentDestPod
+              : undefined,
+        },
+      };
+    }
+
+    return `${name}${index}: ${metricTypes}(condition: $condition${index}, duration: $duration)${RespFields[metricTypes]}`;
+  });
+  const queryStr = `query queryData(${variables}) {${fragment}}`;
+  return {
+    queryStr,
+    conditions,
+  };
+}
+// export function useSourceProcessor() {
+// }

src/store/data.ts

@@ -51,39 +51,3 @@ 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

@@ -21,7 +21,7 @@ import graph from "@/graph";
 import { ConfigData } from "../data";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import { NewControl, RespFields } from "../data";
+import { NewControl } from "../data";
 import { Duration } from "@/types/app";
 import axios, { AxiosResponse } from "axios";
 import { cancelToken } from "@/utils/cancelToken";
@@ -179,84 +179,12 @@ export const dashboardStore = defineStore({
 
       return res.data;
     },
-    async fetchMetricValue(config: LayoutConfig) {
+    async fetchMetricValue(param: { queryStr: string; conditions: any }) {
-      if (!(config.metrics && config.metrics.length)) {
-        return;
-      }
-      const conditions: any = {
-        duration: this.durationTime,
-      };
-      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 } },
+        { query: param.queryStr, variables: { ...param.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/views/dashboard/controls/Widget.vue

@@ -45,7 +45,7 @@ limitations under the License. -->
     <div class="body" v-if="data.graph?.type" v-loading="loading">
       <component
         :is="data.graph.type"
-        :intervalTime="appStoreWithOut.intervalTime"
+        :intervalTime="appStore.intervalTime"
         :data="state.source"
         :config="data.graph"
         :standard="data.standard"
@@ -59,11 +59,12 @@ import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import graphs from "../graphs";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
-import { AudioAnalyser } from "three";
+import { useQueryProcessor } from "@/hooks/useProcessor";
 
 const props = {
   data: {
@@ -83,12 +84,19 @@ export default defineComponent({
       source: {},
     });
     const { data } = toRefs(props);
-    const appStoreWithOut = useAppStoreWithOut();
+    const appStore = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
+    const selectorStore = useSelectorStore();
     queryMetrics();
     async function queryMetrics() {
       loading.value = true;
-      const json = await dashboardStore.fetchMetricValue(props.data);
+      const params = useQueryProcessor(
+        props.data,
+        selectorStore,
+        dashboardStore,
+        appStore.durationTime
+      );
+      const json = await dashboardStore.fetchMetricValue(params);
       loading.value = false;
       if (!json) {
         return;
@@ -98,7 +106,7 @@ export default defineComponent({
         return;
       }
       const keys = Object.keys(json.data);
-      keys.map((key: string, index) => {
+      keys.forEach((key: string, index) => {
         const m = props.data.metrics[index];
         state.source[m] = json.data[key].values.values.map((d: any) => d.value);
       });
@@ -127,7 +135,7 @@ export default defineComponent({
     );
     return {
       state,
-      appStoreWithOut,
+      appStore,
       removeWidget,
       editConfig,
       data,