mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-12 14:27: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

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

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

51
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 { DatesProvider, DateTimePicker } from "@mantine/dates";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { FC } from "react"; import { FC } from "react";
@ -22,21 +22,12 @@ const TimeInput: FC<TimeInputProps> = ({
return ( return (
<Group gap={5}> <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" }}> <DatesProvider settings={{ timezone: "UTC" }}>
<DateTimePicker <DateTimePicker
w={180} w={230}
valueFormat="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
withSeconds withSeconds
clearable // clearable
value={time !== null ? new Date(time) : undefined} value={time !== null ? new Date(time) : undefined}
onChange={(value) => onChangeTime(value ? value.getTime() : null)} onChange={(value) => onChangeTime(value ? value.getTime() : null)}
aria-label={description} aria-label={description}
@ -46,17 +37,47 @@ const TimeInput: FC<TimeInputProps> = ({
onChangeTime(baseTime()); onChangeTime(baseTime());
} }
}} }}
/> leftSection={
</DatesProvider>
<ActionIcon <ActionIcon
size="lg" size="lg"
variant="subtle" 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" title="Increase time"
aria-label="Increase time" aria-label="Increase time"
onClick={() => onChangeTime(baseTime() + range / 2)} onClick={() => onChangeTime(baseTime() + range / 2)}
> >
<IconChevronRight style={iconStyle} /> <IconChevronRight style={iconStyle} />
</ActionIcon> </ActionIcon>
</>
}
/>
</DatesProvider>
</Group> </Group>
); );
}; };