update

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,16 +15,16 @@ limitations under the License. -->
 <template>
   <div class="ttl">
     <div class="label">{{ t("metricsTTL") }}</div>
-    <DoubleHeaderTable :data="[settingsStore.configTTL.metrics]" :metricsRows="MetricsTTLRow" />
+    <TTLTable :data="settingsStore.configTTL.metrics" :metricsRows="MetricsTTLRow" />
     <div class="label">{{ t("recordsTTL") }}</div>
-    <DoubleHeaderTable :data="[settingsStore.configTTL.records]" :metricsRows="RecordsTTLRow" />
+    <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 DoubleHeaderTable from "./DoubleHeaderTable.vue";
+  import TTLTable from "./TTLTable.vue";
   import { MetricsTTLRow, RecordsTTLRow } from "../data";
 
   const { t } = useI18n();

src/views/settings/components/TTLTable.vue

@@ -14,12 +14,10 @@ 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 metricsRows" :prop="item.value" :label="item.label" :key="item.value">
-      <el-table-column v-for="item in column.children" :prop="item.value" :label="item.label" :key="item.value">
+      <template #default="scope">
-        <template #default="scope">
+        {{ scope.row && scope.row[item.value] ? (scope.row[item.value] < 0 ? "N/A" : scope.row[item.value]) : "N/A" }}
-          {{ scope.row && scope.row[item.value] ? (scope.row[item.value] < 0 ? "N/A" : scope.row[item.value]) : "N/A" }}
+      </template>
-        </template>
-      </el-table-column>
     </el-table-column>
   </el-table>
 </template>
@@ -28,7 +26,7 @@ limitations under the License. -->
   /*global PropType, Indexable */
   defineProps({
     metricsRows: {
-      type: Array as PropType<{ label: string; value: string; children: Option[] }[]>,
+      type: Array as PropType<Option[]>,
       default: () => [],
     },
     data: { type: Array as PropType<Indexable[]>, default: () => [] },

src/views/settings/data.ts

@@ -49,96 +49,51 @@ export const SettingsTabs = [
     value: "dumpEffectiveConfigurations",
   },
 ];
+
+export const HotAndWarmOpt = ["day", "hour", "minute", "normal", "trace", "zipkinTrace", "log", "browserErrorLog"];
+
 export const MetricsTTLRow = [
   {
-    label: "Hot / Warm",
+    label: "Type",
-    value: "hotAndWarm",
+    value: "type",
-    children: [
-      {
-        label: "Day",
-        value: "day",
-      },
-      {
-        label: "Hour",
-        value: "hour",
-      },
-      {
-        label: "Minute",
-        value: "minute",
-      },
-    ],
   },
   {
-    label: "Cold",
+    label: "Day",
-    value: "cold",
+    value: HotAndWarmOpt[0],
-    children: [
+  },
-      {
+  {
-        label: "Day",
+    label: "Hour",
-        value: "coldDay",
+    value: HotAndWarmOpt[1],
-      },
+  },
-      {
+  {
-        label: "Hour",
+    label: "Minute",
-        value: "coldHour",
+    value: HotAndWarmOpt[2],
-      },
-      {
-        label: "Minute",
-        value: "coldMinute",
-      },
-    ],
   },
 ];
 
 export const RecordsTTLRow = [
   {
-    label: "Hot / Warm",
+    label: "Type",
-    value: "hotAndWarm",
+    value: "type",
-    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: "Cold",
+    label: "Normal",
-    value: "cold",
+    value: HotAndWarmOpt[3],
-    children: [
+  },
-      {
+  {
-        label: "Normal",
+    label: "Trace",
-        value: "coldNormal",
+    value: HotAndWarmOpt[4],
-      },
+  },
-      {
+  {
-        label: "Trace",
+    label: "Zipkin Trace",
-        value: "coldTrace",
+    value: HotAndWarmOpt[5],
-      },
+  },
-      {
+  {
-        label: "Zipkin Trace",
+    label: "Log",
-        value: "coldZipkinTrace",
+    value: HotAndWarmOpt[6],
-      },
+  },
-      {
+  {
-        label: "Log",
+    label: "Browser Error Log",
-        value: "coldLog",
+    value: HotAndWarmOpt[7],
-      },
-      {
-        label: "Browser Error Log",
-        value: "coldBrowserErrorLog",
-      },
-    ],
   },
 ];