ae4480e7aa
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.
41 lines
1.4 KiB
CSS
41 lines
1.4 KiB
CSS
/* 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);
|
|
}
|