feat: remove metric name from queries (#275)
diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index a40001c..786184f 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -107,11 +107,11 @@
}
const source: { [key: string]: unknown } = {};
const keys = Object.keys(resp.data);
- for (let i = 0; i < config.metricTypes.length; i++) {
+ for (let i = 0; i < config.metrics.length; i++) {
const type = config.metricTypes[i];
- const c = (config.metricConfig && config.metricConfig[i]) || {};
+ const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || [];
- const name = ((results[0] || {}).metric || {}).name;
+ const name = config.metrics[i];
if (type === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length === 1) {
@@ -214,11 +214,12 @@
return {};
}
const names: string[] = [];
+ const subNames: string[] = [];
const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = [];
const data = pods.map((d: any, idx: number) => {
for (let index = 0; index < config.expressions.length; index++) {
- const c: any = (config.metricConfig && config.metricConfig[index]) || {};
+ const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {};
const k = "expression" + idx + index;
const sub = "subexpression" + idx + index;
const results = (resp.data[k] && resp.data[k].results) || [];
@@ -255,17 +256,22 @@
if (!results[0]) {
return d;
}
- const name = results[0].metric.name || "";
+ const name = config.expressions[index] || "";
+ const subName = config.subExpressions[index] || "";
if (!d[name]) {
d[name] = {};
}
d[name]["avg"] = [results[0].values[0].value];
if (subResults[0]) {
- d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
+ if (!d[subName]) {
+ d[subName] = {};
+ }
+ d[subName]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
}
const j = names.find((d: string) => d === name);
if (!j) {
names.push(name);
+ subNames.push(subName);
metricConfigArr.push(c);
metricTypesArr.push(config.typesOfMQE[index]);
}
@@ -274,7 +280,7 @@
return d;
});
- return { data, names, metricConfigArr, metricTypesArr };
+ return { data, names, subNames, metricConfigArr, metricTypesArr };
}
const dashboardStore = useDashboardStore();
const params = await expressionsGraphqlPods();
@@ -284,7 +290,7 @@
ElMessage.error(json.errors);
return {};
}
- const { data, names, metricTypesArr, metricConfigArr } = expressionsPodsSource(json);
+ const expressionParams = expressionsPodsSource(json);
- return { data, names, metricTypesArr, metricConfigArr };
+ return expressionParams;
}
diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts
index 004cd59..d0705b5 100644
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -17,7 +17,7 @@
import { MetricQueryTypes, Calculations } from "./data";
import { MetricModes } from "@/views/dashboard/data";
-export function useListConfig(config: Indexable, index: string) {
+export function useListConfig(config: Indexable, index: number) {
if (config.metricModes === MetricModes.Expression) {
return {
isLinear: false,
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index e22444f..4cf123c 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -42,8 +42,7 @@
dataIndex: number;
data: unknown;
dataType: string;
- value: number | Array;
+ value: number | any[];
color: string;
event: any;
- dataIndex: number;
};
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 636db48..f93f4b2 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
+import { DurationTime } from "./app";
export type DashboardItem = {
id?: string;
entity: string;
@@ -75,8 +75,8 @@
unit?: string;
label?: string;
calculation?: string;
- labelsIndex: string;
- sortOrder: string;
+ labelsIndex?: string;
+ sortOrder?: string;
topN?: number;
index?: number;
};
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index c54cdfd..44a07d8 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -490,13 +490,14 @@
const metricConfig = config[index] ? config.splice(index, 1) : config;
let p = {};
if (isExpression.value) {
- p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
if (states.isList) {
- states.subMetrics = [""];
- states.subMetricTypes = [""];
- states.subTips = [""];
+ states.subMetrics.splice(index, 1);
+ states.subMetricTypes.splice(index, 1);
+ states.subTips.splice(index, 1);
p = {
...p,
+ typesOfMQE: states.metricTypes,
+ expressions: states.metrics,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 8ba76a6..9e4f69a 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -57,7 +57,7 @@
placeholder="auto"
@change="
updateConfig(index, {
- labelsIndex: encodeURIComponent(currentMetric.labelsIndex),
+ labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''),
})
"
/>
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 6781886..c3653de 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -36,9 +36,9 @@
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
+ :colSubMetrics="colSubMetrics"
:config="{
...config,
- metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@@ -103,6 +103,7 @@
const endpoints = ref<Endpoint[]>([]);
const searchText = ref<string>("");
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);
@@ -180,11 +181,13 @@
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
+ colSubMetrics.value = params.colSubMetrics;
return;
}
endpoints.value = currentPods;
colMetrics.value = [];
+ colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
@@ -230,9 +233,9 @@
);
</script>
<style lang="scss" scoped>
- @import "./style.scss";
+ @import url("./style.scss");
.tips {
- color: rgba(255, 0, 0, 0.5);
+ color: rgb(255 0 0 / 50%);
}
</style>
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 5b754ac..f3b32dc 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -35,9 +35,9 @@
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
+ :colSubMetrics="colSubMetrics"
:config="{
...config,
- metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@@ -130,6 +130,7 @@
const pageSize = 10;
const searchText = ref<string>("");
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
@@ -213,12 +214,14 @@
);
instances.value = params.data;
colMetrics.value = params.names;
+ colSubMetrics.value = params.colSubMetrics;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
instances.value = currentInstances;
+ colSubMetrics.value = [];
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
@@ -281,7 +284,7 @@
);
</script>
<style lang="scss" scoped>
- @import "./style.scss";
+ @import url("./style.scss");
.attributes {
max-height: 400px;
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 31a7e1f..83e27c7 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -47,9 +47,9 @@
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
+ :colSubMetrics="colSubMetrics"
:config="{
...config,
- metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@@ -121,6 +121,7 @@
const pageSize = 10;
const services = ref<Service[]>([]);
const colMetrics = ref<string[]>([]);
+ const colSubMetrics = ref<string[]>([]);
const searchText = ref<string>("");
const groups = ref<any>({});
const sortServices = ref<(Service & { merge: boolean })[]>([]);
@@ -261,12 +262,14 @@
);
services.value = params.data;
colMetrics.value = params.names;
+ colSubMetrics.value = params.subNames;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
services.value = currentServices;
colMetrics.value = [];
+ colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
@@ -329,5 +332,5 @@
);
</script>
<style lang="scss" scoped>
- @import "./style.scss";
+ @import url("./style.scss");
</style>
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index 4329941..d3b8fe7 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -48,7 +48,8 @@
<div class="view-line">
<Line
:data="{
- [metric]: scope.row[metric] && scope.row[metric].values,
+ [colSubMetrics[index] || metric]:
+ scope.row[colSubMetrics[index] || metric] && scope.row[colSubMetrics[index] || metric].values,
}"
:intervalTime="intervalTime"
:config="{
@@ -86,11 +87,11 @@
/*global defineProps */
const props = defineProps({
- colMetrics: { type: Object },
+ colMetrics: { type: Array as PropType<string[]>, default: () => [] },
+ colSubMetrics: { type: Array as PropType<string[]>, default: () => [] },
config: {
type: Object as PropType<{
i: string;
- metrics: string[];
metricTypes: string[];
metricConfig: MetricConfigOpt[];
metricMode: string;
@@ -100,7 +101,7 @@
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
});
- function getUnit(index: string) {
+ function getUnit(index: number) {
const i = Number(index);
const u = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].unit;
if (u) {
@@ -108,7 +109,7 @@
}
return encodeURIComponent("");
}
- function getLabel(metric: string, index: string) {
+ function getLabel(metric: string, index: number) {
const i = Number(index);
const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
if (label) {
