This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new fd2c7ca7 feat: enhance metric labels (#382)
fd2c7ca7 is described below
commit fd2c7ca71671ffe64cd571d3b703abf0d115d275
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Wed Apr 10 16:40:14 2024 +0800
feat: enhance metric labels (#382)
---
src/hooks/useExpressionsProcessor.ts | 11 ++----
src/locales/lang/en.ts | 3 +-
src/locales/lang/es.ts | 3 +-
src/locales/lang/menus/es.ts | 3 +-
src/locales/lang/zh.ts | 3 +-
src/types/dashboard.d.ts | 1 -
.../configuration/widget/graph-styles/Table.vue | 11 ------
src/views/dashboard/data.ts | 1 -
src/views/dashboard/graphs/Table.vue | 45 +++++++++++++++++-----
9 files changed, 44 insertions(+), 37 deletions(-)
diff --git a/src/hooks/useExpressionsProcessor.ts
b/src/hooks/useExpressionsProcessor.ts
index 90f40e00..408dd724 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -117,16 +117,11 @@ export async function
useExpressionsQueryProcessor(config: Indexable) {
const label = results[0].metric && results[0].metric.labels[0] &&
results[0].metric.labels[0].value;
source[c.label || label || name] = results[0].values.map((d: {
value: unknown }) => d.value) || [];
} else {
- const labels = (c.label || "").split(",").map((item: string) =>
item.replace(/^\s*|\s*$/g, ""));
for (const item of results) {
const values = item.values.map((d: { value: unknown }) =>
d.value) || [];
- const index = item.metric.labels[0].value;
- const indexNum = labels.findIndex((_, i: number) => i ===
Number(index));
- if (labels[indexNum] && indexNum > -1) {
- source[labels[indexNum]] = values;
- } else {
- source[index] = values;
- }
+ const label = item.metric.labels.map((d: any) =>
`${d.key}=${d.value}`).join(",");
+
+ source[label] = values;
}
}
}
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index cf7778e7..9c9e065f 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -100,8 +100,7 @@ const msg = {
import: "Import Dashboard Templates",
yes: "Yes",
no: "No",
- tableHeaderCol1: "Name of the first column of the table",
- tableHeaderCol2: "Name of the second column of the table",
+ tableHeaderCol2: "Name of the last column of the table",
showXAxis: "Show X Axis",
showYAxis: "Show Y Axis",
nameError: "The dashboard name cannot be duplicate",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 4c033a2d..dd08fad3 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -101,8 +101,7 @@ const msg = {
import: "Importar Plantilla Panel",
yes: "Sí",
no: "No",
- tableHeaderCol1: "Nombre de la primera columna de la tabla",
- tableHeaderCol2: "Nombre de la segunda columna de la tabla",
+ tableHeaderCol2: "Nombre de la Último columna de la tabla",
showXAxis: "Mostrar Eje X",
showYAxis: "Mostrar Eje Y",
nameError: "El nombre del panel no puede ser duplicado",
diff --git a/src/locales/lang/menus/es.ts b/src/locales/lang/menus/es.ts
index 12f46849..88d9451d 100644
--- a/src/locales/lang/menus/es.ts
+++ b/src/locales/lang/menus/es.ts
@@ -34,7 +34,8 @@ const titles = {
workflow_scheduler: "Flujo de trabajo",
workflow_scheduler_desc: "Proporcionar monitoreo para sistemas de
programación de flujos de trabajo.",
workflow_scheduler_airflow: "Airflow",
- workflow_scheduler_airflow_desc: "Observando tareas a través de los datos de
telemetría recopilados desde Apache Airflow.",
+ workflow_scheduler_airflow_desc:
+ "Observando tareas a través de los datos de telemetría recopilados desde
Apache Airflow.",
// Service Mesh
service_mesh: "Malla de Servicios",
service_mesh_desc:
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 81aaff5c..7549cc07 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -99,8 +99,7 @@ const msg = {
import: "导入仪表板模板",
yes: "是",
no: "否",
- tableHeaderCol1: "表格的第一列的名称",
- tableHeaderCol2: "表格的第二列的名称",
+ tableHeaderCol2: "表格的最后一列的名称",
showXAxis: "显示X轴",
showYAxis: "显示Y轴",
nameError: "仪表板名称不能重复",
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 42fd4b75..be0bca58 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -140,7 +140,6 @@ export interface TextConfig {
export interface TableConfig {
type?: string;
showTableValues: boolean;
- tableHeaderCol1: string;
tableHeaderCol2: string;
}
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Table.vue
b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
index ca6dfe80..65ca8d70 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Table.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
@@ -22,16 +22,6 @@ limitations under the License. -->
@change="updateConfig({ showTableValues })"
/>
</div>
- <div class="item">
- <span class="label">{{ t("tableHeaderCol1") }}</span>
- <el-input
- class="input"
- v-model="tableHeaderCol1"
- size="small"
- placeholder="none"
- @change="updateConfig({ tableHeaderCol1 })"
- />
- </div>
<div class="item">
<span class="label">{{ t("tableHeaderCol2") }}</span>
<el-input
@@ -52,7 +42,6 @@ limitations under the License. -->
const dashboardStore = useDashboardStore();
const graph = dashboardStore.selectedGrid.graph || {};
const showTableValues = ref(graph.showTableValues);
- const tableHeaderCol1 = ref(graph.tableHeaderCol1);
const tableHeaderCol2 = ref(graph.tableHeaderCol2);
function updateConfig(param: { [key: string]: unknown }) {
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index ab743b6c..7cb2d458 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -93,7 +93,6 @@ export const DefaultGraphConfig: { [key: string]: any } = {
Table: {
type: "Table",
showTableValues: true,
- tableHeaderCol1: "",
tableHeaderCol2: "",
},
TopList: {
diff --git a/src/views/dashboard/graphs/Table.vue
b/src/views/dashboard/graphs/Table.vue
index 2dbae271..5813c075 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -16,17 +16,33 @@ limitations under the License. -->
<template>
<div class="chart-table">
<div class="row header flex-h">
- <div class="name" :style="`width: ${nameWidth}`">
- {{ config.tableHeaderCol1 || t("name") }}
+ <div
+ v-for="key in dataKeys[0]"
+ :key="key"
+ class="name"
+ :style="`width: ${dataKeys[0].length > 1 ? (nameWidth as number) /
(dataKeys[0].length || 1) : nameWidth}%`"
+ >
+ {{ key.split("=")[0] || t("name") }}
</div>
<div class="value-col" v-if="config.showTableValues">
{{ config.tableHeaderCol2 || t("value") }}
</div>
</div>
- <div class="row flex-h" v-for="key in dataKeys" :key="key">
- <div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
+ <div class="row flex-h" v-for="(keys, index) in dataKeys" :key="index">
+ <div
+ v-for="k in keys"
+ class="name"
+ :style="`width: ${keys.length > 1 ? (nameWidth as number) /
(keys.length || 1) : nameWidth}%`"
+ :key="k"
+ >{{ k.split("=")[1] }}</div
+ >
<div class="value-col" v-if="config.showTableValues">
- {{ config.metricTypes[0] === "readMetricsValue" ? data[key] :
data[key][data[key].length - 1 || 0] }}
+ {{
+ (config.metricTypes && config.metricTypes[0] === "readMetricsValue")
||
+ (props.config.typesOfMQE && props.config.typesOfMQE[0] ===
ExpressionResultType.SINGLE_VALUE)
+ ? data[keys[0]]
+ : data[(keys as string[]).join(",")][data[(keys as
string[]).join(",")].length - 1 || 0]
+ }}
</div>
</div>
</div>
@@ -35,6 +51,7 @@ limitations under the License. -->
import { computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
+ import { ExpressionResultType } from "@/views/dashboard/data";
/*global defineProps */
const props = defineProps({
data: {
@@ -45,24 +62,30 @@ limitations under the License. -->
type: Object as PropType<{
showTableValues: boolean;
tableHeaderCol2: string;
- tableHeaderCol1: string;
metricTypes: string[];
+ typesOfMQE: string[];
}>,
default: () => ({ showTableValues: true }),
},
});
const { t } = useI18n();
- const nameWidth = computed(() => (props.config.showTableValues ? "80%" :
"100%"));
+ const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
const dataKeys = computed(() => {
- if (props.config.metricTypes[0] === "readMetricsValue") {
+ if (props.config.metricTypes && props.config.metricTypes[0] ===
"readMetricsValue") {
+ const keys = Object.keys(props.data || {});
+ return keys;
+ }
+ if (props.config.typesOfMQE && props.config.typesOfMQE[0] ===
ExpressionResultType.SINGLE_VALUE) {
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,
);
- return keys;
+ const list = keys.map((d: string) => d.split(","));
+
+ return list;
});
</script>
<style lang="scss" scoped>
@@ -94,6 +117,10 @@ limitations under the License. -->
border-bottom: 1px solid $disabled-color;
}
+ div:first-child {
+ border-bottom: 1px solid $disabled-color;
+ }
+
div:nth-last-child(2) {
border-bottom: 1px solid $disabled-color;
}
