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>
This commit is contained in:
yaojp123 2025-02-06 08:52:28 +08:00 committed by GitHub
parent b189b72c11
commit 65704572aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 72 additions and 45 deletions

View File

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

View File

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

View File

@ -87,6 +87,7 @@ const DatePicker = (props) => {
timeFields = [],
showTimeInterval = false,
timeInterval,
timeIntervalDisabled = false,
showTimeout = false,
timeout,
autoFitLoading = false,

View File

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

View File

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

View File

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

View File

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

View File

@ -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) => {

View File

@ -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!",
};

View File

@ -1,5 +1,5 @@
export default {
"error.split": "",
"error.unknown": "未知错误,请稍后重试或者联系支持团队!",
"error.request_timeout_error": "请求超时,请稍后重试或者联系支持团队",
"error.request_timeout_error": "请求超时,请稍后重试",
}

View File

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