@alepha/devtools 0.13.6 → 0.13.8

package/src/ui/components/DevLogViewer.tsx

@@ -5,7 +5,7 @@ import { type Page, t } from "alepha";
 import { dayjs } from "alepha/datetime";
 import { type LogEntry, logEntrySchema } from "alepha/logger";
 import { HttpClient } from "alepha/server";
-import { logs } from "../../entities/logs.ts";
+import { logs } from "../../api/entities/logs.ts";
 
 const DevLogViewer = () => {
   const http = useInject(HttpClient);
@@ -66,188 +66,186 @@ const DevLogViewer = () => {
   });
 
   return (
-    <Flex flex={1}>
-      <DataTable<LogEntry, typeof filters>
-        submitOnInit
-        infinityScroll
-        submitEvery={[10, "seconds"]}
-        defaultSize={20}
-        typeFormProps={{
-          skipSubmitButton: true,
-          columns: 2,
-        }}
-        tableProps={{
-          horizontalSpacing: "xs",
-          verticalSpacing: 0,
-        }}
-        onFilterChange={(key, value, form) => {
-          if (key === "search" || key === "level") {
-            return form.submit();
-          }
-        }}
-        filters={filters}
-        tableTrProps={(item) => {
-          if (item.level.toLowerCase() === "error") {
-            return {
-              bg: "rgba(255,0,0,0.1)",
-            };
-          }
-          if (item.level.toLowerCase() === "warn") {
-            return {
-              bg: "rgba(255,153,0,0.1)",
-            };
-          }
-          return {};
-        }}
-        items={async (filters, ctx) => {
-          if (filters.search) {
-            filters.search = filters.search.replace(
-              "now()",
-              new Date().toISOString(),
-            );
-          }
+    <DataTable<LogEntry, typeof filters>
+      submitOnInit
+      infinityScroll
+      submitEvery={[10, "seconds"]}
+      defaultSize={20}
+      typeFormProps={{
+        skipSubmitButton: true,
+        columns: 2,
+      }}
+      tableProps={{
+        horizontalSpacing: "xs",
+        verticalSpacing: 0,
+      }}
+      onFilterChange={(key, value, form) => {
+        if (key === "search" || key === "level") {
+          return form.submit();
+        }
+      }}
+      filters={filters}
+      tableTrProps={(item) => {
+        if (item.level.toLowerCase() === "error") {
+          return {
+            bg: "rgba(255,0,0,0.1)",
+          };
+        }
+        if (item.level.toLowerCase() === "warn") {
+          return {
+            bg: "rgba(255,153,0,0.1)",
+          };
+        }
+        return {};
+      }}
+      items={async (filters, ctx) => {
+        if (filters.search) {
+          filters.search = filters.search.replace(
+            "now()",
+            new Date().toISOString(),
+          );
+        }
 
-          if (filters.page && filters.page > 0) {
-            const next = `timestamp < ${ctx.items[0].timestamp}`;
-            if (filters.search) {
-              filters.search += `& ${next}`;
-            } else {
-              filters.search = next;
-            }
+        if (filters.page && filters.page > 0) {
+          const next = `timestamp < ${ctx.items[0].timestamp}`;
+          if (filters.search) {
+            filters.search += `& ${next}`;
+          } else {
+            filters.search = next;
           }
+        }
 
-          if (filters.level) {
-            const levelFilter = filters.level
-              .map((it) => `level = ${it}`)
-              .join(" | ");
+        if (filters.level) {
+          const levelFilter = filters.level
+            .map((it) => `level = ${it}`)
+            .join(" | ");
 
-            if (filters.search) {
-              filters.search += `& (${levelFilter})`;
-            } else {
-              filters.search = levelFilter;
-            }
+          if (filters.search) {
+            filters.search += `& (${levelFilter})`;
+          } else {
+            filters.search = levelFilter;
           }
+        }
 
-          const queryParams = new URLSearchParams(
-            filters as Record<string, any>,
-          ).toString();
+        const queryParams = new URLSearchParams(
+          filters as Record<string, any>,
+        ).toString();
 
-          const response = await http.fetch(
-            `/devtools/api/logs?${queryParams}`,
-            {
-              schema: {
-                response: t.page(logEntrySchema),
-              },
-            },
-          );
+        const response = await http.fetch(`/devtools/api/logs?${queryParams}`, {
+          schema: {
+            response: t.page(logEntrySchema),
+          },
+        });
 
-          return response.data as Page<LogEntry>;
-        }}
-        columns={{
-          timestamp: {
-            label: "timestamp",
-            value: (item, { form }) => (
+        return response.data as Page<LogEntry>;
+      }}
+      columns={{
+        timestamp: {
+          label: "timestamp",
+          value: (item, { form }) => (
+            <ActionButton
+              intent={"none"}
+              variant={"transparent"}
+              h={20}
+              size={"xs"}
+              tooltip={l(item.timestamp, {
+                date: "DD MMM YYYY HH:mm:ss.SSS",
+              })}
+              onClick={() => {
+                const before = dayjs(item.timestamp).subtract(1, "minute");
+                const after = dayjs(item.timestamp).add(1, "minute");
+                form.input.search.set(
+                  `timestamp >= ${before.toISOString()} & timestamp <= ${after.toISOString()}`,
+                );
+              }}
+            >
+              {l(item.timestamp, {
+                date: "HH:mm:ss.SSS",
+              })}
+            </ActionButton>
+          ),
+        },
+        level: {
+          label: "level",
+          value: (item) => renderLevel(item.level),
+        },
+        app: {
+          label: "app",
+          value: (item) => item.app,
+        },
+        context: {
+          fit: true,
+          label: "context",
+          value: (item, { form }) =>
+            item.context && (
               <ActionButton
+                intent={"none"}
+                variant={"transparent"}
                 h={20}
-                c={"dimmed"}
                 size={"xs"}
-                tooltip={l(item.timestamp, {
-                  date: "DD MMM YYYY HH:mm:ss.SSS",
-                })}
                 onClick={() => {
-                  const before = dayjs(item.timestamp).subtract(1, "minute");
-                  const after = dayjs(item.timestamp).add(1, "minute");
-                  form.input.search.set(
-                    `timestamp >= ${before.toISOString()} & timestamp <= ${after.toISOString()}`,
-                  );
+                  form.input.search.set(`context = ${item.context}`);
                 }}
               >
-                {l(item.timestamp, {
-                  date: "HH:mm:ss.SSS",
-                })}
+                <Text ff={"monospace"} size={"xs"}>
+                  {item.context.replaceAll("-", "").slice(0, 10)}
+                </Text>
               </ActionButton>
             ),
+        },
+        service: {
+          fit: true,
+          label: "service",
+          value: (item) => (
+            <Flex align={"center"} justify={"end"}>
+              {item.module && (
+                <Text c="dimmed" size={"xs"}>
+                  {item.module}.
+                </Text>
+              )}
+              <Text size={"sm"}>{item.service}</Text>
+            </Flex>
+          ),
+        },
+        message: {
+          label: "message",
+          value: (item) => {
+            if (item.data?.ms && item.data.status) {
+              return `${item.message} - ${item.data.status} [${item.data.ms}ms]`;
+            }
+            if (item.data?.path && item.data.method) {
+              return `${item.message} - ${item.data.method} ${item.data.path}`;
+            }
+            return item.message;
           },
-          level: {
-            label: "level",
-            value: (item) => renderLevel(item.level),
-          },
-          app: {
-            label: "app",
-            value: (item) => item.app,
-          },
-          context: {
-            fit: true,
-            label: "context",
-            value: (item, { form }) =>
-              item.context && (
-                <ActionButton
-                  h={20}
-                  size={"xs"}
-                  onClick={() => {
-                    form.input.search.set(`context = ${item.context}`);
-                  }}
-                >
-                  <Text ff={"monospace"} size={"xs"} c="dimmed">
-                    {item.context.replaceAll("-", "").slice(0, 10)}
-                  </Text>
-                </ActionButton>
-              ),
-          },
-          service: {
-            fit: true,
-            label: "service",
-            value: (item) => (
-              <Flex align={"center"} justify={"end"}>
-                {item.module && (
-                  <Text c="dimmed" size={"xs"}>
-                    {item.module}.
-                  </Text>
-                )}
-                <Text size={"sm"}>{item.service}</Text>
-              </Flex>
-            ),
-          },
-          message: {
-            label: "message",
-            value: (item) => {
-              if (item.data?.ms && item.data.status) {
-                return `${item.message} - ${item.data.status} [${item.data.ms}ms]`;
-              }
-              if (item.data?.path && item.data.method) {
-                return `${item.message} - ${item.data.method} ${item.data.path}`;
-              }
-              return item.message;
-            },
-          },
-          data: {
-            label: "more",
-            value: (item, { alepha }) => {
-              if (!item.data) {
-                return;
-              }
+        },
+        data: {
+          label: "more",
+          value: (item, { alepha }) => {
+            if (!item.data) {
+              return;
+            }
 
-              if (Object.keys(item.data).length === 0) {
-                return;
-              }
+            if (Object.keys(item.data).length === 0) {
+              return;
+            }
 
-              return (
-                <ActionButton
-                  opacity={0.5}
-                  h={20}
-                  px={4}
-                  size={"xs"}
-                  fw={"bold"}
-                  onClick={() => alepha.inject(DialogService).json(item.data)}
-                >
-                  {"{ ... }"}
-                </ActionButton>
-              );
-            },
+            return (
+              <ActionButton
+                opacity={0.5}
+                h={20}
+                px={4}
+                size={"xs"}
+                fw={"bold"}
+                onClick={() => alepha.inject(DialogService).json(item.data)}
+              >
+                {"{ ... }"}
+              </ActionButton>
+            );
           },
-        }}
-      />
-    </Flex>
+        },
+      }}
+    />
   );
 };
 

package/src/ui/components/DevQueueMonitor.tsx

@@ -0,0 +1,51 @@
+/**
+ * Queue Monitor
+ *
+ * Real-time view of background job queues.
+ *
+ * Features to implement:
+ * - List all queues with their provider (redis, memory)
+ * - For each queue show:
+ *   - Pending count
+ *   - Active count (currently processing)
+ *   - Completed count (last hour/day)
+ *   - Failed count with error preview
+ * - Click queue to see recent jobs:
+ *   - Job ID, status, created, started, completed, duration
+ *   - Payload (JSON viewer)
+ *   - Error message and stack trace for failed jobs
+ * - Actions:
+ *   - Retry single failed job
+ *   - Retry all failed jobs
+ *   - Purge completed jobs
+ *   - Pause/resume queue
+ * - Auto-refresh toggle (poll every 5s)
+ * - Filter by status (pending, active, completed, failed)
+ *
+ * Data source: Need new endpoints in DevToolsProvider
+ *   - GET /devtools/api/queues -> queue stats
+ *   - GET /devtools/api/queues/:name/jobs -> job list
+ *   - POST /devtools/api/queues/:name/jobs/:id/retry
+ */
+
+import { Flex, Text, ThemeIcon } from "@mantine/core";
+import { IconStack2 } from "@tabler/icons-react";
+
+export const DevQueueMonitor = () => {
+  return (
+    <Flex direction="column" gap="xl" w="100%" p={"xl"}>
+      <Flex align="center" gap="sm">
+        <ThemeIcon size={32} variant="light" color="orange">
+          <IconStack2 size={20} />
+        </ThemeIcon>
+        <Text size="xl" fw={600}>
+          Queue Monitor
+        </Text>
+      </Flex>
+
+      <Text c="dimmed">Background job queues - coming soon</Text>
+    </Flex>
+  );
+};
+
+export default DevQueueMonitor;