Add TOML-based dashboard config for sidebar section/link visibility

Introduce dashboard.config.toml as a single extensible config file for
the dashboard, parsed at build time via smol-toml and injected through
Vite's define option. Sidebar sections and individual links can now be
disabled by ID or route path without backend changes.

Author: sandboxws

dashboard/dashboard.config.toml

@@ -0,0 +1,19 @@
+# FlinkReactor Dashboard Configuration
+# This file controls dashboard behavior and is parsed at build time by Vite.
+
+[sidebar]
+# Hide entire sidebar sections by ID.
+# Valid IDs: overview, jobs, cluster, observe, data, tools, instruments
+disabled_sections = ["instruments", "tools"]
+
+# Hide individual sidebar links by their route path.
+# Examples: "/jobs/submit", "/sandbox", "/admin/simulations"
+disabled_links = [
+  "/insights/bottlenecks",
+  "/insights/metrics",
+  "/insights/health",
+  "/materialized-tables",
+  "/monitoring/alerts",
+  "/monitoring/checkpoints",
+  "/deployments",
+]

dashboard/package.json

@@ -89,6 +89,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
+    "smol-toml": "^1.6.1",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",

dashboard/src/components/layout/sidebar.tsx

@@ -32,6 +32,7 @@ import {
   Upload,
 } from "lucide-react"
 import { cn } from "@/lib/cn"
+import { isLinkEnabled, isSectionEnabled } from "@/lib/dashboard-config"
 import { useUiStore } from "@/stores/ui-store"
 
 /** A single navigation link in the sidebar. */
@@ -46,6 +47,8 @@ type NavItem = {
 
 /** A labeled group of related {@link NavItem} entries in the sidebar. */
 type NavGroup = {
+  /** Stable identifier used in dashboard.config.toml to disable this section. */
+  id: string
   /** Section heading displayed above the group's links. */
   label: string
   /** Ordered list of navigation links within this group. */
@@ -55,10 +58,12 @@ type NavGroup = {
 /** Static navigation structure defining all sidebar groups and their routes. */
 const NAV_GROUPS: NavGroup[] = [
   {
+    id: "overview",
     label: "Overview",
     items: [{ href: "/overview", label: "Overview", icon: LayoutDashboard }],
   },
   {
+    id: "jobs",
     label: "Jobs",
     items: [
       { href: "/jobs/running", label: "Running Jobs", icon: Play },
@@ -72,6 +77,7 @@ const NAV_GROUPS: NavGroup[] = [
     ],
   },
   {
+    id: "cluster",
     label: "Cluster",
     items: [
       { href: "/task-managers", label: "Task Managers", icon: Server },
@@ -80,6 +86,7 @@ const NAV_GROUPS: NavGroup[] = [
     ],
   },
   {
+    id: "observe",
     label: "Observe",
     items: [
       { href: "/insights/metrics", label: "Metrics Explorer", icon: LineChart },
@@ -99,6 +106,7 @@ const NAV_GROUPS: NavGroup[] = [
     ],
   },
   {
+    id: "data",
     label: "Data",
     items: [
       {
@@ -119,6 +127,7 @@ const NAV_GROUPS: NavGroup[] = [
     ],
   },
   {
+    id: "tools",
     label: "Tools",
     items: [
       {
@@ -164,42 +173,48 @@ export function Sidebar() {
 
       {/* Navigation */}
       <nav className="flex-1 overflow-y-auto p-1.5">
-        {NAV_GROUPS.map((group) => (
-          <div key={group.label} className="mb-1">
-            {!collapsed && (
-              <div className="px-2.5 pb-1 pt-2.5 text-[10px] font-medium uppercase tracking-wider text-zinc-600">
-                {group.label}
+        {NAV_GROUPS.filter((g) => isSectionEnabled(g.id)).map((group) => {
+          const items = group.items.filter((i) => isLinkEnabled(i.href))
+          if (items.length === 0) return null
+          return (
+            <div key={group.id} className="mb-1">
+              {!collapsed && (
+                <div className="px-2.5 pb-1 pt-2.5 text-[10px] font-medium uppercase tracking-wider text-zinc-600">
+                  {group.label}
+                </div>
+              )}
+              <div className="space-y-0.5">
+                {items.map((item) => {
+                  const active = pathname.startsWith(item.href)
+                  return (
+                    <Link
+                      key={item.href}
+                      to={item.href}
+                      className={cn(
+                        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-xs transition-colors",
+                        active
+                          ? "bg-white/[0.08] text-white"
+                          : "text-zinc-500 hover:bg-white/[0.04] hover:text-zinc-300",
+                      )}
+                    >
+                      <item.icon className="size-3.5 shrink-0" />
+                      {!collapsed && <span>{item.label}</span>}
+                    </Link>
+                  )
+                })}
               </div>
-            )}
-            <div className="space-y-0.5">
-              {group.items.map((item) => {
-                const active = pathname.startsWith(item.href)
-                return (
-                  <Link
-                    key={item.href}
-                    to={item.href}
-                    className={cn(
-                      "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-xs transition-colors",
-                      active
-                        ? "bg-white/[0.08] text-white"
-                        : "text-zinc-500 hover:bg-white/[0.04] hover:text-zinc-300",
-                    )}
-                  >
-                    <item.icon className="size-3.5 shrink-0" />
-                    {!collapsed && <span>{item.label}</span>}
-                  </Link>
-                )
-              })}
             </div>
-          </div>
-        ))}
+          )
+        })}
 
         {/* Dynamic instruments group — rendered by the instruments UI package */}
-        <InstrumentSidebarSection
-          collapsed={collapsed}
-          activePath={pathname}
-          LinkComponent={Link}
-        />
+        {isSectionEnabled("instruments") && (
+          <InstrumentSidebarSection
+            collapsed={collapsed}
+            activePath={pathname}
+            LinkComponent={Link}
+          />
+        )}
       </nav>
 
       {/* Collapse toggle */}

dashboard/src/lib/dashboard-config.ts

@@ -0,0 +1,33 @@
+/**
+ * @module dashboard-config
+ * Typed access to the build-time dashboard configuration injected by Vite's
+ * `define` option from `dashboard.config.toml`.
+ */
+
+interface SidebarConfig {
+  disabled_sections: string[]
+  disabled_links: string[]
+}
+
+interface DashboardTomlConfig {
+  sidebar: SidebarConfig
+}
+
+declare const __DASHBOARD_CONFIG__: DashboardTomlConfig
+
+const cfg: DashboardTomlConfig = __DASHBOARD_CONFIG__
+
+const disabledSections = new Set(
+  cfg.sidebar.disabled_sections.map((s) => s.toLowerCase()),
+)
+const disabledLinks = new Set(cfg.sidebar.disabled_links)
+
+/** Returns true when a sidebar section should be rendered. */
+export function isSectionEnabled(id: string): boolean {
+  return !disabledSections.has(id.toLowerCase())
+}
+
+/** Returns true when a sidebar link should be rendered. */
+export function isLinkEnabled(href: string): boolean {
+  return !disabledLinks.has(href)
+}

dashboard/vite.config.ts

@@ -1,11 +1,20 @@
 /** Vite configuration for the FlinkReactor dashboard — TanStack Router plugin, dev server proxy. */
+import { readFileSync } from "node:fs"
 import tailwindcss from "@tailwindcss/vite"
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite"
 import react from "@vitejs/plugin-react"
+import { parse } from "smol-toml"
 import { defineConfig } from "vite"
 import tsconfigPaths from "vite-tsconfig-paths"
 
+const dashboardConfig = parse(
+  readFileSync("./dashboard.config.toml", "utf-8"),
+)
+
 export default defineConfig({
+  define: {
+    __DASHBOARD_CONFIG__: JSON.stringify(dashboardConfig),
+  },
   plugins: [
     TanStackRouterVite({
       routesDirectory: "./src/routes",

pnpm-lock.yaml

@@ -20,19 +20,19 @@ storage:
   enabled: true
   dsn: "postgres://reactor:reactor@localhost:5433/reactor"
 
-instruments:
-  - name: "pagila"
-    type: "database"
-    config:
-      driver: "postgres"
-      dsn: "postgres://reactor:reactor@localhost:5433/pagila"
-  - name: "chinook"
-    type: "database"
-    config:
-      driver: "postgres"
-      dsn: "postgres://reactor:reactor@localhost:5433/chinook"
-  - name: "employees"
-    type: "database"
-    config:
-      driver: "postgres"
-      dsn: "postgres://reactor:reactor@localhost:5433/employees"
+# instruments:
+#   - name: "pagila"
+#     type: "database"
+#     config:
+#       driver: "postgres"
+#       dsn: "postgres://reactor:reactor@localhost:5433/pagila"
+#   - name: "chinook"
+#     type: "database"
+#     config:
+#       driver: "postgres"
+#       dsn: "postgres://reactor:reactor@localhost:5433/chinook"
+#   - name: "employees"
+#     type: "database"
+#     config:
+#       driver: "postgres"
+#       dsn: "postgres://reactor:reactor@localhost:5433/employees"