mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-12 06:17:27 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Make time and range input controls prettier

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-03-08 16:01:41 +01:00
parent 2b12ff7ce8
commit d5a1e71f6c
2 changed files with 67 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
web/ui/mantine-ui/src/pages/query/RangeInput.tsx
View file

@ -69,14 +69,6 @@ const RangeInput: FC<RangeInputProps> = ({ range, onChangeRange }) => {
return (
<Group gap={5}>
<ActionIcon
size="lg"
variant="subtle"
aria-label="Decrease range"
onClick={decreaseRange}
>
<IconMinus style={iconStyle} />
</ActionIcon>
<Input
value={rangeInput}
onChange={(event) => setRangeInput(event.currentTarget.value)}
@ -85,16 +77,32 @@ const RangeInput: FC<RangeInputProps> = ({ range, onChangeRange }) => {
event.key === "Enter" && onChangeRangeInput(rangeInput)
}
aria-label="Range"
style={{ width: rangeInput.length + 3 + "ch" }}
style={{ width: `calc(43px + ${rangeInput.length + 3}ch)` }}
leftSection={
<ActionIcon
size="lg"
variant="transparent"
color="gray"
aria-label="Decrease range"
onClick={decreaseRange}
>
<IconMinus style={iconStyle} />
</ActionIcon>
}
rightSection={
<ActionIcon
size="lg"
variant="transparent"
color="gray"
aria-label="Increase range"
onClick={increaseRange}
>
<IconPlus style={iconStyle} />
</ActionIcon>
}
leftSectionPointerEvents="all"
rightSectionPointerEvents="all"
/>
<ActionIcon
size="lg"
variant="subtle"
aria-label="Increase range"
onClick={increaseRange}
>
<IconPlus style={iconStyle} />
</ActionIcon>
</Group>
);
};

63
web/ui/mantine-ui/src/pages/query/TimeInput.tsx
View file

@ -1,4 +1,4 @@
import { Group, ActionIcon } from "@mantine/core";
import { Group, ActionIcon, CloseButton } from "@mantine/core";
import { DatesProvider, DateTimePicker } from "@mantine/dates";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { FC } from "react";
@ -22,21 +22,12 @@ const TimeInput: FC<TimeInputProps> = ({
return (
<Group gap={5}>
<ActionIcon
size="lg"
variant="subtle"
title="Decrease time"
aria-label="Decrease time"
onClick={() => onChangeTime(baseTime() - range / 2)}
>
<IconChevronLeft style={iconStyle} />
</ActionIcon>
<DatesProvider settings={{ timezone: "UTC" }}>
<DateTimePicker
w={180}
w={230}
valueFormat="YYYY-MM-DD HH:mm:ss"
withSeconds
clearable
// clearable
value={time !== null ? new Date(time) : undefined}
onChange={(value) => onChangeTime(value ? value.getTime() : null)}
aria-label={description}
@ -46,17 +37,47 @@ const TimeInput: FC<TimeInputProps> = ({
onChangeTime(baseTime());
}
}}
leftSection={
<ActionIcon
size="lg"
color="gray"
variant="transparent"
title="Decrease time"
aria-label="Decrease time"
onClick={() => onChangeTime(baseTime() - range / 2)}
>
<IconChevronLeft style={iconStyle} />
</ActionIcon>
}
styles={{ section: { width: "unset" } }}
rightSection={
<>
{time && (
<CloseButton
variant="transparent"
color="gray"
onMouseDown={(event) => event.preventDefault()}
tabIndex={-1}
onClick={() => {
onChangeTime(null);
}}
size="xs"
/>
)}
<ActionIcon
size="lg"
color="gray"
variant="transparent"
title="Increase time"
aria-label="Increase time"
onClick={() => onChangeTime(baseTime() + range / 2)}
>
<IconChevronRight style={iconStyle} />
</ActionIcon>
</>
}
/>
</DatesProvider>
<ActionIcon
size="lg"
variant="subtle"
title="Increase time"
aria-label="Increase time"
onClick={() => onChangeTime(baseTime() + range / 2)}
>
<IconChevronRight style={iconStyle} />
</ActionIcon>
</Group>
);
};