diff --git a/ui/src/lib/features/navigation/routes.ts b/ui/src/lib/features/navigation/routes.ts index 693a7c6a..86b860f1 100644 --- a/ui/src/lib/features/navigation/routes.ts +++ b/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) })), +})) diff --git a/ui/src/lib/features/navigation/sidebar/component.svelte b/ui/src/lib/features/navigation/sidebar/component.svelte index 23d75f10..6757887f 100644 --- a/ui/src/lib/features/navigation/sidebar/component.svelte +++ b/ui/src/lib/features/navigation/sidebar/component.svelte @@ -9,11 +9,39 @@ import { isSidebarExpanded } from '../store' import './styles.postcss' - const submenus: Record = {} + const toggleSubmenus: Record = {} 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 + }) + }