diff --git a/ui/src/views/MetricsView.tsx b/ui/src/views/MetricsView.tsx index d9863f6..c149a35 100644 --- a/ui/src/views/MetricsView.tsx +++ b/ui/src/views/MetricsView.tsx @@ -79,8 +79,10 @@ function MetricsView(props: Props) { const [endTimeSec, setEndTimeSec] = React.useState(currentUnixtime()); const [durationOption, setDurationOption] = React.useState("1h"); const [durationSec, setDurationSec] = React.useState(60 * 60); // 1h - const [customDuration, setCustomDuration] = React.useState(""); + const [customDuration, setCustomDuration] = React.useState(""); // text shown in the input field const [customDurationError, setCustomDurationError] = React.useState(""); + const [customEndTime, setCustomEndTime] = React.useState(""); // text shown in the input field + const [customEndTimeError, setCustomEndTimeError] = React.useState(""); const handleEndTimeOptionChange = ( event: React.ChangeEvent @@ -90,12 +92,16 @@ function MetricsView(props: Props) { switch (selected) { case "real_time": setEndTimeSec(currentUnixtime()); + setCustomEndTime(""); + setCustomDurationError(""); break; case "freeze_at_now": setEndTimeSec(currentUnixtime()); + setCustomEndTime(""); + setCustomDurationError(""); break; case "custom": - // TODO: + // No-op } }; @@ -141,6 +147,12 @@ function MetricsView(props: Props) { setCustomDuration(event.target.value); }; + const handleCustomEndTimeChange = ( + event: React.ChangeEvent + ) => { + setCustomEndTime(event.target.value); + }; + const handleCustomDurationKeyDown = ( event: React.KeyboardEvent ) => { @@ -156,6 +168,21 @@ function MetricsView(props: Props) { } }; + const handleCustomEndTimeKeyDown = ( + event: React.KeyboardEvent + ) => { + if (event.key === "Enter") { + const timeUsecOrNaN = Date.parse(customEndTime); + if (isNaN(timeUsecOrNaN)) { + setCustomEndTimeError("End time invalid"); + return; + } + setEndTimeOption("custom"); + setEndTimeSec(Math.floor(timeUsecOrNaN / 1000)); + setCustomEndTimeError(""); + } + }; + const handleButtonClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; @@ -273,6 +300,11 @@ function MetricsView(props: Props) { label="yyyy-mm-dd hh:mm:ssz" variant="outlined" size="small" + onChange={handleCustomEndTimeChange} + value={customEndTime} + onKeyDown={handleCustomEndTimeKeyDown} + error={customEndTimeError !== ""} + helperText={customEndTimeError} />