Skip to content

Commit 8a71486

Browse files
committed
refactor(ui): simplify executions table and add version display
- Add version number (v0.1.0) to navigation header - Simplify duration formatting to always display in seconds - Right-align duration column for better readability - Remove expert mode badge from executions table
1 parent 74ae2be commit 8a71486

File tree

2 files changed

+8
-20
lines changed

2 files changed

+8
-20
lines changed

frontend/src/components/Navigation.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,11 @@
3030
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
3131
<div class="flex h-16 items-center justify-between">
3232
<div class="flex items-center">
33-
<div class="flex-shrink-0">
33+
<div class="flex flex-shrink-0 items-baseline gap-2">
3434
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
3535
Pabawi
3636
</h1>
37+
<span class="text-xs text-gray-500 dark:text-gray-400">v0.1.0</span>
3738
</div>
3839
<div class="ml-10 flex items-baseline space-x-4">
3940
{#each navItems as item}

frontend/src/pages/ExecutionsPage.svelte

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -191,23 +191,18 @@
191191
return new Date(timestamp).toLocaleString();
192192
}
193193
194-
// Format duration
194+
// Format duration - always in seconds
195195
function formatDuration(startedAt: string, completedAt?: string): string {
196196
if (!completedAt) {
197-
return 'In progress';
197+
return '-';
198198
}
199199
200200
const start = new Date(startedAt).getTime();
201201
const end = new Date(completedAt).getTime();
202202
const durationMs = end - start;
203+
const durationSeconds = (durationMs / 1000).toFixed(1);
203204
204-
if (durationMs < 1000) {
205-
return `${durationMs}ms`;
206-
} else if (durationMs < 60000) {
207-
return `${(durationMs / 1000).toFixed(1)}s`;
208-
} else {
209-
return `${(durationMs / 60000).toFixed(1)}m`;
210-
}
205+
return `${durationSeconds}s`;
211206
}
212207
213208
// Get type badge color
@@ -504,7 +499,7 @@
504499
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
505500
Started
506501
</th>
507-
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
502+
<th scope="col" class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
508503
Duration
509504
</th>
510505
</tr>
@@ -529,14 +524,6 @@
529524
Live
530525
</span>
531526
{/if}
532-
{#if execution.expertMode}
533-
<span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800 dark:bg-amber-900/20 dark:text-amber-400" title="Expert mode was enabled">
534-
<svg class="mr-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
535-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
536-
</svg>
537-
Expert
538-
</span>
539-
{/if}
540527
</div>
541528
</td>
542529
<td class="px-6 py-4 text-sm text-gray-900 dark:text-white">
@@ -571,7 +558,7 @@
571558
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
572559
{formatTimestamp(execution.startedAt)}
573560
</td>
574-
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
561+
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-600 dark:text-gray-400">
575562
{formatDuration(execution.startedAt, execution.completedAt)}
576563
</td>
577564
</tr>

0 commit comments

Comments
 (0)