feat(ui): AuditDrilldownDrawer with JSON/SQL render, cURL, drill-back, redaction badges (#23 M7)
Implements Bundle C (M7-T4 through M7-T8) of the Audit Log #23 M7 Central UI work: a right-side off-canvas drawer that opens from AuditResultsGrid row clicks and renders one AuditEvent in full. Cohesive single-component delivery: - Read-only fields stacked (form-layout memory): Channel/Kind, Status, HttpStatus, Target, Actor, Source* provenance, CorrelationId, OccurredAtUtc, IngestedAtUtc, DurationMs. - Channel-aware body renderer: DbOutbound {sql, parameters} payloads render a code-block with CSS-only .language-sql class plus a parameter <dl>; other channels JSON-pretty-print when parseable and fall back to verbatim <pre>. - Redaction badges on Request/Response when the body contains the <redacted> or <redacted: redactor error> sentinels. - Copy-as-cURL (API channels only) builds a curl command from Target + optional {method, headers, body} RequestSummary JSON and writes it via navigator.clipboard.writeText. - Show-all-events drill-back navigates to /audit/log?correlationId={id} when the event carries a CorrelationId. - Close button + backdrop-click both raise OnClose. AuditLogPage wires Event/IsOpen/OnClose; row clicks now open the drawer (HandleRowSelected pins _selectedEvent + _drawerOpen=true). 11 bUnit tests cover field rendering, JSON pretty-print, verbatim fallback, SQL block, conditional buttons, redaction badges, navigation drill-back, and clipboard interop. No third-party UI libraries: Bootstrap offcanvas + scoped razor.css only.
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
/* Audit Log drilldown drawer (#23 M7 Bundle C).
|
||||
The base offcanvas + backdrop classes come from Bootstrap. The local
|
||||
overrides below pin our preferred width and pre-block behaviour. */
|
||||
|
||||
.audit-drilldown-drawer {
|
||||
/* Slightly wider than the parked-messages drawer because audit rows can
|
||||
carry larger JSON bodies and SQL blocks. Clamp to viewport so narrow
|
||||
windows still get the close button on screen. */
|
||||
width: min(720px, 95vw);
|
||||
}
|
||||
|
||||
.audit-drilldown-drawer .drawer-pre {
|
||||
/* Wrap long lines and bound the per-block height so the drawer body
|
||||
stays scrollable end-to-end instead of pushing the action buttons
|
||||
below the fold. */
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.audit-drilldown-drawer .drawer-pre.json {
|
||||
/* JSON blocks get a faint left rule so they read as quoted material. */
|
||||
border-left: 3px solid var(--bs-info-border-subtle);
|
||||
}
|
||||
|
||||
.audit-drilldown-drawer .drawer-pre code.language-sql {
|
||||
/* CSS-only highlight cue: SQL stays mono with a hint of bold weight on
|
||||
a slightly different background so the SQL block reads distinct from
|
||||
generic JSON pretty-prints without loading a syntax-highlighter JS
|
||||
library. */
|
||||
font-family: var(--bs-font-monospace);
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.audit-drilldown-drawer .drawer-footer {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
Reference in New Issue
Block a user