@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/queue/index.stx

@@ -0,0 +1,427 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Queue')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="mb-8">
+      <div>
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Queue Overview</h3>
+
+        <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <dt>
+              <div class="absolute p-3 bg-blue-500 rounded-md">
+                <div class="h-6 w-6 text-white i-hugeicons-queue-02"></div>
+              </div>
+              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Jobs</p>
+            </dt>
+            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">71,897</p>
+              <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+                <div class="flex-shrink-0 self-center h-5 w-5 text-green-500 i-hugeicons-arrow-up-02"></div>
+                <span class="sr-only">Increased by</span>
+                122
+              </p>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <dt>
+              <div class="absolute p-3 bg-blue-500 rounded-md">
+                <div class="h-6 w-6 text-white i-hugeicons-clock-01"></div>
+              </div>
+              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Average Processing Time</p>
+            </dt>
+            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">2.3s</p>
+              <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+                <div class="flex-shrink-0 self-center h-5 w-5 text-green-500 i-hugeicons-arrow-down-02"></div>
+                <span class="sr-only">Decreased by</span>
+                0.4s
+              </p>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <dt>
+              <div class="absolute p-3 bg-blue-500 rounded-md">
+                <div class="h-6 w-6 text-white i-hugeicons-energy"></div>
+              </div>
+              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Jobs Per Minute</p>
+            </dt>
+            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">42</p>
+              <p class="flex items-baseline ml-2 font-semibold text-red-600 text-sm">
+                <div class="flex-shrink-0 self-center h-5 w-5 text-red-500 i-hugeicons-arrow-down-02"></div>
+                <span class="sr-only">Decreased by</span>
+                8
+              </p>
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <div class="mt-8">
+      <div class="sm:flex sm:items-center">
+        <div class="sm:flex-auto">
+          <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Queue Statistics</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Detailed breakdown of jobs by queue and status</p>
+        </div>
+      </div>
+
+      <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6">
+        <template :for="queue in queueList">
+          <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <div class="flex items-center justify-between mb-4">
+              <h4 class="inline-flex items-center px-2.5 py-0.5 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-600 rounded-full">{{ queue.name }}</h4>
+            </div>
+
+            <div class="space-y-4">
+              <div class="grid gap-4 grid-cols-3">
+                <template :for="entry in queue.entries">
+                  <div class="text-center">
+                    <div class="font-mono font-semibold text-2xl {{ statusValueClass(entry.status) }}">{{ entry.value }}</div>
+                    <div class="capitalize text-gray-500 text-xs dark:text-neutral-400">{{ entry.status }}</div>
+                  </div>
+                </template>
+              </div>
+
+              <div class="overflow-hidden h-2 bg-gray-100 dark:bg-neutral-600 rounded-full">
+                <div class="flex h-full">
+                  <div class="h-full bg-green-500" style="width: {{ queue.successRate }}%"></div>
+                  <div class="h-full bg-red-500" style="width: {{ queue.failureRate }}%"></div>
+                </div>
+              </div>
+              <div class="flex justify-between text-gray-500 text-xs dark:text-neutral-400">
+                <span>Success Rate: {{ queue.successRate }}%</span>
+                <span>Failure Rate: {{ queue.failureRate }}%</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div class="my-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-6">
+          <h4 class="font-medium text-base text-gray-900 dark:text-neutral-100">Queue Statistics</h4>
+          <div class="flex gap-4 items-center">
+            <select x-model="selectedQueue" class="block px-3 py-1.5 h-9 w-32 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+              <option value="all">All Queues</option>
+              <template :for="queueName in queueNames">
+                <option value="{{ queueName }}">{{ queueName }}</option>
+              </template>
+            </select>
+
+            <select x-model="timeRange" class="block px-3 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+              <option value="hour">Last Hour</option>
+              <option value="day">Last 24 Hours</option>
+              <option value="week">Last Week</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="grid gap-6 grid-cols-1 lg:grid-cols-2">
+          <div class="h-80">
+            <canvas id="queue_throughput_chart"></canvas>
+          </div>
+          <div class="h-80">
+            <canvas id="queue_wait_chart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h4 class="font-medium text-base text-gray-900 dark:text-neutral-100">Workers</h4>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Monitor your queue workers and their performance.</p>
+          </div>
+          <div class="flex gap-4 items-center">
+            <button @click="retryFailedJobs()" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+              <div class="mr-1 h-5 w-5 i-hugeicons-arrow-path"></div>
+              Retry Failed Jobs
+            </button>
+            <button @click="clearFailedJobs()" class="inline-flex items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+              <div class="mr-1 h-5 w-5 i-hugeicons-trash"></div>
+              Clear Failed Jobs
+            </button>
+          </div>
+        </div>
+
+        <div class="space-y-6">
+          <template :for="worker in workers">
+            <div class="relative p-6 border rounded-lg dark:border-neutral-600 hover:border-blue-200 dark:hover:border-blue-500 duration-200 transition-all">
+              <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+                <div>
+                  <h5 class="font-medium text-gray-900 text-lg dark:text-neutral-100">{{ worker.name }}</h5>
+                  <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Queue: {{ worker.queue }}</p>
+                </div>
+
+                <div>
+                  <div class="flex gap-2 items-center">
+                    <div class="h-2 w-2 rounded-full {{ workerStatusDot(worker.status) }}"></div>
+                    <span class="font-medium text-gray-900 text-sm dark:text-neutral-100">{{ worker.status.charAt(0).toUpperCase() + worker.status.slice(1) }}</span>
+                  </div>
+                  <div class="flex gap-2 items-center mt-2">
+                    <button :show="{{ worker.status !== 'running' ? 'true' : 'false' }}" @click="restartWorker('{{ worker.id }}')" class="inline-flex items-center px-2 py-1 font-medium text-green-700 text-xs dark:text-green-300 bg-green-50 dark:bg-green-900/50 hover:bg-green-100 dark:hover:bg-green-900 rounded-md">
+                      <div class="mr-1 h-4 w-4 i-hugeicons-play"></div>
+                      Start
+                    </button>
+                    <button :show="{{ worker.status === 'running' ? 'true' : 'false' }}" @click="pauseWorker('{{ worker.id }}')" class="inline-flex items-center px-2 py-1 font-medium text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 hover:bg-yellow-100 dark:hover:bg-yellow-900 rounded-md">
+                      <div class="mr-1 h-4 w-4 i-hugeicons-pause"></div>
+                      Pause
+                    </button>
+                    <button :show="{{ worker.status === 'running' ? 'true' : 'false' }}" @click="stopWorker('{{ worker.id }}')" class="inline-flex items-center px-2 py-1 font-medium text-red-700 text-xs dark:text-red-300 bg-red-50 dark:bg-red-900/50 hover:bg-red-100 dark:hover:bg-red-900 rounded-md">
+                      <div class="mr-1 h-4 w-4 i-hugeicons-stop"></div>
+                      Stop
+                    </button>
+                  </div>
+                  <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Last heartbeat: {{ worker.last_heartbeat }}</p>
+                </div>
+
+                <div>
+                  <p class="text-gray-500 text-sm dark:text-neutral-400">Jobs Processed</p>
+                  <p class="mt-1 font-medium text-gray-900 text-lg dark:text-neutral-100">{{ worker.jobs_processed.toLocaleString() }}</p>
+                  <p class="mt-1 text-red-600 text-sm dark:text-red-400">{{ worker.failed_jobs }} failed</p>
+                </div>
+
+                <div>
+                  <div class="space-y-4">
+                    <div>
+                      <div class="flex items-center justify-between text-sm">
+                        <span class="text-gray-500 dark:text-neutral-400">Connection</span>
+                        <span class="font-medium text-gray-900 dark:text-neutral-100">{{ worker.connection }}</span>
+                      </div>
+                      <div class="flex items-center justify-between mt-2 text-sm">
+                        <span class="text-gray-500 dark:text-neutral-400">Memory Limit</span>
+                        <span class="font-medium text-gray-900 dark:text-neutral-100">{{ worker.memory_limit }}MB</span>
+                      </div>
+                      <div class="flex items-center justify-between mt-2 text-sm">
+                        <span class="text-gray-500 dark:text-neutral-400">Timeout</span>
+                        <span class="font-medium text-gray-900 dark:text-neutral-100">{{ worker.timeout }}s</span>
+                      </div>
+                      <div class="flex items-center justify-between mt-2 text-sm">
+                        <span class="text-gray-500 dark:text-neutral-400">Supervisor</span>
+                        <span class="font-medium text-gray-900 dark:text-neutral-100">{{ worker.supervisor_id }}</span>
+                      </div>
+                    </div>
+
+                    <div :show="{{ worker.memory_usage / worker.memory_limit > 0.9 ? 'true' : 'false' }}" class="p-3 bg-yellow-50 dark:bg-yellow-900/50 rounded-md">
+                      <div class="flex">
+                        <div class="h-5 w-5 text-yellow-400 i-hugeicons-exclamation-triangle"></div>
+                        <div class="ml-3">
+                          <h3 class="font-medium text-sm text-yellow-800 dark:text-yellow-300">High Memory Usage</h3>
+                          <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-200">
+                            <p>Worker is approaching memory limit. Consider restarting or increasing the limit.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface QueueStats {
+  queued: number
+  processing: number
+  processed: number
+  released: number
+  failed: number
+}
+
+interface WorkerStats {
+  id: string
+  name: string
+  status: 'running' | 'paused' | 'stopped'
+  jobs_processed: number
+  failed_jobs: number
+  last_heartbeat: string
+  queue: string
+  memory_usage: number
+  cpu_usage: number
+  memory_limit: number
+  timeout: number
+  supervisor_id: string
+  connection: 'redis' | 'database' | 'sqs'
+  tries: number
+  retry_after: number
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const queues = state<Record<string, QueueStats>>({
+  default: { queued: 70, processing: 15, processed: 250, released: 5, failed: 2 },
+  high: { queued: 23, processing: 8, processed: 180, released: 3, failed: 1 },
+  low: { queued: 45, processing: 12, processed: 150, released: 4, failed: 3 },
+})
+
+const workers = state<WorkerStats[]>([
+  { id: '1', name: 'worker-1', status: 'running', jobs_processed: 1250, failed_jobs: 23, last_heartbeat: '2024-03-14 10:16:32', queue: 'default', memory_usage: 128.5, cpu_usage: 23.4, memory_limit: 128, timeout: 60, supervisor_id: 'supervisor-1', connection: 'redis', tries: 3, retry_after: 90 },
+  { id: '2', name: 'worker-2', status: 'running', jobs_processed: 980, failed_jobs: 15, last_heartbeat: '2024-03-14 10:16:30', queue: 'high', memory_usage: 145.2, cpu_usage: 28.7, memory_limit: 128, timeout: 60, supervisor_id: 'supervisor-2', connection: 'redis', tries: 3, retry_after: 90 },
+  { id: '3', name: 'worker-3', status: 'running', jobs_processed: 850, failed_jobs: 18, last_heartbeat: '2024-03-14 10:16:28', queue: 'low', memory_usage: 112.8, cpu_usage: 19.5, memory_limit: 128, timeout: 60, supervisor_id: 'supervisor-3', connection: 'redis', tries: 3, retry_after: 90 },
+])
+
+const timeRange = state('hour')
+const selectedQueue = state('all')
+const isLoading = state(false)
+
+let chartHandles: Array<{ destroy: () => void }> = []
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: { beginAtZero: true, grid: { color: 'rgba(200, 200, 200, 0.1)' }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+    x: { grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+  },
+  plugins: {
+    legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: { mode: 'index', intersect: false },
+  },
+  interaction: { mode: 'index', intersect: false },
+}
+
+function queueNames(): string[] {
+  return Object.keys(queues())
+}
+
+function queueList(): Array<{ name: string, entries: Array<{ status: string, value: number }>, successRate: string, failureRate: string }> {
+  return Object.entries(queues()).map(([name, stats]) => {
+    const total = stats.processed + stats.failed
+    const successRate = total === 0 ? '0.0' : ((stats.processed / total) * 100).toFixed(1)
+    const failureRate = total === 0 ? '0.0' : ((stats.failed / total) * 100).toFixed(1)
+    return {
+      name,
+      entries: [
+        { status: 'queued', value: stats.queued },
+        { status: 'processing', value: stats.processing },
+        { status: 'processed', value: stats.processed },
+        { status: 'released', value: stats.released },
+        { status: 'failed', value: stats.failed },
+      ],
+      successRate,
+      failureRate,
+    }
+  })
+}
+
+function statusValueClass(status: string): string {
+  switch (status) {
+    case 'failed': return 'text-red-600 dark:text-red-400'
+    case 'processed': return 'text-green-600 dark:text-green-400'
+    case 'processing': return 'text-blue-600 dark:text-blue-400'
+    case 'queued': return 'text-yellow-600 dark:text-yellow-400'
+    case 'released': return 'text-purple-600 dark:text-purple-400'
+    default: return ''
+  }
+}
+
+function workerStatusDot(status: string): string {
+  if (status === 'running')
+    return 'bg-green-500'
+  if (status === 'paused')
+    return 'bg-yellow-500'
+  if (status === 'stopped')
+    return 'bg-red-500'
+  return 'bg-gray-400'
+}
+
+function getThroughputData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [
+      { label: 'Processed', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 100) + 50), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true },
+      { label: 'Failed', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 10)), borderColor: 'rgb(239, 68, 68)', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true },
+    ],
+  }
+}
+
+function getWaitTimeData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [{
+      label: 'Average Wait Time (seconds)',
+      data: Array.from({ length: 24 }, () => Math.random() * 5 + 1),
+      borderColor: 'rgb(59, 130, 246)',
+      backgroundColor: 'rgba(59, 130, 246, 0.1)',
+      fill: true,
+    }],
+  }
+}
+
+async function restartWorker(workerId: string): Promise<void> {
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  workers.set(workers().map(w => w.id === workerId ? { ...w, status: 'running', last_heartbeat: new Date().toISOString() } : w))
+  isLoading.set(false)
+}
+
+async function pauseWorker(workerId: string): Promise<void> {
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  workers.set(workers().map(w => w.id === workerId ? { ...w, status: 'paused' } : w))
+  isLoading.set(false)
+}
+
+async function stopWorker(workerId: string): Promise<void> {
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  workers.set(workers().map(w => w.id === workerId ? { ...w, status: 'stopped' } : w))
+  isLoading.set(false)
+}
+
+async function retryFailedJobs(): Promise<void> {
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  const next: Record<string, QueueStats> = {}
+  for (const [name, stats] of Object.entries(queues()))
+    next[name] = { ...stats, queued: stats.queued + stats.failed, failed: 0 }
+  queues.set(next)
+  isLoading.set(false)
+}
+
+async function clearFailedJobs(): Promise<void> {
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  const next: Record<string, QueueStats> = {}
+  for (const [name, stats] of Object.entries(queues()))
+    next[name] = { ...stats, failed: 0 }
+  queues.set(next)
+  isLoading.set(false)
+}
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const throughput = useChart({ Chart: Ctor, id: 'queue_throughput_chart', type: 'line', data: getThroughputData(), options: chartOptions })
+  const wait = useChart({ Chart: Ctor, id: 'queue_wait_chart', type: 'line', data: getWaitTimeData(), options: chartOptions })
+  chartHandles = [throughput.instance, wait.instance].filter((c): c is ChartLike => c !== null)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(c => c.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection