@nvent-addon/app 0.4.5 → 0.5.1

package/dist/runtime/app/pages/triggers/[name].vue.d.ts

@@ -0,0 +1,3 @@
+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/triggers/index.d.vue.ts

@@ -0,0 +1,3 @@
+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/triggers/index.vue

@@ -0,0 +1,528 @@
+<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">
+            Triggers
+          </h1>
+        </div>
+        <div class="flex items-center gap-3">
+          <LiveIndicator
+            :is-connected="triggerWs.connected.value"
+            :is-reconnecting="triggerWs.reconnecting.value"
+          />
+          <UButton
+            icon="i-lucide-plus"
+            label="Create Trigger"
+            color="primary"
+            size="sm"
+            @click="router.push('/triggers/new')"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <div class="max-w-7xl mx-auto p-6">
+        <!-- Stats Overview -->
+        <div
+          v-if="stats"
+          class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"
+        >
+          <StatCard
+            icon="i-lucide-zap"
+            :count="stats.total"
+            label="Total Triggers"
+            variant="gray"
+          />
+          <StatCard
+            icon="i-lucide-check-circle"
+            :count="stats.active"
+            label="Active"
+            variant="emerald"
+          />
+          <StatCard
+            icon="i-lucide-users"
+            :count="stats.totalSubscriptions"
+            label="Subscriptions"
+            variant="blue"
+          />
+          <StatCard
+            icon="i-lucide-activity"
+            :count="stats.totalFires"
+            label="Total Fires"
+            variant="purple"
+          />
+        </div>
+
+        <!-- Filters -->
+        <div class="mb-4 flex items-center gap-3">
+          <div class="flex-1">
+            <UInput
+              v-model="searchQuery"
+              icon="i-lucide-search"
+              placeholder="Search triggers..."
+              size="sm"
+            />
+          </div>
+          <USelectMenu
+            v-model="typeFilter"
+            :items="typeFilterOptions"
+            value-key="value"
+            placeholder="All Types"
+            size="sm"
+            class="w-44"
+          >
+            <template #label>
+              <span v-if="typeFilter === 'all'">All Types</span>
+              <div
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UIcon
+                  :name="getTriggerIcon(typeFilter)"
+                  class="w-4 h-4"
+                />
+                <span class="capitalize">{{ typeFilter }}</span>
+              </div>
+            </template>
+          </USelectMenu>
+          <USelectMenu
+            v-model="scopeFilter"
+            :items="scopeFilterOptions"
+            value-key="value"
+            placeholder="All Scopes"
+            size="sm"
+            class="w-40"
+          >
+            <template #label>
+              <span v-if="scopeFilter === 'all'">All Scopes</span>
+              <div
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UIcon
+                  :name="scopeFilter === 'flow' ? 'i-lucide-git-branch' : 'i-lucide-play-circle'"
+                  class="w-4 h-4"
+                />
+                <span class="capitalize">{{ scopeFilter }}</span>
+              </div>
+            </template>
+          </USelectMenu>
+          <USelectMenu
+            v-model="statusFilter"
+            :items="statusFilterOptions"
+            value-key="value"
+            placeholder="All Status"
+            size="sm"
+            class="w-40"
+          >
+            <template #label>
+              <span v-if="statusFilter === 'all'">All Status</span>
+              <div
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UIcon
+                  :name="statusFilter === 'active' ? 'i-lucide-check-circle' : statusFilter === 'inactive' ? 'i-lucide-pause-circle' : 'i-lucide-archive'"
+                  class="w-4 h-4"
+                />
+                <span class="capitalize">{{ statusFilter }}</span>
+              </div>
+            </template>
+          </USelectMenu>
+        </div>
+
+        <!-- Triggers List -->
+        <div
+          v-if="!filteredTriggers || filteredTriggers.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"
+        >
+          <div v-if="loading">
+            <UIcon
+              name="i-lucide-loader-2"
+              class="w-12 h-12 animate-spin mx-auto mb-3 opacity-50"
+            />
+            <p>Loading triggers...</p>
+          </div>
+          <div v-else-if="searchQuery || typeFilter !== 'all' || scopeFilter !== 'all' || statusFilter !== 'all'">
+            <UIcon
+              name="i-lucide-search-x"
+              class="w-12 h-12 mx-auto mb-3 opacity-50"
+            />
+            <p>No triggers match your filters</p>
+            <UButton
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              class="mt-2"
+              @click="clearFilters"
+            >
+              Clear Filters
+            </UButton>
+          </div>
+          <div v-else>
+            <UIcon
+              name="i-lucide-zap-off"
+              class="w-12 h-12 mx-auto mb-3 opacity-50"
+            />
+            <p>No triggers registered</p>
+          </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="trigger in paginatedTriggers"
+              :key="trigger.name"
+              class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors cursor-pointer"
+              @click="selectTrigger(trigger.name)"
+            >
+              <div class="flex items-start justify-between gap-4">
+                <!-- Left: Trigger Info -->
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 mb-1">
+                    <UIcon
+                      :name="getTriggerIcon(trigger.type)"
+                      class="w-4 h-4 shrink-0"
+                      :class="getTriggerIconColor(trigger.type)"
+                    />
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                      {{ trigger.displayName || trigger.name }}
+                    </h3>
+                    <UBadge
+                      :label="trigger.type"
+                      :color="getTriggerTypeColor(trigger.type)"
+                      variant="subtle"
+                      size="xs"
+                    />
+                    <UBadge
+                      :label="trigger.scope"
+                      color="neutral"
+                      variant="subtle"
+                      size="xs"
+                    />
+                  </div>
+
+                  <p
+                    v-if="trigger.description"
+                    class="text-xs text-gray-500 dark:text-gray-400 mb-2 line-clamp-1"
+                  >
+                    {{ trigger.description }}
+                  </p>
+
+                  <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+                    <div class="flex items-center gap-1">
+                      <UIcon
+                        name="i-lucide-git-branch"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ trigger.subscriptionCount }} flow{{ trigger.subscriptionCount === 1 ? "" : "s" }}</span>
+                    </div>
+                    <div
+                      v-if="trigger.stats.totalFires > 0"
+                      class="flex items-center gap-1"
+                    >
+                      <UIcon
+                        name="i-lucide-zap"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ formatNumber(trigger.stats.totalFires) }} fires</span>
+                    </div>
+                    <div
+                      v-if="trigger.lastActivityAt"
+                      class="flex items-center gap-1"
+                    >
+                      <UIcon
+                        name="i-lucide-clock"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ formatTime(trigger.lastActivityAt) }}</span>
+                    </div>
+                    <div
+                      v-if="trigger.source"
+                      class="flex items-center gap-1"
+                    >
+                      <UIcon
+                        name="i-lucide-package"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ trigger.source }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right: Stats & Status -->
+                <div class="flex items-center gap-3">
+                  <!-- Status Badge -->
+                  <UBadge
+                    :label="trigger.status"
+                    :color="trigger.status === 'active' ? 'success' : trigger.status === 'inactive' ? 'warning' : 'neutral'"
+                    variant="subtle"
+                  />
+
+                  <!-- Actions -->
+                  <UButton
+                    icon="i-lucide-arrow-right"
+                    size="xs"
+                    color="neutral"
+                    variant="ghost"
+                    square
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 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
+              v-model:page="currentPage"
+              :items-per-page="itemsPerPage"
+              :total="filteredTriggers.length"
+            />
+          </div>
+        </div>
+
+        <!-- Footer Info -->
+        <div
+          v-if="filteredTriggers && filteredTriggers.length > 0"
+          class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400"
+        >
+          Showing {{ startIndex + 1 }}-{{ endIndex }} of {{ filteredTriggers.length }} trigger{{ filteredTriggers.length === 1 ? "" : "s" }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from "#imports";
+import { UButton, UIcon, UBadge, UInput, USelectMenu, UPagination } from "#components";
+import { useComponentRouter } from "../../composables/useComponentRouter";
+import { useTriggerWebSocket } from "../../composables/useTriggerWebSocket";
+import StatCard from "../../components/StatCard.vue";
+import LiveIndicator from "../../components/LiveIndicator.vue";
+const router = useComponentRouter();
+const triggers = ref([]);
+const loading = ref(true);
+const triggerWs = useTriggerWebSocket();
+async function fetchTriggers() {
+  try {
+    const data = await $fetch("/api/_triggers");
+    triggers.value = data;
+  } catch (err) {
+    console.error("Error fetching triggers:", err);
+  }
+}
+function updateTriggerStats(data) {
+  const triggerName = data?.id;
+  if (!triggerName || !triggers.value)
+    return;
+  const triggerIndex = triggers.value.findIndex((t) => t.name === triggerName);
+  if (triggerIndex === -1) {
+    console.warn("[Trigger Index] Trigger not found in list:", triggerName);
+    return;
+  }
+  const metadata = data?.metadata;
+  if (!metadata) {
+    console.warn("[Trigger Index] No metadata in update:", data);
+    return;
+  }
+  const stats2 = {
+    totalFires: metadata.stats?.totalFires || metadata.totalFires || metadata["stats.totalFires"] || triggers.value[triggerIndex].stats?.totalFires || 0,
+    totalFlowsStarted: metadata.stats?.totalFlowsStarted || metadata.totalFlowsStarted || metadata["stats.totalFlowsStarted"] || triggers.value[triggerIndex].stats?.totalFlowsStarted || 0,
+    activeSubscribers: metadata.stats?.activeSubscribers || metadata.activeSubscribers || metadata["stats.activeSubscribers"] || triggers.value[triggerIndex].stats?.activeSubscribers || 0,
+    lastFiredAt: metadata.stats?.lastFiredAt || metadata.lastFiredAt || metadata["stats.lastFiredAt"] || triggers.value[triggerIndex].stats?.lastFiredAt
+  };
+  triggers.value[triggerIndex] = {
+    ...triggers.value[triggerIndex],
+    stats: stats2,
+    status: metadata.status ?? triggers.value[triggerIndex].status,
+    lastActivityAt: metadata.lastActivityAt ?? triggers.value[triggerIndex].lastActivityAt
+  };
+}
+onMounted(async () => {
+  await fetchTriggers();
+  if (import.meta.client) {
+    triggerWs.subscribeStats(
+      {
+        onInitial: (data) => {
+          updateTriggerStats(data);
+        },
+        onUpdate: (data) => {
+          updateTriggerStats(data);
+        }
+      },
+      {
+        autoReconnect: true,
+        onOpen: () => {
+          loading.value = false;
+        },
+        onError: (err) => {
+          console.error("[Trigger Stats] Error:", err);
+        }
+      }
+    );
+  }
+});
+onBeforeUnmount(() => {
+  triggerWs.unsubscribeStats();
+  triggerWs.stop();
+});
+const searchQuery = ref("");
+const typeFilter = ref("all");
+const scopeFilter = ref("all");
+const statusFilter = ref("all");
+const typeFilterOptions = [
+  { label: "All Types", value: "all" },
+  { label: "Event", value: "event", icon: "i-lucide-radio" },
+  { label: "Webhook", value: "webhook", icon: "i-lucide-webhook" },
+  { label: "Schedule", value: "schedule", icon: "i-lucide-clock" },
+  { label: "Manual", value: "manual", icon: "i-lucide-hand" }
+];
+const scopeFilterOptions = [
+  { label: "All Scopes", value: "all" },
+  { label: "Flow", value: "flow", icon: "i-lucide-git-branch" },
+  { label: "Run", value: "run", icon: "i-lucide-play-circle" }
+];
+const statusFilterOptions = [
+  { label: "All Status", value: "all" },
+  { label: "Active", value: "active", icon: "i-lucide-check-circle" },
+  { label: "Inactive", value: "inactive", icon: "i-lucide-pause-circle" },
+  { label: "Retired", value: "retired", icon: "i-lucide-archive" }
+];
+const currentPage = ref(1);
+const itemsPerPage = 10;
+const filteredTriggers = computed(() => {
+  if (!triggers.value) return [];
+  let result = triggers.value;
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    result = result.filter(
+      (t) => t.name.toLowerCase().includes(query) || t.displayName?.toLowerCase().includes(query) || t.description?.toLowerCase().includes(query)
+    );
+  }
+  if (typeFilter.value !== "all") {
+    result = result.filter((t) => t.type === typeFilter.value);
+  }
+  if (scopeFilter.value !== "all") {
+    result = result.filter((t) => t.scope === scopeFilter.value);
+  }
+  if (statusFilter.value !== "all") {
+    result = result.filter((t) => t.status === statusFilter.value);
+  }
+  return result;
+});
+const totalPages = computed(() => {
+  if (!filteredTriggers.value) return 0;
+  return Math.ceil(filteredTriggers.value.length / itemsPerPage);
+});
+const startIndex = computed(() => {
+  return (currentPage.value - 1) * itemsPerPage;
+});
+const endIndex = computed(() => {
+  if (!filteredTriggers.value) return 0;
+  return Math.min(startIndex.value + itemsPerPage, filteredTriggers.value.length);
+});
+const paginatedTriggers = computed(() => {
+  if (!filteredTriggers.value) return [];
+  return filteredTriggers.value.slice(startIndex.value, endIndex.value);
+});
+const clearFilters = () => {
+  searchQuery.value = "";
+  typeFilter.value = "all";
+  scopeFilter.value = "all";
+  statusFilter.value = "all";
+  currentPage.value = 1;
+};
+const selectTrigger = (name) => {
+  router.push(`/triggers/${encodeURIComponent(name)}`);
+};
+const getTriggerIcon = (type) => {
+  switch (type) {
+    case "event":
+      return "i-lucide-radio";
+    case "webhook":
+      return "i-lucide-webhook";
+    case "schedule":
+      return "i-lucide-clock";
+    case "manual":
+      return "i-lucide-hand";
+    default:
+      return "i-lucide-zap";
+  }
+};
+const getTriggerIconColor = (type) => {
+  switch (type) {
+    case "event":
+      return "text-blue-500";
+    case "webhook":
+      return "text-purple-500";
+    case "schedule":
+      return "text-emerald-500";
+    case "manual":
+      return "text-amber-500";
+    default:
+      return "text-gray-500";
+  }
+};
+const getTriggerTypeColor = (type) => {
+  switch (type) {
+    case "event":
+      return "primary";
+    case "webhook":
+      return "success";
+    case "schedule":
+      return "warning";
+    case "manual":
+      return "neutral";
+    default:
+      return "neutral";
+  }
+};
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  if (seconds > 10) return `${seconds}s ago`;
+  return "just now";
+};
+const formatNumber = (num) => {
+  if (num == null) return "0";
+  if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+  if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
+  return num.toString();
+};
+const stats = computed(() => {
+  if (!triggers.value || triggers.value.length === 0) {
+    return {
+      total: 0,
+      active: 0,
+      totalSubscriptions: 0,
+      totalFires: 0
+    };
+  }
+  return {
+    total: triggers.value.length,
+    active: triggers.value.filter((t) => t.status === "active").length,
+    totalSubscriptions: triggers.value.reduce((acc, t) => acc + (t.subscriptionCount || t.stats?.activeSubscribers || 0), 0),
+    totalFires: triggers.value.reduce((acc, t) => acc + (t.stats?.totalFires || 0), 0)
+  };
+});
+</script>

package/dist/runtime/app/pages/triggers/index.vue.d.ts

@@ -0,0 +1,3 @@
+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/triggers/new.d.vue.ts

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