M9 diagnostics follow-ups: playback relabel, sort, connected fix, per-skip + track-identity #105
@@ -36,13 +36,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Default view = the most recent N events, no time window. The
|
||||
// start/end window is an Advanced affordance.
|
||||
const DEFAULT_LIMIT = 500;
|
||||
|
||||
// Filter state.
|
||||
let accountId = $state('');
|
||||
let clientId = $state('');
|
||||
let kind = $state('');
|
||||
let fromLocal = $state('');
|
||||
let toLocal = $state('');
|
||||
let limit = $state(500);
|
||||
let limit = $state(DEFAULT_LIMIT);
|
||||
|
||||
// True when an explicit time window is set (drives the caption wording).
|
||||
const hasWindow = $derived(Boolean(fromLocal || toLocal));
|
||||
|
||||
function resetWindow() {
|
||||
fromLocal = '';
|
||||
toLocal = '';
|
||||
limit = DEFAULT_LIMIT;
|
||||
}
|
||||
|
||||
// datetime-local (browser-local, no tz) → RFC3339 UTC the API accepts.
|
||||
function toRfc(v: string): string | undefined {
|
||||
@@ -191,77 +204,97 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Filters -->
|
||||
<section class="flex flex-wrap items-end gap-3">
|
||||
<label class="block text-xs text-text-secondary">
|
||||
Device
|
||||
<select
|
||||
bind:value={clientId}
|
||||
class="mt-1 block w-48 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
>
|
||||
<option value="">All devices</option>
|
||||
{#each devices as d (d.client_id)}
|
||||
<option value={d.client_id}>{d.client_id.slice(0, 12)} · {d.event_count}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
Kind
|
||||
<select
|
||||
bind:value={kind}
|
||||
class="mt-1 block w-40 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
>
|
||||
<option value="">All kinds</option>
|
||||
{#each KINDS as k (k)}
|
||||
<option value={k}>{kindLabel(k)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
From
|
||||
<input
|
||||
type="datetime-local"
|
||||
bind:value={fromLocal}
|
||||
class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
/>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
To
|
||||
<input
|
||||
type="datetime-local"
|
||||
bind:value={toLocal}
|
||||
class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
/>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
Limit
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="5000"
|
||||
bind:value={limit}
|
||||
class="mt-1 block w-24 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
/>
|
||||
</label>
|
||||
<!-- Filters. Default view = most recent {DEFAULT_LIMIT} events, no time
|
||||
window; the start/end window lives under Advanced. -->
|
||||
<section class="space-y-3">
|
||||
<div class="flex flex-wrap items-end gap-3">
|
||||
<label class="block text-xs text-text-secondary">
|
||||
Device
|
||||
<select
|
||||
bind:value={clientId}
|
||||
class="mt-1 block w-48 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
>
|
||||
<option value="">All devices</option>
|
||||
{#each devices as d (d.client_id)}
|
||||
<option value={d.client_id}>{d.client_id.slice(0, 12)} · {d.event_count}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
Kind
|
||||
<select
|
||||
bind:value={kind}
|
||||
class="mt-1 block w-40 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
>
|
||||
<option value="">All kinds</option>
|
||||
{#each KINDS as k (k)}
|
||||
<option value={k}>{kindLabel(k)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="ml-auto flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={onCopyJson}
|
||||
disabled={rows.length === 0}
|
||||
class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
|
||||
>
|
||||
<Copy size={15} /> Copy JSON
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={onDownloadNdjson}
|
||||
disabled={rows.length === 0}
|
||||
class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
|
||||
>
|
||||
<Download size={15} /> Download
|
||||
</button>
|
||||
<div class="ml-auto flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={onCopyJson}
|
||||
disabled={rows.length === 0}
|
||||
class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
|
||||
>
|
||||
<Copy size={15} /> Copy JSON
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={onDownloadNdjson}
|
||||
disabled={rows.length === 0}
|
||||
class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
|
||||
>
|
||||
<Download size={15} /> Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced: explicit start/end window + row cap. Collapsed by
|
||||
default so the common case (recent N) needs no interaction. -->
|
||||
<details class="rounded-md border border-border" open={hasWindow}>
|
||||
<summary class="cursor-pointer px-3 py-2 text-xs text-text-secondary">
|
||||
Advanced filters{hasWindow ? ' · window active' : ''}
|
||||
</summary>
|
||||
<div class="flex flex-wrap items-end gap-3 border-t border-border px-3 py-3">
|
||||
<label class="block text-xs text-text-secondary">
|
||||
From
|
||||
<input
|
||||
type="datetime-local"
|
||||
bind:value={fromLocal}
|
||||
class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
/>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
To
|
||||
<input
|
||||
type="datetime-local"
|
||||
bind:value={toLocal}
|
||||
class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
/>
|
||||
</label>
|
||||
<label class="block text-xs text-text-secondary">
|
||||
Limit
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="5000"
|
||||
bind:value={limit}
|
||||
class="mt-1 block w-24 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onclick={resetWindow}
|
||||
class="rounded border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-hover"
|
||||
>
|
||||
Reset to recent {DEFAULT_LIMIT}
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- Timeline -->
|
||||
@@ -276,7 +309,13 @@
|
||||
</p>
|
||||
{:else}
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-text-muted">{rows.length} events (oldest first)</span>
|
||||
<span class="text-xs text-text-muted">
|
||||
{#if hasWindow}
|
||||
{rows.length} events in window (oldest first)
|
||||
{:else}
|
||||
Most recent {rows.length} events (oldest first) · set a time window under Advanced
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<ul class="divide-y divide-border rounded-md border border-border font-mono text-xs">
|
||||
{#each rows as r (r.id)}
|
||||
|
||||
Reference in New Issue
Block a user