github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: supporting expressions to query metrics data (#270)

Browse Source
This commit is contained in:
Fine0830
2023-06-04 14:09:36 +08:00
committed by GitHub
parent ec67b4148c
commit dc22f8da6e
22 changed files with 923 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/dashboard/Widget.vue
View File

@@ -35,6 +35,11 @@ limitations under the License. -->
metrics: config.metrics,
metricTypes: config.metricTypes,
metricConfig: config.metricConfig,
metricMode: config.metricMode,
expressions: config.expressions || [],
typesOfMQE: config.typesOfMQE || [],
subExpressions: config.subExpressions || [],
subTypesOfMQE: config.subTypesOfMQE || [],
}"
:needQuery="true"
/>
@@ -51,10 +56,12 @@ limitations under the License. -->
import { useRoute } from "vue-router";
import { useSelectorStore } from "@/store/modules/selectors";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } 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",
@@ -122,10 +129,12 @@ limitations under the License. -->
}
}
async function queryMetrics() {
const metricTypes = config.value.metricTypes || [];
const metrics = config.value.metrics || [];
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
const params = await useQueryProcessor({ ...config.value, catalog });
const isExpression = config.value.metricMode === MetricModes.Expression;
const params = isExpression
? await useExpressionsQueryProcessor({
...config.value,
})
: await useQueryProcessor({ ...config.value });
if (!params) {
source.value = {};
return;
@@ -140,8 +149,9 @@ limitations under the License. -->
metrics: config.value.metrics || [],
metricTypes: config.value.metricTypes || [],
metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
};
source.value = useSourceProcessor(json, d);
source.value = isExpression ? await useExpressionsSourceProcessor(json, d) : await useSourceProcessor(json, d);
}
watch(
() => appStoreWithOut.durationTime,

17
src/views/dashboard/components/WidgetLink.vue
View File

@@ -59,6 +59,7 @@ 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();
@@ -91,7 +92,8 @@ limitations under the License. -->
step: appStore.durationRow.step,
utc: appStore.utc,
});
const { widget, graph, metrics, metricTypes, metricConfig } = dashboardStore.selectedGrid;
const { widget, graph, metrics, metricTypes, metricConfig, metricMode, expressions, typesOfMQE, subExpressions } =
dashboardStore.selectedGrid;
const c = (metricConfig || []).map((d: any) => {
const t: any = {};
if (d.label) {
@@ -105,11 +107,20 @@ limitations under the License. -->
const opt: any = {
type: dashboardStore.selectedGrid.type,
graph: graph,
metrics: metrics,
metricTypes: metricTypes,
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 || ""),

25
src/views/dashboard/configuration/Widget.vue
View File

@@ -38,6 +38,11 @@ limitations under the License. -->
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 || [],
subTypesOfMQE: dashboardStore.selectedGrid.subTypesOfMQE || [],
}"
:needQuery="true"
/>
@@ -83,6 +88,7 @@ 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",
@@ -128,6 +134,23 @@ 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);
}
@@ -188,7 +211,7 @@ limitations under the License. -->
.render-chart {
padding: 5px;
height: 400px;
height: 420px;
width: 100%;
}

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

@@ -26,23 +26,50 @@ limitations under the License. -->
/>
</div>
<div>{{ t("metrics") }}</div>
<div v-for="(metric, index) in states.metrics" :key="index" class="metric-item">
<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"
/>
<el-switch
v-model="isExpression"
class="mb-5"
active-text="Expressions"
inactive-text="General"
size="small"
@change="changeMetricMode"
/>
<div v-if="isExpression && states.isList">
<span class="title">Summary</span>
<span>Detail</span>
</div>
<div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
<span v-if="isExpression">
<div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
{{ metric }}
</div>
<div
v-if="states.isList"
class="expression-param"
contenteditable="true"
@blur="changeSubExpression($event, index)"
>
{{ 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)">
@@ -51,7 +78,12 @@ limitations under the License. -->
</template>
<Standard @update="queryMetrics" :currentMetricConfig="currentMetricConfig" :index="index" />
</el-popover>
<span v-show="states.isList || states.metricTypes[0] === ProtocolTypes.ReadMetricsValues">
<span
v-show="
states.isList ||
[ProtocolTypes.ReadMetricsValues, ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
"
>
<Icon
class="cp mr-5"
v-if="index === states.metrics.length - 1 && states.metrics.length < defaultLen"
@@ -61,6 +93,8 @@ 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">{{ states.tips[index] }}</div>
<div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
</div>
<div>{{ t("visualization") }}</div>
<div class="chart-types">
@@ -89,10 +123,13 @@ limitations under the License. -->
PodsChartTypes,
MetricsType,
ProtocolTypes,
ExpressionResultType,
MetricModes,
} from "../../../data";
import { ElMessage } from "element-plus";
import Icon from "@/components/Icon.vue";
import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
import { useI18n } from "vue-i18n";
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
import Standard from "./Standard.vue";
@@ -101,17 +138,28 @@ limitations under the License. -->
const { t } = useI18n();
const emit = defineEmits(["update", "loading"]);
const dashboardStore = useDashboardStore();
const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
const metrics = computed(
() => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [],
);
const subMetrics = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subExpressions : []) || []);
const subMetricTypes = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subTypesOfMQE : []) || []);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const metricTypes = computed(() => dashboardStore.selectedGrid.metricTypes || []);
const metricTypes = computed(
() => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
);
const states = reactive<{
metrics: string[];
subMetrics: string[];
subMetricTypes: string[];
metricTypes: string[];
metricTypeList: Option[][];
isList: boolean;
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 : [""],
@@ -120,6 +168,10 @@ limitations under the License. -->
metricList: [],
dashboardName: graph.value.dashboardName,
dashboardList: [{ label: "", value: "" }],
tips: [],
subTips: [],
subMetrics: subMetrics.value.length ? subMetrics.value : [""],
subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""],
});
const currentMetricConfig = ref<MetricConfigOpt>({
unit: "",
@@ -131,6 +183,8 @@ limitations under the License. -->
states.isList = ListChartTypes.includes(graph.value.type);
const defaultLen = ref<number>(states.isList ? 5 : 20);
const backupMetricConfig = ref<MetricConfigOpt[]>([]);
setDashboards();
setMetricType();
@@ -158,7 +212,7 @@ limitations under the License. -->
}
arr = json.data.metrics;
}
states.metricList = (arr || []).filter((d: { catalog: string; type: string }) => {
states.metricList = (arr || []).filter((d: { type: string }) => {
if (states.isList) {
if (d.type === MetricsType.REGULAR_VALUE || d.type === MetricsType.LABELED_VALUE) {
return d;
@@ -171,6 +225,14 @@ limitations under the License. -->
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),
);
@@ -234,12 +296,22 @@ limitations under the License. -->
...dashboardStore.selectedGrid,
metrics: [""],
metricTypes: [""],
expressions: [""],
typesOfMQE: [""],
});
states.metrics = [""];
states.metricTypes = [""];
defaultLen.value = 5;
}
setMetricType(chart);
if (isExpression.value) {
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
graph: chart,
});
} else {
setMetricType(chart);
}
setDashboards(chart.type);
states.dashboardName = "";
defaultLen.value = 10;
@@ -300,12 +372,15 @@ limitations under the License. -->
if (states.isList) {
return;
}
const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
if (isExpression.value) {
queryMetricsWithExpressions();
return;
}
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
const params = useQueryProcessor({ ...states, metricConfig, catalog });
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;
@@ -322,6 +397,29 @@ limitations under the License. -->
emit("update", source);
}
async function queryMetricsWithExpressions() {
const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid;
if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) {
return emit("update", {});
}
const params = useExpressionsQueryProcessor({ ...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 = useExpressionsSourceProcessor(json, { ...states, metricConfig });
emit("update", source);
}
function changeDashboard(opt: any) {
if (!opt[0]) {
states.dashboardName = "";
@@ -339,31 +437,76 @@ limitations under the License. -->
}
function addMetric() {
states.metrics.push("");
states.tips.push("");
if (isExpression.value && states.isList) {
states.subMetrics.push("");
states.subTips.push("");
}
if (!states.isList) {
states.metricTypes.push(states.metricTypes[0]);
states.metricTypeList.push(states.metricTypeList[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 };
if (states.isList) {
states.subMetrics = [""];
states.subMetricTypes = [""];
states.subTips = [""];
v = {
...v,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};
}
} else {
v = { metricTypes: states.metricTypes, metrics: states.metrics };
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
...{ metricTypes: states.metricTypes, metrics: states.metrics },
...v,
metricConfig: [],
});
return;
}
states.metrics.splice(index, 1);
states.metricTypes.splice(index, 1);
states.tips.splice(index, 1);
const config = dashboardStore.selectedGrid.metricConfig || [];
const metricConfig = config[index] ? config.splice(index, 1) : config;
let p = {};
if (isExpression.value) {
p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
if (states.isList) {
states.subMetrics = [""];
states.subMetricTypes = [""];
states.subTips = [""];
p = {
...p,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};
}
} else {
p = { metricTypes: states.metricTypes, metrics: states.metrics };
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
...{ metricTypes: states.metricTypes, metrics: states.metrics },
...p,
metricConfig,
});
}
@@ -393,6 +536,66 @@ 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, "");
if (params) {
const resp = await dashboardStore.getTypeOfMQE(params);
states.metrics[index] = params;
states.metricTypes[index] = resp.data.metricType.type;
states.tips[index] = resp.data.metricType.error || "";
} else {
states.metrics[index] = params;
states.metricTypes[index] = "";
states.tips[index] = "";
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
expressions: states.metrics,
typesOfMQE: states.metricTypes,
});
if (params) {
await queryMetrics();
}
}
async function changeSubExpression(event: any, index: number) {
const params = (event.target.textContent || "").replace(/\s+/g, "");
if (params) {
const resp = await dashboardStore.getTypeOfMQE(params);
states.subMetrics[index] = params;
states.subMetricTypes[index] = resp.data.metricType.type;
states.subTips[index] = resp.data.metricType.error || "";
} else {
states.subMetrics[index] = params;
states.subMetricTypes[index] = "";
states.subTips[index] = "";
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
subExpressions: states.subMetrics,
subTypesOfMQE: states.subMetricTypes,
});
if (params) {
await queryMetrics();
}
}
</script>
<style lang="scss" scoped>
.ds-name {
@@ -400,7 +603,7 @@ limitations under the License. -->
}
.selectors {
width: 500px;
width: 400px;
margin-right: 10px;
}
@@ -427,4 +630,26 @@ limitations under the License. -->
background-color: #409eff;
color: #fff;
}
.expression-param {
display: inline-block;
width: 400px;
border: 1px solid #dcdfe6;
cursor: text;
padding: 0 5px;
border-radius: 3px;
color: #606266;
outline: none;
height: 26px;
margin-right: 5px;
&:focus {
border-color: #409eff;
}
}
.title {
display: inline-block;
width: 410px;
}
</style>

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

@@ -42,7 +42,13 @@ limitations under the License. -->
"
/>
</div>
<div class="item mb-10" v-if="metricType === 'readLabeledMetricsValues'">
<div
class="item mb-10"
v-if="
[ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) &&
dashboardStore.selectedGrid.metricMode === MetricModes.General
"
>
<span class="label">{{ t("labelsIndex") }}</span>
<el-input
class="input"
@@ -56,7 +62,7 @@ limitations under the License. -->
"
/>
</div>
<div class="item mb-10">
<div class="item mb-10" v-show="isExec">
<span class="label">{{ t("aggregation") }}</span>
<SelectSingle
:value="currentMetric.calculation"
@@ -94,10 +100,10 @@ limitations under the License. -->
import { ref, watch, computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import { SortOrder, CalculationOpts } from "../../../data";
import { SortOrder, CalculationOpts, MetricModes } from "../../../data";
import { useDashboardStore } from "@/store/modules/dashboard";
import type { MetricConfigOpt } from "@/types/dashboard";
import { ListChartTypes, ProtocolTypes } from "../../../data";
import { ListChartTypes, ProtocolTypes, ExpressionResultType } from "../../../data";
/*global defineEmits, defineProps */
const props = defineProps({
@@ -110,24 +116,32 @@ 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 = dashboardStore.selectedGrid.metricTypes || [];
const metricType = computed(() => (dashboardStore.selectedGrid.metricTypes || [])[props.index]);
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)
[
ProtocolTypes.ReadLabeledMetricsValues,
ProtocolTypes.ReadMetricsValues,
ExpressionResultType.TIME_SERIES_VALUES,
].includes(metricType.value)
);
});
const isTopn = computed(() =>
[ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
metricTypes[props.index],
metricTypes.value[props.index],
),
);
const isExec = computed(() => dashboardStore.selectedGrid.metricMode === MetricModes.General);
function updateConfig(index: number, param: { [key: string]: string }) {
const key = Object.keys(param)[0];
if (!key) {

30
src/views/dashboard/controls/Widget.vue
View File

@@ -59,6 +59,11 @@ limitations under the License. -->
filters: data.filters || {},
relatedTrace: data.relatedTrace || {},
associate: data.associate || [],
metricMode: data.metricMode,
expressions: data.expressions || [],
typesOfMQE: data.typesOfMQE || [],
subExpressions: data.subExpressions || [],
subTypesOfMQE: data.subTypesOfMQE || [],
}"
:needQuery="needQuery"
@click="clickHandle"
@@ -76,10 +81,12 @@ limitations under the License. -->
import { useSelectorStore } from "@/store/modules/selectors";
import graphs from "../graphs";
import { useI18n } from "vue-i18n";
import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } 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: {
@@ -113,10 +120,14 @@ limitations under the License. -->
}
async function queryMetrics() {
const metricTypes: string[] = props.data.metricTypes || [];
const metrics = props.data.metrics || [];
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
const params = await useQueryProcessor({ ...props.data, catalog });
const isExpression = props.data.metricMode === MetricModes.Expression;
const params = isExpression
? await useExpressionsQueryProcessor({
metrics: props.data.expressions,
metricTypes: props.data.typesOfMQE,
metricConfig: props.data.metricConfig,
})
: await useQueryProcessor({ ...props.data });
if (!params) {
state.source = {};
@@ -133,7 +144,12 @@ limitations under the License. -->
metricTypes: props.data.metricTypes || [],
metricConfig: props.data.metricConfig || [],
};
state.source = useSourceProcessor(json, d);
const e = {
metrics: props.data.expressions || [],
metricTypes: props.data.typesOfMQE || [],
metricConfig: props.data.metricConfig || [],
};
state.source = isExpression ? await useExpressionsSourceProcessor(json, e) : await useSourceProcessor(json, d);
}
function removeWidget() {
@@ -169,7 +185,7 @@ limitations under the License. -->
dashboardStore.selectWidget(props.data);
}
watch(
() => [props.data.metricTypes, props.data.metrics],
() => [props.data.metricTypes, props.data.metrics, props.data.expressions],
() => {
if (!dashboardStore.selectedGrid) {
return;

14
src/views/dashboard/data.ts
View File

@@ -56,6 +56,15 @@ export enum ProtocolTypes {
ReadMetricsValues = "readMetricsValues",
ReadMetricsValue = "readMetricsValue",
}
export enum ExpressionResultType {
UNKNOWN = "UNKNOWN",
SINGLE_VALUE = "SINGLE_VALUE",
TIME_SERIES_VALUES = "TIME_SERIES_VALUES",
SORTED_LIST = "SORTED_LIST",
RECORD_LIST = "RECORD_LIST",
}
export const DefaultGraphConfig: { [key: string]: any } = {
Bar: {
type: "Bar",
@@ -322,3 +331,8 @@ export const RefreshOptions = [
{ label: "Last 8 hours", value: "8", step: "HOUR" },
{ label: "Last 7 days", value: "7", step: "DAY" },
];
export enum MetricModes {
Expression = "Expression",
General = "General",
}

1
src/views/dashboard/graphs/Bar.vue
View File

@@ -23,6 +23,7 @@ limitations under the License. -->
import type { PropType } from "vue";
import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
import useLegendProcess from "@/hooks/useLegendProcessor";
import Legend from "./components/Legend.vue";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);

61
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"
/>
@@ -58,7 +59,8 @@ limitations under the License. -->
import type { Endpoint } from "@/types/selector";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
import { EntityType } from "../data";
import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
import { EntityType, MetricModes } from "../data";
import router from "@/router";
import getDashboard from "@/hooks/useDashboardsSession";
import type { MetricConfigOpt } from "@/types/dashboard";
@@ -75,6 +77,11 @@ limitations under the License. -->
i: string;
metrics: string[];
metricTypes: string[];
metricMode: string;
expressions: string[];
typesOfMQE: string[];
subExpressions: string[];
subTypesOfMQE: string[];
} & { metricConfig: MetricConfigOpt[] }
>,
default: () => ({
@@ -98,6 +105,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();
@@ -116,8 +124,20 @@ limitations under the License. -->
endpoints.value = resp.data.pods || [];
queryEndpointMetrics(endpoints.value);
}
async function queryEndpointMetrics(currentPods: Endpoint[]) {
if (!currentPods.length) {
async function queryEndpointMetrics(arr: Endpoint[]) {
if (!arr.length) {
return;
}
const currentPods = arr.map((d: Endpoint) => {
return {
id: d.id,
value: d.value,
label: d.label,
merge: d.merge,
};
});
if (props.config.metricMode === MetricModes.Expression) {
queryEndpointExpressions(currentPods);
return;
}
const metrics = props.config.metrics || [];
@@ -141,6 +161,32 @@ limitations under the License. -->
return;
}
endpoints.value = currentPods;
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
async function queryEndpointExpressions(currentPods: Endpoint[]) {
const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
const params = await useExpressionsQueryPodsMetrics(
currentPods,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
EntityType[2].value,
);
endpoints.value = params.data;
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
endpoints.value = currentPods;
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
function clickEndpoint(scope: any) {
const { dashboard } = getDashboard({
@@ -160,12 +206,19 @@ limitations under the License. -->
await queryEndpoints();
}
watch(
() => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
() => [
...(props.config.metricTypes || []),
...(props.config.metrics || []),
...(props.config.metricConfig || []),
...(props.config.expressions || []),
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);
},
);

65
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"
/>
@@ -87,7 +88,8 @@ limitations under the License. -->
import type { InstanceListConfig } from "@/types/dashboard";
import type { Instance } from "@/types/selector";
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
import { EntityType } from "../data";
import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
import { EntityType, MetricModes } from "../data";
import router from "@/router";
import getDashboard from "@/hooks/useDashboardsSession";
import type { MetricConfigOpt } from "@/types/dashboard";
@@ -102,6 +104,11 @@ limitations under the License. -->
metrics: string[];
metricTypes: string[];
isEdit: boolean;
metricMode: string;
expressions: string[];
typesOfMQE: string[];
subExpressions: string[];
subTypesOfMQE: string[];
} & { metricConfig: MetricConfigOpt[] }
>,
default: () => ({
@@ -126,6 +133,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();
}
@@ -146,8 +154,23 @@ limitations under the License. -->
queryInstanceMetrics(instances.value);
}
async function queryInstanceMetrics(currentInstances: Instance[]) {
if (!currentInstances.length) {
async function queryInstanceMetrics(arr: Instance[]) {
if (!arr.length) {
return;
}
const currentInstances = arr.map((d: Instance) => {
return {
id: d.id,
value: d.value,
label: d.label,
merge: d.merge,
language: d.language,
instanceUUID: d.instanceUUID,
attributes: d.attributes,
};
});
if (props.config.metricMode === MetricModes.Expression) {
queryInstanceExpressions(currentInstances);
return;
}
const metrics = props.config.metrics || [];
@@ -172,6 +195,33 @@ limitations under the License. -->
return;
}
instances.value = currentInstances;
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
async function queryInstanceExpressions(currentInstances: Instance[]) {
const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
const params = await useExpressionsQueryPodsMetrics(
currentInstances,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
EntityType[3].value,
);
instances.value = params.data;
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
instances.value = currentInstances;
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
function clickInstance(scope: any) {
@@ -207,12 +257,19 @@ limitations under the License. -->
}
watch(
() => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
() => [
...(props.config.metricTypes || []),
...(props.config.metrics || []),
...(props.config.metricConfig || []),
...(props.config.expressions || []),
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);
},
);

67
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"
/>
@@ -80,7 +81,8 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app";
import type { Service } from "@/types/selector";
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
import { EntityType } from "../data";
import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
import { EntityType, MetricModes } from "../data";
import router from "@/router";
import getDashboard from "@/hooks/useDashboardsSession";
import type { MetricConfigOpt } from "@/types/dashboard";
@@ -100,6 +102,11 @@ limitations under the License. -->
isEdit: boolean;
names: string[];
metricConfig: MetricConfigOpt[];
metricMode: string;
expressions: string[];
typesOfMQE: string[];
subExpressions: string[];
subTypesOfMQE: string[];
}
>,
default: () => ({ dashboardName: "", fontSize: 12 }),
@@ -119,6 +126,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();
@@ -187,8 +195,23 @@ limitations under the License. -->
router.push(path);
}
async function queryServiceMetrics(currentServices: Service[]) {
if (!currentServices.length) {
async function queryServiceMetrics(arr: Service[]) {
if (!arr.length) {
return;
}
const currentServices = arr.map((d: Service) => {
return {
id: d.id,
value: d.value,
label: d.label,
layers: d.layers,
group: d.group,
normal: d.normal,
merge: d.merge,
};
});
if (props.config.metricMode === MetricModes.Expression) {
queryServiceExpressions(currentServices);
return;
}
const metrics = props.config.metrics || [];
@@ -211,6 +234,7 @@ limitations under the License. -->
...props.config,
metricConfig: metricConfig.value || [],
});
services.value = data;
colMetrics.value = names;
metricTypes.value = metricTypesArr;
@@ -219,6 +243,32 @@ limitations under the License. -->
return;
}
services.value = currentServices;
colMetrics.value = [];
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
async function queryServiceExpressions(currentServices: Service[]) {
const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
const params = await useExpressionsQueryPodsMetrics(
currentServices,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
EntityType[0].value,
);
services.value = params.data;
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
services.value = currentServices;
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
function objectSpanMethod(param: any): any {
if (!props.config.showGroup) {
@@ -251,15 +301,24 @@ limitations under the License. -->
}
watch(
() => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
() => [
...(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);
},
);
watch(
() => appStore.durationTime,
() => {

2
src/views/dashboard/graphs/TopList.vue
View File

@@ -20,7 +20,7 @@ limitations under the License. -->
<div class="desc">
<span class="calls mr-10">{{ i.value }}</span>
<span class="cp mr-20">
{{ i.name }}
{{ i.name || i.id }}
</span>
</div>
<el-popover placement="bottom" trigger="click">

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
];