@acmekit/dashboard 2.13.34 → 2.13.35

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-filters.tsx

@@ -52,6 +52,12 @@ export const useWorkflowExecutionTableFilters = (): Filter[] => {
     { key: "updated_at", label: t("fields.updatedAt"), type: "date" },
   ]
 
-  return [stateFilter, ...dateFilters]
+  const workflowIdFilter: Filter = {
+    key: "workflow_id",
+    label: t("workflowExecutions.workflowIdLabel"),
+    type: "string",
+  }
+
+  return [stateFilter, workflowIdFilter, ...dateFilters]
 }
 

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-query.tsx

@@ -9,17 +9,19 @@ export const useWorkflowExecutionTableQuery = ({
   prefix?: string
 }) => {
   const raw = useQueryParams(
-    ["q", "offset", "order", "state", "created_at", "updated_at"],
+    ["q", "offset", "order", "state", "workflow_id", "created_at", "updated_at"],
     prefix
   )
 
-  const { offset, order, state, created_at, updated_at, ...rest } = raw
+  const { offset, order, state, workflow_id, created_at, updated_at, ...rest } =
+    raw
 
   const searchParams: HttpTypes.AdminGetWorkflowExecutionsParams = {
     limit: pageSize,
     offset: offset ? parseInt(offset) : 0,
     order: order ?? "-created_at",
     state: state ? state.split(",") : undefined,
+    workflow_id: workflow_id ? workflow_id.split(",") : undefined,
     created_at: created_at ? JSON.parse(created_at) : undefined,
     updated_at: updated_at ? JSON.parse(updated_at) : undefined,
     ...rest,

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-auto-refresh.tsx

@@ -0,0 +1,73 @@
+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 { workflowExecutionsQueryKeys } from "../../../../../hooks/api/workflow-executions"
+
+const INTERVALS = [
+  { label: "Off", value: 0 },
+  { label: "5s", value: 5000 },
+  { label: "10s", value: 10000 },
+  { label: "30s", value: 30000 },
+]
+
+export const WorkflowExecutionAutoRefresh = () => {
+  const queryClient = useQueryClient()
+  const [interval, setInterval_] = useState(0)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(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 (
+    <div className="flex items-center gap-x-1">
+      <IconButton
+        size="small"
+        variant="transparent"
+        onClick={refresh}
+      >
+        <ArrowPathMini />
+      </IconButton>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <button className="txt-compact-small text-ui-fg-muted hover:text-ui-fg-subtle rounded px-1.5 py-0.5 transition-colors">
+            {activeLabel}
+          </button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          {INTERVALS.map((opt) => (
+            <DropdownMenu.Item
+              key={opt.value}
+              onClick={() => setInterval_(opt.value)}
+              className={interval === opt.value ? "font-medium" : ""}
+            >
+              {opt.label}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx

@@ -1,9 +1,13 @@
-import { Container, Heading, Text } from "@acmekit/ui"
+import { PlayMiniSolid } from "@acmekit/icons"
+import { Button, Container, Heading, Text } from "@acmekit/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
 import { _DataTable } from "../../../../../components/table/data-table"
 import { useWorkflowExecutions } from "../../../../../hooks/api/workflow-executions"
 import { useDataTable } from "../../../../../hooks/use-data-table"
+import { WorkflowExecutionAutoRefresh } from "./workflow-execution-auto-refresh"
+import { WorkflowExecutionSavedViews } from "./workflow-execution-saved-views"
 import { useWorkflowExecutionTableColumns } from "./use-workflow-execution-table-columns"
 import { useWorkflowExecutionTableFilters } from "./use-workflow-execution-table-filters"
 import { useWorkflowExecutionTableQuery } from "./use-workflow-execution-table-query"
@@ -52,6 +56,18 @@ export const WorkflowExecutionListTable = () => {
             {t(`workflowExecutions.subtitle`)}
           </Text>
         </div>
+        <div className="flex items-center gap-x-2">
+          <WorkflowExecutionAutoRefresh />
+          <Button variant="secondary" size="small" asChild>
+            <Link to="run">
+              <PlayMiniSolid className="mr-1" />
+              {t("workflowExecutions.actions.runWorkflow")}
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <div className="border-ui-border-base border-b px-6 py-2">
+        <WorkflowExecutionSavedViews />
       </div>
       <_DataTable
         table={table}

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-row-actions.tsx

@@ -0,0 +1,116 @@
+import { ArrowPathMini, Eye, XMark } from "@acmekit/icons"
+import { HttpTypes } from "@acmekit/types"
+import { toast, usePrompt } from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import {
+  Action,
+  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"
+
+type WorkflowExecutionRowActionsProps = {
+  execution: HttpTypes.AdminWorkflowExecutionResponse["workflow_execution"]
+}
+
+export const WorkflowExecutionRowActions = ({
+  execution,
+}: WorkflowExecutionRowActionsProps) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const state = execution.state as TransactionState
+  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 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 secondaryActions: Action[] = []
+  if (isFailed) {
+    secondaryActions.push({
+      icon: <ArrowPathMini />,
+      label: t("workflowExecutions.actions.retry"),
+      onClick: handleRetry,
+    })
+  }
+  if (isRunning) {
+    secondaryActions.push({
+      icon: <XMark />,
+      label: t("workflowExecutions.actions.cancel"),
+      onClick: handleCancel,
+    })
+  }
+
+  const groups = [
+    {
+      actions: [
+        {
+          icon: <Eye />,
+          label: t("workflowExecutions.actions.viewDetails"),
+          to: `${execution.id}`,
+        } as Action,
+      ],
+    },
+    ...(secondaryActions.length > 0
+      ? [{ actions: secondaryActions }]
+      : []),
+  ]
+
+  return <ActionMenu groups={groups} />
+}

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-saved-views.tsx

@@ -0,0 +1,84 @@
+import { Button, clx } from "@acmekit/ui"
+import { useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type SavedView = {
+  label: string
+  params: Record<string, string>
+}
+
+export const WorkflowExecutionSavedViews = () => {
+  const { t } = useTranslation()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const views: SavedView[] = useMemo(
+    () => [
+      {
+        label: t("workflowExecutions.filters.allExecutions"),
+        params: {} as Record<string, string>,
+      },
+      {
+        label: t("workflowExecutions.filters.running"),
+        params: { state: "invoking" } as Record<string, string>,
+      },
+      {
+        label: t("workflowExecutions.filters.failedToday"),
+        params: {
+          state: "failed",
+          created_at: JSON.stringify({
+            $gte: new Date(
+              new Date().setHours(0, 0, 0, 0)
+            ).toISOString(),
+          }),
+        } as Record<string, string>,
+      },
+    ],
+    [t]
+  )
+
+  const isActive = useCallback(
+    (view: SavedView) => {
+      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 = useCallback(
+    (view: SavedView) => {
+      const newParams = new URLSearchParams()
+      for (const [key, value] of Object.entries(view.params)) {
+        newParams.set(key, value)
+      }
+      setSearchParams(newParams)
+    },
+    [setSearchParams]
+  )
+
+  return (
+    <div className="flex items-center gap-x-1">
+      {views.map((view) => (
+        <Button
+          key={view.label}
+          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"
+          )}
+        >
+          {view.label}
+        </Button>
+      ))}
+    </div>
+  )
+}

package/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx

@@ -12,7 +12,7 @@ export const WorkflowExcecutionList = () => {
         after: getWidgets("workflow.list.after"),
         before: getWidgets("workflow.list.before"),
       }}
-      hasOutlet={false}
+      hasOutlet
     >
       <WorkflowExecutionListTable />
     </SingleColumnPage>

package/src/routes/workflow-executions/workflow-execution-rerun/workflow-execution-rerun.tsx

@@ -0,0 +1,159 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, 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 {
+  useRunWorkflow,
+  useWorkflowExecution,
+} from "../../../hooks/api/workflow-executions"
+
+const RerunSchema = zod.object({
+  input: zod.string().refine(
+    (val) => {
+      try {
+        JSON.parse(val)
+        return true
+      } catch {
+        return false
+      }
+    },
+    { message: "Must be valid JSON" }
+  ),
+})
+
+export const WorkflowExecutionRerun = () => {
+  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.rerun.title")}</Heading>
+        </RouteDrawer.Header>
+      </RouteDrawer>
+    )
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("workflowExecutions.rerun.title")}</Heading>
+      </RouteDrawer.Header>
+      <RerunForm
+        workflowId={workflow_execution.workflow_id}
+        defaultInput={
+          (workflow_execution as any)?.context?.data?.payload || {}
+        }
+        onSuccess={handleSuccess}
+      />
+    </RouteDrawer>
+  )
+}
+
+const RerunForm = ({
+  workflowId,
+  defaultInput,
+  onSuccess,
+}: {
+  workflowId: string
+  defaultInput: unknown
+  onSuccess: () => void
+}) => {
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof RerunSchema>>({
+    defaultValues: {
+      input: JSON.stringify(defaultInput, null, 2),
+    },
+    resolver: zodResolver(RerunSchema),
+  })
+
+  const { mutateAsync, isPending } = useRunWorkflow(workflowId)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const parsed = JSON.parse(values.input)
+    await mutateAsync(
+      { input: parsed },
+      {
+        onSuccess: () => {
+          toast.success(t("workflowExecutions.rerun.success"))
+          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">
+          <div className="bg-ui-bg-field border-ui-border-base rounded-lg border px-3 py-2">
+            <span className="txt-compact-small text-ui-fg-muted">
+              {workflowId}
+            </span>
+          </div>
+          <Form.Field
+            control={form.control}
+            name="input"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("workflowExecutions.rerun.inputLabel")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Textarea
+                      {...field}
+                      className="font-mono text-xs"
+                      rows={16}
+                    />
+                  </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}>
+              {t("workflowExecutions.rerun.submit")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}
+
+export const Component = WorkflowExecutionRerun

package/src/routes/workflow-executions/workflow-execution-run/workflow-execution-run.tsx

@@ -0,0 +1,139 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, Input, Textarea, toast } from "@acmekit/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+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 { useRunWorkflow } from "../../../hooks/api/workflow-executions"
+
+const RunWorkflowSchema = zod.object({
+  workflow_id: zod.string().min(1, "Workflow ID is required"),
+  input: 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 WorkflowExecutionRun = () => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("workflowExecutions.actions.runWorkflow")}</Heading>
+      </RouteDrawer.Header>
+      <RunWorkflowForm onSuccess={handleSuccess} />
+    </RouteDrawer>
+  )
+}
+
+const RunWorkflowForm = ({ onSuccess }: { onSuccess: () => void }) => {
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof RunWorkflowSchema>>({
+    defaultValues: {
+      workflow_id: "",
+      input: "{}",
+    },
+    resolver: zodResolver(RunWorkflowSchema),
+  })
+
+  const workflowId = form.watch("workflow_id")
+
+  const { mutateAsync, isPending } = useRunWorkflow(workflowId || "_placeholder")
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const parsed = values.input.trim() ? JSON.parse(values.input) : {}
+    await mutateAsync(
+      { input: parsed },
+      {
+        onSuccess: () => {
+          toast.success(t("workflowExecutions.rerun.success"))
+          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="workflow_id"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("workflowExecutions.workflowIdLabel")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input
+                      {...field}
+                      placeholder="my-workflow-id"
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="input"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("workflowExecutions.rerun.inputLabel")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Textarea
+                      {...field}
+                      className="font-mono text-xs"
+                      rows={12}
+                    />
+                  </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}>
+              {t("workflowExecutions.rerun.submit")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}
+
+export const Component = WorkflowExecutionRun