@nvent-addon/app 0.5.9 → 0.5.10

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "nventapp",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "configKey": "nventapp",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

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

@@ -0,0 +1,12 @@
+import { type Ref } from '#imports';
+/**
+ * Composable for real-time flow runs updates via WebSocket
+ * Similar to useQueueUpdates - triggers refresh flag when flow stats change
+ */
+export declare function useFlowRunsUpdates(flowName: Ref<string>): {
+    isConnected: Ref<boolean, boolean>;
+    isReconnecting: Ref<boolean, boolean>;
+    shouldRefreshRuns: import("vue").ComputedRef<boolean>;
+    lastUpdate: import("vue").ComputedRef<number | null>;
+    resetRefreshFlag: () => void;
+};

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

@@ -0,0 +1,59 @@
+import { ref, computed, watch, onMounted, onUnmounted } from "#imports";
+import { useFlowWebSocket } from "./useFlowWebSocket.js";
+export function useFlowRunsUpdates(flowName) {
+  const flowWs = useFlowWebSocket();
+  const state = ref({
+    shouldRefreshRuns: false,
+    lastUpdate: null
+  });
+  let previousStats = null;
+  const setupSubscription = () => {
+    if (!import.meta.client) return;
+    flowWs.subscribeStats({
+      onInitial: (data) => {
+        if (data.id !== flowName.value) return;
+        const stats = data?.metadata?.stats;
+        if (stats) {
+          previousStats = { total: stats.total, running: stats.running };
+        }
+      },
+      onUpdate: (data) => {
+        if (data.id !== flowName.value) return;
+        const stats = data?.metadata?.stats;
+        if (!stats) return;
+        const hasNewRuns = previousStats && stats.total !== previousStats.total;
+        const runningChanged = previousStats && stats.running !== previousStats.running;
+        if (hasNewRuns || runningChanged) {
+          state.value.shouldRefreshRuns = true;
+          state.value.lastUpdate = Date.now();
+        }
+        previousStats = { total: stats.total, running: stats.running };
+      }
+    });
+  };
+  const resetRefreshFlag = () => {
+    state.value.shouldRefreshRuns = false;
+  };
+  onMounted(() => {
+    if (import.meta.client && flowName.value) {
+      setupSubscription();
+    }
+  });
+  watch(flowName, (newName, oldName) => {
+    if (newName && newName !== oldName) {
+      previousStats = null;
+      state.value.shouldRefreshRuns = false;
+      state.value.lastUpdate = null;
+    }
+  });
+  onUnmounted(() => {
+    flowWs.unsubscribeStats();
+  });
+  return {
+    isConnected: flowWs.connected,
+    isReconnecting: flowWs.reconnecting,
+    shouldRefreshRuns: computed(() => state.value.shouldRefreshRuns),
+    lastUpdate: computed(() => state.value.lastUpdate),
+    resetRefreshFlag
+  };
+}

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

@@ -388,7 +388,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted } from "#imports";
+import { ref, computed, watch } from "#imports";
 import FlowDiagram from "../../components/flow/Diagram.vue";
 import FlowRunOverview from "../../components/flow/RunOverview.vue";
 import FlowRunTimeline from "../../components/flow/RunTimeline.vue";
@@ -399,6 +399,7 @@ import { useRoute, useRouter } from "#app";
 import { useAnalyzedFlows } from "../../composables/useAnalyzedFlows";
 import { useFlowRuns } from "../../composables/useFlowRuns";
 import { useFlowRunTimeline } from "../../composables/useFlowRunTimeline";
+import { useFlowRunsUpdates } from "../../composables/useFlowRunsUpdates";
 import { useComponentRouter } from "../../composables/useComponentRouter";
 const componentRouter = useComponentRouter();
 const router = useRouter();
@@ -474,36 +475,13 @@ const runs = computed(() => runsResponse.value?.items || []);
 const totalRuns = computed(() => runsResponse.value?.total || 0);
 const loadingRuns = computed(() => runsStatus.value === "pending");
 const { flowState, isConnected, isReconnecting } = useFlowRunTimeline(selectedFlowRef, selectedRunIdRef);
-let pollInterval = null;
-const startPolling = () => {
-  if (pollInterval) return;
-  pollInterval = setInterval(() => {
-    if (selectedFlow.value) {
-      refreshRuns();
-    }
-  }, 3e3);
-};
-const stopPolling = () => {
-  if (pollInterval) {
-    clearInterval(pollInterval);
-    pollInterval = null;
-  }
-};
-watch(selectedFlow, (flow) => {
-  if (flow) {
-    startPolling();
-  } else {
-    stopPolling();
-  }
-}, { immediate: true });
-onMounted(() => {
-  if (import.meta.client && selectedFlow.value) {
-    startPolling();
+const { shouldRefreshRuns, resetRefreshFlag } = useFlowRunsUpdates(selectedFlowRef);
+watch(shouldRefreshRuns, async (shouldRefresh) => {
+  if (shouldRefresh) {
+    await refreshRuns();
+    resetRefreshFlag();
   }
 });
-onUnmounted(() => {
-  stopPolling();
-});
 const startFlowModalOpen = ref(false);
 const flowInputJson = ref("{}");
 const jsonError = ref("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvent-addon/app",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "description": "nvent app module for Nuxt.js",
   "repository": "DevJoghurt/nvent",
   "license": "MIT",