@nvent-addon/app 0.5.15 → 1.0.0-alpha.2

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

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

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

@@ -1,525 +0,0 @@
-<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 { 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();
-  loading.value = false;
-  if (import.meta.client) {
-    triggerWs.subscribeStats(
-      {
-        onInitial: (data) => {
-          updateTriggerStats(data);
-        },
-        onUpdate: (data) => {
-          updateTriggerStats(data);
-        }
-      },
-      {
-        autoReconnect: true,
-        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

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

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