nvent 0.4.0

package/dist/runtime/app/pages/queues/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="h-full flex flex-col overflow-hidden">
+    <!-- Header -->
+    <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-3 shrink-0">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <h1 class="text-lg font-semibold">
+            Queues
+          </h1>
+          <div
+            v-if="isConnected"
+            class="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400"
+          >
+            <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+            <span>Live</span>
+          </div>
+          <div
+            v-else-if="isReconnecting"
+            class="flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400"
+          >
+            <div class="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+            <span>Reconnecting...</span>
+          </div>
+        </div>
+        <div class="flex items-center gap-3">
+          <ClientOnly>
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              :loading="status === 'pending'"
+              @click="refresh"
+            >
+              Refresh
+            </UButton>
+          </ClientOnly>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex-1 min-h-0 overflow-hidden flex flex-col">
+      <div
+        v-if="!queuesWithLive || queuesWithLive.length === 0"
+        class="flex-1 flex items-center justify-center text-sm text-gray-400"
+      >
+        No queues found
+      </div>
+      <template v-else>
+        <div class="flex-1 min-h-0 p-4 overflow-auto">
+          <UTable
+            ref="table"
+            v-model:pagination="pagination"
+            :data="queuesWithLive"
+            :columns="columns"
+            :loading="status === 'pending'"
+            :pagination-options="{
+  getPaginationRowModel: getPaginationRowModel()
+}"
+            :ui="{
+  base: 'table-fixed border-separate border-spacing-0',
+  thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+  tbody: '[&>tr]:last:[&>td]:border-b-0',
+  th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+  td: 'border-b border-default',
+  separator: 'h-0'
+}"
+          />
+        </div>
+
+        <div class="flex items-center justify-between gap-3 border-t border-default p-4 mt-4 shrink-0">
+          <div class="text-sm text-muted">
+            {{ queuesWithLive.length }} queue{{ queuesWithLive.length === 1 ? "" : "s" }}
+          </div>
+          <div class="flex items-center gap-1.5">
+            <UPagination
+              :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
+              :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+              :total="queuesWithLive.length"
+              @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Config Details Slideover -->
+    <QueueConfigDetails
+      v-if="selectedQueueForConfig"
+      v-model:open="configDetailsOpen"
+      :queue-name="selectedQueueForConfig.name"
+      :queue-config="selectedQueueForConfig.config?.queue"
+      :worker-config="selectedQueueForConfig.config?.worker"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "#imports";
+import { getPaginationRowModel } from "@tanstack/table-core";
+import { UTable, UButton, UPagination } from "#components";
+import { useQueues } from "../../composables/useQueues";
+import { useQueuesLive } from "../../composables/useQueuesLive";
+import { useComponentRouter } from "../../composables/useComponentRouter";
+import QueueConfigDetails from "../../components/QueueConfigDetails.vue";
+const UBadgeComponent = resolveComponent("UBadge");
+const UButtonComponent = resolveComponent("UButton");
+const { queues, refresh, status } = useQueues();
+const { queues: queuesWithLive, isConnected, isReconnecting } = useQueuesLive(queues);
+const router = useComponentRouter();
+const table = useTemplateRef("table");
+const pagination = ref({
+  pageIndex: 0,
+  pageSize: 10
+});
+const configDetailsOpen = ref(false);
+const selectedQueueForConfig = ref(null);
+const openConfigDetails = (queue) => {
+  selectedQueueForConfig.value = queue;
+  configDetailsOpen.value = true;
+};
+const columns = [
+  {
+    accessorKey: "name",
+    header: "Queue Name",
+    cell: ({ row }) => {
+      return h("div", {
+        class: "font-medium text-highlighted cursor-pointer hover:underline",
+        onClick: () => router.push(`/queues/${row.original.name}/jobs`)
+      }, row.original.name);
+    }
+  },
+  {
+    accessorKey: "counts.waiting",
+    header: "Waiting",
+    cell: ({ row }) => {
+      const count = row.original.counts.waiting;
+      return h("div", {
+        class: `flex items-center justify-center w-12 h-7 rounded text-sm font-medium ${count > 0 ? "bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400" : "bg-gray-50 dark:bg-gray-900/50 text-gray-400 dark:text-gray-600"}`
+      }, String(count));
+    }
+  },
+  {
+    accessorKey: "counts.active",
+    header: "Active",
+    cell: ({ row }) => {
+      const count = row.original.counts.active;
+      return h("div", {
+        class: `flex items-center justify-center w-12 h-7 rounded text-sm font-medium ${count > 0 ? "bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400" : "bg-gray-50 dark:bg-gray-900/50 text-gray-400 dark:text-gray-600"}`
+      }, String(count));
+    }
+  },
+  {
+    accessorKey: "counts.completed",
+    header: "Completed",
+    cell: ({ row }) => {
+      const count = row.original.counts.completed;
+      return h("div", {
+        class: `flex items-center justify-center w-12 h-7 rounded text-sm font-medium ${count > 0 ? "bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400" : "bg-gray-50 dark:bg-gray-900/50 text-gray-400 dark:text-gray-600"}`
+      }, String(count));
+    }
+  },
+  {
+    accessorKey: "counts.failed",
+    header: "Failed",
+    cell: ({ row }) => {
+      const count = row.original.counts.failed;
+      return h("div", {
+        class: `flex items-center justify-center w-12 h-7 rounded text-sm font-medium ${count > 0 ? "bg-red-50 dark:bg-red-950/50 text-red-600 dark:text-red-400" : "bg-gray-50 dark:bg-gray-900/50 text-gray-400 dark:text-gray-600"}`
+      }, String(count));
+    }
+  },
+  {
+    accessorKey: "counts.delayed",
+    header: "Delayed",
+    cell: ({ row }) => {
+      const count = row.original.counts.delayed;
+      return h("div", {
+        class: `flex items-center justify-center w-12 h-7 rounded text-sm font-medium ${count > 0 ? "bg-purple-50 dark:bg-purple-950/50 text-purple-600 dark:text-purple-400" : "bg-gray-50 dark:bg-gray-900/50 text-gray-400 dark:text-gray-600"}`
+      }, String(count));
+    }
+  },
+  {
+    accessorKey: "isPaused",
+    header: "Status",
+    cell: ({ row }) => {
+      return h(UBadgeComponent, {
+        label: row.original.isPaused ? "Paused" : "Running",
+        color: row.original.isPaused ? "warning" : "success",
+        variant: "subtle"
+      });
+    }
+  },
+  {
+    id: "config",
+    header: "Config",
+    cell: ({ row }) => {
+      return h(UButtonComponent, {
+        icon: "i-lucide-settings",
+        size: "xs",
+        color: "neutral",
+        variant: "ghost",
+        square: true,
+        title: "View configuration",
+        onClick: () => {
+          openConfigDetails(row.original);
+        }
+      });
+    }
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => {
+      return h(UButtonComponent, {
+        icon: "i-lucide-arrow-right",
+        size: "xs",
+        color: "neutral",
+        variant: "ghost",
+        square: true,
+        onClick: () => {
+          router.push(`/queues/${row.original.name}/jobs`);
+        }
+      });
+    }
+  }
+];
+</script>

package/dist/runtime/app/pages/queues/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/queues/job.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/queues/job.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="h-full flex flex-col overflow-hidden">
+    <!-- Header -->
+    <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-3 shrink-0">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <UButton
+            icon="i-lucide-arrow-left"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="back"
+          />
+          <div>
+            <h1 class="text-lg font-semibold">
+              {{ job?.name || "Job Details" }}
+            </h1>
+            <p class="text-xs text-gray-500 font-mono">
+              {{ job?.id }}
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center gap-3">
+          <UBadge
+            v-if="job?.state"
+            :label="job.state"
+            :color="stateColor"
+            variant="subtle"
+            class="capitalize"
+          />
+          <UButton
+            icon="i-lucide-refresh-cw"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="() => refresh()"
+          >
+            Refresh
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex-1 min-h-0 overflow-y-auto px-6 py-4">
+      <div
+        v-if="!job"
+        class="h-full flex items-center justify-center text-sm text-gray-400"
+      >
+        Job not found
+      </div>
+      <div
+        v-else
+        class="space-y-6"
+      >
+        <!-- Job Info Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <UCard>
+            <template #header>
+              <h2 class="text-sm font-semibold">
+                Job Info
+              </h2>
+            </template>
+            <div class="space-y-3">
+              <div>
+                <p class="text-xs text-gray-500">
+                  ID
+                </p>
+                <p class="text-sm font-medium font-mono">
+                  {{ job.id }}
+                </p>
+              </div>
+              <div>
+                <p class="text-xs text-gray-500">
+                  Name
+                </p>
+                <p class="text-sm font-medium">
+                  {{ job.name }}
+                </p>
+              </div>
+              <div>
+                <p class="text-xs text-gray-500">
+                  State
+                </p>
+                <p class="text-sm font-medium capitalize">
+                  {{ job.state || "unknown" }}
+                </p>
+              </div>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h2 class="text-sm font-semibold">
+                Timing
+              </h2>
+            </template>
+            <div class="space-y-4">
+              <!-- Timestamps -->
+              <div class="grid grid-cols-1 gap-3">
+                <div class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800">
+                  <p class="text-xs text-gray-500">
+                    Created
+                  </p>
+                  <p class="text-sm font-medium">
+                    {{ formatDate(job.timestamp) }}
+                  </p>
+                </div>
+                <div
+                  v-if="job.processedOn"
+                  class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800"
+                >
+                  <p class="text-xs text-gray-500">
+                    Processed
+                  </p>
+                  <p class="text-sm font-medium">
+                    {{ formatDate(job.processedOn) }}
+                  </p>
+                </div>
+                <div
+                  v-if="job.finishedOn"
+                  class="flex items-center justify-between py-2"
+                >
+                  <p class="text-xs text-gray-500">
+                    Finished
+                  </p>
+                  <p class="text-sm font-medium">
+                    {{ formatDate(job.finishedOn) }}
+                  </p>
+                </div>
+              </div>
+
+              <!-- Durations -->
+              <div
+                v-if="waitDuration || executionDuration"
+                class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700"
+              >
+                <div class="grid grid-cols-2 gap-3">
+                  <div
+                    v-if="waitDuration"
+                    class="text-center p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg"
+                  >
+                    <p class="text-xs text-gray-500 mb-1">
+                      Wait Time
+                    </p>
+                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">
+                      {{ waitDuration }}
+                    </p>
+                  </div>
+                  <div
+                    v-if="executionDuration"
+                    class="text-center p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg"
+                  >
+                    <p class="text-xs text-gray-500 mb-1">
+                      {{ job.state === "active" ? "Running" : "Execution" }}
+                    </p>
+                    <p
+                      class="text-lg font-semibold"
+                      :class="job.state === 'active' ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
+                    >
+                      {{ executionDuration }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </UCard>
+        </div>
+
+        <!-- Job Data -->
+        <UCard>
+          <template #header>
+            <h2 class="text-sm font-semibold">
+              Job Data
+            </h2>
+          </template>
+          <pre class="text-xs overflow-x-auto bg-gray-50 dark:bg-gray-900 p-4 rounded">{{ JSON.stringify(job.data, null, 2) }}</pre>
+        </UCard>
+
+        <!-- Return Value -->
+        <UCard v-if="job.returnvalue">
+          <template #header>
+            <h2 class="text-sm font-semibold">
+              Return Value
+            </h2>
+          </template>
+          <pre class="text-xs overflow-x-auto bg-gray-50 dark:bg-gray-900 p-4 rounded">{{ JSON.stringify(job.returnvalue, null, 2) }}</pre>
+        </UCard>
+
+        <!-- Error -->
+        <UCard v-if="job.failedReason">
+          <template #header>
+            <h2 class="text-sm font-semibold text-red-500">
+              Error
+            </h2>
+          </template>
+          <div class="text-sm text-red-600 dark:text-red-400">
+            {{ job.failedReason }}
+          </div>
+        </UCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { UCard, UButton, UBadge } from "#components";
+import { useComponentRouter } from "../../composables/useComponentRouter";
+const router = useComponentRouter();
+const queueName = computed(() => router.route.value?.params?.name || "");
+const jobId = computed(() => router.route.value?.params?.id || "");
+const { data: job, refresh } = await useFetch(
+  () => `/api/_queues/${encodeURIComponent(queueName.value)}/job/${encodeURIComponent(jobId.value)}`,
+  {
+    server: false
+  }
+);
+const stateColor = computed(() => {
+  const colorMap = {
+    waiting: "info",
+    active: "warning",
+    completed: "success",
+    failed: "error",
+    delayed: "secondary",
+    paused: "warning"
+  };
+  return colorMap[job.value?.state || ""] || "neutral";
+});
+const waitDuration = computed(() => {
+  if (!job.value?.timestamp || !job.value?.processedOn) return null;
+  const waitMs = job.value.processedOn - job.value.timestamp;
+  return formatDuration(waitMs);
+});
+const executionDuration = computed(() => {
+  if (!job.value?.processedOn) return null;
+  const endTime = job.value.finishedOn || Date.now();
+  const execMs = endTime - job.value.processedOn;
+  return formatDuration(execMs);
+});
+const back = () => {
+  router.push(`/queues/${queueName.value}/jobs`);
+};
+const formatDuration = (ms) => {
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
+  if (ms < 36e5) return `${(ms / 6e4).toFixed(2)}m`;
+  return `${(ms / 36e5).toFixed(2)}h`;
+};
+const formatDate = (timestamp) => {
+  if (!timestamp) return "-";
+  return new Date(timestamp).toLocaleString("de-DE", {
+    timeZone: "Europe/Berlin",
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+};
+</script>

package/dist/runtime/app/pages/queues/job.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/queues/jobs.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;