From b4c1dabfad1f598d6190a2131de6bee12ff37172 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Thu, 20 Jan 2022 22:25:19 +0800 Subject: [PATCH] feat: add hooks for querys --- src/hooks/data.ts | 39 ++++++++++- src/hooks/useProcessor.ts | 89 +++++++++++++++++++++++++ src/store/data.ts | 36 ---------- src/store/modules/dashboard.ts | 78 +--------------------- src/views/dashboard/controls/Widget.vue | 20 ++++-- 5 files changed, 143 insertions(+), 119 deletions(-) create mode 100644 src/hooks/useProcessor.ts diff --git a/src/hooks/data.ts b/src/hooks/data.ts index 17b8a1f4..9736195c 100644 --- a/src/hooks/data.ts +++ b/src/hooks/data.ts @@ -32,7 +32,7 @@ export enum screenEnum { XXL = 1600, } -const screenMap = new Map(); +export const screenMap = new Map(); 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 + }`, +}; diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts new file mode 100644 index 00000000..5a325b9c --- /dev/null +++ b/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() { +// } diff --git a/src/store/data.ts b/src/store/data.ts index 18de4474..3a0a63a0 100644 --- a/src/store/data.ts +++ b/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 - }`, -}; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 57a96f86..732bfa33 100644 --- a/src/store/modules/dashboard.ts +++ b/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) { - 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}}`; + async fetchMetricValue(param: { queryStr: string; conditions: any }) { 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; }, }, diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index 754db09c..431a15ea 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -45,7 +45,7 @@ limitations under the License. -->
{ + 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,