update TTL Tab

src/locales/lang/en.ts

@@ -397,8 +397,8 @@ const msg = {
   instances: "Instances",
   snapshot: "Snapshot",
   expression: "Expression",
-  metricsTTL: "Metrics TTL",
+  metricsTTL: "Metrics TTL (day)",
-  recordsTTL: "Records TTL",
+  recordsTTL: "Records TTL (day)",
   clusterNodes: "Cluster Nodes",
   debuggingConfigDump: "Dump Effective Configurations",
   customDuration: "Custom Duration",

src/locales/lang/es.ts

@@ -397,8 +397,8 @@ const msg = {
   snapshot: "Snapshot",
   expression: "Expression",
   asSelector: "As Selector",
-  metricsTTL: "Metrics TTL",
+  metricsTTL: "Metrics TTL (day)",
-  recordsTTL: "Records TTL",
+  recordsTTL: "Records TTL (day)",
   clusterNodes: "Cluster Nodes",
   debuggingConfigDump: "Dump Effective Configurations",
   customDuration: "Duración Personalizada",

src/locales/lang/zh.ts

@@ -395,8 +395,8 @@ const msg = {
   instances: "实例",
   snapshot: "快照",
   expression: "表达式",
-  metricsTTL: "Metrics TTL",
+  metricsTTL: "Metrics TTL (day)",
-  recordsTTL: "Records TTL",
+  recordsTTL: "Records TTL (day)",
   clusterNodes: "集群节点",
   debuggingConfigDump: "转储有效配置",
   customDuration: "自定义时长",

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>

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
+    <DoubleHeaderTable :data="settingsStore.configTTL.metrics" :metricsRows="MetricsTTLRow" />
-      :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>
     <div class="label">{{ t("recordsTTL") }}</div>
-    <el-table
+    <DoubleHeaderTable :data="settingsStore.configTTL.records" :metricsRows="RecordsTTLRow" />
-      :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>
   </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();

src/views/settings/data.ts

@@ -51,70 +51,94 @@ export const SettingsTabs = [
 ];
 export const MetricsTTLRow = [
   {
-    label: "Day",
+    label: "Hot / Warm",
-    value: "day",
+    value: "hotAndWarm",
+    children: [
+      {
+        label: "Day",
+        value: "day",
+      },
+      {
+        label: "Hour",
+        value: "hour",
+      },
+      {
+        label: "Minute",
+        value: "minute",
+      },
+    ],
   },
   {
-    label: "Hour",
+    label: "Cold",
-    value: "hour",
+    value: "cold",
-  },
+    children: [
-  {
+      {
-    label: "Minute",
+        label: "Day",
-    value: "minute",
+        value: "coldDay",
-  },
+      },
-  {
+      {
-    label: "Cold Day",
+        label: "Hour",
-    value: "coldDay",
+        value: "coldHour",
-  },
+      },
-  {
+      {
-    label: "Cold Hour",
+        label: "Minute",
-    value: "coldHour",
+        value: "coldMinute",
-  },
+      },
-  {
+    ],
-    label: "Cold Minute",
-    value: "coldMinute",
   },
 ];
 
 export const RecordsTTLRow = [
   {
-    label: "Normal",
+    label: "Hot / Warm",
-    value: "normal",
+    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",
+    label: "Cold",
-    value: "trace",
+    value: "cold",
-  },
+    children: [
-  {
+      {
-    label: "Log",
+        label: "Normal",
-    value: "log",
+        value: "coldNormal",
-  },
+      },
-  {
+      {
-    label: "Zipkin Trace",
+        label: "Trace",
-    value: "zipkinTrace",
+        value: "coldTrace",
-  },
+      },
-  {
+      {
-    label: "Browser Error Log",
+        label: "Zipkin Trace",
-    value: "browserErrorLog",
+        value: "coldZipkinTrace",
-  },
+      },
-  {
+      {
-    label: "Cold Normal",
+        label: "Log",
-    value: "coldNormal",
+        value: "coldLog",
-  },
+      },
-  {
+      {
-    label: "Cold Trace",
+        label: "Browser Error Log",
-    value: "coldTrace",
+        value: "coldBrowserErrorLog",
-  },
+      },
-  {
+    ],
-    label: "Cold Zipkin Trace",
-    value: "coldZipkinTrace",
-  },
-  {
-    label: "Cold Log",
-    value: "coldLog",
-  },
-  {
-    label: "Cold Browser Error Log",
-    value: "coldBrowserErrorLog",
   },
 ];