@nvent-addon/app 0.5.4 → 0.5.6

package/dist/runtime/app/components/flow/AwaitNode.vue

@@ -1,46 +1,258 @@
 <template>
   <div
-    class="px-3 py-2 rounded-lg border-2 min-w-[180px] bg-white dark:bg-gray-900 transition-all duration-300"
+    class="rounded-lg border-2 w-[280px] min-h-[140px] bg-white dark:bg-gray-900 transition-all duration-300 shadow-sm flex flex-col overflow-hidden"
     :class="borderClass"
   >
-    <div class="flex items-center justify-between gap-2 text-xs mb-2">
-      <div class="flex items-center gap-2">
-        <UIcon
-          :name="getAwaitIcon(data.awaitType)"
-          class="w-3.5 h-3.5"
+    <!-- Header -->
+    <div class="px-2.5 py-1.5 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 flex-shrink-0">
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-1.5 min-w-0">
+          <UIcon
+            :name="getAwaitIcon(data.awaitType)"
+            :class="iconColorClass"
+            class="w-4 h-4 flex-shrink-0"
+          />
+          <span class="font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-wide truncate">
+            {{ data.awaitType }}
+          </span>
+        </div>
+        <UBadge
+          :label="statusLabel"
+          size="xs"
+          :color="statusColor"
         />
-        <span class="font-medium text-gray-700 dark:text-gray-300">
-          {{ data.label }}
-        </span>
       </div>
-      <UBadge
-        :label="statusLabel"
-        size="xs"
-        :color="statusColor"
-      />
     </div>
+
+    <!-- Body - Configuration Details -->
     <div
-      v-if="data.awaitConfig"
-      class="text-[10px] text-gray-500 dark:text-gray-400"
+      v-if="data.awaitConfig || data.awaitData"
+      class="px-3 py-2.5 flex-1 overflow-y-auto text-xs min-h-0"
     >
-      <div v-if="data.awaitType === 'time'">
-        Delay: {{ formatDelay(data.awaitConfig.delay) }}
+      <!-- Time-specific -->
+      <div
+        v-if="data.awaitType === 'time' && data.awaitConfig?.delay"
+        class="space-y-1"
+      >
+        <div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 items-center text-[9px]">
+          <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+            <UIcon
+              name="i-lucide-timer"
+              class="w-3 h-3"
+            />
+            Delay:
+          </span>
+          <span class="font-mono text-gray-900 dark:text-gray-100 text-right">{{ formatDelay(data.awaitConfig.delay) }}</span>
+
+          <template v-if="nextTriggerTime">
+            <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+              <UIcon
+                name="i-lucide-calendar-clock"
+                class="w-3 h-3"
+              />
+              Triggers:
+            </span>
+            <span class="text-gray-900 dark:text-gray-100 text-right">{{ nextTriggerTime }}</span>
+          </template>
+        </div>
       </div>
-      <div v-else-if="data.awaitType === 'event'">
-        Event: {{ data.awaitConfig.event }}
+
+      <!-- Event-specific -->
+      <div
+        v-if="data.awaitType === 'event'"
+        class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 items-start text-[9px]"
+      >
+        <template v-if="data.awaitConfig?.event || data.awaitData?.eventName">
+          <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+            <UIcon
+              name="i-lucide-zap"
+              class="w-3 h-3"
+            />
+            Event:
+          </span>
+          <span class="font-mono text-gray-900 dark:text-gray-100 break-all text-right">
+            {{ data.awaitData?.eventName || data.awaitConfig?.event }}
+          </span>
+        </template>
+
+        <template v-if="data.awaitConfig?.filterKey || data.awaitData?.filterKey">
+          <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+            <UIcon
+              name="i-lucide-filter"
+              class="w-3 h-3"
+            />
+            Filter:
+          </span>
+          <span class="font-mono text-gray-900 dark:text-gray-100 text-right">
+            {{ data.awaitData?.filterKey || data.awaitConfig?.filterKey }}
+          </span>
+        </template>
       </div>
-      <div v-else-if="data.awaitType === 'webhook'">
-        Webhook: {{ data.awaitConfig.method || "POST" }}
+
+      <!-- Webhook-specific -->
+      <template v-if="data.awaitType === 'webhook'">
+        <div class="space-y-1">
+          <div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 items-center text-[9px]">
+            <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+              <UIcon
+                name="i-lucide-git-branch"
+                class="w-3 h-3"
+              />
+              Method:
+            </span>
+            <div class="flex justify-end">
+              <UBadge
+                v-if="data.awaitConfig?.method || data.awaitData?.method"
+                :label="data.awaitConfig?.method || data.awaitData?.method"
+                size="xs"
+                color="primary"
+              />
+            </div>
+
+            <template v-if="data.awaitData?.webhookUrl">
+              <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+                <UIcon
+                  name="i-lucide-link"
+                  class="w-3 h-3"
+                />
+                URL:
+              </span>
+              <div class="flex items-center gap-1 justify-end min-w-0">
+                <span class="font-mono text-gray-900 dark:text-gray-100 truncate text-right flex-1">
+                  {{ data.awaitData.webhookUrl }}
+                </span>
+                <button
+                  type="button"
+                  class="flex-shrink-0 p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                  :title="copiedUrl === data.awaitData.webhookUrl ? 'Copied!' : 'Copy URL'"
+                  @click.stop="copyToClipboard(data.awaitData.webhookUrl)"
+                >
+                  <UIcon
+                    :name="copiedUrl === data.awaitData.webhookUrl ? 'i-lucide-check' : 'i-lucide-copy'"
+                    class="w-3 h-3"
+                    :class="copiedUrl === data.awaitData.webhookUrl ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-600 dark:text-gray-400'"
+                  />
+                </button>
+              </div>
+            </template>
+
+            <template v-else-if="data.awaitConfig?.path">
+              <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+                <UIcon
+                  name="i-lucide-route"
+                  class="w-3 h-3"
+                />
+                Path:
+              </span>
+              <div class="font-mono text-gray-900 dark:text-gray-100 truncate text-right">
+                {{ data.awaitConfig.path }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+
+      <!-- Schedule-specific -->
+      <div
+        v-if="data.awaitType === 'schedule'"
+        class="space-y-1"
+      >
+        <div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 items-center text-[9px]">
+          <template v-if="data.awaitConfig?.cron">
+            <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+              <UIcon
+                name="i-lucide-calendar-cog"
+                class="w-3 h-3"
+              />
+              Cron:
+            </span>
+            <span class="font-mono text-gray-900 dark:text-gray-100 text-right">{{ data.awaitConfig.cron }}</span>
+          </template>
+
+          <template v-if="cronDescription">
+            <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+              <UIcon
+                name="i-lucide-repeat"
+                class="w-3 h-3"
+              />
+              Pattern:
+            </span>
+            <span class="text-gray-500 dark:text-gray-400 text-right">{{ cronDescription }}</span>
+          </template>
+
+          <template v-if="nextCronTime">
+            <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+              <UIcon
+                name="i-lucide-calendar-check"
+                class="w-3 h-3"
+              />
+              Next:
+            </span>
+            <span class="text-gray-900 dark:text-gray-100 font-medium text-right">{{ nextCronTime }}</span>
+          </template>
+
+          <template v-if="data.awaitConfig?.timezone">
+            <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+              <UIcon
+                name="i-lucide-globe"
+                class="w-3 h-3"
+              />
+              Timezone:
+            </span>
+            <span class="font-mono text-gray-900 dark:text-gray-100 text-right">{{ data.awaitConfig.timezone }}</span>
+          </template>
+        </div>
+      </div>
+
+      <!-- Common: Timeout -->
+      <div
+        v-if="data.awaitConfig?.timeout || data.awaitData?.timeout"
+        class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 items-center text-[9px] mt-2 pt-2 border-t border-gray-200 dark:border-gray-700"
+      >
+        <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+          <UIcon
+            name="i-lucide-hourglass"
+            class="w-3 h-3"
+          />
+          Timeout:
+        </span>
+        <span class="text-gray-900 dark:text-gray-100 text-right">
+          {{ formatDelay(data.awaitData?.timeout || data.awaitConfig?.timeout) }}
+        </span>
+        <template v-if="data.awaitConfig?.timeoutAction || data.awaitData?.timeoutAction">
+          <span class="text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1">
+            <UIcon
+              name="i-lucide-shield-alert"
+              class="w-3 h-3"
+            />
+            Action:
+          </span>
+          <span class="text-gray-900 dark:text-gray-100 text-right">
+            {{ data.awaitData?.timeoutAction || data.awaitConfig?.timeoutAction }}
+          </span>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { computed, ref } from "#imports";
 const props = defineProps({
   data: { type: Object, required: true }
 });
+const copiedUrl = ref(null);
+const copyToClipboard = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    copiedUrl.value = text;
+    setTimeout(() => {
+      copiedUrl.value = null;
+    }, 2e3);
+  } catch (err) {
+    console.error("Failed to copy:", err);
+  }
+};
 const statusLabel = computed(() => {
   return (props.data.status || "idle").toUpperCase();
 });
@@ -59,13 +271,27 @@ const statusColor = computed(() => {
 const borderClass = computed(() => {
   switch (props.data.status) {
     case "waiting":
-      return "border-amber-400 dark:border-amber-500 bg-amber-50 dark:bg-amber-950/20";
+      return "border-amber-400 dark:border-amber-500";
     case "resolved":
-      return "border-emerald-400 dark:border-emerald-500 bg-emerald-50 dark:bg-emerald-950/20";
+      return "border-emerald-400 dark:border-emerald-500";
     case "timeout":
-      return "border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-950/20";
+      return "border-red-400 dark:border-red-500";
+    default:
+      return "border-blue-300 dark:border-blue-700";
+  }
+});
+const iconColorClass = computed(() => {
+  switch (props.data.awaitType) {
+    case "time":
+      return "text-blue-600 dark:text-blue-400";
+    case "event":
+      return "text-purple-600 dark:text-purple-400";
+    case "webhook":
+      return "text-orange-600 dark:text-orange-400";
+    case "schedule":
+      return "text-green-600 dark:text-green-400";
     default:
-      return "border-gray-300 dark:border-gray-700";
+      return "text-gray-600 dark:text-gray-400";
   }
 });
 function getAwaitIcon(type) {
@@ -76,6 +302,8 @@ function getAwaitIcon(type) {
       return "i-lucide-zap";
     case "webhook":
       return "i-lucide-webhook";
+    case "schedule":
+      return "i-lucide-calendar-clock";
     default:
       return "i-lucide-clock";
   }
@@ -84,7 +312,67 @@ function formatDelay(ms) {
   if (!ms) return "0ms";
   if (ms < 1e3) return `${ms}ms`;
   if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
-  if (ms < 36e5) return `${(ms / 6e4).toFixed(1)}m`;
-  return `${(ms / 36e5).toFixed(1)}h`;
+  if (ms < 6e4 * 60) return `${(ms / 6e4).toFixed(1)}m`;
+  if (ms < 6e4 * 60 * 24) return `${(ms / 36e5).toFixed(1)}h`;
+  return `${(ms / (36e5 * 24)).toFixed(1)}d`;
 }
+const nextTriggerTime = computed(() => {
+  if (props.data.awaitType !== "time" || !props.data.awaitConfig?.delay) return null;
+  if (props.data.scheduledTriggerAt) {
+    const triggerTime = new Date(props.data.scheduledTriggerAt);
+    if (!Number.isNaN(triggerTime.getTime())) {
+      return triggerTime.toLocaleString(void 0, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    }
+  }
+  return "No schedule";
+});
+const cronDescription = computed(() => {
+  if (props.data.awaitType !== "schedule" || !props.data.awaitConfig?.cron) return null;
+  const cron = props.data.awaitConfig.cron;
+  const parts = cron.split(" ");
+  if (cron === "* * * * *") return "Next minute";
+  if (cron === "0 * * * *") return "Top of next hour";
+  if (cron === "0 0 * * *") return "Next midnight";
+  if (cron === "0 9 * * *") return "Next 9:00 AM";
+  if (cron === "0 0 * * 0") return "Next Sunday midnight";
+  if (cron === "0 0 1 * *") return "Next 1st of month";
+  try {
+    if (parts.length >= 5) {
+      const minute = parts[0] || "*";
+      const hour = parts[1] || "*";
+      const day = parts[2] || "*";
+      const month = parts[3] || "*";
+      const weekday = parts[4] || "*";
+      if (minute.startsWith("*/") && hour === "*") {
+        return `Next ${minute.slice(2)}min mark`;
+      }
+      if (minute !== "*" && hour !== "*" && day === "*" && month === "*" && weekday === "*") {
+        return `Next ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+      }
+    }
+  } catch {
+  }
+  return `Next: ${cron}`;
+});
+const nextCronTime = computed(() => {
+  if (props.data.awaitType !== "schedule" || !props.data.awaitConfig?.cron) return null;
+  if (props.data.scheduledTriggerAt) {
+    const triggerTime = new Date(props.data.scheduledTriggerAt);
+    if (!Number.isNaN(triggerTime.getTime())) {
+      return triggerTime.toLocaleString(void 0, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZoneName: "short"
+      });
+    }
+  }
+  return "No schedule";
+});
 </script>

package/dist/runtime/app/components/flow/AwaitNode.vue.d.ts

@@ -1,16 +1,33 @@
 interface AwaitConfig {
-    type?: 'time' | 'event' | 'webhook';
+    type?: 'time' | 'event' | 'webhook' | 'schedule';
     delay?: number;
     event?: string;
+    filterKey?: string;
     method?: string;
+    path?: string;
+    cron?: string;
+    timezone?: string;
     timeout?: number;
+    timeoutAction?: 'fail' | 'continue' | 'retry';
+}
+interface AwaitData {
+    method?: string;
+    webhookUrl?: string;
+    timeout?: number;
+    timeoutAction?: string;
+    eventName?: string;
+    filterKey?: string;
+    [key: string]: any;
 }
 type __VLS_Props = {
     data: {
         label: string;
-        awaitType?: 'time' | 'event' | 'webhook';
+        awaitType?: 'time' | 'event' | 'webhook' | 'schedule';
         awaitConfig?: AwaitConfig;
+        awaitData?: AwaitData;
         status?: 'idle' | 'waiting' | 'resolved' | 'timeout';
+        startedAt?: string | Date;
+        scheduledTriggerAt?: string | Date;
     };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/app/components/flow/Diagram.d.vue.ts

@@ -45,6 +45,7 @@ interface StepStatus {
     status: 'pending' | 'running' | 'completed' | 'failed' | 'retrying' | 'waiting' | 'timeout' | 'canceled';
     attempt?: number;
     error?: string;
+    scheduledTriggerAt?: string;
 }
 type __VLS_Props = {
     flow?: FlowMeta | null;
@@ -53,7 +54,7 @@ type __VLS_Props = {
     showMiniMap?: boolean;
     showBackground?: boolean;
     stepStates?: Record<string, StepStatus>;
-    flowStatus?: 'running' | 'completed' | 'failed' | 'canceled' | 'stalled';
+    flowStatus?: 'running' | 'completed' | 'failed' | 'canceled' | 'stalled' | 'awaiting';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     nodeSelected: (payload: {