floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add timeout setting for datepicker (#4)

This commit is contained in:
Hardy 2024-12-05 18:12:51 +08:00 committed by GitHub
parent d002f94519
commit 4823339a01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 91 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@ -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",

58
web/src/common/src/DatePicker/TimeSetting.jsx
View File

@ -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,6 +118,40 @@ 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>

4
web/src/common/src/DatePicker/index.jsx
View File

@ -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}

4
web/src/common/src/DatePicker/index.md
View File

@ -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 |

1
web/src/common/src/DatePicker/locales/en-US.js
View File

@ -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",

1
web/src/common/src/DatePicker/locales/zh-CN.js
View File

@ -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": "刷新间隔",

2
web/src/components/ListView/components/DatePicker/index.jsx
View File

@ -51,6 +51,8 @@ export default (props) => {
timeFields: timeFields,
showTimeInterval: true,
timeInterval: "15s",
showTimeout: true,
timeout: "120s",
});
const [currentTimeZone, setCurrentTimeZone] = useState(timeZone);

28
web/src/components/Overview/Monitor/index.jsx
View File

@ -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}