@alepha/ui 0.15.4 → 0.15.5

package/dist/admin/AdminJobs-B-q9iGO3.js

@@ -0,0 +1,697 @@
+import { ActionButton, DataTable, Flex, Text, useDialog, useToast } from "@alepha/ui";
+import { t } from "alepha";
+import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconClock, IconPlayerPlay, IconRefresh, IconTerminal2 } from "@tabler/icons-react";
+import { ActionIcon, Badge, Box, Card, Group, Paper, Progress, RingProgress, ScrollArea, SimpleGrid, Skeleton, Stack, Tabs, ThemeIcon, Tooltip, useMantineTheme } from "@mantine/core";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jobExecutions } from "alepha/api/jobs";
+import { useCallback, useEffect, useState } from "react";
+
+//#region ../../src/admin/components/jobs/AdminJobs.tsx
+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 "FAILED": return "red";
+		case "STARTED": return "blue";
+		default: return "gray";
+	}
+};
+const getStatusIcon = (status, size = 14) => {
+	switch (status) {
+		case "COMPLETED": return /* @__PURE__ */ jsx(IconCircleCheck, { size });
+		case "FAILED": return /* @__PURE__ */ jsx(IconCircleX, { size });
+		case "STARTED": return /* @__PURE__ */ jsx(IconPlayerPlay, { size });
+		default: return /* @__PURE__ */ jsx(IconClock, { size });
+	}
+};
+const getLogLevelColor = (level) => {
+	switch (level) {
+		case "ERROR": return "red";
+		case "WARN": return "yellow";
+		case "INFO": return "blue";
+		case "DEBUG": return "gray";
+		case "TRACE": return "dimmed";
+		default: return "dimmed";
+	}
+};
+const JobCard = (props) => {
+	const { job, stats, isTriggering, onTrigger, onSelect, isSelected } = props;
+	const theme = useMantineTheme();
+	stats && stats.total > 0 && stats.completed / stats.total * 100;
+	return /* @__PURE__ */ jsxs(Card, {
+		p: "md",
+		radius: "md",
+		withBorder: true,
+		onClick: () => onSelect(job),
+		style: {
+			cursor: "pointer",
+			borderColor: isSelected ? theme.colors.blue[6] : void 0,
+			backgroundColor: isSelected ? "var(--mantine-color-blue-light)" : void 0,
+			transition: "all 150ms ease"
+		},
+		children: [/* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			mb: "xs",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(ThemeIcon, {
+					size: "sm",
+					radius: "sm",
+					variant: "light",
+					color: stats?.lastStatus ? getStatusColor(stats.lastStatus) : "gray",
+					children: /* @__PURE__ */ jsx(IconTerminal2, { size: 14 })
+				}), /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 600,
+					ff: "monospace",
+					children: job
+				})]
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				label: "Trigger job manually",
+				position: "left",
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "sm",
+					variant: "light",
+					color: "blue",
+					loading: isTriggering,
+					onClick: (e) => {
+						e.stopPropagation();
+						onTrigger(job);
+					},
+					children: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 12 })
+				})
+			})]
+		}), stats ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs(Group, {
+				gap: "lg",
+				mb: "xs",
+				children: [
+					/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: 500,
+						children: "Total"
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "lg",
+						fw: 700,
+						ff: "monospace",
+						children: stats.total
+					})] }),
+					/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: 500,
+						children: "Success"
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "lg",
+						fw: 700,
+						ff: "monospace",
+						c: "teal",
+						children: stats.completed
+					})] }),
+					/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: 500,
+						children: "Failed"
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "lg",
+						fw: 700,
+						ff: "monospace",
+						c: "red",
+						children: stats.failed
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsxs(Progress.Root, {
+				size: "sm",
+				radius: "xs",
+				children: [
+					/* @__PURE__ */ jsx(Tooltip, {
+						label: `${stats.completed} completed`,
+						children: /* @__PURE__ */ jsx(Progress.Section, {
+							value: stats.completed / Math.max(stats.total, 1) * 100,
+							color: "teal"
+						})
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						label: `${stats.failed} failed`,
+						children: /* @__PURE__ */ jsx(Progress.Section, {
+							value: stats.failed / Math.max(stats.total, 1) * 100,
+							color: "red"
+						})
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						label: `${stats.running} running`,
+						children: /* @__PURE__ */ jsx(Progress.Section, {
+							value: stats.running / Math.max(stats.total, 1) * 100,
+							color: "blue"
+						})
+					})
+				]
+			}),
+			stats.lastRun && /* @__PURE__ */ jsxs(Text, {
+				size: "xs",
+				c: "dimmed",
+				mt: "xs",
+				children: [
+					"Last run: ",
+					formatDuration(stats.lastRun, /* @__PURE__ */ new Date()),
+					" ago"
+				]
+			})
+		] }) : /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				height: 8,
+				radius: "xl"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				height: 8,
+				width: "70%",
+				radius: "xl"
+			})]
+		})]
+	});
+};
+const ExecutionLogViewer = (props) => {
+	const { logs, error } = props;
+	if (!logs?.length && !error) return /* @__PURE__ */ jsx(Box, {
+		p: "md",
+		children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			c: "dimmed",
+			ta: "center",
+			children: "No logs available"
+		})
+	});
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		h: 300,
+		type: "auto",
+		children: /* @__PURE__ */ jsxs(Box, {
+			p: "md",
+			style: {
+				fontFamily: "var(--mantine-font-family-monospace)",
+				fontSize: "12px",
+				lineHeight: 1.6
+			},
+			children: [error && /* @__PURE__ */ jsx(Paper, {
+				p: "sm",
+				mb: "md",
+				bg: "var(--mantine-color-red-light)",
+				radius: "sm",
+				children: /* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					align: "flex-start",
+					children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+						size: 14,
+						color: "var(--mantine-color-red-filled)"
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "red",
+						style: {
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-word"
+						},
+						children: error
+					})]
+				})
+			}), logs?.map((log, index) => /* @__PURE__ */ jsxs(Group, {
+				gap: "sm",
+				align: "flex-start",
+				mb: 4,
+				wrap: "nowrap",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						style: {
+							minWidth: 80,
+							flexShrink: 0
+						},
+						children: new Date(log.timestamp).toLocaleTimeString()
+					}),
+					/* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: "light",
+						color: getLogLevelColor(log.level),
+						style: { minWidth: 50 },
+						children: log.level
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						style: {
+							minWidth: 100,
+							flexShrink: 0
+						},
+						children: log.module
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						style: { wordBreak: "break-word" },
+						children: log.message
+					})
+				]
+			}, index))]
+		})
+	});
+};
+const AdminJobs = () => {
+	const client = useClient();
+	const { l } = useI18n();
+	const toast = useToast();
+	const dialog = useDialog();
+	const [jobs, setJobs] = useState([]);
+	const [jobStats, setJobStats] = useState(/* @__PURE__ */ new Map());
+	const [selectedJob, setSelectedJob] = useState(null);
+	const [triggeringJobs, setTriggeringJobs] = useState(/* @__PURE__ */ new Set());
+	const [refreshKey, setRefreshKey] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [activeTab, setActiveTab] = useState("overview");
+	useEffect(() => {
+		const loadJobs = async () => {
+			try {
+				const jobList = await client.getJobs();
+				setJobs(jobList);
+				const statsMap = /* @__PURE__ */ new Map();
+				for (const job of jobList) {
+					const items = (await client.getJobExecutions({ query: {
+						job,
+						size: 100
+					} })).content || [];
+					const completed = items.filter((e) => e.status === "COMPLETED").length;
+					const failed = items.filter((e) => e.status === "FAILED").length;
+					const running = items.filter((e) => e.status === "STARTED").length;
+					const completedItems = items.filter((e) => e.status === "COMPLETED" && e.finishedAt);
+					const avgDuration = completedItems.length > 0 ? completedItems.reduce((acc, e) => {
+						return acc + (new Date(e.finishedAt).getTime() - new Date(e.createdAt).getTime());
+					}, 0) / completedItems.length : 0;
+					const lastItem = items[0];
+					statsMap.set(job, {
+						name: job,
+						total: items.length,
+						completed,
+						failed,
+						running,
+						avgDuration,
+						lastRun: lastItem?.createdAt ? new Date(lastItem.createdAt) : void 0,
+						lastStatus: lastItem?.status
+					});
+				}
+				setJobStats(statsMap);
+			} catch (error) {
+				toast.danger("Failed to load jobs");
+			} finally {
+				setLoading(false);
+			}
+		};
+		loadJobs();
+	}, [refreshKey]);
+	const handleTriggerJob = useCallback(async (job) => {
+		if (!await dialog.confirm({
+			title: "Trigger Job",
+			message: `Are you sure you want to trigger "${job}" manually?`,
+			confirmLabel: "Trigger",
+			confirmColor: "blue"
+		})) return;
+		setTriggeringJobs((prev) => new Set(prev).add(job));
+		try {
+			await client.triggerJob({ body: { name: job } });
+			toast.success(`Job "${job}" triggered successfully`);
+			setRefreshKey((k) => k + 1);
+		} catch (error) {
+			toast.danger(`Failed to trigger job "${job}"`);
+		} finally {
+			setTriggeringJobs((prev) => {
+				const next = new Set(prev);
+				next.delete(job);
+				return next;
+			});
+		}
+	}, [
+		client,
+		dialog,
+		toast
+	]);
+	const filters = t.object({
+		job: t.optional(t.string({ $control: { query: t.pick(jobExecutions.schema, ["job"]) } })),
+		status: t.optional(t.enum([
+			"STARTED",
+			"FAILED",
+			"COMPLETED"
+		]))
+	});
+	const globalStats = {
+		total: Array.from(jobStats.values()).reduce((acc, s) => acc + s.total, 0),
+		completed: Array.from(jobStats.values()).reduce((acc, s) => acc + s.completed, 0),
+		failed: Array.from(jobStats.values()).reduce((acc, s) => acc + s.failed, 0),
+		running: Array.from(jobStats.values()).reduce((acc, s) => acc + s.running, 0)
+	};
+	const successRate = globalStats.total > 0 ? Math.round(globalStats.completed / globalStats.total * 100) : 0;
+	return /* @__PURE__ */ jsxs(Flex, {
+		flex: 1,
+		direction: "column",
+		gap: "md",
+		children: [/* @__PURE__ */ jsxs(SimpleGrid, {
+			cols: {
+				base: 2,
+				sm: 4
+			},
+			spacing: "md",
+			children: [
+				/* @__PURE__ */ jsx(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: /* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							tt: "uppercase",
+							fw: 600,
+							children: "Total Jobs"
+						}), /* @__PURE__ */ jsx(Text, {
+							size: "xl",
+							fw: 700,
+							ff: "monospace",
+							children: jobs.length
+						})] }), /* @__PURE__ */ jsx(ThemeIcon, {
+							size: "lg",
+							radius: "md",
+							variant: "light",
+							color: "blue",
+							children: /* @__PURE__ */ jsx(IconTerminal2, { size: 20 })
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: /* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							tt: "uppercase",
+							fw: 600,
+							children: "Executions"
+						}), /* @__PURE__ */ jsx(Text, {
+							size: "xl",
+							fw: 700,
+							ff: "monospace",
+							children: globalStats.total
+						})] }), /* @__PURE__ */ jsx(ThemeIcon, {
+							size: "lg",
+							radius: "md",
+							variant: "light",
+							color: "gray",
+							children: /* @__PURE__ */ jsx(IconClock, { size: 20 })
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: /* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							tt: "uppercase",
+							fw: 600,
+							children: "Success Rate"
+						}), /* @__PURE__ */ jsxs(Text, {
+							size: "xl",
+							fw: 700,
+							ff: "monospace",
+							c: successRate >= 90 ? "teal" : successRate >= 70 ? "yellow" : "red",
+							children: [successRate, "%"]
+						})] }), /* @__PURE__ */ jsx(RingProgress, {
+							size: 48,
+							thickness: 4,
+							roundCaps: true,
+							sections: [{
+								value: successRate,
+								color: successRate >= 90 ? "teal" : successRate >= 70 ? "yellow" : "red"
+							}]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: /* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							tt: "uppercase",
+							fw: 600,
+							children: "Running Now"
+						}), /* @__PURE__ */ jsx(Text, {
+							size: "xl",
+							fw: 700,
+							ff: "monospace",
+							c: "blue",
+							children: globalStats.running
+						})] }), /* @__PURE__ */ jsx(ThemeIcon, {
+							size: "lg",
+							radius: "md",
+							variant: "light",
+							color: globalStats.running > 0 ? "blue" : "gray",
+							children: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 20 })
+						})]
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Tabs, {
+			value: activeTab,
+			onChange: setActiveTab,
+			children: [
+				/* @__PURE__ */ jsxs(Tabs.List, { children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+					value: "overview",
+					leftSection: /* @__PURE__ */ jsx(IconTerminal2, { size: 14 }),
+					children: "Jobs Overview"
+				}), /* @__PURE__ */ jsx(Tabs.Tab, {
+					value: "executions",
+					leftSection: /* @__PURE__ */ jsx(IconClock, { size: 14 }),
+					children: "Execution History"
+				})] }),
+				/* @__PURE__ */ jsxs(Tabs.Panel, {
+					value: "overview",
+					pt: "md",
+					children: [/* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						mb: "md",
+						children: [/* @__PURE__ */ jsxs(Text, {
+							size: "sm",
+							c: "dimmed",
+							children: [
+								jobs.length,
+								" registered job",
+								jobs.length !== 1 ? "s" : ""
+							]
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							size: "xs",
+							variant: "light",
+							leftSection: /* @__PURE__ */ jsx(IconRefresh, { size: 14 }),
+							onClick: () => setRefreshKey((k) => k + 1),
+							children: "Refresh"
+						})]
+					}), loading ? /* @__PURE__ */ jsx(SimpleGrid, {
+						cols: {
+							base: 1,
+							sm: 2,
+							lg: 3
+						},
+						spacing: "md",
+						children: [
+							1,
+							2,
+							3
+						].map((i) => /* @__PURE__ */ jsx(Skeleton, {
+							height: 150,
+							radius: "md"
+						}, i))
+					}) : jobs.length === 0 ? /* @__PURE__ */ jsxs(Paper, {
+						p: "xl",
+						radius: "md",
+						withBorder: true,
+						ta: "center",
+						children: [
+							/* @__PURE__ */ jsx(IconTerminal2, {
+								size: 48,
+								color: "var(--mantine-color-dimmed)"
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								size: "lg",
+								fw: 500,
+								mt: "md",
+								children: "No jobs registered"
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								c: "dimmed",
+								mt: "xs",
+								children: "Jobs will appear here once they are defined using $job primitive"
+							})
+						]
+					}) : /* @__PURE__ */ jsx(SimpleGrid, {
+						cols: {
+							base: 1,
+							sm: 2,
+							lg: 3
+						},
+						spacing: "md",
+						children: jobs.map((job) => /* @__PURE__ */ jsx(JobCard, {
+							job,
+							stats: jobStats.get(job),
+							isTriggering: triggeringJobs.has(job),
+							onTrigger: handleTriggerJob,
+							onSelect: setSelectedJob,
+							isSelected: selectedJob === job
+						}, job))
+					})]
+				}),
+				/* @__PURE__ */ jsx(Tabs.Panel, {
+					value: "executions",
+					pt: "md",
+					children: /* @__PURE__ */ jsx(DataTable, {
+						submitOnInit: true,
+						defaultSize: 15,
+						typeFormProps: {
+							skipSubmitButton: true,
+							columns: 3
+						},
+						tableProps: {
+							horizontalSpacing: "sm",
+							verticalSpacing: "sm",
+							highlightOnHover: true
+						},
+						onFilterChange: (key, _value, form) => {
+							if (key === "job" || key === "status") return form.submit();
+						},
+						filters,
+						items: async (filters) => {
+							return await client.getJobExecutions({ query: {
+								...filters,
+								job: selectedJob || filters.job
+							} });
+						},
+						columns: {
+							job: {
+								label: "Job",
+								value: (item) => /* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									fw: 500,
+									ff: "monospace",
+									children: item.job
+								})
+							},
+							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
+								})
+							},
+							duration: {
+								label: "Duration",
+								fit: true,
+								value: (item) => /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									ff: "monospace",
+									children: formatDuration(item.createdAt, item.finishedAt)
+								})
+							},
+							logs: {
+								label: "Logs",
+								fit: true,
+								value: (item) => {
+									const logCount = item.logs?.length || 0;
+									const errorCount = item.logs?.filter((log) => log.level === "ERROR").length || 0;
+									return /* @__PURE__ */ jsxs(Group, {
+										gap: 4,
+										children: [/* @__PURE__ */ jsxs(Badge, {
+											size: "xs",
+											variant: "light",
+											color: "gray",
+											children: [logCount, " logs"]
+										}), errorCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+											size: "xs",
+											variant: "light",
+											color: "red",
+											children: [errorCount, " errors"]
+										})]
+									});
+								}
+							},
+							error: {
+								label: "Error",
+								value: (item) => item.error ? /* @__PURE__ */ jsx(Tooltip, {
+									label: item.error,
+									multiline: true,
+									w: 300,
+									children: /* @__PURE__ */ jsx(Text, {
+										size: "xs",
+										c: "red",
+										lineClamp: 1,
+										children: item.error
+									})
+								}) : /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									children: "—"
+								})
+							},
+							createdAt: {
+								label: "Started",
+								fit: true,
+								value: (item) => /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									children: l(item.createdAt, { date: "fromNow" })
+								})
+							}
+						},
+						panel: (item) => /* @__PURE__ */ jsx(Box, {
+							bg: "var(--mantine-color-dark-7)",
+							p: 0,
+							children: /* @__PURE__ */ jsx(ExecutionLogViewer, {
+								logs: item.logs,
+								error: item.error
+							})
+						}),
+						canPanel: (item) => Boolean(item.logs?.length || item.error)
+					}, refreshKey)
+				})
+			]
+		})]
+	});
+};
+var AdminJobs_default = AdminJobs;
+
+//#endregion
+export { AdminJobs_default as t };
+//# sourceMappingURL=AdminJobs-B-q9iGO3.js.map