@acmekit/dashboard 2.13.34 → 2.13.36

package/dist/workflow-execution-list-AQEGAME4.mjs

@@ -0,0 +1,596 @@
+import {
+  DateCell
+} from "./chunk-QZOY6YYT.mjs";
+import {
+  TRANSACTION_ERROR_STATES,
+  TRANSACTION_IN_PROGRESS_STATES,
+  getTransactionState,
+  getTransactionStateColor
+} from "./chunk-LP6CPB7N.mjs";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-YLPAZ2DP.mjs";
+import {
+  useQueryParams
+} from "./chunk-C76H5USB.mjs";
+import "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.mjs";
+import {
+  SingleColumnPage
+} from "./chunk-RISX76YT.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  ActionMenu
+} from "./chunk-S3REQHPQ.mjs";
+import {
+  useCancelWorkflowExecution,
+  useRunWorkflow,
+  useWorkflowExecutions,
+  workflowExecutionsQueryKeys
+} from "./chunk-A7ULKHDE.mjs";
+import "./chunk-ITNQKZQQ.mjs";
+import "./chunk-OAHCJFG3.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-YKIWIMJX.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx
+import { PlayMiniSolid } from "@acmekit/icons";
+import { Button as Button2, Container, Heading, Text as Text2 } from "@acmekit/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { Link } from "react-router-dom";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-auto-refresh.tsx
+import { ArrowPathMini } from "@acmekit/icons";
+import { DropdownMenu, IconButton } from "@acmekit/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INTERVALS = [
+  { label: "Off", value: 0 },
+  { label: "5s", value: 5e3 },
+  { label: "10s", value: 1e4 },
+  { label: "30s", value: 3e4 }
+];
+var WorkflowExecutionAutoRefresh = () => {
+  const queryClient = useQueryClient();
+  const [interval, setInterval_] = useState(0);
+  const intervalRef = useRef(null);
+  const refresh = useCallback(() => {
+    queryClient.invalidateQueries({
+      queryKey: workflowExecutionsQueryKeys.lists()
+    });
+  }, [queryClient]);
+  useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (interval > 0) {
+      intervalRef.current = setInterval(refresh, interval);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [interval, refresh]);
+  const activeLabel = INTERVALS.find((i) => i.value === interval)?.label;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        variant: "transparent",
+        onClick: refresh,
+        children: /* @__PURE__ */ jsx(ArrowPathMini, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "txt-compact-small text-ui-fg-muted hover:text-ui-fg-subtle rounded px-1.5 py-0.5 transition-colors", children: activeLabel }) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: INTERVALS.map((opt) => /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          onClick: () => setInterval_(opt.value),
+          className: interval === opt.value ? "font-medium" : "",
+          children: opt.label
+        },
+        opt.value
+      )) })
+    ] })
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-saved-views.tsx
+import { Button, clx } from "@acmekit/ui";
+import { useCallback as useCallback2, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var WorkflowExecutionSavedViews = () => {
+  const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const views = useMemo(
+    () => [
+      {
+        label: t("workflowExecutions.filters.allExecutions"),
+        params: {}
+      },
+      {
+        label: t("workflowExecutions.filters.running"),
+        params: { state: "invoking" }
+      },
+      {
+        label: t("workflowExecutions.filters.failedToday"),
+        params: {
+          state: "failed",
+          created_at: JSON.stringify({
+            $gte: new Date(
+              (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)
+            ).toISOString()
+          })
+        }
+      }
+    ],
+    [t]
+  );
+  const isActive = useCallback2(
+    (view) => {
+      const viewKeys = Object.keys(view.params);
+      if (viewKeys.length === 0) {
+        return !searchParams.has("state") && !searchParams.has("created_at");
+      }
+      return viewKeys.every(
+        (key) => searchParams.get(key) === view.params[key]
+      );
+    },
+    [searchParams]
+  );
+  const handleClick = useCallback2(
+    (view) => {
+      const newParams = new URLSearchParams();
+      for (const [key, value] of Object.entries(view.params)) {
+        newParams.set(key, value);
+      }
+      setSearchParams(newParams);
+    },
+    [setSearchParams]
+  );
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-1", children: views.map((view) => /* @__PURE__ */ jsx2(
+    Button,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => handleClick(view),
+      className: clx(
+        "txt-compact-small-plus",
+        isActive(view) ? "bg-ui-bg-base shadow-elevation-card-rest text-ui-fg-base" : "text-ui-fg-muted"
+      ),
+      children: view.label
+    },
+    view.label
+  )) });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx
+import { Badge, Copy, Text, clx as clx3 } from "@acmekit/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo as useMemo2 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/components/data-table/components/data-table-status-cell/data-table-status-cell.tsx
+import { clx as clx2 } from "@acmekit/ui";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DataTableStatusCell = ({
+  color,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "txt-compact-small text-ui-fg-subtle flex h-full w-full items-center gap-x-2 overflow-hidden", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "presentation",
+        className: "flex h-5 w-2 items-center justify-center",
+        children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: clx2(
+              "h-2 w-2 rounded-sm shadow-[0px_0px_0px_1px_rgba(0,0,0,0.12)_inset]",
+              {
+                "bg-ui-tag-neutral-icon": color === "grey",
+                "bg-ui-tag-green-icon": color === "green",
+                "bg-ui-tag-red-icon": color === "red",
+                "bg-ui-tag-blue-icon": color === "blue",
+                "bg-ui-tag-orange-icon": color === "orange",
+                "bg-ui-tag-purple-icon": color === "purple"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { className: "truncate", children })
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-row-actions.tsx
+import { ArrowPathMini as ArrowPathMini2, Eye, XMark } from "@acmekit/icons";
+import { toast, usePrompt } from "@acmekit/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var WorkflowExecutionRowActions = ({
+  execution
+}) => {
+  const { t } = useTranslation2();
+  const prompt = usePrompt();
+  const state = execution.state;
+  const isFailed = TRANSACTION_ERROR_STATES.includes(state);
+  const isRunning = TRANSACTION_IN_PROGRESS_STATES.includes(state);
+  const workflowId = execution.workflow_id;
+  const transactionId = execution.transaction_id;
+  const { mutateAsync: runAsync } = useRunWorkflow(workflowId);
+  const { mutateAsync: cancelAsync } = useCancelWorkflowExecution(
+    workflowId,
+    transactionId
+  );
+  const handleRetry = async () => {
+    const payload = execution?.context?.data?.payload;
+    const input = payload && typeof payload === "object" ? payload : {};
+    await runAsync(
+      { input },
+      {
+        onSuccess: () => {
+          toast.success(t("workflowExecutions.actions.retrySuccess"));
+        },
+        onError: (err) => {
+          toast.error(err.message);
+        }
+      }
+    );
+  };
+  const handleCancel = async () => {
+    const res = await prompt({
+      title: t("workflowExecutions.actions.cancelConfirmTitle"),
+      description: t(
+        "workflowExecutions.actions.cancelConfirmDescription",
+        { workflow_id: workflowId }
+      ),
+      confirmText: t("workflowExecutions.actions.cancel"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) return;
+    await cancelAsync(void 0, {
+      onSuccess: () => {
+        toast.success(t("workflowExecutions.actions.cancelSuccess"));
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  };
+  const secondaryActions = [];
+  if (isFailed) {
+    secondaryActions.push({
+      icon: /* @__PURE__ */ jsx4(ArrowPathMini2, {}),
+      label: t("workflowExecutions.actions.retry"),
+      onClick: handleRetry
+    });
+  }
+  if (isRunning) {
+    secondaryActions.push({
+      icon: /* @__PURE__ */ jsx4(XMark, {}),
+      label: t("workflowExecutions.actions.cancel"),
+      onClick: handleCancel
+    });
+  }
+  const groups = [
+    {
+      actions: [
+        {
+          icon: /* @__PURE__ */ jsx4(Eye, {}),
+          label: t("workflowExecutions.actions.viewDetails"),
+          to: `${execution.id}`
+        }
+      ]
+    },
+    ...secondaryActions.length > 0 ? [{ actions: secondaryActions }] : []
+  ];
+  return /* @__PURE__ */ jsx4(ActionMenu, { groups });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var useWorkflowExecutionTableColumns = () => {
+  const { t } = useTranslation3();
+  return useMemo2(
+    () => [
+      columnHelper.accessor("workflow_id", {
+        header: t("workflowExecutions.workflowIdLabel"),
+        cell: ({ getValue }) => {
+          const workflowId = getValue();
+          return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx5(Badge, { size: "2xsmall", className: "truncate", children: workflowId }),
+            /* @__PURE__ */ jsx5(Copy, { content: workflowId, className: "text-ui-fg-muted" })
+          ] });
+        }
+      }),
+      columnHelper.accessor("state", {
+        header: t("fields.state"),
+        cell: ({ getValue }) => {
+          const state = getValue();
+          const color = getTransactionStateColor(state);
+          const translatedState = getTransactionState(t, state);
+          return /* @__PURE__ */ jsx5(DataTableStatusCell, { color, children: /* @__PURE__ */ jsx5("span", { className: "capitalize", children: translatedState }) });
+        }
+      }),
+      columnHelper.accessor("execution", {
+        header: t("workflowExecutions.progressLabel"),
+        cell: ({ getValue }) => {
+          const steps = getValue()?.steps;
+          if (!steps) {
+            return /* @__PURE__ */ jsx5("span", { className: "text-ui-fg-subtle whitespace-nowrap", children: t("workflowExecutions.stepsCompletedLabel", {
+              completed: 0,
+              count: 0
+            }) });
+          }
+          const actionableSteps = Object.values(steps).filter(
+            (step) => step.id !== ROOT_PREFIX
+          );
+          const completedSteps = actionableSteps.filter(
+            (step) => step.invoke.state === "done" /* DONE */
+          );
+          return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-x-[3px]", children: actionableSteps.map((step) => /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: clx3(
+                  "bg-ui-bg-switch-off shadow-details-switch-background h-3 w-1.5 rounded-full",
+                  {
+                    "bg-ui-fg-muted": step.invoke.state === "done" /* DONE */
+                  }
+                ),
+                "data-completed": step.invoke.state === "done" /* DONE */
+              },
+              step.id
+            )) }),
+            /* @__PURE__ */ jsx5("span", { className: "text-ui-fg-subtle whitespace-nowrap", children: t("workflowExecutions.stepsCompletedLabel", {
+              completed: completedSteps.length,
+              count: actionableSteps.length
+            }) })
+          ] });
+        }
+      }),
+      columnHelper.display({
+        id: "duration",
+        header: t("fields.duration"),
+        cell: ({ row }) => {
+          const createdAt = row.original.created_at;
+          const updatedAt = row.original.updated_at;
+          const state = row.original.state;
+          if (!createdAt) {
+            return /* @__PURE__ */ jsx5(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+          }
+          const start = new Date(createdAt);
+          const end = updatedAt && ["done", "failed", "reverted"].includes(state) ? new Date(updatedAt) : /* @__PURE__ */ new Date();
+          if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return /* @__PURE__ */ jsx5(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+          }
+          const ms = end.getTime() - start.getTime();
+          if (ms < 0) {
+            return /* @__PURE__ */ jsx5(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+          }
+          const seconds = Math.floor(ms / 1e3);
+          const minutes = Math.floor(seconds / 60);
+          const hours = Math.floor(minutes / 60);
+          let label;
+          if (hours > 0) {
+            label = `${hours}h ${minutes % 60}m`;
+          } else if (minutes > 0) {
+            label = `${minutes}m ${seconds % 60}s`;
+          } else if (seconds > 0) {
+            label = `${seconds}s`;
+          } else if (ms > 0) {
+            label = "<1s";
+          } else {
+            label = "0s";
+          }
+          return /* @__PURE__ */ jsx5(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: label });
+        }
+      }),
+      columnHelper.accessor("created_at", {
+        header: t("fields.createdAt"),
+        cell: ({ getValue }) => {
+          const date = getValue();
+          return /* @__PURE__ */ jsx5(DateCell, { date });
+        }
+      }),
+      columnHelper.accessor("updated_at", {
+        header: t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          const date = getValue();
+          return /* @__PURE__ */ jsx5(DateCell, { date });
+        }
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx5(WorkflowExecutionRowActions, { execution: row.original })
+      })
+    ],
+    [t]
+  );
+};
+var ROOT_PREFIX = "_root";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-filters.tsx
+import { useTranslation as useTranslation4 } from "react-i18next";
+var useWorkflowExecutionTableFilters = () => {
+  const { t } = useTranslation4();
+  const stateFilter = {
+    key: "state",
+    label: t("fields.status"),
+    type: "select",
+    multiple: true,
+    options: [
+      {
+        label: t("workflowExecutions.state.done"),
+        value: "done"
+      },
+      {
+        label: t("workflowExecutions.state.failed"),
+        value: "failed"
+      },
+      {
+        label: t("workflowExecutions.state.reverted"),
+        value: "reverted"
+      },
+      {
+        label: t("workflowExecutions.state.invoking"),
+        value: "invoking"
+      },
+      {
+        label: t("workflowExecutions.transaction.state.waitingToCompensate"),
+        value: "waiting_to_compensate"
+      },
+      {
+        label: t("workflowExecutions.state.compensating"),
+        value: "compensating"
+      },
+      {
+        label: t("workflowExecutions.state.notStarted"),
+        value: "not_started"
+      }
+    ]
+  };
+  const dateFilters = [
+    { key: "created_at", label: t("fields.createdAt"), type: "date" },
+    { key: "updated_at", label: t("fields.updatedAt"), type: "date" }
+  ];
+  const workflowIdFilter = {
+    key: "workflow_id",
+    label: t("workflowExecutions.workflowIdLabel"),
+    type: "string"
+  };
+  return [stateFilter, workflowIdFilter, ...dateFilters];
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-query.tsx
+var useWorkflowExecutionTableQuery = ({
+  pageSize = 20,
+  prefix
+}) => {
+  const raw = useQueryParams(
+    ["q", "offset", "order", "state", "workflow_id", "created_at", "updated_at"],
+    prefix
+  );
+  const { offset, order, state, workflow_id, created_at, updated_at, ...rest } = raw;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset) : 0,
+    order: order ?? "-created_at",
+    state: state ? state.split(",") : void 0,
+    workflow_id: workflow_id ? workflow_id.split(",") : void 0,
+    created_at: created_at ? JSON.parse(created_at) : void 0,
+    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+    ...rest
+  };
+  return {
+    searchParams,
+    raw
+  };
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var WorkflowExecutionListTable = () => {
+  const { t } = useTranslation5();
+  const { searchParams, raw } = useWorkflowExecutionTableQuery({
+    pageSize: PAGE_SIZE
+  });
+  const { workflow_executions, count, isLoading, isError, error } = useWorkflowExecutions(
+    {
+      ...searchParams
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useWorkflowExecutionTableColumns();
+  const filters = useWorkflowExecutionTableFilters();
+  const { table } = useDataTable({
+    data: workflow_executions || [],
+    columns,
+    count,
+    pageSize: PAGE_SIZE,
+    enablePagination: true,
+    getRowId: (row) => row.id
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs4(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx6(Heading, { children: t("workflowExecutions.domain") }),
+        /* @__PURE__ */ jsx6(Text2, { className: "text-ui-fg-subtle", size: "small", children: t(`workflowExecutions.subtitle`) })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx6(WorkflowExecutionAutoRefresh, {}),
+        /* @__PURE__ */ jsx6(Button2, { variant: "secondary", size: "small", asChild: true, children: /* @__PURE__ */ jsxs4(Link, { to: "run", children: [
+          /* @__PURE__ */ jsx6(PlayMiniSolid, { className: "mr-1" }),
+          t("workflowExecutions.actions.runWorkflow")
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "border-ui-border-base border-b px-6 py-2", children: /* @__PURE__ */ jsx6(WorkflowExecutionSavedViews, {}) }),
+    /* @__PURE__ */ jsx6(
+      _DataTable,
+      {
+        table,
+        columns,
+        filters,
+        count,
+        isLoading,
+        orderBy: [
+          { key: "created_at", label: t("fields.createdAt") },
+          { key: "updated_at", label: t("fields.updatedAt") }
+        ],
+        pageSize: PAGE_SIZE,
+        navigateTo: (row) => `${row.id}`,
+        search: true,
+        pagination: true,
+        queryObject: raw,
+        noRecords: {
+          message: t("workflowExecutions.list.noRecordsMessage")
+        }
+      }
+    )
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var WorkflowExcecutionList = () => {
+  const { getWidgets } = useExtension();
+  return /* @__PURE__ */ jsx7(
+    SingleColumnPage,
+    {
+      widgets: {
+        after: getWidgets("workflow.list.after"),
+        before: getWidgets("workflow.list.before")
+      },
+      hasOutlet: true,
+      children: /* @__PURE__ */ jsx7(WorkflowExecutionListTable, {})
+    }
+  );
+};
+export {
+  WorkflowExcecutionList as Component
+};