refactor: remove the `General ` metric mode and related logical code (#384)
This commit is contained in:
Fine0830
GitHub
parent
460b24f42c
commit
03f321b62a
|
|
@ -14,32 +14,7 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export enum MetricQueryTypes {
|
||||
ReadMetricsValue = "readMetricsValue",
|
||||
ReadMetricsValues = "readMetricsValues",
|
||||
SortMetrics = "sortMetrics",
|
||||
ReadLabeledMetricsValues = "readLabeledMetricsValues",
|
||||
READHEATMAP = "readHeatMap",
|
||||
ReadSampledRecords = "readSampledRecords",
|
||||
ReadRecords = "readRecords",
|
||||
ReadNullableMetricsValue = "readNullableMetricsValue",
|
||||
}
|
||||
|
||||
export enum Calculations {
|
||||
Percentage = "percentage",
|
||||
ByteToKB = "byteToKB",
|
||||
ByteToMB = "byteToMB",
|
||||
ByteToGB = "byteToGB",
|
||||
Apdex = "apdex",
|
||||
ConvertSeconds = "convertSeconds",
|
||||
ConvertMilliseconds = "convertMilliseconds",
|
||||
MsToS = "msTos",
|
||||
Average = "average",
|
||||
PercentageAvg = "percentageAvg",
|
||||
ApdexAvg = "apdexAvg",
|
||||
SecondToDay = "secondToDay",
|
||||
NanosecondToMillisecond = "nanosecondToMillisecond",
|
||||
}
|
||||
export enum sizeEnum {
|
||||
XS = "XS",
|
||||
SM = "SM",
|
||||
|
|
@ -68,50 +43,6 @@ screenMap.set(sizeEnum.XL, screenEnum.XL);
|
|||
screenMap.set(sizeEnum.XXL, screenEnum.XXL);
|
||||
|
||||
export const RespFields: Indexable = {
|
||||
readMetricsValues: `{
|
||||
label
|
||||
values {
|
||||
values {value isEmptyValue}
|
||||
}
|
||||
}`,
|
||||
readMetricsValue: ``,
|
||||
readNullableMetricsValue: `{
|
||||
value
|
||||
isEmptyValue
|
||||
}`,
|
||||
sortMetrics: `{
|
||||
name
|
||||
id
|
||||
value
|
||||
refId
|
||||
}`,
|
||||
readLabeledMetricsValues: `{
|
||||
label
|
||||
values {
|
||||
values {value isEmptyValue}
|
||||
}
|
||||
}`,
|
||||
readHeatMap: `{
|
||||
values {
|
||||
id
|
||||
values
|
||||
}
|
||||
buckets {
|
||||
min
|
||||
max
|
||||
}
|
||||
}`,
|
||||
readSampledRecords: `{
|
||||
name
|
||||
value
|
||||
refId
|
||||
}`,
|
||||
readRecords: `{
|
||||
id
|
||||
name
|
||||
value
|
||||
refId
|
||||
}`,
|
||||
execExpression: `{
|
||||
type
|
||||
results {
|
||||
|
|
|
|||
|
|
@ -129,9 +129,9 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
|
|||
}
|
||||
if (type === ExpressionResultType.SINGLE_VALUE) {
|
||||
for (const item of results) {
|
||||
const label = item.metric.labels
|
||||
.map((d: { key: string; value: string }) => `${d.key}=${d.value}`)
|
||||
.join(",");
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { MetricQueryTypes, Calculations } from "./data";
|
||||
import { MetricModes } from "@/views/dashboard/data";
|
||||
|
||||
export function useListConfig(config: Indexable, index: number) {
|
||||
if (config.metricModes === MetricModes.Expression) {
|
||||
return {
|
||||
isLinear: false,
|
||||
isAvg: true,
|
||||
};
|
||||
}
|
||||
const i = Number(index);
|
||||
const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
|
||||
const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
|
||||
const isLinear =
|
||||
[MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
|
||||
!types.includes(calculation);
|
||||
const isAvg =
|
||||
[MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
|
||||
types.includes(calculation);
|
||||
|
||||
return {
|
||||
isLinear,
|
||||
isAvg,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,437 +0,0 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import dayjs from "dayjs";
|
||||
import { RespFields, MetricQueryTypes, Calculations } from "./data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
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";
|
||||
|
||||
export function useQueryProcessor(config: Indexable) {
|
||||
if (!(config.metrics && config.metrics[0])) {
|
||||
return;
|
||||
}
|
||||
if (!(config.metricTypes && config.metricTypes[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) => {
|
||||
const metricType = config.metricTypes[index] || "";
|
||||
const c = (config.metricConfig && config.metricConfig[index]) || {};
|
||||
if ([MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics].includes(metricType)) {
|
||||
variables.push(`$condition${index}: TopNCondition!`);
|
||||
conditions[`condition${index}`] = {
|
||||
name,
|
||||
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)
|
||||
? 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 ([MetricQueryTypes.ReadRecords].includes(metricType)) {
|
||||
variables.push(`$condition${index}: RecordCondition!`);
|
||||
conditions[`condition${index}`] = {
|
||||
name,
|
||||
parentEntity: entity,
|
||||
topN: Number(c.topN) || 10,
|
||||
order: c.sortOrder || "DES",
|
||||
};
|
||||
} else {
|
||||
if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
|
||||
variables.push(`$labels${index}: [String!]!`);
|
||||
conditions[`labels${index}`] = labels;
|
||||
}
|
||||
variables.push(`$condition${index}: MetricsCondition!`);
|
||||
conditions[`condition${index}`] = {
|
||||
name,
|
||||
entity,
|
||||
};
|
||||
}
|
||||
}
|
||||
if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
return `${name}${index}: ${metricType}(condition: $condition${index}, labels: $labels${index}, duration: $duration)${RespFields[metricType]}`;
|
||||
}
|
||||
const t = metricType === MetricQueryTypes.ReadMetricsValue ? MetricQueryTypes.ReadNullableMetricsValue : metricType;
|
||||
|
||||
return `${name}${index}: ${t}(condition: $condition${index}, duration: $duration)${RespFields[t]}`;
|
||||
});
|
||||
const queryStr = `query queryData(${variables}) {${fragment}}`;
|
||||
|
||||
return {
|
||||
queryStr,
|
||||
conditions,
|
||||
};
|
||||
}
|
||||
export function useSourceProcessor(
|
||||
resp: { errors: string; data: Indexable },
|
||||
config: {
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
},
|
||||
) {
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return {};
|
||||
}
|
||||
if (!resp.data) {
|
||||
ElMessage.error("The query is wrong");
|
||||
return {};
|
||||
}
|
||||
const source: { [key: string]: unknown } = {};
|
||||
const keys = Object.keys(resp.data);
|
||||
|
||||
config.metricTypes.forEach((type: string, index) => {
|
||||
const m = config.metrics[index];
|
||||
const c = (config.metricConfig && config.metricConfig[index]) || {};
|
||||
|
||||
if (type === MetricQueryTypes.ReadMetricsValues) {
|
||||
source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || [];
|
||||
}
|
||||
if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
const resVal = Object.values(resp.data)[0] || [];
|
||||
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 (const item of resVal) {
|
||||
const values = item.values.values.map((d: { value: number; isEmptyValue: boolean }) =>
|
||||
d.isEmptyValue ? NaN : aggregation(Number(d.value), c),
|
||||
);
|
||||
const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
|
||||
if (labels[indexNum] && indexNum > -1) {
|
||||
source[labels[indexNum]] = values;
|
||||
} else {
|
||||
source[item.label] = values;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (type === MetricQueryTypes.ReadMetricsValue) {
|
||||
const v = Object.values(resp.data)[0] || {};
|
||||
source[m] = v.isEmptyValue ? NaN : aggregation(Number(v.value), c);
|
||||
}
|
||||
if (
|
||||
(
|
||||
[MetricQueryTypes.ReadRecords, MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics] 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;
|
||||
});
|
||||
}
|
||||
if (type === MetricQueryTypes.READHEATMAP) {
|
||||
const resVal = Object.values(resp.data)[0] || {};
|
||||
const nodes = [] as Indexable[];
|
||||
if (!(resVal && resVal.values)) {
|
||||
source[m] = { nodes: [] };
|
||||
return;
|
||||
}
|
||||
resVal.values.forEach((items: { values: number[] }, x: number) => {
|
||||
const grids = items.values.map((val: number, y: number) => [x, y, val]);
|
||||
|
||||
nodes.push(...grids);
|
||||
});
|
||||
let buckets = [] as Indexable[];
|
||||
if (resVal.buckets.length) {
|
||||
buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
|
||||
}
|
||||
|
||||
source[m] = { nodes, buckets }; // nodes: number[][]
|
||||
}
|
||||
});
|
||||
|
||||
return source;
|
||||
}
|
||||
|
||||
export function useQueryPodsMetrics(
|
||||
pods: Array<(Instance | Endpoint | Service) & Indexable>,
|
||||
config: {
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
},
|
||||
scope: string,
|
||||
) {
|
||||
const metricTypes = (config.metricTypes || []).filter((m: string) => m);
|
||||
if (!metricTypes.length) {
|
||||
return;
|
||||
}
|
||||
const metrics = (config.metrics || []).filter((m: string) => m);
|
||||
if (!metrics.length) {
|
||||
return;
|
||||
}
|
||||
const appStore = useAppStoreWithOut();
|
||||
const selectorStore = useSelectorStore();
|
||||
const conditions: { [key: string]: unknown } = {
|
||||
duration: appStore.durationTime,
|
||||
};
|
||||
const variables: string[] = [`$duration: Duration!`];
|
||||
const currentService = selectorStore.currentService || {};
|
||||
const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
|
||||
const param = {
|
||||
serviceName: scope === "Service" ? d.label : currentService.label,
|
||||
serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
|
||||
endpointName: scope === "Endpoint" ? d.label : undefined,
|
||||
normal: scope === "Service" ? d.normal : currentService.normal,
|
||||
};
|
||||
const f = metrics.map((name: string, idx: number) => {
|
||||
const metricType = metricTypes[idx] || "";
|
||||
variables.push(`$condition${index}${idx}: MetricsCondition!`);
|
||||
conditions[`condition${index}${idx}`] = {
|
||||
name,
|
||||
entity: param,
|
||||
};
|
||||
let labelStr = "";
|
||||
if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
const c = config.metricConfig[idx] || {};
|
||||
variables.push(`$labels${index}${idx}: [String!]!`);
|
||||
labelStr = `labels: $labels${index}${idx}, `;
|
||||
const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
|
||||
conditions[`labels${index}${idx}`] = labels;
|
||||
}
|
||||
const t =
|
||||
metricType === MetricQueryTypes.ReadMetricsValue ? MetricQueryTypes.ReadNullableMetricsValue : metricType;
|
||||
return `${name}${index}${idx}: ${t}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[t]}`;
|
||||
});
|
||||
return f;
|
||||
});
|
||||
const fragment = fragmentList.flat(1).join(" ");
|
||||
const queryStr = `query queryData(${variables}) {${fragment}}`;
|
||||
|
||||
return { queryStr, conditions };
|
||||
}
|
||||
|
||||
export function usePodsSource(
|
||||
pods: Array<Instance | Endpoint>,
|
||||
resp: { errors: string; data: Indexable },
|
||||
config: {
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
},
|
||||
): Indexable {
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return {};
|
||||
}
|
||||
const names: string[] = [];
|
||||
const metricConfigArr: MetricConfigOpt[] = [];
|
||||
const metricTypesArr: string[] = [];
|
||||
const data = pods.map((d: any, idx: number) => {
|
||||
config.metrics.map((name: string, index: number) => {
|
||||
const c: any = (config.metricConfig && config.metricConfig[index]) || {};
|
||||
const key = name + idx + index;
|
||||
if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValue) {
|
||||
const v = resp.data[key];
|
||||
d[name] = v.isEmptyValue ? NaN : aggregation(v.value, c);
|
||||
if (idx === 0) {
|
||||
names.push(name);
|
||||
metricConfigArr.push(c);
|
||||
metricTypesArr.push(config.metricTypes[index]);
|
||||
}
|
||||
}
|
||||
if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
|
||||
d[name] = {};
|
||||
if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
|
||||
d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
|
||||
}
|
||||
d[name]["values"] = resp.data[key].values.values.map((val: { value: number; isEmptyValue: boolean }) =>
|
||||
val.isEmptyValue ? NaN : aggregation(val.value, c),
|
||||
);
|
||||
if (idx === 0) {
|
||||
names.push(name);
|
||||
metricConfigArr.push(c);
|
||||
metricTypesArr.push(config.metricTypes[index]);
|
||||
}
|
||||
}
|
||||
if (config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues) {
|
||||
const resVal = resp.data[key] || [];
|
||||
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 < resVal.length; i++) {
|
||||
const item = resVal[i];
|
||||
const values = item.values.values.map((d: { value: number; isEmptyValue: boolean }) =>
|
||||
d.isEmptyValue ? NaN : aggregation(Number(d.value), c),
|
||||
);
|
||||
const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
|
||||
let key = item.label;
|
||||
if (labels[indexNum] && indexNum > -1) {
|
||||
key = labels[indexNum];
|
||||
}
|
||||
if (!d[key]) {
|
||||
d[key] = {};
|
||||
}
|
||||
if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
|
||||
d[key]["avg"] = calculateExp(item.values.values, c);
|
||||
}
|
||||
d[key]["values"] = values;
|
||||
if (idx === 0) {
|
||||
names.push(key);
|
||||
metricConfigArr.push({ ...c, index: i });
|
||||
metricTypesArr.push(config.metricTypes[index]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return d;
|
||||
});
|
||||
return { data, names, metricConfigArr, metricTypesArr };
|
||||
}
|
||||
export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
|
||||
const appStore = useAppStoreWithOut();
|
||||
const conditions: { [key: string]: unknown } = {
|
||||
duration: appStore.durationTime,
|
||||
ids,
|
||||
};
|
||||
const variables: string[] = [`$duration: Duration!`, `$ids: [ID!]!`];
|
||||
const fragmentList = metrics.map((d: string, index: number) => {
|
||||
conditions[`m${index}`] = d;
|
||||
variables.push(`$m${index}: String!`);
|
||||
|
||||
return `${d}: getValues(metric: {
|
||||
name: $m${index}
|
||||
ids: $ids
|
||||
}, duration: $duration) {
|
||||
values {
|
||||
id
|
||||
value
|
||||
}
|
||||
}`;
|
||||
});
|
||||
const queryStr = `query queryData(${variables}) {${fragmentList.join(" ")}}`;
|
||||
|
||||
return { queryStr, conditions };
|
||||
}
|
||||
export function calculateExp(
|
||||
list: { value: number; isEmptyValue: boolean }[],
|
||||
config: { calculation?: string },
|
||||
): (number | string)[] {
|
||||
const arr = list.filter((d: { value: number; isEmptyValue: boolean }) => !d.isEmptyValue);
|
||||
const sum = arr.length ? arr.map((d: { value: number }) => Number(d.value)).reduce((a, b) => a + b) : 0;
|
||||
let data: (number | string)[] = [];
|
||||
switch (config.calculation) {
|
||||
case Calculations.Average:
|
||||
data = [(sum / arr.length).toFixed(2)];
|
||||
break;
|
||||
case Calculations.PercentageAvg:
|
||||
data = [(sum / arr.length / 100).toFixed(2)];
|
||||
break;
|
||||
case Calculations.ApdexAvg:
|
||||
data = [(sum / arr.length / 10000).toFixed(2)];
|
||||
break;
|
||||
default:
|
||||
data = list.map((d: { value: number; isEmptyValue: boolean }) =>
|
||||
d.isEmptyValue ? NaN : aggregation(d.value, config),
|
||||
);
|
||||
break;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
export function aggregation(val: number, config: { calculation?: string }): number | string {
|
||||
let data: number | string = Number(val);
|
||||
|
||||
switch (config.calculation) {
|
||||
case Calculations.Percentage:
|
||||
data = (val / 100).toFixed(2);
|
||||
break;
|
||||
case Calculations.PercentageAvg:
|
||||
data = (val / 100).toFixed(2);
|
||||
break;
|
||||
case Calculations.ByteToKB:
|
||||
data = (val / 1024).toFixed(2);
|
||||
break;
|
||||
case Calculations.ByteToMB:
|
||||
data = (val / 1024 / 1024).toFixed(2);
|
||||
break;
|
||||
case Calculations.ByteToGB:
|
||||
data = (val / 1024 / 1024 / 1024).toFixed(2);
|
||||
break;
|
||||
case Calculations.Apdex:
|
||||
data = (val / 10000).toFixed(2);
|
||||
break;
|
||||
case Calculations.ConvertSeconds:
|
||||
data = dayjs(val * 1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
case Calculations.ConvertMilliseconds:
|
||||
data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
case Calculations.MsToS:
|
||||
data = (val / 1000).toFixed(2);
|
||||
break;
|
||||
case Calculations.SecondToDay:
|
||||
data = (val / 86400).toFixed(2);
|
||||
break;
|
||||
case Calculations.NanosecondToMillisecond:
|
||||
data = (val / 1000 / 1000).toFixed(2);
|
||||
break;
|
||||
case Calculations.ApdexAvg:
|
||||
data = (val / 10000).toFixed(2);
|
||||
break;
|
||||
default:
|
||||
data;
|
||||
break;
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
|
@ -377,7 +377,6 @@ const msg = {
|
|||
menus: "Menus",
|
||||
saveReload: "Save and reload the page",
|
||||
document: "Documentation",
|
||||
metricMode: "Metric Mode",
|
||||
addExpressions: "Add Expressions",
|
||||
expressions: "Expression",
|
||||
unhealthyExpression: "Unhealthy Expression",
|
||||
|
|
|
|||
|
|
@ -377,7 +377,6 @@ const msg = {
|
|||
menus: "Menus",
|
||||
saveReload: "Save and reload the page",
|
||||
document: "Documentation",
|
||||
metricMode: "Metric Mode",
|
||||
addExpressions: "Add Expressions",
|
||||
expressions: "Expression",
|
||||
unhealthyExpression: "Unhealthy Expression",
|
||||
|
|
|
|||
|
|
@ -375,7 +375,6 @@ const msg = {
|
|||
menusManagement: "菜单",
|
||||
saveReload: "保存并重新加载页面",
|
||||
document: "文档",
|
||||
metricMode: "指标模式",
|
||||
addExpressions: "添加表达式",
|
||||
expressions: "表达式",
|
||||
unhealthyExpression: "非健康表达式",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
|
|||
import { NewControl, TextConfig, TimeRangeConfig, ControlsTypes } from "../data";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType, MetricModes, WidgetType } from "@/views/dashboard/data";
|
||||
import { EntityType, WidgetType } from "@/views/dashboard/data";
|
||||
interface DashboardState {
|
||||
showConfig: boolean;
|
||||
layout: LayoutConfig[];
|
||||
|
|
@ -88,13 +88,7 @@ export const dashboardStore = defineStore({
|
|||
i: index,
|
||||
id: index,
|
||||
type,
|
||||
metricTypes: [""],
|
||||
metrics: [""],
|
||||
};
|
||||
|
||||
if (type === WidgetType.Widget) {
|
||||
newItem.metricMode = MetricModes.Expression;
|
||||
}
|
||||
if (type === WidgetType.Tab) {
|
||||
newItem.h = 36;
|
||||
newItem.activedTabIndex = 0;
|
||||
|
|
@ -167,18 +161,12 @@ export const dashboardStore = defineStore({
|
|||
i: index,
|
||||
id,
|
||||
type,
|
||||
metricTypes: [""],
|
||||
metrics: [""],
|
||||
};
|
||||
if (type === WidgetType.Widget) {
|
||||
newItem.metricMode = MetricModes.Expression;
|
||||
}
|
||||
if (type === WidgetType.Topology) {
|
||||
newItem.h = 32;
|
||||
newItem.graph = {
|
||||
showDepth: true,
|
||||
};
|
||||
newItem.metricMode = MetricModes.Expression;
|
||||
}
|
||||
if (ControlsTypes.includes(type)) {
|
||||
newItem.h = 32;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
|||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import query from "@/graphql/fetch";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
|
||||
import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
|
|
@ -226,9 +225,6 @@ export const topologyStore = defineStore({
|
|||
setNodeMetricValue(m: MetricVal) {
|
||||
this.nodeMetricValue = m;
|
||||
},
|
||||
setNodeValue(m: MetricVal) {
|
||||
this.nodeMetricValue = m;
|
||||
},
|
||||
setLegendValues(expressions: string, data: { [key: string]: any }) {
|
||||
for (let idx = 0; idx < this.nodes.length; idx++) {
|
||||
for (let index = 0; index < expressions.length; index++) {
|
||||
|
|
@ -446,15 +442,6 @@ export const topologyStore = defineStore({
|
|||
|
||||
return { calls, nodes };
|
||||
},
|
||||
async getNodeMetricValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.setNodeMetricValue(res.data.data);
|
||||
return res.data;
|
||||
},
|
||||
async getNodeExpressionValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
|
|
@ -464,38 +451,6 @@ export const topologyStore = defineStore({
|
|||
|
||||
return res.data;
|
||||
},
|
||||
async getLinkClientMetrics(linkClientMetrics: string[]) {
|
||||
if (!linkClientMetrics.length) {
|
||||
this.setLinkClientMetrics({});
|
||||
return;
|
||||
}
|
||||
const idsC = this.calls.filter((i: Call) => i.detectPoints.includes("CLIENT")).map((b: Call) => b.id);
|
||||
if (!idsC.length) {
|
||||
return;
|
||||
}
|
||||
const param = await useQueryTopologyMetrics(linkClientMetrics, idsC);
|
||||
const res = await this.getCallClientMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async getLinkServerMetrics(linkServerMetrics: string[]) {
|
||||
if (!linkServerMetrics.length) {
|
||||
this.setLinkServerMetrics({});
|
||||
return;
|
||||
}
|
||||
const idsS = this.calls.filter((i: Call) => i.detectPoints.includes("SERVER")).map((b: Call) => b.id);
|
||||
if (!idsS.length) {
|
||||
return;
|
||||
}
|
||||
const param = await useQueryTopologyMetrics(linkServerMetrics, idsS);
|
||||
const res = await this.getCallServerMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async getLinkExpressions(expressions: string[], type: string) {
|
||||
if (!expressions.length) {
|
||||
this.setLinkServerMetrics({});
|
||||
|
|
@ -519,22 +474,6 @@ export const topologyStore = defineStore({
|
|||
this.setLinkClientMetrics(metrics);
|
||||
}
|
||||
},
|
||||
async queryNodeMetrics(nodeMetrics: string[]) {
|
||||
if (!nodeMetrics.length) {
|
||||
this.setNodeMetricValue({});
|
||||
return;
|
||||
}
|
||||
const ids = this.nodes.map((d: Node) => d.id);
|
||||
if (!ids.length) {
|
||||
return;
|
||||
}
|
||||
const param = await useQueryTopologyMetrics(nodeMetrics, ids);
|
||||
const res = await this.getNodeMetricValue(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async queryNodeExpressions(expressions: string[]) {
|
||||
if (!expressions.length) {
|
||||
this.setNodeMetricValue({});
|
||||
|
|
@ -557,44 +496,6 @@ export const topologyStore = defineStore({
|
|||
const metrics = handleExpressionValues(res.data);
|
||||
this.setNodeMetricValue(metrics);
|
||||
},
|
||||
async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
const data = res.data.data;
|
||||
const metrics = Object.keys(data);
|
||||
this.nodes = this.nodes.map((d: Node & Recordable) => {
|
||||
for (const m of metrics) {
|
||||
for (const val of data[m].values) {
|
||||
if (d.id === val.id) {
|
||||
d[m] = val.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return d;
|
||||
});
|
||||
return res.data;
|
||||
},
|
||||
async getCallServerMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.setLinkServerMetrics(res.data.data);
|
||||
return res.data;
|
||||
},
|
||||
async getCallClientMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
|
||||
const res: AxiosResponse = await query(param);
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.setLinkClientMetrics(res.data.data);
|
||||
return res.data;
|
||||
},
|
||||
async getHierarchyServiceTopology() {
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { currentService } = useSelectorStore();
|
||||
|
|
|
|||
|
|
@ -32,12 +32,9 @@ export interface LayoutConfig {
|
|||
h: number;
|
||||
i: string;
|
||||
type: string;
|
||||
metricMode?: string;
|
||||
widget?: WidgetConfig;
|
||||
graph?: GraphConfig;
|
||||
metrics?: string[];
|
||||
expressions?: string[];
|
||||
metricTypes?: string[];
|
||||
typesOfMQE?: string[];
|
||||
children?: { name: string; children: LayoutConfig[]; expression?: string; enable?: boolean }[];
|
||||
activedTabIndex?: number;
|
||||
|
|
@ -77,7 +74,6 @@ export type Filters = {
|
|||
export type MetricConfigOpt = {
|
||||
unit?: string;
|
||||
label?: string;
|
||||
calculation?: string;
|
||||
labelsIndex?: string;
|
||||
sortOrder?: string;
|
||||
topN?: number;
|
||||
|
|
|
|||
|
|
@ -304,6 +304,7 @@ limitations under the License. -->
|
|||
|
||||
async function importTemplates(event: any) {
|
||||
const arr: any = await readFile(event);
|
||||
|
||||
for (const item of arr) {
|
||||
const { layer, name, entity } = item.configuration;
|
||||
const index = dashboardStore.dashboards.findIndex(
|
||||
|
|
@ -359,6 +360,20 @@ limitations under the License. -->
|
|||
multipleTableRef.value!.clearSelection();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function removeUnusedConfig(config: any) {
|
||||
// remove `General` metrics config
|
||||
delete config.metrics;
|
||||
delete config.metricTypes;
|
||||
delete config.metricMode;
|
||||
delete config.linkServerMetrics;
|
||||
delete config.linkClientMetrics;
|
||||
delete config.nodeMetric;
|
||||
if (([WidgetType.Topology] as string[]).includes(config.type)) {
|
||||
delete config.legend;
|
||||
}
|
||||
}
|
||||
|
||||
function optimizeTemplate(
|
||||
children: (LayoutConfig & {
|
||||
moved?: boolean;
|
||||
|
|
@ -390,17 +405,8 @@ limitations under the License. -->
|
|||
if (isEmptyObject(child.widget)) {
|
||||
delete child.widget;
|
||||
}
|
||||
if (!(child.metrics && child.metrics.length && child.metrics[0])) {
|
||||
delete child.metrics;
|
||||
}
|
||||
if (!(child.metricTypes && child.metricTypes.length && child.metricTypes[0])) {
|
||||
delete child.metricTypes;
|
||||
}
|
||||
if (child.metricConfig && child.metricConfig.length) {
|
||||
child.metricConfig.forEach((c, index) => {
|
||||
if (!c.calculation) {
|
||||
delete c.calculation;
|
||||
}
|
||||
if (!c.unit) {
|
||||
delete c.unit;
|
||||
}
|
||||
|
|
@ -415,6 +421,7 @@ limitations under the License. -->
|
|||
if (!(child.metricConfig && child.metricConfig.length)) {
|
||||
delete child.metricConfig;
|
||||
}
|
||||
removeUnusedConfig(child);
|
||||
if (child.type === WidgetType.Tab) {
|
||||
for (const item of child.children || []) {
|
||||
optimizeTemplate(item.children);
|
||||
|
|
|
|||
|
|
@ -32,10 +32,7 @@ limitations under the License. -->
|
|||
:config="{
|
||||
i: 0,
|
||||
...graph,
|
||||
metrics: config.metrics,
|
||||
metricTypes: config.metricTypes,
|
||||
metricConfig: config.metricConfig,
|
||||
metricMode: config.metricMode,
|
||||
expressions: config.expressions || [],
|
||||
typesOfMQE: typesOfMQE || [],
|
||||
subExpressions: config.subExpressions || [],
|
||||
|
|
@ -56,12 +53,10 @@ limitations under the License. -->
|
|||
import { useRoute } from "vue-router";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
|
||||
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
|
||||
import graphs from "./graphs";
|
||||
import { EntityType } from "./data";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { MetricModes } from "./data";
|
||||
|
||||
export default defineComponent({
|
||||
name: "WidgetPage",
|
||||
|
|
@ -132,8 +127,6 @@ limitations under the License. -->
|
|||
}
|
||||
}
|
||||
async function queryMetrics() {
|
||||
const isExpression = config.value.metricMode === MetricModes.Expression;
|
||||
if (isExpression) {
|
||||
loading.value = true;
|
||||
const params = await useExpressionsQueryProcessor({
|
||||
metrics: config.value.expressions || [],
|
||||
|
|
@ -144,25 +137,6 @@ limitations under the License. -->
|
|||
loading.value = false;
|
||||
source.value = params.source || {};
|
||||
typesOfMQE.value = params.typesOfMQE;
|
||||
return;
|
||||
}
|
||||
const params = await useQueryProcessor({ ...config.value });
|
||||
if (!params) {
|
||||
source.value = {};
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
loading.value = false;
|
||||
if (!json) {
|
||||
return;
|
||||
}
|
||||
const d = {
|
||||
metrics: config.value.metrics || [],
|
||||
metricTypes: config.value.metricTypes || [],
|
||||
metricConfig: config.value.metricConfig || [],
|
||||
};
|
||||
source.value = await useSourceProcessor(json, d);
|
||||
}
|
||||
watch(
|
||||
() => appStoreWithOut.durationTime,
|
||||
|
|
@ -209,7 +183,7 @@ limitations under the License. -->
|
|||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
background-color: aliceblue;
|
||||
background-color: var(--sw-config-header);
|
||||
font-size: $font-size-smaller;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@ limitations under the License. -->
|
|||
import copy from "@/utils/copy";
|
||||
import { RefreshOptions } from "@/views/dashboard/data";
|
||||
import { TimeType } from "@/constants/data";
|
||||
import { MetricModes } from "../data";
|
||||
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
|
|
@ -88,8 +87,7 @@ limitations under the License. -->
|
|||
step: appStore.durationRow.step,
|
||||
utc: appStore.utc,
|
||||
});
|
||||
const { widget, graph, metrics, metricTypes, metricConfig, metricMode, expressions, typesOfMQE, subExpressions } =
|
||||
dashboardStore.selectedGrid;
|
||||
const { widget, graph, metricConfig, expressions, typesOfMQE, subExpressions } = dashboardStore.selectedGrid;
|
||||
const c = (metricConfig || []).map((d: any) => {
|
||||
const t: any = {};
|
||||
if (d.label) {
|
||||
|
|
@ -103,20 +101,14 @@ limitations under the License. -->
|
|||
const opt: any = {
|
||||
type: dashboardStore.selectedGrid.type,
|
||||
graph: graph,
|
||||
metricMode,
|
||||
metricConfig: c,
|
||||
height: dashboardStore.selectedGrid.h * 20 + 60,
|
||||
};
|
||||
if (metricMode === MetricModes.Expression) {
|
||||
opt.expressions = expressions;
|
||||
opt.typesOfMQE = typesOfMQE;
|
||||
if (subExpressions && subExpressions.length) {
|
||||
opt.subExpressions = subExpressions;
|
||||
}
|
||||
} else {
|
||||
opt.metrics = metrics;
|
||||
opt.metricTypes = metricTypes;
|
||||
}
|
||||
if (widget) {
|
||||
opt.widget = {
|
||||
title: encodeURIComponent(widget.title || ""),
|
||||
|
|
|
|||
|
|
@ -34,11 +34,8 @@ limitations under the License. -->
|
|||
...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 || [],
|
||||
subExpressions: dashboardStore.selectedGrid.subExpressions || [],
|
||||
|
|
@ -89,7 +86,6 @@ limitations under the License. -->
|
|||
import type { Option } from "@/types/app";
|
||||
import graphs from "../graphs";
|
||||
import CustomOptions from "./widget/index";
|
||||
import { MetricModes } from "../data";
|
||||
|
||||
export default defineComponent({
|
||||
name: "WidgetEdit",
|
||||
|
|
@ -142,23 +138,6 @@ limitations under the License. -->
|
|||
|
||||
function applyConfig() {
|
||||
dashboardStore.setConfigPanel(false);
|
||||
const { metricMode } = dashboardStore.selectedGrid;
|
||||
let p = {};
|
||||
if (metricMode === MetricModes.Expression) {
|
||||
p = {
|
||||
metrics: [],
|
||||
metricTypes: [],
|
||||
};
|
||||
} else {
|
||||
p = {
|
||||
expressions: [],
|
||||
typesOfMQE: [],
|
||||
};
|
||||
}
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
...p,
|
||||
});
|
||||
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,28 +25,20 @@ limitations under the License. -->
|
|||
:clearable="true"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ t("metrics") }}</div>
|
||||
<div class="flex-h">
|
||||
<el-switch
|
||||
v-model="isExpression"
|
||||
class="mb-5"
|
||||
active-text="Expressions"
|
||||
inactive-text="General"
|
||||
size="small"
|
||||
@change="changeMetricMode"
|
||||
/>
|
||||
<div class="ml-5 link">
|
||||
<div>{{ t("metrics") }}</div>
|
||||
<div class="link">
|
||||
<a target="_blank" href="https://skywalking.apache.org/docs/main/next/en/api/metrics-query-expression/">
|
||||
<Icon iconName="info_outline" size="middle" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isExpression && states.isList">
|
||||
<div v-if="states.isList">
|
||||
<span class="title">{{ t("summary") }}</span>
|
||||
<span>{{ t("detail") }}</span>
|
||||
</div>
|
||||
<div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
|
||||
<span v-if="isExpression">
|
||||
<span>
|
||||
<div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
|
||||
{{ metric }}
|
||||
</div>
|
||||
|
|
@ -59,24 +51,6 @@ limitations under the License. -->
|
|||
{{ states.subMetrics[index] }}
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<Selector
|
||||
:value="metric"
|
||||
:options="states.metricList"
|
||||
size="small"
|
||||
placeholder="Select a metric"
|
||||
@change="changeMetrics(index, $event)"
|
||||
class="selectors"
|
||||
/>
|
||||
<Selector
|
||||
:value="states.metricTypes[index]"
|
||||
:options="states.metricTypeList[index]"
|
||||
size="small"
|
||||
:disabled="graph.type && !states.isList && index !== 0"
|
||||
@change="changeMetricType(index, $event)"
|
||||
class="selectors"
|
||||
/>
|
||||
</span>
|
||||
<el-popover placement="top" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<span @click="setMetricConfig(index)">
|
||||
|
|
@ -88,7 +62,7 @@ limitations under the License. -->
|
|||
<span
|
||||
v-show="
|
||||
states.isList ||
|
||||
[ProtocolTypes.ReadMetricsValues, ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
|
||||
[ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
|
||||
"
|
||||
>
|
||||
<Icon
|
||||
|
|
@ -100,13 +74,13 @@ limitations under the License. -->
|
|||
/>
|
||||
<Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
|
||||
</span>
|
||||
<div v-if="(states.tips || [])[index] && isExpression" class="ml-10 red sm">
|
||||
<div v-if="(states.tips || [])[index]" class="ml-10 red sm">
|
||||
{{ states.tips[index] }}
|
||||
</div>
|
||||
<div v-if="(errors || [])[index] && isExpression" class="ml-10 red sm">
|
||||
<div v-if="(errors || [])[index]" class="ml-10 red sm">
|
||||
{{ (errors || [])[index] }}
|
||||
</div>
|
||||
<div v-if="(subErrors || [])[index] && isExpression" class="ml-10 red sm">
|
||||
<div v-if="(subErrors || [])[index]" class="ml-10 red sm">
|
||||
{{ (subErrors || [])[index] }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,20 +102,14 @@ limitations under the License. -->
|
|||
import type { Option } from "@/types/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import {
|
||||
MetricTypes,
|
||||
ListChartTypes,
|
||||
DefaultGraphConfig,
|
||||
EntityType,
|
||||
ChartTypes,
|
||||
PodsChartTypes,
|
||||
MetricsType,
|
||||
ProtocolTypes,
|
||||
ExpressionResultType,
|
||||
MetricModes,
|
||||
} from "../../../data";
|
||||
import { ElMessage } from "element-plus";
|
||||
} from "@/views/dashboard/data";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
|
||||
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
|
||||
|
|
@ -160,16 +128,11 @@ limitations under the License. -->
|
|||
},
|
||||
});
|
||||
const dashboardStore = useDashboardStore();
|
||||
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
|
||||
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 metrics = computed(() => dashboardStore.selectedGrid.expressions || []);
|
||||
const subMetrics = computed(() => dashboardStore.selectedGrid.subExpressions || []);
|
||||
const subMetricTypes = computed(() => dashboardStore.selectedGrid.subTypesOfMQE || []);
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const metricTypes = computed(
|
||||
() => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
|
||||
);
|
||||
const typesOfMQE = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
|
||||
const states = reactive<{
|
||||
metrics: string[];
|
||||
subMetrics: string[];
|
||||
|
|
@ -177,17 +140,15 @@ limitations under the License. -->
|
|||
metricTypes: string[];
|
||||
metricTypeList: Option[][];
|
||||
isList: boolean;
|
||||
metricList: (Option & { type: string })[];
|
||||
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 : [""],
|
||||
metricTypes: typesOfMQE.value.length ? typesOfMQE.value : [""],
|
||||
metricTypeList: [],
|
||||
isList: false,
|
||||
metricList: [],
|
||||
dashboardName: graph.value.dashboardName,
|
||||
dashboardList: [{ label: "", value: "" }],
|
||||
tips: [],
|
||||
|
|
@ -199,16 +160,13 @@ limitations under the License. -->
|
|||
unit: "",
|
||||
label: "",
|
||||
labelsIndex: "",
|
||||
calculation: "",
|
||||
sortOrder: "DES",
|
||||
});
|
||||
|
||||
states.isList = ListChartTypes.includes(graph.value.type);
|
||||
const defaultLen = ref<number>(states.isList ? 5 : 20);
|
||||
const backupMetricConfig = ref<MetricConfigOpt[]>([]);
|
||||
|
||||
setDashboards();
|
||||
setMetricType();
|
||||
|
||||
const setVisTypes = computed(() => {
|
||||
let graphs = [];
|
||||
|
|
@ -223,70 +181,6 @@ limitations under the License. -->
|
|||
return graphs;
|
||||
});
|
||||
|
||||
async function setMetricType(chart?: any) {
|
||||
const g = chart || dashboardStore.selectedGrid.graph || {};
|
||||
let arr: any[] = states.metricList;
|
||||
if (!chart) {
|
||||
const json = await dashboardStore.fetchMetricList();
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
arr = json.data.metrics;
|
||||
}
|
||||
states.metricList = (arr || []).filter((d: { type: string }) => {
|
||||
if (states.isList) {
|
||||
if (d.type === MetricsType.REGULAR_VALUE || d.type === MetricsType.LABELED_VALUE) {
|
||||
return d;
|
||||
}
|
||||
} else if (g.type === "Table") {
|
||||
if (d.type === MetricsType.LABELED_VALUE || d.type === MetricsType.REGULAR_VALUE) {
|
||||
return d;
|
||||
}
|
||||
} else {
|
||||
return d;
|
||||
}
|
||||
});
|
||||
if (isExpression.value) {
|
||||
if (states.metrics && states.metrics[0]) {
|
||||
queryMetrics();
|
||||
} else {
|
||||
emit("update", {});
|
||||
}
|
||||
return;
|
||||
}
|
||||
const metrics: any = states.metricList.filter((d: { value: string; type: string }) =>
|
||||
states.metrics.includes(d.value),
|
||||
);
|
||||
|
||||
if (metrics.length) {
|
||||
// keep states.metrics index
|
||||
const m = metrics.map((d: { value: string }) => d.value);
|
||||
states.metrics = states.metrics.filter((d) => m.includes(d));
|
||||
} else {
|
||||
states.metrics = [""];
|
||||
states.metricTypes = [""];
|
||||
}
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
metrics: states.metrics,
|
||||
metricTypes: states.metricTypes,
|
||||
graph: g,
|
||||
});
|
||||
states.metricTypeList = [];
|
||||
for (const metric of metrics) {
|
||||
if (states.metrics.includes(metric.value)) {
|
||||
const arr = setMetricTypeList(metric.type);
|
||||
states.metricTypeList.push(arr);
|
||||
}
|
||||
}
|
||||
if (states.metrics && states.metrics[0]) {
|
||||
queryMetrics();
|
||||
} else {
|
||||
emit("update", {});
|
||||
}
|
||||
}
|
||||
|
||||
function setDashboards(type?: string) {
|
||||
const chart = type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
|
|
@ -308,6 +202,11 @@ limitations under the License. -->
|
|||
}, []);
|
||||
|
||||
states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
|
||||
if (states.metrics && states.metrics[0]) {
|
||||
queryMetrics();
|
||||
} else {
|
||||
emit("update", {});
|
||||
}
|
||||
}
|
||||
|
||||
function changeChartType(item: Option) {
|
||||
|
|
@ -316,8 +215,6 @@ limitations under the License. -->
|
|||
if (states.isList) {
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
metrics: [""],
|
||||
metricTypes: [""],
|
||||
expressions: [""],
|
||||
typesOfMQE: [""],
|
||||
});
|
||||
|
|
@ -326,97 +223,20 @@ limitations under the License. -->
|
|||
defaultLen.value = 5;
|
||||
}
|
||||
|
||||
if (isExpression.value) {
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
graph: chart,
|
||||
});
|
||||
} else {
|
||||
setMetricType(chart);
|
||||
}
|
||||
setDashboards(chart.type);
|
||||
states.dashboardName = "";
|
||||
defaultLen.value = 10;
|
||||
}
|
||||
|
||||
function changeMetrics(index: number, arr: (Option & { type: string })[] | any) {
|
||||
if (!arr.length) {
|
||||
states.metricTypeList = [];
|
||||
states.metricTypes = [];
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
...{ metricTypes: states.metricTypes, metrics: states.metrics },
|
||||
});
|
||||
return;
|
||||
}
|
||||
states.metrics[index] = arr[0].value;
|
||||
const typeOfMetrics = arr[0].type;
|
||||
|
||||
states.metricTypeList[index] = setMetricTypeList(typeOfMetrics);
|
||||
states.metricTypes[index] = MetricTypes[typeOfMetrics][0].value;
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
...{ metricTypes: states.metricTypes, metrics: states.metrics },
|
||||
});
|
||||
if (states.isList) {
|
||||
return;
|
||||
}
|
||||
queryMetrics();
|
||||
}
|
||||
|
||||
function changeMetricType(index: number, opt: Option[] | any) {
|
||||
const metric = states.metricList.filter((d: Option) => states.metrics[index] === d.value)[0] || {};
|
||||
const l = setMetricTypeList(metric.type);
|
||||
if (states.isList) {
|
||||
states.metricTypes[index] = opt[0].value;
|
||||
states.metricTypeList[index] = l;
|
||||
} else {
|
||||
states.metricTypes = states.metricTypes.map((d: string) => {
|
||||
d = opt[0].value;
|
||||
return d;
|
||||
});
|
||||
states.metricTypeList = states.metricTypeList.map((d: Option[]) => {
|
||||
d = l;
|
||||
|
||||
return d;
|
||||
});
|
||||
}
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
...{ metricTypes: states.metricTypes },
|
||||
});
|
||||
if (states.isList) {
|
||||
return;
|
||||
}
|
||||
queryMetrics();
|
||||
}
|
||||
async function queryMetrics() {
|
||||
if (states.isList) {
|
||||
return;
|
||||
}
|
||||
if (isExpression.value) {
|
||||
queryMetricsWithExpressions();
|
||||
return;
|
||||
}
|
||||
const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
|
||||
if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
|
||||
return emit("update", {});
|
||||
}
|
||||
const params = useQueryProcessor({ ...states, metricConfig });
|
||||
if (!params) {
|
||||
emit("update", {});
|
||||
return;
|
||||
}
|
||||
|
||||
emit("loading", true);
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
emit("loading", false);
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
const source = useSourceProcessor(json, { ...states, metricConfig });
|
||||
emit("update", source);
|
||||
}
|
||||
|
||||
async function queryMetricsWithExpressions() {
|
||||
|
|
@ -432,7 +252,6 @@ limitations under the License. -->
|
|||
...dashboardStore.selectedGrid,
|
||||
typesOfMQE: states.metricTypes,
|
||||
});
|
||||
|
||||
emit("update", params.source || {});
|
||||
}
|
||||
|
||||
|
|
@ -454,31 +273,23 @@ limitations under the License. -->
|
|||
function addMetric() {
|
||||
states.metrics.push("");
|
||||
states.tips.push("");
|
||||
if (isExpression.value && states.isList) {
|
||||
if (states.isList) {
|
||||
states.subMetrics.push("");
|
||||
states.subTips.push("");
|
||||
}
|
||||
|
||||
if (!states.isList) {
|
||||
states.metricTypes.push(states.metricTypes[0]);
|
||||
if (!isExpression.value) {
|
||||
states.metricTypeList.push(states.metricTypeList[0]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
states.metricTypes.push("");
|
||||
if (isExpression.value && states.isList) {
|
||||
states.subMetricTypes.push("");
|
||||
}
|
||||
}
|
||||
function deleteMetric(index: number) {
|
||||
if (states.metrics.length === 1) {
|
||||
states.metrics = [""];
|
||||
states.metricTypes = [""];
|
||||
states.tips = [""];
|
||||
let v = {};
|
||||
if (isExpression.value) {
|
||||
v = { typesOfMQE: states.metricTypes, expressions: states.metrics };
|
||||
let v: any = { typesOfMQE: states.metricTypes, expressions: states.metrics };
|
||||
if (states.isList) {
|
||||
states.subMetrics = [""];
|
||||
states.subMetricTypes = [""];
|
||||
|
|
@ -489,9 +300,6 @@ limitations under the License. -->
|
|||
subExpressions: states.subMetrics,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
v = { metricTypes: states.metricTypes, metrics: states.metrics };
|
||||
}
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
...v,
|
||||
|
|
@ -505,7 +313,6 @@ limitations under the License. -->
|
|||
const config = dashboardStore.selectedGrid.metricConfig || [];
|
||||
const metricConfig = config[index] ? config.splice(index, 1) : config;
|
||||
let p = {};
|
||||
if (isExpression.value) {
|
||||
if (states.isList) {
|
||||
states.subMetrics.splice(index, 1);
|
||||
states.subMetricTypes.splice(index, 1);
|
||||
|
|
@ -518,24 +325,14 @@ limitations under the License. -->
|
|||
subExpressions: states.subMetrics,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
p = { metricTypes: states.metricTypes, metrics: states.metrics };
|
||||
}
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
...p,
|
||||
metricConfig,
|
||||
});
|
||||
queryMetrics();
|
||||
}
|
||||
function setMetricTypeList(type: string) {
|
||||
if (type !== MetricsType.REGULAR_VALUE) {
|
||||
return MetricTypes[type];
|
||||
}
|
||||
if (states.isList || graph.value.type === "Table") {
|
||||
return [MetricTypes.REGULAR_VALUE[0], MetricTypes.REGULAR_VALUE[1]];
|
||||
}
|
||||
return MetricTypes[type];
|
||||
}
|
||||
|
||||
function setMetricConfig(index: number) {
|
||||
const n = {
|
||||
unit: "",
|
||||
|
|
@ -553,20 +350,6 @@ limitations under the License. -->
|
|||
...dashboardStore.selectedGrid.metricConfig[index],
|
||||
};
|
||||
}
|
||||
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,
|
||||
metricMode: isExpression.value ? MetricModes.Expression : MetricModes.General,
|
||||
metricConfig: backupMetricConfig.value,
|
||||
});
|
||||
backupMetricConfig.value = config;
|
||||
queryMetrics();
|
||||
}
|
||||
async function changeExpression(event: any, index: number) {
|
||||
const params = (event.target.textContent || "").replace(/\s+/g, "");
|
||||
|
||||
|
|
@ -651,5 +434,6 @@ limitations under the License. -->
|
|||
.link {
|
||||
cursor: pointer;
|
||||
color: $active-color;
|
||||
padding-left: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ limitations under the License. -->
|
|||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="item mb-10" v-if="hasLabel || isExpression">
|
||||
<div class="item mb-10">
|
||||
<span class="label">{{ t("labels") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
|
|
@ -42,7 +42,7 @@ limitations under the License. -->
|
|||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="item mb-10" v-if="isList && isExpression">
|
||||
<div class="item mb-10" v-if="isList">
|
||||
<span class="label">{{ t("detailLabel") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
|
|
@ -56,30 +56,6 @@ limitations under the License. -->
|
|||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="item mb-10" v-if="[ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) && !isExpression">
|
||||
<span class="label">{{ t("labelsIndex") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
v-model="currentMetric.labelsIndex"
|
||||
size="small"
|
||||
placeholder="auto"
|
||||
@change="
|
||||
updateConfig(index, {
|
||||
labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''),
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="item mb-10" v-show="!isExpression">
|
||||
<span class="label">{{ t("aggregation") }}</span>
|
||||
<SelectSingle
|
||||
:value="currentMetric.calculation"
|
||||
:options="CalculationOpts"
|
||||
@change="changeConfigs(index, { calculation: $event })"
|
||||
class="selectors"
|
||||
:clearable="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="item mb-10" v-show="isTopn">
|
||||
<span class="label">{{ t("sortOrder") }}</span>
|
||||
<SelectSingle
|
||||
|
|
@ -108,10 +84,9 @@ limitations under the License. -->
|
|||
import { ref, watch, computed } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { SortOrder, CalculationOpts, MetricModes } from "../../../data";
|
||||
import { SortOrder, ExpressionResultType, ListChartTypes } from "@/views/dashboard/data";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { ListChartTypes, ProtocolTypes } from "../../../data";
|
||||
|
||||
/*global defineEmits, defineProps */
|
||||
const props = defineProps({
|
||||
|
|
@ -124,30 +99,17 @@ limitations under the License. -->
|
|||
const { t } = useI18n();
|
||||
const emit = defineEmits(["update"]);
|
||||
const dashboardStore = useDashboardStore();
|
||||
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
|
||||
const currentMetric = ref<MetricConfigOpt>({
|
||||
...props.currentMetricConfig,
|
||||
topN: props.currentMetricConfig.topN || 10,
|
||||
});
|
||||
const metricTypes = computed(
|
||||
() => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
|
||||
);
|
||||
const metricType = computed(() => metricTypes.value[props.index]);
|
||||
const hasLabel = computed(() => {
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
return (
|
||||
ListChartTypes.includes(graph.type) ||
|
||||
[ProtocolTypes.ReadLabeledMetricsValues, ProtocolTypes.ReadMetricsValues].includes(metricType.value)
|
||||
);
|
||||
});
|
||||
const metricTypes = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
|
||||
const isList = computed(() => {
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
return ListChartTypes.includes(graph.type);
|
||||
});
|
||||
const isTopn = computed(() =>
|
||||
[ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
|
||||
metricTypes.value[props.index],
|
||||
),
|
||||
[ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST].includes(metricTypes.value[props.index]),
|
||||
);
|
||||
|
||||
function updateConfig(index: number, param: { [key: string]: string }) {
|
||||
|
|
@ -170,7 +132,6 @@ limitations under the License. -->
|
|||
watch(
|
||||
() => props.currentMetricConfig,
|
||||
() => {
|
||||
isExpression.value = dashboardStore.selectedGrid.metricMode === MetricModes.Expression;
|
||||
currentMetric.value = {
|
||||
...props.currentMetricConfig,
|
||||
topN: Number(props.currentMetricConfig.topN) || 10,
|
||||
|
|
|
|||
|
|
@ -51,15 +51,12 @@ limitations under the License. -->
|
|||
:data="state.source"
|
||||
:config="{
|
||||
...data.graph,
|
||||
metrics: data.metrics || [''],
|
||||
metricTypes: data.metricTypes || [''],
|
||||
i: data.i,
|
||||
id: data.id,
|
||||
metricConfig: data.metricConfig || [],
|
||||
filters: data.filters || {},
|
||||
relatedTrace: data.relatedTrace || {},
|
||||
associate: data.associate || [],
|
||||
metricMode: data.metricMode,
|
||||
expressions: data.expressions || [],
|
||||
typesOfMQE: typesOfMQE || [],
|
||||
subExpressions: data.subExpressions || [],
|
||||
|
|
@ -81,12 +78,10 @@ limitations under the License. -->
|
|||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import graphs from "../graphs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
|
||||
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
|
||||
import { EntityType, ListChartTypes } from "../data";
|
||||
import type { EventParams } from "@/types/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { MetricModes } from "../data";
|
||||
|
||||
const props = {
|
||||
data: {
|
||||
|
|
@ -121,9 +116,6 @@ limitations under the License. -->
|
|||
}
|
||||
|
||||
async function queryMetrics() {
|
||||
const isExpression = props.data.metricMode === MetricModes.Expression;
|
||||
|
||||
if (isExpression) {
|
||||
loading.value = true;
|
||||
const e = {
|
||||
metrics: props.data.expressions || [],
|
||||
|
|
@ -133,26 +125,6 @@ limitations under the License. -->
|
|||
loading.value = false;
|
||||
state.source = params.source || {};
|
||||
typesOfMQE.value = params.typesOfMQE;
|
||||
return;
|
||||
}
|
||||
const params = await useQueryProcessor({ ...props.data });
|
||||
|
||||
if (!params) {
|
||||
state.source = {};
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
loading.value = false;
|
||||
if (!json) {
|
||||
return;
|
||||
}
|
||||
const d = {
|
||||
metrics: props.data.metrics || [],
|
||||
metricTypes: props.data.metricTypes || [],
|
||||
metricConfig: props.data.metricConfig || [],
|
||||
};
|
||||
state.source = await useSourceProcessor(json, d);
|
||||
}
|
||||
|
||||
function removeWidget() {
|
||||
|
|
@ -188,7 +160,7 @@ limitations under the License. -->
|
|||
dashboardStore.selectWidget(props.data);
|
||||
}
|
||||
watch(
|
||||
() => [props.data.metricTypes, props.data.metrics, props.data.expressions],
|
||||
() => props.data.expressions,
|
||||
() => {
|
||||
if (!dashboardStore.selectedGrid) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -34,29 +34,6 @@ export const ChartTypes = [
|
|||
{ label: "Endpoint List", value: "EndpointList" },
|
||||
{ label: "Instance List", value: "InstanceList" },
|
||||
];
|
||||
export const MetricChartType: any = {
|
||||
readMetricsValue: [{ label: "Card", value: "Card" }],
|
||||
readMetricsValues: [
|
||||
{ label: "Bar", value: "Bar" },
|
||||
{ label: "Line", value: "Line" },
|
||||
{ label: "Area", value: "Area" },
|
||||
],
|
||||
sortMetrics: [{ label: "Top List", value: "TopList" }],
|
||||
readLabeledMetricsValues: [{ label: "Line", value: "Line" }],
|
||||
readHeatMap: [{ label: "Heat Map", value: "HeatMap" }],
|
||||
readSampledRecords: [{ label: "Top List", value: "TopList" }],
|
||||
readRecords: [{ label: "Top List", value: "TopList" }],
|
||||
};
|
||||
export enum ProtocolTypes {
|
||||
ReadRecords = "readRecords",
|
||||
ReadSampledRecords = "readSampledRecords",
|
||||
SortMetrics = "sortMetrics",
|
||||
ReadLabeledMetricsValues = "readLabeledMetricsValues",
|
||||
ReadHeatMap = "readHeatMap",
|
||||
ReadMetricsValues = "readMetricsValues",
|
||||
ReadMetricsValue = "readMetricsValue",
|
||||
}
|
||||
|
||||
export enum ExpressionResultType {
|
||||
UNKNOWN = "UNKNOWN",
|
||||
SINGLE_VALUE = "SINGLE_VALUE",
|
||||
|
|
@ -124,34 +101,6 @@ export const DefaultGraphConfig: { [key: string]: any } = {
|
|||
},
|
||||
};
|
||||
|
||||
export enum MetricsType {
|
||||
UNKNOWN = "UNKNOWN",
|
||||
REGULAR_VALUE = "REGULAR_VALUE",
|
||||
LABELED_VALUE = "LABELED_VALUE",
|
||||
HEATMAP = "HEATMAP",
|
||||
SAMPLED_RECORD = "SAMPLED_RECORD",
|
||||
}
|
||||
export const MetricTypes: {
|
||||
[key: string]: Array<{ label: string; value: string }>;
|
||||
} = {
|
||||
REGULAR_VALUE: [
|
||||
{ label: "read all values in the duration", value: "readMetricsValues" },
|
||||
{
|
||||
label: "read the single value in the duration",
|
||||
value: "readMetricsValue",
|
||||
},
|
||||
{ label: "get sorted top N values", value: "sortMetrics" },
|
||||
],
|
||||
LABELED_VALUE: [
|
||||
{
|
||||
label: "read all values of labels in the duration",
|
||||
value: "readLabeledMetricsValues",
|
||||
},
|
||||
],
|
||||
HEATMAP: [{ label: "read heatmap values in the duration", value: "readHeatMap" }],
|
||||
SAMPLED_RECORD: [{ label: "get sorted topN values", value: "readRecords" }],
|
||||
};
|
||||
|
||||
export enum MetricCatalog {
|
||||
SERVICE = "Service",
|
||||
SERVICE_INSTANCE = "ServiceInstance",
|
||||
|
|
@ -292,19 +241,6 @@ export const ScopeType = [
|
|||
{ value: "Endpoint", label: "Endpoint", key: 3 },
|
||||
{ value: "ServiceInstance", label: "Service Instance", key: 3 },
|
||||
];
|
||||
export const LegendConditions = [
|
||||
{ label: "&&", value: "and" },
|
||||
{ label: "||", value: "or" },
|
||||
];
|
||||
export const MetricConditions = [
|
||||
{ label: ">", value: ">" },
|
||||
{ label: "<", value: "<" },
|
||||
];
|
||||
export enum LegendOpt {
|
||||
NAME = "name",
|
||||
VALUE = "value",
|
||||
CONDITION = "condition",
|
||||
}
|
||||
export const DepthList = [1, 2, 3, 4, 5].map((item: number) => ({
|
||||
value: item,
|
||||
label: String(item),
|
||||
|
|
@ -329,24 +265,6 @@ export const TextColors: { [key: string]: string } = {
|
|||
purple: "#bf99f8",
|
||||
};
|
||||
|
||||
export const CalculationOpts = [
|
||||
{ label: "Percentage", value: "percentage" },
|
||||
{ label: "Apdex", value: "apdex" },
|
||||
{ label: "Avg-preview", value: "average" },
|
||||
{ label: "Percentage + Avg-preview", value: "percentageAvg" },
|
||||
{ label: "Apdex + Avg-preview", value: "apdexAvg" },
|
||||
{ label: "Byte to KB", value: "byteToKB" },
|
||||
{ label: "Byte to MB", value: "byteToMB" },
|
||||
{ label: "Byte to GB", value: "byteToGB" },
|
||||
{
|
||||
label: "Milliseconds to YYYY-MM-DD HH:mm:ss",
|
||||
value: "convertMilliseconds",
|
||||
},
|
||||
{ label: "Seconds to YYYY-MM-DD HH:mm:ss", value: "convertSeconds" },
|
||||
{ label: "Milliseconds to seconds", value: "msTos" },
|
||||
{ label: "Seconds to days", value: "secondToDay" },
|
||||
{ label: "Nanoseconds to milliseconds", value: "nanosecondToMillisecond" },
|
||||
];
|
||||
export const RefIdTypes = [
|
||||
{ label: "Trace ID", value: "traceId" },
|
||||
{ label: "None", value: "none" },
|
||||
|
|
@ -357,10 +275,6 @@ export const RefreshOptions = [
|
|||
{ label: "Last 7 days", value: "7", step: "DAY" },
|
||||
];
|
||||
|
||||
export enum MetricModes {
|
||||
Expression = "Expression",
|
||||
General = "General",
|
||||
}
|
||||
export enum CallTypes {
|
||||
Server = "SERVER",
|
||||
Client = "CLIENT",
|
||||
|
|
|
|||
|
|
@ -40,8 +40,7 @@ limitations under the License. -->
|
|||
:config="{
|
||||
...config,
|
||||
metricConfig,
|
||||
metricTypes,
|
||||
metricMode,
|
||||
typesOfMQE,
|
||||
}"
|
||||
v-if="colMetrics.length"
|
||||
/>
|
||||
|
|
@ -58,9 +57,8 @@ limitations under the License. -->
|
|||
import type { EndpointListConfig } from "@/types/dashboard";
|
||||
import type { Endpoint } from "@/types/selector";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
|
||||
import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
|
||||
import { EntityType, MetricModes } from "../data";
|
||||
import { EntityType } from "../data";
|
||||
import router from "@/router";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
|
|
@ -75,9 +73,6 @@ limitations under the License. -->
|
|||
type: Object as PropType<
|
||||
EndpointListConfig & {
|
||||
i: string;
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
metricMode: string;
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
subExpressions: string[];
|
||||
|
|
@ -85,8 +80,6 @@ limitations under the License. -->
|
|||
} & { metricConfig: MetricConfigOpt[] }
|
||||
>,
|
||||
default: () => ({
|
||||
metrics: [],
|
||||
metricTypes: [],
|
||||
dashboardName: "",
|
||||
fontSize: 12,
|
||||
i: "",
|
||||
|
|
@ -106,8 +99,7 @@ limitations under the License. -->
|
|||
const colMetrics = ref<string[]>([]);
|
||||
const colSubMetrics = ref<string[]>([]);
|
||||
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
|
||||
const metricTypes = ref<string[]>(props.config.metricTypes || []);
|
||||
const metricMode = ref<string>(props.config.metricMode);
|
||||
const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
|
||||
|
||||
if (props.needQuery) {
|
||||
queryEndpoints();
|
||||
|
|
@ -138,34 +130,7 @@ limitations under the License. -->
|
|||
merge: d.merge,
|
||||
};
|
||||
});
|
||||
if (props.config.metricMode === MetricModes.Expression) {
|
||||
queryEndpointExpressions(currentPods);
|
||||
return;
|
||||
}
|
||||
const metrics = props.config.metrics || [];
|
||||
const types = props.config.metricTypes || [];
|
||||
if (metrics.length && metrics[0] && types.length && types[0]) {
|
||||
const params = await useQueryPodsMetrics(currentPods, props.config, EntityType[2].value);
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentPods, json, {
|
||||
...props.config,
|
||||
metricConfig: metricConfig.value,
|
||||
});
|
||||
endpoints.value = data;
|
||||
colMetrics.value = names;
|
||||
metricTypes.value = metricTypesArr;
|
||||
metricConfig.value = metricConfigArr;
|
||||
return;
|
||||
}
|
||||
endpoints.value = currentPods;
|
||||
colMetrics.value = [];
|
||||
metricTypes.value = [];
|
||||
metricConfig.value = [];
|
||||
}
|
||||
async function queryEndpointExpressions(currentPods: Endpoint[]) {
|
||||
const expressions = props.config.expressions || [];
|
||||
|
|
@ -180,8 +145,8 @@ limitations under the License. -->
|
|||
endpoints.value = params.data;
|
||||
colMetrics.value = params.names;
|
||||
colSubMetrics.value = params.subNames;
|
||||
metricTypes.value = params.metricTypesArr;
|
||||
metricConfig.value = params.metricConfigArr;
|
||||
typesOfMQE.value = params.metricTypesArr;
|
||||
emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
|
||||
|
||||
return;
|
||||
|
|
@ -189,8 +154,8 @@ limitations under the License. -->
|
|||
endpoints.value = currentPods;
|
||||
colMetrics.value = [];
|
||||
colSubMetrics.value = [];
|
||||
metricTypes.value = [];
|
||||
metricConfig.value = [];
|
||||
typesOfMQE.value = [];
|
||||
emit("expressionTips", [], []);
|
||||
}
|
||||
function clickEndpoint(scope: any) {
|
||||
|
|
@ -212,19 +177,15 @@ limitations under the License. -->
|
|||
}
|
||||
watch(
|
||||
() => [
|
||||
...(props.config.metricTypes || []),
|
||||
...(props.config.metrics || []),
|
||||
...(props.config.metricConfig || []),
|
||||
...(props.config.expressions || []),
|
||||
...(props.config.subExpressions || []),
|
||||
props.config.metricMode,
|
||||
],
|
||||
(data, old) => {
|
||||
if (JSON.stringify(data) === JSON.stringify(old)) {
|
||||
return;
|
||||
}
|
||||
metricConfig.value = props.config.metricConfig;
|
||||
metricMode.value = props.config.metricMode;
|
||||
queryEndpointMetrics(endpoints.value);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -39,8 +39,7 @@ limitations under the License. -->
|
|||
:config="{
|
||||
...config,
|
||||
metricConfig,
|
||||
metricTypes,
|
||||
metricMode,
|
||||
typesOfMQE,
|
||||
}"
|
||||
v-if="colMetrics.length"
|
||||
/>
|
||||
|
|
@ -85,9 +84,8 @@ limitations under the License. -->
|
|||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import type { InstanceListConfig } from "@/types/dashboard";
|
||||
import type { Instance } from "@/types/selector";
|
||||
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
|
||||
import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
|
||||
import { EntityType, MetricModes } from "../data";
|
||||
import { EntityType } from "../data";
|
||||
import router from "@/router";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
|
|
@ -100,9 +98,7 @@ limitations under the License. -->
|
|||
InstanceListConfig & {
|
||||
i: string;
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
isEdit: boolean;
|
||||
metricMode: string;
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
subExpressions: string[];
|
||||
|
|
@ -114,7 +110,7 @@ limitations under the License. -->
|
|||
fontSize: 12,
|
||||
i: "",
|
||||
metrics: [],
|
||||
metricTypes: [],
|
||||
typesOfMQE: [],
|
||||
}),
|
||||
},
|
||||
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
|
||||
|
|
@ -131,9 +127,9 @@ limitations under the License. -->
|
|||
const colMetrics = ref<string[]>([]);
|
||||
const colSubMetrics = ref<string[]>([]);
|
||||
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
|
||||
const metricTypes = ref<string[]>(props.config.metricTypes || []);
|
||||
const pods = ref<Instance[]>([]); // all instances
|
||||
const metricMode = ref<string>(props.config.metricMode);
|
||||
const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
|
||||
|
||||
if (props.needQuery) {
|
||||
queryInstance();
|
||||
}
|
||||
|
|
@ -169,36 +165,7 @@ limitations under the License. -->
|
|||
attributes: d.attributes,
|
||||
};
|
||||
});
|
||||
if (props.config.metricMode === MetricModes.Expression) {
|
||||
queryInstanceExpressions(currentInstances);
|
||||
return;
|
||||
}
|
||||
const metrics = props.config.metrics || [];
|
||||
const types = props.config.metricTypes || [];
|
||||
|
||||
if (metrics.length && metrics[0] && types.length && types[0]) {
|
||||
const params = await useQueryPodsMetrics(currentInstances, props.config, EntityType[3].value);
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentInstances, json, {
|
||||
...props.config,
|
||||
metricConfig: metricConfig.value,
|
||||
});
|
||||
instances.value = data;
|
||||
colMetrics.value = names;
|
||||
metricTypes.value = metricTypesArr;
|
||||
metricConfig.value = metricConfigArr;
|
||||
|
||||
return;
|
||||
}
|
||||
instances.value = currentInstances;
|
||||
colMetrics.value = [];
|
||||
metricTypes.value = [];
|
||||
metricConfig.value = [];
|
||||
}
|
||||
|
||||
async function queryInstanceExpressions(currentInstances: Instance[]) {
|
||||
|
|
@ -214,7 +181,7 @@ limitations under the License. -->
|
|||
instances.value = params.data;
|
||||
colMetrics.value = params.names;
|
||||
colSubMetrics.value = params.subNames;
|
||||
metricTypes.value = params.metricTypesArr;
|
||||
typesOfMQE.value = params.metricTypesArr;
|
||||
metricConfig.value = params.metricConfigArr;
|
||||
emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
|
||||
|
||||
|
|
@ -223,7 +190,7 @@ limitations under the License. -->
|
|||
instances.value = currentInstances;
|
||||
colSubMetrics.value = [];
|
||||
colMetrics.value = [];
|
||||
metricTypes.value = [];
|
||||
typesOfMQE.value = [];
|
||||
metricConfig.value = [];
|
||||
emit("expressionTips", [], []);
|
||||
}
|
||||
|
|
@ -262,19 +229,15 @@ limitations under the License. -->
|
|||
|
||||
watch(
|
||||
() => [
|
||||
...(props.config.metricTypes || []),
|
||||
...(props.config.metrics || []),
|
||||
...(props.config.metricConfig || []),
|
||||
...(props.config.expressions || []),
|
||||
...(props.config.subExpressions || []),
|
||||
props.config.metricMode,
|
||||
],
|
||||
(data, old) => {
|
||||
if (JSON.stringify(data) === JSON.stringify(old)) {
|
||||
return;
|
||||
}
|
||||
metricConfig.value = props.config.metricConfig;
|
||||
metricMode.value = props.config.metricMode;
|
||||
queryInstanceMetrics(instances.value);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -51,8 +51,7 @@ limitations under the License. -->
|
|||
:config="{
|
||||
...config,
|
||||
metricConfig,
|
||||
metricTypes,
|
||||
metricMode,
|
||||
typesOfMQE,
|
||||
}"
|
||||
v-if="colMetrics.length"
|
||||
/>
|
||||
|
|
@ -78,9 +77,8 @@ limitations under the License. -->
|
|||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import type { Service } from "@/types/selector";
|
||||
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
|
||||
import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
|
||||
import { EntityType, MetricModes } from "../data";
|
||||
import { EntityType } from "../data";
|
||||
import router from "@/router";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
|
|
@ -95,12 +93,9 @@ limitations under the License. -->
|
|||
type: Object as PropType<
|
||||
ServiceListConfig & {
|
||||
i: string;
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
isEdit: boolean;
|
||||
names: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
metricMode: string;
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
subExpressions: string[];
|
||||
|
|
@ -125,8 +120,7 @@ limitations under the License. -->
|
|||
const groups = ref<any>({});
|
||||
const sortServices = ref<(Service & { merge: boolean })[]>([]);
|
||||
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
|
||||
const metricTypes = ref<string[]>(props.config.metricTypes || []);
|
||||
const metricMode = ref<string>(props.config.metricMode);
|
||||
const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
|
||||
|
||||
queryServices();
|
||||
|
||||
|
|
@ -211,43 +205,7 @@ limitations under the License. -->
|
|||
shortName: d.shortName,
|
||||
};
|
||||
});
|
||||
if (props.config.metricMode === MetricModes.Expression) {
|
||||
queryServiceExpressions(currentServices);
|
||||
return;
|
||||
}
|
||||
const metrics = props.config.metrics || [];
|
||||
const types = props.config.metricTypes || [];
|
||||
|
||||
if (metrics.length && metrics[0] && types.length && types[0]) {
|
||||
const params = await useQueryPodsMetrics(
|
||||
currentServices,
|
||||
{ ...props.config, metricConfig: metricConfig.value || [] },
|
||||
EntityType[0].value,
|
||||
);
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentServices, json, {
|
||||
...props.config,
|
||||
metricConfig: metricConfig.value || [],
|
||||
});
|
||||
|
||||
services.value = data;
|
||||
colMetrics.value = names;
|
||||
metricTypes.value = metricTypesArr;
|
||||
metricConfig.value = metricConfigArr;
|
||||
|
||||
return;
|
||||
}
|
||||
services.value = currentServices;
|
||||
colMetrics.value = [];
|
||||
colMetrics.value = [];
|
||||
metricTypes.value = [];
|
||||
metricConfig.value = [];
|
||||
}
|
||||
async function queryServiceExpressions(currentServices: Service[]) {
|
||||
const expressions = props.config.expressions || [];
|
||||
|
|
@ -262,16 +220,16 @@ limitations under the License. -->
|
|||
services.value = params.data;
|
||||
colMetrics.value = params.names;
|
||||
colSubMetrics.value = params.subNames;
|
||||
metricTypes.value = params.metricTypesArr;
|
||||
metricConfig.value = params.metricConfigArr;
|
||||
typesOfMQE.value = params.metricTypesArr;
|
||||
emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
|
||||
return;
|
||||
}
|
||||
services.value = currentServices;
|
||||
colMetrics.value = [];
|
||||
colSubMetrics.value = [];
|
||||
metricTypes.value = [];
|
||||
metricConfig.value = [];
|
||||
typesOfMQE.value = [];
|
||||
emit("expressionTips", [], []);
|
||||
}
|
||||
function objectSpanMethod(param: any): any {
|
||||
|
|
@ -306,19 +264,15 @@ limitations under the License. -->
|
|||
|
||||
watch(
|
||||
() => [
|
||||
...(props.config.metricTypes || []),
|
||||
...(props.config.metrics || []),
|
||||
...(props.config.metricConfig || []),
|
||||
...(props.config.expressions || []),
|
||||
...(props.config.subExpressions || []),
|
||||
props.config.metricMode,
|
||||
],
|
||||
(data, old) => {
|
||||
if (JSON.stringify(data) === JSON.stringify(old)) {
|
||||
return;
|
||||
}
|
||||
metricConfig.value = props.config.metricConfig;
|
||||
metricMode.value = props.config.metricMode;
|
||||
queryServiceMetrics(services.value);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@ limitations under the License. -->
|
|||
type: Object as PropType<{
|
||||
showTableValues: boolean;
|
||||
tableHeaderCol2: string;
|
||||
metricTypes: string[];
|
||||
typesOfMQE: string[];
|
||||
}>,
|
||||
default: () => ({ showTableValues: true }),
|
||||
|
|
@ -66,10 +65,6 @@ limitations under the License. -->
|
|||
const { t } = useI18n();
|
||||
const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
|
||||
const dataKeys = computed(() => {
|
||||
if (props.config.metricTypes && props.config.metricTypes[0] === "readMetricsValue") {
|
||||
const keys = Object.keys(props.data || {});
|
||||
return keys;
|
||||
}
|
||||
const keys = Object.keys(props.data || {}).filter(
|
||||
(i: string) => Array.isArray(props.data[i]) && props.data[i].length,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -64,8 +64,7 @@ limitations under the License. -->
|
|||
import copy from "@/utils/copy";
|
||||
import { TextColors } from "@/views/dashboard/data";
|
||||
import Trace from "@/views/dashboard/related/trace/Index.vue";
|
||||
import { QueryOrders, Status, RefIdTypes, ProtocolTypes, ExpressionResultType } from "../data";
|
||||
import { WidgetType } from "@/views/dashboard/data";
|
||||
import { WidgetType, QueryOrders, Status, RefIdTypes, ExpressionResultType } from "@/views/dashboard/data";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
|
|
@ -77,10 +76,8 @@ limitations under the License. -->
|
|||
},
|
||||
config: {
|
||||
type: Object as PropType<{
|
||||
metricMode: string;
|
||||
color: string;
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
relatedTrace: any;
|
||||
}>,
|
||||
|
|
@ -116,11 +113,8 @@ limitations under the License. -->
|
|||
queryOrder: QueryOrders[1].value,
|
||||
status: Status[2].value,
|
||||
id: item.refId,
|
||||
metricValue: [{ label: props.config.metrics[0], data: item.value, value: item.name }],
|
||||
isReadRecords:
|
||||
props.config.typesOfMQE.includes(ExpressionResultType.RECORD_LIST) ||
|
||||
props.config.metricTypes.includes(ProtocolTypes.ReadRecords) ||
|
||||
undefined,
|
||||
metricValue: [{ label: props.config.expressions[0], data: item.value, value: item.name }],
|
||||
isReadRecords: props.config.typesOfMQE.includes(ExpressionResultType.RECORD_LIST) || undefined,
|
||||
};
|
||||
traceOptions.value = {
|
||||
...traceOptions.value,
|
||||
|
|
|
|||
|
|
@ -22,23 +22,7 @@ limitations under the License. -->
|
|||
>
|
||||
<template #default="scope">
|
||||
<div class="chart">
|
||||
<Line
|
||||
v-if="useListConfig(config, index).isLinear && config.metricMode !== MetricModes.Expression"
|
||||
:data="{
|
||||
[metric]: scope.row[metric] && scope.row[metric].values,
|
||||
}"
|
||||
:intervalTime="intervalTime"
|
||||
:config="{
|
||||
showXAxis: false,
|
||||
showYAxis: false,
|
||||
smallTips: true,
|
||||
showlabels: false,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="item flex-h"
|
||||
v-else-if="useListConfig(config, index).isAvg || config.metricMode === MetricModes.Expression"
|
||||
>
|
||||
<span class="item flex-h">
|
||||
<el-popover placement="left" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<span class="trend">
|
||||
|
|
@ -70,7 +54,6 @@ limitations under the License. -->
|
|||
/>
|
||||
</span>
|
||||
</span>
|
||||
<Card v-else :data="{ [metric]: scope.row[metric] }" :config="{ textAlign: 'left' }" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -79,11 +62,9 @@ limitations under the License. -->
|
|||
<script lang="ts" setup>
|
||||
import type { PropType } from "vue";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { useListConfig } from "@/hooks/useListConfig";
|
||||
import Line from "../Line.vue";
|
||||
import Card from "../Card.vue";
|
||||
import { MetricQueryTypes } from "@/hooks/data";
|
||||
import { ExpressionResultType, MetricModes } from "@/views/dashboard/data";
|
||||
import { ExpressionResultType } from "@/views/dashboard/data";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
|
|
@ -92,9 +73,8 @@ limitations under the License. -->
|
|||
config: {
|
||||
type: Object as PropType<{
|
||||
i: string;
|
||||
metricTypes: string[];
|
||||
typesOfMQE: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
metricMode: string;
|
||||
}>,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
|
@ -120,13 +100,9 @@ limitations under the License. -->
|
|||
}
|
||||
if (label) {
|
||||
if (
|
||||
(
|
||||
[
|
||||
MetricQueryTypes.ReadLabeledMetricsValues,
|
||||
ExpressionResultType.TIME_SERIES_VALUES,
|
||||
ExpressionResultType.SINGLE_VALUE,
|
||||
] as string[]
|
||||
).includes(props.config.metricTypes[i])
|
||||
([ExpressionResultType.TIME_SERIES_VALUES, ExpressionResultType.SINGLE_VALUE] as string[]).includes(
|
||||
props.config.typesOfMQE[i],
|
||||
)
|
||||
) {
|
||||
const name = (label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""))[
|
||||
props.config.metricConfig[i].index || 0
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ limitations under the License. -->
|
|||
{{ t("expressions") }}
|
||||
</span>
|
||||
<span class="label" v-else>
|
||||
{{ t(dashboardStore.selectedGrid.metricMode === MetricModes.General ? "metrics" : "expressions") }}
|
||||
{{ t("expressions") }}
|
||||
</span>
|
||||
<SelectSingle :value="currentMetric" :options="metricList" @change="changeMetric" class="selectors" />
|
||||
</div>
|
||||
|
|
@ -43,33 +43,19 @@ limitations under the License. -->
|
|||
@change="changeConfigs({ label: currentConfig.label })"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="item mb-10"
|
||||
v-if="type !== 'hierarchyServicesConfig' && dashboardStore.selectedGrid.metricMode === MetricModes.General"
|
||||
>
|
||||
<span class="label">{{ t("aggregation") }}</span>
|
||||
<SelectSingle
|
||||
:value="currentConfig.calculation"
|
||||
:options="CalculationOpts"
|
||||
@change="changeConfigs({ calculation: $event })"
|
||||
class="selectors"
|
||||
:clearable="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { Option } from "@/types/app";
|
||||
import { CalculationOpts, MetricModes, EntityType, ConfigFieldTypes } from "@/views/dashboard/data";
|
||||
import { EntityType, ConfigFieldTypes } from "@/views/dashboard/data";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
|
||||
/*global defineEmits, defineProps */
|
||||
const props = defineProps({
|
||||
type: { type: String, default: "" },
|
||||
isExpression: { type: Boolean, default: true },
|
||||
layer: { type: String, default: "" },
|
||||
expressions: { type: Array<string>, default: () => [] },
|
||||
entity: { type: String, default: EntityType[0].value },
|
||||
|
|
@ -82,23 +68,16 @@ limitations under the License. -->
|
|||
return props.expressions || [];
|
||||
}
|
||||
let metrics: string[] = [];
|
||||
const {
|
||||
linkServerExpressions,
|
||||
linkServerMetrics,
|
||||
linkClientExpressions,
|
||||
linkClientMetrics,
|
||||
nodeExpressions,
|
||||
nodeMetrics,
|
||||
} = dashboardStore.selectedGrid;
|
||||
const { linkServerExpressions, linkClientExpressions, nodeExpressions } = dashboardStore.selectedGrid;
|
||||
switch (props.type) {
|
||||
case "linkServerMetricConfig":
|
||||
metrics = props.isExpression ? linkServerExpressions : linkServerMetrics;
|
||||
metrics = linkServerExpressions;
|
||||
break;
|
||||
case "linkClientMetricConfig":
|
||||
metrics = props.isExpression ? linkClientExpressions : linkClientMetrics;
|
||||
metrics = linkClientExpressions;
|
||||
break;
|
||||
case "nodeMetricConfig":
|
||||
metrics = props.isExpression ? nodeExpressions : nodeMetrics;
|
||||
metrics = nodeExpressions;
|
||||
break;
|
||||
}
|
||||
return metrics || [];
|
||||
|
|
|
|||
|
|
@ -13,17 +13,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="mt-20">
|
||||
<h5 class="title">{{ t("metricMode") }}</h5>
|
||||
<el-switch
|
||||
v-model="isExpression"
|
||||
class="mt-5"
|
||||
active-text="Expressions"
|
||||
inactive-text="General"
|
||||
size="small"
|
||||
@change="changeMetricMode"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-20">
|
||||
<h5 class="title">{{ t("callSettings") }}</h5>
|
||||
<div class="label">{{ t("linkDashboard") }}</div>
|
||||
|
|
@ -38,21 +27,16 @@ limitations under the License. -->
|
|||
/>
|
||||
<div class="label">
|
||||
<span>{{ t("linkServerMetrics") }}</span>
|
||||
<el-popover
|
||||
placement="left"
|
||||
:width="400"
|
||||
trigger="click"
|
||||
v-if="isExpression ? states.linkServerExpressions.length : states.linkServerMetrics.length"
|
||||
>
|
||||
<el-popover placement="left" :width="400" trigger="click" v-if="states.linkServerExpressions.length">
|
||||
<template #reference>
|
||||
<span @click="setConfigType('linkServerMetricConfig')">
|
||||
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
|
||||
</span>
|
||||
</template>
|
||||
<Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
|
||||
<Metrics :type="configType" @update="updateSettings" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-if="isExpression">
|
||||
<div>
|
||||
<Tags
|
||||
:tags="states.linkServerExpressions"
|
||||
:vertical="true"
|
||||
|
|
@ -60,34 +44,19 @@ limitations under the License. -->
|
|||
@change="(param: string[]) => changeLinkServerExpressions(param)"
|
||||
/>
|
||||
</div>
|
||||
<Selector
|
||||
v-else
|
||||
class="inputs"
|
||||
:multiple="true"
|
||||
:value="states.linkServerMetrics"
|
||||
:options="states.linkMetricList"
|
||||
size="small"
|
||||
placeholder="Select metrics"
|
||||
@change="updateLinkServerMetrics"
|
||||
/>
|
||||
<span v-show="dashboardStore.entity !== EntityType[2].value">
|
||||
<div class="label">
|
||||
<span>{{ t("linkClientMetrics") }}</span>
|
||||
<el-popover
|
||||
placement="left"
|
||||
:width="400"
|
||||
trigger="click"
|
||||
v-if="isExpression ? states.linkClientExpressions.length : states.linkClientMetrics.length"
|
||||
>
|
||||
<el-popover placement="left" :width="400" trigger="click" v-if="states.linkClientExpressions.length">
|
||||
<template #reference>
|
||||
<span @click="setConfigType('linkClientMetricConfig')">
|
||||
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
|
||||
</span>
|
||||
</template>
|
||||
<Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
|
||||
<Metrics :type="configType" @update="updateSettings" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-if="isExpression">
|
||||
<div>
|
||||
<Tags
|
||||
:tags="states.linkClientExpressions"
|
||||
:vertical="true"
|
||||
|
|
@ -95,16 +64,6 @@ limitations under the License. -->
|
|||
@change="(param: string[]) => changeLinkClientExpressions(param)"
|
||||
/>
|
||||
</div>
|
||||
<Selector
|
||||
v-else
|
||||
class="inputs"
|
||||
:multiple="true"
|
||||
:value="states.linkClientMetrics"
|
||||
:options="states.linkMetricList"
|
||||
size="small"
|
||||
placeholder="Select metrics"
|
||||
@change="updateLinkClientMetrics"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -149,21 +108,16 @@ limitations under the License. -->
|
|||
</div>
|
||||
<div class="label">
|
||||
<span>{{ t("nodeMetrics") }}</span>
|
||||
<el-popover
|
||||
placement="left"
|
||||
:width="400"
|
||||
trigger="click"
|
||||
v-if="isExpression ? states.nodeExpressions.length : states.nodeMetrics.length"
|
||||
>
|
||||
<el-popover placement="left" :width="400" trigger="click" v-if="states.nodeExpressions.length">
|
||||
<template #reference>
|
||||
<span @click="setConfigType('nodeMetricConfig')">
|
||||
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
|
||||
</span>
|
||||
</template>
|
||||
<Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
|
||||
<Metrics :type="configType" @update="updateSettings" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-if="isExpression">
|
||||
<div>
|
||||
<Tags
|
||||
:tags="states.nodeExpressions"
|
||||
:vertical="true"
|
||||
|
|
@ -171,28 +125,17 @@ limitations under the License. -->
|
|||
@change="(param: string[]) => changeNodeExpressions(param)"
|
||||
/>
|
||||
</div>
|
||||
<Selector
|
||||
v-else
|
||||
class="inputs"
|
||||
:multiple="true"
|
||||
:value="states.nodeMetrics"
|
||||
:options="states.nodeMetricList"
|
||||
size="small"
|
||||
placeholder="Select metrics"
|
||||
@change="updateNodeMetrics"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="isService">
|
||||
<h5 class="title">{{ t("legendSettings") }}</h5>
|
||||
<span v-if="isExpression">
|
||||
<span>
|
||||
<div class="label">Healthy Description</div>
|
||||
<el-input v-model="description.healthy" placeholder="Please input description" size="small" class="mt-5" />
|
||||
</span>
|
||||
<div class="label">
|
||||
<span>{{ t(isExpression ? "unhealthyExpression" : "conditions") }}</span>
|
||||
<span>{{ t("unhealthyExpression") }}</span>
|
||||
<el-tooltip
|
||||
class="cp"
|
||||
v-if="isExpression"
|
||||
content="The node would be red to indicate unhealthy status when the expression return greater than 0"
|
||||
>
|
||||
<span>
|
||||
|
|
@ -200,50 +143,9 @@ limitations under the License. -->
|
|||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-if="isExpression">
|
||||
<div>
|
||||
<el-input v-model="legendMQE.expression" placeholder="Please input a expression" size="small" class="inputs" />
|
||||
</div>
|
||||
<div v-for="(metric, index) of legend" :key="index" v-else>
|
||||
<Selector
|
||||
class="item"
|
||||
:value="metric.name"
|
||||
:options="states.nodeMetricList"
|
||||
size="small"
|
||||
placeholder="Select a metric"
|
||||
@change="changeLegend(LegendOpt.NAME, $event, index)"
|
||||
/>
|
||||
<Selector
|
||||
class="input-small"
|
||||
:value="metric.condition"
|
||||
:options="MetricConditions"
|
||||
size="small"
|
||||
placeholder="Select a condition"
|
||||
@change="changeLegend(LegendOpt.CONDITION, $event, index)"
|
||||
/>
|
||||
<el-input
|
||||
v-model="metric.value"
|
||||
placeholder="Please input a value"
|
||||
type="number"
|
||||
@change="changeLegend(LegendOpt.VALUE, $event, index)"
|
||||
size="small"
|
||||
class="item"
|
||||
/>
|
||||
<span>
|
||||
<Icon class="cp delete" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
|
||||
<Icon
|
||||
class="cp"
|
||||
iconName="add_circle_outlinecontrol_point"
|
||||
size="middle"
|
||||
v-show="index === legend.length - 1 && legend.length < 5"
|
||||
@click="addMetric"
|
||||
/>
|
||||
</span>
|
||||
<div v-show="index !== legend.length - 1">&&</div>
|
||||
</div>
|
||||
<span v-if="!isExpression">
|
||||
<div class="label">Healthy Description</div>
|
||||
<el-input v-model="description.healthy" placeholder="Please input description" size="small" class="mt-5" />
|
||||
</span>
|
||||
<div class="label">Unhealthy Description</div>
|
||||
<el-input v-model="description.unhealthy" placeholder="Please input description" size="small" class="mt-5" />
|
||||
<el-button @click="setLegend" class="mt-20" size="small" type="primary">
|
||||
|
|
@ -257,20 +159,9 @@ limitations under the License. -->
|
|||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useTopologyStore } from "@/store/modules/topology";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
MetricCatalog,
|
||||
ScopeType,
|
||||
MetricConditions,
|
||||
EntityType,
|
||||
LegendOpt,
|
||||
MetricsType,
|
||||
MetricModes,
|
||||
CallTypes,
|
||||
} from "@/views/dashboard/data";
|
||||
import { ScopeType, EntityType, CallTypes } from "@/views/dashboard/data";
|
||||
import type { Option } from "@/types/app";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
|
||||
import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
|
||||
import type { Node } from "@/types/topology";
|
||||
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
|
||||
import Metrics from "./Metrics.vue";
|
||||
|
||||
|
|
@ -280,7 +171,6 @@ limitations under the License. -->
|
|||
const dashboardStore = useDashboardStore();
|
||||
const topologyStore = useTopologyStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
|
||||
const nodeDashboard =
|
||||
selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : "";
|
||||
const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
|
||||
|
|
@ -296,11 +186,6 @@ limitations under the License. -->
|
|||
scope: string;
|
||||
dashboard: string;
|
||||
}[];
|
||||
linkServerMetrics: string[];
|
||||
linkClientMetrics: string[];
|
||||
nodeMetrics: string[];
|
||||
nodeMetricList: Option[];
|
||||
linkMetricList: Option[];
|
||||
linkDashboards: (DashboardItem & { label: string; value: string })[];
|
||||
nodeDashboards: (DashboardItem & { label: string; value: string })[];
|
||||
linkServerExpressions: string[];
|
||||
|
|
@ -309,27 +194,18 @@ limitations under the License. -->
|
|||
}>({
|
||||
linkDashboard: selectedGrid.linkDashboard || "",
|
||||
nodeDashboard: selectedGrid.nodeDashboard || [],
|
||||
linkServerMetrics: selectedGrid.linkServerMetrics || [],
|
||||
linkClientMetrics: selectedGrid.linkClientMetrics || [],
|
||||
nodeMetrics: selectedGrid.nodeMetrics || [],
|
||||
nodeMetricList: [],
|
||||
linkMetricList: [],
|
||||
linkDashboards: [],
|
||||
nodeDashboards: [],
|
||||
linkServerExpressions: selectedGrid.linkServerExpressions || [],
|
||||
linkClientExpressions: selectedGrid.linkClientExpressions || [],
|
||||
nodeExpressions: selectedGrid.nodeExpressions || [],
|
||||
});
|
||||
const l = selectedGrid.legend && selectedGrid.legend.length;
|
||||
const legend = ref<{ name: string; condition: string; value: string }[]>(
|
||||
l ? selectedGrid.legend : [{ name: "", condition: "", value: "" }],
|
||||
);
|
||||
const legendMQE = ref<{ expression: string }>(selectedGrid.legendMQE || { expression: "" });
|
||||
const configType = ref<string>("");
|
||||
const description = reactive<any>(selectedGrid.description || {});
|
||||
|
||||
getMetricList();
|
||||
async function getMetricList() {
|
||||
getDashboardList();
|
||||
async function getDashboardList() {
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
const json = await dashboardStore.fetchMetricList();
|
||||
if (json.errors) {
|
||||
|
|
@ -351,13 +227,6 @@ limitations under the License. -->
|
|||
},
|
||||
[],
|
||||
);
|
||||
states.nodeMetricList = (json.data.metrics || []).filter(
|
||||
(d: { type: string }) => d.type === MetricsType.REGULAR_VALUE,
|
||||
);
|
||||
states.linkMetricList = (json.data.metrics || []).filter(
|
||||
(d: { catalog: string; type: string }) =>
|
||||
entity + "Relation" === (MetricCatalog as any)[d.catalog] && d.type === MetricsType.REGULAR_VALUE,
|
||||
);
|
||||
if (isService) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -373,12 +242,7 @@ limitations under the License. -->
|
|||
}
|
||||
async function setLegend() {
|
||||
updateSettings();
|
||||
if (isExpression.value) {
|
||||
const expression = dashboardStore.selectedGrid.legendMQE && dashboardStore.selectedGrid.legendMQE.expression;
|
||||
if (!expression) {
|
||||
emit("updateNodes");
|
||||
return;
|
||||
}
|
||||
const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes);
|
||||
const param = getExpressionQuery();
|
||||
const res = await topologyStore.getNodeExpressionValue(param);
|
||||
|
|
@ -387,22 +251,6 @@ limitations under the License. -->
|
|||
} else {
|
||||
topologyStore.setLegendValues([expression], res.data);
|
||||
}
|
||||
} else {
|
||||
const names = dashboardStore.selectedGrid.legend.map((d: any) => d.name && d.condition && d.value);
|
||||
if (!names.length) {
|
||||
emit("updateNodes");
|
||||
return;
|
||||
}
|
||||
const ids = topologyStore.nodes.map((d: Node) => d.id);
|
||||
const param = await useQueryTopologyMetrics(names, ids);
|
||||
const res = await topologyStore.getLegendMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
|
||||
emit("updateNodes");
|
||||
}
|
||||
function changeNodeDashboard(opt: any) {
|
||||
states.nodeDashboard = opt[0].value;
|
||||
|
|
@ -412,9 +260,6 @@ limitations under the License. -->
|
|||
states.linkDashboard = opt[0].value;
|
||||
updateSettings();
|
||||
}
|
||||
function changeLegend(type: string, opt: any, index: number) {
|
||||
(legend.value[index] as any)[type] = opt[0].value || opt;
|
||||
}
|
||||
function changeScope(index: number, opt: Option[] | any) {
|
||||
items[index].scope = opt[0].value;
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
|
|
@ -445,27 +290,15 @@ limitations under the License. -->
|
|||
updateSettings();
|
||||
}
|
||||
function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
|
||||
let metrics = [];
|
||||
if (isExpression.value) {
|
||||
metrics = legend.value.filter((d: any) => d.name);
|
||||
} else {
|
||||
metrics = legend.value.filter((d: any) => d.name && d.value && d.condition);
|
||||
}
|
||||
|
||||
const param = {
|
||||
...dashboardStore.selectedGrid,
|
||||
linkDashboard: states.linkDashboard,
|
||||
nodeDashboard: isService
|
||||
? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
|
||||
: states.nodeDashboard,
|
||||
linkServerMetrics: states.linkServerMetrics,
|
||||
linkClientMetrics: states.linkClientMetrics,
|
||||
nodeMetrics: states.nodeMetrics,
|
||||
linkServerExpressions: states.linkServerExpressions,
|
||||
linkClientExpressions: states.linkClientExpressions,
|
||||
nodeExpressions: states.nodeExpressions,
|
||||
metricMode: isExpression.value ? MetricModes.Expression : MetricModes.General,
|
||||
legend: metrics,
|
||||
legendMQE: legendMQE.value,
|
||||
...metricConfig,
|
||||
description,
|
||||
|
|
@ -474,30 +307,8 @@ limitations under the License. -->
|
|||
dashboardStore.setConfigs(param);
|
||||
emit("update", param);
|
||||
}
|
||||
function updateLinkServerMetrics(options: Option[] | any) {
|
||||
const opt = options.map((d: Option) => d.value);
|
||||
const index = states.linkServerMetrics.findIndex((d: any) => !opt.includes(d));
|
||||
states.linkServerMetrics = opt;
|
||||
if (index < 0) {
|
||||
changeLinkServerMetrics();
|
||||
return;
|
||||
}
|
||||
const origin = dashboardStore.selectedGrid.linkServerMetricConfig || [];
|
||||
const config = origin.length === 1 ? [] : origin.splice(index, 1);
|
||||
changeLinkServerMetrics({ linkServerMetricConfig: config });
|
||||
}
|
||||
async function changeLinkServerMetrics(config?: { [key: string]: MetricConfigOpt[] }) {
|
||||
updateSettings(config);
|
||||
if (!states.linkServerMetrics.length) {
|
||||
topologyStore.setLinkServerMetrics({});
|
||||
return;
|
||||
}
|
||||
topologyStore.getLinkServerMetrics(states.linkServerMetrics);
|
||||
}
|
||||
|
||||
function changeLinkServerExpressions(param: string[]) {
|
||||
if (!isExpression.value) {
|
||||
return;
|
||||
}
|
||||
states.linkServerExpressions = param;
|
||||
updateSettings();
|
||||
if (!states.linkServerExpressions.length) {
|
||||
|
|
@ -507,9 +318,6 @@ limitations under the License. -->
|
|||
topologyStore.getLinkExpressions(states.linkServerExpressions, CallTypes.Server);
|
||||
}
|
||||
function changeLinkClientExpressions(param: string[]) {
|
||||
if (!isExpression.value) {
|
||||
return;
|
||||
}
|
||||
states.linkClientExpressions = param;
|
||||
updateSettings();
|
||||
if (!states.linkClientExpressions.length) {
|
||||
|
|
@ -518,63 +326,11 @@ limitations under the License. -->
|
|||
}
|
||||
topologyStore.getLinkExpressions(states.linkClientExpressions, CallTypes.Client);
|
||||
}
|
||||
function updateLinkClientMetrics(options: Option[] | any) {
|
||||
const opt = options.map((d: Option) => d.value);
|
||||
const index = states.linkClientMetrics.findIndex((d: any) => !opt.includes(d));
|
||||
states.linkClientMetrics = opt;
|
||||
if (index < 0) {
|
||||
changeLinkClientMetrics();
|
||||
return;
|
||||
}
|
||||
const origin = dashboardStore.selectedGrid.linkClientMetricConfig || [];
|
||||
const config = origin.length === 1 ? [] : origin.splice(index, 1);
|
||||
changeLinkClientMetrics({ linkClientMetricConfig: config });
|
||||
}
|
||||
async function changeLinkClientMetrics(config?: { [key: string]: MetricConfigOpt[] }) {
|
||||
updateSettings(config);
|
||||
if (!states.linkClientMetrics.length) {
|
||||
topologyStore.setLinkClientMetrics({});
|
||||
return;
|
||||
}
|
||||
topologyStore.getLinkClientMetrics(states.linkClientMetrics);
|
||||
}
|
||||
function updateNodeMetrics(options: Option[] | any) {
|
||||
const opt = options.map((d: Option) => d.value);
|
||||
const index = states.nodeMetrics.findIndex((d: any) => !opt.includes(d));
|
||||
states.nodeMetrics = opt;
|
||||
if (index < 0) {
|
||||
changeNodeMetrics();
|
||||
return;
|
||||
}
|
||||
const origin = dashboardStore.selectedGrid.nodeMetricConfig || [];
|
||||
const config = origin.length === 1 ? [] : origin.splice(index, 1);
|
||||
changeNodeMetrics({ nodeMetricConfig: config });
|
||||
}
|
||||
async function changeNodeMetrics(config?: { [key: string]: MetricConfigOpt[] }) {
|
||||
updateSettings(config);
|
||||
if (!states.nodeMetrics.length) {
|
||||
topologyStore.setNodeMetricValue({});
|
||||
return;
|
||||
}
|
||||
topologyStore.queryNodeMetrics(states.nodeMetrics);
|
||||
}
|
||||
function deleteMetric(index: number) {
|
||||
if (legend.value.length === 1) {
|
||||
legend.value = [{ name: "", condition: "", value: "" }];
|
||||
return;
|
||||
}
|
||||
legend.value.splice(index, 1);
|
||||
}
|
||||
function addMetric() {
|
||||
legend.value.push({ name: "", condition: "", value: "" });
|
||||
}
|
||||
|
||||
function setConfigType(type: string) {
|
||||
configType.value = type;
|
||||
}
|
||||
function changeNodeExpressions(param: string[]) {
|
||||
if (!isExpression.value) {
|
||||
return;
|
||||
}
|
||||
states.nodeExpressions = param;
|
||||
updateSettings();
|
||||
if (!states.nodeExpressions.length) {
|
||||
|
|
@ -583,25 +339,6 @@ limitations under the License. -->
|
|||
}
|
||||
topologyStore.queryNodeExpressions(states.nodeExpressions);
|
||||
}
|
||||
function changeMetricMode() {
|
||||
legend.value = [{ name: "", condition: "", value: "" }];
|
||||
const config = {
|
||||
linkServerMetricConfig: [],
|
||||
linkClientMetricConfig: [],
|
||||
nodeMetricConfig: [],
|
||||
};
|
||||
if (isExpression.value) {
|
||||
states.linkServerMetrics = [];
|
||||
states.linkClientMetrics = [];
|
||||
states.nodeMetrics = [];
|
||||
} else {
|
||||
states.linkServerExpressions = [];
|
||||
states.linkClientExpressions = [];
|
||||
states.nodeExpressions = [];
|
||||
}
|
||||
|
||||
updateSettings(config);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.inputs {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ limitations under the License. -->
|
|||
import router from "@/router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { aggregation } from "@/hooks/useMetricsProcessor";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import Graph from "../components/Graph.vue";
|
||||
|
||||
|
|
@ -129,8 +128,8 @@ limitations under the License. -->
|
|||
(val: { id: string; value: unknown }) => val.id === data.id,
|
||||
) || {};
|
||||
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
|
||||
});
|
||||
const tipHtml = [
|
||||
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ limitations under the License. -->
|
|||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { EntityType, DepthList, MetricModes, CallTypes } from "@/views/dashboard/data";
|
||||
import { EntityType, DepthList, CallTypes } from "@/views/dashboard/data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import Sankey from "./Sankey.vue";
|
||||
import Settings from "../config/Settings.vue";
|
||||
|
|
@ -119,15 +119,9 @@ limitations under the License. -->
|
|||
};
|
||||
height.value = dom.height - 70;
|
||||
width.value = dom.width - 5;
|
||||
if (settings.value.metricMode === MetricModes.Expression) {
|
||||
topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
|
||||
topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
|
||||
topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);
|
||||
} else {
|
||||
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
|
|
|
|||
|
|
@ -22,8 +22,6 @@ limitations under the License. -->
|
|||
import { useTopologyStore } from "@/store/modules/topology";
|
||||
import type { Node, Call } from "@/types/topology";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { aggregation } from "@/hooks/useMetricsProcessor";
|
||||
import { MetricModes } from "@/views/dashboard/data";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { Themes } from "@/constants/data";
|
||||
|
||||
|
|
@ -85,14 +83,8 @@ limitations under the License. -->
|
|||
};
|
||||
}
|
||||
function linkTooltip(data: Call) {
|
||||
const clientMetrics: string[] =
|
||||
props.settings.metricMode === MetricModes.Expression
|
||||
? props.settings.linkClientExpressions
|
||||
: props.settings.linkClientMetrics;
|
||||
const serverMetrics: string[] =
|
||||
props.settings.metricMode === MetricModes.Expression
|
||||
? props.settings.linkServerExpressions
|
||||
: props.settings.linkServerMetrics;
|
||||
const clientMetrics: string[] = props.settings.linkClientExpressions;
|
||||
const serverMetrics: string[] = props.settings.linkServerExpressions;
|
||||
const linkServerMetricConfig: MetricConfigOpt[] = props.settings.linkServerMetricConfig || [];
|
||||
const linkClientMetricConfig: MetricConfigOpt[] = props.settings.linkClientMetricConfig || [];
|
||||
|
||||
|
|
@ -102,8 +94,10 @@ limitations under the License. -->
|
|||
{};
|
||||
if (metric) {
|
||||
const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
|
||||
opt.unit || ""
|
||||
}</div>`;
|
||||
}
|
||||
});
|
||||
const htmlClient = clientMetrics.map((m, index) => {
|
||||
|
|
@ -111,8 +105,8 @@ limitations under the License. -->
|
|||
const metric =
|
||||
topologyStore.linkClientMetrics[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) ||
|
||||
{};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
|
||||
});
|
||||
const html = [
|
||||
`<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
|
||||
|
|
@ -124,17 +118,14 @@ limitations under the License. -->
|
|||
}
|
||||
|
||||
function nodeTooltip(data: Node) {
|
||||
const nodeMetrics: string[] =
|
||||
props.settings.metricMode === MetricModes.Expression
|
||||
? props.settings.nodeExpressions
|
||||
: props.settings.nodeMetrics;
|
||||
const nodeMetrics: string[] = props.settings.nodeExpressions;
|
||||
const nodeMetricConfig = props.settings.nodeMetricConfig || [];
|
||||
const html = nodeMetrics.map((m, index) => {
|
||||
const metric =
|
||||
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
|
||||
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
|
||||
});
|
||||
return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(" ");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ limitations under the License. -->
|
|||
import router from "@/router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { aggregation } from "@/hooks/useMetricsProcessor";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import Graph from "../components/Graph.vue";
|
||||
|
||||
|
|
@ -137,8 +136,7 @@ limitations under the License. -->
|
|||
(val: { id: string; value: unknown }) => val.id === data.id,
|
||||
) || {};
|
||||
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
|
||||
});
|
||||
const tipHtml = [
|
||||
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ limitations under the License. -->
|
|||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useTopologyStore } from "@/store/modules/topology";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { EntityType, DepthList, MetricModes, CallTypes } from "@/views/dashboard/data";
|
||||
import { EntityType, DepthList, CallTypes } from "@/views/dashboard/data";
|
||||
import router from "@/router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import Settings from "../config/Settings.vue";
|
||||
|
|
@ -154,9 +154,7 @@ limitations under the License. -->
|
|||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import { aggregation } from "@/hooks/useMetricsProcessor";
|
||||
import icons from "@/assets/img/icons";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
|
||||
import { layout, computeLevels, changeNode } from "../components/utils/layout";
|
||||
import zoom from "@/views/dashboard/related/components/utils/zoom";
|
||||
import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
|
||||
|
|
@ -231,15 +229,9 @@ limitations under the License. -->
|
|||
}
|
||||
|
||||
async function update() {
|
||||
if (settings.value.metricMode === MetricModes.Expression) {
|
||||
topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
|
||||
topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
|
||||
topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);
|
||||
} else {
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
await initLegendMetrics();
|
||||
|
|
@ -288,7 +280,7 @@ limitations under the License. -->
|
|||
if (!topologyStore.nodes.length) {
|
||||
return;
|
||||
}
|
||||
if (settings.value.metricMode === MetricModes.Expression) {
|
||||
|
||||
const expression = props.config.legendMQE && props.config.legendMQE.expression;
|
||||
if (!expression) {
|
||||
return;
|
||||
|
|
@ -301,25 +293,10 @@ limitations under the License. -->
|
|||
} else {
|
||||
topologyStore.setLegendValues([expression], res.data);
|
||||
}
|
||||
} else {
|
||||
const names = props.config.legend.map((d: any) => d.name);
|
||||
if (!names.length) {
|
||||
return;
|
||||
}
|
||||
const ids = topologyStore.nodes.map((d: Node) => d.id);
|
||||
if (ids.length) {
|
||||
const param = await useQueryTopologyMetrics(names, ids);
|
||||
const res = await topologyStore.getLegendMetrics(param);
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getNodeStatus(d: any) {
|
||||
const { legend, legendMQE } = settings.value;
|
||||
if (settings.value.metricMode === MetricModes.Expression) {
|
||||
const { legendMQE } = settings.value;
|
||||
if (!legendMQE) {
|
||||
return icons.CUBE;
|
||||
}
|
||||
|
|
@ -328,27 +305,8 @@ limitations under the License. -->
|
|||
}
|
||||
return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
|
||||
}
|
||||
if (!legend) {
|
||||
return icons.CUBE;
|
||||
}
|
||||
if (!legend.length) {
|
||||
return icons.CUBE;
|
||||
}
|
||||
let c = true;
|
||||
for (const l of legend) {
|
||||
if (l.condition === "<") {
|
||||
c = c && d[l.name] < Number(l.value);
|
||||
} else {
|
||||
c = c && d[l.name] > Number(l.value);
|
||||
}
|
||||
}
|
||||
return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
|
||||
}
|
||||
function showNodeTip(event: MouseEvent, data: Node) {
|
||||
const nodeMetrics: string[] =
|
||||
(settings.value.metricMode === MetricModes.Expression
|
||||
? settings.value.nodeExpressions
|
||||
: settings.value.nodeMetrics) || [];
|
||||
const nodeMetrics: string[] = settings.value.nodeExpressions || [];
|
||||
const nodeMetricConfig = settings.value.nodeMetricConfig || [];
|
||||
const html = nodeMetrics.map((m, index) => {
|
||||
const metric =
|
||||
|
|
@ -356,8 +314,9 @@ limitations under the License. -->
|
|||
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) ||
|
||||
{};
|
||||
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || "unknown"}</div>`;
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
|
||||
opt.unit || "unknown"
|
||||
}</div>`;
|
||||
});
|
||||
const tipHtml = [
|
||||
`<div class="mb-5"><span class="grey">name: </span>${
|
||||
|
|
@ -373,24 +332,19 @@ limitations under the License. -->
|
|||
.html(tipHtml);
|
||||
}
|
||||
function showLinkTip(event: MouseEvent, data: Call) {
|
||||
const linkClientMetrics: string[] =
|
||||
settings.value.metricMode === MetricModes.Expression
|
||||
? settings.value.linkClientExpressions
|
||||
: settings.value.linkClientMetrics || [];
|
||||
const linkClientMetrics: string[] = settings.value.linkClientExpressions || [];
|
||||
const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
|
||||
const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
|
||||
const linkServerMetrics: string[] =
|
||||
settings.value.metricMode === MetricModes.Expression
|
||||
? settings.value.linkServerExpressions
|
||||
: settings.value.linkServerMetrics || [];
|
||||
const linkServerMetrics: string[] = settings.value.linkServerExpressions || [];
|
||||
const htmlServer = linkServerMetrics.map((m, index) => {
|
||||
const metric = topologyStore.linkServerMetrics[m].values.find(
|
||||
(val: { id: string; value: unknown }) => val.id === data.id,
|
||||
);
|
||||
if (metric) {
|
||||
const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
|
||||
opt.unit || ""
|
||||
}</div>`;
|
||||
}
|
||||
});
|
||||
const htmlClient = linkClientMetrics.map((m: string, index: number) => {
|
||||
|
|
@ -399,8 +353,9 @@ limitations under the License. -->
|
|||
(val: { id: string; value: unknown }) => val.id === data.id,
|
||||
);
|
||||
if (metric) {
|
||||
const v = aggregation(metric.value, opt);
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
|
||||
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
|
||||
opt.unit || ""
|
||||
}</div>`;
|
||||
}
|
||||
});
|
||||
const html = [
|
||||
|
|
|
|||
Loading…
Reference in New Issue