go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-10-26 08:16:10 +08:00
Code Issues Projects Releases Wiki Activity

(ui): Do not append endtime URL param if realtime option is selected

Browse Source
This commit is contained in:
Ken Hibino
2021-12-13 16:30:09 -08:00
parent fcd9708f0a
commit b3622c40da
2 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/components/MetricsFetchControls.tsx
View File

@@ -27,11 +27,11 @@ type ReduxProps = ConnectedProps<typeof connector>;
interface Props extends ReduxProps { interface Props extends ReduxProps {
// Specifies the endtime in Unix time seconds. // Specifies the endtime in Unix time seconds.
endTimeSec: number; endTimeSec: number;
onEndTimeChange: (t: number) => void; onEndTimeChange: (t: number, isEndTimeFixed: boolean) => void;
// Specifies the duration in seconds. // Specifies the duration in seconds.
durationSec: number; durationSec: number;
onDurationChange: (d: number) => void; onDurationChange: (d: number, isEndTimeFixed: boolean) => void;
} }
interface State { interface State {
@@ -198,10 +198,10 @@ function MetricsFetchControls(props: Props) {
})); }));
switch (selectedOpt) { switch (selectedOpt) {
case "real_time": case "real_time":
props.onEndTimeChange(currentUnixtime()); props.onEndTimeChange(currentUnixtime(), /*isEndTimeFixed=*/ false);
break; break;
case "freeze_at_now": case "freeze_at_now":
props.onEndTimeChange(currentUnixtime()); props.onEndTimeChange(currentUnixtime(), /*isEndTimeFixed=*/ true);
break; break;
case "custom": case "custom":
// No-op // No-op
@@ -219,21 +219,22 @@ function MetricsFetchControls(props: Props) {
customDuration: "", customDuration: "",
customDurationError: "", customDurationError: "",
})); }));
const isEndTimeFixed = state.endTimeOption !== "real_time";
switch (selectedOpt) { switch (selectedOpt) {
case "1h": case "1h":
props.onDurationChange(1 * hour); props.onDurationChange(1 * hour, isEndTimeFixed);
break; break;
case "6h": case "6h":
props.onDurationChange(6 * hour); props.onDurationChange(6 * hour, isEndTimeFixed);
break; break;
case "1d": case "1d":
props.onDurationChange(1 * day); props.onDurationChange(1 * day, isEndTimeFixed);
break; break;
case "8d": case "8d":
props.onDurationChange(8 * day); props.onDurationChange(8 * day, isEndTimeFixed);
break; break;
case "30d": case "30d":
props.onDurationChange(30 * day); props.onDurationChange(30 * day, isEndTimeFixed);
break; break;
case "custom": case "custom":
// No-op // No-op
@@ -271,7 +272,7 @@ function MetricsFetchControls(props: Props) {
durationOption: "custom", durationOption: "custom",
customDurationError: "", customDurationError: "",
})); }));
props.onDurationChange(d); props.onDurationChange(d, state.endTimeOption !== "real_time");
} catch (error) { } catch (error) {
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
@@ -298,7 +299,10 @@ function MetricsFetchControls(props: Props) {
endTimeOption: "custom", endTimeOption: "custom",
customEndTimeError: "", customEndTimeError: "",
})); }));
props.onEndTimeChange(Math.floor(timeUsecOrNaN / 1000)); props.onEndTimeChange(
Math.floor(timeUsecOrNaN / 1000),
/* isEndTimeFixed= */ true
);
} }
}; };
@@ -316,7 +320,7 @@ function MetricsFetchControls(props: Props) {
React.useEffect(() => { React.useEffect(() => {
if (state.endTimeOption === "real_time") { if (state.endTimeOption === "real_time") {
const id = setInterval(() => { const id = setInterval(() => {
props.onEndTimeChange(currentUnixtime()); props.onEndTimeChange(currentUnixtime(), /*isEndTimeFixed=*/ false);
}, props.pollInterval * 1000); }, props.pollInterval * 1000);
return () => clearInterval(id); return () => clearInterval(id);
} }
@@ -332,7 +336,7 @@ function MetricsFetchControls(props: Props) {
customEndTime: "", customEndTime: "",
endTimeOption: "real_time", endTimeOption: "real_time",
})); }));
props.onEndTimeChange(now); props.onEndTimeChange(now, /*isEndTimeFixed=*/ false);
return; return;
} }
setState((prevState) => ({ setState((prevState) => ({
@@ -340,7 +344,7 @@ function MetricsFetchControls(props: Props) {
endTimeOption: "custom", endTimeOption: "custom",
customEndTime: new Date(endTime * 1000).toISOString(), customEndTime: new Date(endTime * 1000).toISOString(),
})); }));
props.onEndTimeChange(endTime); props.onEndTimeChange(endTime, /*isEndTimeFixed=*/ true);
}; };
}; };

28
ui/src/views/MetricsView.tsx
View File

@@ -70,11 +70,15 @@ function MetricsView(props: Props) {
const [endTimeSec, setEndTimeSec] = React.useState(endTime); const [endTimeSec, setEndTimeSec] = React.useState(endTime);
const [durationSec, setDurationSec] = React.useState(duration); const [durationSec, setDurationSec] = React.useState(duration);
const handleEndTimeChange = (endTime: number) => { const handleEndTimeChange = (endTime: number, isEndTimeFixed: boolean) => {
const urlQuery = { const urlQuery = isEndTimeFixed
[ENDTIME_URL_PARAM_KEY]: endTime, ? {
[DURATION_URL_PARAM_KEY]: durationSec, [ENDTIME_URL_PARAM_KEY]: endTime,
}; [DURATION_URL_PARAM_KEY]: durationSec,
}
: {
[DURATION_URL_PARAM_KEY]: durationSec,
};
history.push({ history.push({
...history.location, ...history.location,
search: queryString.stringify(urlQuery), search: queryString.stringify(urlQuery),
@@ -82,11 +86,15 @@ function MetricsView(props: Props) {
setEndTimeSec(endTime); setEndTimeSec(endTime);
}; };
const handleDurationChange = (duration: number) => { const handleDurationChange = (duration: number, isEndTimeFixed: boolean) => {
const urlQuery = { const urlQuery = isEndTimeFixed
[ENDTIME_URL_PARAM_KEY]: endTimeSec, ? {
[DURATION_URL_PARAM_KEY]: duration, [ENDTIME_URL_PARAM_KEY]: endTimeSec,
}; [DURATION_URL_PARAM_KEY]: duration,
}
: {
[DURATION_URL_PARAM_KEY]: duration,
};
history.push({ history.push({
...history.location, ...history.location,
search: queryString.stringify(urlQuery), search: queryString.stringify(urlQuery),