@alepha/ui 0.16.1 → 0.17.0

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

@@ -1,697 +0,0 @@
-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