@alepha/devtools 0.11.3 → 0.11.5

package/src/ui/DevLogs.tsx

@@ -0,0 +1,143 @@
+import { t } from "@alepha/core";
+import { type LogEntry, logEntrySchema } from "@alepha/logger";
+import { useAction, 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":
+        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>
+      <DataTable
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: 0,
+        }}
+        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={logs}
+        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.ts

@@ -0,0 +1,4 @@
+import { run } from "@alepha/core";
+import { AppRouter } from "./AppRouter.tsx";
+
+run(AppRouter);

package/src/ui/styles.css

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

package/src/ui/wotfardregular/stylesheet.css

@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 27, 2020 */
+
+@font-face {
+  font-family: "wotfardregular";
+  src: url("wotfard-regular-webfont.eot");
+  src:
+    url("wotfard-regular-webfont.eot?#iefix") format("embedded-opentype"),
+    url("wotfard-regular-webfont.woff2") format("woff2"),
+    url("wotfard-regular-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}