Various tiny code cleanups

Signed-off-by: Julius Volz <julius.volz@gmail.com>

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";

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;

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";

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;

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,

web/ui/mantine-ui/src/pages/RulesPage.tsx

@@ -5,7 +5,6 @@ import {
   Card,
   Group,
   Stack,
-  Table,
   Text,
   Tooltip,
 } from "@mantine/core";

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: {

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,

web/ui/mantine-ui/src/pages/query/Graph.tsx

@@ -38,8 +38,6 @@ const Graph: FC<GraphProps> = ({
   endTime,
   range,
   resolution,
-  showExemplars,
-  displayMode,
   retriggerIdx,
 }) => {
   const realEndTime = (endTime !== null ? endTime : Date.now()) / 1000;

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";

web/ui/mantine-ui/src/state/api.ts

@@ -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<InstantQueryResult>,
-      { 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<InstantQueryResult>
-      // ): SuccessAPIResponse<InstantQueryResult> => {
-      //   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;

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,

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()
+    getDefaultMiddleware().prepend(localStorageMiddleware.middleware),
-      .prepend(localStorageMiddleware.middleware)
-      .concat(prometheusApi.middleware),
 });
 
 // Infer the `RootState` and `AppDispatch` types from the store itself