-
-
+
+
+ Summary
+ Detail
+
+
+
+
+ {{ metric }}
+
+
+ {{ states.subMetrics[index] }}
+
+
+
+
+
+
@@ -51,7 +78,12 @@ limitations under the License. -->
-
+
/>
+ {{ states.tips[index] }}
+ {{ states.tips[index] }}
{{ t("visualization") }}
@@ -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(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({
unit: "",
@@ -131,6 +183,8 @@ limitations under the License. -->
states.isList = ListChartTypes.includes(graph.value.type);
const defaultLen = ref(states.isList ? 5 : 20);
+ const backupMetricConfig = ref([]);
+
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();
+ }
+ }
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 1172f631..8ba76a6a 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -42,7 +42,13 @@ limitations under the License. -->
"
/>
-
+
{{ t("labelsIndex") }}
"
/>
-
+
{{ t("aggregation") }}
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(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
const currentMetric = ref({
...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) {
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index d52ebc96..0f36affd 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -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;
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 11b863ae..ac995094 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -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",
@@ -324,3 +333,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",
+}
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 302c4c69..98c2bd02 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -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"]);
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 7cc95035..6781886a 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -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([]);
const metricConfig = ref(props.config.metricConfig || []);
const metricTypes = ref(props.config.metricTypes || []);
+ const metricMode = ref(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);
},
);
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 0be09631..5b754ac1 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -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(props.config.metricConfig || []);
const metricTypes = ref(props.config.metricTypes || []);
const pods = ref([]); // all instances
+ const metricMode = ref(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);
},
);
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 44b1a512..31a7e1fa 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -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(props.config.metricConfig || []);
const metricTypes = ref(props.config.metricTypes || []);
+ const metricMode = ref(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,
() => {
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 1da016ed..ed4fbe9b 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
{{ i.value }}
- {{ i.name }}
+ {{ i.name || i.id }}
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index 06a4bef3..43299417 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -23,7 +23,7 @@ limitations under the License. -->
showlabels: false,
}"
/>
-
+
@@ -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
];