@webiny/background-tasks 0.0.0-unstable.7be00a75a9

package/admin/presentation/TaskDetail/components/TaskDetailDrawer.js

@@ -0,0 +1,264 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Button, CodeEditor, Drawer, Grid, Heading, Separator, Tag, Text, TimeAgo } from "@webiny/admin-ui";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/index.js";
+import { ReactComponent } from "@webiny/icons/stop_circle.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { TaskDetailPresenterFeature } from "../feature.js";
+import { GetTaskFeature } from "../../../features/getTask/feature.js";
+import { ListLogsFeature } from "../../../features/listLogs/feature.js";
+const STATUS_TAG_VARIANT = {
+    pending: "neutral-light",
+    running: "accent",
+    success: "success",
+    failed: "destructive",
+    aborted: "warning"
+};
+const formatJson = (value)=>{
+    if (null == value) return "";
+    if ("string" == typeof value) try {
+        return JSON.stringify(JSON.parse(value), null, 2);
+    } catch  {
+        return value;
+    }
+    return JSON.stringify(value, null, 2);
+};
+const ExpandButton = ({ show, expanded, onClick })=>{
+    if (!show) return null;
+    return /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        size: "sm",
+        icon: expanded ? /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+        onClick: onClick
+    });
+};
+const ExpandedPayload = ({ show, label, value, variant = "default" })=>{
+    if (!show) return null;
+    const textClass = "destructive" === variant ? " text-destructive" : "";
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "mt-xs"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong mb-xs"
+    }, label), /*#__PURE__*/ react.createElement("pre", {
+        className: `bg-neutral-light rounded-sm p-sm text-xs overflow-auto max-h-[200px]${textClass}`
+    }, formatJson(value)));
+};
+const JsonSection = ({ show, title, value })=>{
+    if (!show) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "mb-sm"
+    }, title), /*#__PURE__*/ react.createElement(CodeEditor, {
+        value: value,
+        language: "json",
+        disabled: true
+    })));
+};
+const LoadMoreLogsButton = ({ show, loading, onClick })=>{
+    if (!show) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "mt-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        size: "sm",
+        onClick: onClick,
+        disabled: loading
+    }, loading ? "Loading..." : "Load more logs"));
+};
+const DrawerActions = ({ isRunning, isTerminal, onAbort, onDelete })=>{
+    if (!isRunning && !isTerminal) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm"
+    }, isRunning ? /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: onAbort
+    }, "Abort") : null, isTerminal ? /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        onClick: onDelete
+    }, "Delete") : null);
+};
+const LogItemView = ({ item })=>{
+    const [expanded, setExpanded] = useState(false);
+    const hasData = null !== item.data && void 0 !== item.data;
+    const hasError = null !== item.error && void 0 !== item.error;
+    const expandable = hasData || hasError;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "border-b-sm border-neutral-muted py-xs px-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-start gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-shrink-0 pt-[2px]"
+    }, /*#__PURE__*/ react.createElement(Tag, {
+        variant: "error" === item.type ? "destructive" : "neutral-light",
+        content: item.type
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, item.message)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs flex-shrink-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: item.createdOn
+    })), /*#__PURE__*/ react.createElement(ExpandButton, {
+        show: expandable,
+        expanded: expanded,
+        onClick: ()=>setExpanded(!expanded)
+    }))), /*#__PURE__*/ react.createElement(ExpandedPayload, {
+        show: expanded && hasData,
+        label: "Data",
+        value: item.data
+    }), /*#__PURE__*/ react.createElement(ExpandedPayload, {
+        show: expanded && hasError,
+        label: "Error",
+        value: item.error,
+        variant: "destructive"
+    }));
+};
+const TaskDetailDrawer_TaskDetailDrawerInner = observer(function({ task, open, onClose, onAbort, onDelete }) {
+    const { presenter } = useFeature(TaskDetailPresenterFeature);
+    useEffect(()=>{
+        if (open) presenter.init(task.id);
+    }, [
+        presenter,
+        task.id,
+        open
+    ]);
+    const { vm } = presenter;
+    const { showConfirmation: showAbortConfirmation } = useConfirmationDialog({
+        title: "Abort Task",
+        message: "Are you sure you want to abort this running task?"
+    });
+    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({
+        title: "Delete Task",
+        message: "Are you sure you want to delete this task?"
+    });
+    const displayTask = vm.task ?? task;
+    const isRunning = "running" === displayTask.taskStatus;
+    const isTerminal = "success" === displayTask.taskStatus || "failed" === displayTask.taskStatus || "aborted" === displayTask.taskStatus;
+    const inputJson = formatJson(displayTask.input);
+    const outputJson = formatJson(displayTask.output);
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        open: open,
+        onOpenChange: (isOpen)=>!isOpen && onClose(),
+        title: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-sm"
+        }, /*#__PURE__*/ react.createElement("span", null, displayTask.name || displayTask.definitionId), /*#__PURE__*/ react.createElement(Tag, {
+            variant: STATUS_TAG_VARIANT[displayTask.taskStatus] ?? "neutral-light",
+            content: displayTask.taskStatus
+        })),
+        modal: true,
+        width: "900px",
+        bodyPadding: false,
+        actions: /*#__PURE__*/ react.createElement(DrawerActions, {
+            isRunning: isRunning,
+            isTerminal: isTerminal,
+            onAbort: ()=>showAbortConfirmation(()=>onAbort(displayTask.id)),
+            onDelete: ()=>showDeleteConfirmation(()=>onDelete(displayTask.id))
+        })
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md p-md overflow-auto"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "mb-sm"
+    }, "General Info"), /*#__PURE__*/ react.createElement(Grid, {
+        gap: "comfortable"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Definition"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, displayTask.definitionId)), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Created By"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, displayTask.createdBy?.displayName ?? "—")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Created On"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, displayTask.createdOn ? /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: displayTask.createdOn
+    }) : "—")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Started On"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, displayTask.startedOn ? /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: displayTask.startedOn
+    }) : "—")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Finished On"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, displayTask.finishedOn ? /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: displayTask.finishedOn
+    }) : "—")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Iterations"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, displayTask.iterations ?? 0)))), /*#__PURE__*/ react.createElement(JsonSection, {
+        show: !!inputJson,
+        title: "Input",
+        value: inputJson
+    }), /*#__PURE__*/ react.createElement(JsonSection, {
+        show: !!outputJson,
+        title: "Output",
+        value: outputJson
+    }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "mb-sm"
+    }, "Logs (", vm.logs.pagination.totalCount, ")"), 0 !== vm.logs.rows.length || vm.logs.pagination.loading ? /*#__PURE__*/ react.createElement("div", {
+        className: "border-sm border-neutral-muted rounded-sm"
+    }, vm.logs.rows.map((log)=>log.items.map((item, idx)=>/*#__PURE__*/ react.createElement(LogItemView, {
+                key: `${log.id}-${idx}`,
+                item: item
+            })))) : /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "No logs available."), /*#__PURE__*/ react.createElement(LoadMoreLogsButton, {
+        show: vm.logs.pagination.hasMore,
+        loading: vm.logs.pagination.loading,
+        onClick: ()=>presenter.loadMore()
+    }))));
+});
+const TaskDetailDrawer = (props)=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        GetTaskFeature.register(child);
+        ListLogsFeature.register(child);
+        TaskDetailPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(TaskDetailDrawer_TaskDetailDrawerInner, props));
+};
+export { TaskDetailDrawer };
+
+//# sourceMappingURL=TaskDetailDrawer.js.map

package/admin/presentation/TaskDetail/components/TaskDetailDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/TaskDetail/components/TaskDetailDrawer.js","sources":["../../../../../src/admin/presentation/TaskDetail/components/TaskDetailDrawer.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Button, Drawer, Grid, Heading, Separator, Tag, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { CodeEditor } from \"@webiny/admin-ui\";\nimport { useConfirmationDialog } from \"@webiny/app-admin/hooks/index.js\";\nimport { ReactComponent as StopCircleIcon } from \"@webiny/icons/stop_circle.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as ExpandMoreIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as ExpandLessIcon } from \"@webiny/icons/expand_less.svg\";\nimport { TaskDetailPresenterFeature } from \"../feature.js\";\nimport { GetTaskFeature } from \"~/admin/features/getTask/feature.js\";\nimport { ListLogsFeature } from \"~/admin/features/listLogs/feature.js\";\nimport type { Task, TaskLog, TaskLogItem } from \"~/admin/shared/types.js\";\n\nconst STATUS_TAG_VARIANT: Record<\n    string,\n    \"neutral-light\" | \"accent\" | \"success\" | \"destructive\" | \"warning\"\n> = {\n    pending: \"neutral-light\",\n    running: \"accent\",\n    success: \"success\",\n    failed: \"destructive\",\n    aborted: \"warning\"\n};\n\nconst formatJson = (value: unknown): string => {\n    if (value === null || value === undefined) {\n        return \"\";\n    }\n    if (typeof value === \"string\") {\n        try {\n            return JSON.stringify(JSON.parse(value), null, 2);\n        } catch {\n            return value;\n        }\n    }\n    return JSON.stringify(value, null, 2);\n};\n\ninterface ExpandButtonProps {\n    show: boolean;\n    expanded: boolean;\n    onClick: () => void;\n}\n\nconst ExpandButton = ({ show, expanded, onClick }: ExpandButtonProps) => {\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            icon={expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}\n            onClick={onClick}\n        />\n    );\n};\n\ninterface ExpandedPayloadProps {\n    show: boolean;\n    label: string;\n    value: unknown;\n    variant?: \"default\" | \"destructive\";\n}\n\nconst ExpandedPayload = ({ show, label, value, variant = \"default\" }: ExpandedPayloadProps) => {\n    if (!show) {\n        return null;\n    }\n\n    const textClass = variant === \"destructive\" ? \" text-destructive\" : \"\";\n\n    return (\n        <div className=\"mt-xs\">\n            <Text size=\"sm\" className=\"text-neutral-strong mb-xs\">\n                {label}\n            </Text>\n            <pre\n                className={`bg-neutral-light rounded-sm p-sm text-xs overflow-auto max-h-[200px]${textClass}`}\n            >\n                {formatJson(value)}\n            </pre>\n        </div>\n    );\n};\n\ninterface JsonSectionProps {\n    show: boolean;\n    title: string;\n    value: string;\n}\n\nconst JsonSection = ({ show, title, value }: JsonSectionProps) => {\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <>\n            <Separator />\n            <div>\n                <Heading level={6} className=\"mb-sm\">\n                    {title}\n                </Heading>\n                <CodeEditor value={value} language=\"json\" disabled={true} />\n            </div>\n        </>\n    );\n};\n\ninterface LoadMoreLogsButtonProps {\n    show: boolean;\n    loading: boolean;\n    onClick: () => void;\n}\n\nconst LoadMoreLogsButton = ({ show, loading, onClick }: LoadMoreLogsButtonProps) => {\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <div className=\"mt-sm\">\n            <Button variant=\"tertiary\" size=\"sm\" onClick={onClick} disabled={loading}>\n                {loading ? \"Loading...\" : \"Load more logs\"}\n            </Button>\n        </div>\n    );\n};\n\ninterface DrawerActionsProps {\n    isRunning: boolean;\n    isTerminal: boolean;\n    onAbort: () => void;\n    onDelete: () => void;\n}\n\nconst DrawerActions = ({ isRunning, isTerminal, onAbort, onDelete }: DrawerActionsProps) => {\n    if (!isRunning && !isTerminal) {\n        return null;\n    }\n\n    return (\n        <div className=\"flex gap-sm\">\n            {isRunning ? (\n                <Button variant=\"secondary\" size=\"sm\" icon={<StopCircleIcon />} onClick={onAbort}>\n                    Abort\n                </Button>\n            ) : null}\n            {isTerminal ? (\n                <Button variant=\"secondary\" size=\"sm\" icon={<DeleteIcon />} onClick={onDelete}>\n                    Delete\n                </Button>\n            ) : null}\n        </div>\n    );\n};\n\ninterface LogItemViewProps {\n    item: TaskLogItem;\n}\n\nconst LogItemView = ({ item }: LogItemViewProps) => {\n    const [expanded, setExpanded] = useState(false);\n    const hasData = item.data !== null && item.data !== undefined;\n    const hasError = item.error !== null && item.error !== undefined;\n    const expandable = hasData || hasError;\n\n    return (\n        <div className=\"border-b-sm border-neutral-muted py-xs px-sm\">\n            <div className=\"flex items-start gap-sm\">\n                <div className=\"flex-shrink-0 pt-[2px]\">\n                    <Tag\n                        variant={item.type === \"error\" ? \"destructive\" : \"neutral-light\"}\n                        content={item.type}\n                    />\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                    <Text size=\"sm\">{item.message}</Text>\n                </div>\n                <div className=\"flex items-center gap-xs flex-shrink-0\">\n                    <Text size=\"sm\" className=\"text-neutral-strong\">\n                        <TimeAgo datetime={item.createdOn} />\n                    </Text>\n                    <ExpandButton\n                        show={expandable}\n                        expanded={expanded}\n                        onClick={() => setExpanded(!expanded)}\n                    />\n                </div>\n            </div>\n            <ExpandedPayload show={expanded && hasData} label=\"Data\" value={item.data} />\n            <ExpandedPayload\n                show={expanded && hasError}\n                label=\"Error\"\n                value={item.error}\n                variant=\"destructive\"\n            />\n        </div>\n    );\n};\n\ninterface TaskDetailDrawerProps {\n    task: Task;\n    open: boolean;\n    onClose: () => void;\n    onAbort: (id: string) => Promise<void>;\n    onDelete: (id: string) => Promise<void>;\n}\n\nconst TaskDetailDrawerInner = observer(function TaskDetailDrawerInner({\n    task,\n    open,\n    onClose,\n    onAbort,\n    onDelete\n}: TaskDetailDrawerProps) {\n    const { presenter } = useFeature(TaskDetailPresenterFeature);\n\n    useEffect(() => {\n        if (open) {\n            void presenter.init(task.id);\n        }\n    }, [presenter, task.id, open]);\n\n    const { vm } = presenter;\n\n    const { showConfirmation: showAbortConfirmation } = useConfirmationDialog({\n        title: \"Abort Task\",\n        message: \"Are you sure you want to abort this running task?\"\n    });\n\n    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({\n        title: \"Delete Task\",\n        message: \"Are you sure you want to delete this task?\"\n    });\n\n    const displayTask = vm.task ?? task;\n    const isRunning = displayTask.taskStatus === \"running\";\n    const isTerminal =\n        displayTask.taskStatus === \"success\" ||\n        displayTask.taskStatus === \"failed\" ||\n        displayTask.taskStatus === \"aborted\";\n\n    const inputJson = formatJson(displayTask.input);\n    const outputJson = formatJson(displayTask.output);\n\n    return (\n        <Drawer\n            open={open}\n            onOpenChange={isOpen => !isOpen && onClose()}\n            title={\n                <div className=\"flex items-center gap-sm\">\n                    <span>{displayTask.name || displayTask.definitionId}</span>\n                    <Tag\n                        variant={STATUS_TAG_VARIANT[displayTask.taskStatus] ?? \"neutral-light\"}\n                        content={displayTask.taskStatus}\n                    />\n                </div>\n            }\n            modal={true}\n            width=\"900px\"\n            bodyPadding={false}\n            actions={\n                <DrawerActions\n                    isRunning={isRunning}\n                    isTerminal={isTerminal}\n                    onAbort={() => showAbortConfirmation(() => onAbort(displayTask.id))}\n                    onDelete={() => showDeleteConfirmation(() => onDelete(displayTask.id))}\n                />\n            }\n        >\n            <div className=\"flex flex-col gap-md p-md overflow-auto\">\n                <div>\n                    <Heading level={6} className=\"mb-sm\">\n                        General Info\n                    </Heading>\n                    <Grid gap=\"comfortable\">\n                        <Grid.Column span={6}>\n                            <Text size=\"sm\" className=\"text-neutral-strong\">\n                                Definition\n                            </Text>\n                            <Text size=\"sm\">{displayTask.definitionId}</Text>\n                        </Grid.Column>\n                        <Grid.Column span={6}>\n                            <Text size=\"sm\" className=\"text-neutral-strong\">\n                                Created By\n                            </Text>\n                            <Text size=\"sm\">{displayTask.createdBy?.displayName ?? \"—\"}</Text>\n                        </Grid.Column>\n                        <Grid.Column span={6}>\n                            <Text size=\"sm\" className=\"text-neutral-strong\">\n                                Created On\n                            </Text>\n                            <Text size=\"sm\">\n                                {displayTask.createdOn ? (\n                                    <TimeAgo datetime={displayTask.createdOn} />\n                                ) : (\n                                    \"—\"\n                                )}\n                            </Text>\n                        </Grid.Column>\n                        <Grid.Column span={6}>\n                            <Text size=\"sm\" className=\"text-neutral-strong\">\n                                Started On\n                            </Text>\n                            <Text size=\"sm\">\n                                {displayTask.startedOn ? (\n                                    <TimeAgo datetime={displayTask.startedOn} />\n                                ) : (\n                                    \"—\"\n                                )}\n                            </Text>\n                        </Grid.Column>\n                        <Grid.Column span={6}>\n                            <Text size=\"sm\" className=\"text-neutral-strong\">\n                                Finished On\n                            </Text>\n                            <Text size=\"sm\">\n                                {displayTask.finishedOn ? (\n                                    <TimeAgo datetime={displayTask.finishedOn} />\n                                ) : (\n                                    \"—\"\n                                )}\n                            </Text>\n                        </Grid.Column>\n                        <Grid.Column span={6}>\n                            <Text size=\"sm\" className=\"text-neutral-strong\">\n                                Iterations\n                            </Text>\n                            <Text size=\"sm\">{displayTask.iterations ?? 0}</Text>\n                        </Grid.Column>\n                    </Grid>\n                </div>\n\n                <JsonSection show={!!inputJson} title=\"Input\" value={inputJson} />\n                <JsonSection show={!!outputJson} title=\"Output\" value={outputJson} />\n\n                <Separator />\n                <div>\n                    <Heading level={6} className=\"mb-sm\">\n                        Logs ({vm.logs.pagination.totalCount})\n                    </Heading>\n                    {vm.logs.rows.length === 0 && !vm.logs.pagination.loading ? (\n                        <Text size=\"sm\" className=\"text-neutral-strong\">\n                            No logs available.\n                        </Text>\n                    ) : (\n                        <div className=\"border-sm border-neutral-muted rounded-sm\">\n                            {vm.logs.rows.map((log: TaskLog) =>\n                                log.items.map((item, idx) => (\n                                    <LogItemView key={`${log.id}-${idx}`} item={item} />\n                                ))\n                            )}\n                        </div>\n                    )}\n                    <LoadMoreLogsButton\n                        show={vm.logs.pagination.hasMore}\n                        loading={vm.logs.pagination.loading}\n                        onClick={() => presenter.loadMore()}\n                    />\n                </div>\n            </div>\n        </Drawer>\n    );\n});\n\nexport const TaskDetailDrawer = (props: TaskDetailDrawerProps) => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        GetTaskFeature.register(child);\n        ListLogsFeature.register(child);\n        TaskDetailPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <TaskDetailDrawerInner {...props} />\n        </DiContainerProvider>\n    );\n};\n"],"names":["STATUS_TAG_VARIANT","formatJson","value","JSON","ExpandButton","show","expanded","onClick","Button","ExpandLessIcon","ExpandMoreIcon","ExpandedPayload","label","variant","textClass","Text","JsonSection","title","Separator","Heading","CodeEditor","LoadMoreLogsButton","loading","DrawerActions","isRunning","isTerminal","onAbort","onDelete","StopCircleIcon","DeleteIcon","LogItemView","item","setExpanded","useState","hasData","undefined","hasError","expandable","Tag","TimeAgo","TaskDetailDrawerInner","observer","task","open","onClose","presenter","useFeature","TaskDetailPresenterFeature","useEffect","vm","showAbortConfirmation","useConfirmationDialog","showDeleteConfirmation","displayTask","inputJson","outputJson","Drawer","isOpen","Grid","log","idx","TaskDetailDrawer","props","container","useContainer","scopedContainer","useMemo","child","GetTaskFeature","ListLogsFeature","DiContainerProvider"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,qBAGF;IACA,SAAS;IACT,SAAS;IACT,SAAS;IACT,QAAQ;IACR,SAAS;AACb;AAEA,MAAMC,aAAa,CAACC;IAChB,IAAIA,QAAAA,OACA,OAAO;IAEX,IAAI,AAAiB,YAAjB,OAAOA,OACP,IAAI;QACA,OAAOC,KAAK,SAAS,CAACA,KAAK,KAAK,CAACD,QAAQ,MAAM;IACnD,EAAE,OAAM;QACJ,OAAOA;IACX;IAEJ,OAAOC,KAAK,SAAS,CAACD,OAAO,MAAM;AACvC;AAQA,MAAME,eAAe,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAqB;IAChE,IAAI,CAACF,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACG,QAAMA;QACH,SAAQ;QACR,MAAK;QACL,MAAMF,WAAW,WAAXA,GAAW,oBAACG,gCAAcA,QAAAA,WAAAA,GAAM,oBAACC,gCAAcA;QACrD,SAASH;;AAGrB;AASA,MAAMI,kBAAkB,CAAC,EAAEN,IAAI,EAAEO,KAAK,EAAEV,KAAK,EAAEW,UAAU,SAAS,EAAwB;IACtF,IAAI,CAACR,MACD,OAAO;IAGX,MAAMS,YAAYD,AAAY,kBAAZA,UAA4B,sBAAsB;IAEpE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACE,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBH,QAAAA,WAAAA,GAEL,oBAAC;QACG,WAAW,CAAC,oEAAoE,EAAEE,WAAW;OAE5Fb,WAAWC;AAI5B;AAQA,MAAMc,cAAc,CAAC,EAAEX,IAAI,EAAEY,KAAK,EAAEf,KAAK,EAAoB;IACzD,IAAI,CAACG,MACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAACa,WAASA,OAAAA,WAAAA,GACV,oBAAC,2BACG,oBAACC,SAAOA;QAAC,OAAO;QAAG,WAAU;OACxBF,QAAAA,WAAAA,GAEL,oBAACG,YAAUA;QAAC,OAAOlB;QAAO,UAAS;QAAO,UAAU;;AAIpE;AAQA,MAAMmB,qBAAqB,CAAC,EAAEhB,IAAI,EAAEiB,OAAO,EAAEf,OAAO,EAA2B;IAC3E,IAAI,CAACF,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACG,QAAMA;QAAC,SAAQ;QAAW,MAAK;QAAK,SAASD;QAAS,UAAUe;OAC5DA,UAAU,eAAe;AAI1C;AASA,MAAMC,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,EAAsB;IACnF,IAAI,CAACH,aAAa,CAACC,YACf,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;OACVD,YAAY,WAAZA,GACG,oBAAChB,QAAMA;QAAC,SAAQ;QAAY,MAAK;QAAK,oBAAM,oBAACoB,gBAAcA;QAAK,SAASF;OAAS,WAGlF,MACHD,aAAa,WAAbA,GACG,oBAACjB,QAAMA;QAAC,SAAQ;QAAY,MAAK;QAAK,oBAAM,oBAACqB,2BAAUA;QAAK,SAASF;OAAU,YAG/E;AAGhB;AAMA,MAAMG,cAAc,CAAC,EAAEC,IAAI,EAAoB;IAC3C,MAAM,CAACzB,UAAU0B,YAAY,GAAGC,SAAS;IACzC,MAAMC,UAAUH,AAAc,SAAdA,KAAK,IAAI,IAAaA,AAAcI,WAAdJ,KAAK,IAAI;IAC/C,MAAMK,WAAWL,AAAe,SAAfA,KAAK,KAAK,IAAaA,AAAeI,WAAfJ,KAAK,KAAK;IAClD,MAAMM,aAAaH,WAAWE;IAE9B,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACE,KAAGA;QACA,SAASP,AAAc,YAAdA,KAAK,IAAI,GAAe,gBAAgB;QACjD,SAASA,KAAK,IAAI;uBAG1B,oBAAC;QAAI,WAAU;qBACX,oBAAChB,MAAIA;QAAC,MAAK;OAAMgB,KAAK,OAAO,kBAEjC,oBAAC;QAAI,WAAU;qBACX,oBAAChB,MAAIA;QAAC,MAAK;QAAK,WAAU;qBACtB,oBAACwB,SAAOA;QAAC,UAAUR,KAAK,SAAS;uBAErC,oBAAC3B,cAAYA;QACT,MAAMiC;QACN,UAAU/B;QACV,SAAS,IAAM0B,YAAY,CAAC1B;wBAIxC,oBAACK,iBAAeA;QAAC,MAAML,YAAY4B;QAAS,OAAM;QAAO,OAAOH,KAAK,IAAI;sBACzE,oBAACpB,iBAAeA;QACZ,MAAML,YAAY8B;QAClB,OAAM;QACN,OAAOL,KAAK,KAAK;QACjB,SAAQ;;AAIxB;AAUA,MAAMS,yCAAwBC,SAAS,SAA+B,EAClEC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPlB,OAAO,EACPC,QAAQ,EACY;IACpB,MAAM,EAAEkB,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACN,IAAIL,MACKE,UAAU,IAAI,CAACH,KAAK,EAAE;IAEnC,GAAG;QAACG;QAAWH,KAAK,EAAE;QAAEC;KAAK;IAE7B,MAAM,EAAEM,EAAE,EAAE,GAAGJ;IAEf,MAAM,EAAE,kBAAkBK,qBAAqB,EAAE,GAAGC,sBAAsB;QACtE,OAAO;QACP,SAAS;IACb;IAEA,MAAM,EAAE,kBAAkBC,sBAAsB,EAAE,GAAGD,sBAAsB;QACvE,OAAO;QACP,SAAS;IACb;IAEA,MAAME,cAAcJ,GAAG,IAAI,IAAIP;IAC/B,MAAMlB,YAAY6B,AAA2B,cAA3BA,YAAY,UAAU;IACxC,MAAM5B,aACF4B,AAA2B,cAA3BA,YAAY,UAAU,IACtBA,AAA2B,aAA3BA,YAAY,UAAU,IACtBA,AAA2B,cAA3BA,YAAY,UAAU;IAE1B,MAAMC,YAAYrD,WAAWoD,YAAY,KAAK;IAC9C,MAAME,aAAatD,WAAWoD,YAAY,MAAM;IAEhD,OAAO,WAAP,GACI,oBAACG,QAAMA;QACH,MAAMb;QACN,cAAcc,CAAAA,SAAU,CAACA,UAAUb;QACnC,qBACI,oBAAC;YAAI,WAAU;yBACX,oBAAC,cAAMS,YAAY,IAAI,IAAIA,YAAY,YAAY,iBACnD,oBAACf,KAAGA;YACA,SAAStC,kBAAkB,CAACqD,YAAY,UAAU,CAAC,IAAI;YACvD,SAASA,YAAY,UAAU;;QAI3C,OAAO;QACP,OAAM;QACN,aAAa;QACb,uBACI,oBAAC9B,eAAaA;YACV,WAAWC;YACX,YAAYC;YACZ,SAAS,IAAMyB,sBAAsB,IAAMxB,QAAQ2B,YAAY,EAAE;YACjE,UAAU,IAAMD,uBAAuB,IAAMzB,SAAS0B,YAAY,EAAE;;qBAI5E,oBAAC;QAAI,WAAU;qBACX,oBAAC,2BACG,oBAAClC,SAAOA;QAAC,OAAO;QAAG,WAAU;OAAQ,+BAGrC,oBAACuC,MAAIA;QAAC,KAAI;qBACN,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC3C,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,6BAGhD,oBAACA,MAAIA;QAAC,MAAK;OAAMsC,YAAY,YAAY,kBAE7C,oBAACK,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC3C,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,6BAGhD,oBAACA,MAAIA;QAAC,MAAK;OAAMsC,YAAY,SAAS,EAAE,eAAe,qBAE3D,oBAACK,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC3C,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,6BAGhD,oBAACA,MAAIA;QAAC,MAAK;OACNsC,YAAY,SAAS,GAAG,WAAH,GAClB,oBAACd,SAAOA;QAAC,UAAUc,YAAY,SAAS;SAExC,qBAIZ,oBAACK,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC3C,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,6BAGhD,oBAACA,MAAIA;QAAC,MAAK;OACNsC,YAAY,SAAS,GAAG,WAAH,GAClB,oBAACd,SAAOA;QAAC,UAAUc,YAAY,SAAS;SAExC,qBAIZ,oBAACK,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC3C,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,8BAGhD,oBAACA,MAAIA;QAAC,MAAK;OACNsC,YAAY,UAAU,GAAG,WAAH,GACnB,oBAACd,SAAOA;QAAC,UAAUc,YAAY,UAAU;SAEzC,qBAIZ,oBAACK,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC3C,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,6BAGhD,oBAACA,MAAIA;QAAC,MAAK;OAAMsC,YAAY,UAAU,IAAI,qBAKvD,oBAACrC,aAAWA;QAAC,MAAM,CAAC,CAACsC;QAAW,OAAM;QAAQ,OAAOA;sBACrD,oBAACtC,aAAWA;QAAC,MAAM,CAAC,CAACuC;QAAY,OAAM;QAAS,OAAOA;sBAEvD,oBAACrC,WAASA,OAAAA,WAAAA,GACV,oBAAC,2BACG,oBAACC,SAAOA;QAAC,OAAO;QAAG,WAAU;OAAQ,UAC1B8B,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,EAAC,MAExCA,AAAwB,MAAxBA,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,IAAWA,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,GACL,cAIhD,oBAAC;QAAI,WAAU;OACVA,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAACU,MACfA,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC5B,MAAM6B,MAAAA,WAAAA,GACjB,oBAAC9B,aAAWA;gBAAC,KAAK,GAAG6B,IAAI,EAAE,CAAC,CAAC,EAAEC,KAAK;gBAAE,MAAM7B;oBARA,WAAH,GACrD,oBAAChB,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,uB,cAYpD,oBAACM,oBAAkBA;QACf,MAAM4B,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO;QAChC,SAASA,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO;QACnC,SAAS,IAAMJ,UAAU,QAAQ;;AAMzD;AAEO,MAAMgB,mBAAmB,CAACC;IAC7B,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,UAAU,oBAAoB;QAC5CK,eAAe,QAAQ,CAACD;QACxBE,gBAAgB,QAAQ,CAACF;QACzBpB,2BAA2B,QAAQ,CAACoB;QACpC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACG,qBAAmBA;QAAC,WAAWL;qBAC5B,oBAACzB,wCAA0BsB;AAGvC"}

package/admin/presentation/TaskDetail/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const TaskDetailPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").ITaskDetailPresenter;
+}, []>;

package/admin/presentation/TaskDetail/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { TaskDetailPresenter } from "./abstractions.js";
+import { TaskDetailPresenter as external_TaskDetailPresenter_js_TaskDetailPresenter } from "./TaskDetailPresenter.js";
+const TaskDetailPresenterFeature = createFeature({
+    name: "BackgroundTasks/TaskDetailPresenter",
+    register (container) {
+        container.register(external_TaskDetailPresenter_js_TaskDetailPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(TaskDetailPresenter)
+        };
+    }
+});
+export { TaskDetailPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/admin/presentation/TaskDetail/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/TaskDetail/feature.js","sources":["../../../../src/admin/presentation/TaskDetail/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { TaskDetailPresenter as PresenterAbstraction } from \"./abstractions.js\";\nimport { TaskDetailPresenter } from \"./TaskDetailPresenter.js\";\n\nexport const TaskDetailPresenterFeature = createFeature({\n    name: \"BackgroundTasks/TaskDetailPresenter\",\n    register(container) {\n        container.register(TaskDetailPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return { presenter: container.resolve(PresenterAbstraction) };\n    }\n});\n"],"names":["TaskDetailPresenterFeature","createFeature","container","TaskDetailPresenter","PresenterAbstraction"],"mappings":";;;AAIO,MAAMA,6BAA6BC,cAAc;IACpD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,qDAAqB,gBAAgB;IAC5D;IACA,SAAQD,SAAS;QACb,OAAO;YAAE,WAAWA,UAAU,OAAO,CAACE;QAAsB;IAChE;AACJ"}

package/admin/presentation/TaskDetail/index.d.ts

@@ -0,0 +1,2 @@
+export { TaskDetailPresenter } from "./abstractions.js";
+export { TaskDetailPresenterFeature } from "./feature.js";

package/admin/presentation/TaskDetail/index.js

@@ -0,0 +1,2 @@
+export { TaskDetailPresenter } from "./abstractions.js";
+export { TaskDetailPresenterFeature } from "./feature.js";

package/admin/presentation/TaskExecutions/TaskExecutionsDataSource.d.ts

@@ -0,0 +1,15 @@
+import type { IDataSource, IDataSourceQuery, IDataSourceMeta } from "@webiny/app-admin/presentation/listPresenter/abstractions.js";
+import type { Task } from "../../../admin/shared/types.js";
+import type { IListTasksUseCase } from "../../../admin/features/listTasks/abstractions.js";
+export declare class TaskExecutionsDataSource implements IDataSource<Task> {
+    private readonly listTasksUseCase;
+    private _rows;
+    private _meta;
+    private _loading;
+    constructor(listTasksUseCase: IListTasksUseCase);
+    get rows(): Task[];
+    get meta(): IDataSourceMeta;
+    get loading(): boolean;
+    query(params: IDataSourceQuery): Promise<void>;
+    loadMore(params: IDataSourceQuery): Promise<void>;
+}

package/admin/presentation/TaskExecutions/TaskExecutionsDataSource.js

@@ -0,0 +1,91 @@
+import { computed, makeAutoObservable, runInAction } from "mobx";
+const ENTRY_META_SORT_FIELDS = new Set([
+    "id",
+    "createdOn",
+    "modifiedOn",
+    "savedOn",
+    "deletedOn",
+    "restoredOn",
+    "firstPublishedOn",
+    "lastPublishedOn"
+]);
+function toSortEnum(field, direction) {
+    const prefix = ENTRY_META_SORT_FIELDS.has(field) ? "" : "values_";
+    return `${prefix}${field}_${direction}`;
+}
+class TaskExecutionsDataSource {
+    constructor(listTasksUseCase){
+        this.listTasksUseCase = listTasksUseCase;
+        this._rows = [];
+        this._meta = {
+            cursor: null,
+            hasMoreItems: false,
+            totalCount: 0
+        };
+        this._loading = false;
+        makeAutoObservable(this, {
+            listTasksUseCase: false,
+            rows: computed
+        });
+    }
+    get rows() {
+        return this._rows;
+    }
+    get meta() {
+        return this._meta;
+    }
+    get loading() {
+        return this._loading;
+    }
+    async query(params) {
+        this._loading = true;
+        const sort = params.sort ? [
+            toSortEnum(params.sort.field, params.sort.direction)
+        ] : void 0;
+        const result = await this.listTasksUseCase.execute({
+            where: params.filters,
+            sort,
+            limit: params.limit,
+            after: params.cursor,
+            search: params.search
+        });
+        runInAction(()=>{
+            this._rows = result.items;
+            this._meta = {
+                cursor: result.meta.cursor,
+                hasMoreItems: result.meta.hasMoreItems,
+                totalCount: result.meta.totalCount
+            };
+            this._loading = false;
+        });
+    }
+    async loadMore(params) {
+        if (!this._meta.hasMoreItems || this._loading) return;
+        this._loading = true;
+        const sort = params.sort ? [
+            toSortEnum(params.sort.field, params.sort.direction)
+        ] : void 0;
+        const result = await this.listTasksUseCase.execute({
+            where: params.filters,
+            sort,
+            limit: params.limit,
+            after: this._meta.cursor ?? void 0,
+            search: params.search
+        });
+        runInAction(()=>{
+            this._rows = [
+                ...this._rows,
+                ...result.items
+            ];
+            this._meta = {
+                cursor: result.meta.cursor,
+                hasMoreItems: result.meta.hasMoreItems,
+                totalCount: result.meta.totalCount
+            };
+            this._loading = false;
+        });
+    }
+}
+export { TaskExecutionsDataSource };
+
+//# sourceMappingURL=TaskExecutionsDataSource.js.map

package/admin/presentation/TaskExecutions/TaskExecutionsDataSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/TaskExecutions/TaskExecutionsDataSource.js","sources":["../../../../src/admin/presentation/TaskExecutions/TaskExecutionsDataSource.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, computed } from \"mobx\";\nimport type {\n    IDataSource,\n    IDataSourceQuery,\n    IDataSourceMeta\n} from \"@webiny/app-admin/presentation/listPresenter/abstractions.js\";\nimport type { Task } from \"~/admin/shared/types.js\";\nimport type { IListTasksUseCase } from \"~/admin/features/listTasks/abstractions.js\";\n\nconst ENTRY_META_SORT_FIELDS = new Set([\n    \"id\",\n    \"createdOn\",\n    \"modifiedOn\",\n    \"savedOn\",\n    \"deletedOn\",\n    \"restoredOn\",\n    \"firstPublishedOn\",\n    \"lastPublishedOn\"\n]);\n\nfunction toSortEnum(field: string, direction: \"ASC\" | \"DESC\"): string {\n    const prefix = ENTRY_META_SORT_FIELDS.has(field) ? \"\" : \"values_\";\n    return `${prefix}${field}_${direction}`;\n}\n\nexport class TaskExecutionsDataSource implements IDataSource<Task> {\n    private _rows: Task[] = [];\n    private _meta: IDataSourceMeta = { cursor: null, hasMoreItems: false, totalCount: 0 };\n    private _loading = false;\n\n    constructor(private readonly listTasksUseCase: IListTasksUseCase) {\n        makeAutoObservable<TaskExecutionsDataSource, \"listTasksUseCase\">(this, {\n            listTasksUseCase: false,\n            rows: computed\n        });\n    }\n\n    get rows(): Task[] {\n        return this._rows;\n    }\n\n    get meta(): IDataSourceMeta {\n        return this._meta;\n    }\n\n    get loading(): boolean {\n        return this._loading;\n    }\n\n    async query(params: IDataSourceQuery): Promise<void> {\n        this._loading = true;\n        const sort = params.sort\n            ? [toSortEnum(params.sort.field, params.sort.direction)]\n            : undefined;\n        const result = await this.listTasksUseCase.execute({\n            where: params.filters,\n            sort,\n            limit: params.limit,\n            after: params.cursor,\n            search: params.search\n        });\n        runInAction(() => {\n            this._rows = result.items;\n            this._meta = {\n                cursor: result.meta.cursor,\n                hasMoreItems: result.meta.hasMoreItems,\n                totalCount: result.meta.totalCount\n            };\n            this._loading = false;\n        });\n    }\n\n    async loadMore(params: IDataSourceQuery): Promise<void> {\n        if (!this._meta.hasMoreItems || this._loading) {\n            return;\n        }\n        this._loading = true;\n        const sort = params.sort\n            ? [toSortEnum(params.sort.field, params.sort.direction)]\n            : undefined;\n        const result = await this.listTasksUseCase.execute({\n            where: params.filters,\n            sort,\n            limit: params.limit,\n            after: this._meta.cursor ?? undefined,\n            search: params.search\n        });\n        runInAction(() => {\n            this._rows = [...this._rows, ...result.items];\n            this._meta = {\n                cursor: result.meta.cursor,\n                hasMoreItems: result.meta.hasMoreItems,\n                totalCount: result.meta.totalCount\n            };\n            this._loading = false;\n        });\n    }\n}\n"],"names":["ENTRY_META_SORT_FIELDS","Set","toSortEnum","field","direction","prefix","TaskExecutionsDataSource","listTasksUseCase","makeAutoObservable","computed","params","sort","undefined","result","runInAction"],"mappings":";AASA,MAAMA,yBAAyB,IAAIC,IAAI;IACnC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH;AAED,SAASC,WAAWC,KAAa,EAAEC,SAAyB;IACxD,MAAMC,SAASL,uBAAuB,GAAG,CAACG,SAAS,KAAK;IACxD,OAAO,GAAGE,SAASF,MAAM,CAAC,EAAEC,WAAW;AAC3C;AAEO,MAAME;IAKT,YAA6BC,gBAAmC,CAAE;aAArCA,gBAAgB,GAAhBA;aAJrB,KAAK,GAAW,EAAE;aAClB,KAAK,GAAoB;YAAE,QAAQ;YAAM,cAAc;YAAO,YAAY;QAAE;aAC5E,QAAQ,GAAG;QAGfC,mBAAiE,IAAI,EAAE;YACnE,kBAAkB;YAClB,MAAMC;QACV;IACJ;IAEA,IAAI,OAAe;QACf,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,OAAwB;QACxB,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,UAAmB;QACnB,OAAO,IAAI,CAAC,QAAQ;IACxB;IAEA,MAAM,MAAMC,MAAwB,EAAiB;QACjD,IAAI,CAAC,QAAQ,GAAG;QAChB,MAAMC,OAAOD,OAAO,IAAI,GAClB;YAACR,WAAWQ,OAAO,IAAI,CAAC,KAAK,EAAEA,OAAO,IAAI,CAAC,SAAS;SAAE,GACtDE;QACN,MAAMC,SAAS,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;YAC/C,OAAOH,OAAO,OAAO;YACrBC;YACA,OAAOD,OAAO,KAAK;YACnB,OAAOA,OAAO,MAAM;YACpB,QAAQA,OAAO,MAAM;QACzB;QACAI,YAAY;YACR,IAAI,CAAC,KAAK,GAAGD,OAAO,KAAK;YACzB,IAAI,CAAC,KAAK,GAAG;gBACT,QAAQA,OAAO,IAAI,CAAC,MAAM;gBAC1B,cAAcA,OAAO,IAAI,CAAC,YAAY;gBACtC,YAAYA,OAAO,IAAI,CAAC,UAAU;YACtC;YACA,IAAI,CAAC,QAAQ,GAAG;QACpB;IACJ;IAEA,MAAM,SAASH,MAAwB,EAAiB;QACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,EACzC;QAEJ,IAAI,CAAC,QAAQ,GAAG;QAChB,MAAMC,OAAOD,OAAO,IAAI,GAClB;YAACR,WAAWQ,OAAO,IAAI,CAAC,KAAK,EAAEA,OAAO,IAAI,CAAC,SAAS;SAAE,GACtDE;QACN,MAAMC,SAAS,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;YAC/C,OAAOH,OAAO,OAAO;YACrBC;YACA,OAAOD,OAAO,KAAK;YACnB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAIE;YAC5B,QAAQF,OAAO,MAAM;QACzB;QACAI,YAAY;YACR,IAAI,CAAC,KAAK,GAAG;mBAAI,IAAI,CAAC,KAAK;mBAAKD,OAAO,KAAK;aAAC;YAC7C,IAAI,CAAC,KAAK,GAAG;gBACT,QAAQA,OAAO,IAAI,CAAC,MAAM;gBAC1B,cAAcA,OAAO,IAAI,CAAC,YAAY;gBACtC,YAAYA,OAAO,IAAI,CAAC,UAAU;YACtC;YACA,IAAI,CAAC,QAAQ,GAAG;QACpB;IACJ;AACJ"}

package/admin/presentation/TaskExecutions/TaskExecutionsPresenter.d.ts

@@ -0,0 +1,52 @@
+import { ListPresenter } from "@webiny/app-admin/presentation/listPresenter/abstractions.js";
+import type { Task } from "../../../admin/shared/types.js";
+import { type ITaskExecutionsPresenter, type ITaskExecutionsViewModel } from "./abstractions.js";
+import { ListTasksUseCase } from "../../../admin/features/listTasks/abstractions.js";
+import { DeleteTaskUseCase } from "../../../admin/features/deleteTask/abstractions.js";
+import { AbortTaskUseCase } from "../../../admin/features/abortTask/abstractions.js";
+import { ListDefinitionsUseCase } from "../../../admin/features/listDefinitions/abstractions.js";
+import { TaskPermissions } from "../../../admin/features/permissions/abstractions.js";
+declare class TaskExecutionsPresenterImpl implements ITaskExecutionsPresenter {
+    private readonly listPresenter;
+    private readonly listTasksUseCase;
+    private readonly deleteTaskUseCase;
+    private readonly abortTaskUseCase;
+    private readonly listDefinitionsUseCase;
+    private readonly permissions;
+    private _selectedTask;
+    private _definitionOptions;
+    constructor(listPresenter: ListPresenter.Interface<Task>, listTasksUseCase: ListTasksUseCase.Interface, deleteTaskUseCase: DeleteTaskUseCase.Interface, abortTaskUseCase: AbortTaskUseCase.Interface, listDefinitionsUseCase: ListDefinitionsUseCase.Interface, permissions: TaskPermissions.Interface);
+    get vm(): ITaskExecutionsViewModel;
+    get selectedTask(): Task | null;
+    search: {
+        set: (query: string) => void;
+        clear: () => void;
+    };
+    sort: {
+        set: (field: string, direction: "ASC" | "DESC") => void;
+        toggle: (field: string) => void;
+    };
+    filter: {
+        set: (key: string, value: unknown) => void;
+        clear: (key: string) => void;
+        clearAll: () => void;
+    };
+    selection: {
+        toggle: (id: string) => void;
+        selectRangeTo: (id: string) => void;
+        selectAll: () => void;
+        deselectAll: () => void;
+        selectRows: (ids: string[]) => void;
+        isSelected: (id: string) => boolean;
+    };
+    loadMore: () => Promise<void>;
+    refresh: () => Promise<void>;
+    deleteTask: (id: string) => Promise<void>;
+    abortTask: (id: string) => Promise<void>;
+    selectTask: (task: Task | null) => void;
+    init(): void;
+}
+export declare const TaskExecutionsPresenter: typeof TaskExecutionsPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<ITaskExecutionsPresenter>;
+};
+export {};

package/admin/presentation/TaskExecutions/TaskExecutionsPresenter.js

@@ -0,0 +1,107 @@
+import { computed, makeAutoObservable, runInAction } from "mobx";
+import { ListPresenter } from "@webiny/app-admin/presentation/listPresenter/abstractions.js";
+import { TaskExecutionsPresenter } from "./abstractions.js";
+import { TaskExecutionsDataSource } from "./TaskExecutionsDataSource.js";
+import { ListTasksUseCase } from "../../features/listTasks/abstractions.js";
+import { DeleteTaskUseCase } from "../../features/deleteTask/abstractions.js";
+import { AbortTaskUseCase } from "../../features/abortTask/abstractions.js";
+import { ListDefinitionsUseCase } from "../../features/listDefinitions/abstractions.js";
+import { TaskPermissions } from "../../features/permissions/abstractions.js";
+class TaskExecutionsPresenterImpl {
+    constructor(listPresenter, listTasksUseCase, deleteTaskUseCase, abortTaskUseCase, listDefinitionsUseCase, permissions){
+        this.listPresenter = listPresenter;
+        this.listTasksUseCase = listTasksUseCase;
+        this.deleteTaskUseCase = deleteTaskUseCase;
+        this.abortTaskUseCase = abortTaskUseCase;
+        this.listDefinitionsUseCase = listDefinitionsUseCase;
+        this.permissions = permissions;
+        this._selectedTask = null;
+        this._definitionOptions = [];
+        this.search = {
+            set: (query)=>this.listPresenter.actions.search.set(query),
+            clear: ()=>this.listPresenter.actions.search.clear()
+        };
+        this.sort = {
+            set: (field, direction)=>this.listPresenter.actions.sort.set(field, direction),
+            toggle: (field)=>this.listPresenter.actions.sort.toggle(field)
+        };
+        this.filter = {
+            set: (key, value)=>this.listPresenter.actions.filter.set(key, value),
+            clear: (key)=>this.listPresenter.actions.filter.clear(key),
+            clearAll: ()=>this.listPresenter.actions.filter.clearAll()
+        };
+        this.selection = {
+            toggle: (id)=>this.listPresenter.actions.selection.toggle(id),
+            selectRangeTo: (id)=>this.listPresenter.actions.selection.selectRangeTo(id),
+            selectAll: ()=>this.listPresenter.actions.selection.selectAll(),
+            deselectAll: ()=>this.listPresenter.actions.selection.deselectAll(),
+            selectRows: (ids)=>this.listPresenter.actions.selection.selectRows(ids),
+            isSelected: (id)=>this.listPresenter.actions.selection.isSelected(id)
+        };
+        this.loadMore = ()=>this.listPresenter.actions.loadMore();
+        this.refresh = ()=>this.listPresenter.actions.refresh();
+        this.deleteTask = async (id)=>{
+            await this.deleteTaskUseCase.execute(id);
+            this._selectedTask = null;
+            await this.listPresenter.actions.refresh();
+        };
+        this.abortTask = async (id)=>{
+            await this.abortTaskUseCase.execute({
+                id
+            });
+            await this.listPresenter.actions.refresh();
+        };
+        this.selectTask = (task)=>{
+            this._selectedTask = task;
+        };
+        makeAutoObservable(this, {
+            vm: computed
+        });
+    }
+    get vm() {
+        return {
+            list: this.listPresenter.vm,
+            definitionOptions: this._definitionOptions,
+            permissions: {
+                canRead: this.permissions.canRead("task"),
+                canDelete: this.permissions.canDelete("task")
+            }
+        };
+    }
+    get selectedTask() {
+        return this._selectedTask;
+    }
+    init() {
+        const dataSource = new TaskExecutionsDataSource(this.listTasksUseCase);
+        this.listPresenter.init({
+            dataSource,
+            initialSort: {
+                field: "createdOn",
+                direction: "DESC"
+            },
+            limit: 25
+        });
+        this.listDefinitionsUseCase.execute().then((definitions)=>{
+            runInAction(()=>{
+                this._definitionOptions = definitions.map((d)=>({
+                        label: d.title,
+                        value: d.id
+                    }));
+            });
+        }).catch(()=>{});
+    }
+}
+const TaskExecutionsPresenter_TaskExecutionsPresenter = TaskExecutionsPresenter.createImplementation({
+    implementation: TaskExecutionsPresenterImpl,
+    dependencies: [
+        ListPresenter,
+        ListTasksUseCase,
+        DeleteTaskUseCase,
+        AbortTaskUseCase,
+        ListDefinitionsUseCase,
+        TaskPermissions
+    ]
+});
+export { TaskExecutionsPresenter_TaskExecutionsPresenter as TaskExecutionsPresenter };
+
+//# sourceMappingURL=TaskExecutionsPresenter.js.map