handle Records TTL

src/layout/components/NavBar.vue

@@ -53,9 +53,10 @@ limitations under the License. -->
         <el-switch
           v-model="coldStage"
           inline-prompt
-          active-text="Set data to cold"
-          inactive-text="Set data to warm"
+          active-text="Set data to warm"
+          inactive-text="Set data to cold"
           @change="changeDataMode"
+          width="120px"
         />
       </span>
       <span class="ml-5" ref="themeSwitchRef">
@@ -121,7 +122,7 @@ limitations under the License. -->
   resetDuration();
   getVersion();
   getNavPaths();
-  getMetricsTTL();
+  setTTL();
 
   function changeTheme() {
     const root = document.documentElement;
@@ -220,6 +221,23 @@ limitations under the License. -->
     appStore.setDuration(timeFormat(val));
   }
 
+  function setTTL() {
+    getMetricsTTL();
+    getRecordsTTL();
+    changeDataMode();
+  }
+  async function getRecordsTTL() {
+    // const resp = await appStore.queryRecordsTTL();
+    // mock data
+    const recordsData = {
+      value: 6,
+      superDataset: 2,
+      coldValue: 3,
+      coldSuperDataset: 5,
+    };
+    appStore.setRecordsTTL(recordsData.value);
+  }
+
   async function getMetricsTTL() {
     // const resp = await appStore.queryMetricsTTL();
     // mock data
@@ -232,15 +250,31 @@ limitations under the License. -->
       coldDay: 9,
     };
     appStore.setMetricsTTL(data);
-    changeDataMode();
   }
 
   function handleMetricsTTL(params: { minute: number; hour: number; day: number }) {
-    const gap = (params.day + 1) * 24 * 60 * 60 * 1000 + params.hour * 60 * 60 * 1000 + params.minute * 60 * 1000;
+    const gap = dayToMS(params.day) + params.hour * 60 * 60 * 1000 + params.minute * 60 * 1000;
     const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
     appStore.setMaxRange(dates);
   }
 
+  function handleRecordsTTL(params: {
+    value: number;
+    superDataset: number;
+    coldValue: number;
+    coldSuperDataset: number;
+  }) {
+    const gap = dayToMS(params.value);
+    const superDatasetGap = dayToMS(params.superDataset);
+    const coldValueGap = dayToMS(params.coldValue);
+    const coldSuperDatasetGap = dayToMS(params.coldSuperDataset);
+    // const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+  }
+
+  function dayToMS(day: number) {
+    return (day + 1) * 24 * 60 * 60 * 1000;
+  }
+
   function getNavPaths() {
     pathNames.value = [];
     pageTitle.value = "";

src/store/modules/app.ts

@@ -21,7 +21,7 @@ import type { Duration, DurationTime } from "@/types/app";
 import getLocalTime from "@/utils/localtime";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
-import type { MenuOptions, SubItem, MetricsTTL } from "@/types/app";
+import type { MenuOptions, SubItem, MetricsTTL, RecordsTTL } from "@/types/app";
 import { Themes } from "@/constants/data";
 /*global Nullable*/
 interface AppState {
@@ -40,6 +40,7 @@ interface AppState {
   coldStageMode: boolean;
   maxRange: Date[];
   metricsTTL: Recordable<MetricsTTL>;
+  recordsTTL: Recordable<RecordsTTL>;
 }
 
 export const appStore = defineStore({
@@ -64,6 +65,7 @@ export const appStore = defineStore({
     coldStageMode: false,
     maxRange: [],
     metricsTTL: {},
+    recordsTTL: {},
   }),
   getters: {
     duration(): Duration {
@@ -134,6 +136,9 @@ export const appStore = defineStore({
     setMetricsTTL(data: MetricsTTL) {
       this.metricsTTL = data;
     },
+    setRecordsTTL(data: RecordsTTL) {
+      this.recordsTTL = data;
+    },
     setTheme(data: string) {
       this.theme = data;
     },

src/types/app.d.ts

@@ -77,3 +77,10 @@ export interface MetricsTTL {
   coldHour: number;
   coldDay: number;
 }
+
+export interface RecordsTTL {
+  value: number;
+  superDataset: number;
+  coldValue: number;
+  coldSuperDataset: number;
+}

src/views/dashboard/related/trace/Filter.vue

@@ -65,8 +65,14 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input size="small" v-model="traceId" class="traceId" />
     </div>
-    <div>
+    <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
+      <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" type="number" />
+      <span class="grey mr-5">-</span>
+      <el-input size="small" class="inputs" v-model="maxTraceDuration" type="number" />
+    </div>
+    <div>
+      <span class="sm b grey mr-5">{{ t("timeRange") }}:</span>
       <TimePicker
         :value="[appStore.durationRow.start, appStore.durationRow.end]"
         position="bottom"
@@ -74,12 +80,6 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
     </div>
-    <div class="mr-10">
-      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" type="number" />
-      <span class="grey mr-5">-</span>
-      <el-input size="small" class="inputs" v-model="maxTraceDuration" type="number" />
-    </div>
   </div>
   <div class="flex-h">
     <ConditionTags :type="'TRACE'" @update="updateTags" />