From 4823339a0140ba40f2f7e6de5c79cb390f230595 Mon Sep 17 00:00:00 2001 From: Hardy Date: Thu, 5 Dec 2024 18:12:51 +0800 Subject: [PATCH] feat: add timeout setting for datepicker (#4) --- web/package.json | 2 +- web/src/common/src/DatePicker/TimeSetting.jsx | 60 ++++++++++++++++++- web/src/common/src/DatePicker/index.jsx | 4 ++ web/src/common/src/DatePicker/index.md | 4 +- .../common/src/DatePicker/locales/en-US.js | 1 + .../common/src/DatePicker/locales/zh-CN.js | 1 + .../ListView/components/DatePicker/index.jsx | 2 + web/src/components/Overview/Monitor/index.jsx | 28 +++++++-- 8 files changed, 91 insertions(+), 11 deletions(-) diff --git a/web/package.json b/web/package.json index 16cbc3ea..2082e77a 100644 --- 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 index 31f9e204..5401ff75 100644 --- 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 (
{currentLocales[`datepicker.time_setting`]}
@@ -98,6 +118,40 @@ const TimeSetting = props => {
)} + {showTimeout && ( +
+
+ {currentLocales[`datepicker.time_setting.timeout`]} +
+
+ { + timeoutObject && ( + <> + { + if (Number.isInteger(value)) { + setTimeout(`${value}${timeoutObject.unit}`) + } + }} + /> + + + ) + } +
+
+ )}
@@ -105,4 +159,4 @@ const TimeSetting = props => { ); }; -export default TimeSetting; +export default TimeSetting; \ No newline at end of file diff --git a/web/src/common/src/DatePicker/index.jsx b/web/src/common/src/DatePicker/index.jsx index ae883a0e..95f01954 100644 --- 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 index e56b0907..424e6680 100644 --- 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 index 7b04f0c5..817f52a5 100644 --- 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 index 778a29ee..2eca598a 100644 --- 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 index 31557093..5a7dcebe 100644 --- 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 index 135dc46e..445d42f9 100644 --- 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}