@nvent-addon/app 0.4.5 → 0.5.1

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

@@ -1,34 +1,64 @@
 <template>
-  <QueueNhealthComponentRouter
+  <NventComponentRouter
     v-slot="{ component }"
     :routes="routes"
     base="p"
     mode="query"
   >
-    <QueueNhealthComponentShell
+    <NventComponentShell
       orientation="horizontal"
       :items="navItems"
     >
       <component :is="component" />
-    </QueueNhealthComponentShell>
-  </QueueNhealthComponentRouter>
+    </NventComponentShell>
+  </NventComponentRouter>
 </template>
 
 <script setup>
+import Dashboard from "./dashboard.vue";
 import Queue from "./queues/index.vue";
 import QueueJobs from "./queues/jobs.vue";
 import QueueJob from "./queues/job.vue";
-import QueueFlows from "./flows/index.vue";
+import Flows from "./flows/index.vue";
+import FlowDetail from "./flows/[name].vue";
+import Triggers from "./triggers/index.vue";
+import TriggerDetail from "./triggers/[name].vue";
+import TriggerNew from "./triggers/new.vue";
+import TriggerEdit from "./triggers/[name]/edit.vue";
+import SettingsScheduler from "./settings/scheduler.vue";
 const navItems = [
   [
-    { label: "Queues", icon: "i-lucide-app-window", path: "/" },
-    { label: "Flows", icon: "i-lucide-git-branch", path: "/flows" }
+    { label: "Dashboard", icon: "i-lucide-layout-dashboard", path: "/" },
+    { label: "Queues", icon: "i-lucide-app-window", path: "/queues" },
+    { label: "Flows", icon: "i-lucide-git-branch", path: "/flows" },
+    { label: "Triggers", icon: "i-lucide-zap", path: "/triggers" }
+  ],
+  [
+    {
+      label: "Settings",
+      icon: "i-lucide-settings",
+      children: [
+        {
+          label: "Scheduler",
+          description: "Monitor scheduled jobs and their execution",
+          icon: "i-lucide-clock",
+          path: "/settings/scheduler"
+        }
+      ]
+    }
   ]
 ];
 const routes = {
-  "/": Queue,
+  "/": Dashboard,
+  "/queues": Queue,
   "/queues/:name/jobs": QueueJobs,
   "/queues/:name/jobs/:id": QueueJob,
-  "/flows": QueueFlows
+  "/flows": Flows,
+  "/flows/:name": FlowDetail,
+  "/triggers": Triggers,
+  "/triggers/new": TriggerNew,
+  "/triggers/:name/edit": TriggerEdit,
+  "/triggers/:name": TriggerDetail,
+  "/settings/scheduler": SettingsScheduler
 };
 </script>

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

@@ -7,223 +7,231 @@
           <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>
+        <LiveIndicator
+          :is-connected="isConnected"
+          :is-reconnecting="isReconnecting"
+        />
       </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 class="flex-1 min-h-0 overflow-y-auto">
+      <div class="max-w-7xl mx-auto p-6">
+        <!-- Stats Overview -->
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+          <StatCard
+            icon="i-lucide-inbox"
+            :count="queuesWithLive?.length || 0"
+            label="Total Queues"
+            variant="gray"
+          />
+          <StatCard
+            icon="i-lucide-clock"
+            :count="totalWaiting"
+            label="Waiting"
+            variant="blue"
+          />
+          <StatCard
+            icon="i-lucide-loader-2"
+            :count="totalActive"
+            label="Active"
+            variant="amber"
+          />
+          <StatCard
+            icon="i-lucide-check-circle"
+            :count="totalCompleted"
+            label="Completed"
+            variant="emerald"
+          />
+          <StatCard
+            icon="i-lucide-x-circle"
+            :count="totalFailed"
+            label="Failed"
+            variant="red"
           />
         </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" }}
+        <!-- Queues List -->
+        <div
+          v-if="!queuesWithLive || queuesWithLive.length === 0"
+          class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-8 text-center text-gray-500"
+        >
+          <UIcon
+            name="i-lucide-inbox"
+            class="w-12 h-12 mx-auto mb-3 opacity-50"
+          />
+          <div>No queues found</div>
+        </div>
+        <div
+          v-else
+          class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden"
+        >
+          <div class="divide-y divide-gray-100 dark:divide-gray-800">
+            <div
+              v-for="queue in paginatedQueues"
+              :key="queue.name"
+              class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors cursor-pointer"
+              @click="selectQueue(queue.name)"
+            >
+              <div class="flex items-start justify-between gap-4">
+                <!-- Left: Queue Info -->
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 mb-2">
+                    <UIcon
+                      name="i-lucide-inbox"
+                      class="w-4 h-4 shrink-0 text-blue-500"
+                    />
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                      {{ queue.name }}
+                    </h3>
+                    <UBadge
+                      :label="queue.isPaused ? 'Paused' : 'Running'"
+                      :color="queue.isPaused ? 'warning' : 'success'"
+                      variant="subtle"
+                      size="xs"
+                    />
+                  </div>
+
+                  <div class="flex items-center gap-4 text-xs">
+                    <div
+                      class="flex items-center gap-1"
+                      :class="queue.counts.waiting > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-600'"
+                    >
+                      <UIcon
+                        name="i-lucide-clock"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ queue.counts.waiting }} waiting</span>
+                    </div>
+                    <div
+                      class="flex items-center gap-1"
+                      :class="queue.counts.active > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-400 dark:text-gray-600'"
+                    >
+                      <UIcon
+                        name="i-lucide-loader-2"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ queue.counts.active }} active</span>
+                    </div>
+                    <div
+                      class="flex items-center gap-1"
+                      :class="queue.counts.completed > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-400 dark:text-gray-600'"
+                    >
+                      <UIcon
+                        name="i-lucide-check-circle"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ queue.counts.completed }} completed</span>
+                    </div>
+                    <div
+                      class="flex items-center gap-1"
+                      :class="queue.counts.failed > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-400 dark:text-gray-600'"
+                    >
+                      <UIcon
+                        name="i-lucide-x-circle"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ queue.counts.failed }} failed</span>
+                    </div>
+                    <div
+                      class="flex items-center gap-1"
+                      :class="queue.counts.delayed > 0 ? 'text-purple-600 dark:text-purple-400' : 'text-gray-400 dark:text-gray-600'"
+                    >
+                      <UIcon
+                        name="i-lucide-timer"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ queue.counts.delayed }} delayed</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right: Actions -->
+                <div class="flex items-center gap-3">
+                  <!-- Arrow Button -->
+                  <UButton
+                    icon="i-lucide-arrow-right"
+                    size="xs"
+                    color="neutral"
+                    variant="ghost"
+                    square
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="flex items-center gap-1.5">
+
+          <!-- Pagination -->
+          <div
+            v-if="totalPages > 1"
+            class="border-t border-gray-200 dark:border-gray-800 px-6 py-4 flex items-center justify-center"
+          >
             <UPagination
-              :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
-              :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+              v-model="currentPage"
               :total="queuesWithLive.length"
-              @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+              :items-per-page="itemsPerPage"
             />
           </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"
-    />
+        <!-- Footer Info -->
+        <div
+          v-if="queuesWithLive && queuesWithLive.length > 0"
+          class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400"
+        >
+          Showing {{ startIndex + 1 }}-{{ endIndex }} of {{ queuesWithLive.length }} queue{{ queuesWithLive.length === 1 ? "" : "s" }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, useTemplateRef, h } from "#imports";
-import { getPaginationRowModel } from "@tanstack/table-core";
-import { UTable, UButton, UPagination } from "#components";
+import { ref, computed } from "#imports";
+import { UIcon, UPagination, UButton, UBadge } 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();
+import StatCard from "../../components/StatCard.vue";
+import LiveIndicator from "../../components/LiveIndicator.vue";
+const { queues } = 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 selectQueue = (queueName) => {
+  router.push(`/queues/${queueName}/jobs`);
 };
-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`);
-        }
-      });
-    }
-  }
-];
+const currentPage = ref(1);
+const itemsPerPage = 10;
+const totalPages = computed(() => {
+  if (!queuesWithLive.value) return 0;
+  return Math.ceil(queuesWithLive.value.length / itemsPerPage);
+});
+const startIndex = computed(() => {
+  return (currentPage.value - 1) * itemsPerPage;
+});
+const endIndex = computed(() => {
+  if (!queuesWithLive.value) return 0;
+  return Math.min(startIndex.value + itemsPerPage, queuesWithLive.value.length);
+});
+const paginatedQueues = computed(() => {
+  if (!queuesWithLive.value) return [];
+  return queuesWithLive.value.slice(startIndex.value, endIndex.value);
+});
+const totalWaiting = computed(() => {
+  if (!queuesWithLive.value) return 0;
+  return queuesWithLive.value.reduce((sum, q) => sum + q.counts.waiting, 0);
+});
+const totalActive = computed(() => {
+  if (!queuesWithLive.value) return 0;
+  return queuesWithLive.value.reduce((sum, q) => sum + q.counts.active, 0);
+});
+const totalCompleted = computed(() => {
+  if (!queuesWithLive.value) return 0;
+  return queuesWithLive.value.reduce((sum, q) => sum + q.counts.completed, 0);
+});
+const totalFailed = computed(() => {
+  if (!queuesWithLive.value) return 0;
+  return queuesWithLive.value.reduce((sum, q) => sum + q.counts.failed, 0);
+});
 </script>