From b0c465819b5196ed107f68e881cdb5f03896fab0 Mon Sep 17 00:00:00 2001 From: Val Redchenko Date: Fri, 22 May 2026 16:02:48 +0100 Subject: [PATCH 1/5] feat(webui-dashboard): add DLS Keycloak component and auth trust edges The architecture dashboard didn't reflect the Keycloak auth component that is now in production across the SmartEM system. Add a DLS Keycloak box under External Systems and draw the three auth trust edges: - Web UI -> Keycloak (OIDC authorization code + PKCE, SmartEM_User client) - Agent -> Keycloak (OAuth 2.0 client_credentials, SmartEM_Agent client) - Backend API -> Keycloak (Bearer-token JWKS validation) Trust/identity edges are visually distinct from data/RPC edges: they use a new gold colour and a dashed stroke. Extend the Connection type with an optional strokeDasharray so the convention is reusable for future trust edges (e.g. ARIA OAuth, which is currently text-only). Verified by running the dev server and screenshotting the dashboard. --- .../components/pages/dashboard/Dashboard.tsx | 22 ++++++++++ .../components/ConnectionsOverlay.tsx | 1 + .../dashboard/components/connectionConfig.ts | 44 +++++++++++++++++++ 3 files changed, 67 insertions(+) diff --git a/webui/src/components/pages/dashboard/Dashboard.tsx b/webui/src/components/pages/dashboard/Dashboard.tsx index b97ba9d..4e4cef7 100644 --- a/webui/src/components/pages/dashboard/Dashboard.tsx +++ b/webui/src/components/pages/dashboard/Dashboard.tsx @@ -241,6 +241,28 @@ export function Dashboard() { {/* External Systems */} + + + + + Realm: dls + + + 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. + + + + diff --git a/webui/src/components/pages/dashboard/components/connectionConfig.ts b/webui/src/components/pages/dashboard/components/connectionConfig.ts index 9220335..62ab62b 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,44 @@ 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) + { + id: 'webui-to-keycloak', + sourceId: 'smartem-webui', + targetId: 'dls-keycloak', + sourceAnchor: 'right', + targetAnchor: 'left', + 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', + arrow: 'target', + }, + // C6: Auth — SmartEM Agent -> DLS Keycloak (client_credentials grant) + { + id: 'agent-to-keycloak', + sourceId: 'smartem-agent', + targetId: 'dls-keycloak', + sourceAnchor: 'right', + targetAnchor: 'left', + 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', + curveOffset: 120, + 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: 'right', + targetAnchor: 'left', + color: colors.gold, + tooltip: + 'SmartEM Backend validates incoming Bearer tokens (from Web UI and Agent) against the DLS Keycloak JWKS endpoint', + strokeDasharray: '6 4', + arrow: 'target', + }, ] From b2e33334d691c4849d02022aad69f7a87d678035 Mon Sep 17 00:00:00 2001 From: Val Redchenko Date: Fri, 22 May 2026 16:10:54 +0100 Subject: [PATCH 2/5] fixup: move DLS Keycloak to CryoEM Facilities column Keycloak is DLS-facility infrastructure that SmartEM consumes, not a SmartEM-external system in the same way ARIA is. Sitting it under the microscope grid reflects the conceptual tier and shortens the agent-to-keycloak edge to a clean vertical line. - Move the DLS Keycloak box from External Systems column to the bottom of the CryoEM Facilities column (sibling of MicroscopeGrid). - Re-anchor the three trust edges: - Web UI / Backend API -> Keycloak: source left, target right (reach leftward across columns). - Agent -> Keycloak: source bottom, target top (short vertical edge within the same column). --- .../components/pages/dashboard/Dashboard.tsx | 47 ++++++++++--------- .../dashboard/components/connectionConfig.ts | 20 +++++--- 2 files changed, 38 insertions(+), 29 deletions(-) diff --git a/webui/src/components/pages/dashboard/Dashboard.tsx b/webui/src/components/pages/dashboard/Dashboard.tsx index 4e4cef7..61808ca 100644 --- a/webui/src/components/pages/dashboard/Dashboard.tsx +++ b/webui/src/components/pages/dashboard/Dashboard.tsx @@ -69,6 +69,31 @@ export function Dashboard() { {/* CryoEM Facilities */} + + + + + Realm: dls + + + 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 */} @@ -241,28 +266,6 @@ export function Dashboard() { {/* External Systems */} - - - - - Realm: dls - - - 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. - - - - 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: 'right', - targetAnchor: 'left', + 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; + // a short vertical edge keeps the diagram clean. { id: 'agent-to-keycloak', sourceId: 'smartem-agent', targetId: 'dls-keycloak', - sourceAnchor: 'right', - targetAnchor: 'left', + 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', - curveOffset: 120, + sourceDotOffset: 20, arrow: 'target', }, // C6: Auth — SmartEM Backend API -> DLS Keycloak (JWKS for Bearer-token validation) @@ -161,12 +166,13 @@ export const dashboardConnections: Connection[] = [ id: 'backend-to-keycloak', sourceId: 'smartem-backend-api', targetId: 'dls-keycloak', - sourceAnchor: 'right', - targetAnchor: 'left', + 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', }, ] From 4f3a55b3aad55b29e4a9ebade835c9fd5229988f Mon Sep 17 00:00:00 2001 From: Val Redchenko Date: Fri, 22 May 2026 16:13:59 +0100 Subject: [PATCH 3/5] fix(webui-dashboard): drop flex:1 from MicroscopeGrid With Keycloak now under the grid in the same column, the grid's flex:1 was expanding the grid to fill the column and leaving whitespace between its last child and the Keycloak box. The grid only ever had flex:1 because it used to be the sole child of the column; now that it has a sibling, it should size to its own content. --- .../src/components/pages/dashboard/components/MicroscopeGrid.tsx | 1 - 1 file changed, 1 deletion(-) 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) => ( From a16a8e4667f06553577eb315a5dd6460a11f4824 Mon Sep 17 00:00:00 2001 From: Val Redchenko Date: Fri, 22 May 2026 16:22:13 +0100 Subject: [PATCH 4/5] feat(webui-dashboard): polish Keycloak box and auth edges - Column gap raised from 1 to 2.5 so the space between the microscope grid and the Keycloak box matches the gap between rows in the SmartEM Application column. - Add production and test Keycloak URLs (identity.diamond.ac.uk and identity-test.diamond.ac.uk) as clickable links, mirroring the link style of the ARIA Depositions Backend box. - Re-route agent->keycloak with larger sourceDotOffset (30) and targetDotOffset (90) so the line runs right of the centred "+N more microscopes" text+icon instead of overlaying it. --- .../components/pages/dashboard/Dashboard.tsx | 28 +++++++++++++++++-- .../dashboard/components/connectionConfig.ts | 8 ++++-- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/webui/src/components/pages/dashboard/Dashboard.tsx b/webui/src/components/pages/dashboard/Dashboard.tsx index 61808ca..053ffe7 100644 --- a/webui/src/components/pages/dashboard/Dashboard.tsx +++ b/webui/src/components/pages/dashboard/Dashboard.tsx @@ -67,7 +67,7 @@ export function Dashboard() { {/* Two equal columns: CryoEM Facilities and SmartEM Application */} {/* CryoEM Facilities */} - + - Clients: -
- SmartEM_User (public, OIDC authorization code + PKCE) + 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. diff --git a/webui/src/components/pages/dashboard/components/connectionConfig.ts b/webui/src/components/pages/dashboard/components/connectionConfig.ts index 820f5c4..83b0f32 100644 --- a/webui/src/components/pages/dashboard/components/connectionConfig.ts +++ b/webui/src/components/pages/dashboard/components/connectionConfig.ts @@ -146,8 +146,9 @@ export const dashboardConnections: Connection[] = [ arrow: 'target', }, // C6: Auth — SmartEM Agent -> DLS Keycloak (client_credentials grant) - // Both live in the left column with Keycloak below the microscope grid; - // a short vertical edge keeps the diagram clean. + // 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', @@ -158,7 +159,8 @@ export const dashboardConnections: Connection[] = [ 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: 20, + sourceDotOffset: 30, + targetDotOffset: 90, arrow: 'target', }, // C6: Auth — SmartEM Backend API -> DLS Keycloak (JWKS for Bearer-token validation) From 53d46a8347129d1409a59260ec8ebc82b99170ce Mon Sep 17 00:00:00 2001 From: Val Redchenko Date: Fri, 22 May 2026 16:24:16 +0100 Subject: [PATCH 5/5] fix(webui-dashboard): nudge agent->keycloak edge further right --- .../components/pages/dashboard/components/connectionConfig.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/src/components/pages/dashboard/components/connectionConfig.ts b/webui/src/components/pages/dashboard/components/connectionConfig.ts index 83b0f32..d88e8a4 100644 --- a/webui/src/components/pages/dashboard/components/connectionConfig.ts +++ b/webui/src/components/pages/dashboard/components/connectionConfig.ts @@ -159,8 +159,8 @@ export const dashboardConnections: Connection[] = [ 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: 30, - targetDotOffset: 90, + sourceDotOffset: 60, + targetDotOffset: 130, arrow: 'target', }, // C6: Auth — SmartEM Backend API -> DLS Keycloak (JWKS for Bearer-token validation)