@stacksjs/defaults 0.75.262 → 0.75.264

package/resources/components/Dashboard/Operations/SchedulerTaskTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { SchedulerTask } from '../../../../functions/operations'
 
@@ -6,76 +8,78 @@ const loading = useReactiveProp('loading', false)
 const busyTask = useReactiveProp('busyTask', '')
 const emit = defineEmits()
 
-function rows(): SchedulerTask[] {
-  return tasks() as SchedulerTask[]
-}
+const COLUMNS = [
+  { key: 'name', label: 'Task', sortable: true, subtitleKey: 'timezone', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'pattern', label: 'Schedule', emptyText: 'Not configured', class: 'font-mono whitespace-nowrap' },
+  { key: 'nextRun', label: 'Next run', type: 'datetime' as const, sortable: true, emptyText: 'Not scheduled', class: 'whitespace-nowrap' },
+  {
+    key: 'state',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40',
+      paused: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+    badgeLabels: { active: 'Active', paused: 'Paused' },
+  },
+]
 
-function formatDate(value: string | null): string {
-  if (!value)
-    return 'Not scheduled'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
+const rows = derived(() => (tasks() as SchedulerTask[]).map(task => ({
+  ...task,
+  state: task.enabled ? 'active' : 'paused',
+})))
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
-  <div :if="loading()" class="px-5 py-14 text-center text-gray-500 text-sm dark:text-neutral-400">
-    Loading scheduled tasks
-  </div>
-  <div :if="!loading() && rows().length === 0" class="px-5 py-14 text-center">
-    <span aria-hidden="true" class="block mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-calendar-03"></span>
-    <p class="font-semibold text-gray-900 dark:text-white">No scheduled tasks registered</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a rate to an app job or register a task in app/Scheduler.ts.</p>
-  </div>
-  <div :if="rows().length > 0" class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-700/50">
-        <tr>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Task</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Schedule</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Next run</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
-          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="task in rows()">
-          <tr>
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ task.name }}</p>
-              <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ task.timezone }}</p>
-            </td>
-            <td class="px-4 py-3 font-mono text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ task.pattern || 'Not configured' }}</td>
-            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(task.nextRun) }}</td>
-            <td class="px-4 py-3">
-              <Badge :variant="task.enabled ? 'success' : 'warning'" dot>{{ task.enabled ? 'Active' : 'Paused' }}</Badge>
-            </td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <div class="inline-flex gap-2 items-center">
-                <Button
-                  size="sm"
-                  :disabled="busyTask() !== '' || !task.enabled"
-                  :loading="busyTask() === task.name + ':run'"
-                  @click="emit('run', task.name)"
-                >
-                  Run now
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  :disabled="busyTask() !== ''"
-                  :loading="busyTask() === task.name + ':toggle'"
-                  @click="emit('toggle', { name: task.name, enabled: !task.enabled })"
-                >
-                  {{ task.enabled ? 'Pause' : 'Resume' }}
-                </Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  The actions are a slot rather than declared row actions: they are text
+  buttons whose disabled and loading state depends on which request is in
+  flight, not icons.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  row-key="name"
+  paginated
+  :page-size="25"
+  empty-title="No scheduled tasks registered"
+  empty-description="Add a rate to an app job or register a task in app/Scheduler.ts."
+>
+  <template #actions="{ row }">
+    <div class="inline-flex gap-2 items-center justify-end w-full whitespace-nowrap">
+      <Button
+        size="sm"
+        :disabled="busyTask() !== '' || !row.enabled"
+        :loading="busyTask() === row.name + ':run'"
+        @click="emit('run', row.name)"
+      >
+        Run now
+      </Button>
+      {{-- Two buttons rather than one with a computed label: the label is
+           the Button's slot content, which a binding on Button cannot set. --}}
+      <template :if="row.enabled">
+        <Button
+          size="sm"
+          variant="outline"
+          :disabled="busyTask() !== ''"
+          :loading="busyTask() === row.name + ':toggle'"
+          @click="emit('toggle', { name: row.name, enabled: false })"
+        >
+          Pause
+        </Button>
+      </template>
+      <template :else>
+        <Button
+          size="sm"
+          variant="outline"
+          :disabled="busyTask() !== ''"
+          :loading="busyTask() === row.name + ':toggle'"
+          @click="emit('toggle', { name: row.name, enabled: true })"
+        >
+          Resume
+        </Button>
+      </template>
+    </div>
+  </template>
+</Table>

package/resources/components/Dashboard/Queue/QueueDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { QueueAggregateStats, QueueBucket, QueueWorker } from '../../../../functions/queue'
 import { fetchQueueStats, fetchQueueWorkers, retryQueueFailures } from '../../../../functions/queue'
@@ -29,14 +31,27 @@ function workerRows(): QueueWorker[] {
   return workers()
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
+const count = (key: string, label: string) => ({ key, label, type: 'number' as const, align: 'right' as const, sortable: true, searchable: false, class: 'text-gray-500 dark:text-neutral-300' })
+
+const QUEUE_COLUMNS = [
+  { key: 'name', label: 'Queue', sortable: true, subtitleKey: 'status', class: 'font-medium text-gray-900 dark:text-white' },
+  count('pending', 'Pending'),
+  count('active', 'Active'),
+  count('completed', 'Completed'),
+  count('failed', 'Failed'),
+  { ...count('total', 'Total'), class: 'font-medium text-gray-900 dark:text-white' },
+]
+
+const WORKER_COLUMNS = [
+  { key: 'name', label: 'Worker', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'queuesLabel', label: 'Queues', sortable: true, class: 'text-gray-500 dark:text-neutral-300' },
+  { key: 'status', label: 'Status', sortable: true, class: 'text-gray-500 dark:text-neutral-300' },
+  count('jobs_processed', 'Processed'),
+  count('failed_jobs', 'Failed'),
+  { key: 'last_heartbeat', label: 'Last heartbeat', type: 'datetime' as const, align: 'right' as const, sortable: true, emptyText: 'Not recorded', class: 'text-gray-500 dark:text-neutral-300' },
+]
+
+const workerTableRows = derived(() => workerRows().map(worker => ({ ...worker, queuesLabel: worker.queues.join(', ') })))
 
 async function loadQueue(): Promise<void> {
   isLoading.set(true)
@@ -129,34 +144,8 @@ onMount(() => {
       <p class="font-semibold text-gray-900 dark:text-white">No queues have recorded jobs</p>
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Dispatch a job to populate queue metrics.</p>
     </div>
-    <div :if="queueRows().length > 0" class="overflow-x-auto">
-      <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-        <thead class="bg-gray-50 dark:bg-neutral-700/50">
-          <tr>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Queue</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Pending</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Active</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Completed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Failed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Total</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="queue in queueRows()">
-            <tr>
-              <td class="px-4 py-3">
-                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ queue.name }}</p>
-                <p class="text-gray-500 text-xs dark:text-neutral-400">{{ queue.status }}</p>
-              </td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.pending }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.active }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.completed }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.failed }}</td>
-              <td class="px-4 py-3 font-medium text-gray-900 text-right text-sm dark:text-white">{{ queue.total }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
+    <div :if="queueRows().length > 0">
+      <Table :columns="QUEUE_COLUMNS" :data="queueRows()" row-key="name" paginated :page-size="25" />
     </div>
   </section>
 
@@ -175,31 +164,8 @@ onMount(() => {
       <p class="font-semibold text-gray-900 dark:text-white">No workers tracked in this process</p>
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Start a queue worker to populate heartbeat and processing metrics.</p>
     </div>
-    <div :if="workerRows().length > 0" class="overflow-x-auto">
-      <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-        <thead class="bg-gray-50 dark:bg-neutral-700/50">
-          <tr>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Worker</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Queues</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Processed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Failed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Last heartbeat</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="worker in workerRows()">
-            <tr>
-              <td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ worker.name }}</td>
-              <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ worker.queues.join(', ') }}</td>
-              <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ worker.status }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(worker.jobs_processed) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(worker.failed_jobs) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatDate(worker.last_heartbeat) }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
+    <div :if="workerRows().length > 0">
+      <Table :columns="WORKER_COLUMNS" :data="workerTableRows()" row-key="name" paginated :page-size="25" />
     </div>
   </section>
 </div>