forked from wrenn/wrenn
Remove expandable metadata from audit log rows
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@ -20,7 +20,6 @@
|
||||
|
||||
// ─── UI state ─────────────────────────────────────────────────────────────
|
||||
|
||||
let expandedId = $state<string | null>(null);
|
||||
let sentinel = $state<HTMLElement | null>(null);
|
||||
let filterDropdownOpen = $state(false);
|
||||
let filterDropdownEl = $state<HTMLElement | null>(null);
|
||||
@ -69,16 +68,6 @@
|
||||
marked_up: 'Marked up'
|
||||
};
|
||||
|
||||
const META_LABELS: Record<string, string> = {
|
||||
template: 'Template',
|
||||
old_name: 'Previous name',
|
||||
new_name: 'New name',
|
||||
name: 'Name',
|
||||
email: 'Email',
|
||||
role: 'Role',
|
||||
new_role: 'New role'
|
||||
};
|
||||
|
||||
// ─── Derived ──────────────────────────────────────────────────────────────
|
||||
|
||||
let activeFilterCount = $derived(
|
||||
@ -210,14 +199,6 @@
|
||||
|
||||
// ─── UI helpers ───────────────────────────────────────────────────────────
|
||||
|
||||
function toggleExpand(id: string) {
|
||||
expandedId = expandedId === id ? null : id;
|
||||
}
|
||||
|
||||
function hasMetadata(log: AuditLog): boolean {
|
||||
return !!log.metadata && Object.keys(log.metadata).length > 0;
|
||||
}
|
||||
|
||||
function describeEvent(log: AuditLog): string {
|
||||
const actor = log.actor_name || (log.actor_type === 'system' ? 'System' : 'Unknown');
|
||||
const meta = (log.metadata ?? {}) as Record<string, string>;
|
||||
@ -497,11 +478,10 @@
|
||||
<div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]">
|
||||
|
||||
<!-- Table header -->
|
||||
<div class="grid grid-cols-[168px_1.4fr_3fr_36px] border-b border-[var(--color-border)] bg-[var(--color-bg-3)]">
|
||||
<div class="grid grid-cols-[168px_1.4fr_3fr] border-b border-[var(--color-border)] bg-[var(--color-bg-3)]">
|
||||
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Time</div>
|
||||
<div class="px-4 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Actor</div>
|
||||
<div class="px-4 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Event</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- Rows -->
|
||||
@ -520,11 +500,7 @@
|
||||
></div>
|
||||
|
||||
<!-- Main row -->
|
||||
<button
|
||||
class="log-row w-full grid grid-cols-[168px_1.4fr_3fr_36px] items-start text-left transition-colors duration-150 hover:bg-[var(--color-bg-2)] {expandedId === log.id ? 'bg-[var(--color-bg-2)]' : ''} {!hasMetadata(log) ? 'cursor-default' : ''}"
|
||||
onclick={() => { if (hasMetadata(log)) toggleExpand(log.id); }}
|
||||
disabled={!hasMetadata(log)}
|
||||
>
|
||||
<div class="grid grid-cols-[168px_1.4fr_3fr] items-start">
|
||||
<!-- Time -->
|
||||
<div class="flex flex-col gap-0.5 px-5 py-4">
|
||||
<span class="text-ui text-[var(--color-text-secondary)]">{ts.date}</span>
|
||||
@ -550,38 +526,7 @@
|
||||
<span class="mt-1 inline-flex items-center rounded-sm border border-[var(--color-border-mid)] bg-[var(--color-bg-4)] px-1.5 py-0.5 font-mono text-badge text-[var(--color-text-muted)]">{log.resource_id}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Expand chevron -->
|
||||
<div class="flex items-center justify-center px-2 py-4">
|
||||
{#if hasMetadata(log)}
|
||||
<svg
|
||||
class="shrink-0 transition-transform duration-200 {expandedId === log.id ? 'rotate-180 text-[var(--color-accent)]' : 'text-[var(--color-text-tertiary)]'}"
|
||||
width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- Expanded metadata -->
|
||||
{#if expandedId === log.id && hasMetadata(log)}
|
||||
<div
|
||||
class="border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-5 py-4"
|
||||
style="animation: fadeUp 0.15s ease both"
|
||||
>
|
||||
<div class="grid grid-cols-[auto_1fr] gap-x-8 gap-y-2">
|
||||
{#each Object.entries(log.metadata ?? {}) as [key, value]}
|
||||
<span class="text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">
|
||||
{META_LABELS[key] ?? key.replace(/_/g, ' ')}
|
||||
</span>
|
||||
<span class="font-mono text-meta text-[var(--color-text-secondary)]">
|
||||
{String(value)}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@ -637,8 +582,4 @@
|
||||
.stripe-pulse {
|
||||
animation: stripePulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.log-row:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user