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>
2025-02-06 08:52:28 +08:00 · 2025-02-06 08:52:28 +08:00 · 65704572aa
parent b189b72c11
commit 65704572aa
11 changed files with 72 additions and 45 deletions
--- a/web/src/common/src/DatePicker/TimeSetting.jsx
+++ b/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 && (
--- a/web/src/common/src/DatePicker/TimeSetting.less
+++ b/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 {
--- a/web/src/common/src/DatePicker/index.jsx
+++ b/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,
--- a/web/src/common/src/DatePicker/index.md
+++ b/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 |
--- a/web/src/common/src/DatePicker/locales/en-US.js
+++ b/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",
--- a/web/src/common/src/DatePicker/locales/zh-CN.js
+++ b/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": "分",
--- a/web/src/components/Overview/Detail/Metrics/index.js
+++ b/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({
-      from: start,
-      to: end,
-    });
-    const day = moment
-      .duration(bounds.max.valueOf() - bounds.min.valueOf())
-      .asDays();
-    const intDay = parseInt(day) + 1;
-    setState({
+    setState(initState({
      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,
--- a/web/src/components/Overview/Monitor/index.jsx
+++ b/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(
-    formatState({
-      timeRange: {
-        min: param?.timeRange?.min || "now-15m",
-        max: param?.timeRange?.max || "now",
-        timeFormatter: formatter.dates(1),
-      },
-      timeInterval: formatTimeInterval(param?.timeInterval) || allTimeSettingsCache.timeInterval,
-      timeout: formatTimeout(param?.timeout)  || allTimeSettingsCache.timeout || '10s',
-      param: param,
-      refresh: true,
-    })
-  );
+  const [state, setState] = useState(formatState(initState({
+    timeRange: {
+      min: param?.timeRange?.min || "now-15m",
+      max: param?.timeRange?.max || "now",
+    },
+    timeInterval: formatTimeInterval(param?.timeInterval) || allTimeSettingsCache.timeInterval,
+    timeout: formatTimeout(param?.timeout)  || allTimeSettingsCache.timeout || '10s',
+    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({
-      from: start,
-      to: end,
-    });
-    const day = moment
-      .duration(bounds.max.valueOf() - bounds.min.valueOf())
-      .asDays();
-    const intDay = parseInt(day) + 1;
-    setState({
+    setState(initState({
      ...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) => {
--- a/web/src/locales/en-US/error.js
+++ b/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!",
 };
--- a/web/src/locales/zh-CN/error.js
+++ b/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": "请求超时，请稍后重试！",
 }
--- a/web/src/pages/Platform/Overview/components/MetricChart.jsx
+++ b/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) {