diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index 99849108..abbc051b 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -55,65 +55,36 @@ export function useExpressionsQueryProcessor(config: { return; } const fragment = config.metrics.map((name: string, index: number) => { - variables.push(`expression${index}: String!`, `$entity${index}: Entity!`); - const metricType = config.metricTypes[index] || ""; - const c = (config.metricConfig && config.metricConfig[index]) || {}; + variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`); conditions[`expression${index}`] = name; - if ([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST as string].includes(metricType)) { - conditions[`entity${index}`] = { - parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value, - normal: selectorStore.currentService ? selectorStore.currentService.normal : true, - topN: Number(c.topN) || 10, - order: c.sortOrder || "DES", - }; - } else { - const entity = { - serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, - normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, - serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].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) + const entity = { + serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, + normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, + serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].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, - destEndpointName: - dashboardStore.entity === "EndpointRelation" - ? selectorStore.currentDestPod && selectorStore.currentDestPod.value - : undefined, - destProcessName: dashboardStore.entity.includes("ProcessRelation") - ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value - : undefined, - }; - if ([ExpressionResultType.RECORD_LIST as string].includes(metricType)) { - conditions[`entity${index}`] = { - parentEntity: entity, - topN: Number(c.topN) || 10, - order: c.sortOrder || "DES", - }; - } else { - // if (metricType === ExpressionResultType.TIME_SERIES_VALUES) { - // const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); - // variables.push(`$labels${index}: [String!]!`); - // conditions[`labels${index}`] = labels; - // } - conditions[`entity${index}`] = { - entity, - }; - } - } - // if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) { - // return `${name}${index}: ${metricType}(condition: $condition${index}, labels: $labels${index}, duration: $duration)${RespFields[metricType]}`; - // } + 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}`; }); @@ -145,22 +116,20 @@ export function useExpressionsSourceProcessor( const keys = Object.keys(resp.data); config.metricTypes.forEach((type: string, index) => { - const m = config.metrics[index]; const c = (config.metricConfig && config.metricConfig[index]) || {}; + const results = (resp.data[keys[index]] && resp.data[keys[index]].results) || []; + const name = ((results[0] || {}).metric || {}).name; if (type === ExpressionResultType.TIME_SERIES_VALUES) { - source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data.results[keys[index]].values, c)) || []; + source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || []; + return; } if (type === ExpressionResultType.SINGLE_VALUE) { - const v = Object.values(resp.data)[0] || {}; - source[m] = v.isEmptyValue ? NaN : aggregation(Number(v.value), c); + source[c.label || name] = results[0].values[0].value; + return; } if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) { - source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => { - d.value = aggregation(Number(d.value), c); - - return d; - }); + source[name] = results[0].values; } }); diff --git a/src/hooks/useMetricsProcessor.ts b/src/hooks/useMetricsProcessor.ts index 305171b0..6b72a4b3 100644 --- a/src/hooks/useMetricsProcessor.ts +++ b/src/hooks/useMetricsProcessor.ts @@ -22,7 +22,6 @@ import { useSelectorStore } from "@/store/modules/selectors"; import { useAppStoreWithOut } from "@/store/modules/app"; import type { Instance, Endpoint, Service } from "@/types/selector"; import type { MetricConfigOpt } from "@/types/dashboard"; -import { MetricCatalog } from "@/views/dashboard/data"; export function useQueryProcessor(config: Indexable) { if (!(config.metrics && config.metrics[0])) { @@ -179,6 +178,7 @@ export function useSourceProcessor( return d; }); + console.log(source); } if (type === MetricQueryTypes.READHEATMAP) { const resVal = Object.values(resp.data)[0] || {}; diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index ac788a81..536e393f 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -42,7 +42,7 @@ limitations under the License. --> placeholder="Please input a expression" @change="changeExpression" /> --> -
+
{{ metric }}
@@ -71,7 +71,12 @@ limitations under the License. --> - + /> + {{ states.tips[index] }}
{{ t("visualization") }}
@@ -108,6 +114,8 @@ limitations under the License. --> ChartTypes, PodsChartTypes, MetricsType, + ProtocolTypes, + ExpressionResultType, } from "../../../data"; import { ElMessage } from "element-plus"; import Icon from "@/components/Icon.vue"; @@ -137,6 +145,7 @@ limitations under the License. --> metricList: (Option & { type: string })[]; dashboardName: string; dashboardList: ((DashboardItem & { label: string; value: string }) | any)[]; + tips: string[]; }>({ metrics: metrics.value.length ? metrics.value : [""], metricTypes: metricTypes.value.length ? metricTypes.value : [""], @@ -145,6 +154,7 @@ limitations under the License. --> metricList: [], dashboardName: graph.value.dashboardName, dashboardList: [{ label: "", value: "" }], + tips: [], }); const currentMetricConfig = ref({ unit: "", @@ -322,11 +332,11 @@ limitations under the License. --> queryMetrics(); } async function queryMetrics() { - if (isExpression.value) { - queryMetricsWithExpressions(); + if (states.isList) { return; } - if (states.isList) { + if (isExpression.value) { + queryMetricsWithExpressions(); return; } const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid; @@ -351,9 +361,6 @@ limitations under the License. --> } async function queryMetricsWithExpressions() { - if (states.isList) { - return; - } const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid; if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) { return; @@ -393,6 +400,7 @@ limitations under the License. --> } function addMetric() { states.metrics.push(""); + states.tips.push(""); if (!states.isList) { states.metricTypes.push(states.metricTypes[0]); if (!isExpression.value) { @@ -406,6 +414,7 @@ limitations under the License. --> if (states.metrics.length === 1) { states.metrics = [""]; states.metricTypes = [""]; + states.tips = [""]; dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...{ metricTypes: states.metricTypes, metrics: states.metrics }, @@ -415,6 +424,7 @@ limitations under the License. --> } states.metrics.splice(index, 1); states.metricTypes.splice(index, 1); + states.tips.splice(index, 1); const config = dashboardStore.selectedGrid.metricConfig || []; const metricConfig = config[index] ? config.splice(index, 1) : config; dashboardStore.selectWidget({ @@ -459,10 +469,25 @@ limitations under the License. --> } async function changeExpression(event: any, index: number) { const params = event.target.textContent; - states.metrics[index] = params; - const resp = await dashboardStore.getTypeOfMQE(params); - console.log(resp); - // states.metricTypes[index] = resp.data.metricType + if (params) { + const resp = await dashboardStore.getTypeOfMQE(params); + states.metrics[index] = params; + states.metricTypes[index] = resp.data.metricType.type; + states.tips[index] = resp.data.metricType.error || ""; + } else { + states.metrics[index] = params; + states.metricTypes[index] = ""; + states.tips[index] = ""; + } + + dashboardStore.selectWidget({ + ...dashboardStore.selectedGrid, + expressions: states.metrics, + typesOfMQE: states.metricTypes, + }); + if (params) { + await queryMetrics(); + } }