fix(web): apply dynamic step calculation to all locations

Signed-off-by: Shenhan11 <1670285296@qq.com>

Author: Shenhan11

packages/web/projects/vgpu/hooks/useInstantVector.js

@@ -1,6 +1,6 @@
 import cardApi from '~/vgpu/api/card';
 import { onMounted, ref, watch, watchEffect } from 'vue';
-import { timeParse } from '@/utils';
+import { timeParse, calculatePrometheusStep } from '@/utils';
 
 const useInstantVector = (configs, parseQuery = (query) => query, times) => {
   const data = ref(configs);
@@ -38,7 +38,7 @@ const useInstantVector = (configs, parseQuery = (query) => query, times) => {
             range: {
                 start: timeParse(times?.value[0]),
                 end: timeParse(times?.value[1]),
-              step: '1m',
+              step: calculatePrometheusStep(times?.value[0], times?.value[1]),
             },
           });
 
@@ -63,7 +63,7 @@ const useInstantVector = (configs, parseQuery = (query) => query, times) => {
             range: {
                 start: timeParse(times.value[0]),
                 end: timeParse(times.value[1]),
-              step: '1m',
+              step: calculatePrometheusStep(times.value[0], times.value[1]),
             },
           });
 

packages/web/projects/vgpu/hooks/useRangeVector.js

@@ -1,20 +1,21 @@
 import cardApi from '~/vgpu/api/card';
 import { ref, watchEffect } from 'vue';
-import { timeParse } from '@/utils';
+import { timeParse, calculatePrometheusStep } from '@/utils';
 
 const useInstantVector = (configs, parseQuery = (query) => query) => {
   const data = ref(configs);
 
   const fetchData = async () => {
     const start = new Date();
     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    const end = new Date();
 
     const reqs = configs.map(({ query }) =>
       cardApi.getRangeVector({
         range: {
           start: timeParse(start),
-          end: timeParse(new Date()),
-          step: '1m',
+          end: timeParse(end),
+          step: calculatePrometheusStep(start, end),
         },
         query: item.query.replace('$node', detail.value.name),
       }),

packages/web/projects/vgpu/views/card/admin/Detail.vue

@@ -99,7 +99,7 @@ import useInstantVector from '~/vgpu/hooks/useInstantVector';
 import { QuestionFilled } from '@element-plus/icons-vue';
 import EchartsPlus from '@/components/Echarts-plus.vue';
 import cardApi from '~/vgpu/api/card';
-import { timeParse } from '@/utils';
+import { timeParse, calculatePrometheusStep } from '@/utils';
 import { getLineOptions } from '~/vgpu/views/monitor/overview/getOptions';
 import { getLineOptions as getLineOptions2 } from '~/vgpu/components/config';
 import TimeSelect from '~/vgpu/components/timeSelect.vue';
@@ -304,7 +304,7 @@ const fetchLineData = async () => {
         range: {
           start: timeParse(times.value[0]),
           end: timeParse(times.value[1]),
-          step: '1m',
+          step: calculatePrometheusStep(times.value[0], times.value[1]),
         },
         query: item.query.replaceAll(`$deviceuuid`, route.params.uuid),
       })

packages/web/projects/vgpu/views/monitor/overview/index.vue

@@ -378,19 +378,12 @@ const nodeTotalTop = {
 const rangeConfig = ref(rangeConfigInit);
 
 const fetchRangeData = () => {
-  // Calculate dynamic step based on time range to avoid exceeding Prometheus 11,000 data points limit
-  const step = calculatePrometheusStep(times.value[0], times.value[1]);
-  console.log('[Prometheus Step]', {
-    start: times.value[0],
-    end: times.value[1],
-    calculatedStep: step,
-  });
 
   const params = {
     range: {
       start: timeParse(times.value[0]),
       end: timeParse(times.value[1]),
-      step: step,
+      step: calculatePrometheusStep(times.value[0], times.value[1]),
     },
   };
 

packages/web/projects/vgpu/views/task/admin/Detail.vue

@@ -64,7 +64,7 @@ import { onMounted, ref, watch, watchEffect } from 'vue';
 import useInstantVector from '~/vgpu/hooks/useInstantVector';
 import cardApi from '~/vgpu/api/card';
 import { QuestionFilled } from '@element-plus/icons-vue';
-import { roundToDecimal, timeParse, calculateDuration } from '@/utils';
+import { roundToDecimal, timeParse, calculateDuration, calculatePrometheusStep } from '@/utils';
 import taskApi from '~/vgpu/api/task';
 import BlockBox from '@/components/BlockBox.vue';
 import Gauge from '~/vgpu/components/gauge.vue';
@@ -246,7 +246,7 @@ const fetchLineData = async () => {
         range: {
           start: timeParse(times.value[0]),
           end: timeParse(times.value[1]),
-          step: '1m',
+          step: calculatePrometheusStep(times.value[0], times.value[1]),
         },
         query: item.query
           .replaceAll(`$container`, detail.value.name)

packages/web/src/utils/index.js

@@ -573,15 +573,20 @@ export const clearEdges = (items) =>
 export const calculatePrometheusStep = (startTime, endTime, maxPoints = 11000) => {
   const start = new Date(startTime);
   const end = new Date(endTime);
+
+  if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+    return '1m';
+  }
+
   const durationMs = end.getTime() - start.getTime();
-  
-  if (durationMs <= 0) {
+
+  if (durationMs <= 0 || !isFinite(durationMs)) {
     return '1m';
   }
-  
+
   const durationMinutes = durationMs / (1000 * 60);
   const minStepMinutes = Math.ceil(durationMinutes / maxPoints);
-  
+
   if (durationMinutes <= 15) {
     // ≤ 15 minutes: second-level precision
     const points15s = Math.ceil(durationMinutes / 0.25);
@@ -606,8 +611,13 @@ export const calculatePrometheusStep = (startTime, endTime, maxPoints = 11000) =
     if (dataPointsWith24h <= maxPoints) {
       return '24h';
     }
-    
+
     const minStepDays = Math.ceil(dataPointsWith24h / maxPoints);
+
+    if (!isFinite(minStepDays) || isNaN(minStepDays) || minStepDays <= 0) {
+      return '24h';
+    }
+
     return `${minStepDays * 24}h`;
   }
 };