chore(webui): require patched React Router

src/govoplan_ops/__init__.py

@@ -2,4 +2,4 @@
 
 __all__ = ["__version__"]
 
-__version__ = "0.1.6"
+__version__ = "0.1.8"

src/govoplan_ops/backend/manifest.py

@@ -2,6 +2,7 @@ from __future__ import annotations
 
 from govoplan_core.core.access import CAPABILITY_AUTH_PERMISSION_EVALUATOR, CAPABILITY_AUTH_PRINCIPAL_RESOLVER
 from govoplan_core.core.modules import FrontendModule, FrontendRoute, ModuleContext, ModuleManifest, NavItem, PermissionDefinition, RoleTemplate
+from govoplan_core.core.views import ViewSurface
 
 OPS_READ_SCOPE = "ops:operations:read"
 OPS_READ_SCOPES = (OPS_READ_SCOPE, "system:settings:read", "admin:settings:read")
@@ -57,6 +58,9 @@ manifest = ModuleManifest(
         package_name="@govoplan/ops-webui",
         routes=(FrontendRoute(path="/ops", component="OpsPage", required_any=OPS_READ_SCOPES, order=890),),
         nav_items=(NavItem(path="/ops", label="Ops", icon="activity", required_any=OPS_READ_SCOPES, order=890),),
+        view_surfaces=(
+            ViewSurface(id="ops.widget.health", module_id="ops", kind="section", label="Operations health widget", order=100),
+        ),
     ),
 )
 

webui/package.json

@@ -17,7 +17,7 @@
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1",
+    "react-router-dom": ">=7.18.2 <8",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",
     "vite": "^6.0.6"

webui/src/features/ops/OpsPage.tsx

@@ -3,13 +3,16 @@ import { RefreshCw } from "lucide-react";
 import {
   Button,
   Card,
+  DataGrid,
   DismissibleAlert,
   LoadingFrame,
   MetricCard,
+  PageScrollViewport,
   PageTitle,
   StatusBadge,
   adminErrorMessage,
-  type ApiSettings } from
+  type ApiSettings,
+  type DataGridColumn } from
 "@govoplan/core-webui";
 import { fetchOpsStatus, type OpsCheck, type OpsDeploymentProfile, type OpsSizingAssumption, type OpsStatus } from "../../api/ops";
 
@@ -38,6 +41,7 @@ export default function OpsPage({ settings }: {settings: ApiSettings;}) {
   const ready = status?.readiness.ready ?? false;
 
   return (
+    <PageScrollViewport>
     <div className="content-pad workspace-data-page">
       <div className="page-heading split workspace-heading">
         <div>
@@ -75,7 +79,8 @@ export default function OpsPage({ settings }: {settings: ApiSettings;}) {
           </Card>
         </div>
       </LoadingFrame>
-    </div>);
+    </div>
+    </PageScrollViewport>);
 
 }
 
@@ -95,47 +100,27 @@ function CheckList({ checks }: {checks: OpsCheck[];}) {
 
 function ProfileList({ profiles }: {profiles: OpsDeploymentProfile[];}) {
   if (!profiles.length) return <p className="muted">i18n:govoplan-ops.no_deployment_profiles_reported.7c3af1db</p>;
+  const columns: DataGridColumn<OpsDeploymentProfile>[] = [
+    { id: "profile", header: "i18n:govoplan-ops.profile.ff4fc027", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, sortable: true, filterable: true, value: (profile) => `${profile.name} ${profile.id}`, render: (profile) => <div><strong>{profile.name}</strong><span className="muted block">{profile.id}</span></div> },
+    { id: "status", header: "i18n:govoplan-ops.status.bae7d5be", width: 140, sortable: true, filterable: true, value: (profile) => profile.current ? "current" : "reference", render: (profile) => <StatusBadge status={profile.current ? "success" : "inactive"} label={profile.current ? "current" : "reference"} /> },
+    { id: "components", header: "i18n:govoplan-ops.components.9289473e", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (profile) => profile.components.join(" "), render: (profile) => profile.components.join(", ") },
+    { id: "fit", header: "i18n:govoplan-ops.fit.dab564d8", width: "minmax(180px, .8fr)", minWidth: 160, resizable: true, filterable: true, value: (profile) => profile.fit }
+  ];
   return (
-    <div className="admin-table-wrap">
-      <table className="admin-table">
-        <thead>
-          <tr><th>i18n:govoplan-ops.profile.ff4fc027</th><th>i18n:govoplan-ops.status.bae7d5be</th><th>i18n:govoplan-ops.components.9289473e</th><th>i18n:govoplan-ops.fit.dab564d8</th></tr>
-        </thead>
-        <tbody>
-          {profiles.map((profile) =>
-          <tr key={profile.id}>
-              <td><strong>{profile.name}</strong><span className="muted block">{profile.id}</span></td>
-              <td><StatusBadge status={profile.current ? "success" : "inactive"} label={profile.current ? "current" : "reference"} /></td>
-              <td>{profile.components.join(", ")}</td>
-              <td>{profile.fit}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>);
+    <DataGrid id="ops-deployment-profiles" rows={profiles} columns={columns} getRowKey={(profile) => profile.id} />);
 
 }
 
 function SizingTable({ items }: {items: OpsSizingAssumption[];}) {
   if (!items.length) return <p className="muted">i18n:govoplan-ops.no_sizing_assumptions_reported.17515959</p>;
+  const columns: DataGridColumn<OpsSizingAssumption>[] = [
+    { id: "area", header: "i18n:govoplan-ops.area.2745deba", width: "minmax(180px, .7fr)", minWidth: 160, resizable: true, sortable: true, filterable: true, value: (item) => item.area, render: (item) => <strong>{item.area}</strong> },
+    { id: "baseline", header: "i18n:govoplan-ops.baseline.e6ab7982", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (item) => item.baseline },
+    { id: "trigger", header: "i18n:govoplan-ops.scale_trigger.1c85e10e", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (item) => item.scale_trigger },
+    { id: "note", header: "i18n:govoplan-ops.operator_note.1dc58f7b", width: "minmax(240px, 1.2fr)", minWidth: 200, resizable: true, filterable: true, value: (item) => item.operator_note }
+  ];
   return (
-    <div className="admin-table-wrap">
-      <table className="admin-table">
-        <thead>
-          <tr><th>i18n:govoplan-ops.area.2745deba</th><th>i18n:govoplan-ops.baseline.e6ab7982</th><th>i18n:govoplan-ops.scale_trigger.1c85e10e</th><th>i18n:govoplan-ops.operator_note.1dc58f7b</th></tr>
-        </thead>
-        <tbody>
-          {items.map((item) =>
-          <tr key={item.area}>
-              <td><strong>{item.area}</strong></td>
-              <td>{item.baseline}</td>
-              <td>{item.scale_trigger}</td>
-              <td>{item.operator_note}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>);
+    <DataGrid id="ops-sizing-assumptions" rows={items} columns={columns} getRowKey={(item) => item.area} />);
 
 }
 

webui/src/module.ts

@@ -14,6 +14,7 @@ const dashboardWidgets: DashboardWidgetsUiCapability = {
   widgets: [
     {
       id: "ops.health",
+      surfaceId: "ops.widget.health",
       title: "Operations health",
       description: "Readiness, worker mode, and current warning count.",
       moduleId: "ops",
@@ -34,6 +35,9 @@ export const opsModule: PlatformWebModule = {
   dependencies: ["access"],
   optionalDependencies: ["audit", "docs", "notifications"],
   translations,
+  viewSurfaces: [
+    { id: "ops.widget.health", moduleId: "ops", kind: "section", label: "Operations health widget", order: 100 }
+  ],
   navItems: [{ to: "/ops", label: "i18n:govoplan-ops.ops.907a54c2", iconName: "activity", anyOf: opsReadScopes, order: 890 }],
   routes: [
   { path: "/ops", anyOf: opsReadScopes, order: 890, render: ({ settings }) => createElement(OpsPage, { settings }) }],