From d662a0fb546cb85da8ed1809b79f0de36adb366c Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Wed, 7 Jun 2023 16:58:30 +0800 Subject: [PATCH] feat: remove metric name from queries (#275) --- src/hooks/useExpressionsProcessor.ts | 24 ++++++++++++------- src/hooks/useListConfig.ts | 2 +- src/types/app.d.ts | 3 +-- src/types/dashboard.d.ts | 6 ++--- .../configuration/widget/metric/Index.vue | 9 +++---- .../configuration/widget/metric/Standard.vue | 2 +- src/views/dashboard/graphs/EndpointList.vue | 9 ++++--- src/views/dashboard/graphs/InstanceList.vue | 7 ++++-- src/views/dashboard/graphs/ServiceList.vue | 7 ++++-- .../graphs/components/ColumnGraph.vue | 11 +++++---- 10 files changed, 48 insertions(+), 32 deletions(-) diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index a40001c4..786184f7 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -107,11 +107,11 @@ export function useExpressionsSourceProcessor( } const source: { [key: string]: unknown } = {}; const keys = Object.keys(resp.data); - for (let i = 0; i < config.metricTypes.length; i++) { + for (let i = 0; i < config.metrics.length; i++) { const type = config.metricTypes[i]; - const c = (config.metricConfig && config.metricConfig[i]) || {}; + const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {}; const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || []; - const name = ((results[0] || {}).metric || {}).name; + const name = config.metrics[i]; if (type === ExpressionResultType.TIME_SERIES_VALUES) { if (results.length === 1) { @@ -214,11 +214,12 @@ export async function useExpressionsQueryPodsMetrics( return {}; } const names: string[] = []; + const subNames: string[] = []; const metricConfigArr: MetricConfigOpt[] = []; const metricTypesArr: string[] = []; const data = pods.map((d: any, idx: number) => { for (let index = 0; index < config.expressions.length; index++) { - const c: any = (config.metricConfig && config.metricConfig[index]) || {}; + const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {}; const k = "expression" + idx + index; const sub = "subexpression" + idx + index; const results = (resp.data[k] && resp.data[k].results) || []; @@ -255,17 +256,22 @@ export async function useExpressionsQueryPodsMetrics( if (!results[0]) { return d; } - const name = results[0].metric.name || ""; + const name = config.expressions[index] || ""; + const subName = config.subExpressions[index] || ""; if (!d[name]) { d[name] = {}; } d[name]["avg"] = [results[0].values[0].value]; if (subResults[0]) { - d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value); + if (!d[subName]) { + d[subName] = {}; + } + d[subName]["values"] = subResults[0].values.map((d: { value: number }) => d.value); } const j = names.find((d: string) => d === name); if (!j) { names.push(name); + subNames.push(subName); metricConfigArr.push(c); metricTypesArr.push(config.typesOfMQE[index]); } @@ -274,7 +280,7 @@ export async function useExpressionsQueryPodsMetrics( return d; }); - return { data, names, metricConfigArr, metricTypesArr }; + return { data, names, subNames, metricConfigArr, metricTypesArr }; } const dashboardStore = useDashboardStore(); const params = await expressionsGraphqlPods(); @@ -284,7 +290,7 @@ export async function useExpressionsQueryPodsMetrics( ElMessage.error(json.errors); return {}; } - const { data, names, metricTypesArr, metricConfigArr } = expressionsPodsSource(json); + const expressionParams = expressionsPodsSource(json); - return { data, names, metricTypesArr, metricConfigArr }; + return expressionParams; } diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts index 004cd594..d0705b5d 100644 --- a/src/hooks/useListConfig.ts +++ b/src/hooks/useListConfig.ts @@ -17,7 +17,7 @@ import { MetricQueryTypes, Calculations } from "./data"; import { MetricModes } from "@/views/dashboard/data"; -export function useListConfig(config: Indexable, index: string) { +export function useListConfig(config: Indexable, index: number) { if (config.metricModes === MetricModes.Expression) { return { isLinear: false, diff --git a/src/types/app.d.ts b/src/types/app.d.ts index e22444fd..4cf123ce 100644 --- a/src/types/app.d.ts +++ b/src/types/app.d.ts @@ -42,8 +42,7 @@ export type EventParams = { dataIndex: number; data: unknown; dataType: string; - value: number | Array; + value: number | any[]; color: string; event: any; - dataIndex: number; }; diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts index 636db486..f93f4b26 100644 --- a/src/types/dashboard.d.ts +++ b/src/types/dashboard.d.ts @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { DurationTime } from "./app"; export type DashboardItem = { id?: string; entity: string; @@ -75,8 +75,8 @@ export type MetricConfigOpt = { unit?: string; label?: string; calculation?: string; - labelsIndex: string; - sortOrder: string; + labelsIndex?: string; + sortOrder?: string; topN?: number; index?: number; }; diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index c54cdfda..44a07d8f 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -490,13 +490,14 @@ limitations under the License. --> const metricConfig = config[index] ? config.splice(index, 1) : config; let p = {}; if (isExpression.value) { - p = { typesOfMQE: states.metricTypes, expressions: states.metrics }; if (states.isList) { - states.subMetrics = [""]; - states.subMetricTypes = [""]; - states.subTips = [""]; + states.subMetrics.splice(index, 1); + states.subMetricTypes.splice(index, 1); + states.subTips.splice(index, 1); p = { ...p, + typesOfMQE: states.metricTypes, + expressions: states.metrics, subTypesOfMQE: states.subMetricTypes, subExpressions: states.subMetrics, }; diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue index 8ba76a6a..9e4f69a6 100644 --- a/src/views/dashboard/configuration/widget/metric/Standard.vue +++ b/src/views/dashboard/configuration/widget/metric/Standard.vue @@ -57,7 +57,7 @@ limitations under the License. --> placeholder="auto" @change=" updateConfig(index, { - labelsIndex: encodeURIComponent(currentMetric.labelsIndex), + labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''), }) " /> diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 6781886a..c3653dec 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -36,9 +36,9 @@ limitations under the License. --> ([]); + const colSubMetrics = ref([]); const metricConfig = ref(props.config.metricConfig || []); const metricTypes = ref(props.config.metricTypes || []); const metricMode = ref(props.config.metricMode); @@ -180,11 +181,13 @@ limitations under the License. --> colMetrics.value = params.names; metricTypes.value = params.metricTypesArr; metricConfig.value = params.metricConfigArr; + colSubMetrics.value = params.colSubMetrics; return; } endpoints.value = currentPods; colMetrics.value = []; + colSubMetrics.value = []; metricTypes.value = []; metricConfig.value = []; } @@ -230,9 +233,9 @@ limitations under the License. --> ); diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index 5b754ac1..f3b32dca 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -35,9 +35,9 @@ limitations under the License. --> ([]); + const colSubMetrics = ref([]); const metricConfig = ref(props.config.metricConfig || []); const metricTypes = ref(props.config.metricTypes || []); const pods = ref([]); // all instances @@ -213,12 +214,14 @@ limitations under the License. --> ); instances.value = params.data; colMetrics.value = params.names; + colSubMetrics.value = params.colSubMetrics; metricTypes.value = params.metricTypesArr; metricConfig.value = params.metricConfigArr; return; } instances.value = currentInstances; + colSubMetrics.value = []; colMetrics.value = []; metricTypes.value = []; metricConfig.value = []; @@ -281,7 +284,7 @@ limitations under the License. --> ); diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue index 43299417..d3b8fe76 100644 --- a/src/views/dashboard/graphs/components/ColumnGraph.vue +++ b/src/views/dashboard/graphs/components/ColumnGraph.vue @@ -48,7 +48,8 @@ limitations under the License. -->