web: introduce a dedicated dashboard for workloads

Signed-off-by: Stefan Prodan <stefan.prodan@gmail.com>

Author: stefanprodan

web/src/app.jsx

@@ -16,6 +16,7 @@ import { ClusterPage } from './components/dashboards/cluster/ClusterPage'
 import { EventList } from './components/search/EventList'
 import { ResourceList } from './components/search/ResourceList'
 import { ResourcePage } from './components/dashboards/resource/ResourcePage'
+import { WorkloadPage } from './components/dashboards/workload/WorkloadPage'
 import { FavoritesPage } from './components/favorites/FavoritesPage'
 import { ProfilePage } from './components/user/ProfilePage'
 import { NotFoundPage } from './components/layout/NotFoundPage'
@@ -311,6 +312,7 @@ function AppContent({ spec, namespace }) {
         <Route path="/events" component={EventList} />
         <Route path="/resources" component={ResourceList} />
         <Route path="/resource/:kind/:namespace/:name" component={ResourcePage} />
+        <Route path="/workload/:kind/:namespace/:name" component={WorkloadPage} />
         <Route path="/user/profile" component={ProfilePage} />
         <Route default component={NotFoundPage} />
       </Router>

web/src/app.test.jsx

@@ -55,6 +55,10 @@ vi.mock('./components/dashboards/resource/ResourcePage', () => ({
   ResourcePage: () => <div data-testid="resource-page">ResourcePage</div>
 }))
 
+vi.mock('./components/dashboards/workload/WorkloadPage', () => ({
+  WorkloadPage: () => <div data-testid="workload-page">WorkloadPage</div>
+}))
+
 vi.mock('./components/common/NotFoundPage', () => ({
   NotFoundPage: () => <div data-testid="not-found-page">NotFoundPage</div>
 }))

web/src/components/dashboards/resource/InventoryPanel.jsx

@@ -116,12 +116,18 @@ export function InventoryPanel({ resourceData, onNavigate }) {
     return resourceData.status.inventory.filter(item => isWorkloadInventoryItem(item))
   }, [resourceData, hasInventory])
 
-  // Build URL for a resource
+  // Build URL for a Flux resource
   const getResourceUrl = (item) => {
     const ns = item.namespace || resourceData.metadata.namespace
     return `/resource/${encodeURIComponent(item.kind)}/${encodeURIComponent(ns)}/${encodeURIComponent(item.name)}`
   }
 
+  // Build URL for a workload
+  const getWorkloadUrl = (item) => {
+    const ns = item.namespace || resourceData.metadata.namespace
+    return `/workload/${encodeURIComponent(item.kind)}/${encodeURIComponent(ns)}/${encodeURIComponent(item.name)}`
+  }
+
   return (
     <DashboardPanel title="Managed Objects" id="inventory-panel">
       {/* Tab Navigation */}
@@ -252,6 +258,7 @@ export function InventoryPanel({ resourceData, onNavigate }) {
             <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
               {sortedInventory.map((item, idx) => {
                 const isFluxResource = isFluxInventoryItem(item)
+                const isWorkload = !isFluxResource && isWorkloadInventoryItem(item)
                 return (
                   <tr key={idx} class="hover:bg-gray-50 dark:hover:bg-gray-800">
                     <td class="px-3 py-2 text-sm">
@@ -262,6 +269,13 @@ export function InventoryPanel({ resourceData, onNavigate }) {
                         >
                           {item.name}
                         </a>
+                      ) : isWorkload ? (
+                        <a
+                          href={getWorkloadUrl(item)}
+                          class="text-flux-blue dark:text-blue-400 hover:underline"
+                        >
+                          {item.name}
+                        </a>
                       ) : (
                         <span class="text-gray-900 dark:text-gray-100">{item.name}</span>
                       )}