diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index cd84f358..6cddcfa1 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -183,137 +183,6 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) { } } -export async function useExpressionsQueryProcessor(config: Indexable) { - function expressionsGraphqlPods() { - if (!(config.metrics && config.metrics[0])) { - return; - } - const appStore = useAppStoreWithOut(); - const dashboardStore = useDashboardStore(); - const selectorStore = useSelectorStore(); - - if (!selectorStore.currentService && dashboardStore.entity !== "All") { - return; - } - const conditions: Recordable = { - duration: appStore.durationTime, - }; - const variables: string[] = [`$duration: Duration!`]; - const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes( - dashboardStore.entity, - ); - if (isRelation && !selectorStore.currentDestService) { - return; - } - const fragment = config.metrics.map((name: string, index: number) => { - variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`); - conditions[`expression${index}`] = name; - const entity = { - serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, - normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, - serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation", "Process"].includes( - dashboardStore.entity, - ) - ? selectorStore.currentPod && selectorStore.currentPod.value - : undefined, - endpointName: dashboardStore.entity.includes("Endpoint") - ? selectorStore.currentPod && selectorStore.currentPod.value - : undefined, - processName: dashboardStore.entity.includes("Process") - ? selectorStore.currentProcess && selectorStore.currentProcess.value - : undefined, - destNormal: isRelation ? selectorStore.currentDestService.normal : undefined, - destServiceName: isRelation ? selectorStore.currentDestService.value : undefined, - destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity) - ? selectorStore.currentDestPod && selectorStore.currentDestPod.value - : undefined, - destEndpointName: - dashboardStore.entity === "EndpointRelation" - ? selectorStore.currentDestPod && selectorStore.currentDestPod.value - : undefined, - destProcessName: dashboardStore.entity.includes("ProcessRelation") - ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value - : undefined, - }; - conditions[`entity${index}`] = entity; - - return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`; - }); - const queryStr = `query queryData(${variables}) {${fragment}}`; - - return { - queryStr, - conditions, - }; - } - - function expressionsSource(resp: { errors: string; data: Indexable }) { - if (resp.errors) { - ElMessage.error(resp.errors); - return { source: {}, tips: [], typesOfMQE: [] }; - } - if (!resp.data) { - ElMessage.error("The query is wrong"); - return { source: {}, tips: [], typesOfMQE: [] }; - } - const tips: string[] = []; - const source: { [key: string]: unknown } = {}; - const keys = Object.keys(resp.data); - const typesOfMQE: string[] = []; - - for (let i = 0; i < config.metrics.length; i++) { - const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {}; - const obj = resp.data[keys[i]] || {}; - const results = obj.results || []; - const name = config.metrics[i]; - const type = obj.type; - - tips.push(obj.error); - typesOfMQE.push(type); - if (!obj.error) { - if ([ExpressionResultType.SINGLE_VALUE, ExpressionResultType.TIME_SERIES_VALUES].includes(type)) { - for (const item of results) { - const label = - item.metric && - item.metric.labels.map((d: { key: string; value: string }) => `${d.key}=${d.value}`).join(","); - const values = item.values.map((d: { value: unknown }) => d.value) || []; - if (results.length === 1) { - source[label || c.label || name] = values; - } else { - source[label] = values; - } - } - } - if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) { - source[name] = results[0].values; - } - } - } - - return { source, tips, typesOfMQE }; - } - - const params = await expressionsGraphqlPods(); - if (!params) { - return { source: {}, tips: [], typesOfMQE: [] }; - } - - const dashboardStore = useDashboardStore(); - const json = await dashboardStore.fetchMetricValue(params); - if (json.errors) { - ElMessage.error(json.errors); - return { source: {}, tips: [], typesOfMQE: [] }; - } - try { - const data = expressionsSource(json); - - return data; - } catch (error) { - console.error(error); - return { source: {}, tips: [], typesOfMQE: [] }; - } -} - export async function useExpressionsQueryPodsMetrics( allPods: Array<(Instance | Endpoint | Service) & Indexable>, config: { diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue index ad87af36..5de25022 100644 --- a/src/views/dashboard/Widget.vue +++ b/src/views/dashboard/Widget.vue @@ -53,7 +53,7 @@ limitations under the License. --> import { useRoute } from "vue-router"; import { useSelectorStore } from "@/store/modules/selectors"; import { useDashboardStore } from "@/store/modules/dashboard"; - import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor"; + import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor"; import graphs from "./graphs"; import { EntityType } from "./data"; import timeFormat from "@/utils/timeFormat"; @@ -128,12 +128,15 @@ limitations under the License. --> } async function queryMetrics() { loading.value = true; - const params = await useExpressionsQueryProcessor({ - metrics: config.value.expressions || [], - metricConfig: config.value.metricConfig || [], - subExpressions: config.value.subExpressions || [], - }); - + const metrics = await useDashboardQueryProcessor([ + { + metrics: config.value.expressions || [], + metricConfig: config.value.metricConfig || [], + subExpressions: config.value.subExpressions || [], + id: config.value.i, + }, + ]); + const params = metrics[config.value.i]; loading.value = false; source.value = params.source || {}; typesOfMQE.value = params.typesOfMQE; diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index 44cfc4aa..452d993e 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -110,7 +110,7 @@ limitations under the License. --> ExpressionResultType, } from "@/views/dashboard/data"; import Icon from "@/components/Icon.vue"; - import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor"; + import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor"; import { useI18n } from "vue-i18n"; import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard"; import Standard from "./Standard.vue"; @@ -240,12 +240,13 @@ limitations under the License. --> } async function queryMetricsWithExpressions() { - const { expressions, metricConfig } = dashboardStore.selectedGrid; + const { expressions, metricConfig, i } = dashboardStore.selectedGrid; if (!(expressions && expressions[0])) { return emit("update", {}); } - const params: Indexable = (await useExpressionsQueryProcessor({ ...states, metricConfig })) || {}; + const metrics: Indexable = (await useDashboardQueryProcessor([{ ...states, metricConfig, id: i }])) || {}; + const params = metrics[i]; states.tips = params.tips || []; states.metricTypes = params.typesOfMQE || []; dashboardStore.selectWidget({ diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 0891ba26..2a7fdd00 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -130,7 +130,7 @@ limitations under the License. --> import controls from "./tab"; import { dragIgnoreFrom, WidgetType } from "../data"; import copy from "@/utils/copy"; - import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor"; + import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor"; const props = { data: { @@ -264,8 +264,10 @@ limitations under the License. --> if (!metrics.length) { return; } - const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {}; + const values: { [key: string]: any } = + (await useDashboardQueryProcessor([{ metrics, id: props.data.i }])) || {}; for (const child of tabsProps.children || []) { + const params = values[props.data.i]; if (params.source[child.expression || ""]) { child.enable = !!Number(params.source[child.expression || ""]) && diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index a545cb95..3b8ad258 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -110,7 +110,6 @@ limitations under the License. --> const dashboardStore = useDashboardStore(); const graph = computed(() => props.data.graph || {}); const widget = computed(() => props.data.widget || {}); - const isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || "")); const typesOfMQE = ref([]); async function queryMetrics() { @@ -120,8 +119,8 @@ limitations under the License. --> metricConfig: props.data.metricConfig || [], id: props.data.i, }; - const values = (await useDashboardQueryProcessor([config])) || {}; - const params = values[data.value.i]; + const metrics = (await useDashboardQueryProcessor([config])) || {}; + const params = metrics[data.value.i]; loading.value = false; state.source = params.source || {}; typesOfMQE.value = params.typesOfMQE; @@ -160,7 +159,7 @@ limitations under the License. --> dashboardStore.selectWidget(props.data); } watch( - () => props.data.expressions, + () => props.data, () => { if (!dashboardStore.selectedGrid) { return; @@ -169,7 +168,7 @@ limitations under the License. --> return; } const chart = dashboardStore.selectedGrid.graph || {}; - if (ListChartTypes.includes(chart.type) || isList.value) { + if (ListChartTypes.includes(chart.type)) { return; } queryMetrics();