Feat/console virtualization

clients/web/package.json

@@ -19,27 +19,27 @@
   "devDependencies": {
     "@protobuf-ts/protoc": "^2.9.1",
     "@sentry/netlify-build-plugin": "^1.1.1",
-    "@solidjs/testing-library": "^0.8.0",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@solidjs/testing-library": "^0.8.5",
+    "@testing-library/jest-dom": "^6.2.0",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "@vitest/coverage-v8": "^0.34.6",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-solid": "^0.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-solid": "^0.13.1",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.31",
     "prettier": "^2.8.8",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
-    "vite": "^4.5.0",
+    "vite": "^4.5.2",
     "vite-plugin-solid": "^2.7.2",
-    "vite-plugin-static-copy": "^0.17.0",
+    "vite-plugin-static-copy": "^0.17.1",
     "vite-plugin-wasm": "^3.2.2",
-    "vitest": "^0.34.0"
+    "vitest": "^0.34.6"
   },
   "dependencies": {
     "@crabnebula/file-icons": "^0.1.0",
@@ -52,7 +52,8 @@
     "@sentry/browser": "^7.83.0",
     "@sentry/vite-plugin": "^2.10.2",
     "@solid-primitives/map": "^0.4.8",
-    "@solidjs/router": "^0.11.0",
+    "@solidjs/router": "^0.10.5",
+    "@tanstack/solid-virtual": "^3.0.4",
     "clsx": "^2.0.0",
     "csp_evaluator": "^1.1.1",
     "json-schema-library": "^9.1.2",

clients/web/src/components/auto-scroll-pane.tsx

@@ -0,0 +1,93 @@
+import { Show, Accessor, JSXElement, For, createEffect } from "solid-js";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+
+type AutoScrollPaneProps<AutoScrollItem> = {
+  dataStream: AutoScrollItem[];
+  displayComponent: (props: {
+    event: AutoScrollItem;
+    [key: string]: unknown;
+  }) => JSXElement;
+  displayOptions: Record<string, unknown>;
+  shouldAutoScroll: Accessor<boolean>;
+  fallback: JSXElement;
+};
+
+export function AutoScrollPane<AutoScrollItem>(
+  props: AutoScrollPaneProps<AutoScrollItem>
+) {
+  let logPanel: HTMLDivElement | undefined;
+
+  const virtualizer = createVirtualizer({
+    get count() {
+      return props.dataStream.length;
+    },
+    getScrollElement: () => logPanel ?? null,
+    estimateSize: () => 28,
+    overscan: 25,
+  });
+
+  createEffect(() => {
+    if (props.shouldAutoScroll() && props.dataStream.length > 0) {
+      // When updating the filter really quick (fast typing for example) it is possible to void the virtual items
+      // before the scroll can be performed, which will lead to an error
+      try {
+        virtualizer.scrollToIndex(virtualizer.options.count - 1);
+      } catch (e) {
+        /* intentionally ignore */
+      }
+    }
+  });
+
+  return (
+    <div
+      ref={logPanel}
+      class="overflow-y-auto h-[calc(100%-var(--toolbar-height))]  relative"
+      style={{
+        contain: "strict",
+      }}
+    >
+      <Show when={props.dataStream.length === 0 || !props.dataStream}>
+        {props.fallback}
+      </Show>
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        <ul
+          class=""
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${
+              virtualizer.getVirtualItems()[0]?.start ?? 0
+            }px)`,
+          }}
+        >
+          <For each={virtualizer.getVirtualItems()}>
+            {(virtualRow) => {
+              return (
+                <li
+                  data-index={virtualRow.index}
+                  ref={(el) =>
+                    queueMicrotask(() => virtualizer.measureElement(el))
+                  }
+                >
+                  <props.displayComponent
+                    event={props.dataStream[virtualRow.index]}
+                    {...props.displayOptions}
+                    odd={virtualRow.index & 1}
+                  />
+                </li>
+              );
+            }}
+          </For>
+        </ul>
+      </div>
+    </div>
+  );
+}

clients/web/src/components/console/log-event-entry.tsx

@@ -0,0 +1,75 @@
+import { Show, untrack } from "solid-js";
+import { getLogMetadata } from "~/lib/console/get-log-metadata";
+import { timestampToDate, formatTimestamp } from "~/lib/formatters";
+import { getLevelClasses } from "~/lib/console/get-level-classes";
+import { useMonitor } from "~/context/monitor-provider";
+import { processFieldValue } from "~/lib/span/process-field-value";
+import type { LogEvent } from "~/lib/proto/logs";
+import clsx from "clsx";
+import { getFileNameFromPath } from "~/lib/console/get-file-name-from-path";
+
+export function LogEventEntry(props: {
+  event: LogEvent;
+  showTimestamp?: boolean;
+  odd?: boolean;
+}) {
+  const { monitorData } = useMonitor();
+  const logEvent = untrack(() => props.event);
+  const { message, at } = logEvent;
+  if (!at) return null;
+
+  const metadata = getLogMetadata(monitorData, logEvent);
+  const timeDate = timestampToDate(at);
+  const levelStyle = getLevelClasses(metadata?.level);
+
+  let target = metadata?.target;
+  if (target === "log") {
+    const field = logEvent.fields.find((field) => field.name === "log.target");
+    if (field) {
+      target = processFieldValue(field.value);
+    }
+  }
+
+  return (
+    <div
+      class={clsx(
+        "p-1  font-mono text-sm items-center flex gap-4 group",
+        levelStyle ? levelStyle : "border-b-gray-800 text-white",
+        props.odd ? "" : "bg-slate-900"
+      )}
+    >
+      <Show when={props.showTimestamp}>
+        <time
+          dateTime={timeDate.toISOString()}
+          class={clsx(
+            levelStyle
+              ? levelStyle
+              : "text-slate-400 group-hover:text-slate-100",
+            "font-mono text-xs transition-colors"
+          )}
+        >
+          {formatTimestamp(timeDate)}
+        </time>
+      </Show>
+      <span class="group-hover:text-white text-slate-300 transition-colors">
+        {message}
+      </span>
+      <span class="ml-auto flex gap-2 items-center text-xs">
+        <Show when={target}>
+          {(logTarget) => (
+            <span class="text-slate-400 group-hover:text-slate-100 transition-colors">
+              {logTarget()}
+            </span>
+          )}
+        </Show>
+        <Show when={metadata?.location?.file}>
+          {(filePath) => (
+            <>
+              {getFileNameFromPath(filePath())}:{metadata?.location?.line ?? ""}
+            </>
+          )}
+        </Show>
+      </span>
+    </div>
+  );
+}

clients/web/src/components/toolbar.tsx

@@ -5,7 +5,7 @@ type Props = {
 };
 
 export const Toolbar = (props: Props) => (
-  <div class="sticky items-center h-toolbar text-sm text-gray-400 p-2 top-0 flex justify-end border-b gap-4 border-gray-800">
+  <div class="sticky items-center h-toolbar text-sm text-gray-400 p-2 top-0 flex justify-end border-b gap-4 border-gray-800 z-10">
     {props.children}
   </div>
 );