feat: enhance the TTL Tab on Setting page (#473)

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",

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",

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: "自定义时长",

src/store/data.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import { WidgetType } from "@/views/dashboard/data";
+import { HotAndWarmOpt } from "@/views/settings/data";
 
 export const NewControl = {
   x: 0,
@@ -58,3 +59,18 @@ export enum EBPFProfilingTriggerType {
 }
 
 export const EndpointsTopNDefault = 20;
+
+export const TTLTypes = {
+  HotAndWarm: "Hot / Warm",
+  Cold: "Cold",
+};
+export const TTLColdMap: Indexable<string> = {
+  coldDay: HotAndWarmOpt[0],
+  coldHour: HotAndWarmOpt[1],
+  coldMinute: HotAndWarmOpt[2],
+  coldNormal: HotAndWarmOpt[3],
+  coldTrace: HotAndWarmOpt[4],
+  coldZipkinTrace: HotAndWarmOpt[5],
+  coldLog: HotAndWarmOpt[6],
+  coldBrowserErrorLog: HotAndWarmOpt[7],
+};

src/store/modules/settings.ts

@@ -18,6 +18,8 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import fetchQuery from "@/graphql/http";
 import type { ClusterNode, ConfigTTL } from "@/types/settings";
+import { HotAndWarmOpt } from "@/views/settings/data";
+import { TTLTypes, TTLColdMap } from "../data";
 
 interface SettingsState {
   clusterNodes: ClusterNode[];
@@ -46,7 +48,20 @@ export const settingsStore = defineStore({
         method: "get",
         path: "ConfigTTL",
       });
-      this.configTTL = response;
+      for (const item of Object.keys(response)) {
+        const rows = [];
+        const row: Indexable<string> = { type: TTLTypes.HotAndWarm };
+        const rowCold: Indexable<string> = { type: TTLTypes.Cold };
+        for (const key of Object.keys(response[item])) {
+          if (HotAndWarmOpt.includes(key)) {
+            row[key] = response[item][key];
+          } else {
+            rowCold[TTLColdMap[key] as string] = response[item][key];
+          }
+        }
+        rows.push(row, rowCold);
+        this.configTTL[item] = rows;
+      }
       return response;
     },
     async getDebuggingConfigDump() {

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>
+    <TTLTable :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>
+    <TTLTable :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 TTLTable from "./TTLTable.vue";
   import { MetricsTTLRow, RecordsTTLRow } from "../data";
 
   const { t } = useI18n();

src/views/settings/components/TTLTable.vue

@@ -0,0 +1,44 @@
+<!-- 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)' }"
+    :cell-style="(data: Indexable) => (data.columnIndex === 0 ? { backgroundColor: 'var(--el-table-header-bg-color)' } : {})"
+  >
+    <el-table-column
+      v-for="item in metricsRows"
+      :prop="item.value"
+      :label="item.label"
+      :key="item.value"
+      :width="item.width"
+    >
+      <template #default="scope">
+        {{ scope.row && scope.row[item.value] ? (scope.row[item.value] < 0 ? "N/A" : scope.row[item.value]) : "N/A" }}
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+  /*global PropType, Indexable */
+  defineProps({
+    metricsRows: {
+      type: Array as PropType<{ width?: number; value: string; label: string }[]>,
+      default: () => [],
+    },
+    data: { type: Array as PropType<Indexable[]>, default: () => [] },
+  });
+</script>

src/views/settings/data.ts

@@ -49,72 +49,53 @@ export const SettingsTabs = [
     value: "dumpEffectiveConfigurations",
   },
 ];
+
+export const HotAndWarmOpt = ["day", "hour", "minute", "normal", "trace", "zipkinTrace", "log", "browserErrorLog"];
+
 export const MetricsTTLRow = [
+  {
+    label: "Type",
+    value: "type",
+    width: 260,
+  },
   {
     label: "Day",
-    value: "day",
+    value: HotAndWarmOpt[0],
   },
   {
     label: "Hour",
-    value: "hour",
+    value: HotAndWarmOpt[1],
   },
   {
     label: "Minute",
-    value: "minute",
-  },
-  {
-    label: "Cold Day",
-    value: "coldDay",
-  },
-  {
-    label: "Cold Hour",
-    value: "coldHour",
-  },
-  {
-    label: "Cold Minute",
-    value: "coldMinute",
+    value: HotAndWarmOpt[2],
   },
 ];
 
 export const RecordsTTLRow = [
+  {
+    label: "Type",
+    value: "type",
+    width: 260,
+  },
   {
     label: "Normal",
-    value: "normal",
+    value: HotAndWarmOpt[3],
   },
   {
     label: "Trace",
-    value: "trace",
-  },
-  {
-    label: "Log",
-    value: "log",
+    value: HotAndWarmOpt[4],
   },
   {
     label: "Zipkin Trace",
-    value: "zipkinTrace",
+    value: HotAndWarmOpt[5],
+  },
+  {
+    label: "Log",
+    value: HotAndWarmOpt[6],
   },
   {
     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",
+    value: HotAndWarmOpt[7],
   },
 ];