@alepha/ui 0.16.2 → 0.17.1

package/dist/admin/AdminJobExecutions-D-b4Zt7W.js

@@ -0,0 +1,678 @@
+import { ActionButton, DataTable, Text, useDialog, useToast } from "@alepha/ui";
+import { t } from "alepha";
+import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconClock, IconPlayerPlay, IconRefresh } from "@tabler/icons-react";
+import { Badge, Code, Flex as Flex$1, Paper, Table } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useCallback, useEffect, useState } from "react";
+
+//#region ../../src/admin/components/jobs/AdminJobExecutions.tsx
+const PRIORITY_LABELS = {
+	0: "Critical",
+	1: "High",
+	2: "Normal",
+	3: "Low"
+};
+const formatDuration = (start, end) => {
+	const startTime = new Date(start).getTime();
+	const duration = (end ? new Date(end).getTime() : Date.now()) - startTime;
+	if (duration < 1e3) return `${duration}ms`;
+	if (duration < 6e4) return `${(duration / 1e3).toFixed(1)}s`;
+	if (duration < 36e5) return `${Math.floor(duration / 6e4)}m ${Math.floor(duration % 6e4 / 1e3)}s`;
+	return `${Math.floor(duration / 36e5)}h ${Math.floor(duration % 36e5 / 6e4)}m`;
+};
+const getStatusColor = (status) => {
+	switch (status) {
+		case "completed": return "teal";
+		case "running": return "blue";
+		case "failed":
+		case "dead": return "red";
+		case "cancelled": return "orange";
+		case "scheduled": return "violet";
+		case "retrying": return "yellow";
+		case "pending": return "gray";
+		default: return "gray";
+	}
+};
+const getStatusIcon = (status, size = 14) => {
+	switch (status) {
+		case "completed": return /* @__PURE__ */ jsx(IconCircleCheck, { size });
+		case "failed":
+		case "dead": return /* @__PURE__ */ jsx(IconCircleX, { size });
+		case "running": return /* @__PURE__ */ jsx(IconPlayerPlay, { size });
+		case "cancelled": return /* @__PURE__ */ jsx(IconAlertTriangle, { size });
+		default: return /* @__PURE__ */ jsx(IconClock, { size });
+	}
+};
+const getLogLevelColor = (level) => {
+	switch (level) {
+		case "ERROR": return "red";
+		case "WARN": return "orange";
+		case "INFO": return "blue";
+		case "DEBUG": return "gray";
+		case "TRACE": return "dimmed";
+		default: return "gray";
+	}
+};
+const executionFilters = t.object({
+	job: t.optional(t.string()),
+	status: t.optional(t.enum([
+		"pending",
+		"scheduled",
+		"retrying",
+		"running",
+		"completed",
+		"failed",
+		"dead",
+		"cancelled"
+	])),
+	priority: t.optional(t.enum([
+		"critical",
+		"high",
+		"normal",
+		"low"
+	]))
+});
+const AdminJobExecutions = () => {
+	const client = useClient();
+	const { l } = useI18n();
+	const toast = useToast();
+	const dialog = useDialog();
+	const [refreshKey, setRefreshKey] = useState(0);
+	const handleRetry = useCallback(async (id) => {
+		try {
+			await client.retryExecution({ params: { id } });
+			toast.success("Execution retried");
+			setRefreshKey((k) => k + 1);
+		} catch {
+			toast.danger("Failed to retry execution");
+		}
+	}, [client, toast]);
+	const handleCancel = useCallback(async (id) => {
+		if (!await dialog.confirm({
+			title: "Cancel Execution",
+			message: "Are you sure you want to cancel this execution?",
+			confirmLabel: "Cancel",
+			confirmColor: "red"
+		})) return;
+		try {
+			await client.cancelExecution({ params: { id } });
+			toast.success("Execution cancelled");
+			setRefreshKey((k) => k + 1);
+		} catch {
+			toast.danger("Failed to cancel execution");
+		}
+	}, [
+		client,
+		dialog,
+		toast
+	]);
+	return /* @__PURE__ */ jsx(Flex$1, {
+		flex: 1,
+		direction: "column",
+		gap: "md",
+		children: /* @__PURE__ */ jsx(DataTable, {
+			submitOnInit: true,
+			defaultSize: 20,
+			typeFormProps: {
+				skipSubmitButton: true,
+				columns: 3
+			},
+			tableProps: {
+				horizontalSpacing: "sm",
+				verticalSpacing: "sm",
+				highlightOnHover: true
+			},
+			onFilterChange: (key, _value, form) => {
+				if (key === "job" || key === "status" || key === "priority") return form.submit();
+			},
+			filters: executionFilters,
+			defaultFilters: ["job", "status"],
+			items: async (filters) => {
+				return await client.findExecutions({ query: { ...filters } });
+			},
+			columns: {
+				status: {
+					label: "Status",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						variant: "light",
+						color: getStatusColor(item.status),
+						leftSection: getStatusIcon(item.status, 12),
+						children: item.status
+					})
+				},
+				jobName: {
+					label: "Job",
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 500,
+						ff: "monospace",
+						children: item.jobName
+					})
+				},
+				priority: {
+					label: "Priority",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: PRIORITY_LABELS[item.priority] ?? item.priority
+					})
+				},
+				attempt: {
+					label: "Attempt",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsxs(Text, {
+						size: "sm",
+						ff: "monospace",
+						children: [
+							item.attempt,
+							"/",
+							item.maxAttempts
+						]
+					})
+				},
+				triggeredByName: {
+					label: "Trigger",
+					fit: true,
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: item.triggeredByName ?? "—"
+					})
+				},
+				createdAt: {
+					label: "Created",
+					fit: true,
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: l(item.createdAt, { date: "fromNow" })
+					})
+				},
+				startedAt: {
+					label: "Started",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: item.startedAt ? l(item.startedAt, { date: "fromNow" }) : "—"
+					})
+				},
+				duration: {
+					label: "Duration",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						ff: "monospace",
+						children: item.startedAt && (item.completedAt || item.status === "running") ? formatDuration(item.startedAt, item.completedAt) : "—"
+					})
+				},
+				error: {
+					label: "Error",
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "red",
+						lineClamp: 1,
+						children: item.error ?? "—"
+					})
+				},
+				key: {
+					label: "Key",
+					fit: true,
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						ff: "monospace",
+						children: item.key ?? "—"
+					})
+				},
+				workerId: {
+					label: "Worker",
+					fit: true,
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						ff: "monospace",
+						children: item.workerId ?? "—"
+					})
+				},
+				actions: {
+					label: "",
+					fit: true,
+					actions: (item) => [{
+						tooltip: "Retry",
+						color: "blue",
+						icon: IconRefresh,
+						onClick: () => handleRetry(item.id),
+						visible: item.can?.retry
+					}, {
+						tooltip: "Cancel",
+						color: "red",
+						icon: IconCircleX,
+						onClick: () => handleCancel(item.id),
+						visible: item.can?.cancel
+					}]
+				}
+			},
+			panel: {
+				can: (item) => Boolean(item.error || item.key || item.workerId),
+				render: (item) => /* @__PURE__ */ jsxs(Flex$1, {
+					direction: "column",
+					gap: "sm",
+					p: "sm",
+					children: [item.error && /* @__PURE__ */ jsxs(Flex$1, {
+						direction: "column",
+						gap: 2,
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							tt: "uppercase",
+							fw: 600,
+							children: "Error"
+						}), /* @__PURE__ */ jsx(Paper, {
+							p: "xs",
+							bg: "var(--mantine-color-red-light)",
+							radius: "sm",
+							children: /* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								c: "red",
+								style: {
+									whiteSpace: "pre-wrap",
+									wordBreak: "break-word"
+								},
+								children: item.error
+							})
+						})]
+					}), /* @__PURE__ */ jsxs(Flex$1, {
+						gap: "lg",
+						wrap: "wrap",
+						children: [
+							/* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "ID"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									ff: "monospace",
+									children: item.id
+								})]
+							}),
+							item.key && /* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Key"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									ff: "monospace",
+									children: item.key
+								})]
+							}),
+							item.workerId && /* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Worker"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									ff: "monospace",
+									children: item.workerId
+								})]
+							}),
+							item.triggeredByName && /* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Triggered By"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									children: item.triggeredByName
+								})]
+							})
+						]
+					})]
+				})
+			},
+			drawer: (item) => /* @__PURE__ */ jsx(ExecutionDetailContent, {
+				item,
+				onRetry: handleRetry,
+				onCancel: handleCancel
+			})
+		}, `executions-${refreshKey}`)
+	});
+};
+const ExecutionDetailContent = ({ item, onRetry, onCancel }) => {
+	const client = useClient();
+	const { l } = useI18n();
+	const toast = useToast();
+	const [detail, setDetail] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [expandedLogs, setExpandedLogs] = useState(/* @__PURE__ */ new Set());
+	const loadDetail = useCallback(async (execId) => {
+		setDetail(null);
+		setExpandedLogs(/* @__PURE__ */ new Set());
+		setLoading(true);
+		try {
+			setDetail(await client.getExecution({ params: { id: execId } }));
+		} catch {
+			toast.danger("Failed to load execution details");
+		} finally {
+			setLoading(false);
+		}
+	}, [client, toast]);
+	useEffect(() => {
+		loadDetail(item.id);
+	}, [item.id, loadDetail]);
+	const handleRetry = useCallback(async () => {
+		await onRetry(item.id);
+		loadDetail(item.id);
+	}, [
+		item.id,
+		onRetry,
+		loadDetail
+	]);
+	const handleCancel = useCallback(async () => {
+		await onCancel(item.id);
+		loadDetail(item.id);
+	}, [
+		item.id,
+		onCancel,
+		loadDetail
+	]);
+	const toggleLogExpand = useCallback((index) => {
+		setExpandedLogs((prev) => {
+			const next = new Set(prev);
+			if (next.has(index)) next.delete(index);
+			else next.add(index);
+			return next;
+		});
+	}, []);
+	if (loading) return /* @__PURE__ */ jsx(Flex$1, {
+		align: "center",
+		justify: "center",
+		py: "xl",
+		children: /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			children: "Loading..."
+		})
+	});
+	if (!detail) return null;
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "md",
+		children: [
+			/* @__PURE__ */ jsxs(Flex$1, {
+				align: "center",
+				gap: "sm",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						fw: 600,
+						ff: "monospace",
+						children: detail.jobName
+					}),
+					/* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						variant: "light",
+						color: getStatusColor(detail.status),
+						leftSection: getStatusIcon(detail.status, 12),
+						children: detail.status
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: [
+							detail.attempt,
+							"/",
+							detail.maxAttempts
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				gap: "xs",
+				children: [
+					/* @__PURE__ */ jsx(ActionButton, {
+						tooltip: "Refresh",
+						variant: "light",
+						size: "xs",
+						icon: IconRefresh,
+						onClick: () => loadDetail(item.id)
+					}),
+					detail.can?.retry && /* @__PURE__ */ jsx(ActionButton, {
+						tooltip: "Retry",
+						variant: "light",
+						size: "xs",
+						color: "blue",
+						icon: IconRefresh,
+						onClick: handleRetry
+					}),
+					detail.can?.cancel && /* @__PURE__ */ jsx(ActionButton, {
+						tooltip: "Cancel",
+						variant: "light",
+						size: "xs",
+						color: "red",
+						icon: IconCircleX,
+						onClick: handleCancel
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: "Details"
+				}), /* @__PURE__ */ jsxs(Flex$1, {
+					gap: "lg",
+					wrap: "wrap",
+					children: [
+						/* @__PURE__ */ jsx(DetailField, {
+							label: "ID",
+							value: detail.id,
+							monospace: true,
+							copyable: true
+						}),
+						/* @__PURE__ */ jsx(DetailField, {
+							label: "Status",
+							value: detail.status,
+							capitalize: true
+						}),
+						/* @__PURE__ */ jsx(DetailField, {
+							label: "Priority",
+							value: PRIORITY_LABELS[detail.priority] ?? "Normal"
+						}),
+						/* @__PURE__ */ jsx(DetailField, {
+							label: "Attempt",
+							value: `${detail.attempt}/${detail.maxAttempts}`,
+							monospace: true
+						}),
+						detail.workerId && /* @__PURE__ */ jsx(DetailField, {
+							label: "Worker",
+							value: detail.workerId,
+							monospace: true
+						}),
+						detail.key && /* @__PURE__ */ jsx(DetailField, {
+							label: "Key",
+							value: detail.key,
+							monospace: true
+						}),
+						/* @__PURE__ */ jsx(DetailField, {
+							label: "Created",
+							value: String(l(detail.createdAt, { date: "lll" }))
+						}),
+						detail.startedAt && /* @__PURE__ */ jsx(DetailField, {
+							label: "Started",
+							value: String(l(detail.startedAt, { date: "lll" }))
+						}),
+						detail.startedAt && (detail.completedAt || detail.status === "running") && /* @__PURE__ */ jsx(DetailField, {
+							label: "Duration",
+							value: formatDuration(detail.startedAt, detail.completedAt),
+							monospace: true
+						}),
+						detail.triggeredByName && /* @__PURE__ */ jsx(DetailField, {
+							label: "Triggered By",
+							value: detail.triggeredByName
+						}),
+						detail.cancelledByName && /* @__PURE__ */ jsx(DetailField, {
+							label: "Cancelled By",
+							value: detail.cancelledByName
+						})
+					]
+				})]
+			}),
+			detail.payload && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: "Payload"
+				}), /* @__PURE__ */ jsx(Code, {
+					block: true,
+					children: JSON.stringify(detail.payload, null, 2)
+				})]
+			}),
+			detail.error && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					c: "red",
+					children: "Error"
+				}), /* @__PURE__ */ jsx(Paper, {
+					p: "xs",
+					bg: "var(--mantine-color-red-light)",
+					radius: "sm",
+					children: /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "red",
+						style: {
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-word"
+						},
+						children: detail.error
+					})
+				})]
+			}),
+			detail.logs && detail.logs.length > 0 && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsxs(Text, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: [
+						"Logs (",
+						detail.logs.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					direction: "column",
+					style: {
+						maxHeight: 400,
+						overflowY: "auto"
+					},
+					children: /* @__PURE__ */ jsxs(Table, {
+						highlightOnHover: true,
+						children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+							/* @__PURE__ */ jsx(Table.Th, {
+								style: { width: 60 },
+								children: "Level"
+							}),
+							/* @__PURE__ */ jsx(Table.Th, {
+								style: { width: 90 },
+								children: "Time"
+							}),
+							/* @__PURE__ */ jsx(Table.Th, { children: "Message" })
+						] }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: detail.logs.map((log, i) => /* @__PURE__ */ jsxs(Table.Tr, {
+							style: log.data ? { cursor: "pointer" } : void 0,
+							onClick: log.data ? () => toggleLogExpand(i) : void 0,
+							children: [
+								/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, {
+									size: "xs",
+									variant: "light",
+									color: getLogLevelColor(log.level),
+									children: log.level
+								}) }),
+								/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									ff: "monospace",
+									children: new Date(log.timestamp).toLocaleTimeString()
+								}) }),
+								/* @__PURE__ */ jsxs(Table.Td, { children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									children: log.message
+								}), expandedLogs.has(i) && log.data && /* @__PURE__ */ jsx(Code, {
+									block: true,
+									mt: "xs",
+									children: JSON.stringify(log.data, null, 2)
+								})] })
+							]
+						}, i)) })]
+					})
+				})]
+			})
+		]
+	});
+};
+const DetailField = ({ label, value, monospace, capitalize, copyable }) => /* @__PURE__ */ jsxs(Flex$1, {
+	direction: "column",
+	gap: 2,
+	children: [/* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		c: "dimmed",
+		tt: "uppercase",
+		fw: 600,
+		children: label
+	}), /* @__PURE__ */ jsx(Text, {
+		size: "sm",
+		ff: monospace ? "monospace" : void 0,
+		tt: capitalize ? "capitalize" : void 0,
+		style: copyable ? {
+			cursor: "pointer",
+			userSelect: "all"
+		} : void 0,
+		children: value
+	})]
+});
+
+//#endregion
+export { AdminJobExecutions as default };
+//# sourceMappingURL=AdminJobExecutions-D-b4Zt7W.js.map