From e7a79c4346ad75b310894d2e239441afa0172e50 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 8 Jun 2023 12:08:57 +0800
Subject: [PATCH] feat: add detail label

---
 src/locales/lang/en.ts                             |  3 +++
 src/locales/lang/es.ts                             |  3 +++
 src/locales/lang/zh.ts                             |  3 +++
 src/types/dashboard.d.ts                           |  1 +
 .../configuration/widget/metric/Index.vue          |  5 +++--
 .../configuration/widget/metric/Standard.vue       | 14 ++++++++++++++
 .../dashboard/graphs/components/ColumnGraph.vue    | 12 +++++++++---
 7 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index a39c34fb..494853dc 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -388,5 +388,8 @@ const msg = {
   elasticsearch: "Elasticsearch",
   mq: "MQ",
   rabbitMQ: "RabbitMQ",
+  detailLabel: "Detail Label",
+  summary: "Summary",
+  detail: "Detail",
 };
 export default msg;
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 41259234..26740948 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -387,5 +387,8 @@ const msg = {
   elasticsearch: "Elasticsearch",
   mq: "MQ",
   rabbitMQ: "RabbitMQ",
+  detailLabel: "Detail Label",
+  summary: "Summary",
+  detail: "Detail",
 };
 export default msg;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index b592abdf..53d64576 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -385,5 +385,8 @@ const msg = {
   elasticsearch: "Elasticsearch",
   mq: "消息队列",
   rabbitMQ: "RabbitMQ",
+  detailLabel: "详细标签",
+  summary: "概括",
+  detail: "详细",
 };
 export default msg;
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index f93f4b26..8612c10e 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -79,6 +79,7 @@ export type MetricConfigOpt = {
   sortOrder?: string;
   topN?: number;
   index?: number;
+  detailLabel?: string;
 };
 
 export interface WidgetConfig {
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index d849b23c..59cc5636 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -35,8 +35,8 @@ limitations under the License. -->
     @change="changeMetricMode"
   />
   <div v-if="isExpression && states.isList">
-    <span class="title">Summary</span>
-    <span>Detail</span>
+    <span class="title">{{ t("summary") }}</span>
+    <span>{{ t("detail") }}</span>
   </div>
   <div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
     <span v-if="isExpression">
@@ -551,6 +551,7 @@ limitations under the License. -->
   }
   async function changeExpression(event: any, index: number) {
     const params = (event.target.textContent || "").replace(/\s+/g, "");
+    console.log(params);
 
     if (params) {
       const resp = await dashboardStore.getTypeOfMQE(params);
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 9e4f69a6..67c5ebc9 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -42,6 +42,20 @@ limitations under the License. -->
         "
       />
     </div>
+    <div class="item mb-10" v-if="hasLabel && dashboardStore.selectedGrid.metricMode === MetricModes.Expression">
+      <span class="label">{{ t("detailLabel") }}</span>
+      <el-input
+        class="input"
+        v-model="currentMetric.detailLabel"
+        size="small"
+        placeholder="Please input a name"
+        @change="
+          updateConfig(index, {
+            detailLabel: encodeURIComponent(currentMetric.detailLabel || ''),
+          })
+        "
+      />
+    </div>
     <div
       class="item mb-10"
       v-if="
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index d3b8fe76..005ce37f 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -48,7 +48,7 @@ limitations under the License. -->
             <div class="view-line">
               <Line
                 :data="{
-                  [colSubMetrics[index] || metric]:
+                  [decodeURIComponent(getLabel(colSubMetrics[index], index, true)) || metric]:
                     scope.row[colSubMetrics[index] || metric] && scope.row[colSubMetrics[index] || metric].values,
                 }"
                 :intervalTime="intervalTime"
@@ -109,9 +109,15 @@ limitations under the License. -->
     }
     return encodeURIComponent("");
   }
-  function getLabel(metric: string, index: number) {
+  function getLabel(metric: string, index: number, isDetail?: boolean) {
     const i = Number(index);
-    const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
+    let label = "";
+    if (isDetail) {
+      label =
+        (props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].detailLabel) || "";
+    } else {
+      label = (props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label) || "";
+    }
     if (label) {
       if (
         (