diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index e462a7fa..80ff3f7c 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -148,16 +148,26 @@ export async function useExpressionsQueryPodsMetrics( config: { expressions: string[]; typesOfMQE: string[]; + subExpressions: string[]; metricConfig: MetricConfigOpt[]; }, scope: string, ) { function expressionsGraphqlPods() { - const metricTypes = (config.typesOfMQE || []).filter((m: string) => m); - if (!metricTypes.length) { - return; + const metrics: string[] = []; + const subMetrics: string[] = []; + const metricTypes: string[] = []; + config.expressions = config.expressions || []; + config.subExpressions = config.subExpressions || []; + config.typesOfMQE = config.typesOfMQE || []; + + for (let i = 0; i < config.expressions.length; i++) { + if (config.expressions[i]) { + metrics.push(config.expressions[i]); + subMetrics.push(config.subExpressions[i]); + metricTypes.push(config.typesOfMQE[i]); + } } - const metrics = (config.expressions || []).filter((m: string) => m); if (!metrics.length) { return; } @@ -175,12 +185,22 @@ export async function useExpressionsQueryPodsMetrics( endpointName: scope === "Endpoint" ? d.label : undefined, normal: scope === "Service" ? d.normal : currentService.normal, }; + variables.push(`$entity${index}: Entity!`); + conditions[`entity${index}`] = entity; const f = metrics.map((name: string, idx: number) => { - variables.push(`$expression${index}${idx}: String!`, `$entity${index}${idx}: Entity!`); - conditions[`entity${index}${idx}`] = entity; + variables.push(`$expression${index}${idx}: String!`); conditions[`expression${index}${idx}`] = name; + let str = ""; + if (config.subExpressions[idx]) { + variables.push(`$subExpression${index}${idx}: String!`); + conditions[`subExpression${index}${idx}`] = config.subExpressions[idx]; + str = `subexpression${index}${idx}: execExpression(expression: $subExpression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`; + } - return `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}${idx}, duration: $duration)${RespFields.execExpression}`; + return ( + str + + `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}` + ); }); return f; }); @@ -199,28 +219,19 @@ export async function useExpressionsQueryPodsMetrics( const metricConfigArr: MetricConfigOpt[] = []; const metricTypesArr: string[] = []; const data = pods.map((d: any, idx: number) => { - const map: any = {}; for (let index = 0; index < config.expressions.length; index++) { - let c: any = (config.metricConfig && config.metricConfig[index]) || {}; + const c: any = (config.metricConfig && config.metricConfig[index]) || {}; const k = "expression" + idx + index; + const sub = "subexpression" + idx + index; const results = (resp.data[k] && resp.data[k].results) || []; - const n = results[0] && results[0].metric.name; + const subResults = (resp.data[sub] && resp.data[sub].results) || []; - if (map[n]) { - map[n] = { - ...c, - ...map[n], - }; - c = map[n]; - } else { - map[n] = c; - } if (results.length > 1) { const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); for (let i = 0; i < results.length; i++) { let name = results[i].metric.labels[0].value || ""; - const values = results[i].values.map((d: { value: unknown }) => d.value); + const subValues = subResults[i] && subResults[i].values.map((d: { value: unknown }) => d.value); const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value); if (labels[num]) { @@ -229,20 +240,17 @@ export async function useExpressionsQueryPodsMetrics( if (!d[name]) { d[name] = {}; } - if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) { - d[name]["avg"] = results[i].values[0].value; - } else { - d[name]["values"] = values; + if (subValues) { + d[name]["values"] = subValues; } + d[name]["avg"] = results[i].values[0].value; - const j = names.findIndex((d: string) => d === name); + const j = names.find((d: string) => d === name); - if (j < 0) { + if (!j) { names.push(name); metricConfigArr.push({ ...c, index: i }); metricTypesArr.push(config.typesOfMQE[index]); - } else { - metricConfigArr[j] = { ...metricConfigArr[j], ...c }; } } } else { @@ -253,19 +261,13 @@ export async function useExpressionsQueryPodsMetrics( if (!d[name]) { d[name] = {}; } - if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) { - d[name]["avg"] = [results[0].values[0].value]; - } - if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) { - d[name]["values"] = results[0].values.map((d: { value: number }) => d.value); - } - const j = names.findIndex((d: string) => d === name); - if (j < 0) { + d[name]["avg"] = [results[0].values[0].value]; + d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value); + const j = names.find((d: string) => d === name); + if (!j) { names.push(name); metricConfigArr.push(c); metricTypesArr.push(config.typesOfMQE[index]); - } else { - metricConfigArr[j] = { ...metricConfigArr[j], ...c }; } } } diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index 11cb87f2..b5be4a10 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -33,14 +33,7 @@ limitations under the License. --> :config="{ ...graph, legend: (dashboardStore.selectedGrid.graph || {}).legend, - i: dashboardStore.selectedGrid.i, - metrics: dashboardStore.selectedGrid.metrics, - metricTypes: dashboardStore.selectedGrid.metricTypes, - metricConfig: dashboardStore.selectedGrid.metricConfig, - relatedTrace: dashboardStore.selectedGrid.relatedTrace, - metricMode: dashboardStore.selectedGrid.metricMode, - expressions: dashboardStore.selectedGrid.expressions || [], - typesOfMQE: dashboardStore.selectedGrid.typesOfMQE || [], + ...dashboardStore.selectedGrid, }" :needQuery="true" /> diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index 1bba354c..0199cfad 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -28,16 +28,26 @@ limitations under the License. -->
{{ t("metrics") }}
-
-
- {{ metric }} -
+
+ +
+ {{ metric }} +
+
+ {{ states.subMetrics[index] }} +
+ /> - {{ states.tips[index] }} +
{{ states.tips[index] }}
+
{{ states.tips[index] }}
{{ t("visualization") }}
@@ -127,12 +138,16 @@ limitations under the License. --> const metrics = computed( () => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [], ); + const subMetrics = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subExpressions : []) || []); + const subMetricTypes = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subTypesOfMQE : []) || []); const graph = computed(() => dashboardStore.selectedGrid.graph || {}); const metricTypes = computed( () => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [], ); const states = reactive<{ metrics: string[]; + subMetrics: string[]; + subMetricTypes: string[]; metricTypes: string[]; metricTypeList: Option[][]; isList: boolean; @@ -140,6 +155,7 @@ limitations under the License. --> dashboardName: string; dashboardList: ((DashboardItem & { label: string; value: string }) | any)[]; tips: string[]; + subTips: string[]; }>({ metrics: metrics.value.length ? metrics.value : [""], metricTypes: metricTypes.value.length ? metricTypes.value : [""], @@ -149,6 +165,9 @@ limitations under the License. --> dashboardName: graph.value.dashboardName, dashboardList: [{ label: "", value: "" }], tips: [], + subTips: [], + subMetrics: subMetrics.value.length ? subMetrics.value : [""], + subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""], }); const currentMetricConfig = ref({ unit: "", @@ -415,6 +434,11 @@ limitations under the License. --> function addMetric() { states.metrics.push(""); states.tips.push(""); + if (isExpression.value && states.isList) { + states.subMetrics.push(""); + states.subTips.push(""); + } + if (!states.isList) { states.metricTypes.push(states.metricTypes[0]); if (!isExpression.value) { @@ -423,6 +447,9 @@ limitations under the License. --> return; } states.metricTypes.push(""); + if (isExpression.value && states.isList) { + states.subMetricTypes.push(""); + } } function deleteMetric(index: number) { if (states.metrics.length === 1) { @@ -432,6 +459,16 @@ limitations under the License. --> let v = {}; if (isExpression.value) { v = { typesOfMQE: states.metricTypes, expressions: states.metrics }; + if (states.isList) { + states.subMetrics = [""]; + states.subMetricTypes = [""]; + states.subTips = [""]; + v = { + ...v, + subTypesOfMQE: states.subMetricTypes, + subExpressions: states.subMetrics, + }; + } } else { v = { metricTypes: states.metricTypes, metrics: states.metrics }; } @@ -450,6 +487,16 @@ limitations under the License. --> let p = {}; if (isExpression.value) { p = { typesOfMQE: states.metricTypes, expressions: states.metrics }; + if (states.isList) { + states.subMetrics = [""]; + states.subMetricTypes = [""]; + states.subTips = [""]; + p = { + ...p, + subTypesOfMQE: states.subMetricTypes, + subExpressions: states.subMetrics, + }; + } } else { p = { metricTypes: states.metricTypes, metrics: states.metrics }; } @@ -487,7 +534,9 @@ limitations under the License. --> } function changeMetricMode() { states.metrics = metrics.value.length ? metrics.value : [""]; + states.subMetrics = subMetrics.value.length ? subMetrics.value : [""]; states.metricTypes = metricTypes.value.length ? metricTypes.value : [""]; + states.subMetricTypes = subMetricTypes.value.length ? subMetricTypes.value : [""]; const config = dashboardStore.selectedGrid.metricConfig; dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, @@ -520,6 +569,29 @@ limitations under the License. --> await queryMetrics(); } } + async function changeSubExpression(event: any, index: number) { + const params = (event.target.textContent || "").replace(/\s+/g, ""); + + if (params) { + const resp = await dashboardStore.getTypeOfMQE(params); + states.subMetrics[index] = params; + states.subMetricTypes[index] = resp.data.metricType.type; + states.subTips[index] = resp.data.metricType.error || ""; + } else { + states.subMetrics[index] = params; + states.subMetricTypes[index] = ""; + states.subTips[index] = ""; + } + + dashboardStore.selectWidget({ + ...dashboardStore.selectedGrid, + subExpressions: states.subMetrics, + subTypesOfMQE: states.subMetricTypes, + }); + if (params) { + await queryMetrics(); + } + }