feat(webui-dashboard): show DLS Keycloak and auth trust edges#207
Merged
Conversation
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.
github-actions
Bot
added
the
smartem-devtools:webui
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).
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.
- 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The webui architecture dashboard didn't reflect the Keycloak auth component that's now in production across the SmartEM system. This adds it.
Test plan
Screenshot
Manual visual verification done locally; the three gold dashed lines route from Web UI / Backend API / Agent to the new DLS Keycloak box. Happy to attach a screenshot to the PR if useful (the rendered diagram is too wide to inline cleanly here).
Out of scope