@nvent-addon/app 0.5.3 → 0.5.5

package/dist/runtime/app/composables/useFlowState.d.ts

@@ -5,7 +5,7 @@ import { type Ref } from '#imports';
  * Reduces an array of events from the flow timeline into current state.
  */
 export interface FlowState {
-    status: 'running' | 'completed' | 'failed' | 'canceled' | 'stalled';
+    status: 'running' | 'completed' | 'failed' | 'canceled' | 'stalled' | 'awaiting';
     startedAt?: string;
     completedAt?: string;
     steps: Record<string, StepState>;
@@ -17,6 +17,7 @@ export interface StepState {
     attempt: number;
     startedAt?: string;
     completedAt?: string;
+    scheduledTriggerAt?: string;
     error?: string;
     awaitType?: 'time' | 'event' | 'trigger';
     awaitData?: any;
@@ -69,11 +70,13 @@ export declare function useFlowState(initialEvents?: EventRecord[]): {
     isFailed: import("vue").ComputedRef<boolean>;
     isCanceled: import("vue").ComputedRef<boolean>;
     isStalled: import("vue").ComputedRef<boolean>;
+    isAwaiting: import("vue").ComputedRef<boolean>;
     stepList: import("vue").ComputedRef<{
         status: "pending" | "running" | "completed" | "failed" | "retrying" | "waiting" | "timeout";
         attempt: number;
         startedAt?: string;
         completedAt?: string;
+        scheduledTriggerAt?: string;
         error?: string;
         awaitType?: "time" | "event" | "trigger";
         awaitData?: any;
@@ -85,6 +88,7 @@ export declare function useFlowState(initialEvents?: EventRecord[]): {
         attempt: number;
         startedAt?: string;
         completedAt?: string;
+        scheduledTriggerAt?: string;
         error?: string;
         awaitType?: "time" | "event" | "trigger";
         awaitData?: any;
@@ -96,6 +100,7 @@ export declare function useFlowState(initialEvents?: EventRecord[]): {
         attempt: number;
         startedAt?: string;
         completedAt?: string;
+        scheduledTriggerAt?: string;
         error?: string;
         awaitType?: "time" | "event" | "trigger";
         awaitData?: any;
@@ -107,6 +112,7 @@ export declare function useFlowState(initialEvents?: EventRecord[]): {
         attempt: number;
         startedAt?: string;
         completedAt?: string;
+        scheduledTriggerAt?: string;
         error?: string;
         awaitType?: "time" | "event" | "trigger";
         awaitData?: any;
@@ -118,6 +124,7 @@ export declare function useFlowState(initialEvents?: EventRecord[]): {
         attempt: number;
         startedAt?: string;
         completedAt?: string;
+        scheduledTriggerAt?: string;
         error?: string;
         awaitType?: "time" | "event" | "trigger";
         awaitData?: any;

package/dist/runtime/app/composables/useFlowState.js

@@ -16,6 +16,7 @@ export function reduceFlowState(events) {
         if (e.flowName) state.meta = { ...state.meta, flowName: e.flowName };
         if (e.data?.flowName) state.meta = { ...state.meta, flowName: e.data.flowName };
         if (e.data?.input) state.meta = { ...state.meta, input: e.data.input };
+        if (e.data?.stallTimeout) state.meta = { ...state.meta, stallTimeout: e.data.stallTimeout };
         if (e.data?.trigger) {
           state.meta = {
             ...state.meta,
@@ -43,7 +44,6 @@ export function reduceFlowState(events) {
       case "flow.stalled":
         state.status = "stalled";
         if (e.data?.lastActivityAt) state.meta = { ...state.meta, lastActivityAt: e.data.lastActivityAt };
-        if (e.data?.stallTimeout) state.meta = { ...state.meta, stallTimeout: e.data.stallTimeout };
         break;
       case "step.started": {
         if (!stepKey) break;
@@ -128,60 +128,44 @@ export function reduceFlowState(events) {
       }
       case "await.registered": {
         if (!stepKey) break;
-        const awaitKeyAfter = `${stepKey}:await-after`;
-        const awaitKeyBefore = `${stepKey}:await-before`;
-        if (!state.steps[awaitKeyAfter]) {
-          state.steps[awaitKeyAfter] = { status: "waiting", attempt: 1 };
+        const position = e.data?.position || "after";
+        const awaitKey = `${stepKey}:await-${position}`;
+        if (!state.steps[awaitKey]) {
+          state.steps[awaitKey] = { status: "waiting", attempt: 1 };
         }
-        state.steps[awaitKeyAfter].status = "waiting";
-        state.steps[awaitKeyAfter].awaitType = e.data?.awaitType;
-        state.steps[awaitKeyAfter].awaitData = e.data;
-        if (!state.steps[awaitKeyBefore]) {
-          state.steps[awaitKeyBefore] = { status: "waiting", attempt: 1 };
+        state.steps[awaitKey].status = "waiting";
+        state.steps[awaitKey].awaitType = e.data?.awaitType;
+        state.steps[awaitKey].awaitData = e.data;
+        const scheduledAt = e.data?.resolveAt || e.data?.nextOccurrence;
+        if (scheduledAt) {
+          state.steps[awaitKey].scheduledTriggerAt = new Date(scheduledAt).toISOString();
         }
-        state.steps[awaitKeyBefore].status = "waiting";
-        state.steps[awaitKeyBefore].awaitType = e.data?.awaitType;
-        state.steps[awaitKeyBefore].awaitData = e.data;
         break;
       }
       case "await.resolved": {
         if (!stepKey) break;
-        const awaitKeyAfter = `${stepKey}:await-after`;
-        const awaitKeyBefore = `${stepKey}:await-before`;
-        if (!state.steps[awaitKeyAfter]) {
-          state.steps[awaitKeyAfter] = { status: "completed", attempt: 1 };
+        const position = e.data?.position || "after";
+        const awaitKey = `${stepKey}:await-${position}`;
+        if (!state.steps[awaitKey]) {
+          state.steps[awaitKey] = { status: "completed", attempt: 1 };
         }
-        state.steps[awaitKeyAfter].status = "completed";
-        state.steps[awaitKeyAfter].completedAt = e.ts;
-        state.steps[awaitKeyAfter].awaitType = e.data?.awaitType;
-        if (e.data?.triggerData) state.steps[awaitKeyAfter].result = e.data.triggerData;
-        if (!state.steps[awaitKeyBefore]) {
-          state.steps[awaitKeyBefore] = { status: "completed", attempt: 1 };
-        }
-        state.steps[awaitKeyBefore].status = "completed";
-        state.steps[awaitKeyBefore].completedAt = e.ts;
-        state.steps[awaitKeyBefore].awaitType = e.data?.awaitType;
-        if (e.data?.triggerData) state.steps[awaitKeyBefore].result = e.data.triggerData;
+        state.steps[awaitKey].status = "completed";
+        state.steps[awaitKey].completedAt = e.ts;
+        state.steps[awaitKey].awaitType = e.data?.awaitType;
+        if (e.data?.triggerData) state.steps[awaitKey].result = e.data.triggerData;
         break;
       }
       case "await.timeout": {
         if (!stepKey) break;
-        const awaitKeyAfter = `${stepKey}:await-after`;
-        const awaitKeyBefore = `${stepKey}:await-before`;
-        if (!state.steps[awaitKeyAfter]) {
-          state.steps[awaitKeyAfter] = { status: "timeout", attempt: 1 };
-        }
-        state.steps[awaitKeyAfter].status = "timeout";
-        state.steps[awaitKeyAfter].error = `Await timeout`;
-        state.steps[awaitKeyAfter].completedAt = e.ts;
-        state.steps[awaitKeyAfter].awaitType = e.data?.awaitType;
-        if (!state.steps[awaitKeyBefore]) {
-          state.steps[awaitKeyBefore] = { status: "timeout", attempt: 1 };
+        const position = e.data?.position || "after";
+        const awaitKey = `${stepKey}:await-${position}`;
+        if (!state.steps[awaitKey]) {
+          state.steps[awaitKey] = { status: "timeout", attempt: 1 };
         }
-        state.steps[awaitKeyBefore].status = "timeout";
-        state.steps[awaitKeyBefore].error = `Await timeout`;
-        state.steps[awaitKeyBefore].completedAt = e.ts;
-        state.steps[awaitKeyBefore].awaitType = e.data?.awaitType;
+        state.steps[awaitKey].status = "timeout";
+        state.steps[awaitKey].error = `Await timeout`;
+        state.steps[awaitKey].completedAt = e.ts;
+        state.steps[awaitKey].awaitType = e.data?.awaitType;
         break;
       }
       case "runner.log":
@@ -211,14 +195,17 @@ export function reduceFlowState(events) {
     state.startedAt = events[0].ts;
   }
   if (state.status === "running" && state.startedAt && Object.keys(state.steps).length > 0) {
-    const hasRunningSteps = Object.values(state.steps).some(
-      (s) => s.status === "running" || s.status === "retrying" || s.status === "waiting"
+    const hasActiveRunningSteps = Object.values(state.steps).some(
+      (s) => s.status === "running" || s.status === "retrying"
     );
+    const hasWaitingSteps = Object.values(state.steps).some((s) => s.status === "waiting");
     const hasFailedSteps = Object.values(state.steps).some((s) => s.status === "failed");
     const allStepsTerminal = Object.values(state.steps).every(
       (s) => s.status === "completed" || s.status === "failed" || s.status === "timeout"
     );
-    if (!hasRunningSteps && allStepsTerminal) {
+    if (hasWaitingSteps && !hasActiveRunningSteps) {
+      state.status = "awaiting";
+    } else if (allStepsTerminal) {
       if (hasFailedSteps) {
         state.status = "failed";
       } else {
@@ -249,6 +236,7 @@ export function useFlowState(initialEvents = []) {
   const isFailed = computed(() => state.value.status === "failed");
   const isCanceled = computed(() => state.value.status === "canceled");
   const isStalled = computed(() => state.value.status === "stalled");
+  const isAwaiting = computed(() => state.value.status === "awaiting");
   const stepList = computed(() => {
     return Object.entries(state.value.steps).map(([key, step]) => ({
       key,
@@ -281,6 +269,7 @@ export function useFlowState(initialEvents = []) {
     isFailed,
     isCanceled,
     isStalled,
+    isAwaiting,
     stepList,
     runningSteps,
     waitingSteps,

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

@@ -27,109 +27,54 @@
         <!-- System Stats Overview -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <!-- Queues Card -->
-          <div
-            class="bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 rounded-xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
-            @click="navigateTo('/queues')"
-          >
-            <div class="flex items-center justify-between mb-4">
-              <div class="p-3 bg-white/20 rounded-lg backdrop-blur-sm">
-                <UIcon
-                  name="i-lucide-app-window"
-                  class="w-6 h-6"
-                />
-              </div>
-              <UIcon
-                name="i-lucide-arrow-right"
-                class="w-5 h-5 opacity-60"
-              />
-            </div>
-            <div class="text-3xl font-bold mb-1">
-              {{ queuesStats?.total || 0 }}
-            </div>
-            <div class="text-sm opacity-90 mb-3">
-              Active Queues
-            </div>
-            <div class="flex items-center gap-4 text-xs opacity-75">
-              <div v-if="queuesStats?.pending > 0">
-                <span class="font-semibold">{{ formatNumber(queuesStats?.pending || 0) }}</span> pending
-              </div>
-              <div>
-                <span class="font-semibold">{{ formatNumber(queuesStats?.completed || 0) }}</span> completed
-              </div>
-              <div v-if="queuesStats?.failed > 0">
-                <span class="font-semibold">{{ formatNumber(queuesStats?.failed || 0) }}</span> failed
-              </div>
-            </div>
-          </div>
+          <NventDashboardCard
+            icon="i-lucide-app-window"
+            title="Active Queues"
+            color="blue"
+            :primary-stats="[
+  { value: formatNumber(queuesStats?.active || 0), label: 'active' },
+  { value: formatNumber((queuesStats?.waiting || 0) + (queuesStats?.delayed || 0)), label: 'waiting' },
+  ...queuesStats?.failed > 0 ? [{ value: formatNumber(queuesStats?.failed || 0), label: 'failed' }] : []
+]"
+            :secondary-stats="[
+  { value: queuesStats?.total || 0, label: 'queues' },
+  { value: formatNumber(queuesStats?.completed || 0), label: 'completed' }
+]"
+            :on-click="() => navigateTo('/queues')"
+          />
 
           <!-- Flows Card -->
-          <div
-            class="bg-gradient-to-br from-purple-500 to-purple-600 dark:from-purple-600 dark:to-purple-700 rounded-xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
-            @click="navigateTo('/flows')"
-          >
-            <div class="flex items-center justify-between mb-4">
-              <div class="p-3 bg-white/20 rounded-lg backdrop-blur-sm">
-                <UIcon
-                  name="i-lucide-git-branch"
-                  class="w-6 h-6"
-                />
-              </div>
-              <UIcon
-                name="i-lucide-arrow-right"
-                class="w-5 h-5 opacity-60"
-              />
-            </div>
-            <div class="text-3xl font-bold mb-1">
-              {{ flowsStats?.total || 0 }}
-            </div>
-            <div class="text-sm opacity-90 mb-3">
-              Registered Flows
-            </div>
-            <div class="flex items-center gap-4 text-xs opacity-75">
-              <div v-if="flowsStats?.running > 0">
-                <span class="font-semibold">{{ flowsStats?.running }}</span> running
-              </div>
-              <div v-if="flowsStats?.awaiting > 0">
-                <span class="font-semibold">{{ flowsStats?.awaiting }}</span> awaiting
-              </div>
-              <div>
-                <span class="font-semibold">{{ formatNumber(flowsStats?.success || 0) }}</span> success
-              </div>
-            </div>
-          </div>
+          <NventDashboardCard
+            icon="i-lucide-git-branch"
+            title="Registered Flows"
+            color="purple"
+            :primary-stats="[
+  ...flowsStats?.running > 0 ? [{ value: flowsStats?.running, label: 'running' }] : [],
+  ...flowsStats?.awaiting > 0 ? [{ value: flowsStats?.awaiting, label: 'awaiting' }] : [],
+  ...flowsStats?.success > 0 ? [{ value: formatNumber(flowsStats?.success), label: 'completed' }] : [],
+  ...flowsStats?.failure > 0 ? [{ value: formatNumber(flowsStats?.failure), label: 'failed' }] : []
+]"
+            :secondary-stats="[
+  { value: flowsStats?.total || 0, label: 'flows' },
+  { value: formatNumber(flowsStats?.totalRuns || 0), label: 'total runs' }
+]"
+            :on-click="() => navigateTo('/flows')"
+          />
 
           <!-- Triggers Card -->
-          <div
-            class="bg-gradient-to-br from-amber-500 to-amber-600 dark:from-amber-600 dark:to-amber-700 rounded-xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
-            @click="navigateTo('/triggers')"
-          >
-            <div class="flex items-center justify-between mb-4">
-              <div class="p-3 bg-white/20 rounded-lg backdrop-blur-sm">
-                <UIcon
-                  name="i-lucide-zap"
-                  class="w-6 h-6"
-                />
-              </div>
-              <UIcon
-                name="i-lucide-arrow-right"
-                class="w-5 h-5 opacity-60"
-              />
-            </div>
-            <div class="text-3xl font-bold mb-1">
-              {{ triggersStats?.total || 0 }}
-            </div>
-            <div class="text-sm opacity-90 mb-3">
-              Active Triggers
-            </div>
-            <div class="flex items-center gap-4 text-xs opacity-75">
-              <div>
-                <span class="font-semibold">{{ formatNumber(triggersStats?.totalFires || 0) }}</span> fires
-              </div>
-              <div>
-                <span class="font-semibold">{{ formatNumber(triggersStats?.totalFlowsStarted || 0) }}</span> flows started
-              </div>
-            </div>
-          </div>
+          <NventDashboardCard
+            icon="i-lucide-zap"
+            title="Active Triggers"
+            color="amber"
+            :primary-stats="[
+  { value: formatNumber(triggersStats?.totalFires || 0), label: 'fires' }
+]"
+            :secondary-stats="[
+  { value: triggersStats?.total || 0, label: 'triggers' },
+  { value: formatNumber(triggersStats?.totalFlowsStarted || 0), label: 'flows started' }
+]"
+            :on-click="() => navigateTo('/triggers')"
+          />
         </div>
 
         <!-- Quick Actions & Recent Activity -->
@@ -649,14 +594,17 @@ function updateTriggerStats(data) {
   ];
 }
 const queuesStats = computed(() => {
-  const pending = queues.value.reduce((sum, q) => {
-    const counts = q.counts || {};
-    return sum + (counts.active || 0) + (counts.waiting || 0) + (counts.delayed || 0);
-  }, 0);
+  const active = queues.value.reduce((sum, q) => sum + (q.counts?.active || 0), 0);
+  const waiting = queues.value.reduce((sum, q) => sum + (q.counts?.waiting || 0), 0);
+  const delayed = queues.value.reduce((sum, q) => sum + (q.counts?.delayed || 0), 0);
+  const pending = active + waiting + delayed;
   const completed = queues.value.reduce((sum, q) => sum + (q.counts?.completed || 0), 0);
   const failed = queues.value.reduce((sum, q) => sum + (q.counts?.failed || 0), 0);
   return {
     total: queues.value.length,
+    active,
+    waiting,
+    delayed,
     pending,
     completed,
     failed

package/dist/runtime/app/pages/flows/[name].vue

@@ -288,12 +288,13 @@
                     :run-status="runSnapshot.status"
                     :started-at="runSnapshot.startedAt"
                     :completed-at="runSnapshot.completedAt"
-                    :steps="flowState.stepList.value"
+                    :steps="enhancedStepList"
                     :flow-name="selectedFlow || void 0"
                     :run-id="selectedRunId || void 0"
                     :trigger-name="flowState.state.value.meta?.triggerName"
                     :trigger-type="flowState.state.value.meta?.triggerType"
                     :flow-def="selectedFlowDef"
+                    :stall-timeout="runSnapshot.stallTimeout"
                     @select-step="handleSelectStep"
                     @cancel-flow="handleCancelFlow"
                   />
@@ -533,12 +534,15 @@ const formatDuration = (start, end) => {
 };
 const runSnapshot = computed(() => {
   const state = flowState.state.value;
+  const flowMeta = selectedFlowMeta.value;
   return {
     status: state.status,
     startedAt: state.startedAt,
     completedAt: state.completedAt,
     logsCount: state.logs.length,
-    lastLogLevel: state.logs.length > 0 ? state.logs[state.logs.length - 1]?.level : void 0
+    lastLogLevel: state.logs.length > 0 ? state.logs[state.logs.length - 1]?.level : void 0,
+    stallTimeout: flowMeta?.analyzed?.stallTimeout
+    // Get from analyzed flows (static)
   };
 });
 const selectedStepKey = ref(null);
@@ -557,6 +561,28 @@ const selectedFlowMeta = computed(() => {
   if (!id) return null;
   return (flows.value || []).find((f) => f?.id === id) || null;
 });
+const enhancedStepList = computed(() => {
+  const steps = flowState.stepList.value;
+  const flowMeta = selectedFlowMeta.value;
+  if (!flowMeta?.analyzed?.steps) return steps;
+  const stepTimeoutMap = /* @__PURE__ */ new Map();
+  if (flowMeta.entry?.stepTimeout !== void 0) {
+    stepTimeoutMap.set(flowMeta.entry.step, flowMeta.entry.stepTimeout);
+  }
+  for (const [stepName, analyzedStep] of Object.entries(flowMeta.analyzed.steps)) {
+    if (analyzedStep.stepTimeout !== void 0) {
+      stepTimeoutMap.set(stepName, analyzedStep.stepTimeout);
+    }
+  }
+  return steps.map((step) => {
+    const baseStepName = step.key.includes(":await-") ? step.key.split(":await-")[0] : step.key;
+    const staticTimeout = stepTimeoutMap.get(baseStepName);
+    if (staticTimeout !== void 0) {
+      return { ...step, stepTimeout: staticTimeout };
+    }
+    return step;
+  });
+});
 const handleSelectStep = (stepKey) => {
   selectedStepKey.value = stepKey;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvent-addon/app",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "nvent app module for Nuxt.js",
   "repository": "DevJoghurt/nvent",
   "license": "MIT",
@@ -8,6 +8,7 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
+      "style": "./dist/runtime/app/assets/tailwind.css",
       "import": "./dist/module.mjs"
     }
   },