@acmekit/dashboard 2.13.33 → 2.13.35

package/src/routes/workflow-executions/utils.ts

@@ -4,10 +4,12 @@ import {
   STEP_ERROR_STATES,
   STEP_INACTIVE_STATES,
   STEP_IN_PROGRESS_STATES,
-  TRANSACTION_ERROR_STATES,
-  TRANSACTION_IN_PROGRESS_STATES,
 } from "./constants"
-import { TransactionState, TransactionStepState } from "./types"
+import {
+  TransactionState,
+  TransactionStepState,
+  TransactionStepStatus,
+} from "./types"
 
 export const adminExecutionKey = {
   detail: (id: string) => ["workflow_executions", "detail", id],
@@ -20,18 +22,23 @@ export const adminExecutionKey = {
 
 export const getTransactionStateColor = (
   state: TransactionState
-): "green" | "orange" | "red" => {
-  let statusColor: "green" | "red" | "orange" = "green"
-
-  if (TRANSACTION_ERROR_STATES.includes(state)) {
-    statusColor = "red"
-  }
-
-  if (TRANSACTION_IN_PROGRESS_STATES.includes(state)) {
-    statusColor = "orange"
+): "green" | "orange" | "red" | "blue" | "purple" | "grey" => {
+  switch (state) {
+    case TransactionState.DONE:
+      return "green"
+    case TransactionState.FAILED:
+    case TransactionState.REVERTED:
+      return "red"
+    case TransactionState.INVOKING:
+      return "blue"
+    case TransactionState.COMPENSATING:
+    case TransactionState.WAITING_TO_COMPENSATE:
+      return "orange"
+    case TransactionState.NOT_STARTED:
+      return "grey"
+    default:
+      return "grey"
   }
-
-  return statusColor
 }
 
 export const getTransactionState = (
@@ -101,3 +108,152 @@ export const getStepState = (
       return t("workflowExecutions.step.state.timeout")
   }
 }
+
+export const isTerminalState = (state: TransactionState): boolean => {
+  return [
+    TransactionState.DONE,
+    TransactionState.FAILED,
+    TransactionState.REVERTED,
+  ].includes(state)
+}
+
+export const getFailedSteps = (
+  execution: HttpTypes.AdminWorkflowExecution
+): Array<{ stepId: string; error?: any }> => {
+  const steps = execution?.execution?.steps || {}
+  const errors = execution?.context?.errors || []
+  const failed: Array<{ stepId: string; error?: any }> = []
+
+  for (const [stepId, step] of Object.entries(steps)) {
+    if (stepId === "_root") continue
+    const invokeStatus = (step as any)?.invoke?.status
+    if (invokeStatus === TransactionStepStatus.PERMANENT_FAILURE) {
+      const stepError = errors.find((e: any) => e.action === stepId)
+      failed.push({ stepId, error: stepError })
+    }
+  }
+
+  return failed
+}
+
+export const getWaitingSteps = (
+  execution: HttpTypes.AdminWorkflowExecution
+): Array<{ stepId: string }> => {
+  const steps = execution?.execution?.steps || {}
+  const waiting: Array<{ stepId: string }> = []
+
+  for (const [stepId, step] of Object.entries(steps)) {
+    if (stepId === "_root") continue
+    const invokeStatus = (step as any)?.invoke?.status
+    if (invokeStatus === TransactionStepStatus.WAITING) {
+      waiting.push({ stepId })
+    }
+  }
+
+  return waiting
+}
+
+export const formatStepDuration = (
+  startedAt?: number,
+  endedAt?: number
+): string => {
+  if (!startedAt || !endedAt) return ""
+
+  const ms = endedAt - startedAt
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`
+  const minutes = Math.floor(ms / 60_000)
+  const seconds = Math.round((ms % 60_000) / 1000)
+  return `${minutes}m ${seconds}s`
+}
+
+export const computeIdempotencyKey = (
+  workflowId: string,
+  transactionId: string,
+  stepId: string,
+  action: "invoke" | "compensate" = "invoke"
+): string => {
+  return `${workflowId}:${transactionId}:${stepId}:${action}`
+}
+
+export const mergeStepEvent = (
+  current: HttpTypes.AdminWorkflowExecutionResponse | undefined,
+  event: {
+    event_type: string
+    workflow_id: string
+    transaction_id: string
+    step?: Record<string, unknown>
+    response?: Record<string, unknown>
+    result?: Record<string, unknown>
+    errors?: Array<Record<string, unknown>>
+  }
+): HttpTypes.AdminWorkflowExecutionResponse | undefined => {
+  if (!current) return current
+
+  const updated = JSON.parse(
+    JSON.stringify(current)
+  ) as HttpTypes.AdminWorkflowExecutionResponse
+
+  const execution = updated.workflow_execution
+  if (!execution?.execution?.steps) return updated
+
+  const stepId = (event.step as any)?.id
+  if (!stepId) return updated
+
+  const step = execution.execution.steps[stepId] as any
+  if (!step) return updated
+
+  const eventType = event.event_type
+  switch (eventType) {
+    case "onStepBegin":
+      if (step.invoke) step.invoke.state = TransactionStepState.INVOKING
+      break
+    case "onStepSuccess":
+      if (step.invoke) {
+        step.invoke.state = TransactionStepState.DONE
+        step.invoke.status = TransactionStepStatus.OK
+      }
+      break
+    case "onStepFailure":
+      if (step.invoke) {
+        step.invoke.state = TransactionStepState.FAILED
+        step.invoke.status = TransactionStepStatus.PERMANENT_FAILURE
+      }
+      break
+    case "onStepAwaiting":
+      if (step.invoke) {
+        step.invoke.status = TransactionStepStatus.WAITING
+      }
+      break
+    case "onCompensateBegin":
+      if (step.compensate) {
+        step.compensate.state = TransactionStepState.COMPENSATING
+      }
+      break
+    case "onCompensateStepSuccess":
+      if (step.compensate) {
+        step.compensate.state = TransactionStepState.REVERTED
+      }
+      break
+    case "onCompensateStepFailure":
+      if (step.compensate) {
+        step.compensate.state = TransactionStepState.FAILED
+      }
+      break
+    case "onStepSkipped":
+      if (step.invoke) {
+        step.invoke.state = TransactionStepState.SKIPPED
+      }
+      break
+    case "onFinish":
+      execution.state = TransactionState.DONE
+      break
+    case "onTimeout":
+      if (step.invoke) {
+        step.invoke.state = TransactionStepState.TIMEOUT
+      }
+      break
+  }
+
+  return updated
+}

package/src/routes/workflow-executions/workflow-execution-complete-step/workflow-execution-complete-step.tsx

@@ -0,0 +1,270 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, Select, Textarea, toast } from "@acmekit/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import * as zod from "zod"
+
+import { Form } from "../../../components/common/form"
+import { RouteDrawer, useRouteModal } from "../../../components/modals"
+import { KeyboundForm } from "../../../components/utilities/keybound-form"
+import {
+  useSetStepFailure,
+  useSetStepSuccess,
+  useWorkflowExecution,
+} from "../../../hooks/api/workflow-executions"
+import { getWaitingSteps } from "../utils"
+
+const CompleteStepSchema = zod.object({
+  step_id: zod.string().min(1, "Step is required"),
+  outcome: zod.enum(["success", "failure"]),
+  response: zod.string().refine(
+    (val) => {
+      if (!val.trim()) return true
+      try {
+        JSON.parse(val)
+        return true
+      } catch {
+        return false
+      }
+    },
+    { message: "Must be valid JSON" }
+  ),
+})
+
+export const WorkflowExecutionCompleteStep = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const { handleSuccess } = useRouteModal()
+
+  const {
+    workflow_execution,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useWorkflowExecution(id!)
+
+  if (isError) {
+    throw error
+  }
+
+  if (isLoading || !workflow_execution) {
+    return (
+      <RouteDrawer>
+        <RouteDrawer.Header>
+          <Heading>{t("workflowExecutions.actions.completeStep")}</Heading>
+        </RouteDrawer.Header>
+      </RouteDrawer>
+    )
+  }
+
+  const waitingSteps = getWaitingSteps(workflow_execution)
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("workflowExecutions.actions.completeStep")}</Heading>
+      </RouteDrawer.Header>
+      <CompleteStepForm
+        workflowId={workflow_execution.workflow_id}
+        transactionId={workflow_execution.transaction_id}
+        waitingSteps={waitingSteps}
+        onSuccess={handleSuccess}
+      />
+    </RouteDrawer>
+  )
+}
+
+const CompleteStepForm = ({
+  workflowId,
+  transactionId,
+  waitingSteps,
+  onSuccess,
+}: {
+  workflowId: string
+  transactionId: string
+  waitingSteps: { stepId: string }[]
+  onSuccess: () => void
+}) => {
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof CompleteStepSchema>>({
+    defaultValues: {
+      step_id: waitingSteps[0]?.stepId || "",
+      outcome: "success",
+      response: "{}",
+    },
+    resolver: zodResolver(CompleteStepSchema),
+  })
+
+  const outcome = form.watch("outcome")
+
+  const { mutateAsync: setSuccess, isPending: isSettingSuccess } =
+    useSetStepSuccess(workflowId)
+  const { mutateAsync: setFailure, isPending: isSettingFailure } =
+    useSetStepFailure(workflowId)
+
+  const isPending = isSettingSuccess || isSettingFailure
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const response = values.response.trim()
+      ? JSON.parse(values.response)
+      : {}
+
+    if (values.outcome === "success") {
+      await setSuccess(
+        { transaction_id: transactionId, step_id: values.step_id, response },
+        {
+          onSuccess: () => {
+            toast.success(
+              t("workflowExecutions.asyncStep.completedSuccess")
+            )
+            onSuccess()
+          },
+          onError: (err) => {
+            toast.error(err.message)
+          },
+        }
+      )
+    } else {
+      await setFailure(
+        { transaction_id: transactionId, step_id: values.step_id, response },
+        {
+          onSuccess: () => {
+            toast.success(
+              t("workflowExecutions.asyncStep.completedSuccess")
+            )
+            onSuccess()
+          },
+          onError: (err) => {
+            toast.error(err.message)
+          },
+        }
+      )
+    }
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="flex max-w-full flex-1 flex-col gap-y-4 overflow-y-auto">
+          <Form.Field
+            control={form.control}
+            name="step_id"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("workflowExecutions.asyncStep.stepLabel")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      <Select.Trigger>
+                        <Select.Value
+                          placeholder={t(
+                            "workflowExecutions.asyncStep.stepLabel"
+                          )}
+                        />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {waitingSteps.map((step) => (
+                          <Select.Item
+                            key={step.stepId}
+                            value={step.stepId}
+                          >
+                            {step.stepId}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="outcome"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("workflowExecutions.asyncStep.outcomeLabel")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content>
+                        <Select.Item value="success">
+                          {t("workflowExecutions.asyncStep.success")}
+                        </Select.Item>
+                        <Select.Item value="failure">
+                          {t("workflowExecutions.asyncStep.failure")}
+                        </Select.Item>
+                      </Select.Content>
+                    </Select>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="response"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("workflowExecutions.asyncStep.responsePayload")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Textarea
+                      {...field}
+                      className="font-mono text-xs"
+                      rows={10}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button
+              size="small"
+              type="submit"
+              isLoading={isPending}
+              variant={outcome === "failure" ? "danger" : "primary"}
+            >
+              {outcome === "failure"
+                ? t("workflowExecutions.asyncStep.markFailure")
+                : t("workflowExecutions.asyncStep.markSuccess")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}
+
+export const Component = WorkflowExecutionCompleteStep

package/src/routes/workflow-executions/workflow-execution-detail/breadcrumb.tsx

@@ -22,5 +22,11 @@ export const WorkflowExecutionDetailBreadcrumb = (
 
   const cleanId = workflow_execution.id.replace("wf_exec_", "")
 
-  return <span>{cleanId}</span>
+  return (
+    <span>
+      {workflow_execution.workflow_id}
+      <span className="text-ui-fg-muted"> / </span>
+      {cleanId}
+    </span>
+  )
 }

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-action-bar/index.ts

@@ -0,0 +1 @@
+export { WorkflowExecutionActionBar } from "./workflow-execution-action-bar"

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-action-bar/workflow-execution-action-bar.tsx

@@ -0,0 +1,212 @@
+import { ArrowPathMini, EllipsisHorizontal, XMark } from "@acmekit/icons"
+import { HttpTypes } from "@acmekit/types"
+import {
+  Badge,
+  Button,
+  Container,
+  Copy,
+  StatusBadge,
+  toast,
+  usePrompt,
+} from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import {
+  useCancelWorkflowExecution,
+  useRunWorkflow,
+} from "../../../../../hooks/api/workflow-executions"
+import {
+  TRANSACTION_ERROR_STATES,
+  TRANSACTION_IN_PROGRESS_STATES,
+} from "../../../constants"
+import { TransactionState } from "../../../types"
+import {
+  getTransactionState,
+  getTransactionStateColor,
+  getWaitingSteps,
+} from "../../../utils"
+
+type WorkflowExecutionActionBarProps = {
+  execution: HttpTypes.AdminWorkflowExecution
+}
+
+export const WorkflowExecutionActionBar = ({
+  execution,
+}: WorkflowExecutionActionBarProps) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const state = execution.state as TransactionState
+  const stateColor = getTransactionStateColor(state)
+  const translatedState = getTransactionState(t, state)
+
+  const workflowId = execution.workflow_id
+  const transactionId = execution.transaction_id
+
+  const isFailed = TRANSACTION_ERROR_STATES.includes(state)
+  const isRunning = TRANSACTION_IN_PROGRESS_STATES.includes(state)
+  const waitingSteps = getWaitingSteps(execution)
+  const hasWaitingSteps = waitingSteps.length > 0
+
+  const { mutateAsync: runAsync, isPending: isRunning_ } =
+    useRunWorkflow(workflowId)
+  const { mutateAsync: cancelAsync, isPending: isCancelling } =
+    useCancelWorkflowExecution(workflowId, transactionId)
+
+  const handleRetry = async () => {
+    const payload = (execution as any)?.context?.data?.payload
+    const input =
+      payload && typeof payload === "object"
+        ? (payload as Record<string, unknown>)
+        : {}
+    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(undefined, {
+      onSuccess: () => {
+        toast.success(t("workflowExecutions.actions.cancelSuccess"))
+      },
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
+  }
+
+  const handleExportJson = () => {
+    const data = JSON.stringify(execution, null, 2)
+    const blob = new Blob([data], { type: "application/json" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `workflow-${workflowId}-${execution.id}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const handleExportCsv = () => {
+    const steps = execution?.execution?.steps || {}
+    const rows = [["Step", "State", "Duration"]]
+    for (const [stepId, step] of Object.entries(steps)) {
+      if (stepId === "_root") continue
+      const invokeState = (step as any)?.invoke?.state || "unknown"
+      rows.push([stepId, invokeState, ""])
+    }
+    const csv = rows.map((r) => r.join(",")).join("\n")
+    const blob = new Blob([csv], { type: "text/csv" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `workflow-${workflowId}-${execution.id}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const cleanId = execution.id.replace("wf_exec_", "")
+
+  return (
+    <Container className="sticky top-14 z-10 p-0">
+      <div className="flex items-center justify-between px-6 py-3">
+        <div className="flex items-center gap-x-3">
+          <Copy content={workflowId} asChild>
+            <Badge size="2xsmall" className="cursor-pointer">
+              {workflowId}
+            </Badge>
+          </Copy>
+          <StatusBadge color={stateColor}>{translatedState}</StatusBadge>
+          <Copy content={execution.id} asChild>
+            <Badge
+              size="2xsmall"
+              color="grey"
+              className="cursor-pointer text-ui-fg-muted"
+            >
+              {cleanId}
+            </Badge>
+          </Copy>
+        </div>
+        <div className="flex items-center gap-x-2">
+          {isFailed && (
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={handleRetry}
+              isLoading={isRunning_}
+            >
+              <ArrowPathMini className="mr-1" />
+              {t("workflowExecutions.actions.retry")}
+            </Button>
+          )}
+          {isRunning && (
+            <Button
+              variant="danger"
+              size="small"
+              onClick={handleCancel}
+              isLoading={isCancelling}
+            >
+              <XMark className="mr-1" />
+              {t("workflowExecutions.actions.cancel")}
+            </Button>
+          )}
+          {hasWaitingSteps && (
+            <Button variant="secondary" size="small" asChild>
+              <Link to="complete-step">
+                {t("workflowExecutions.actions.completeStep")}
+              </Link>
+            </Button>
+          )}
+          <ActionMenu
+            groups={[
+              {
+                actions: [
+                  ...(isFailed
+                    ? [
+                        {
+                          label: t(
+                            "workflowExecutions.actions.retryWithNewInput"
+                          ),
+                          icon: <ArrowPathMini />,
+                          to: "rerun",
+                        },
+                      ]
+                    : []),
+                  {
+                    label: t("workflowExecutions.actions.exportJson"),
+                    icon: <EllipsisHorizontal />,
+                    onClick: handleExportJson,
+                  },
+                  {
+                    label: t("workflowExecutions.actions.exportCsv"),
+                    icon: <EllipsisHorizontal />,
+                    onClick: handleExportCsv,
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </Container>
+  )
+}

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-error-card/index.ts

@@ -0,0 +1 @@
+export { WorkflowExecutionErrorCard } from "./workflow-execution-error-card"