fix: the refresh button doesn't work in `Alerting` (#115)

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

web/src/pages/Alerting/Message/Index.jsx

@@ -349,10 +349,10 @@ const Index = (props) => {
     },
   ];
 
-  const onTimeChange = ({ start, end }) => {
+  const onTimeChange = ({ start, end, refresh }) => {
     dispatch({
       type: "timeChange",
-      value: { start_time: start, end_time: end },
+      value: { start_time: start, end_time: end, refresh },
     });
   };
 
@@ -503,6 +503,7 @@ const Index = (props) => {
     delete newQueryParams._t;
     delete newQueryParams.start_time;
     delete newQueryParams.end_time;
+    delete newQueryParams.refresh;
     return newQueryParams;
   }, [JSON.stringify(queryParams)]);
 
@@ -511,8 +512,8 @@ const Index = (props) => {
       return { minUpdated: "", maxUpdated: "" };
     }
     return {
-      minUpdated: moment(dataSource.aggregations.min_updated?.value),
+      minUpdated: moment(dataSource.aggregations.min_updated?.value).tz(getTimezone()).utc().format(),
-      maxUpdated: moment(dataSource.aggregations.max_updated?.value),
+      maxUpdated: moment(dataSource.aggregations.max_updated?.value).tz(getTimezone()).utc().format(),
     };
   }, [dataSource.aggregations]);
 
@@ -665,7 +666,7 @@ const Index = (props) => {
                   onRangeChange={onTimeChange}
                   {...refresh}
                   onRefreshChange={setRefresh}
-                  onRefresh={onTimeChange}
+                  onRefresh={({ start, end}) => onTimeChange({ start, end, refresh: new Date().valueOf()})}
                   timeZone={timeZone}
                   onTimeZoneChange={setTimeZone}
                   recentlyUsedRangesKey={'alerting-message'}
@@ -715,6 +716,7 @@ const Index = (props) => {
               to: maxUpdated,
             }}
             queryParams={widgetQueryParams}
+            refresh={queryParams?.refresh}
           />
         </div>
         <Table

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

@@ -18,7 +18,7 @@ import { PriorityIconText } from "../../components/Statistic";
 import WidgetLoader from "@/pages/DataManagement/View/WidgetLoader";
 const Option = Select.Option;
 
-const RuleRecords = ({ ruleID, timeRange, showAertMetric = false }) => {
+const RuleRecords = ({ ruleID, timeRange, showAertMetric = false, refresh }) => {
   if (!ruleID || !timeRange.min) {
     return null;
   }
@@ -231,6 +231,7 @@ const RuleRecords = ({ ruleID, timeRange, showAertMetric = false }) => {
               priority: queryParams.priority,
               state: queryParams.state,
             }}
+            refresh={refresh}
           />
         </div>
       ) : null}

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

@@ -12,7 +12,7 @@ import moment from "moment";
 import { Link } from "umi";
 const Option = Select.Option;
 
-export default ({ ruleID, timeRange }) => {
+export default ({ ruleID, timeRange, refresh }) => {
   const initialQueryParams = {
     from: 0,
     size: 10,
@@ -261,6 +261,7 @@ export default ({ ruleID, timeRange }) => {
             priority: queryParams.priority,
             status: queryParams.status,
           }}
+          refresh={refresh}
         />
       </div>
       <Table

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

@@ -134,7 +134,7 @@ const RuleDetail = (props) => {
     setParam({ ...param, timeRange: state.timeRange });
   }, [state.timeRange]);
 
-  const handleTimeChange = ({ start, end }) => {
+  const handleTimeChange = ({ start, end, refresh }) => {
     setState({
       ...state,
       spinning: true,
@@ -143,6 +143,7 @@ const RuleDetail = (props) => {
         max: end,
         timeFormatter: formatter.dates(1),
       },
+      refresh: refresh || state.refresh 
     });
   };
 
@@ -332,24 +333,12 @@ const RuleDetail = (props) => {
             onRangeChange={handleTimeChange}
             {...refresh}
             onRefreshChange={setRefresh}
-            onRefresh={handleTimeChange}
+            onRefresh={({ start, end}) => handleTimeChange({ start, end, refresh: new Date().valueOf()})}
             timeZone={timeZone}
             onTimeZoneChange={setTimeZone}
             recentlyUsedRangesKey={"rule-detail"}
           />
         </div>
-        <Button
-          onClick={() => {
-            handleTimeChange({
-              start: state.timeRange.min,
-              end: state.timeRange.max,
-            });
-          }}
-          icon={"reload"}
-          type="primary"
-        >
-          {formatMessage({ id: "form.button.refresh" })}
-        </Button>
       </div>
       <div style={{ display: "flex", gap: 15, marginBottom: 20 }}>
         <div style={{ flex: "1 1 50%" }}>
@@ -379,6 +368,7 @@ const RuleDetail = (props) => {
                   from: state.timeRange.min,
                   to: state.timeRange.max,
                 }}
+                refresh={state.refresh}
               />
             ) : (
               <Empty />
@@ -400,6 +390,7 @@ const RuleDetail = (props) => {
                 to: state.timeRange.max,
               }}
               queryParams={{ rule_id: ruleID }}
+              refresh={state.refresh}
             />
           </Card>
         </div>
@@ -419,7 +410,7 @@ const RuleDetail = (props) => {
           key="alerts"
           tab={formatMessage({ id: "alert.rule.detail.title.alert_event" })}
         >
-          <MessageRecord ruleID={ruleID} timeRange={state.timeRange} />
+          <MessageRecord ruleID={ruleID} timeRange={state.timeRange} refresh={state.refresh}/>
         </Tabs.TabPane>
         <Tabs.TabPane
           key="history"
@@ -429,6 +420,7 @@ const RuleDetail = (props) => {
             ruleID={ruleID}
             timeRange={state.timeRange}
             showAertMetric={true}
+            refresh={state.refresh}
           />
         </Tabs.TabPane>
       </Tabs>

web/src/pages/DataManagement/View/WidgetLoader.jsx

@@ -4,10 +4,13 @@ import styles from "./WidgetLoader.less"
 import { Empty, Spin } from "antd"
 import request from "@/utils/request"
 import { generateFilter, mergeFilters } from "./components/QueriesBar/generate_filters"
+import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
+import moment from "moment"
+import { getTimezone } from "@/utils/utils"
 
 export const WidgetRender = (props) => {
 
-   const { widget, range, query, queryParams = {}, highlightRange = {} } = props;
+   const { widget, range, query, queryParams = {}, highlightRange = {}, refresh } = props;
    const [globalRangeCache, setGlobalRangeCache] = useState()
 
    const filters = useMemo(() => {
@@ -27,12 +30,21 @@ export const WidgetRender = (props) => {
       return mergeFilters([], newFilters)
    }, [JSON.stringify(queryParams)])
 
+   const formatTimeRange = useMemo(() => {
+      if (!range.from || !range.to) return { from: 'now-15m', to: 'now'}
+      const bounds = calculateBounds(range);
+      return {
+         from: moment(bounds.min.valueOf()).tz(getTimezone()).utc().format(),
+         to: moment(bounds.max.valueOf()).tz(getTimezone()).utc().format(),
+      };
+   }, [JSON.stringify(range), refresh]);
+
    return (
       widget ? (
          <Widget
             record={widget}
             globalQueries={{
-               range,
+               range: formatTimeRange,
                filters,
                query
             }}