feat(ui): new WorkflowRuns using antd
This commit is contained in:
Fu Diwei
@@ -1,120 +0,0 @@
|
||||
import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from "@tanstack/react-table";
|
||||
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import Show from "../Show";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface DataTableProps<TData extends { id: string }, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[];
|
||||
data: TData[];
|
||||
pageCount: number;
|
||||
onPageChange?: (pageIndex: number, pageSize?: number) => Promise<void>;
|
||||
onRowClick?: (id: string) => void;
|
||||
withPagination?: boolean;
|
||||
fallback?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DataTable<TData extends { id: string }, TValue>({
|
||||
columns,
|
||||
data,
|
||||
onPageChange,
|
||||
pageCount,
|
||||
onRowClick,
|
||||
withPagination,
|
||||
fallback,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const pagination = {
|
||||
pageIndex,
|
||||
pageSize,
|
||||
};
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
pageCount: pageCount,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
state: {
|
||||
pagination,
|
||||
},
|
||||
onPaginationChange: setPagination,
|
||||
manualPagination: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
onPageChange?.(pageIndex, pageSize);
|
||||
}, [pageIndex]);
|
||||
|
||||
const handleRowClick = (id: string) => {
|
||||
onRowClick?.(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="rounded-md">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id} className="dark:border-muted-foreground">
|
||||
{headerGroup.headers.map((header) => {
|
||||
return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody className="dark:text-stone-200">
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="dark:border-muted-foreground"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRowClick(row.original.id);
|
||||
}}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
{fallback ? fallback : t("common.text.nodata")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<Show when={!!withPagination}>
|
||||
<div className="flex items-center justify-end mt-5">
|
||||
<div className="flex items-center space-x-2 dark:text-stone-200">
|
||||
{table.getCanPreviousPage() && (
|
||||
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
|
||||
{t("common.pagination.prev")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{table.getCanNextPage && (
|
||||
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
|
||||
{t("common.pagination.next")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import { WorkflowRunLog } from "@/domain/workflow";
|
||||
import { list as logs } from "@/repository/workflowRunLog";
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import { useState } from "react";
|
||||
import { DataTable } from "./DataTable";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Check, X } from "lucide-react";
|
||||
import WorkflowLogDetail from "./WorkflowLogDetail";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const WorkflowLog = () => {
|
||||
const [data, setData] = useState<WorkflowRunLog[]>([]);
|
||||
const [pageCount, setPageCount] = useState<number>(0);
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedLog, setSelectedLog] = useState<WorkflowRunLog>();
|
||||
|
||||
const fetchData = async (page: number, pageSize?: number) => {
|
||||
const resp = await logs({ page: page, perPage: pageSize, id: id ?? "" });
|
||||
setData(resp.items);
|
||||
setPageCount(resp.totalPages);
|
||||
};
|
||||
|
||||
const columns: ColumnDef<WorkflowRunLog>[] = [
|
||||
{
|
||||
accessorKey: "succeed",
|
||||
header: t("workflow.history.props.state"),
|
||||
cell: ({ row }) => {
|
||||
const succeed: boolean = row.getValue("succeed");
|
||||
if (succeed) {
|
||||
return (
|
||||
<div className="flex items-center space-x-2 min-w-[150px]">
|
||||
<div className="text-white bg-green-500 w-8 h-8 rounded-full flex items-center justify-center">
|
||||
<Check size={18} />
|
||||
</div>
|
||||
<div className="text-sone-700">{t("workflow.history.props.state.success")}</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="flex items-center space-x-2 min-w-[150px]">
|
||||
<div className="text-white bg-red-500 w-8 h-8 rounded-full flex items-center justify-center">
|
||||
<X size={18} />
|
||||
</div>
|
||||
<div className="text-stone-700">{t("workflow.history.props.state.failed")}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "error",
|
||||
header: t("workflow.history.props.reason"),
|
||||
cell: ({ row }) => {
|
||||
let error: string = row.getValue("error");
|
||||
if (!error) {
|
||||
error = "";
|
||||
}
|
||||
return <div className="max-w-[300px] truncate text-red-500">{error}</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "created",
|
||||
header: t("workflow.history.props.time"),
|
||||
cell: ({ row }) => {
|
||||
const date: string = row.getValue("created");
|
||||
return new Date(date).toLocaleString();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleRowClick = (id: string) => {
|
||||
setOpen(true);
|
||||
const log = data.find((item) => item.id === id);
|
||||
setSelectedLog(log);
|
||||
};
|
||||
return (
|
||||
<div className="w-full md:w-[960px]">
|
||||
<div>
|
||||
<div className="text-muted-foreground mb-5">{t("workflow.history.page.title")}</div>
|
||||
<DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} onRowClick={handleRowClick} />
|
||||
</div>
|
||||
|
||||
<WorkflowLogDetail open={open} onOpenChange={setOpen} log={selectedLog} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowLog;
|
||||
@@ -1,85 +0,0 @@
|
||||
import { WorkflowOutput, WorkflowRunLog, WorkflowRunLogItem } from "@/domain/workflow";
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
|
||||
import { Check, X } from "lucide-react";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type WorkflowLogDetailProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
log?: WorkflowRunLog;
|
||||
};
|
||||
const WorkflowLogDetail = ({ open, onOpenChange, log }: WorkflowLogDetailProps) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="sm:max-w-5xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{t("workflow.history.page.title")}</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex flex-col">
|
||||
{log?.succeed ? (
|
||||
<div className="mt-5 flex justify-between bg-green-100 p-5 rounded-md items-center">
|
||||
<div className="flex space-x-2 items-center min-w-[150px]">
|
||||
<div className="w-8 h-8 bg-green-500 flex items-center justify-center rounded-full text-white">
|
||||
<Check size={18} />
|
||||
</div>
|
||||
<div className="text-stone-700">{t("workflow.history.props.state.success")}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground">{new Date(log.created).toLocaleString()}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-5 flex justify-between bg-red-100 p-5 rounded-md items-center">
|
||||
<div className="flex space-x-2 items-center min-w-[150px]">
|
||||
<div className="w-8 h-8 bg-red-500 flex items-center justify-center rounded-full text-white">
|
||||
<X size={18} />
|
||||
</div>
|
||||
<div className="text-stone-700">{t("workflow.history.props.state.failed")}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-red-500 max-w-[400px] truncate">{log?.error}</div>
|
||||
|
||||
<div className="text-muted-foreground">{log?.created && new Date(log.created).toLocaleString()}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ScrollArea className="h-[80vh] mt-5 bg-black p-5 rounded-md">
|
||||
<div className=" text-stone-200 flex flex-col space-y-3">
|
||||
{log?.log.map((item: WorkflowRunLogItem, i) => {
|
||||
return (
|
||||
<div key={i} className="flex flex-col space-y-2">
|
||||
<div className="">{item.nodeName}</div>
|
||||
<div className="flex flex-col space-y-1">
|
||||
{item.outputs.map((output: WorkflowOutput) => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex text-sm space-x-2">
|
||||
<div>[{output.time}]</div>
|
||||
{output.error ? (
|
||||
<>
|
||||
<div className="text-red-500 max-w-[70%]">{output.error}</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>{output.content}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowLogDetail;
|
||||
80
ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx
Normal file
80
ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { cloneElement, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useControllableValue } from "ahooks";
|
||||
import { Alert, Drawer } from "antd";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { type WorkflowRunModel } from "@/domain/workflowRun";
|
||||
|
||||
export type WorkflowRunDetailDrawerProps = {
|
||||
data?: WorkflowRunModel;
|
||||
loading?: boolean;
|
||||
trigger?: React.ReactElement;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
};
|
||||
|
||||
const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowRunDetailDrawerProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [open, setOpen] = useControllableValue<boolean>(props, {
|
||||
valuePropName: "open",
|
||||
defaultValuePropName: "defaultOpen",
|
||||
trigger: "onOpenChange",
|
||||
});
|
||||
|
||||
const triggerEl = useMemo(() => {
|
||||
if (!trigger) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return cloneElement(trigger, {
|
||||
...trigger.props,
|
||||
onClick: () => {
|
||||
setOpen(true);
|
||||
trigger.props?.onClick?.();
|
||||
},
|
||||
});
|
||||
}, [trigger, setOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{triggerEl}
|
||||
|
||||
<Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
|
||||
<Show when={!!data}>
|
||||
<Show when={data!.succeed}>
|
||||
<Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} />
|
||||
</Show>
|
||||
|
||||
<Show when={!data!.succeed}>
|
||||
<Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} />
|
||||
</Show>
|
||||
|
||||
<div className="mt-4 p-4 bg-black text-stone-200 rounded-md">
|
||||
<div className="flex flex-col space-y-3">
|
||||
{data!.log.map((item, i) => {
|
||||
return (
|
||||
<div key={i} className="flex flex-col space-y-2">
|
||||
<div>{item.nodeName}</div>
|
||||
<div className="flex flex-col space-y-1">
|
||||
{item.outputs.map((output, j) => {
|
||||
return (
|
||||
<div key={j} className="flex text-sm space-x-2">
|
||||
<div>[{output.time}]</div>
|
||||
{output.error ? <div className="text-red-500">{output.error}</div> : <div>{output.content}</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowRunDetailDrawer;
|
||||
157
ui/src/components/workflow/run/WorkflowRuns.tsx
Normal file
157
ui/src/components/workflow/run/WorkflowRuns.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useRequest } from "ahooks";
|
||||
import { Button, Empty, notification, Space, Table, theme, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon, Eye as EyeIcon } from "lucide-react";
|
||||
import dayjs from "dayjs";
|
||||
import { ClientResponseError } from "pocketbase";
|
||||
|
||||
import WorkflowRunDetailDrawer from "./WorkflowRunDetailDrawer";
|
||||
import { type WorkflowRunModel } from "@/domain/workflowRun";
|
||||
import { list as listWorkflowRuns } from "@/repository/workflowRun";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
|
||||
export type WorkflowRunsProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { token: themeToken } = theme.useToken();
|
||||
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
const tableColumns: TableProps<WorkflowRunModel>["columns"] = [
|
||||
{
|
||||
key: "$index",
|
||||
align: "center",
|
||||
fixed: "left",
|
||||
width: 50,
|
||||
render: (_, __, index) => (page - 1) * pageSize + index + 1,
|
||||
},
|
||||
{
|
||||
key: "id",
|
||||
title: t("workflow_run.props.id"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => record.id,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
title: t("workflow_run.props.status"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
if (record.succeed) {
|
||||
return (
|
||||
<Space>
|
||||
<CircleCheckIcon color={themeToken.colorSuccess} size={16} />
|
||||
<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>
|
||||
</Space>
|
||||
);
|
||||
} else {
|
||||
<Tooltip title={record.error}>
|
||||
<Space>
|
||||
<CircleXIcon color={themeToken.colorError} size={16} />
|
||||
<Typography.Text type="danger">{t("workflow_run.props.status.failed")}</Typography.Text>
|
||||
</Space>
|
||||
</Tooltip>;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "startedAt",
|
||||
title: t("workflow_run.props.started_at"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
return "TODO";
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "completedAt",
|
||||
title: t("workflow_run.props.completed_at"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
return "TODO";
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "$action",
|
||||
align: "end",
|
||||
fixed: "right",
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<Button.Group>
|
||||
<WorkflowRunDetailDrawer data={record} trigger={<Button color="primary" icon={<EyeIcon size={16} />} variant="text" />} />
|
||||
</Button.Group>
|
||||
),
|
||||
},
|
||||
];
|
||||
const [tableData, setTableData] = useState<WorkflowRunModel[]>([]);
|
||||
const [tableTotal, setTableTotal] = useState<number>(0);
|
||||
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
|
||||
const { id: workflowId } = useParams(); // TODO: 外部传参
|
||||
const { loading } = useRequest(
|
||||
() => {
|
||||
return listWorkflowRuns({
|
||||
workflowId: workflowId!,
|
||||
page: page,
|
||||
perPage: pageSize,
|
||||
});
|
||||
},
|
||||
{
|
||||
refreshDeps: [workflowId, page, pageSize],
|
||||
onSuccess: (data) => {
|
||||
setTableData(data.items);
|
||||
setTableTotal(data.totalItems);
|
||||
},
|
||||
onError: (err) => {
|
||||
if (err instanceof ClientResponseError && err.isAbort) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{NotificationContextHolder}
|
||||
|
||||
<div className={className} style={style}>
|
||||
<Table<WorkflowRunModel>
|
||||
columns={tableColumns}
|
||||
dataSource={tableData}
|
||||
loading={loading}
|
||||
locale={{
|
||||
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />,
|
||||
}}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
total: tableTotal,
|
||||
showSizeChanger: true,
|
||||
onChange: (page: number, pageSize: number) => {
|
||||
setPage(page);
|
||||
setPageSize(pageSize);
|
||||
},
|
||||
onShowSizeChange: (page: number, pageSize: number) => {
|
||||
setPage(page);
|
||||
setPageSize(pageSize);
|
||||
},
|
||||
}}
|
||||
rowKey={(record: WorkflowRunModel) => record.id}
|
||||
scroll={{ x: "max(100%, 960px)" }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowRuns;
|
||||
Reference in New Issue
Block a user