Add Settings menu, make menu links left-justified again

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

web/ui/mantine-ui/src/App.tsx

@@ -12,10 +12,14 @@ import {
   Box,
   Burger,
   Button,
+  Checkbox,
+  Fieldset,
   Group,
   MantineProvider,
   Menu,
+  Popover,
   Skeleton,
+  Stack,
   Text,
   Transition,
   createTheme,
@@ -65,6 +69,7 @@ import { SettingsContext } from "./settings";
 import { Notifications } from "@mantine/notifications";
 import { useAppDispatch } from "./state/hooks";
 import { updateSettings } from "./state/settingsSlice";
+import SettingsMenu from "./SettingsMenu";
 
 const queryClient = new QueryClient();
 
@@ -294,36 +299,18 @@ function App() {
             <AppShell.Header bg="rgb(65, 73, 81)" c="#fff">
               <Group h="100%" px="md">
                 <Group style={{ flex: 1 }} justify="space-between">
-                  <Group gap={10} w={150}>
+                  <Group gap={65}>
+                    <Group gap={10}>
                       <img src={PrometheusLogo} height={30} />
                       <Text fz={20}>Prometheus{agentMode && " Agent"}</Text>
                     </Group>
                     <Group gap={12} visibleFrom="sm">
                       {navLinks}
                     </Group>
-                  <Group w={180} justify="flex-end">
-                    {<ThemeSelector />}
-                    <Menu shadow="md" width={200}>
-                      <Menu.Target>
-                        <ActionIcon
-                          // variant=""
-                          color="gray"
-                          aria-label="Settings"
-                          size="md"
-                        >
-                          <IconSettings size={navLinkIconSize} />
-                        </ActionIcon>
-                      </Menu.Target>
-                      <Menu.Dropdown>
-                        <Menu.Item
-                          component={NavLink}
-                          to="/"
-                          leftSection={<IconAdjustments />}
-                        >
-                          Settings
-                        </Menu.Item>
-                      </Menu.Dropdown>
-                    </Menu>
+                  </Group>
+                  <Group visibleFrom="xs">
+                    <ThemeSelector />
+                    <SettingsMenu />
                   </Group>
                 </Group>
                 <Burger
@@ -338,6 +325,10 @@ function App() {
 
             <AppShell.Navbar py="md" px={4} bg="rgb(65, 73, 81)" c="#fff">
               {navLinks}
+              <Group mt="md" hiddenFrom="xs" justify="center">
+                <ThemeSelector />
+                <SettingsMenu />
+              </Group>
             </AppShell.Navbar>
 
             <AppShell.Main>

web/ui/mantine-ui/src/SettingsMenu.tsx

@@ -0,0 +1,112 @@
+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";
+
+const SettingsMenu: FC = () => {
+  const {
+    useLocalTime,
+    enableQueryHistory,
+    enableAutocomplete,
+    enableSyntaxHighlighting,
+    enableLinter,
+    showAnnotations,
+  } = useAppSelector((state) => state.settings);
+  const dispatch = useAppDispatch();
+
+  return (
+    <Popover position="bottom" withArrow shadow="md">
+      <Popover.Target>
+        <ActionIcon
+          // variant=""
+          color="gray"
+          aria-label="Settings"
+          size={32}
+        >
+          <IconSettings size={20} />
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Stack>
+          <Fieldset p="md" legend="Global settings">
+            <Checkbox
+              checked={useLocalTime}
+              label="Use local time"
+              onChange={(event) =>
+                dispatch(
+                  updateSettings({ useLocalTime: event.currentTarget.checked })
+                )
+              }
+            />
+          </Fieldset>
+
+          <Fieldset p="md" legend="Query page settings">
+            <Stack>
+              <Checkbox
+                checked={enableQueryHistory}
+                label="Enable query history"
+                onChange={(event) =>
+                  dispatch(
+                    updateSettings({
+                      enableQueryHistory: event.currentTarget.checked,
+                    })
+                  )
+                }
+              />
+              <Checkbox
+                checked={enableAutocomplete}
+                label="Enable autocomplete"
+                onChange={(event) =>
+                  dispatch(
+                    updateSettings({
+                      enableAutocomplete: event.currentTarget.checked,
+                    })
+                  )
+                }
+              />
+              <Checkbox
+                checked={enableSyntaxHighlighting}
+                label="Enable syntax highlighting"
+                onChange={(event) =>
+                  dispatch(
+                    updateSettings({
+                      enableSyntaxHighlighting: event.currentTarget.checked,
+                    })
+                  )
+                }
+              />
+              <Checkbox
+                checked={enableLinter}
+                label="Enable linter"
+                onChange={(event) =>
+                  dispatch(
+                    updateSettings({
+                      enableLinter: event.currentTarget.checked,
+                    })
+                  )
+                }
+              />
+            </Stack>
+          </Fieldset>
+
+          <Fieldset p="md" legend="Alerts page settings">
+            <Checkbox
+              checked={showAnnotations}
+              label="Show expanded annotations"
+              onChange={(event) =>
+                dispatch(
+                  updateSettings({
+                    showAnnotations: event.currentTarget.checked,
+                  })
+                )
+              }
+            />
+          </Fieldset>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
+
+export default SettingsMenu;

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

@@ -2,10 +2,22 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface Settings {
   pathPrefix: string;
+  useLocalTime: boolean;
+  enableQueryHistory: boolean;
+  enableAutocomplete: boolean;
+  enableSyntaxHighlighting: boolean;
+  enableLinter: boolean;
+  showAnnotations: boolean;
 }
 
 const initialState: Settings = {
   pathPrefix: "",
+  useLocalTime: false,
+  enableQueryHistory: false,
+  enableAutocomplete: true,
+  enableSyntaxHighlighting: true,
+  enableLinter: true,
+  showAnnotations: false,
 };
 
 export const settingsSlice = createSlice({