From 5c37a049cd9c5fe3f261b00dca65377507b7b6d7 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 10 Apr 2024 13:57:10 +0800
Subject: [PATCH] feat: update

---
 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 -
 .../widget/graph-styles/Table.vue              | 11 -----------
 src/views/dashboard/data.ts                    |  1 -
 src/views/dashboard/graphs/Table.vue           | 18 ++++++++++++++----
 8 files changed, 19 insertions(+), 24 deletions(-)

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 1ef07560..5813c075 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -16,15 +16,26 @@ 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="(keys, index) in dataKeys" :key="index">
-      <div v-for="k in keys" class="name" :style="`width: ${(nameWidth as number) / 2}%`" :key="k">{{ k }}</div>
+      <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 && config.metricTypes[0] === "readMetricsValue") ||
@@ -51,7 +62,6 @@ limitations under the License. -->
       type: Object as PropType<{
         showTableValues: boolean;
         tableHeaderCol2: string;
-        tableHeaderCol1: string;
         metricTypes: string[];
         typesOfMQE: string[];
       }>,