ElectricSQL run page (hidden page for now) (#1297)

* WIP on using react-window-splitter

* WIP with new resizable panels and SSR

* Use the cookie package

* Resizable storybook page

* Increase indexing memory limit

* Fixed v2 usage meter displaying when on paid plan (#1255)

* Fixed v2 usage meter displaying when on paid plan

* Show the free usage panel only for v3 projects

* Concurrency page and more accurate tracking (#1252)

* Initial TaskRunConcurrencyTracker implementation

* MARQS calls a subscriber to events

* When enqueuing add the extra required metadata

* Track concurrency per environment for tasks too

* Admin page for global concurrency

* Use the new concurrency tracker on the tasks page

* Useful performance test task

* getAllTaskIdentifiers()

* New page for concurrency

* BackgroundWorkerTask index for quick lookup of task identifiers

* Added a way to get concurrency for environments

* Added upgrade/request more concurrency button

* Queued task column working

* Use defer and suspense

* Added queue column to the concurrency environments table

* Some comments added for clarity

* Fixed bad log message

* Sidemenu: move lower and rename to “Concurrency limits”

* Only show the environments, not tasks. Renamed to “Concurrency limits”

* v3: fix unfreezable state crashes for runs with multiple waits (#1253)

* support named capture groups

* write crash errors to attempt.error

* make restored pod names unique per checkpoint

* use last eight characters of checkpoint id instead

* add more chaos monkey env vars

* Ignore unfreezable states

* prevent excessive queue config parsing errors

* handle dependency resume edge case

* better entry point logging

* ignore checkpoint cancellation timeouts

* add missing idempotency keys to wait for dep replays

* remove checkpoints between attempts

* fix retry container names on kubernetes

* add changeset

* fix types

* bring back internal duration timers

* Added more logging to TaskRunConcurrencyTracker and some more try/catches

* Call subscriber.messageDequeued in dequeueMessageInSharedQueue

* Added messageReplaced to concurrency tracking (when freezing)

* Added depenenciesToBundle guide to bundle all packages

* Include the old message data when replacing, so we get the projectId etc.

* Fix restored container names

* Fix for schedule page not scrolling

* Added a description panel to the Concurrency admin page

* chore: Update version for release (beta) (#1256)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Release 3.0.0-beta.53

* Added a note to use batchTrigger() instead of trigger()

* The latest react-window-splitter fixes the ESM issues

* Set sensible defaults for the run page

* Deployments page

* Test page

* Schedules page

* Latest version of react-window-splitter (0.2.5)

* Updated to the latest version: react-window-splitter

* Callout if runs don’t start right away now has some top margin

* Small padding fix

* styled the handle focus state

* Added isStaticAtRest prop to resizable panel

* Updated resizable storybook

* Inline code blocks behave nicer when text wraps

* Added ElectricSQL to docker-compose, available on 3060

* Extracted some logic out of the eventRepository for getting a trace. This will be used on the frontend

* Use the new util

* More restructuring ready to use the trace summary from the frontend

* Using ElectricSQL for the run page data

* Min size for resizable panel on test page

* Don’t load the trace in the RunPresenter anymore

* Fix for the resizable panels on the run page

* Added overflow hidden to the panel group

* min size for the test page left hand panel

* Updated to latest window-splitter version

* Removed unused const

* One fix for client-server mismatch

* Slight improvement in the loading state

* Restructured the page so the loading is better

* Improvement to the loading states

* Improved the loading behaviour with the inspector

* WIP on auth, having problems with it

* Upgrade Remix to 2.9.1 (same as PR #1096)

* Switched structure around again so we only call the useTrace hook from the client

* Added auth to the sync

* Overscan more rows in the tree view

* Fix for TS error

* Remove duplicate import

* Revert "Upgrade Remix to 2.9.1 (same as PR #1096)"

This reverts commit e63ee9e.

* save cookie only when id is used

* Deployment table now scrolls

* removed imports

* A lot of changes to make the inspector live too… WIP

* More major overhauls to get the synced version of the run page working…

* If a span is completed show that

* Set the debounce much lower for selecting the span view

* Load the details run inspector data on demand

* Delete the SpanPresenter

* Use the async payload because it deals with superjson

* Fixed weird merge conflict

* Share some inspector timeline components

* A couple of layout tweaks

* Improved the run inspector loading states

* Fix for paragaph errors

* Fix for focusing on a span

* Undefined typre for useSyncedShape

* ELECTRIC_ORIGIN env var doesn’t have a default, added to the examples

* Updated @electric-sql/react package to the latest

* Fix the timeline duration stretching

* Added some better error handling for the electric sync

* More logging

* Better error when there are bad responses

* Turn off resizable snapshots, there’s a bug

* Added getSpan back

* Added SpanPresenter back

* Updated to the new Electric hooks package

* Made a copy so we have the old run page and the new electric one

* Put the main eventRepository back for now

---------

Co-authored-by: nicktrn <55853254+nicktrn@users.noreply.github.com>
Co-authored-by: James Ritchie <james@trigger.dev>
Co-authored-by: James Ritchie <james@jamesritchie.co.uk>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 4 people

.env.example

@@ -10,6 +10,7 @@ DIRECT_URL=${DATABASE_URL}
 REMIX_APP_PORT=3030
 APP_ENV=development
 APP_ORIGIN=http://localhost:3030
+ELECTRIC_ORIGIN=http://localhost:3060
 NODE_ENV=development
 V3_ENABLED=true
 

apps/webapp/app/components/code/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import type { Language, PrismTheme } from "prism-react-renderer";
 import { Highlight, Prism } from "prism-react-renderer";
-import { forwardRef, useCallback, useState } from "react";
+import { forwardRef, ReactNode, useCallback, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Paragraph } from "../primitives/Paragraph";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
@@ -385,7 +385,7 @@ function Chrome({ title }: { title?: string }) {
   );
 }
 
-export function TitleRow({ title }: { title: string }) {
+export function TitleRow({ title }: { title: ReactNode }) {
   return (
     <div className="flex items-center justify-between px-3">
       <Paragraph variant="small/bright" className="w-full border-b border-grid-dimmed py-2">

apps/webapp/app/components/code/InlineCode.tsx

@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono";
+  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono text-wrap";
 
 const variants = {
   "extra-extra-small": "text-xxs",

apps/webapp/app/components/primitives/Resizable.tsx

@@ -1,32 +1,35 @@
 "use client";
 
-import * as ResizablePrimitive from "react-resizable-panels";
+import React from "react";
+import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn("flex w-full data-[panel-group-direction=vertical]:flex-col", className)}
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
+  <PanelGroup
+    className={cn(
+      "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    autosaveStrategy={props.autosaveId ? "cookie" : undefined}
     {...props}
   />
 );
 
-const ResizablePanel = ResizablePrimitive.Panel;
+const ResizablePanel = Panel;
 
 const ResizableHandle = ({
-  withHandle,
+  withHandle = true,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: React.ComponentProps<typeof PanelResizer> & {
   withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+  <PanelResizer
     className={cn(
-      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary/50 focus-visible:ring-offset-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
+    size="3px"
     {...props}
   >
     <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500" />
@@ -37,7 +40,9 @@ const ResizableHandle = ({
         ))}
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </PanelResizer>
 );
 
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+
+export type ResizableSnapshot = React.ComponentProps<typeof PanelGroup>["snapshot"];

apps/webapp/app/components/primitives/TreeView/TreeView.tsx

@@ -241,7 +241,7 @@ export function useTree<TData, TFilterValue>({
         index,
       });
     },
-    overscan: 20,
+    overscan: 50,
   });
 
   const scrollToNodeFn = useCallback(

apps/webapp/app/components/runs/v3/InspectorTimeline.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from "react";
+import { cn } from "~/utils/cn";
+
+type RunTimelineItemProps = {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  state: "complete" | "error";
+};
+
+export function RunTimelineEvent({ title, subtitle, state }: RunTimelineItemProps) {
+  return (
+    <div className="grid h-5 grid-cols-[1.125rem_1fr] text-sm">
+      <div className="flex items-center justify-center">
+        <div
+          className={cn(
+            "size-[0.3125rem] rounded-full",
+            state === "complete" ? "bg-success" : "bg-error"
+          )}
+        ></div>
+      </div>
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="font-medium text-text-bright">{title}</span>
+        {subtitle ? <span className="text-xs text-text-dimmed">{subtitle}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+type RunTimelineLineProps = {
+  title: ReactNode;
+  state: "complete" | "delayed" | "inprogress";
+};
+
+export function RunTimelineLine({ title, state }: RunTimelineLineProps) {
+  return (
+    <div className="grid h-6 grid-cols-[1.125rem_1fr] text-xs">
+      <div className="flex items-stretch justify-center">
+        <div
+          className={cn(
+            "w-px",
+            state === "complete" ? "bg-success" : state === "delayed" ? "bg-text-dimmed" : ""
+          )}
+          style={
+            state === "inprogress"
+              ? {
+                  width: "1px",
+                  height: "100%",
+                  background:
+                    "repeating-linear-gradient(to bottom, #3B82F6 0%, #3B82F6 50%, transparent 50%, transparent 100%)",
+                  backgroundSize: "1px 6px",
+                  maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+                  WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+                }
+              : undefined
+          }
+        ></div>
+      </div>
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-text-dimmed">{title}</span>
+      </div>
+    </div>
+  );
+}