github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update list

Browse Source
This commit is contained in:
Fine 2023-06-03 19:29:50 +08:00
parent c19f9000a0
commit db7de72417
8 changed files with 91 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/hooks/useExpressionsProcessor.ts
View File

@ -199,58 +199,64 @@ export async function useExpressionsQueryPodsMetrics(
const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = [];
const data = pods.map((d: any, idx: number) => {
config.expressions.map((exp: string, index: number) => {
for (let index = 0; index < config.expressions.length; index++) {
const c: any = (config.metricConfig && config.metricConfig[index]) || {};
const k = "expression" + idx + index;
const results = (resp.data[k] && resp.data[k].results) || [];
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
const name = results[0].metric.name || "";
d[name] = results[0].values[0].value;
if (idx === 0) {
names.push(name);
metricConfigArr.push(c);
metricTypesArr.push(config.typesOfMQE[index]);
}
}
if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length > 1) {
const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
for (let i = 0; i < results.length; i++) {
let name = results[i].metric.name || "";
let name = results[i].metric.labels[0].value || "";
const values = results[i].values.map((d: { value: unknown }) => d.value);
const indexNum = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
if (labels[indexNum] && indexNum > -1) {
name = labels[indexNum];
const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
if (labels[num]) {
name = labels[num];
}
if (!d[name]) {
d[name] = {};
}
if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
d[name]["avg"] = calculateExp(results[i].values, c);
}
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
d[name]["avg"] = results[i].values[0].value;
} else {
d[name]["values"] = values;
if (idx === 0) {
}
const j = names.findIndex((d: string) => d === name);
if (j < 0) {
names.push(name);
metricConfigArr.push({ ...c, index: i });
metricTypesArr.push(config.typesOfMQE[index]);
} else {
metricConfigArr[j] = { ...metricConfigArr[j], ...c };
}
}
return;
} else {
if (!results[0]) {
return d;
}
const name = results[0].metric.name || "";
if (!d[name]) {
d[name] = {};
if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
d[name]["avg"] = calculateExp(results[0].values, c);
}
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
d[name]["avg"] = [results[0].values[0].value];
}
if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) {
d[name]["values"] = results[0].values.map((d: { value: number }) => d.value);
if (idx === 0) {
}
const j = names.findIndex((d: string) => d === name);
if (j < 0) {
names.push(name);
metricConfigArr.push(c);
metricTypesArr.push(config.typesOfMQE[index]);
} else {
metricConfigArr[j] = { ...metricConfigArr[j], ...c };
}
}
}
});
return d;
});

23
src/hooks/useListConfig.ts
View File

@ -15,24 +15,25 @@
* limitations under the License.
*/
import { MetricQueryTypes, Calculations } from "./data";
import { ExpressionResultType } from "@/views/dashboard/data";
import { MetricModes } from "@/views/dashboard/data";
export function useListConfig(config: Indexable, index: string) {
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,
ExpressionResultType.TIME_SERIES_VALUES,
].includes(config.metricTypes[i]) && !types.includes(calculation);
[MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
!types.includes(calculation);
const isAvg =
[
MetricQueryTypes.ReadMetricsValues,
MetricQueryTypes.ReadLabeledMetricsValues,
ExpressionResultType.TIME_SERIES_VALUES,
].includes(config.metricTypes[i]) && types.includes(calculation);
[MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
types.includes(calculation);
return {
isLinear,
isAvg,

10
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@ -35,13 +35,6 @@ limitations under the License. -->
@change="changeMetricMode"
/>
<div v-for="(metric, index) in states.metrics" :key="index" class="metric-item">
<!-- <el-input
v-if="isExpression"
class="selectors"
size="small"
placeholder="Please input a expression"
@change="changeExpression"
/> -->
<div v-if="isExpression" id="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
{{ metric }}
</div>
@ -505,7 +498,8 @@ limitations under the License. -->
queryMetrics();
}
async function changeExpression(event: any, index: number) {
const params = event.target.textContent;
const params = (event.target.textContent || "").replace(/\s+/g, "");
if (params) {
const resp = await dashboardStore.getTypeOfMQE(params);
states.metrics[index] = params;

12
src/views/dashboard/configuration/widget/metric/Standard.vue
View File

@ -44,7 +44,10 @@ limitations under the License. -->
</div>
<div
class="item mb-10"
v-if="[ProtocolTypes.ReadLabeledMetricsValues, ExpressionResultType.TIME_SERIES_VALUES].includes(metricType)"
v-if="
[ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) ||
dashboardStore.selectedGrid.metricMode === MetricModes.Expression
"
>
<span class="label">{{ t("labelsIndex") }}</span>
<el-input
@ -113,7 +116,7 @@ limitations under the License. -->
const { t } = useI18n();
const emit = defineEmits(["update"]);
const dashboardStore = useDashboardStore();
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
const currentMetric = ref<MetricConfigOpt>({
...props.currentMetricConfig,
topN: props.currentMetricConfig.topN || 10,
@ -138,10 +141,7 @@ limitations under the License. -->
metricTypes.value[props.index],
),
);
const isExec = computed(() => {
const graph = dashboardStore.selectedGrid.graph || {};
return dashboardStore.selectedGrid.metricMode === MetricModes.General || ListChartTypes.includes(graph.type);
});
const isExec = computed(() => dashboardStore.selectedGrid.metricMode === MetricModes.General);
function updateConfig(index: number, param: { [key: string]: string }) {
const key = Object.keys(param)[0];
if (!key) {

3
src/views/dashboard/graphs/EndpointList.vue
View File

@ -41,6 +41,7 @@ limitations under the License. -->
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
}"
v-if="colMetrics.length"
/>
@ -102,6 +103,7 @@ limitations under the License. -->
const colMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
const metricMode = ref<string>(props.config.metricMode);
if (props.needQuery) {
queryEndpoints();
@ -213,6 +215,7 @@ limitations under the License. -->
return;
}
metricConfig.value = props.config.metricConfig;
metricMode.value = props.config.metricMode;
queryEndpointMetrics(endpoints.value);
},
);

3
src/views/dashboard/graphs/InstanceList.vue
View File

@ -40,6 +40,7 @@ limitations under the License. -->
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
}"
v-if="colMetrics.length"
/>
@ -130,6 +131,7 @@ limitations under the License. -->
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);
if (props.needQuery) {
queryInstance();
}
@ -264,6 +266,7 @@ limitations under the License. -->
return;
}
metricConfig.value = props.config.metricConfig;
metricMode.value = props.config.metricMode;
queryInstanceMetrics(instances.value);
},
);

3
src/views/dashboard/graphs/ServiceList.vue
View File

@ -52,6 +52,7 @@ limitations under the License. -->
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
}"
v-if="colMetrics.length"
/>
@ -123,6 +124,7 @@ limitations under the License. -->
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);
queryServices();
@ -309,6 +311,7 @@ limitations under the License. -->
return;
}
metricConfig.value = props.config.metricConfig;
metricMode.value = props.config.metricMode;
queryServiceMetrics(services.value);
},
);

19
src/views/dashboard/graphs/components/ColumnGraph.vue
View File

@ -23,7 +23,7 @@ limitations under the License. -->
<template #default="scope">
<div class="chart">
<Line
v-if="useListConfig(config, index).isLinear"
v-if="useListConfig(config, index).isLinear && config.metricMode !== MetricModes.Expression"
:data="{
[metric]: scope.row[metric] && scope.row[metric].values,
}"
@ -35,7 +35,10 @@ limitations under the License. -->
showlabels: false,
}"
/>
<span class="item flex-h" v-else-if="useListConfig(config, index).isAvg">
<span
class="item flex-h"
v-else-if="useListConfig(config, index).isAvg || config.metricMode === MetricModes.Expression"
>
<el-popover placement="left" :width="400" trigger="click">
<template #reference>
<span class="trend">
@ -79,6 +82,7 @@ limitations under the License. -->
import Line from "../Line.vue";
import Card from "../Card.vue";
import { MetricQueryTypes } from "@/hooks/data";
import { ExpressionResultType, MetricModes } from "@/views/dashboard/data";
/*global defineProps */
const props = defineProps({
@ -89,6 +93,7 @@ limitations under the License. -->
metrics: string[];
metricTypes: string[];
metricConfig: MetricConfigOpt[];
metricMode: string;
}>,
default: () => ({}),
},
@ -107,7 +112,15 @@ limitations under the License. -->
const i = Number(index);
const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
if (label) {
if (props.config.metricTypes[i] === MetricQueryTypes.ReadLabeledMetricsValues) {
if (
(
[
MetricQueryTypes.ReadLabeledMetricsValues,
ExpressionResultType.TIME_SERIES_VALUES,
ExpressionResultType.SINGLE_VALUE,
] as string[]
).includes(props.config.metricTypes[i])
) {
const name = (label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""))[
props.config.metricConfig[i].index || 0
];