@alepha/devtools 0.11.5 → 0.11.6

package/src/ui/DevLogs.tsx

@@ -1,35 +1,14 @@
-import { t } from "@alepha/core";
+import { type Page, t } from "@alepha/core";
 import { type LogEntry, logEntrySchema } from "@alepha/logger";
-import { useAction, useInject } from "@alepha/react";
+import { useInject } from "@alepha/react";
 import { useI18n } from "@alepha/react-i18n";
 import { HttpClient } from "@alepha/server";
 import { DataTable, Flex, Text } from "@alepha/ui";
-import { useState } from "react";
 
 const DevLogs = () => {
   const http = useInject(HttpClient);
-  const [logs, setLog] = useState<LogEntry[]>([]);
   const { l } = useI18n();
 
-  useAction(
-    {
-      runOnInit: true,
-      runEvery: [10, "seconds"],
-      handler: async () => {
-        setLog(
-          await http
-            .fetch("/devtools/api/logs", {
-              schema: {
-                response: t.array(logEntrySchema),
-              },
-            })
-            .then(({ data }) => data),
-        );
-      },
-    },
-    [],
-  );
-
   const renderLevel = (level: string) => {
     switch (level.toLowerCase()) {
       case "error":
@@ -68,12 +47,24 @@ const DevLogs = () => {
   };
 
   return (
-    <Flex>
-      <DataTable
+    <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 {
@@ -87,7 +78,18 @@ const DevLogs = () => {
           }
           return {};
         }}
-        items={logs}
+        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",

package/src/ui/main.server.ts

@@ -0,0 +1,10 @@
+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);