mirror of https://github.com/usual2970/certimate
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { useControllableValue } from "ahooks";
|
|
import { Alert, Drawer, Typography } from "antd";
|
|
import dayjs from "dayjs";
|
|
|
|
import Show from "@/components/Show";
|
|
import { WORKFLOW_RUN_STATUSES, type WorkflowRunModel } from "@/domain/workflowRun";
|
|
import { useTriggerElement } from "@/hooks";
|
|
|
|
export type WorkflowRunDetailDrawerProps = {
|
|
data?: WorkflowRunModel;
|
|
loading?: boolean;
|
|
open?: boolean;
|
|
trigger?: React.ReactNode;
|
|
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 = useTriggerElement(trigger, { onClick: () => setOpen(true) });
|
|
|
|
return (
|
|
<>
|
|
{triggerEl}
|
|
|
|
<Drawer destroyOnClose open={open} loading={loading} placement="right" title={`WorkflowRun #${data?.id}`} width={640} onClose={() => setOpen(false)}>
|
|
<Show when={!!data}>
|
|
<Show when={data!.status === WORKFLOW_RUN_STATUSES.SUCCEEDED}>
|
|
<Alert showIcon type="success" message={<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>} />
|
|
</Show>
|
|
|
|
<Show when={data!.status === WORKFLOW_RUN_STATUSES.FAILED}>
|
|
<Alert showIcon type="error" message={<Typography.Text type="danger">{t("workflow_run.props.status.failed")}</Typography.Text>} />
|
|
</Show>
|
|
|
|
<div className="mt-4 rounded-md bg-black p-4 text-stone-200">
|
|
<div className="flex flex-col space-y-4">
|
|
{data!.logs?.map((item, i) => {
|
|
return (
|
|
<div key={i} className="flex flex-col space-y-2">
|
|
<div className="font-semibold">{item.nodeName}</div>
|
|
<div className="flex flex-col space-y-1">
|
|
{item.outputs?.map((output, j) => {
|
|
return (
|
|
<div key={j} className="flex space-x-2 text-sm" style={{ wordBreak: "break-word" }}>
|
|
<div className="whitespace-nowrap">[{dayjs(output.time).format("YYYY-MM-DD HH:mm:ss")}]</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;
|