diff --git a/webui/src/components/pages/dashboard/Dashboard.tsx b/webui/src/components/pages/dashboard/Dashboard.tsx index b97ba9d..053ffe7 100644 --- a/webui/src/components/pages/dashboard/Dashboard.tsx +++ b/webui/src/components/pages/dashboard/Dashboard.tsx @@ -67,8 +67,55 @@ export function Dashboard() { {/* Two equal columns: CryoEM Facilities and SmartEM Application */} {/* CryoEM Facilities */} - + + + + + + Realm: dls + + + Production:{' '} + + https://identity.diamond.ac.uk + +
+ Test:{' '} + + https://identity-test.diamond.ac.uk + +
+ + + Clients + + + - SmartEM_User (public, OIDC authorization code + PKCE) +
- SmartEM_Agent (confidential, OAuth 2.0 client_credentials) +
+ Backend validates Bearer tokens against JWKS. +
+ See ADR 0018 for the agent auth design. +
+
+
+
{/* SmartEM Application */} diff --git a/webui/src/components/pages/dashboard/components/ConnectionsOverlay.tsx b/webui/src/components/pages/dashboard/components/ConnectionsOverlay.tsx index 0ee736f..a4f963d 100644 --- a/webui/src/components/pages/dashboard/components/ConnectionsOverlay.tsx +++ b/webui/src/components/pages/dashboard/components/ConnectionsOverlay.tsx @@ -241,6 +241,7 @@ export function ConnectionsOverlay({ connections, containerRef }: ConnectionsOve d={pathD} stroke={conn.color} strokeWidth={2} + strokeDasharray={conn.strokeDasharray} fill="none" style={{ pointerEvents: 'none' }} /> diff --git a/webui/src/components/pages/dashboard/components/MicroscopeGrid.tsx b/webui/src/components/pages/dashboard/components/MicroscopeGrid.tsx index b29c7db..650f2fc 100644 --- a/webui/src/components/pages/dashboard/components/MicroscopeGrid.tsx +++ b/webui/src/components/pages/dashboard/components/MicroscopeGrid.tsx @@ -16,7 +16,6 @@ export function MicroscopeGrid() { display: 'flex', flexDirection: 'column', gap: 7, - flex: 1, }} > {detailed.map((instrument) => ( diff --git a/webui/src/components/pages/dashboard/components/connectionConfig.ts b/webui/src/components/pages/dashboard/components/connectionConfig.ts index 9220335..d88e8a4 100644 --- a/webui/src/components/pages/dashboard/components/connectionConfig.ts +++ b/webui/src/components/pages/dashboard/components/connectionConfig.ts @@ -10,6 +10,9 @@ export interface Connection { sourceDotOffset?: number // Offset along the edge for source dot (positive = right/down) targetDotOffset?: number // Offset along the edge for target dot (positive = right/down) arrow?: 'source' | 'target' | 'both' | 'none' // Arrow direction (default: 'none') + // Trust/identity edges (e.g. auth flows) use a dashed stroke so they read + // as a different kind of edge from data/RPC paths. + strokeDasharray?: string } // Color palette for connections @@ -21,6 +24,7 @@ const colors = { purple: '#9c27b0', // C3: Agent -> Athena API (microscope control) teal: '#009688', // C4: ARIA Connector flows pink: '#e91e63', // C5: Web UI -> Backend API + gold: '#b8860b', // Auth: Keycloak trust/identity edges (rendered dashed) } export const dashboardConnections: Connection[] = [ @@ -125,4 +129,52 @@ export const dashboardConnections: Connection[] = [ curveOffset: 90, // More curvature for pink connection arrow: 'source', // Arrow pointing to Web UI (data flows from API to UI) }, + // C6: Auth — SmartEM Web UI -> DLS Keycloak (OIDC authorization code + PKCE) + // Keycloak sits in the left column under the microscope grid; UI is in the + // middle column, so the edge runs leftward. + { + id: 'webui-to-keycloak', + sourceId: 'smartem-webui', + targetId: 'dls-keycloak', + sourceAnchor: 'left', + targetAnchor: 'right', + color: colors.gold, + tooltip: + 'SmartEM Web UI authenticates users against DLS Keycloak via OIDC authorization code flow with PKCE (SmartEM_User client)', + strokeDasharray: '6 4', + sourceDotOffset: -10, + arrow: 'target', + }, + // C6: Auth — SmartEM Agent -> DLS Keycloak (client_credentials grant) + // Both live in the left column with Keycloak below the microscope grid. + // Endpoints are nudged right of column-centre so the line runs alongside + // the "+N more microscopes" stack without overlapping its centred text+icon. + { + id: 'agent-to-keycloak', + sourceId: 'smartem-agent', + targetId: 'dls-keycloak', + sourceAnchor: 'bottom', + targetAnchor: 'top', + color: colors.gold, + tooltip: + 'SmartEM Agent obtains service-account tokens from DLS Keycloak via OAuth 2.0 client_credentials grant (SmartEM_Agent client). See ADR 0018.', + strokeDasharray: '6 4', + sourceDotOffset: 60, + targetDotOffset: 130, + arrow: 'target', + }, + // C6: Auth — SmartEM Backend API -> DLS Keycloak (JWKS for Bearer-token validation) + { + id: 'backend-to-keycloak', + sourceId: 'smartem-backend-api', + targetId: 'dls-keycloak', + sourceAnchor: 'left', + targetAnchor: 'right', + color: colors.gold, + tooltip: + 'SmartEM Backend validates incoming Bearer tokens (from Web UI and Agent) against the DLS Keycloak JWKS endpoint', + strokeDasharray: '6 4', + sourceDotOffset: -10, + arrow: 'target', + }, ]