fix: lose range of Metrics' chart in Alerting Message Detail (#39)

Co-authored-by: yaojiping <yaojiping@infini.ltd>

web/src/pages/Alerting/Message/components/AlertChartCard.jsx

@@ -37,8 +37,8 @@ export default ({msgItem, range})=>{
       "indices": resource.objects,
       "time_field": resource.time_field,
       "raw_filter": resource.raw_filter,
-  })
+    }, created, updated)
-  }, [JSON.stringify(rule)])
+  }, [JSON.stringify(rule), updated, created])
 
   const highlightRange = useMemo(() => {
     if (!created || created === updated) return undefined;

web/src/pages/Alerting/Message/components/MessageDetail.jsx

@@ -46,10 +46,13 @@ const MessageDetail = (props) => {
     if (messageDetail?.status == "recovered") {
       endTimestamp = moment(messageDetail.updated).valueOf();
     }
+
+    const duration = moment(messageDetail.updated).valueOf() - moment(messageDetail.created).valueOf()
+
     setTimeRange({
       ...timeRange,
-      min: moment(startTimestamp).format(),
+      min: moment(startTimestamp).subtract(duration, 'ms').format("YYYY-MM-DDTHH:mm:ss.SSS"),
-      max: moment(endTimestamp).format("YYYY-MM-DDTHH:mm:ss.SSS"),
+      max: moment(endTimestamp).add(duration, 'ms').format("YYYY-MM-DDTHH:mm:ss.SSS"),
     });
   }
 
@@ -70,7 +73,10 @@ const MessageDetail = (props) => {
         <Tabs.TabPane tab={formatMessage({ id: "alert.message.detail.title.summary" })} key="summary">
           {messageDetail?.status ? <EventDetailCard msgItem={messageDetail}/>: null}
           <div style={{marginTop: 15}}>
-            {<AlertChartCard msgItem={messageDetail}/>}
+            {<AlertChartCard msgItem={messageDetail} range={{ 
+              from: timeRange.min, 
+              to: timeRange.max
+            }}/>}
           </div>
         </Tabs.TabPane>
         <Tabs.TabPane tab={formatMessage({ id: "alert.message.detail.title.notification" })} key="notification">

web/src/pages/Alerting/Rule/components/RuleDetail.jsx

@@ -37,11 +37,13 @@ import { hasAuthority } from "@/utils/authority";
 import DatePicker from "@/common/src/DatePicker";
 import { getLocale } from "umi/locale";
 import { getTimezone } from "@/utils/utils";
+import moment from "moment";
 
 const { Title } = Typography;
 
-export const buildWidgetByRule = (rule, queries) => {
+export const buildWidgetByRule = (rule, queries, created, updated) => {
   if (!rule) return;
+
   const { metrics = {} } = rule;
   const { format_type = "num" } = metrics;
   const formatMapping = {
@@ -62,8 +64,20 @@ export const buildWidgetByRule = (rule, queries) => {
   try {
     query = JSON.stringify(queries.raw_filter);
   } catch (error) {}
+
+  const number = parseInt(metrics.bucket_size);
+  const unit = metrics.bucket_size?.replace(`${number}`, '')
+  let bucketSize = metrics.bucket_size
+  if (unit) {
+    const duration = moment(updated).valueOf() - moment(created).valueOf()
+    const ms = moment.duration(number, unit).asMilliseconds()
+    if (duration <= 2 * ms) {
+      bucketSize = `${ms / 1000 / 2}s`
+    }
+  }
+
   const config = {
-    bucket_size: metrics.bucket_size,
+    bucket_size: bucketSize,
     format: formatMapping[format_type],
     group_labels: metrics.bucket_label ? [metrics.bucket_label] : undefined,
     series: [
@@ -183,7 +197,7 @@ const RuleDetail = (props) => {
       indices: ruleDetail.resource_objects,
       time_field: ruleDetail.resource_time_field,
       raw_filter: ruleDetail.resource_raw_filter,
-    });
+    }, ruleDetail?.created, ruleDetail?.updated);
   }, [ruleDetail]);
 
   return (

web/src/pages/DataManagement/View/Widget/WidgetBody/Chart.jsx

@@ -102,6 +102,7 @@ export default (props) => {
       }
 
       if (isTimeSeries && !range) {
+        setLoading(false)
         return;
       }
       let newRange;