From 2be782df774ce18ea70849fd88258e953d7dd957 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Wed, 3 Apr 2024 14:45:35 +0200 Subject: [PATCH] Various query page improvements Signed-off-by: Julius Volz --- .../mantine-ui/src/pages/query/DataTable.tsx | 14 +++- .../src/pages/query/ExpressionInput.tsx | 2 + .../mantine-ui/src/pages/query/QueryPage.tsx | 81 +++++++++---------- .../mantine-ui/src/pages/query/QueryPanel.tsx | 12 --- .../mantine-ui/src/pages/query/RangeInput.tsx | 17 ++-- .../mantine-ui/src/pages/query/TimeInput.tsx | 4 +- 6 files changed, 69 insertions(+), 61 deletions(-) diff --git a/web/ui/mantine-ui/src/pages/query/DataTable.tsx b/web/ui/mantine-ui/src/pages/query/DataTable.tsx index 2ebfe72628..7eda6c759a 100644 --- a/web/ui/mantine-ui/src/pages/query/DataTable.tsx +++ b/web/ui/mantine-ui/src/pages/query/DataTable.tsx @@ -9,6 +9,11 @@ import { import SeriesName from "./SeriesName"; import { useAPIQuery } from "../../api/api"; import classes from "./DataTable.module.css"; +import dayjs from "dayjs"; +import timezone from "dayjs/plugin/timezone"; +import { useAppSelector } from "../../state/hooks"; +import { formatTimestamp } from "../../lib/formatTime"; +dayjs.extend(timezone); const maxFormattableSeries = 1000; const maxDisplayableSeries = 10000; @@ -44,6 +49,8 @@ const DataTable: FC = ({ expr, evalTime, retriggerIdx }) => { expr !== "" && refetch(); }, [retriggerIdx, refetch, expr, evalTime]); + const useLocalTime = useAppSelector((state) => state.settings.useLocalTime); + // Show a skeleton only on the first load, not on subsequent ones. if (isLoading) { return ( @@ -118,7 +125,12 @@ const DataTable: FC = ({ expr, evalTime, retriggerIdx }) => { {s.values && s.values.map((v, idx) => (
- {v[1]} @ {v[0]} + {v[1]} @{" "} + { + + {v[0]} + + }
))} diff --git a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx index 3b1a9aecf6..320ec7efc2 100644 --- a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx +++ b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx @@ -189,6 +189,8 @@ const ExpressionInput: FC = ({ return ( + {/* TODO: For wrapped long lines, the input grows in width more and more, the + longer the line is. Figure out why and fix it. */} leftSection={ isFormatting ? : diff --git a/web/ui/mantine-ui/src/pages/query/QueryPage.tsx b/web/ui/mantine-ui/src/pages/query/QueryPage.tsx index cb2a75c217..0c155dfc5d 100644 --- a/web/ui/mantine-ui/src/pages/query/QueryPage.tsx +++ b/web/ui/mantine-ui/src/pages/query/QueryPage.tsx @@ -46,47 +46,46 @@ export default function QueryPage() { return ( - - {metricNamesError && ( - - } - color="red" - title="Error fetching metrics list" - withCloseButton - > - Unable to fetch list of metric names: {metricNamesError.message} - - )} - {timeError && ( - - } - color="red" - title="Error fetching server time" - withCloseButton - > - {timeError.message} - - )} - {timeDelta > 30 && ( - - } - onClose={() => setTimeDelta(0)} - > - Detected a time difference of{" "} - {humanizeDuration(timeDelta * 1000)} between your - browser and the server. You may see unexpected time-shifted query - results due to the time drift. - - )} - + {metricNamesError && ( + + } + color="red" + title="Error fetching metrics list" + withCloseButton + > + Unable to fetch list of metric names: {metricNamesError.message} + + )} + {timeError && ( + + } + color="red" + title="Error fetching server time" + withCloseButton + > + {timeError.message} + + )} + {timeDelta > 30 && ( + } + onClose={() => setTimeDelta(0)} + > + Detected a time difference of{" "} + {humanizeDuration(timeDelta * 1000)} between your + browser and the server. You may see unexpected time-shifted query + results due to the time drift. + + )} {panels.map((p, idx) => ( diff --git a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx index 3319d2eb65..439c1f29e4 100644 --- a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx +++ b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx @@ -214,18 +214,6 @@ const QueryPanel: FC = ({ idx, metricNames }) => { /> - {/* Link button to remove this panel. */} - {/* - - */} ); }; diff --git a/web/ui/mantine-ui/src/pages/query/RangeInput.tsx b/web/ui/mantine-ui/src/pages/query/RangeInput.tsx index d92dec9470..79e4b34cbc 100644 --- a/web/ui/mantine-ui/src/pages/query/RangeInput.tsx +++ b/web/ui/mantine-ui/src/pages/query/RangeInput.tsx @@ -1,7 +1,10 @@ import { FC, useState } from "react"; import { ActionIcon, Group, Input } from "@mantine/core"; import { IconMinus, IconPlus } from "@tabler/icons-react"; -import { formatDuration, parseDuration } from "../../lib/formatTime"; +import { + formatPrometheusDuration, + parsePrometheusDuration, +} from "../../lib/formatTime"; interface RangeInputProps { range: number; @@ -36,12 +39,14 @@ const rangeSteps = [ const RangeInput: FC = ({ range, onChangeRange }) => { // TODO: Make sure that when "range" changes externally (like via the URL), // the input is updated, either via useEffect() or some better architecture. - const [rangeInput, setRangeInput] = useState(formatDuration(range)); + const [rangeInput, setRangeInput] = useState( + formatPrometheusDuration(range) + ); const onChangeRangeInput = (rangeText: string): void => { - const newRange = parseDuration(rangeText); + const newRange = parsePrometheusDuration(rangeText); if (newRange === null) { - setRangeInput(formatDuration(range)); + setRangeInput(formatPrometheusDuration(range)); } else { onChangeRange(newRange); } @@ -50,7 +55,7 @@ const RangeInput: FC = ({ range, onChangeRange }) => { const increaseRange = (): void => { for (const step of rangeSteps) { if (range < step) { - setRangeInput(formatDuration(step)); + setRangeInput(formatPrometheusDuration(step)); onChangeRange(step); return; } @@ -60,7 +65,7 @@ const RangeInput: FC = ({ range, onChangeRange }) => { const decreaseRange = (): void => { for (const step of rangeSteps.slice().reverse()) { if (range > step) { - setRangeInput(formatDuration(step)); + setRangeInput(formatPrometheusDuration(step)); onChangeRange(step); return; } diff --git a/web/ui/mantine-ui/src/pages/query/TimeInput.tsx b/web/ui/mantine-ui/src/pages/query/TimeInput.tsx index cc332c02bf..a5ac8305a7 100644 --- a/web/ui/mantine-ui/src/pages/query/TimeInput.tsx +++ b/web/ui/mantine-ui/src/pages/query/TimeInput.tsx @@ -2,6 +2,7 @@ import { Group, ActionIcon, CloseButton } from "@mantine/core"; import { DatesProvider, DateTimePicker } from "@mantine/dates"; import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; import { FC } from "react"; +import { useAppSelector } from "../../state/hooks"; interface TimeInputProps { time: number | null; // Timestamp in milliseconds. @@ -19,10 +20,11 @@ const TimeInput: FC = ({ onChangeTime, }) => { const baseTime = () => (time !== null ? time : Date.now().valueOf()); + const useLocalTime = useAppSelector((state) => state.settings.useLocalTime); return ( - +