feat: add timeout setting for datepicker (#4)

infinilabs · Dec 5, 2024 · 4823339 · 4823339
1 parent d002f94
commit 4823339
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 11 deletions.
diff --git a/web/package.json b/web/package.json
@@ -58,7 +58,7 @@
     "numeral": "^2.0.6",
     "nzh": "^1.0.3",
     "omit.js": "^1.0.0",
-    "path-to-regexp": "^2.4.0",
+    "path-to-regexp": "3.3.0",
     "pathfinding": "^0.4.18",
     "prop-types": "^15.5.10",
     "qs": "^6.5.2",

diff --git a/web/src/common/src/DatePicker/TimeSetting.jsx b/web/src/common/src/DatePicker/TimeSetting.jsx
@@ -14,16 +14,22 @@ const timeIntervals = [
   { label: 'Year', value: 'y' },
 ];
 
+const timeOuts = [
+  { label: 'Second', value: 's' },
+  { label: 'Minute', value: 'm' },
+];
+
 const TimeSetting = props => {
-  const { currentLocales, timeFields = [], showTimeField, showTimeInterval, onTimeSettingChange, onCancel } = props;
+  const { currentLocales, timeFields = [], showTimeField, showTimeInterval, showTimeout, onTimeSettingChange, onCancel } = props;
 
   const [isAuto, setIsAuto] = useState(!props.timeInterval)
   const [timeField, setTimeField] = useState(props.timeField);
   const [timeInterval, setTimeInterval] = useState(props.timeInterval);
+  const [timeout, setTimeout] =  useState(props.timeout);
   const timeIntervalCache = useRef('');
 
   const handleApply = () => {
-    onTimeSettingChange({ timeField, timeInterval });
+    onTimeSettingChange({ timeField, timeInterval, timeout });
     onCancel()
   };
 
@@ -36,6 +42,20 @@ const TimeSetting = props => {
     }
   }, [timeInterval])
 
+  const timeoutObject = useMemo(() => {
+    if (!timeout) {
+      return {
+        value: 120,
+        unit: 's',
+      }
+    }
+    const value = parseInt(timeout);
+    return {
+      value,
+      unit: timeout.replace(`${value}`, ''),
+    }
+  }, [timeout])
+
   return (
     <div className={styles.timeSetting}>
       <div className={styles.title}>{currentLocales[`datepicker.time_setting`]}</div>
@@ -98,11 +118,45 @@ const TimeSetting = props => {
           </div>
         </div>
       )}
+      {showTimeout && (
+        <div className={styles.formItem}>
+          <div className={styles.label}>
+            {currentLocales[`datepicker.time_setting.timeout`]}
+          </div>
+          <div className={styles.form}>
+            {
+              timeoutObject && (
+                <>
+                  <InputNumber
+                    min={60}
+                    value={timeoutObject.value}
+                    style={{ width: '100%' }}
+                    step={10}
+                    precision={0}
+                    onChange={(value) => {
+                      if (Number.isInteger(value)) {
+                        setTimeout(`${value}${timeoutObject.unit}`)
+                      }
+                    }}
+                  />
+                  <Select value={timeoutObject.unit} onChange={(value) => setTimeout(`${timeoutObject.value}${value}`)} style={{ width: '100%' }}>
+                    {timeOuts.map((item) => (
+                        <Select.Option key={item.value} value={item.value}>
+                          {currentLocales[`datepicker.time_setting.time_interval.${item.value}`]}
+                        </Select.Option>
+                      ))}
+                  </Select>
+                </>
+              )
+            }  
+          </div>
+        </div>
+      )}
       <div className={styles.apply}>
         <Apply currentLocales={currentLocales} onApply={handleApply} onCancel={onCancel} />
       </div>
     </div>
   );
 };
 
-export default TimeSetting;
+export default TimeSetting;
diff --git a/web/src/common/src/DatePicker/index.jsx b/web/src/common/src/DatePicker/index.jsx
@@ -87,6 +87,8 @@ const DatePicker = (props) => {
     timeFields = [],
     showTimeInterval = false,
     timeInterval,
+    showTimeout = false,
+    timeout,
     autoFitLoading = false,
     timeZone = "Asia/Shanghai",
     commonlyUsedRanges = DEFAULT_COMMONLY_USED_RANGES,
@@ -234,6 +236,8 @@ const DatePicker = (props) => {
           timeFields={timeFields}
           showTimeInterval={showTimeInterval}
           timeInterval={timeInterval}
+          showTimeout={showTimeout}
+          timeout={timeout}
           autoFitLoading={autoFitLoading}
           timeZone={timeZone}
           commonlyUsedRanges={commonlyUsedRanges}

diff --git a/web/src/common/src/DatePicker/index.md b/web/src/common/src/DatePicker/index.md
@@ -23,7 +23,9 @@
 | timeFields | 时间字段列表  | string[] | [] | 1.0.0 |
 | showTimeInterval | 是否显示时间间隔  | boolean | false | 1.0.0 |
 | timeInterval | 时间间隔  | string | - | 1.0.0 |
-| onTimeSettingChange | 时间配置变更的回调 | ({timeField: string, timeInterval: string}) => void | - | 1.0.0 |
+| showTimeout | 是否显示超时时间  | boolean | false | 1.0.0 |
+| timeout | 超时时间  | string | 120s | 1.0.0 |
+| onTimeSettingChange | 时间配置变更的回调 | ({timeField: string, timeInterval: string, timeout: string}) => void | - | 1.0.0 |
 | autoFitLoading | 自动适配时间载入状态  | boolean | false | 1.0.0 |
 | onAutoFit | 自动适配时间的回调 | () => void | - | 1.0.0 |
 | timeZone | 时区 | string | 'Asia/Shanghai' | 1.0.0 |

diff --git a/web/src/common/src/DatePicker/locales/en-US.js b/web/src/common/src/DatePicker/locales/en-US.js
@@ -29,6 +29,7 @@ export default {
   "datepicker.time_setting.time_interval.w": "Week",
   "datepicker.time_setting.time_interval.M": "Month",
   "datepicker.time_setting.time_interval.y": "Year",
+  "datepicker.time_setting.timeout": "Timeout",
   "datepicker.time_zone": "Time zone",
   "datepicker.time_zone.current": "Current time zone",
   "datepicker.refresh_every": "Refresh every",

diff --git a/web/src/common/src/DatePicker/locales/zh-CN.js b/web/src/common/src/DatePicker/locales/zh-CN.js
@@ -29,6 +29,7 @@ export default {
   "datepicker.time_setting.time_interval.w": "周",
   "datepicker.time_setting.time_interval.M": "月",
   "datepicker.time_setting.time_interval.y": "年",
+  "datepicker.time_setting.timeout": "超时时间",
   "datepicker.time_zone": "时区",
   "datepicker.time_zone.current": "当前时区",
   "datepicker.refresh_every": "刷新间隔",

diff --git a/web/src/components/ListView/components/DatePicker/index.jsx b/web/src/components/ListView/components/DatePicker/index.jsx
@@ -51,6 +51,8 @@ export default (props) => {
     timeFields: timeFields,
     showTimeInterval: true,
     timeInterval: "15s",
+    showTimeout: true,
+    timeout: "120s",
   });
 
   const [currentTimeZone, setCurrentTimeZone] = useState(timeZone);

diff --git a/web/src/components/Overview/Monitor/index.jsx b/web/src/components/Overview/Monitor/index.jsx
@@ -29,6 +29,16 @@ const formatTimeInterval = (timeInterval) => {
   return timeInterval
 }
 
+const formatTimeout = (timeout) => {
+  if (!timeout) return timeout
+  const value = parseInt(timeout)
+  if (!value) return undefined
+  if (!Number.isInteger(value)) return undefined
+  const unit = timeout.replace(`${value}`, '');
+  if (!['s', 'm'].includes(unit)) return undefined
+  return timeout
+}
+
 const Monitor = (props) => {
   const {
     formatState,
@@ -51,6 +61,7 @@ const Monitor = (props) => {
         timeFormatter: formatter.dates(1),
       },
       timeInterval: formatTimeInterval(param?.timeInterval),
+      timeout: formatTimeout(param?.timeout),
       param: param,
     })
   );
@@ -59,10 +70,10 @@ const Monitor = (props) => {
   const [timeZone, setTimeZone] = useState(() => getTimezone());
 
   useEffect(() => {
-    setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval });
-  }, [state.timeRange, state.timeInterval]);
+    setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval, timeout: state.timeout });
+  }, [state.timeRange, state.timeInterval, state.timeout]);
 
-  const handleTimeChange = useCallback(({ start, end, timeInterval }) => {
+  const handleTimeChange = useCallback(({ start, end, timeInterval, timeout }) => {
     const bounds = calculateBounds({
       from: start,
       to: end,
@@ -78,7 +89,8 @@ const Monitor = (props) => {
         max: end,
         timeFormatter: formatter.dates(intDay),
       },
-      timeInterval: timeInterval || state.timeInterval
+      timeInterval: timeInterval || state.timeInterval,
+      timeout: timeout || state.timeout
     });
     setSpinning(true);
   }, [state]) 
@@ -113,10 +125,13 @@ const Monitor = (props) => {
                 showTimeSetting={true}
                 showTimeInterval={true}
                 timeInterval={state.timeInterval}
+                showTimeout={true}
+                timeout={state.timeout}
                 onTimeSettingChange={(timeSetting) => {
                   setState({
                     ...state,
-                    timeInterval: timeSetting.timeInterval
+                    timeInterval: timeSetting.timeInterval,
+                    timeout: timeSetting.timeout
                   });
                 }}
                 timeZone={timeZone}
@@ -129,7 +144,7 @@ const Monitor = (props) => {
               icon={"reload"} 
               type="primary"
               onClick={() => {
-                handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max, timeInterval: state.timeInterval})
+                handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max, timeInterval: state.timeInterval, timeout: state.timeout})
               }}
             >
               {formatMessage({ id: "form.button.refresh"})}
@@ -168,6 +183,7 @@ const Monitor = (props) => {
                       setSpinning={setSpinning}
                       {...extraParams}
                       bucketSize={state.timeInterval}
+                      timeout={state.timeout}
                     />
                   )
                 ) : null}