From ae63538bafcaa9a8b07a704ac55ba50c0321cc34 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 22 Aug 2024 16:47:50 +0800 Subject: [PATCH] feat: improve dashboard queries to make page opening brisker (#410) --- src/components/Selector.vue | 4 +- src/hooks/useExpressionsProcessor.ts | 112 +++++++++++++----- src/views/dashboard/Widget.vue | 18 +-- .../configuration/widget/metric/Index.vue | 7 +- src/views/dashboard/controls/Tab.vue | 11 +- src/views/dashboard/controls/Widget.vue | 71 +++-------- src/views/dashboard/panel/Layout.vue | 102 +++++++++++++++- 7 files changed, 221 insertions(+), 104 deletions(-) diff --git a/src/components/Selector.vue b/src/components/Selector.vue index 30be63bc..3a26d089 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -28,8 +28,8 @@ limitations under the License. --> :filterable="filterable" > { - variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`); - conditions[`expression${index}`] = name; + if (idx === 0) { + variables.push(`$entity: Entity!`); const entity = { serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, @@ -76,19 +72,21 @@ export async function useExpressionsQueryProcessor(config: Indexable) { ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value : undefined, }; - conditions[`entity${index}`] = entity; + conditions[`entity`] = entity; + } + const fragment = config.metrics.map((name: string, index: number) => { + variables.push(`$expression${idx}${index}: String!`); + conditions[`expression${idx}${index}`] = name; - return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`; + return `expression${idx}${index}: execExpression(expression: $expression${idx}${index}, entity: $entity, duration: $duration)${RespFields.execExpression}`; }); - const queryStr = `query queryData(${variables}) {${fragment}}`; - return { - queryStr, + variables, + fragment, conditions, }; } - - function expressionsSource(resp: { errors: string; data: Indexable }) { + function expressionsSource(config: Indexable, resp: { errors: string; data: Indexable | any }) { if (resp.errors) { ElMessage.error(resp.errors); return { source: {}, tips: [], typesOfMQE: [] }; @@ -97,6 +95,10 @@ export async function useExpressionsQueryProcessor(config: Indexable) { ElMessage.error("The query is wrong"); return { source: {}, tips: [], typesOfMQE: [] }; } + if (resp.data.error) { + ElMessage.error(resp.data.error); + return { source: {}, tips: [], typesOfMQE: [] }; + } const tips: string[] = []; const source: { [key: string]: unknown } = {}; const keys = Object.keys(resp.data); @@ -133,26 +135,72 @@ export async function useExpressionsQueryProcessor(config: Indexable) { return { source, tips, typesOfMQE }; } + async function fetchMetrics(configArr: any) { + const appStore = useAppStoreWithOut(); + const variables: string[] = [`$duration: Duration!`]; + let fragments = ""; + let conditions: Recordable = { + duration: appStore.durationTime, + }; + for (let i = 0; i < configArr.length; i++) { + const params = await expressionsGraphql(configArr[i], i); + if (params) { + fragments += params?.fragment; + conditions = { ...conditions, ...params.conditions }; + variables.push(...params.variables); + } + } + if (!fragments) { + return { 0: { source: {}, tips: [], typesOfMQE: [] } }; + } + const queryStr = `query queryData(${variables}) {${fragments}}`; + const dashboardStore = useDashboardStore(); + const json = await dashboardStore.fetchMetricValue({ + queryStr, + conditions, + }); + if (json.errors) { + ElMessage.error(json.errors); + return { 0: { source: {}, tips: [], typesOfMQE: [] } }; + } + try { + const pageData: Recordable = {}; - const params = await expressionsGraphqlPods(); - if (!params) { - return { source: {}, tips: [], typesOfMQE: [] }; + for (let i = 0; i < configArr.length; i++) { + const resp: any = {}; + for (let m = 0; m < configArr[i].metrics.length; m++) { + resp[`expression${i}${m}`] = json.data[`expression${i}${m}`]; + } + const data = expressionsSource(configArr[i], { ...json, data: resp }); + const id = configArr[i].id; + pageData[id] = data; + } + return pageData; + } catch (error) { + console.error(error); + return { 0: { source: {}, tips: [], typesOfMQE: [] } }; + } + } + function chunkArray(array: any[], chunkSize: number) { + const result = []; + for (let i = 0; i < array.length; i += chunkSize) { + result.push(array.slice(i, i + chunkSize)); + } + return result; } - const dashboardStore = useDashboardStore(); - const json = await dashboardStore.fetchMetricValue(params); - if (json.errors) { - ElMessage.error(json.errors); - return { source: {}, tips: [], typesOfMQE: [] }; + const partArr = chunkArray(configList, 6); + const promiseArr = partArr.map((d: Array) => fetchMetrics(d)); + const responseList = await Promise.all(promiseArr); + let resp = {}; + for (const item of responseList) { + resp = { + ...resp, + ...item, + }; } - try { - const data = expressionsSource(json); - return data; - } catch (error) { - console.error(error); - return { source: {}, tips: [], typesOfMQE: [] }; - } + return resp; } export async function useExpressionsQueryPodsMetrics( diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue index ad87af36..a2f01a42 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,16 @@ 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: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } = + 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 67d39250..2a7fdd00 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -113,6 +113,7 @@ limitations under the License. --> :data="item" :activeIndex="`${data.i}-${activeTabIndex}-${item.i}`" :needQuery="needQuery" + :metricsValues="metricsValues" /> @@ -129,13 +130,17 @@ 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: { type: Object as PropType, default: () => ({ children: [] }), }, + metricsValues: { + type: Object as PropType, + default: () => ({}), + }, active: { type: Boolean, default: false }, }; export default defineComponent({ @@ -259,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 49078a07..db73fe39 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -75,11 +75,10 @@ limitations under the License. --> import type { LayoutConfig } from "@/types/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard"; import { useAppStoreWithOut } from "@/store/modules/app"; - import { useSelectorStore } from "@/store/modules/selectors"; import graphs from "../graphs"; import { useI18n } from "vue-i18n"; - import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor"; - import { EntityType, ListChartTypes } from "../data"; + import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor"; + import { ListChartTypes } from "../data"; import type { EventParams } from "@/types/dashboard"; import getDashboard from "@/hooks/useDashboardsSession"; @@ -88,6 +87,10 @@ limitations under the License. --> type: Object as PropType, default: () => ({ widget: {}, graph: {} }), }, + metricsValues: { + type: Object as PropType<{ [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } }>, + default: () => ({}), + }, activeIndex: { type: String, default: "" }, needQuery: { type: Boolean, default: false }, }; @@ -105,23 +108,20 @@ limitations under the License. --> const { data } = toRefs(props); const appStore = useAppStoreWithOut(); const dashboardStore = useDashboardStore(); - const selectorStore = useSelectorStore(); 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([]); - if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList.value) { - queryMetrics(); - } - async function queryMetrics() { loading.value = true; - const e = { + const config = { metrics: props.data.expressions || [], metricConfig: props.data.metricConfig || [], + id: props.data.i, }; - const params = (await useExpressionsQueryProcessor(e)) || {}; + const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } = + (await useDashboardQueryProcessor([config])) || {}; + const params = metrics[data.value.i]; loading.value = false; state.source = params.source || {}; typesOfMQE.value = params.typesOfMQE; @@ -160,7 +160,7 @@ limitations under the License. --> dashboardStore.selectWidget(props.data); } watch( - () => props.data.expressions, + () => props.data, () => { if (!dashboardStore.selectedGrid) { return; @@ -169,54 +169,19 @@ limitations under the License. --> return; } const chart = dashboardStore.selectedGrid.graph || {}; - if (ListChartTypes.includes(chart.type) || isList.value) { + if (ListChartTypes.includes(chart.type)) { return; } queryMetrics(); }, ); watch( - () => [selectorStore.currentService, selectorStore.currentDestService], + () => props.metricsValues, () => { - if (isList.value) { - return; - } - if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) { - queryMetrics(); - } - }, - ); - watch( - () => [selectorStore.currentPod, selectorStore.currentDestPod], - () => { - if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) { - return; - } - if (isList.value) { - return; - } - queryMetrics(); - }, - ); - watch( - () => [selectorStore.currentProcess, selectorStore.currentDestProcess], - () => { - if (isList.value) { - return; - } - if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) { - queryMetrics(); - } - }, - ); - watch( - () => appStore.durationTime, - () => { - if (isList.value) { - return; - } - if (dashboardStore.entity === EntityType[1].value) { - queryMetrics(); + const params = props.metricsValues[data.value.i]; + if (params) { + state.source = params.source || {}; + typesOfMQE.value = params.typesOfMQE; } }, ); diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index b12b18b0..a3ae9ce1 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -14,12 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. -->