@alepha/devtools 0.11.6 → 0.11.9

package/src/ui/components/DevLogViewer.tsx

@@ -0,0 +1,254 @@
+import { type Page, t } from "@alepha/core";
+import { dayjs } from "@alepha/datetime";
+import { type LogEntry, logEntrySchema } from "@alepha/logger";
+import { useInject } from "@alepha/react";
+import { useI18n } from "@alepha/react-i18n";
+import { HttpClient } from "@alepha/server";
+import { ActionButton, DataTable, DialogService, Flex, Text } from "@alepha/ui";
+import { logs } from "../../entities/logs.ts";
+
+const DevLogViewer = () => {
+  const http = useInject(HttpClient);
+  const { l } = useI18n();
+
+  const renderLevel = (level: string) => {
+    switch (level.toLowerCase()) {
+      case "error":
+        return (
+          <Text ff={"monospace"} c="red">
+            {level.slice(0, 5)}
+          </Text>
+        );
+      case "warn":
+        return (
+          <Text ff={"monospace"} c="orange">
+            {level.slice(0, 5)}
+          </Text>
+        );
+      case "info":
+        return (
+          <Text ff={"monospace"} c="green">
+            {level.slice(0, 5)}
+          </Text>
+        );
+      case "debug":
+        return (
+          <Text ff={"monospace"} c="grape">
+            {level.slice(0, 5)}
+          </Text>
+        );
+      case "trace":
+        return (
+          <Text ff={"monospace"} c="dimmed">
+            {level.slice(0, 5)}
+          </Text>
+        );
+      default:
+        return <Text>{level}</Text>;
+    }
+  };
+
+  const filters = t.object({
+    search: t.optional(
+      t.string({
+        $control: {
+          query: t.omit(logs.schema, ["id"]),
+        },
+      }),
+    ),
+    level: t.optional(
+      t.array(
+        t.enum(["TRACE", "DEBUG", "INFO", "WARN", "ERROR"], {
+          $control: {},
+        }),
+      ),
+    ),
+  });
+
+  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(),
+            );
+          }
+
+          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.search) {
+              filters.search += `& (${levelFilter})`;
+            } else {
+              filters.search = levelFilter;
+            }
+          }
+
+          const queryParams = new URLSearchParams(
+            filters as Record<string, any>,
+          ).toString();
+
+          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 }) => (
+              <ActionButton
+                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()}`,
+                  );
+                }}
+              >
+                {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
+                  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;
+              }
+
+              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>
+              );
+            },
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default DevLogViewer;

package/src/ui/styles.css

@@ -1,5 +1,5 @@
 @import "@alepha/ui";
-@import "wotfardregular/stylesheet.css";
+@import "./resources/wotfardregular/stylesheet.css";
 
 :root {
   --mantine-font-family: "wotfardregular", Arial, sans-serif;

package/src/ui/DevLogs.tsx

@@ -1,145 +0,0 @@
-import { type Page, t } from "@alepha/core";
-import { type LogEntry, logEntrySchema } from "@alepha/logger";
-import { useInject } from "@alepha/react";
-import { useI18n } from "@alepha/react-i18n";
-import { HttpClient } from "@alepha/server";
-import { DataTable, Flex, Text } from "@alepha/ui";
-
-const DevLogs = () => {
-  const http = useInject(HttpClient);
-  const { l } = useI18n();
-
-  const renderLevel = (level: string) => {
-    switch (level.toLowerCase()) {
-      case "error":
-        return (
-          <Text ff={"monospace"} c="red">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "warn":
-        return (
-          <Text ff={"monospace"} c="orange">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "info":
-        return (
-          <Text ff={"monospace"} c="green">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "debug":
-        return (
-          <Text ff={"monospace"} c="grape">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "trace":
-        return (
-          <Text ff={"monospace"} c="dimmed">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      default:
-        return <Text>{level}</Text>;
-    }
-  };
-
-  return (
-    <Flex flex={1}>
-      <DataTable<LogEntry>
-        submitOnInit
-        submitEvery={[10, "seconds"]}
-        defaultSize={20}
-        tableProps={{
-          horizontalSpacing: "xs",
-          verticalSpacing: 0,
-        }}
-        filters={t.object({
-          search: t.optional(
-            t.string({
-              $control: {
-                query: logEntrySchema,
-              },
-            }),
-          ),
-        })}
-        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) => {
-          const response = await http.fetch(
-            `/devtools/api/logs?${new URLSearchParams(filters as any).toString()}`,
-            {
-              schema: {
-                response: t.page(logEntrySchema),
-              },
-            },
-          );
-
-          return response.data as Page<LogEntry>;
-        }}
-        columns={{
-          timestamp: {
-            label: "Tme",
-            value: (item) => (
-              <Text c={"dimmed"} size={"xs"}>
-                {l(item.timestamp, {
-                  date: "HH:mm:ss.SSS",
-                })}
-              </Text>
-            ),
-          },
-          level: {
-            label: "Lvl",
-            value: (item) => renderLevel(item.level),
-          },
-          context: {
-            label: "Ctx",
-            value: (item) =>
-              item.context && (
-                <Text ff={"monospace"} size={"xs"} c="dimmed">
-                  {item.context.slice(0, 8)}
-                </Text>
-              ),
-          },
-          service: {
-            label: "Srv",
-            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: "Msg",
-            value: (item) => item.message.slice(0, 64),
-          },
-          data: {
-            label: "Dat",
-            value: (item) =>
-              item.data ? JSON.stringify(item.data, null, 2).slice(0, 32) : "",
-          },
-        }}
-      />
-    </Flex>
-  );
-};
-
-export default DevLogs;

package/src/ui/main.server.ts

@@ -1,10 +0,0 @@
-import { Alepha, run } from "@alepha/core";
-import { AlephaDevtools } from "../index.ts";
-import { AppRouter } from "./AppRouter.tsx";
-
-const alepha = Alepha.create();
-
-alepha.with(AppRouter);
-alepha.with(AlephaDevtools);
-
-run(alepha);