nvent 0.4.4 → 0.4.5

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

@@ -1,229 +0,0 @@
-<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, useTemplateRef, h } 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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,262 +0,0 @@
-<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, useFetch } 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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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;