@medusajs/dashboard 0.0.1

package/src/v2-routes/workflow-executions/types.ts

@@ -0,0 +1,95 @@
+export type WorkflowExecutionStep = {
+  id: string
+  invoke: {
+    state: TransactionStepState
+    status: TransactionStepStatus
+  }
+  definition: {
+    async?: boolean
+    compensateAsync?: boolean
+    noCompensation?: boolean
+    continueOnPermanentFailure?: boolean
+    maxRetries?: number
+    noWait?: boolean
+    retryInterval?: number
+    retryIntervalAwaiting?: number
+    saveResponse?: boolean
+    timeout?: number
+  }
+  compensate: {
+    state: TransactionStepState
+    status: TransactionStepStatus
+  }
+  depth: number
+  startedAt: number
+}
+
+export type StepInvoke = {
+  output: {
+    output: unknown
+    compensateInput: unknown
+  }
+}
+
+export type StepError = {
+  error: Record<string, unknown>
+  action: string
+  handlerType: string
+}
+
+export type WorkflowExecutionContext = {
+  data: {
+    invoke: Record<string, StepInvoke>
+    payload?: unknown
+  }
+  compensate: Record<string, unknown>
+  errors: StepError[]
+}
+
+type WorflowExecutionExecution = {
+  steps: Record<string, WorkflowExecutionStep>
+}
+
+/**
+ * Re-implements WorkflowExecutionDTO as it is currently only exported from `@medusajs/workflows-sdk`.
+ * Also adds type definitions for fields that have vague types, such as `execution` and `context`.
+ */
+export interface WorkflowExecutionDTO {
+  id: string
+  workflow_id: string
+  transaction_id: string
+  execution: WorflowExecutionExecution | null
+  context: WorkflowExecutionContext | null
+  state: any
+  created_at: Date
+  updated_at: Date
+  deleted_at: Date
+}
+
+export enum TransactionStepStatus {
+  IDLE = "idle",
+  OK = "ok",
+  WAITING = "waiting_response",
+  TEMPORARY_FAILURE = "temp_failure",
+  PERMANENT_FAILURE = "permanent_failure",
+}
+export enum TransactionState {
+  NOT_STARTED = "not_started",
+  INVOKING = "invoking",
+  WAITING_TO_COMPENSATE = "waiting_to_compensate",
+  COMPENSATING = "compensating",
+  DONE = "done",
+  REVERTED = "reverted",
+  FAILED = "failed",
+}
+export enum TransactionStepState {
+  NOT_STARTED = "not_started",
+  INVOKING = "invoking",
+  COMPENSATING = "compensating",
+  DONE = "done",
+  REVERTED = "reverted",
+  FAILED = "failed",
+  DORMANT = "dormant",
+  SKIPPED = "skipped",
+  TIMEOUT = "timeout",
+}

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

@@ -0,0 +1,101 @@
+import { AdminGetWorkflowExecutionsParams } from "@medusajs/medusa"
+import { TFunction } from "i18next"
+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"
+
+export const adminExecutionKey = {
+  detail: (id: string) => ["workflow_executions", "detail", id],
+  list: (query?: AdminGetWorkflowExecutionsParams) => [
+    "workflow_executions",
+    "list",
+    { query },
+  ],
+}
+
+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"
+  }
+
+  return statusColor
+}
+
+export const getTransactionState = (
+  t: TFunction<"translation", any>,
+  state: TransactionState
+) => {
+  switch (state) {
+    case TransactionState.DONE:
+      return t("workflowExecutions.state.done")
+    case TransactionState.FAILED:
+      return t("workflowExecutions.state.failed")
+    case TransactionState.REVERTED:
+      return t("workflowExecutions.state.reverted")
+    case TransactionState.INVOKING:
+      return t("workflowExecutions.state.invoking")
+    case TransactionState.WAITING_TO_COMPENSATE:
+      return t("workflowExecutions.transaction.state.waitingToCompensate")
+    case TransactionState.COMPENSATING:
+      return t("workflowExecutions.state.compensating")
+    case TransactionState.NOT_STARTED:
+      return t("workflowExecutions.state.notStarted")
+  }
+}
+
+export const getStepStateColor = (state: TransactionStepState) => {
+  let statusColor: "green" | "red" | "orange" | "grey" = "green"
+
+  if (STEP_ERROR_STATES.includes(state)) {
+    statusColor = "red"
+  }
+
+  if (STEP_INACTIVE_STATES.includes(state)) {
+    statusColor = "grey"
+  }
+
+  if (STEP_IN_PROGRESS_STATES.includes(state)) {
+    statusColor = "orange"
+  }
+
+  return statusColor
+}
+
+export const getStepState = (
+  t: TFunction<"translation", any>,
+  state: TransactionStepState
+) => {
+  switch (state) {
+    case TransactionStepState.DONE:
+      return t("workflowExecutions.state.done")
+    case TransactionStepState.FAILED:
+      return t("workflowExecutions.state.failed")
+    case TransactionStepState.REVERTED:
+      return t("workflowExecutions.state.reverted")
+    case TransactionStepState.INVOKING:
+      return t("workflowExecutions.state.invoking")
+    case TransactionStepState.COMPENSATING:
+      return t("workflowExecutions.state.compensating")
+    case TransactionStepState.NOT_STARTED:
+      return t("workflowExecutions.state.notStarted")
+    case TransactionStepState.SKIPPED:
+      return t("workflowExecutions.step.state.skipped")
+    case TransactionStepState.DORMANT:
+      return t("workflowExecutions.step.state.dormant")
+    case TransactionStepState.TIMEOUT:
+      return t("workflowExecutions.step.state.timeout")
+  }
+}

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/index.ts

@@ -0,0 +1 @@
+export * from "./workflow-execution-general-section"

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/workflow-execution-general-section.tsx

@@ -0,0 +1,118 @@
+import {
+  Badge,
+  Container,
+  Copy,
+  Heading,
+  StatusBadge,
+  Text,
+  clx,
+} from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import {
+  TransactionStepState,
+  WorkflowExecutionDTO,
+  WorkflowExecutionStep,
+} from "../../../types"
+import { getTransactionState, getTransactionStateColor } from "../../../utils"
+
+type WorkflowExecutionGeneralSectionProps = {
+  execution: WorkflowExecutionDTO
+}
+
+export const WorkflowExecutionGeneralSection = ({
+  execution,
+}: WorkflowExecutionGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  const cleanId = execution.id.replace("wf_exec_", "")
+  const translatedState = getTransactionState(t, execution.state)
+  const stateColor = getTransactionStateColor(execution.state)
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex items-center gap-x-0.5">
+          <Heading>{cleanId}</Heading>
+          <Copy content={cleanId} className="text-ui-fg-muted" />
+        </div>
+        <StatusBadge color={stateColor}>{translatedState}</StatusBadge>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("workflowExecutions.workflowIdLabel")}
+        </Text>
+        <Badge size="2xsmall" className="w-fit">
+          {execution.workflow_id}
+        </Badge>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("workflowExecutions.transactionIdLabel")}
+        </Text>
+        <Badge size="2xsmall" className="w-fit">
+          {execution.transaction_id}
+        </Badge>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("workflowExecutions.progressLabel")}
+        </Text>
+        <Progress steps={execution.execution?.steps} />
+      </div>
+    </Container>
+  )
+}
+
+const ROOT_PREFIX = "_root"
+
+const Progress = ({
+  steps,
+}: {
+  steps?: Record<string, WorkflowExecutionStep> | null
+}) => {
+  const { t } = useTranslation()
+
+  if (!steps) {
+    return (
+      <Text size="small" leading="compact" className="text-ui-fg-subtle">
+        {t("workflowExecutions.stepsCompletedLabel", {
+          completed: 0,
+          total: 0,
+        })}
+      </Text>
+    )
+  }
+
+  const actionableSteps = Object.values(steps).filter(
+    (step) => step.id !== ROOT_PREFIX
+  )
+
+  const completedSteps = actionableSteps.filter(
+    (step) => step.invoke.state === TransactionStepState.DONE
+  )
+
+  return (
+    <div className="flex w-fit items-center gap-x-2">
+      <div className="flex items-center gap-x-[3px]">
+        {actionableSteps.map((step) => (
+          <div
+            key={step.id}
+            className={clx(
+              "bg-ui-bg-switch-off shadow-details-switch-background h-3 w-1.5 rounded-full",
+              {
+                "bg-ui-fg-muted":
+                  step.invoke.state === TransactionStepState.DONE,
+              }
+            )}
+          />
+        ))}
+      </div>
+      <Text size="small" leading="compact" className="text-ui-fg-subtle">
+        {t("workflowExecutions.stepsCompletedLabel", {
+          completed: completedSteps.length,
+          count: actionableSteps.length,
+        })}
+      </Text>
+    </div>
+  )
+}

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/index.ts

@@ -0,0 +1 @@
+export * from "./workflow-execution-history-section"

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx

@@ -0,0 +1,324 @@
+import { Spinner, TriangleDownMini } from "@medusajs/icons"
+import {
+  CodeBlock,
+  Container,
+  Heading,
+  IconButton,
+  Text,
+  clx,
+} from "@medusajs/ui"
+import * as Collapsible from "@radix-ui/react-collapsible"
+import { format } from "date-fns"
+import { useEffect, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useLocation } from "react-router-dom"
+import {
+  STEP_ERROR_STATES,
+  STEP_INACTIVE_STATES,
+  STEP_IN_PROGRESS_STATES,
+  STEP_OK_STATES,
+} from "../../../constants"
+import {
+  StepError,
+  StepInvoke,
+  TransactionStepState,
+  TransactionStepStatus,
+  WorkflowExecutionDTO,
+  WorkflowExecutionStep,
+} from "../../../types"
+
+type WorkflowExecutionHistorySectionProps = {
+  execution: WorkflowExecutionDTO
+}
+
+export const WorkflowExecutionHistorySection = ({
+  execution,
+}: WorkflowExecutionHistorySectionProps) => {
+  const { t } = useTranslation()
+
+  const map = Object.values(execution.execution?.steps || {})
+  const steps = map.filter((step) => step.id !== "_root")
+
+  // check if any of the steps have a .invoke.state of "permanent_failure" and if that is the case then return its id
+  const unreachableStepId = steps.find(
+    (step) => step.invoke.status === TransactionStepStatus.PERMANENT_FAILURE
+  )?.id
+
+  // return an array of step ids of all steps that come after the unreachable step if there is one
+  const unreachableSteps = unreachableStepId
+    ? steps
+        .filter(
+          (step) =>
+            step.id !== unreachableStepId && step.id.includes(unreachableStepId)
+        )
+        .map((step) => step.id)
+    : []
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">
+          {t("workflowExecutions.history.sectionTitle")}
+        </Heading>
+      </div>
+      <div className="flex flex-col gap-y-0.5 px-6 py-4">
+        {steps.map((step, index) => {
+          const stepId = step.id.split(".").pop()
+
+          if (!stepId) {
+            return null
+          }
+
+          const context = execution.context?.data.invoke[stepId]
+          const error = execution.context?.errors.find(
+            (e) => e.action === stepId
+          )
+
+          return (
+            <Event
+              key={step.id}
+              step={step}
+              stepInvokeContext={context}
+              stepError={error}
+              isLast={index === steps.length - 1}
+              isUnreachable={unreachableSteps.includes(step.id)}
+            />
+          )
+        })}
+      </div>
+    </Container>
+  )
+}
+
+const Event = ({
+  step,
+  stepInvokeContext,
+  stepError,
+  isLast,
+  isUnreachable,
+}: {
+  step: WorkflowExecutionStep
+  stepInvokeContext: StepInvoke | undefined
+  stepError?: StepError | undefined
+  isLast: boolean
+  isUnreachable?: boolean
+}) => {
+  const [open, setOpen] = useState(false)
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { hash } = useLocation()
+
+  const { t } = useTranslation()
+
+  const stepId = step.id.split(".").pop()!
+
+  useEffect(() => {
+    if (hash === `#${stepId}`) {
+      setOpen(true)
+    }
+  }, [hash, stepId])
+
+  const identifier = step.id.split(".").pop()
+
+  stepInvokeContext
+
+  return (
+    <div
+      className="grid grid-cols-[20px_1fr] items-start gap-x-2 px-2"
+      id={stepId}
+    >
+      <div className="grid h-full grid-rows-[20px_1fr] items-center justify-center gap-y-0.5">
+        <div className="flex size-5 items-center justify-center">
+          <div className="bg-ui-bg-base shadow-borders-base flex size-2.5 items-center justify-center rounded-full">
+            <div
+              className={clx("size-1.5 rounded-full", {
+                "bg-ui-tag-green-icon": STEP_OK_STATES.includes(
+                  step.invoke.state
+                ),
+                "bg-ui-tag-orange-icon": STEP_IN_PROGRESS_STATES.includes(
+                  step.invoke.state
+                ),
+                "bg-ui-tag-red-icon": STEP_ERROR_STATES.includes(
+                  step.invoke.state
+                ),
+                "bg-ui-tag-neutral-icon": STEP_INACTIVE_STATES.includes(
+                  step.invoke.state
+                ),
+              })}
+            />
+          </div>
+        </div>
+        <div className="flex h-full flex-col items-center">
+          <div
+            aria-hidden
+            role="presentation"
+            className={clx({
+              "bg-ui-border-base h-full min-h-[14px] w-px": !isLast,
+            })}
+          />
+        </div>
+      </div>
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <Collapsible.Trigger asChild>
+          <div className="group flex cursor-pointer items-start justify-between outline-none">
+            <Text size="small" leading="compact" weight="plus">
+              {identifier}
+            </Text>
+            <div className="flex items-center gap-x-2">
+              <StepState
+                state={step.invoke.state}
+                startedAt={step.startedAt}
+                isUnreachable={isUnreachable}
+              />
+              <IconButton size="2xsmall" variant="transparent">
+                <TriangleDownMini className="text-ui-fg-muted transition-transform group-data-[state=open]:rotate-180" />
+              </IconButton>
+            </div>
+          </div>
+        </Collapsible.Trigger>
+        <Collapsible.Content ref={ref}>
+          <div className="flex flex-col gap-y-2 pb-4 pt-2">
+            <div className="text-ui-fg-subtle flex flex-col gap-y-2">
+              <Text size="small" leading="compact">
+                {t("workflowExecutions.history.definitionLabel")}
+              </Text>
+              <CodeBlock
+                snippets={[
+                  {
+                    code: JSON.stringify(step.definition, null, 2),
+                    label: t("workflowExecutions.history.definitionLabel"),
+                    language: "json",
+                    hideLineNumbers: true,
+                  },
+                ]}
+              >
+                <CodeBlock.Body />
+              </CodeBlock>
+            </div>
+            {stepInvokeContext && (
+              <div className="text-ui-fg-subtle flex flex-col gap-y-2">
+                <Text size="small" leading="compact">
+                  {t("workflowExecutions.history.outputLabel")}
+                </Text>
+                <CodeBlock
+                  snippets={[
+                    {
+                      code: JSON.stringify(
+                        stepInvokeContext.output.output,
+                        null,
+                        2
+                      ),
+                      label: t("workflowExecutions.history.outputLabel"),
+                      language: "json",
+                      hideLineNumbers: true,
+                    },
+                  ]}
+                >
+                  <CodeBlock.Body />
+                </CodeBlock>
+              </div>
+            )}
+            {!!stepInvokeContext?.output.compensateInput &&
+              step.compensate.state === TransactionStepState.REVERTED && (
+                <div className="text-ui-fg-subtle flex flex-col gap-y-2">
+                  <Text size="small" leading="compact">
+                    {t("workflowExecutions.history.compensateInputLabel")}
+                  </Text>
+                  <CodeBlock
+                    snippets={[
+                      {
+                        code: JSON.stringify(
+                          stepInvokeContext.output.compensateInput,
+                          null,
+                          2
+                        ),
+                        label: t(
+                          "workflowExecutions.history.compensateInputLabel"
+                        ),
+                        language: "json",
+                        hideLineNumbers: true,
+                      },
+                    ]}
+                  >
+                    <CodeBlock.Body />
+                  </CodeBlock>
+                </div>
+              )}
+            {stepError && (
+              <div className="text-ui-fg-subtle flex flex-col gap-y-2">
+                <Text size="small" leading="compact">
+                  {t("workflowExecutions.history.errorLabel")}
+                </Text>
+                <CodeBlock
+                  snippets={[
+                    {
+                      code: JSON.stringify(
+                        {
+                          error: stepError.error,
+                          handlerType: stepError.handlerType,
+                        },
+                        null,
+                        2
+                      ),
+                      label: t("workflowExecutions.history.errorLabel"),
+                      language: "json",
+                      hideLineNumbers: true,
+                    },
+                  ]}
+                >
+                  <CodeBlock.Body />
+                </CodeBlock>
+              </div>
+            )}
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  )
+}
+
+const StepState = ({
+  state,
+  startedAt,
+  isUnreachable,
+}: {
+  state: TransactionStepState
+  startedAt?: number | null
+  isUnreachable?: boolean
+}) => {
+  const { t } = useTranslation()
+
+  const isFailed = state === TransactionStepState.FAILED
+  const isRunning = state === TransactionStepState.INVOKING
+
+  if (isUnreachable) {
+    return null
+  }
+
+  if (isRunning) {
+    return (
+      <div className="flex items-center gap-x-1">
+        <Text size="small" leading="compact" className="text-ui-fg-subtle">
+          {t("workflowExecutions.history.runningState")}
+        </Text>
+        <Spinner className="text-ui-fg-interactive animate-spin" />
+      </div>
+    )
+  }
+
+  if (isFailed) {
+    return (
+      <Text size="small" leading="compact" className="text-ui-fg-subtle">
+        {t("workflowExecutions.history.failedState")}
+      </Text>
+    )
+  }
+
+  if (startedAt) {
+    return (
+      <Text size="small" leading="compact" className="text-ui-fg-muted">
+        {format(startedAt, "dd MMM yyyy HH:mm:ss")}
+      </Text>
+    )
+  }
+}

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/index.ts

@@ -0,0 +1 @@
+export * from "./workflow-execution-payload-section"

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx

@@ -0,0 +1,24 @@
+import { JsonViewSection } from "../../../../../components/common/json-view-section"
+import { WorkflowExecutionDTO } from "../../../types"
+
+type WorkflowExecutionPayloadSectionProps = {
+  execution: WorkflowExecutionDTO
+}
+
+export const WorkflowExecutionPayloadSection = ({
+  execution,
+}: WorkflowExecutionPayloadSectionProps) => {
+  let payload = execution.context?.data?.payload
+
+  if (!payload) {
+    return null
+  }
+
+  // payloads may be a primitive, so we need to wrap them in an object
+  // to ensure the JsonViewSection component can render them.
+  if (typeof payload !== "object") {
+    payload = { input: payload }
+  }
+
+  return <JsonViewSection title="Payload" data={payload as object} />
+}

package/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/index.ts

@@ -0,0 +1 @@
+export * from "./workflow-execution-timeline-section"