Skip to content

Commit 4823339

Browse files
luohoufuluohoufu
authored
feat: add timeout setting for datepicker (#4)
1 parent d002f94 commit 4823339

File tree

8 files changed

+91
-11
lines changed

8 files changed

+91
-11
lines changed

‎web/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"numeral": "^2.0.6",
5959
"nzh": "^1.0.3",
6060
"omit.js": "^1.0.0",
61-
"path-to-regexp": "^2.4.0",
61+
"path-to-regexp": "3.3.0",
6262
"pathfinding": "^0.4.18",
6363
"prop-types": "^15.5.10",
6464
"qs": "^6.5.2",

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

+57-3
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,22 @@ const timeIntervals = [
1414
{ label: 'Year', value: 'y' },
1515
];
1616

17+
const timeOuts = [
18+
{ label: 'Second', value: 's' },
19+
{ label: 'Minute', value: 'm' },
20+
];
21+
1722
const TimeSetting = props => {
18-
const { currentLocales, timeFields = [], showTimeField, showTimeInterval, onTimeSettingChange, onCancel } = props;
23+
const { currentLocales, timeFields = [], showTimeField, showTimeInterval, showTimeout, onTimeSettingChange, onCancel } = props;
1924

2025
const [isAuto, setIsAuto] = useState(!props.timeInterval)
2126
const [timeField, setTimeField] = useState(props.timeField);
2227
const [timeInterval, setTimeInterval] = useState(props.timeInterval);
28+
const [timeout, setTimeout] = useState(props.timeout);
2329
const timeIntervalCache = useRef('');
2430

2531
const handleApply = () => {
26-
onTimeSettingChange({ timeField, timeInterval });
32+
onTimeSettingChange({ timeField, timeInterval, timeout });
2733
onCancel()
2834
};
2935

@@ -36,6 +42,20 @@ const TimeSetting = props => {
3642
}
3743
}, [timeInterval])
3844

45+
const timeoutObject = useMemo(() => {
46+
if (!timeout) {
47+
return {
48+
value: 120,
49+
unit: 's',
50+
}
51+
}
52+
const value = parseInt(timeout);
53+
return {
54+
value,
55+
unit: timeout.replace(`${value}`, ''),
56+
}
57+
}, [timeout])
58+
3959
return (
4060
<div className={styles.timeSetting}>
4161
<div className={styles.title}>{currentLocales[`datepicker.time_setting`]}</div>
@@ -98,11 +118,45 @@ const TimeSetting = props => {
98118
</div>
99119
</div>
100120
)}
121+
{showTimeout && (
122+
<div className={styles.formItem}>
123+
<div className={styles.label}>
124+
{currentLocales[`datepicker.time_setting.timeout`]}
125+
</div>
126+
<div className={styles.form}>
127+
{
128+
timeoutObject && (
129+
<>
130+
<InputNumber
131+
min={60}
132+
value={timeoutObject.value}
133+
style={{ width: '100%' }}
134+
step={10}
135+
precision={0}
136+
onChange={(value) => {
137+
if (Number.isInteger(value)) {
138+
setTimeout(`${value}${timeoutObject.unit}`)
139+
}
140+
}}
141+
/>
142+
<Select value={timeoutObject.unit} onChange={(value) => setTimeout(`${timeoutObject.value}${value}`)} style={{ width: '100%' }}>
143+
{timeOuts.map((item) => (
144+
<Select.Option key={item.value} value={item.value}>
145+
{currentLocales[`datepicker.time_setting.time_interval.${item.value}`]}
146+
</Select.Option>
147+
))}
148+
</Select>
149+
</>
150+
)
151+
}
152+
</div>
153+
</div>
154+
)}
101155
<div className={styles.apply}>
102156
<Apply currentLocales={currentLocales} onApply={handleApply} onCancel={onCancel} />
103157
</div>
104158
</div>
105159
);
106160
};
107161

108-
export default TimeSetting;
162+
export default TimeSetting;

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

+4
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ const DatePicker = (props) => {
8787
timeFields = [],
8888
showTimeInterval = false,
8989
timeInterval,
90+
showTimeout = false,
91+
timeout,
9092
autoFitLoading = false,
9193
timeZone = "Asia/Shanghai",
9294
commonlyUsedRanges = DEFAULT_COMMONLY_USED_RANGES,
@@ -234,6 +236,8 @@ const DatePicker = (props) => {
234236
timeFields={timeFields}
235237
showTimeInterval={showTimeInterval}
236238
timeInterval={timeInterval}
239+
showTimeout={showTimeout}
240+
timeout={timeout}
237241
autoFitLoading={autoFitLoading}
238242
timeZone={timeZone}
239243
commonlyUsedRanges={commonlyUsedRanges}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@
2323
| timeFields | 时间字段列表 | string[] | [] | 1.0.0 |
2424
| showTimeInterval | 是否显示时间间隔 | boolean | false | 1.0.0 |
2525
| timeInterval | 时间间隔 | string | - | 1.0.0 |
26-
| onTimeSettingChange | 时间配置变更的回调 | ({timeField: string, timeInterval: string}) => void | - | 1.0.0 |
26+
| showTimeout | 是否显示超时时间 | boolean | false | 1.0.0 |
27+
| timeout | 超时时间 | string | 120s | 1.0.0 |
28+
| onTimeSettingChange | 时间配置变更的回调 | ({timeField: string, timeInterval: string, timeout: string}) => void | - | 1.0.0 |
2729
| autoFitLoading | 自动适配时间载入状态 | boolean | false | 1.0.0 |
2830
| onAutoFit | 自动适配时间的回调 | () => void | - | 1.0.0 |
2931
| timeZone | 时区 | string | 'Asia/Shanghai' | 1.0.0 |

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

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default {
2929
"datepicker.time_setting.time_interval.w": "Week",
3030
"datepicker.time_setting.time_interval.M": "Month",
3131
"datepicker.time_setting.time_interval.y": "Year",
32+
"datepicker.time_setting.timeout": "Timeout",
3233
"datepicker.time_zone": "Time zone",
3334
"datepicker.time_zone.current": "Current time zone",
3435
"datepicker.refresh_every": "Refresh every",

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

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default {
2929
"datepicker.time_setting.time_interval.w": "周",
3030
"datepicker.time_setting.time_interval.M": "月",
3131
"datepicker.time_setting.time_interval.y": "年",
32+
"datepicker.time_setting.timeout": "超时时间",
3233
"datepicker.time_zone": "时区",
3334
"datepicker.time_zone.current": "当前时区",
3435
"datepicker.refresh_every": "刷新间隔",

‎web/src/components/ListView/components/DatePicker/index.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ export default (props) => {
5151
timeFields: timeFields,
5252
showTimeInterval: true,
5353
timeInterval: "15s",
54+
showTimeout: true,
55+
timeout: "120s",
5456
});
5557

5658
const [currentTimeZone, setCurrentTimeZone] = useState(timeZone);

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

+22-6
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ const formatTimeInterval = (timeInterval) => {
2929
return timeInterval
3030
}
3131

32+
const formatTimeout = (timeout) => {
33+
if (!timeout) return timeout
34+
const value = parseInt(timeout)
35+
if (!value) return undefined
36+
if (!Number.isInteger(value)) return undefined
37+
const unit = timeout.replace(`${value}`, '');
38+
if (!['s', 'm'].includes(unit)) return undefined
39+
return timeout
40+
}
41+
3242
const Monitor = (props) => {
3343
const {
3444
formatState,
@@ -51,6 +61,7 @@ const Monitor = (props) => {
5161
timeFormatter: formatter.dates(1),
5262
},
5363
timeInterval: formatTimeInterval(param?.timeInterval),
64+
timeout: formatTimeout(param?.timeout),
5465
param: param,
5566
})
5667
);
@@ -59,10 +70,10 @@ const Monitor = (props) => {
5970
const [timeZone, setTimeZone] = useState(() => getTimezone());
6071

6172
useEffect(() => {
62-
setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval });
63-
}, [state.timeRange, state.timeInterval]);
73+
setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval, timeout: state.timeout });
74+
}, [state.timeRange, state.timeInterval, state.timeout]);
6475

65-
const handleTimeChange = useCallback(({ start, end, timeInterval }) => {
76+
const handleTimeChange = useCallback(({ start, end, timeInterval, timeout }) => {
6677
const bounds = calculateBounds({
6778
from: start,
6879
to: end,
@@ -78,7 +89,8 @@ const Monitor = (props) => {
7889
max: end,
7990
timeFormatter: formatter.dates(intDay),
8091
},
81-
timeInterval: timeInterval || state.timeInterval
92+
timeInterval: timeInterval || state.timeInterval,
93+
timeout: timeout || state.timeout
8294
});
8395
setSpinning(true);
8496
}, [state])
@@ -113,10 +125,13 @@ const Monitor = (props) => {
113125
showTimeSetting={true}
114126
showTimeInterval={true}
115127
timeInterval={state.timeInterval}
128+
showTimeout={true}
129+
timeout={state.timeout}
116130
onTimeSettingChange={(timeSetting) => {
117131
setState({
118132
...state,
119-
timeInterval: timeSetting.timeInterval
133+
timeInterval: timeSetting.timeInterval,
134+
timeout: timeSetting.timeout
120135
});
121136
}}
122137
timeZone={timeZone}
@@ -129,7 +144,7 @@ const Monitor = (props) => {
129144
icon={"reload"}
130145
type="primary"
131146
onClick={() => {
132-
handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max, timeInterval: state.timeInterval})
147+
handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max, timeInterval: state.timeInterval, timeout: state.timeout})
133148
}}
134149
>
135150
{formatMessage({ id: "form.button.refresh"})}
@@ -168,6 +183,7 @@ const Monitor = (props) => {
168183
setSpinning={setSpinning}
169184
{...extraParams}
170185
bucketSize={state.timeInterval}
186+
timeout={state.timeout}
171187
/>
172188
)
173189
) : null}

0 commit comments

Comments
 (0)