nvent 0.4.3 → 0.4.5

package/dist/runtime/app/components/FlowDiagram.vue

@@ -1,338 +0,0 @@
-<template>
-  <div
-    :class="heightClass"
-    class="w-full border rounded bg-white/5"
-  >
-    <ClientOnly>
-      <div class="relative h-full">
-        <button
-          v-if="flowId"
-          class="absolute z-10 top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white text-xs px-2 py-1 rounded"
-          type="button"
-          title="Reset layout"
-          @click="resetLayout()"
-        >
-          Reset
-        </button>
-        <VueFlow
-          ref="vueFlowRef"
-          v-model:nodes="internalNodes"
-          v-model:edges="internalEdges"
-          :fit-view-on-init="true"
-          class="h-full w-full"
-          @node-click="onNodeClick"
-        >
-          <template #node-flow-step="{ id, data }">
-            <FlowNodeCard
-              :id="id"
-              :data="data"
-              kind="step"
-              @action="onAction"
-            />
-            <Handle
-              type="target"
-              :position="Position.Top"
-            />
-            <Handle
-              type="source"
-              :position="Position.Bottom"
-            />
-          </template>
-
-          <template #node-flow-entry="{ id, data }">
-            <FlowNodeCard
-              :id="id"
-              :data="data"
-              kind="entry"
-              @action="onAction"
-            />
-            <Handle
-              type="source"
-              :position="Position.Bottom"
-            />
-          </template>
-
-          <Background
-            v-if="showBackground"
-            pattern-color="#888"
-            :gap="12"
-          />
-          <Controls v-if="showControls" />
-          <MiniMap v-if="showMiniMap" />
-        </VueFlow>
-      </div>
-    </ClientOnly>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, watch, nextTick } from "#imports";
-import { Handle, Position } from "@vue-flow/core";
-import FlowNodeCard from "../components/FlowNodeCard.vue";
-const props = defineProps({
-  flow: { type: [Object, null], required: false },
-  heightClass: { type: String, required: false },
-  showControls: { type: Boolean, required: false },
-  showMiniMap: { type: Boolean, required: false },
-  showBackground: { type: Boolean, required: false },
-  stepStates: { type: Object, required: false }
-});
-const heightClass = computed(() => props.heightClass || "h-80");
-const emit = defineEmits(["nodeSelected", "nodeAction"]);
-const flowId = computed(() => props.flow?.id);
-const vueFlowRef = ref(null);
-const nodes = computed(() => {
-  const out = [];
-  const f = props.flow;
-  if (!f) return out;
-  const states = props.stepStates || {};
-  const colWidth = 250;
-  const rowHeight = 140;
-  const horizontalGap = 50;
-  const verticalGap = 80;
-  const entryToStepsGap = 140;
-  const nodeWidth = 220;
-  let y = 0;
-  if (f.entry) {
-    const entryState = states[f.entry.step];
-    const status = mapStatusToNodeStatus(entryState?.status);
-    out.push({
-      id: `entry:${f.entry.step}`,
-      position: { x: -nodeWidth / 2, y },
-      data: {
-        label: f.entry.step,
-        queue: f.entry.queue,
-        status,
-        attempt: entryState?.attempt,
-        error: entryState?.error,
-        runtime: f.entry.runtime,
-        runtype: f.entry.runtype,
-        emits: f.entry.emits
-      },
-      type: "flow-entry",
-      style: { minWidth: `${nodeWidth}px` }
-    });
-    y += rowHeight + entryToStepsGap;
-  }
-  const steps = f.steps || {};
-  if (f.analyzed?.levels && f.analyzed.levels.length > 0) {
-    const levels = f.analyzed.levels.filter((level) => level.length > 0);
-    levels.forEach((levelSteps) => {
-      if (levelSteps.length === 0) return;
-      const cols = Math.min(4, levelSteps.length);
-      const rows = Math.ceil(levelSteps.length / cols);
-      levelSteps.forEach((stepName, idx) => {
-        const step = steps[stepName];
-        if (!step) return;
-        const stepState = states[stepName];
-        const status = mapStatusToNodeStatus(stepState?.status);
-        const col = idx % cols;
-        const row = Math.floor(idx / cols);
-        const remainingInLevel = levelSteps.length - row * cols;
-        const nodesInThisRow = Math.min(cols, remainingInLevel);
-        const rowWidth = nodesInThisRow * colWidth + (nodesInThisRow - 1) * horizontalGap;
-        const rowStartX = -rowWidth / 2;
-        const x = rowStartX + col * (colWidth + horizontalGap);
-        const yPos = y + row * (rowHeight + verticalGap);
-        out.push({
-          id: `step:${stepName}`,
-          position: { x, y: yPos },
-          data: {
-            label: stepName,
-            queue: step?.queue,
-            workerId: step?.workerId,
-            status,
-            attempt: stepState?.attempt,
-            error: stepState?.error,
-            runtime: step?.runtime,
-            runtype: step?.runtype,
-            emits: step?.emits
-          },
-          type: "flow-step",
-          style: { minWidth: `${nodeWidth}px` }
-        });
-      });
-      y += rows * (rowHeight + verticalGap);
-    });
-  } else {
-    const names = Object.keys(steps);
-    const cols = 3;
-    names.forEach((name, idx) => {
-      const step = steps[name];
-      const stepState = states[name];
-      const status = mapStatusToNodeStatus(stepState?.status);
-      const col = idx % cols;
-      const row = Math.floor(idx / cols);
-      const totalRows = Math.ceil(names.length / cols);
-      const isLastRow = row === totalRows - 1;
-      const nodesInThisRow = isLastRow ? names.length % cols || cols : cols;
-      const rowWidth = nodesInThisRow * colWidth + (nodesInThisRow - 1) * horizontalGap;
-      const rowStartX = -rowWidth / 2;
-      const x = rowStartX + col * (colWidth + horizontalGap);
-      const yPos = y + row * (rowHeight + verticalGap);
-      out.push({
-        id: `step:${name}`,
-        position: { x, y: yPos },
-        data: {
-          label: name,
-          queue: step?.queue,
-          workerId: step?.workerId,
-          status,
-          attempt: stepState?.attempt,
-          error: stepState?.error,
-          runtime: step?.runtime,
-          runtype: step?.runtype,
-          emits: step?.emits
-        },
-        type: "flow-step",
-        style: { minWidth: `${nodeWidth}px` }
-      });
-    });
-  }
-  return out;
-});
-function mapStatusToNodeStatus(status) {
-  switch (status) {
-    case "running":
-    case "retrying":
-    case "waiting":
-      return "running";
-    case "completed":
-      return "done";
-    case "failed":
-    case "timeout":
-      return "error";
-    default:
-      return "idle";
-  }
-}
-const edges = computed(() => {
-  const f = props.flow;
-  if (!f) return [];
-  const states = props.stepStates || {};
-  const added = /* @__PURE__ */ new Set();
-  const out = [];
-  function addEdge(source, target, label) {
-    const id = `${source}->${target}${label ? `:${label}` : ""}`;
-    if (added.has(id)) return;
-    const sourceStep = source.split(":")[1];
-    const targetStep = target.split(":")[1];
-    const sourceState = sourceStep ? states[sourceStep] : void 0;
-    const targetState = targetStep ? states[targetStep] : void 0;
-    const animated = sourceState?.status === "completed" && (targetState?.status === "running" || targetState?.status === "pending" || !targetState);
-    added.add(id);
-    out.push({ id, source, target, label, animated });
-  }
-  if (f.analyzed?.steps) {
-    const analyzedSteps = f.analyzed.steps;
-    for (const [stepName, stepInfo] of Object.entries(analyzedSteps)) {
-      const target = `step:${stepName}`;
-      if (stepInfo.dependsOn.length > 0) {
-        for (const depName of stepInfo.dependsOn) {
-          const source = depName === f.entry?.step ? `entry:${depName}` : `step:${depName}`;
-          addEdge(source, target);
-        }
-      } else if (f.entry) {
-        addEdge(`entry:${f.entry.step}`, target);
-      }
-    }
-  } else {
-    console.warn("[FlowDiagram] No analyzed data available for edges");
-  }
-  return out;
-});
-const internalNodes = ref([]);
-const internalEdges = ref([]);
-function storageKey(flowId2) {
-  return flowId2 ? `flow-layout:${flowId2}` : "flow-layout:unknown";
-}
-function applySavedPositions(nodesIn, flowId2) {
-  if (!flowId2) return nodesIn;
-  try {
-    const raw = localStorage.getItem(storageKey(flowId2));
-    if (!raw) return nodesIn;
-    const saved = JSON.parse(raw);
-    const byId = new Map(saved.map((s) => [s.id, s]));
-    nodesIn.forEach((n) => {
-      const s = byId.get(n.id);
-      if (s) n.position = { x: s.x, y: s.y };
-    });
-  } catch {
-  }
-  return nodesIn;
-}
-function savePositionsDebounced(flowId2) {
-  if (!flowId2) return;
-  const payload = internalNodes.value.map((n) => ({ id: n.id, x: n.position.x, y: n.position.y }));
-  try {
-    localStorage.setItem(storageKey(flowId2), JSON.stringify(payload));
-  } catch {
-  }
-}
-watch(() => props.flow, (f) => {
-  if (!f) {
-    internalNodes.value = [];
-    internalEdges.value = [];
-    return;
-  }
-  const builtNodes = nodes.value.map((n) => ({ id: n.id, position: { ...n.position }, data: { ...n.data }, type: n.type, style: n.style }));
-  const builtEdges = edges.value.map((e) => ({ id: e.id, source: e.source, target: e.target, label: e.label, animated: e.animated }));
-  applySavedPositions(builtNodes, f.id);
-  internalNodes.value = builtNodes;
-  internalEdges.value = builtEdges;
-  setTimeout(() => {
-    if (vueFlowRef.value) {
-      vueFlowRef.value.fitView({ padding: 0.2, duration: 200 });
-    }
-  }, 100);
-}, { immediate: true, deep: false });
-watch(() => props.stepStates, () => {
-  if (!props.flow) return;
-  const builtNodes = nodes.value.map((n) => ({ id: n.id, position: { ...n.position }, data: { ...n.data }, type: n.type, style: n.style }));
-  const positionMap = new Map(internalNodes.value.map((n) => [n.id, n.position]));
-  builtNodes.forEach((n) => {
-    const existing = positionMap.get(n.id);
-    if (existing) n.position = existing;
-  });
-  internalNodes.value = builtNodes;
-  const builtEdges = edges.value.map((e) => ({ id: e.id, source: e.source, target: e.target, label: e.label, animated: e.animated }));
-  internalEdges.value = builtEdges;
-}, { deep: true });
-watch(internalNodes, () => savePositionsDebounced(props.flow?.id), { deep: true });
-function onNodeClick(evt) {
-  const id = evt?.node?.id || evt?.id;
-  if (id) emit("nodeSelected", { id });
-}
-function onAction(payload) {
-  emit("nodeAction", payload);
-}
-function resetLayout() {
-  const id = flowId.value;
-  if (!id) return;
-  try {
-    localStorage.removeItem(storageKey(id));
-  } catch {
-  }
-  const freshNodes = nodes.value.map((n) => ({
-    id: n.id,
-    position: { x: n.position.x, y: n.position.y },
-    data: { ...n.data },
-    type: n.type,
-    style: n.style
-  }));
-  internalNodes.value = freshNodes;
-  nextTick(() => {
-    if (vueFlowRef.value) {
-      vueFlowRef.value.fitView({
-        padding: 0.2,
-        includeHiddenNodes: false,
-        duration: 300
-      });
-    }
-  });
-}
-</script>
-
-<style scoped>
-:deep(.vue-flow__node){background:transparent;border:none;box-shadow:none;display:inline-block;overflow:visible;padding:0}:deep(.vue-flow__node-input){border:none}:deep(.vue-flow__node.selected),:deep(.vue-flow__node:focus){border:none;box-shadow:none;outline:none}
-</style>

package/dist/runtime/app/components/FlowDiagram.vue.d.ts

@@ -1,64 +0,0 @@
-interface FlowEntry {
-    step: string;
-    queue: string;
-    workerId: string;
-    runtime?: 'nodejs' | 'python';
-    runtype?: 'inprocess' | 'task';
-    emits?: string[];
-}
-interface FlowStep {
-    queue: string;
-    workerId: string;
-    subscribes?: string[];
-    runtime?: 'nodejs' | 'python';
-    runtype?: 'inprocess' | 'task';
-    emits?: string[];
-}
-interface AnalyzedStep extends FlowStep {
-    name: string;
-    dependsOn: string[];
-    triggers: string[];
-    level: number;
-}
-interface FlowMeta {
-    id: string;
-    entry?: FlowEntry;
-    steps?: Record<string, FlowStep>;
-    analyzed?: {
-        levels: string[][];
-        maxLevel: number;
-        steps: Record<string, AnalyzedStep>;
-    };
-}
-interface StepStatus {
-    status: 'pending' | 'running' | 'completed' | 'failed' | 'retrying' | 'waiting' | 'timeout';
-    attempt?: number;
-    error?: string;
-}
-type __VLS_Props = {
-    flow?: FlowMeta | null;
-    heightClass?: string;
-    showControls?: boolean;
-    showMiniMap?: boolean;
-    showBackground?: boolean;
-    stepStates?: Record<string, StepStatus>;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    nodeSelected: (payload: {
-        id: string;
-    }) => any;
-    nodeAction: (payload: {
-        id: string;
-        action: "run" | "logs" | "details";
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onNodeSelected?: ((payload: {
-        id: string;
-    }) => any) | undefined;
-    onNodeAction?: ((payload: {
-        id: string;
-        action: "run" | "logs" | "details";
-    }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/FlowNodeCard.d.vue.ts

@@ -1,29 +0,0 @@
-type Status = 'idle' | 'running' | 'error' | 'done' | string | undefined;
-type __VLS_Props = {
-    id: string;
-    data: {
-        label?: string;
-        queue?: string;
-        workerId?: string;
-        status?: Status;
-        attempt?: number;
-        error?: string;
-        runtime?: 'nodejs' | 'python';
-        runtype?: 'inprocess' | 'task';
-        emits?: string[];
-    };
-    kind?: 'entry' | 'step';
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    action: (payload: {
-        id: string;
-        action: "run" | "logs" | "details";
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((payload: {
-        id: string;
-        action: "run" | "logs" | "details";
-    }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/FlowNodeCard.vue

@@ -1,156 +0,0 @@
-<template>
-  <UCard
-    class="min-w-[220px] max-w-[300px]"
-    :ui="{
-  body: 'p-0',
-  header: headerClass,
-  footer: footerClass
-}"
-  >
-    <template #header>
-      <div class="flex items-center justify-between gap-2">
-        <div class="flex items-center gap-2 min-w-0">
-          <UIcon
-            v-if="runnerIcon"
-            :name="runnerIcon"
-            class="size-4 flex-shrink-0"
-            :title="data?.workerId"
-          />
-          <p
-            class="truncate font-medium"
-            :title="data?.label"
-          >
-            {{ data?.label }}
-          </p>
-        </div>
-        <UBadge
-          :label="(data?.status || 'idle').toUpperCase()"
-          size="xs"
-          :color="statusColor(data?.status)"
-        />
-      </div>
-    </template>
-
-    <div class="px-3 py-2 text-xs space-y-1">
-      <div class="flex items-center justify-between">
-        <span class="text-gray-500 dark:text-gray-400">Queue</span>
-        <span
-          class="truncate ml-2 font-mono"
-          :title="data?.queue"
-        >{{ data?.queue || "-" }}</span>
-      </div>
-      <div class="flex items-center justify-between">
-        <span class="text-gray-500 dark:text-gray-400">Worker</span>
-        <span
-          class="truncate ml-2 font-mono"
-          :title="data?.workerId"
-        >{{ data?.workerId || "-" }}</span>
-      </div>
-      <div
-        v-if="data?.runtype"
-        class="flex items-center justify-between"
-      >
-        <span class="text-gray-500 dark:text-gray-400">Mode</span>
-        <UBadge
-          :label="data.runtype"
-          size="xs"
-          color="neutral"
-          variant="soft"
-        />
-      </div>
-      <div
-        v-if="data?.emits && data.emits.length > 0"
-        class="flex items-start justify-between gap-2"
-      >
-        <span class="text-gray-500 dark:text-gray-400">Emits</span>
-        <div class="flex flex-wrap gap-1 justify-end">
-          <UBadge
-            v-for="event in data.emits"
-            :key="event"
-            :label="event"
-            size="xs"
-            color="primary"
-            variant="soft"
-          />
-        </div>
-      </div>
-      <div
-        v-if="data?.attempt && data.attempt > 1"
-        class="flex items-center justify-between"
-      >
-        <span class="text-gray-500 dark:text-gray-400">Attempts</span>
-        <span class="ml-2 font-medium text-amber-600 dark:text-amber-400">
-          {{ data.attempt }}
-        </span>
-      </div>
-      <div
-        v-if="data?.error"
-        class="pt-1 border-t border-gray-200 dark:border-gray-700"
-      >
-        <span
-          class="text-red-500 dark:text-red-400 block truncate"
-          :title="data.error"
-        >
-          ⚠️ {{ data.error }}
-        </span>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex items-center justify-center gap-2 w-full">
-        <UButton
-          size="xs"
-          color="neutral"
-          label="Logs"
-          icon="i-heroicons-document-text-20-solid"
-          @click="handleAction('logs')"
-        />
-        <UButton
-          size="xs"
-          color="neutral"
-          label="Details"
-          icon="i-heroicons-information-circle-20-solid"
-          @click="handleAction('details')"
-        />
-      </div>
-    </template>
-  </UCard>
-</template>
-
-<script setup>
-import { computed } from "#imports";
-import { UCard, UButton, UBadge, UIcon } from "#components";
-const props = defineProps({
-  id: { type: String, required: true },
-  data: { type: Object, required: true },
-  kind: { type: String, required: false }
-});
-const emit = defineEmits(["action"]);
-function handleAction(action) {
-  emit("action", { id: props.id, action });
-}
-const headerClass = computed(() => props.kind === "entry" ? "px-3 py-2 bg-gradient-to-br from-emerald-800 to-emerald-700 text-emerald-50 rounded-t" : "px-3 py-2 bg-gradient-to-br from-gray-800 to-gray-700 text-gray-100 rounded-t");
-const footerClass = computed(() => props.kind === "entry" ? "px-3 pb-2 pt-1" : "px-3 pb-2 pt-1");
-const runnerIcon = computed(() => {
-  const runtime = props.data?.runtime;
-  if (runtime === "python") {
-    return "i-devicon-python";
-  }
-  if (runtime === "nodejs") {
-    return "i-devicon-nodejs";
-  }
-  return runtime ? "i-lucide-code" : void 0;
-});
-function statusColor(status) {
-  switch (status) {
-    case "running":
-      return "warning";
-    case "done":
-      return "success";
-    case "error":
-      return "error";
-    default:
-      return "neutral";
-  }
-}
-</script>

package/dist/runtime/app/components/FlowNodeCard.vue.d.ts

@@ -1,29 +0,0 @@
-type Status = 'idle' | 'running' | 'error' | 'done' | string | undefined;
-type __VLS_Props = {
-    id: string;
-    data: {
-        label?: string;
-        queue?: string;
-        workerId?: string;
-        status?: Status;
-        attempt?: number;
-        error?: string;
-        runtime?: 'nodejs' | 'python';
-        runtype?: 'inprocess' | 'task';
-        emits?: string[];
-    };
-    kind?: 'entry' | 'step';
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    action: (payload: {
-        id: string;
-        action: "run" | "logs" | "details";
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((payload: {
-        id: string;
-        action: "run" | "logs" | "details";
-    }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/FlowRunOverview.d.vue.ts

@@ -1,9 +0,0 @@
-type __VLS_Props = {
-    runStatus?: string;
-    startedAt?: string;
-    completedAt?: string;
-    steps: any[];
-};
-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>;
-declare const _default: typeof __VLS_export;
-export default _default;