feat: add missing routes & route filter

ui/src/lib/features/navigation/routes.ts

@@ -1,80 +1,77 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: 2024-Present The UDS Authors
 
-import { ChartCombo, KubernetesPod, Layers, Network_2, SearchLocate, TextAlignLeft } from 'carbon-icons-svelte'
+import {
+  ChartCombo,
+  Db2Database,
+  KubernetesPod,
+  Layers,
+  Network_2,
+  SearchLocate,
+  TextAlignLeft,
+  WorkflowAutomation
+} from 'carbon-icons-svelte'
 
-import type { Route } from './types'
+import type { BaseRoute, Route } from './types'
 
-export const routes: Route[] = [
+const baseRoutes: BaseRoute[] = [
   {
-    path: '/',
     name: 'Overview',
     icon: ChartCombo,
   },
   {
-    path: '/monitor',
     name: 'Monitor',
     icon: SearchLocate,
-    children: [
-      {
-        path: '/monitor/pepr',
-        name: 'Pepr',
-      },
-      {
-        path: '/monitor/events',
-        name: 'Events',
-      },
-    ],
+    children: ['Pepr', 'Events'],
   },
   {
-    path: '/resources/workloads',
     name: 'Workloads',
     icon: KubernetesPod,
     class: 'top-border',
-    children: [
-      {
-        path: '/resources/workloads/pods',
-        name: 'Pods',
-      },
-      {
-        path: '/resources/workloads/deployments',
-        name: 'Deployments',
-      },
-      {
-        path: '/resources/workloads/daemonsets',
-        name: 'DaemonSets',
-      },
-      {
-        path: '/resources/workloads/statefulsets',
-        name: 'StatefulSets',
-      },
-    ],
+    children: ['Pods', 'Deployments', 'DaemonSets', 'StatefulSets', 'Jobs', 'CronJobs'],
   },
   {
-    path: '/resources/config',
     name: 'Config',
     icon: TextAlignLeft,
+    children: ['UDS Packages', 'UDS Exemptions', 'ConfigMaps', 'Secrets'],
+  },
+  {
+    name: 'Cluster Ops',
+    icon: WorkflowAutomation,
     children: [
-      {
-        path: '/resources/config/packages',
-        name: 'Packages',
-      },
+      'Mutating Webhooks',
+      'Validating Webhooks',
+      'HPA',
+      'Pod Disruption Budgets',
+      'Resource Quotas',
+      'Limit Ranges',
+      'Priority Classes',
+      'Runtime Classes',
     ],
   },
   {
-    path: '/resources/network',
     name: 'Network',
     icon: Network_2,
-    children: [
-      {
-        path: '/resources/services',
-        name: 'Services',
-      },
-    ],
+    children: ['Services', 'Virtual Services', 'Network Policies', 'Endpoints'],
+  },
+  {
+    name: 'Storage',
+    icon: Db2Database,
+    children: ['Persistent Volumes', 'Persistent Volume Claims', 'Storage Classes'],
   },
   {
-    path: '/resources/namespaces',
     name: 'Namespaces',
     icon: Layers,
   },
 ]
+
+// Convert the path to a URL-friendly format
+const createPath = (name: string) => `/${name.replace(/\s+/g, '-').toLowerCase()}`
+
+// Convert the base routes to routes
+export const routes: Route[] = baseRoutes.map(({ name, children, ...rest }) => ({
+  ...rest,
+  name,
+  path: createPath(name),
+  children: children?.map((name) => ({ name, path: createPath(name) })),
+}))

ui/src/lib/features/navigation/sidebar/component.svelte

@@ -9,11 +9,39 @@
   import { isSidebarExpanded } from '../store'
   import './styles.postcss'
 
-  const submenus: Record<string, boolean> = {}
+  const toggleSubmenus: Record<string, boolean> = {}
 
   routes.forEach((route) => {
-    submenus[route.path] = $page.url.pathname.includes(route.path)
+    toggleSubmenus[route.path] = $page.url.pathname.includes(route.path)
   })
+
+  let filtered = routes
+
+  // Filter routes, if matching parent, show all children
+  function filterRoutes(event: KeyboardEvent) {
+    const filter = (event.target as HTMLInputElement).value.toLowerCase()
+    filtered = routes
+      // Deep-cloning routes to avoid modifying the original array
+      .map((route) => ({ ...route }))
+      // Filter routes based on the search query
+      .filter((route) => {
+        // If the parent route matches the search query, show all children
+        if (route.name.toLowerCase().includes(filter)) {
+          return true
+        }
+
+        // If the parent route doesn't match the search query, filter children
+        if (route.children) {
+          route.children = route.children.filter((child) => child.name.toLowerCase().includes(filter))
+          return route.children.length > 0
+        }
+      })
+      // Show all children of the matching parent
+      .map((route) => {
+        toggleSubmenus[route.path] = true
+        return route
+      })
+  }
 </script>
 
 <aside
@@ -24,30 +52,53 @@
   aria-label="Sidenav"
 >
   <div class="h-full overflow-y-auto border-r border-gray-200 bg-white px-3 py-5 dark:border-gray-700 dark:bg-gray-800">
+    <div class="flex items-center mb-4">
+      <div class="relative w-full">
+        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
+            ></path></svg
+          >
+        </div>
+        <input
+          type="search"
+          id="simple-search"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="Filter Pages"
+          on:keyup={filterRoutes}
+        />
+      </div>
+    </div>
     <ul class="space-y-2">
-      {#each routes as route}
+      {#each filtered as route}
         <li class={route.class}>
           {#if route.children}
             <button
               type="button"
               class="group flex w-full items-center rounded-lg p-2 text-base font-normal text-gray-900 transition duration-300 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              on:click={() => (submenus[route.path] = !submenus[route.path])}
+              on:click={() => (toggleSubmenus[route.path] = !toggleSubmenus[route.path])}
             >
               <svelte:component this={route.icon} class="icon" />
               <span class="expanded-only ml-3 flex-1 whitespace-nowrap text-left">{route.name}</span>
               <ChevronUp
-                class="expanded-only h-6 w-6 transition duration-300 {submenus[route.path]
+                class="expanded-only h-6 w-6 transition duration-300 {toggleSubmenus[route.path]
                   ? 'rotate-180 transform'
                   : ''}"
               />
             </button>
-            <ul class="expanded-only space-y-2 py-2 {submenus[route.path] ? '' : 'hidden'}">
+            <ul class="expanded-only space-y-2 py-2 {toggleSubmenus[route.path] ? '' : 'hidden'}">
               {#each route.children as child}
                 <li>
                   <a
-                    href={child.path}
+                    href={route.path + child.path}
                     class="group flex w-full items-center rounded-lg p-2 pl-11 text-base font-light text-gray-900 transition duration-300 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-                    class:active={$page.url.pathname.includes(child.path)}>{child.name}</a
+                    class:active={$page.url.pathname.includes(route.path + child.path)}>{child.name}</a
                   >
                 </li>
               {/each}

ui/src/lib/features/navigation/types.ts

@@ -3,15 +3,22 @@
 
 import type { CarbonIcon } from 'carbon-icons-svelte'
 
+export interface BaseRoute {
+  name: string
+  icon?: typeof CarbonIcon
+  class?: string
+  children?: string[]
+}
+
 export interface Route {
-  path: string
   name: string
+  path: string
   icon?: typeof CarbonIcon
   class?: string
   children?: RouteChild[]
 }
 
 export interface RouteChild {
-  path: string
   name: string
+  path: string
 }