From 88553431b8a9a346bf969ab79d083857fd8ac41d Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 3 Jun 2025 18:17:47 +0800
Subject: [PATCH] update TTL Tab

---
 src/locales/lang/en.ts                        |   4 +-
 src/locales/lang/es.ts                        |   4 +-
 src/locales/lang/zh.ts                        |   4 +-
 .../settings/components/DoubleHeaderTable.vue |  34 +++++
 src/views/settings/components/TTL.vue         |  33 +----
 src/views/settings/data.ts                    | 136 ++++++++++--------
 6 files changed, 123 insertions(+), 92 deletions(-)
 create mode 100644 src/views/settings/components/DoubleHeaderTable.vue

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index ea77bc16..78029437 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -397,8 +397,8 @@ const msg = {
   instances: "Instances",
   snapshot: "Snapshot",
   expression: "Expression",
-  metricsTTL: "Metrics TTL",
-  recordsTTL: "Records TTL",
+  metricsTTL: "Metrics TTL (day)",
+  recordsTTL: "Records TTL (day)",
   clusterNodes: "Cluster Nodes",
   debuggingConfigDump: "Dump Effective Configurations",
   customDuration: "Custom Duration",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index ba7d7edc..f088f27f 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -397,8 +397,8 @@ const msg = {
   snapshot: "Snapshot",
   expression: "Expression",
   asSelector: "As Selector",
-  metricsTTL: "Metrics TTL",
-  recordsTTL: "Records TTL",
+  metricsTTL: "Metrics TTL (day)",
+  recordsTTL: "Records TTL (day)",
   clusterNodes: "Cluster Nodes",
   debuggingConfigDump: "Dump Effective Configurations",
   customDuration: "Duración Personalizada",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 40c21e0e..a3b079b7 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -395,8 +395,8 @@ const msg = {
   instances: "实例",
   snapshot: "快照",
   expression: "表达式",
-  metricsTTL: "Metrics TTL",
-  recordsTTL: "Records TTL",
+  metricsTTL: "Metrics TTL (day)",
+  recordsTTL: "Records TTL (day)",
   clusterNodes: "集群节点",
   debuggingConfigDump: "转储有效配置",
   customDuration: "自定义时长",
diff --git a/src/views/settings/components/DoubleHeaderTable.vue b/src/views/settings/components/DoubleHeaderTable.vue
new file mode 100644
index 00000000..3c98bf53
--- /dev/null
+++ b/src/views/settings/components/DoubleHeaderTable.vue
@@ -0,0 +1,34 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <el-table :data="[data]" class="mb-5" :row-style="{ backgroundColor: 'var(--layout-background)' }">
+    <el-table-column v-for="column in metricsRows" :prop="column.value" :label="column.label" :key="column.value">
+      <el-table-column v-for="item in column.children" :prop="item.value" :label="item.label" :key="item.value">
+        {{ data ? (data[item.value] < 0 ? "N/A" : data[item.value]) : "N/A" }}
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+  import type { Option } from "@/types/app";
+  /*global PropType, Indexable */
+  defineProps({
+    metricsRows: {
+      type: Array as PropType<{ label: string; value: string; children: Option[] }[]>,
+      default: () => [],
+    },
+    data: { type: Object as PropType<Indexable>, default: () => {} },
+  });
+</script>
diff --git a/src/views/settings/components/TTL.vue b/src/views/settings/components/TTL.vue
index 5e2a6ea8..a323008c 100644
--- a/src/views/settings/components/TTL.vue
+++ b/src/views/settings/components/TTL.vue
@@ -15,43 +15,16 @@ limitations under the License. -->
 <template>
   <div class="ttl">
     <div class="label">{{ t("metricsTTL") }}</div>
-    <el-table
-      :data="[settingsStore.configTTL.metrics]"
-      class="mb-5"
-      :row-style="{ backgroundColor: 'var(--layout-background)' }"
-    >
-      <el-table-column v-for="item in MetricsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
-        {{
-          settingsStore.configTTL?.metrics
-            ? settingsStore.configTTL.metrics[item.value] < 0
-              ? "N/A"
-              : (settingsStore.configTTL?.metrics ?? {})[item.value]
-            : "N/A"
-        }}
-      </el-table-column>
-    </el-table>
+    <DoubleHeaderTable :data="settingsStore.configTTL.metrics" :metricsRows="MetricsTTLRow" />
     <div class="label">{{ t("recordsTTL") }}</div>
-    <el-table
-      :data="[settingsStore.configTTL.records]"
-      class="mb-5"
-      :row-style="{ backgroundColor: 'var(--layout-background)' }"
-    >
-      <el-table-column v-for="item in RecordsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
-        {{
-          settingsStore.configTTL?.records
-            ? settingsStore.configTTL?.records[item.value] < 0
-              ? "N/A"
-              : (settingsStore.configTTL?.records || {})[item.value]
-            : "N/A"
-        }}
-      </el-table-column>
-    </el-table>
+    <DoubleHeaderTable :data="settingsStore.configTTL.records" :metricsRows="RecordsTTLRow" />
   </div>
 </template>
 <script lang="ts" setup>
   import { onMounted } from "vue";
   import { useI18n } from "vue-i18n";
   import { useSettingsStore } from "@/store/modules/settings";
+  import DoubleHeaderTable from "./DoubleHeaderTable.vue";
   import { MetricsTTLRow, RecordsTTLRow } from "../data";
 
   const { t } = useI18n();
diff --git a/src/views/settings/data.ts b/src/views/settings/data.ts
index 83adaea8..e6557f11 100644
--- a/src/views/settings/data.ts
+++ b/src/views/settings/data.ts
@@ -51,70 +51,94 @@ export const SettingsTabs = [
 ];
 export const MetricsTTLRow = [
   {
-    label: "Day",
-    value: "day",
+    label: "Hot / Warm",
+    value: "hotAndWarm",
+    children: [
+      {
+        label: "Day",
+        value: "day",
+      },
+      {
+        label: "Hour",
+        value: "hour",
+      },
+      {
+        label: "Minute",
+        value: "minute",
+      },
+    ],
   },
   {
-    label: "Hour",
-    value: "hour",
-  },
-  {
-    label: "Minute",
-    value: "minute",
-  },
-  {
-    label: "Cold Day",
-    value: "coldDay",
-  },
-  {
-    label: "Cold Hour",
-    value: "coldHour",
-  },
-  {
-    label: "Cold Minute",
-    value: "coldMinute",
+    label: "Cold",
+    value: "cold",
+    children: [
+      {
+        label: "Day",
+        value: "coldDay",
+      },
+      {
+        label: "Hour",
+        value: "coldHour",
+      },
+      {
+        label: "Minute",
+        value: "coldMinute",
+      },
+    ],
   },
 ];
 
 export const RecordsTTLRow = [
   {
-    label: "Normal",
-    value: "normal",
+    label: "Hot / Warm",
+    value: "hotAndWarm",
+    children: [
+      {
+        label: "Normal",
+        value: "normal",
+      },
+      {
+        label: "Trace",
+        value: "trace",
+      },
+      {
+        label: "Zipkin Trace",
+        value: "zipkinTrace",
+      },
+      {
+        label: "Log",
+        value: "log",
+      },
+      {
+        label: "Browser Error Log",
+        value: "browserErrorLog",
+      },
+    ],
   },
   {
-    label: "Trace",
-    value: "trace",
-  },
-  {
-    label: "Log",
-    value: "log",
-  },
-  {
-    label: "Zipkin Trace",
-    value: "zipkinTrace",
-  },
-  {
-    label: "Browser Error Log",
-    value: "browserErrorLog",
-  },
-  {
-    label: "Cold Normal",
-    value: "coldNormal",
-  },
-  {
-    label: "Cold Trace",
-    value: "coldTrace",
-  },
-  {
-    label: "Cold Zipkin Trace",
-    value: "coldZipkinTrace",
-  },
-  {
-    label: "Cold Log",
-    value: "coldLog",
-  },
-  {
-    label: "Cold Browser Error Log",
-    value: "coldBrowserErrorLog",
+    label: "Cold",
+    value: "cold",
+    children: [
+      {
+        label: "Normal",
+        value: "coldNormal",
+      },
+      {
+        label: "Trace",
+        value: "coldTrace",
+      },
+      {
+        label: "Zipkin Trace",
+        value: "coldZipkinTrace",
+      },
+      {
+        label: "Log",
+        value: "coldLog",
+      },
+      {
+        label: "Browser Error Log",
+        value: "coldBrowserErrorLog",
+      },
+    ],
   },
 ];