chore: time interval can only be calculated automatically if the time range is too long (#110)

* chore: handling timeout error tips

* chore: time interval can only be calculated automatically if the time range is too long

---------

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

web/src/common/src/DatePicker/TimeSetting.jsx

@@ -20,7 +20,7 @@ const timeOuts = [
 ];
 
 const TimeSetting = props => {
-  const { currentLocales, timeFields = [], showTimeField, showTimeInterval, showTimeout, onTimeSettingChange, onCancel } = props;
+  const { currentLocales, timeFields = [], showTimeField, showTimeInterval, timeIntervalDisabled = false, showTimeout, onTimeSettingChange, onCancel } = props;
 
   const [isAuto, setIsAuto] = useState(!props.timeInterval)
   const [timeField, setTimeField] = useState(props.timeField);
@@ -78,7 +78,7 @@ const TimeSetting = props => {
           <div className={styles.label}>
             {currentLocales[`datepicker.time_setting.time_interval`]}
             <div className={styles.auto}>
-              <Switch size="small" checked={isAuto} onChange={(checked) => {
+              <Switch disabled={timeIntervalDisabled} size="small" checked={isAuto} onChange={(checked) => {
                 setIsAuto(checked)
                 if (checked) {
                   timeIntervalCache.current = timeInterval;
@@ -89,6 +89,13 @@ const TimeSetting = props => {
               }}/> {currentLocales[`datepicker.time_setting.time_interval.auto`]}
             </div>
           </div>
+          {
+            timeIntervalDisabled && isAuto && (
+              <div className={styles.help}>
+                {currentLocales[`datepicker.time_setting.time_interval.help`]}
+              </div>
+            )
+          }
           <div className={styles.form}>
             {
               !isAuto && timeIntervalObject && (

web/src/common/src/DatePicker/TimeSetting.less

@@ -37,6 +37,12 @@
       justify-content: space-between;
       gap: 8px;
     }
+
+    .help {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 12px;
+      word-break: break-all;
+    }
   }
 
   .apply {

web/src/common/src/DatePicker/index.jsx

@@ -87,6 +87,7 @@ const DatePicker = (props) => {
     timeFields = [],
     showTimeInterval = false,
     timeInterval,
+    timeIntervalDisabled = false,
     showTimeout = false,
     timeout,
     autoFitLoading = false,

web/src/common/src/DatePicker/index.md

@@ -23,6 +23,7 @@
 | timeFields | 时间字段列表  | string[] | [] | 1.0.0 |
 | showTimeInterval | 是否显示时间间隔  | boolean | false | 1.0.0 |
 | timeInterval | 时间间隔  | string | - | 1.0.0 |
+| timeIntervalDisabled | 禁用时间间隔  | boolean | false | 1.0.0 |
 | showTimeout | 是否显示超时时间  | boolean | false | 1.0.0 |
 | timeout | 超时时间  | string | 10s | 1.0.0 |
 | onTimeSettingChange | 时间配置变更的回调 | ({timeField: string, timeInterval: string, timeout: string}) => void | - | 1.0.0 |

web/src/common/src/DatePicker/locales/en-US.js

@@ -21,6 +21,7 @@ export default {
   "datepicker.time_setting.time_field": "Time field",
   "datepicker.time_setting.time_interval": "Time interval",
   "datepicker.time_setting.time_interval.auto": "Auto",
+  "datepicker.time_setting.time_interval.help": "Because of the long time range, time interval can only be calculated automatically.",
   "datepicker.time_setting.time_interval.ms": "Millisecond",
   "datepicker.time_setting.time_interval.s": "Second",
   "datepicker.time_setting.time_interval.m": "Minute",

web/src/common/src/DatePicker/locales/zh-CN.js

@@ -21,6 +21,7 @@ export default {
   "datepicker.time_setting.time_field": "时间字段",
   "datepicker.time_setting.time_interval": "时间间隔",
   "datepicker.time_setting.time_interval.auto": "自动",
+  "datepicker.time_setting.time_interval.help": "由于时间跨度较长，仅支持自动计算时间间隔。",
   "datepicker.time_setting.time_interval.ms": "毫秒",
   "datepicker.time_setting.time_interval.s": "秒",
   "datepicker.time_setting.time_interval.m": "分",

web/src/components/Overview/Detail/Metrics/index.js

@@ -15,7 +15,7 @@ import { formatMessage } from "umi/locale";
 import DatePicker from "@/common/src/DatePicker";
 import { getLocale } from "umi/locale";
 import { getTimezone } from "@/utils/utils";
-import { getAllTimeSettingsCache, TIME_SETTINGS_KEY } from "../../Monitor";
+import { getAllTimeSettingsCache, initState, TIME_SETTINGS_KEY } from "../../Monitor";
 
 const { TabPane } = Tabs;
 
@@ -33,37 +33,27 @@ export default (props) => {
   const allTimeSettingsCache = getAllTimeSettingsCache() || {}
 
   const [spinning, setSpinning] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useState(initState({
     timeRange: {
       min: "now-15m",
       max: "now",
-      timeFormatter: formatter.dates(1),
     },
     timeInterval: allTimeSettingsCache.timeInterval,
     timeout: allTimeSettingsCache.timeout || '10s',
-  });
+  }));
 
   const [refresh, setRefresh] = useState({ isRefreshPaused: allTimeSettingsCache.isRefreshPaused || false, refreshInterval: allTimeSettingsCache.refreshInterval || 30000 });
   const [timeZone, setTimeZone] = useState(() => allTimeSettingsCache.timeZone || getTimezone());
 
   const handleTimeChange = ({ start, end, timeInterval, timeout }) => {
-    const bounds = calculateBounds({
+    setState(initState({
-      from: start,
-      to: end,
-    });
-    const day = moment
-      .duration(bounds.max.valueOf() - bounds.min.valueOf())
-      .asDays();
-    const intDay = parseInt(day) + 1;
-    setState({
       timeRange: {
         min: start,
         max: end,
-        timeFormatter: formatter.dates(intDay),
       },
       timeInterval: timeInterval || state.timeInterval,
       timeout: timeout || state.timeout
-    });
+    }));
     setSpinning(true);
   };
 
@@ -115,6 +105,7 @@ export default (props) => {
             showTimeout={true}
             timeout={state.timeout}
             timeInterval={state.timeInterval}
+            timeIntervalDisabled={state.timeIntervalDisabled}
             onTimeSettingChange={(timeSetting) => {
               onTimeSettingsChange({
                 timeInterval: timeSetting.timeInterval,

web/src/components/Overview/Monitor/index.jsx

@@ -54,6 +54,36 @@ export const getAllTimeSettingsCache = () => {
   }
 }
 
+const getDuration = (from, to) => {
+  if (!from || !to) return;
+  const bounds = calculateBounds({
+    from,
+    to,
+  });
+  return bounds.max.valueOf() - bounds.min.valueOf()
+}
+
+export const initState = (state = {}) => {
+  const { timeRange, timeInterval, timeout } = state || {}
+  const from = timeRange?.min || "now-15m"
+  const to = timeRange?.max || "now"
+  const duration = getDuration(from, to);
+  const gtOneHour = moment.duration(duration).asHours() > 1
+  const day = moment.duration(duration).asDays();
+  const intDay = parseInt(day) + 1;
+  return {
+    ...state,
+    timeRange: {
+      min: from,
+      max: to,
+      timeFormatter: formatter.dates(intDay),
+    },
+    timeInterval: gtOneHour ? undefined : timeInterval,
+    timeIntervalDisabled: gtOneHour,
+    timeout: timeout || '10s',
+  }
+}
+
 const Monitor = (props) => {
   const {
     selectedCluster,
@@ -71,19 +101,16 @@ const Monitor = (props) => {
 
   const [spinning, setSpinning] = useState(false);
 
-  const [state, setState] = useState(
+  const [state, setState] = useState(formatState(initState({
-    formatState({
+    timeRange: {
-      timeRange: {
+      min: param?.timeRange?.min || "now-15m",
-        min: param?.timeRange?.min || "now-15m",
+      max: param?.timeRange?.max || "now",
-        max: param?.timeRange?.max || "now",
+    },
-        timeFormatter: formatter.dates(1),
+    timeInterval: formatTimeInterval(param?.timeInterval) || allTimeSettingsCache.timeInterval,
-      },
+    timeout: formatTimeout(param?.timeout)  || allTimeSettingsCache.timeout || '10s',
-      timeInterval: formatTimeInterval(param?.timeInterval) || allTimeSettingsCache.timeInterval,
+    param: param,
-      timeout: formatTimeout(param?.timeout)  || allTimeSettingsCache.timeout || '10s',
+    refresh: true,
-      param: param,
+  })));
-      refresh: true,
-    })
-  );
 
   const [refresh, setRefresh] = useState({ isRefreshPaused: typeof allTimeSettingsCache.isRefreshPaused !== 'undefined' ? allTimeSettingsCache.isRefreshPaused : true, refreshInterval: allTimeSettingsCache.refreshInterval || 30000 });
   const [timeZone, setTimeZone] = useState(() => allTimeSettingsCache.timeZone || getTimezone());
@@ -93,25 +120,16 @@ const Monitor = (props) => {
   }, [state.timeRange, state.timeInterval, state.timeout]);
 
   const handleTimeChange = useCallback(({ start, end, timeInterval, timeout, refresh }) => {
-    const bounds = calculateBounds({
+    setState(initState({
-      from: start,
-      to: end,
-    });
-    const day = moment
-      .duration(bounds.max.valueOf() - bounds.min.valueOf())
-      .asDays();
-    const intDay = parseInt(day) + 1;
-    setState({
       ...state,
       timeRange: {
         min: start,
         max: end,
-        timeFormatter: formatter.dates(intDay),
       },
       timeInterval: timeInterval || state.timeInterval,
       timeout: timeout || state.timeout,
       refresh
-    });
+    }));
   }, [state]) 
 
   const onInfoChange = (info) => {
@@ -163,6 +181,7 @@ const Monitor = (props) => {
                     showTimeSetting={true}
                     showTimeInterval={true}
                     timeInterval={state.timeInterval}
+                    timeIntervalDisabled={state.timeIntervalDisabled}
                     showTimeout={true}
                     timeout={state.timeout}
                     onTimeSettingChange={(timeSetting) => {

web/src/locales/en-US/error.js

@@ -1,5 +1,5 @@
 export default {
   "error.split": ", ",
   "error.unknown": "unknown error, please try again later or contact the support team!",
-  "error.request_timeout_error": "request timeout, please try again later or contact the support team!",
+  "error.request_timeout_error": "request timeout, please try again later!",
 };

web/src/locales/zh-CN/error.js

@@ -1,5 +1,5 @@
 export default {
   "error.split": "，",
   "error.unknown": "未知错误，请稍后重试或者联系支持团队！",
-  "error.request_timeout_error": "请求超时，请稍后重试或者联系支持团队！",
+  "error.request_timeout_error": "请求超时，请稍后重试！",
 }

web/src/pages/Platform/Overview/components/MetricChart.jsx

@@ -61,7 +61,6 @@ export default (props) => {
   
     const fetchData = async (queryParams, fetchUrl, metricKey, timeInterval, showLoading) => {
       if (!observerRef.current.isInView || !fetchUrl) return;
-      setError()
       if (firstFetchRef.current || showLoading) {
         setLoading(true)
       }
@@ -79,11 +78,12 @@ export default (props) => {
         ignoreTimeout: true
       }, false, false)
       if (res?.error) {
-        const error = formatResponse(res.error);
+        const error = formatResponse(res);
         setError(error?.errorObject?.key ? formatMessage({ id: `${error?.errorObject?.key}` }) : res?.error?.reason)
       } else if (res && !res.error) {
         const { metrics = {} } = res || {};
         const metric = metrics[metricKey]
+        setError()
         setMetric(formatMetric && metric ? formatMetric(metric) : metric);
       }
       if (firstFetchRef.current || showLoading) {