@@ -99,7 +100,7 @@ import { AuditEvent, AuditCorrelationCluster } from '../../core/api/audit-log.mo
Details
-
{{ (event()?.details ?? {}) | json }}
+
@if (event()?.module === 'policy') {
@@ -136,9 +137,9 @@ import { AuditEvent, AuditCorrelationCluster } from '../../core/api/audit-log.mo
-
Configuration Diff
+
{{ event()?.diff ? 'Configuration Diff' : 'State at Time of Action' }}
@if (hasGovernanceDiff()) {
@if (govDiffEntries(event()?.diff?.added).length > 0) {
@@ -178,23 +179,27 @@ import { AuditEvent, AuditCorrelationCluster } from '../../core/api/audit-log.mo
}
} @else {
-
-
-
Before
-
{{ (event()?.diff?.before ?? {}) | json }}
-
-
-
After
-
{{ (event()?.diff?.after ?? {}) | json }}
-
-
- @if (event()?.diff?.fields?.length) {
-
-
Changed fields:
- @for (field of event()?.diff?.fields; track field) {
-
{{ field }}
+ @if (activeDiff(); as diff) {
+
+
+
{{ event()?.diff ? 'Before' : 'State at time of action' }}
+
{{ (diff.before ?? {}) | json }}
+
+ @if (diff.after !== null && diff.after !== undefined) {
+
+
After
+
{{ (diff.after ?? {}) | json }}
+
}
+ @if (diff.fields?.length) {
+
+ {{ event()?.diff ? 'Changed fields:' : 'Fields captured:' }}
+ @for (field of diff.fields; track field) {
+ {{ field }}
+ }
+
+ }
}
}
@@ -264,6 +269,12 @@ import { AuditEvent, AuditCorrelationCluster } from '../../core/api/audit-log.mo
.badge.module.policy { background: var(--color-status-info-bg); color: var(--color-status-info-text); }
.badge.module.authority { background: var(--color-status-excepted-bg); color: var(--color-status-excepted); }
.badge.module.vex { background: var(--color-status-success-bg); color: var(--color-status-success-text); }
+ .badge.module.release { background: var(--color-status-warning-bg); color: var(--color-status-warning-text); }
+ .badge.module.attestor { background: var(--color-status-success-bg); color: var(--color-status-success-text); }
+ .badge.module.doctor { background: var(--color-status-error-bg); color: var(--color-status-error-text); }
+ .badge.module.signals { background: var(--color-status-info-bg); color: var(--color-status-info-text); }
+ .badge.module.advisory-ai { background: var(--color-status-excepted-bg); color: var(--color-status-excepted); }
+ .badge.module.riskengine { background: var(--color-status-warning-bg); color: var(--color-status-warning-text); }
.badge.action { background: var(--color-surface-elevated); }
.badge.action.create { background: var(--color-status-success-bg); color: var(--color-status-success-text); }
.badge.action.update { background: var(--color-status-info-bg); color: var(--color-status-info-text); }
@@ -323,6 +334,26 @@ export class AuditEventDetailComponent implements OnInit {
readonly event = signal
(null);
readonly correlation = signal(null);
+ /** Synthetic diff auto-constructed from details.beforeState when event.diff is absent */
+ readonly syntheticDiff = computed(() => {
+ const ev = this.event();
+ if (!ev || ev.diff) return null;
+ const beforeState = ev.details?.['beforeState'];
+ if (!beforeState || typeof beforeState !== 'object') return null;
+ const responseBody = ev.details?.['requestBody'];
+ const after = (responseBody && typeof responseBody === 'object') ? responseBody : null;
+ return {
+ before: beforeState,
+ after: after ?? undefined,
+ fields: Object.keys(beforeState as Record),
+ };
+ });
+
+ /** Returns the real diff or the synthetic diff, whichever is active */
+ readonly activeDiff = computed(() => {
+ return this.event()?.diff ?? this.syntheticDiff();
+ });
+
ngOnInit(): void {
this.route.params.subscribe((params) => {
const eventId = params['eventId'];
diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-event-details-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-event-details-panel.component.ts
new file mode 100644
index 000000000..9634e53b6
--- /dev/null
+++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-event-details-panel.component.ts
@@ -0,0 +1,453 @@
+import { Component, Input, ChangeDetectionStrategy, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuditEvent, AuditDiff } from '../../core/api/audit-log.models';
+
+@Component({
+ selector: 'app-audit-event-details-panel',
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+ @if (event) {
+
+ @if (hasHttpContext) {
+
+ HTTP Context
+
+
+ {{ event.details?.['httpMethod'] }}
+ →
+ {{ event.details?.['statusCode'] }} {{ httpStatusText }}
+
+ @if (event.details?.['path']) {
+
+ Path
+ {{ event.details?.['path'] }}
+
+ }
+ @if (event.details?.['responseResourceId']) {
+
+ Response Resource
+ {{ event.details?.['responseResourceId'] }}
+
+ }
+
+ @for (entry of requestBodyEntries; track entry[0]) {
+
+ {{ entry[0] }}
+ @if (isRedacted(entry[1])) {
+ {{ entry[1] }}
+ } @else {
+ {{ formatValue(entry[1]) }}
+ }
+
+ }
+
State at Time of Action
+
+ @for (entry of beforeStateEntries; track entry[0]) {
+
+ {{ entry[0] }}
+ {{ formatValue(entry[1]) }}
+
+ }
+
{{ syntheticDiffLabel }}
+
+
+
{{ hasBothStates ? 'Before' : 'State at time of action' }}
+
{{ syntheticDiff.before | json }}
+
+ @if (syntheticDiff.after !== null && syntheticDiff.after !== undefined) {
+
+
After
+
{{ syntheticDiff.after | json }}
+
+ }
+
+ Fields captured:
+ @for (field of syntheticDiff.fields; track field) {
+ {{ field }}
+ }
+
+ }
+
+ }
+
+
+ @if (remainingDetails.length > 0) {
+
+
+ @if (rawExpanded()) {
+
+ @for (entry of remainingDetails; track entry[0]) {
+
+ {{ entry[0] }}
+ {{ formatValue(entry[1]) }}
+
+ }
+
+
+