Fix agent-mode menu items, path prefix calculation, and homepage redirects

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

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

@@ -74,12 +74,14 @@ const mainNavPages = [
     path: "/query",
     icon: <IconDatabaseSearch style={navIconStyle} />,
     element: <QueryPage />,
+    inAgentMode: false,
   },
   {
     title: "Alerts",
     path: "/alerts",
     icon: <IconBellFilled style={navIconStyle} />,
     element: <AlertsPage />,
+    inAgentMode: false,
   },
 ];
 
@@ -89,18 +91,21 @@ const monitoringStatusPages = [
     path: "/targets",
     icon: <IconHeartRateMonitor style={navIconStyle} />,
     element: <TargetsPage />,
+    inAgentMode: true,
   },
   {
     title: "Rule health",
     path: "/rules",
     icon: <IconTable style={navIconStyle} />,
     element: <RulesPage />,
+    inAgentMode: false,
   },
   {
     title: "Service discovery",
     path: "/service-discovery",
     icon: <IconCloudDataConnection style={navIconStyle} />,
     element: <ServiceDiscoveryPage />,
+    inAgentMode: true,
   },
 ];
 
@@ -110,29 +115,32 @@ const serverStatusPages = [
     path: "/status",
     icon: <IconInfoCircle style={navIconStyle} />,
     element: <StatusPage />,
+    inAgentMode: true,
   },
   {
     title: "TSDB status",
     path: "/tsdb-status",
     icon: <IconDatabase style={navIconStyle} />,
     element: <TSDBStatusPage />,
+    inAgentMode: false,
   },
   {
     title: "Command-line flags",
     path: "/flags",
     icon: <IconFlag style={navIconStyle} />,
     element: <FlagsPage />,
+    inAgentMode: true,
   },
   {
     title: "Configuration",
     path: "/config",
     icon: <IconServerCog style={navIconStyle} />,
     element: <ConfigPage />,
+    inAgentMode: true,
   },
 ];
 
 const allStatusPages = [...monitoringStatusPages, ...serverStatusPages];
-const allPages = [...mainNavPages, ...allStatusPages];
 
 const theme = createTheme({
   colors: {
@@ -159,7 +167,13 @@ const getPathPrefix = (path: string) => {
     path = path.slice(0, -1);
   }
 
-  const pagePath = allPages.find((p) => path.endsWith(p.path))?.path;
+  const pagePaths = [
+    ...mainNavPages,
+    ...allStatusPages,
+    { path: "/agent" },
+  ].map((p) => p.path);
+
+  const pagePath = pagePaths.find((p) => path.endsWith(p));
   return path.slice(0, path.length - (pagePath || "").length);
 };
 
@@ -176,41 +190,45 @@ function App() {
 
   const navLinks = (
     <>
-      {mainNavPages.map((p) => (
+      {mainNavPages
-        <Button
+        .filter((p) => !agentMode || p.inAgentMode)
-          key={p.path}
+        .map((p) => (
-          component={NavLink}
+          <Button
-          to={p.path}
+            key={p.path}
-          className={classes.link}
+            component={NavLink}
-          leftSection={p.icon}
+            to={p.path}
-          px={navLinkXPadding}
+            className={classes.link}
-        >
+            leftSection={p.icon}
-          {p.title}
+            px={navLinkXPadding}
-        </Button>
+          >
-      ))}
+            {p.title}
+          </Button>
+        ))}
 
       <Menu shadow="md" width={240}>
         <Routes>
-          {allStatusPages.map((p) => (
+          {allStatusPages
-            <Route
+            .filter((p) => !agentMode || p.inAgentMode)
-              key={p.path}
+            .map((p) => (
-              path={p.path}
+              <Route
-              element={
+                key={p.path}
-                <Menu.Target>
+                path={p.path}
-                  <Button
+                element={
-                    component={NavLink}
+                  <Menu.Target>
-                    to={p.path}
+                    <Button
-                    className={classes.link}
+                      component={NavLink}
-                    leftSection={p.icon}
+                      to={p.path}
-                    rightSection={<IconChevronDown style={navIconStyle} />}
+                      className={classes.link}
-                    px={navLinkXPadding}
+                      leftSection={p.icon}
-                  >
+                      rightSection={<IconChevronDown style={navIconStyle} />}
-                    Status <IconChevronRight style={navIconStyle} /> {p.title}
+                      px={navLinkXPadding}
-                  </Button>
+                    >
-                </Menu.Target>
+                      Status <IconChevronRight style={navIconStyle} /> {p.title}
-              }
+                    </Button>
-            />
+                  </Menu.Target>
-          ))}
+                }
+              />
+            ))}
           <Route
             path="*"
             element={
@@ -235,29 +253,33 @@ function App() {
 
         <Menu.Dropdown>
           <Menu.Label>Monitoring status</Menu.Label>
-          {monitoringStatusPages.map((p) => (
+          {monitoringStatusPages
-            <Menu.Item
+            .filter((p) => !agentMode || p.inAgentMode)
-              key={p.path}
+            .map((p) => (
-              component={NavLink}
+              <Menu.Item
-              to={p.path}
+                key={p.path}
-              leftSection={p.icon}
+                component={NavLink}
-            >
+                to={p.path}
-              {p.title}
+                leftSection={p.icon}
-            </Menu.Item>
+              >
-          ))}
+                {p.title}
+              </Menu.Item>
+            ))}
 
           <Menu.Divider />
           <Menu.Label>Server status</Menu.Label>
-          {serverStatusPages.map((p) => (
+          {serverStatusPages
-            <Menu.Item
+            .filter((p) => !agentMode || p.inAgentMode)
-              key={p.path}
+            .map((p) => (
-              component={NavLink}
+              <Menu.Item
-              to={p.path}
+                key={p.path}
-              leftSection={p.icon}
+                component={NavLink}
-            >
+                to={p.path}
-              {p.title}
+                leftSection={p.icon}
-            </Menu.Item>
+              >
-          ))}
+                {p.title}
+              </Menu.Item>
+            ))}
         </Menu.Dropdown>
       </Menu>
 
@@ -350,12 +372,20 @@ function App() {
                     <Route
                       path="/"
                       element={
-                        <Navigate to={agentMode ? "/agent" : "/query"} />
+                        <Navigate
+                          to={agentMode ? "/agent" : "/query"}
+                          replace
+                        />
                       }
                     />
-                    <Route path="/query" element={<QueryPage />} />
+                    {agentMode ? (
-                    <Route path="/agent" element={<AgentPage />} />
+                      <Route path="/agent" element={<AgentPage />} />
-                    <Route path="/alerts" element={<AlertsPage />} />
+                    ) : (
+                      <>
+                        <Route path="/query" element={<QueryPage />} />
+                        <Route path="/alerts" element={<AlertsPage />} />
+                      </>
+                    )}
                     {allStatusPages.map((p) => (
                       <Route key={p.path} path={p.path} element={p.element} />
                     ))}

web/web.go

@@ -70,7 +70,6 @@ var reactRouterPaths = []string{
 	"/service-discovery",
 	"/status",
 	"/targets",
-	"/starting",
 }
 
 // Paths that are handled by the React router when the Agent mode is set.
@@ -367,12 +366,12 @@ func New(logger log.Logger, o *Options) *Handler {
 	}
 
 	homePage := "/graph"
-	if o.IsAgent {
-		homePage = "/agent"
-	}
 	if o.UseNewUI {
 		homePage = "/query"
 	}
+	if o.IsAgent {
+		homePage = "/agent"
+	}
 
 	readyf := h.testReady