From 1049c90cb5e3d05a4c480b5ff05abe92374bb3d7 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Tue, 9 Apr 2024 12:36:53 +0200 Subject: [PATCH] Clean up file hierarchy a bit, add some more comments Signed-off-by: Julius Volz --- web/ui/mantine-ui/src/App.tsx | 6 +++--- web/ui/mantine-ui/src/api/responseTypes/config.ts | 2 ++ web/ui/mantine-ui/src/api/responseTypes/labelValues.ts | 2 ++ web/ui/mantine-ui/src/api/responseTypes/query.ts | 2 ++ web/ui/mantine-ui/src/api/responseTypes/rules.ts | 8 ++++++-- web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts | 1 + web/ui/mantine-ui/src/api/responseTypes/targets.ts | 2 ++ web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts | 4 +++- .../src/{ => components}/CustomInfiniteScroll.tsx | 0 .../mantine-ui/src/{ => components}/EndpointLink.tsx | 0 .../mantine-ui/src/{ => components}/ErrorBoundary.tsx | 0 web/ui/mantine-ui/src/{ => components}/LabelBadges.tsx | 4 ++-- .../RuleDefinition.module.css} | 0 .../mantine-ui/src/{ => components}/RuleDefinition.tsx | 8 ++++---- .../mantine-ui/src/{ => components}/SettingsMenu.tsx | 4 ++-- .../src/{ => components}/StateMultiSelect.tsx | 0 .../mantine-ui/src/{ => components}/ThemeSelector.tsx | 0 web/ui/mantine-ui/src/lib/escapeString.ts | 1 + web/ui/mantine-ui/src/lib/formatTime.ts | 2 ++ web/ui/mantine-ui/src/pages/AlertsPage.tsx | 10 +++++----- web/ui/mantine-ui/src/pages/RulesPage.tsx | 6 +++--- web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx | 4 ++-- web/ui/mantine-ui/src/pages/TargetsPage.tsx | 8 ++++---- web/ui/mantine-ui/src/state/hooks.ts | 2 +- 24 files changed, 47 insertions(+), 29 deletions(-) rename web/ui/mantine-ui/src/{ => components}/CustomInfiniteScroll.tsx (100%) rename web/ui/mantine-ui/src/{ => components}/EndpointLink.tsx (100%) rename web/ui/mantine-ui/src/{ => components}/ErrorBoundary.tsx (100%) rename web/ui/mantine-ui/src/{ => components}/LabelBadges.tsx (88%) rename web/ui/mantine-ui/src/{codebox.module.css => components/RuleDefinition.module.css} (100%) rename web/ui/mantine-ui/src/{ => components}/RuleDefinition.tsx (92%) rename web/ui/mantine-ui/src/{ => components}/SettingsMenu.tsx (96%) rename web/ui/mantine-ui/src/{ => components}/StateMultiSelect.tsx (100%) rename web/ui/mantine-ui/src/{ => components}/ThemeSelector.tsx (100%) diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx index 2a55d85d28..60376ae92a 100644 --- a/web/ui/mantine-ui/src/App.tsx +++ b/web/ui/mantine-ui/src/App.tsx @@ -56,13 +56,13 @@ import FlagsPage from "./pages/FlagsPage"; import ConfigPage from "./pages/ConfigPage"; import AgentPage from "./pages/AgentPage"; import { Suspense, useContext } from "react"; -import ErrorBoundary from "./ErrorBoundary"; -import { ThemeSelector } from "./ThemeSelector"; +import ErrorBoundary from "./components/ErrorBoundary"; +import { ThemeSelector } from "./components/ThemeSelector"; import { SettingsContext } from "./settings"; import { Notifications } from "@mantine/notifications"; import { useAppDispatch } from "./state/hooks"; import { updateSettings } from "./state/settingsSlice"; -import SettingsMenu from "./SettingsMenu"; +import SettingsMenu from "./components/SettingsMenu"; const queryClient = new QueryClient(); diff --git a/web/ui/mantine-ui/src/api/responseTypes/config.ts b/web/ui/mantine-ui/src/api/responseTypes/config.ts index f9a72f3b60..4f509f9e00 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/config.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/config.ts @@ -1,3 +1,5 @@ +// Result type for /api/v1/status/config endpoint. +// See: https://prometheus.io/docs/prometheus/latest/querying/api/#config export default interface ConfigResult { yaml: string; } diff --git a/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts b/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts index 5b28851942..3c69b79b5a 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts @@ -1 +1,3 @@ +// Result type for /api/v1/label//values endpoint. +// See: https://prometheus.io/docs/prometheus/latest/querying/api/#querying-label-values export type LabelValuesResult = string[]; diff --git a/web/ui/mantine-ui/src/api/responseTypes/query.ts b/web/ui/mantine-ui/src/api/responseTypes/query.ts index d393f318d6..6fcf09f1b0 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/query.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/query.ts @@ -23,6 +23,8 @@ export interface RangeSamples { export type SampleValue = [number, string]; export type SampleHistogram = [number, Histogram]; +// Result type for /api/v1/query endpoint. +// See: https://prometheus.io/docs/prometheus/latest/querying/api/#instant-queries export type InstantQueryResult = | { resultType: "vector"; diff --git a/web/ui/mantine-ui/src/api/responseTypes/rules.ts b/web/ui/mantine-ui/src/api/responseTypes/rules.ts index 5866000af8..4cc7e30f5b 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/rules.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/rules.ts @@ -50,10 +50,14 @@ type AlertingRuleGroup = Omit & { rules: AlertingRule[]; }; -export interface RulesMap { +// Result type for /api/v1/alerts endpoint. +// See: https://prometheus.io/docs/prometheus/latest/querying/api/#alerts +export interface RulesResult { groups: RuleGroup[]; } -export interface AlertingRulesMap { +// Same as RulesResult above, but can be used when the caller ensures via a +// "type=alert" query parameter that all rules are alerting rules. +export interface AlertingRulesResult { groups: AlertingRuleGroup[]; } diff --git a/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts b/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts index aca8b55afb..793ad71571 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts @@ -1 +1,2 @@ +// Result type for /api/v1/scrape_pools endpoint. export type ScrapePoolsResult = { scrapePools: string[] }; diff --git a/web/ui/mantine-ui/src/api/responseTypes/targets.ts b/web/ui/mantine-ui/src/api/responseTypes/targets.ts index ea34aa132e..cc0e891f05 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/targets.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/targets.ts @@ -20,6 +20,8 @@ export interface DroppedTarget { discoveredLabels: Labels; } +// Result type for /api/v1/targets endpoint. +// See: https://prometheus.io/docs/prometheus/latest/querying/api/#targets export type TargetsResult = { activeTargets: Target[]; droppedTargets: DroppedTarget[]; diff --git a/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts b/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts index 98b93177ce..255249757f 100644 --- a/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts +++ b/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts @@ -11,7 +11,9 @@ interface HeadStats { maxTime: number; } -export interface TSDBMap { +// Result type for /api/v1/status/tsdb endpoint. +// See: https://prometheus.io/docs/prometheus/latest/querying/api/#tsdb-stats +export interface TSDBStatusResult { headStats: HeadStats; seriesCountByMetricName: Stats[]; labelValueCountByLabelName: Stats[]; diff --git a/web/ui/mantine-ui/src/CustomInfiniteScroll.tsx b/web/ui/mantine-ui/src/components/CustomInfiniteScroll.tsx similarity index 100% rename from web/ui/mantine-ui/src/CustomInfiniteScroll.tsx rename to web/ui/mantine-ui/src/components/CustomInfiniteScroll.tsx diff --git a/web/ui/mantine-ui/src/EndpointLink.tsx b/web/ui/mantine-ui/src/components/EndpointLink.tsx similarity index 100% rename from web/ui/mantine-ui/src/EndpointLink.tsx rename to web/ui/mantine-ui/src/components/EndpointLink.tsx diff --git a/web/ui/mantine-ui/src/ErrorBoundary.tsx b/web/ui/mantine-ui/src/components/ErrorBoundary.tsx similarity index 100% rename from web/ui/mantine-ui/src/ErrorBoundary.tsx rename to web/ui/mantine-ui/src/components/ErrorBoundary.tsx diff --git a/web/ui/mantine-ui/src/LabelBadges.tsx b/web/ui/mantine-ui/src/components/LabelBadges.tsx similarity index 88% rename from web/ui/mantine-ui/src/LabelBadges.tsx rename to web/ui/mantine-ui/src/components/LabelBadges.tsx index c4a7b54c7a..008cf9eee7 100644 --- a/web/ui/mantine-ui/src/LabelBadges.tsx +++ b/web/ui/mantine-ui/src/components/LabelBadges.tsx @@ -1,7 +1,7 @@ import { Badge, BadgeVariant, Group, MantineColor } from "@mantine/core"; import { FC } from "react"; -import { escapeString } from "./lib/escapeString"; -import badgeClasses from "./Badge.module.css"; +import { escapeString } from "../lib/escapeString"; +import badgeClasses from "../Badge.module.css"; export interface LabelBadgesProps { labels: Record; diff --git a/web/ui/mantine-ui/src/codebox.module.css b/web/ui/mantine-ui/src/components/RuleDefinition.module.css similarity index 100% rename from web/ui/mantine-ui/src/codebox.module.css rename to web/ui/mantine-ui/src/components/RuleDefinition.module.css diff --git a/web/ui/mantine-ui/src/RuleDefinition.tsx b/web/ui/mantine-ui/src/components/RuleDefinition.tsx similarity index 92% rename from web/ui/mantine-ui/src/RuleDefinition.tsx rename to web/ui/mantine-ui/src/components/RuleDefinition.tsx index 6b9a3793ef..dfc5c5d33f 100644 --- a/web/ui/mantine-ui/src/RuleDefinition.tsx +++ b/web/ui/mantine-ui/src/components/RuleDefinition.tsx @@ -1,9 +1,9 @@ import { Badge, Box, Card, Group, useComputedColorScheme } from "@mantine/core"; import { IconClockPause, IconClockPlay } from "@tabler/icons-react"; import { FC } from "react"; -import { formatPrometheusDuration } from "./lib/formatTime"; -import codeboxClasses from "./codebox.module.css"; -import { Rule } from "./api/responseTypes/rules"; +import { formatPrometheusDuration } from "../lib/formatTime"; +import codeboxClasses from "./RuleDefinition.module.css"; +import { Rule } from "../api/responseTypes/rules"; import CodeMirror, { EditorView } from "@uiw/react-codemirror"; import { syntaxHighlighting } from "@codemirror/language"; import { @@ -11,7 +11,7 @@ import { darkPromqlHighlighter, lightTheme, promqlHighlighter, -} from "./codemirror/theme"; +} from "../codemirror/theme"; import { PromQLExtension } from "@prometheus-io/codemirror-promql"; import { LabelBadges } from "./LabelBadges"; diff --git a/web/ui/mantine-ui/src/SettingsMenu.tsx b/web/ui/mantine-ui/src/components/SettingsMenu.tsx similarity index 96% rename from web/ui/mantine-ui/src/SettingsMenu.tsx rename to web/ui/mantine-ui/src/components/SettingsMenu.tsx index 5546b820a2..45f91b3910 100644 --- a/web/ui/mantine-ui/src/SettingsMenu.tsx +++ b/web/ui/mantine-ui/src/components/SettingsMenu.tsx @@ -1,8 +1,8 @@ import { Popover, ActionIcon, Fieldset, Checkbox, Stack } from "@mantine/core"; import { IconSettings } from "@tabler/icons-react"; import { FC } from "react"; -import { useAppDispatch, useAppSelector } from "./state/hooks"; -import { updateSettings } from "./state/settingsSlice"; +import { useAppDispatch, useAppSelector } from "../state/hooks"; +import { updateSettings } from "../state/settingsSlice"; const SettingsMenu: FC = () => { const { diff --git a/web/ui/mantine-ui/src/StateMultiSelect.tsx b/web/ui/mantine-ui/src/components/StateMultiSelect.tsx similarity index 100% rename from web/ui/mantine-ui/src/StateMultiSelect.tsx rename to web/ui/mantine-ui/src/components/StateMultiSelect.tsx diff --git a/web/ui/mantine-ui/src/ThemeSelector.tsx b/web/ui/mantine-ui/src/components/ThemeSelector.tsx similarity index 100% rename from web/ui/mantine-ui/src/ThemeSelector.tsx rename to web/ui/mantine-ui/src/components/ThemeSelector.tsx diff --git a/web/ui/mantine-ui/src/lib/escapeString.ts b/web/ui/mantine-ui/src/lib/escapeString.ts index 05bc1ba2e6..5fc1955de8 100644 --- a/web/ui/mantine-ui/src/lib/escapeString.ts +++ b/web/ui/mantine-ui/src/lib/escapeString.ts @@ -1,3 +1,4 @@ +// Used for escaping escape sequences and double quotes in double-quoted strings. export const escapeString = (str: string) => { return str.replace(/([\\"])/g, "\\$1"); }; diff --git a/web/ui/mantine-ui/src/lib/formatTime.ts b/web/ui/mantine-ui/src/lib/formatTime.ts index c1bff433fe..c92b564f48 100644 --- a/web/ui/mantine-ui/src/lib/formatTime.ts +++ b/web/ui/mantine-ui/src/lib/formatTime.ts @@ -4,6 +4,7 @@ dayjs.extend(duration); import utc from "dayjs/plugin/utc"; dayjs.extend(utc); +// Parse Prometheus-specific duration strings such as "5m" or "1d2h3m4s" into milliseconds. export const parsePrometheusDuration = (durationStr: string): number | null => { if (durationStr === "") { return null; @@ -44,6 +45,7 @@ export const parsePrometheusDuration = (durationStr: string): number | null => { return dur; }; +// Format a duration in milliseconds into a Prometheus duration string like "1d2h3m4s". export const formatPrometheusDuration = (d: number): string => { let ms = d; let r = ""; diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx index 5ad8576970..414779aadf 100644 --- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx +++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx @@ -12,19 +12,19 @@ import { Alert, } from "@mantine/core"; import { useSuspenseAPIQuery } from "../api/api"; -import { AlertingRulesMap } from "../api/responseTypes/rules"; +import { AlertingRulesResult } from "../api/responseTypes/rules"; import badgeClasses from "../Badge.module.css"; -import RuleDefinition from "../RuleDefinition"; +import RuleDefinition from "../components/RuleDefinition"; import { humanizeDurationRelative, now } from "../lib/formatTime"; import { Fragment } from "react"; -import { StateMultiSelect } from "../StateMultiSelect"; +import { StateMultiSelect } from "../components/StateMultiSelect"; import { useAppDispatch, useAppSelector } from "../state/hooks"; import { IconInfoCircle, IconSearch } from "@tabler/icons-react"; -import { LabelBadges } from "../LabelBadges"; +import { LabelBadges } from "../components/LabelBadges"; import { updateAlertFilters } from "../state/alertsPageSlice"; export default function AlertsPage() { - const { data } = useSuspenseAPIQuery({ + const { data } = useSuspenseAPIQuery({ path: `/rules`, params: { type: "alert", diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx index fcf1a65531..d1baf87afc 100644 --- a/web/ui/mantine-ui/src/pages/RulesPage.tsx +++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx @@ -24,9 +24,9 @@ import { IconRepeat, } from "@tabler/icons-react"; import { useSuspenseAPIQuery } from "../api/api"; -import { RulesMap } from "../api/responseTypes/rules"; +import { RulesResult } from "../api/responseTypes/rules"; import badgeClasses from "../Badge.module.css"; -import RuleDefinition from "../RuleDefinition"; +import RuleDefinition from "../components/RuleDefinition"; const healthBadgeClass = (state: string) => { switch (state) { @@ -42,7 +42,7 @@ const healthBadgeClass = (state: string) => { }; export default function RulesPage() { - const { data } = useSuspenseAPIQuery({ path: `/rules` }); + const { data } = useSuspenseAPIQuery({ path: `/rules` }); return ( diff --git a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx index 5948e27211..e315ea99b2 100644 --- a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx +++ b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx @@ -1,6 +1,6 @@ import { Stack, Card, Group, Table, Text } from "@mantine/core"; import { useSuspenseAPIQuery } from "../api/api"; -import { TSDBMap } from "../api/responseTypes/tsdbStatus"; +import { TSDBStatusResult } from "../api/responseTypes/tsdbStatus"; import { useAppSelector } from "../state/hooks"; import { formatTimestamp } from "../lib/formatTime"; @@ -15,7 +15,7 @@ export default function TSDBStatusPage() { seriesCountByLabelValuePair, }, }, - } = useSuspenseAPIQuery({ path: `/status/tsdb` }); + } = useSuspenseAPIQuery({ path: `/status/tsdb` }); const useLocalTime = useAppSelector((state) => state.settings.useLocalTime); diff --git a/web/ui/mantine-ui/src/pages/TargetsPage.tsx b/web/ui/mantine-ui/src/pages/TargetsPage.tsx index a02020422f..a93b594dff 100644 --- a/web/ui/mantine-ui/src/pages/TargetsPage.tsx +++ b/web/ui/mantine-ui/src/pages/TargetsPage.tsx @@ -18,7 +18,7 @@ import { IconLayoutNavbarExpand, IconSearch, } from "@tabler/icons-react"; -import { StateMultiSelect } from "../StateMultiSelect"; +import { StateMultiSelect } from "../components/StateMultiSelect"; import { useSuspenseAPIQuery } from "../api/api"; import { ScrapePoolsResult } from "../api/responseTypes/scrapePools"; import { Target, TargetsResult } from "../api/responseTypes/targets"; @@ -29,14 +29,14 @@ import { humanizeDuration, now, } from "../lib/formatTime"; -import { LabelBadges } from "../LabelBadges"; +import { LabelBadges } from "../components/LabelBadges"; import { useAppDispatch, useAppSelector } from "../state/hooks"; import { setCollapsedPools, updateTargetFilters, } from "../state/targetsPageSlice"; -import EndpointLink from "../EndpointLink"; -import CustomInfiniteScroll from "../CustomInfiniteScroll"; +import EndpointLink from "../components/EndpointLink"; +import CustomInfiniteScroll from "../components/CustomInfiniteScroll"; type ScrapePool = { targets: Target[]; diff --git a/web/ui/mantine-ui/src/state/hooks.ts b/web/ui/mantine-ui/src/state/hooks.ts index 04a59b244d..e7661469ca 100644 --- a/web/ui/mantine-ui/src/state/hooks.ts +++ b/web/ui/mantine-ui/src/state/hooks.ts @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from "react-redux"; import type { RootState, AppDispatch } from "./store"; -// Use throughout your app instead of plain `useDispatch` and `useSelector` +// Use these typed hooks throughout the app instead of plain `useDispatch` and `useSelector` export const useAppDispatch = useDispatch.withTypes(); export const useAppSelector = useSelector.withTypes();