@alepha/ui 0.18.3 → 0.19.1

package/src/admin/components/jobs/{AdminJobExecutions.tsx → AdminJobs.tsx}

@@ -4,17 +4,27 @@ import {
   DataTable,
   DetailList,
   Flex,
+  Section,
   Text,
   useDialog,
   useToast,
 } from "@alepha/ui";
-import { Badge, Code, Paper, Table } from "@mantine/core";
-import { IconCircleX, IconRefresh } from "@tabler/icons-react";
+import { Badge, Code, Table } from "@mantine/core";
+import {
+  IconCircleCheck,
+  IconCircleX,
+  IconPlayerPlay,
+  IconRefresh,
+} from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import type {
   AdminJobController,
+  JobCronInfo,
   JobExecutionDetailResource,
   JobExecutionResource,
+  JobFailure,
+  JobQueueDepth,
+  JobRegistration,
 } from "alepha/api/jobs";
 import type { LogEntry } from "alepha/logger";
 import { useClient } from "alepha/react";
@@ -47,293 +57,14 @@ const formatDuration = (
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-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 registryFilters = t.object({
+  type: t.optional(t.enum(["cron", "push", "both"])),
 });
 
-// ─────────────────────────────────────────────────────────────────────────────
-
-const AdminJobExecutions = () => {
-  const client = useClient<AdminJobController>();
-  const { l } = useI18n();
-  const toast = useToast();
-  const dialog = useDialog();
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  const handleRetry = useCallback(
-    async (id: string) => {
-      try {
-        await client.retryJobExecution({ params: { id } });
-        toast.success("Execution retried");
-        setRefreshKey((k) => k + 1);
-      } catch {
-        toast.danger("Failed to retry execution");
-      }
-    },
-    [client, toast],
-  );
-
-  const handleCancel = useCallback(
-    async (id: string) => {
-      const confirmed = await dialog.confirm({
-        title: "Cancel Execution",
-        message: "Are you sure you want to cancel this execution?",
-        confirmLabel: "Cancel",
-        confirmColor: "red",
-      });
-
-      if (!confirmed) return;
-
-      try {
-        await client.cancelJobExecution({ params: { id } });
-        toast.success("Execution cancelled");
-        setRefreshKey((k) => k + 1);
-      } catch {
-        toast.danger("Failed to cancel execution");
-      }
-    },
-    [client, dialog, toast],
-  );
-
-  return (
-    <Flex p="md" flex={1} direction="column" gap="md">
-      <DataTable<JobExecutionResource, typeof executionFilters>
-        key={`executions-${refreshKey}`}
-        submitOnInit
-        defaultSize={20}
-        typeFormProps={{
-          skipSubmitButton: true,
-          columns: 3,
-        }}
-        tableProps={{
-          horizontalSpacing: "sm",
-          verticalSpacing: "sm",
-        }}
-        onFilterChange={(_key, _value, form) => form.submit()}
-        filters={executionFilters}
-        defaultFilters={["job", "status"]}
-        items={async (filters) => {
-          const response = await client.findJobExecutions({
-            query: {
-              ...filters,
-            },
-          });
-          return response as Page<JobExecutionResource>;
-        }}
-        columns={{
-          status: {
-            label: "Status",
-            value: (item) => {
-              const color =
-                item.status === "completed"
-                  ? "green"
-                  : item.status === "running"
-                    ? "blue"
-                    : item.status === "failed" || item.status === "dead"
-                      ? "red"
-                      : item.status === "cancelled"
-                        ? "yellow"
-                        : "gray";
-              return (
-                <Badge size="sm" variant="light" color={color}>
-                  {item.status}
-                </Badge>
-              );
-            },
-          },
-          jobName: {
-            label: "Job",
-            value: (item) => (
-              <Text size="sm" fw={500} ff="monospace">
-                {item.jobName}
-              </Text>
-            ),
-          },
-          priority: {
-            label: "Priority",
-            value: (item) => (
-              <Text size="xs" c="dimmed">
-                {PRIORITY_LABELS[item.priority] ?? item.priority}
-              </Text>
-            ),
-          },
-          attempt: {
-            label: "Attempt",
-            value: (item) => (
-              <Text size="sm" ff="monospace">
-                {item.attempt}/{item.maxAttempts}
-              </Text>
-            ),
-          },
-          triggeredByName: {
-            label: "Trigger",
-            defaultHidden: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed">
-                {item.triggeredByName ?? "\u2014"}
-              </Text>
-            ),
-          },
-          createdAt: {
-            label: "Created",
-            defaultHidden: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed">
-                {l(item.createdAt, { date: "fromNow" })}
-              </Text>
-            ),
-          },
-          startedAt: {
-            label: "Started",
-            value: (item) => (
-              <Text size="xs" c="dimmed">
-                {item.startedAt
-                  ? l(item.startedAt, { date: "fromNow" })
-                  : "\u2014"}
-              </Text>
-            ),
-          },
-          duration: {
-            label: "Duration",
-            value: (item) => (
-              <Text size="xs" c="dimmed" ff="monospace">
-                {item.startedAt &&
-                (item.completedAt || item.status === "running")
-                  ? formatDuration(item.startedAt, item.completedAt)
-                  : "\u2014"}
-              </Text>
-            ),
-          },
-          error: {
-            label: "Error",
-            defaultHidden: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed" lineClamp={1}>
-                {item.error ?? "\u2014"}
-              </Text>
-            ),
-          },
-          key: {
-            label: "Key",
-            defaultHidden: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed" ff="monospace">
-                {item.key ?? "\u2014"}
-              </Text>
-            ),
-          },
-          workerId: {
-            label: "Worker",
-            defaultHidden: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed" ff="monospace">
-                {item.workerId ?? "\u2014"}
-              </Text>
-            ),
-          },
-        }}
-        rowActions={(item) => [
-          {
-            label: "Retry",
-            icon: IconRefresh,
-            onClick: () => handleRetry(item.id),
-            visible: item.can?.retry,
-          },
-          {
-            label: "Cancel",
-            icon: IconCircleX,
-            onClick: () => handleCancel(item.id),
-            visible: item.can?.cancel,
-          },
-        ]}
-        panel={{
-          can: (item) => Boolean(item.error || item.key || item.workerId),
-          render: (item) => (
-            <Flex direction="column" gap="sm" p="sm">
-              {item.error && (
-                <Flex direction="column" gap={2}>
-                  <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                    Error
-                  </Text>
-                  <Paper p="xs" radius="sm" withBorder>
-                    <Text
-                      size="xs"
-                      style={{
-                        whiteSpace: "pre-wrap",
-                        wordBreak: "break-word",
-                      }}
-                    >
-                      {item.error}
-                    </Text>
-                  </Paper>
-                </Flex>
-              )}
-              <Flex gap="lg" wrap="wrap">
-                <Flex direction="column" gap={2}>
-                  <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                    ID
-                  </Text>
-                  <Text size="xs" ff="monospace">
-                    {item.id}
-                  </Text>
-                </Flex>
-                {item.key && (
-                  <Flex direction="column" gap={2}>
-                    <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                      Key
-                    </Text>
-                    <Text size="xs" ff="monospace">
-                      {item.key}
-                    </Text>
-                  </Flex>
-                )}
-                {item.workerId && (
-                  <Flex direction="column" gap={2}>
-                    <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                      Worker
-                    </Text>
-                    <Text size="xs" ff="monospace">
-                      {item.workerId}
-                    </Text>
-                  </Flex>
-                )}
-                {item.triggeredByName && (
-                  <Flex direction="column" gap={2}>
-                    <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                      Triggered By
-                    </Text>
-                    <Text size="xs">{item.triggeredByName}</Text>
-                  </Flex>
-                )}
-              </Flex>
-            </Flex>
-          ),
-        }}
-        drawer={(item) => (
-          <ExecutionDetailContent
-            item={item}
-            onRetry={handleRetry}
-            onCancel={handleCancel}
-          />
-        )}
-      />
-    </Flex>
-  );
-};
+const emptyFilters = t.object({});
 
+// ─────────────────────────────────────────────────────────────────────────────
+// ExecutionDetailContent
 // ─────────────────────────────────────────────────────────────────────────────
 
 const ExecutionDetailContent = ({
@@ -535,49 +266,35 @@ const ExecutionDetailContent = ({
       </Flex>
 
       {/* Details */}
-      <Paper p="sm" radius="md" withBorder>
-        <Text size="sm" fw={600} mb="xs">
-          Details
-        </Text>
+      <Section title="Details" p="sm">
         <DetailList items={detailItems} columns={2} />
-      </Paper>
+      </Section>
 
       {/* Payload */}
       {detail.payload && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Payload
-          </Text>
+        <Section title="Payload" p="sm">
           <Code block>{JSON.stringify(detail.payload, null, 2)}</Code>
-        </Paper>
+        </Section>
       )}
 
       {/* Error */}
       {detail.error && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Error
+        <Section title="Error" p="sm">
+          <Text
+            size="sm"
+            style={{
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+            }}
+          >
+            {detail.error}
           </Text>
-          <Paper p="xs" radius="sm" withBorder>
-            <Text
-              size="sm"
-              style={{
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word",
-              }}
-            >
-              {detail.error}
-            </Text>
-          </Paper>
-        </Paper>
+        </Section>
       )}
 
       {/* Logs */}
       {detail.logs && detail.logs.length > 0 && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Logs ({detail.logs.length})
-          </Text>
+        <Section title={`Logs (${detail.logs.length})`} p="sm">
           <Flex
             direction="column"
             style={{ maxHeight: 400, overflowY: "auto" }}
@@ -620,10 +337,426 @@ const ExecutionDetailContent = ({
               </Table.Tbody>
             </Table>
           </Flex>
-        </Paper>
+        </Section>
+      )}
+    </Flex>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// JobExecutionsPanel
+// ─────────────────────────────────────────────────────────────────────────────
+
+const JobExecutionsPanel = ({
+  item,
+  cronMap,
+  failureMap,
+}: {
+  item: JobRegistration;
+  cronMap: Map<string, JobCronInfo>;
+  failureMap: Map<string, JobFailure>;
+}) => {
+  const client = useClient<AdminJobController>();
+  const { l } = useI18n();
+  const toast = useToast();
+  const dialog = useDialog();
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const cron = cronMap.get(item.name);
+  const failure = failureMap.get(item.name);
+
+  const handleRetry = useCallback(
+    async (id: string) => {
+      try {
+        await client.retryJobExecution({ params: { id } });
+        toast.success("Execution retried");
+        setRefreshKey((k) => k + 1);
+      } catch {
+        toast.danger("Failed to retry execution");
+      }
+    },
+    [client, toast],
+  );
+
+  const handleCancel = useCallback(
+    async (id: string) => {
+      const confirmed = await dialog.confirm({
+        title: "Cancel Execution",
+        message: "Are you sure you want to cancel this execution?",
+        confirmLabel: "Cancel",
+        confirmColor: "red",
+      });
+
+      if (!confirmed) return;
+
+      try {
+        await client.cancelJobExecution({ params: { id } });
+        toast.success("Execution cancelled");
+        setRefreshKey((k) => k + 1);
+      } catch {
+        toast.danger("Failed to cancel execution");
+      }
+    },
+    [client, dialog, toast],
+  );
+
+  const detailItems: DetailListItem[] = [
+    {
+      label: "Cron",
+      value: item.cron ? (
+        <Text size="sm" ff="monospace">
+          {item.cron}
+        </Text>
+      ) : undefined,
+      hidden: !item.cron,
+    },
+    {
+      label: "Timeout",
+      value: item.timeout,
+      hidden: !item.timeout,
+    },
+    {
+      label: "Retry",
+      value: item.retry
+        ? `${item.retry.retries}x${item.retry.hasBackoff ? " (backoff)" : ""}`
+        : undefined,
+      hidden: !item.retry,
+    },
+    {
+      label: "Batch",
+      value: item.batch
+        ? `${item.batch.size} / ${item.batch.window}`
+        : undefined,
+      hidden: !item.batch,
+    },
+    {
+      label: "Schema",
+      value: item.hasSchema ? "Yes" : "No",
+    },
+  ];
+
+  return (
+    <Flex direction="column" gap="sm" p="sm">
+      {/* Last cron execution */}
+      {cron?.lastExecution && (
+        <Flex gap="lg" wrap="wrap" align="center">
+          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+            Last Run
+          </Text>
+          <Flex align="center" gap={4}>
+            {cron.lastExecution.status === "completed" ? (
+              <IconCircleCheck size={14} color="var(--mantine-color-dimmed)" />
+            ) : (
+              <IconCircleX size={14} color="var(--mantine-color-dimmed)" />
+            )}
+            <Text size="xs" tt="capitalize">
+              {cron.lastExecution.status}
+            </Text>
+          </Flex>
+          {cron.lastExecution.startedAt && (
+            <Text size="xs" c="dimmed">
+              {l(cron.lastExecution.startedAt, { date: "fromNow" })}
+            </Text>
+          )}
+          {cron.lastExecution.error && (
+            <Text size="xs" c="dimmed" lineClamp={1}>
+              {cron.lastExecution.error}
+            </Text>
+          )}
+        </Flex>
+      )}
+
+      {/* Failures */}
+      {failure && (
+        <Flex gap="lg" wrap="wrap" align="center">
+          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+            Failures (7d)
+          </Text>
+          <Text size="xs" fw={500}>
+            {failure.failures}
+          </Text>
+          {failure.lastError && (
+            <Text size="xs" c="dimmed" lineClamp={1} style={{ maxWidth: 400 }}>
+              {failure.lastError}
+            </Text>
+          )}
+        </Flex>
       )}
+
+      {/* Job config */}
+      <DetailList items={detailItems} columns={3} />
+
+      {/* Executions table */}
+      <DataTable<JobExecutionResource, typeof emptyFilters>
+        key={`executions-${item.name}-${refreshKey}`}
+        submitOnInit
+        defaultSize={10}
+        tableProps={{
+          horizontalSpacing: "sm",
+          verticalSpacing: "sm",
+        }}
+        items={async () => {
+          const response = await client.findJobExecutions({
+            query: { job: item.name },
+          });
+          return response as Page<JobExecutionResource>;
+        }}
+        columns={{
+          status: {
+            label: "Status",
+            value: (exec) => {
+              const color =
+                exec.status === "completed"
+                  ? "green"
+                  : exec.status === "running"
+                    ? "blue"
+                    : exec.status === "failed" || exec.status === "dead"
+                      ? "red"
+                      : exec.status === "cancelled"
+                        ? "yellow"
+                        : "gray";
+              return (
+                <Badge size="sm" variant="light" color={color}>
+                  {exec.status}
+                </Badge>
+              );
+            },
+          },
+          jobName: {
+            label: "Job",
+            value: (exec) => (
+              <Text size="sm" fw={500} ff="monospace">
+                {exec.jobName}
+              </Text>
+            ),
+          },
+          attempt: {
+            label: "Attempt",
+            value: (exec) => (
+              <Text size="sm" ff="monospace">
+                {exec.attempt}/{exec.maxAttempts}
+              </Text>
+            ),
+          },
+          startedAt: {
+            label: "Started",
+            value: (exec) => (
+              <Text size="xs" c="dimmed">
+                {exec.startedAt
+                  ? l(exec.startedAt, { date: "fromNow" })
+                  : "\u2014"}
+              </Text>
+            ),
+          },
+          duration: {
+            label: "Duration",
+            value: (exec) => (
+              <Text size="xs" c="dimmed" ff="monospace">
+                {exec.startedAt &&
+                (exec.completedAt || exec.status === "running")
+                  ? formatDuration(exec.startedAt, exec.completedAt)
+                  : "\u2014"}
+              </Text>
+            ),
+          },
+        }}
+        rowActions={(exec) => [
+          {
+            label: "Retry",
+            icon: IconRefresh,
+            onClick: () => handleRetry(exec.id),
+            visible: exec.can?.retry,
+          },
+          {
+            label: "Cancel",
+            icon: IconCircleX,
+            onClick: () => handleCancel(exec.id),
+            visible: exec.can?.cancel,
+          },
+        ]}
+        drawer={(exec) => (
+          <ExecutionDetailContent
+            item={exec}
+            onRetry={handleRetry}
+            onCancel={handleCancel}
+          />
+        )}
+      />
+    </Flex>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// AdminJobs (main page)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AdminJobs = () => {
+  const client = useClient<AdminJobController>();
+  const toast = useToast();
+  const dialog = useDialog();
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // Extra data for enriched panels
+  const [cronMap, setCronMap] = useState<Map<string, JobCronInfo>>(new Map());
+  const [queueMap, setQueueMap] = useState<Map<string, JobQueueDepth>>(
+    new Map(),
+  );
+  const [failureMap, setFailureMap] = useState<Map<string, JobFailure>>(
+    new Map(),
+  );
+
+  const loadExtraData = useCallback(async () => {
+    try {
+      const [cronData, queueData, failureData] = await Promise.all([
+        client.getCronJobs(),
+        client.getJobQueueDepth(),
+        client.getJobTopFailures(),
+      ]);
+      setCronMap(new Map(cronData.map((c) => [c.name, c])));
+      setQueueMap(new Map(queueData.map((q) => [q.jobName, q])));
+      setFailureMap(new Map(failureData.map((f) => [f.jobName, f])));
+    } catch {
+      // non-critical
+    }
+  }, [client]);
+
+  useEffect(() => {
+    loadExtraData();
+  }, [loadExtraData, refreshKey]);
+
+  const handleTriggerJob = useCallback(
+    async (name: string) => {
+      const confirmed = await dialog.confirm({
+        title: "Trigger Job",
+        message: `Are you sure you want to trigger "${name}" manually?`,
+        confirmLabel: "Trigger",
+        confirmColor: "blue",
+      });
+
+      if (!confirmed) return;
+
+      return client.triggerJob({ body: { name } }).then(() => {
+        toast.success(`Job "${name}" triggered`);
+        setRefreshKey((k) => k + 1);
+      });
+    },
+    [client, dialog, toast],
+  );
+
+  return (
+    <Flex p="md" flex={1} direction="column" gap="md">
+      <DataTable<JobRegistration, typeof registryFilters>
+        key={`registry-${refreshKey}`}
+        submitOnInit
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 1,
+        }}
+        tableProps={{
+          horizontalSpacing: "sm",
+          verticalSpacing: "sm",
+        }}
+        onFilterChange={(_key, _value, form) => form.submit()}
+        filters={registryFilters}
+        items={async (filters) => {
+          const items = await client.getJobRegistry();
+          const filtered = filters.type
+            ? items.filter((i) => i.type === filters.type)
+            : items;
+          return { content: filtered };
+        }}
+        columns={{
+          name: {
+            label: "Name",
+            value: (item) => (
+              <Text size="sm" fw={500} ff="monospace">
+                {item.name}
+              </Text>
+            ),
+          },
+          type: {
+            label: "Type",
+            value: (item) => (
+              <Badge size="sm" variant="default">
+                {item.type}
+              </Badge>
+            ),
+          },
+          priority: {
+            label: "Priority",
+            value: (item) => (
+              <Text size="sm" tt="capitalize">
+                {item.priority}
+              </Text>
+            ),
+          },
+          concurrency: {
+            label: "Concurrency",
+            value: (item) => (
+              <Text size="sm" ff="monospace">
+                {item.concurrency}
+              </Text>
+            ),
+          },
+          queue: {
+            label: "Queue",
+            value: (item) => {
+              const q = queueMap.get(item.name);
+              if (
+                !q ||
+                q.pending + q.running + q.scheduled + q.retrying + q.dead === 0
+              ) {
+                return (
+                  <Text size="xs" c="dimmed">
+                    —
+                  </Text>
+                );
+              }
+              return (
+                <Flex gap={4}>
+                  {q.running > 0 && (
+                    <Badge size="xs" variant="default">
+                      {q.running} run
+                    </Badge>
+                  )}
+                  {q.pending > 0 && (
+                    <Badge size="xs" variant="default">
+                      {q.pending} pen
+                    </Badge>
+                  )}
+                  {q.retrying > 0 && (
+                    <Badge size="xs" variant="default">
+                      {q.retrying} retry
+                    </Badge>
+                  )}
+                  {q.dead > 0 && (
+                    <Badge size="xs" variant="default">
+                      {q.dead} dead
+                    </Badge>
+                  )}
+                </Flex>
+              );
+            },
+          },
+        }}
+        rowActions={(item) => [
+          {
+            label: "Trigger",
+            color: "blue",
+            icon: IconPlayerPlay,
+            onClick: () => handleTriggerJob(item.name),
+          },
+        ]}
+        panel={(item) => (
+          <JobExecutionsPanel
+            item={item}
+            cronMap={cronMap}
+            failureMap={failureMap}
+          />
+        )}
+      />
     </Flex>
   );
 };
 
-export default AdminJobExecutions;
+export default AdminJobs;