add max range for time picker

src/components/DateCalendar.vue

@@ -175,6 +175,7 @@ limitations under the License. -->
       type: String,
       default: "YYYY-MM-DD",
     },
+    maxRange: { type: Array as PropType<Date[]>, default: () => [] },
   });
   const state = reactive({
     pre: "",
@@ -241,6 +242,12 @@ limitations under the License. -->
   const end = computed(() => {
     return parse(Number(props.dates[1]));
   });
+  const minStart = computed(() => {
+    return parse(Number(props.maxRange[0]));
+  });
+  const maxEnd = computed(() => {
+    return parse(Number(props.maxRange[1]));
+  });
   const ys = computed(() => {
     return Math.floor(state.year / 10) * 10;
   });
@@ -369,7 +376,10 @@ limitations under the License. -->
       flag = tf(props.value, format) === tf(time, format);
     }
     classObj[`${state.pre}-date`] = true;
-    classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format);
+    classObj[`${state.pre}-date-disabled`] =
+      (props.right && (t < start.value || t > maxEnd.value)) ||
+      (props.left && t < minStart.value) ||
+      props.disabledDate(time, format);
     classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value);
     classObj[`${state.pre}-date-selected`] = flag;
     return classObj;

src/components/TimePicker.vue

@@ -68,6 +68,7 @@ limitations under the License. -->
               :left="true"
               :disabledDate="disabledDate"
               :format="format"
+              :maxRange="maxRange"
               @ok="ok"
               @setDates="setDates"
             />
@@ -78,6 +79,7 @@ limitations under the License. -->
               :right="true"
               :disabledDate="disabledDate"
               :format="format"
+              :maxRange="maxRange"
               @ok="ok"
               @setDates="setDates"
             />
@@ -112,7 +114,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import DateCalendar from "./DateCalendar.vue";
   import { useTimeoutFn } from "@/hooks/useTimeout";
-  /*global defineProps, defineEmits*/
+  /*global PropType, defineProps, defineEmits*/
   const datepicker = ref(null);
   const { t } = useI18n();
   const show = ref<boolean>(false);
@@ -149,6 +151,7 @@ limitations under the License. -->
       type: Boolean,
       default: false,
     },
+    maxRange: { type: Array as PropType<Date[]>, default: () => [] },
   });
   const emit = defineEmits(["clear", "input", "confirm", "cancel"]);
   const local = computed(() => {

src/layout/components/NavBar.vue

@@ -43,6 +43,7 @@ limitations under the License. -->
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
         :value="[appStore.durationRow.start, appStore.durationRow.end]"
+        :maxRange="appStore.maxRange"
         position="bottom"
         format="YYYY-MM-DD HH:mm"
         @input="changeTimeRange"
@@ -212,10 +213,35 @@ limitations under the License. -->
   }
 
   async function getMetricsTTL() {
-    const resp = await appStore.queryMetricsTTL();
+    // const resp = await appStore.queryMetricsTTL();
-    // const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
+    // mock data
-    // const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+    const data = {
-    // appStore.setDuration(timeFormat(dates));
+      minute: 20,
+      hour: 2,
+      day: 3,
+      coldMinute: 10,
+      coldHour: 10,
+      coldDay: 9,
+    };
+    if (coldStage.value) {
+      handleMetricsTTL({
+        minute: data.coldMinute,
+        hour: data.coldHour,
+        day: data.coldDay,
+      });
+    } else {
+      handleMetricsTTL({
+        minute: data.minute,
+        hour: data.hour,
+        day: data.day,
+      });
+    }
+  }
+
+  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 dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+    appStore.setMaxRange(dates);
   }
 
   function getNavPaths() {

src/store/modules/app.ts

@@ -38,6 +38,7 @@ interface AppState {
   allMenus: MenuOptions[];
   theme: string;
   coldStageMode: boolean;
+  maxRange: Date[];
 }
 
 export const appStore = defineStore({
@@ -60,6 +61,7 @@ export const appStore = defineStore({
     allMenus: [],
     theme: Themes.Dark,
     coldStageMode: false,
+    maxRange: [],
   }),
   getters: {
     duration(): Duration {
@@ -124,6 +126,9 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
+    setMaxRange(times: Date[]) {
+      this.maxRange = times;
+    },
     setTheme(data: string) {
       this.theme = data;
     },

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

@@ -94,7 +94,6 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useSelectorStore } from "@/store/modules/selectors";
-  import timeFormat from "@/utils/timeFormat";
   import ConditionTags from "@/views/components/ConditionTags.vue";
   import { ElMessage } from "element-plus";
   import { EntityType, QueryOrders, Status } from "../../data";
@@ -265,7 +264,7 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
     }
   }
-  function changeTimeRange(val: Date[]) {
+  function changeTimeRange() {
     // duration.value = timeFormat(val);
   }
   onUnmounted(() => {