More storybook states

Author: samejr

apps/webapp/app/routes/storybook.run-and-span-timeline/route.tsx

@@ -38,23 +38,26 @@ const spanTimelines = [
         timestamp: new Date(Date.now() - 5000),
         duration: 4000,
         adminOnly: false,
-        variant: "start-cap",
+        markerVariant: "start-cap",
+        lineVariant: "light",
       },
       {
         name: "Launched",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: false,
-        variant: "dot-hollow",
+        markerVariant: "dot-hollow",
+        lineVariant: "light",
       },
       {
         name: "Imported task file",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: true,
-        variant: "dot-hollow",
+        markerVariant: "dot-hollow",
+        lineVariant: "light",
       },
     ],
   },
@@ -71,15 +74,17 @@ const spanTimelines = [
         timestamp: new Date(Date.now() - 5000),
         duration: 4000,
         adminOnly: false,
-        variant: "start-cap",
+        markerVariant: "start-cap",
+        lineVariant: "light",
       },
       {
         name: "Forked",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: true,
-        variant: "dot-hollow",
+        markerVariant: "dot-hollow",
+        lineVariant: "light",
       },
     ],
   },
@@ -96,15 +101,17 @@ const spanTimelines = [
         timestamp: new Date(Date.now() - 25 * 60 * 60 * 1000),
         duration: 4000,
         adminOnly: false,
-        variant: "start-cap",
+        markerVariant: "start-cap",
+        lineVariant: "light",
       },
       {
         name: "Forked",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: true,
-        variant: "dot-hollow",
+        markerVariant: "dot-hollow",
+        lineVariant: "light",
       },
     ],
   },
@@ -126,6 +133,15 @@ const runTimelines = [
     isFinished: true,
     isError: false,
   },
+  {
+    createdAt: new Date(Date.now() - 1000 * 60),
+    updatedAt: new Date(),
+    startedAt: new Date(Date.now() - 1000 * 30),
+    executedAt: new Date(Date.now() - 1000 * 20),
+    completedAt: new Date(Date.now() - 1000 * 15),
+    isFinished: true,
+    isError: true,
+  },
   {
     createdAt: new Date(Date.now() - 1000 * 60),
     updatedAt: new Date(),