diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx index b97ba91848..2a55d85d28 100644 --- a/web/ui/mantine-ui/src/App.tsx +++ b/web/ui/mantine-ui/src/App.tsx @@ -6,21 +6,15 @@ import classes from "./App.module.css"; import PrometheusLogo from "./images/prometheus-logo.svg"; import { - ActionIcon, Affix, - Anchor, AppShell, Box, Burger, Button, - Checkbox, - Fieldset, Group, MantineProvider, Menu, - Popover, Skeleton, - Stack, Text, Transition, createTheme, @@ -28,7 +22,6 @@ import { } from "@mantine/core"; import { useDisclosure, useWindowScroll } from "@mantine/hooks"; import { - IconAdjustments, IconArrowUp, IconBellFilled, IconChevronDown, @@ -41,7 +34,6 @@ import { IconHeartRateMonitor, IconInfoCircle, IconServerCog, - IconSettings, } from "@tabler/icons-react"; import { BrowserRouter, @@ -53,7 +45,6 @@ import { } from "react-router-dom"; import { IconTable } from "@tabler/icons-react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -// import { ReactQueryDevtools } from "react-query/devtools"; import QueryPage from "./pages/query/QueryPage"; import AlertsPage from "./pages/AlertsPage"; import RulesPage from "./pages/RulesPage"; diff --git a/web/ui/mantine-ui/src/EndpointLink.tsx b/web/ui/mantine-ui/src/EndpointLink.tsx index 051431bbcf..2fdb096515 100644 --- a/web/ui/mantine-ui/src/EndpointLink.tsx +++ b/web/ui/mantine-ui/src/EndpointLink.tsx @@ -1,5 +1,5 @@ import { Anchor, Badge, Group } from "@mantine/core"; -import React, { FC } from "react"; +import { FC } from "react"; export interface EndpointLinkProps { endpoint: string; diff --git a/web/ui/mantine-ui/src/RuleDefinition.tsx b/web/ui/mantine-ui/src/RuleDefinition.tsx index c157a2ca6d..6b9a3793ef 100644 --- a/web/ui/mantine-ui/src/RuleDefinition.tsx +++ b/web/ui/mantine-ui/src/RuleDefinition.tsx @@ -3,7 +3,6 @@ import { IconClockPause, IconClockPlay } from "@tabler/icons-react"; import { FC } from "react"; import { formatPrometheusDuration } from "./lib/formatTime"; import codeboxClasses from "./codebox.module.css"; -import badgeClasses from "./Badge.module.css"; import { Rule } from "./api/responseTypes/rules"; import CodeMirror, { EditorView } from "@uiw/react-codemirror"; import { syntaxHighlighting } from "@codemirror/language"; diff --git a/web/ui/mantine-ui/src/StateMultiSelect.tsx b/web/ui/mantine-ui/src/StateMultiSelect.tsx index cecd53db3a..2e28504bc7 100644 --- a/web/ui/mantine-ui/src/StateMultiSelect.tsx +++ b/web/ui/mantine-ui/src/StateMultiSelect.tsx @@ -1,20 +1,15 @@ -import { FC, useState } from "react"; +import { FC } from "react"; import { - Badge, CheckIcon, - CloseButton, Combobox, ComboboxChevron, ComboboxClearButton, Group, - Input, - MantineColor, Pill, - PillGroup, PillsInput, useCombobox, } from "@mantine/core"; -import { IconActivity, IconFilter } from "@tabler/icons-react"; +import { IconActivity } from "@tabler/icons-react"; interface StatePillProps extends React.ComponentPropsWithoutRef<"div"> { value: string; diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx index 99ba58aee4..5ad8576970 100644 --- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx +++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx @@ -7,12 +7,6 @@ import { Badge, Tooltip, Box, - Divider, - Button, - Fieldset, - Checkbox, - MultiSelect, - Pill, Stack, Input, Alert, diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx index 408bb5db45..fcf1a65531 100644 --- a/web/ui/mantine-ui/src/pages/RulesPage.tsx +++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx @@ -5,7 +5,6 @@ import { Card, Group, Stack, - Table, Text, Tooltip, } from "@mantine/core"; diff --git a/web/ui/mantine-ui/src/pages/StatusPage.tsx b/web/ui/mantine-ui/src/pages/StatusPage.tsx index 963813f9d1..ddb10f9748 100644 --- a/web/ui/mantine-ui/src/pages/StatusPage.tsx +++ b/web/ui/mantine-ui/src/pages/StatusPage.tsx @@ -12,7 +12,8 @@ const statusConfig: Record< > = { startTime: { title: "Start time", - formatValue: (v: string) => formatTimestamp(new Date(v).valueOf() / 1000), + formatValue: (v: string) => + formatTimestamp(new Date(v).valueOf() / 1000, false), // TODO: Set useLocalTime parameter correctly. }, CWD: { title: "Working directory" }, reloadConfigSuccess: { diff --git a/web/ui/mantine-ui/src/pages/TargetsPage.tsx b/web/ui/mantine-ui/src/pages/TargetsPage.tsx index 6773142e84..a02020422f 100644 --- a/web/ui/mantine-ui/src/pages/TargetsPage.tsx +++ b/web/ui/mantine-ui/src/pages/TargetsPage.tsx @@ -2,9 +2,7 @@ import { Accordion, ActionIcon, Alert, - Anchor, Badge, - Card, Group, Input, RingProgress, @@ -27,7 +25,6 @@ import { Target, TargetsResult } from "../api/responseTypes/targets"; import React from "react"; import badgeClasses from "../Badge.module.css"; import { - formatPrometheusDuration, humanizeDurationRelative, humanizeDuration, now, diff --git a/web/ui/mantine-ui/src/pages/query/Graph.tsx b/web/ui/mantine-ui/src/pages/query/Graph.tsx index caca6de15c..81960cf5ee 100644 --- a/web/ui/mantine-ui/src/pages/query/Graph.tsx +++ b/web/ui/mantine-ui/src/pages/query/Graph.tsx @@ -38,8 +38,6 @@ const Graph: FC = ({ endTime, range, resolution, - showExemplars, - displayMode, retriggerIdx, }) => { const realEndTime = (endTime !== null ? endTime : Date.now()) / 1000; diff --git a/web/ui/mantine-ui/src/pages/query/QueryPage.tsx b/web/ui/mantine-ui/src/pages/query/QueryPage.tsx index 0c155dfc5d..696cac8aa9 100644 --- a/web/ui/mantine-ui/src/pages/query/QueryPage.tsx +++ b/web/ui/mantine-ui/src/pages/query/QueryPage.tsx @@ -1,9 +1,8 @@ -import { Alert, Box, Button, Notification, Stack, rem } from "@mantine/core"; +import { Alert, Box, Button, Stack, rem } from "@mantine/core"; import { IconAlertCircle, IconAlertTriangle, IconPlus, - IconX, } from "@tabler/icons-react"; import { useAppDispatch, useAppSelector } from "../../state/hooks"; import { addPanel } from "../../state/queryPageSlice"; diff --git a/web/ui/mantine-ui/src/state/api.ts b/web/ui/mantine-ui/src/state/api.ts deleted file mode 100644 index c5c411c6b1..0000000000 --- a/web/ui/mantine-ui/src/state/api.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; -import { ErrorAPIResponse, SuccessAPIResponse } from "../api/api"; -import { InstantQueryResult } from "../api/responseTypes/query"; - -// Define a service using a base URL and expected endpoints -export const prometheusApi = createApi({ - reducerPath: "prometheusApi", - baseQuery: fetchBaseQuery({ baseUrl: "/api/v1/" }), - keepUnusedDataFor: 0, // Turn off caching. - endpoints: (builder) => ({ - instantQuery: builder.query< - SuccessAPIResponse, - { query: string; time: number } - >({ - query: ({ query, time }) => { - return { - url: `query`, - params: { - query, - time, - }, - }; - //`query?query=${encodeURIComponent(query)}&time=${time}`, - }, - transformErrorResponse: (error): string => { - if (!error.data) { - return "Failed to fetch data"; - } - - return (error.data as ErrorAPIResponse).error; - }, - // transformResponse: ( - // response: APIResponse - // ): SuccessAPIResponse => { - // if (!response.status) { - // throw new Error("Invalid response"); - // } - // if (response.status === "error") { - // throw new Error(response.error); - // } - // return response; - // }, - }), - }), -}); - -// Export hooks for usage in functional components, which are -// auto-generated based on the defined endpoints -export const { useInstantQueryQuery, useLazyInstantQueryQuery } = prometheusApi; diff --git a/web/ui/mantine-ui/src/state/queryPageSlice.ts b/web/ui/mantine-ui/src/state/queryPageSlice.ts index 39cfe55f36..1dbdc6ca50 100644 --- a/web/ui/mantine-ui/src/state/queryPageSlice.ts +++ b/web/ui/mantine-ui/src/state/queryPageSlice.ts @@ -40,7 +40,6 @@ const newDefaultPanel = (): Panel => ({ visualizer: { activeTab: "table", endTime: null, - // endTime: 1709414194000, range: 3600 * 1000, resolution: null, displayMode: GraphDisplayMode.Lines, diff --git a/web/ui/mantine-ui/src/state/store.ts b/web/ui/mantine-ui/src/state/store.ts index 35ea12802b..aeaf8544fd 100644 --- a/web/ui/mantine-ui/src/state/store.ts +++ b/web/ui/mantine-ui/src/state/store.ts @@ -1,6 +1,5 @@ import { configureStore } from "@reduxjs/toolkit"; import queryPageSlice from "./queryPageSlice"; -import { prometheusApi } from "./api"; import settingsSlice from "./settingsSlice"; import targetsPageSlice from "./targetsPageSlice"; import alertsPageSlice from "./alertsPageSlice"; @@ -12,12 +11,9 @@ const store = configureStore({ queryPage: queryPageSlice, targetsPage: targetsPageSlice, alertsPage: alertsPageSlice, - [prometheusApi.reducerPath]: prometheusApi.reducer, }, middleware: (getDefaultMiddleware) => - getDefaultMiddleware() - .prepend(localStorageMiddleware.middleware) - .concat(prometheusApi.middleware), + getDefaultMiddleware().prepend(localStorageMiddleware.middleware), }); // Infer the `RootState` and `AppDispatch` types from the store itself