Implement compact view for activities

src/lib/components/event-details.svelte

@@ -11,7 +11,7 @@
 
 {#each Object.entries(attributes) as [key, value]}
   <article
-    class="flex items-center content-start w-full py-4 border-t-2 first:border-t-0 border-gray-300"
+    class="flex items-center content-start w-full border-b-2 last:border-t-0 border-gray-300 py-4"
   >
     <h4 class="w-96 flex-grow">{format(key)}</h4>
     <div class="flex-grow w-full">
@@ -23,6 +23,8 @@
         <CodeBlock content={value} />
       {:else if value}
         <p><span class="bg-gray-300 text-gray-700 px-2">{value}</span></p>
+      {:else}
+        <p class="text-gray-500">Undefined</p>
       {/if}
     </div>
   </article>

src/lib/models/activity.ts

@@ -43,6 +43,10 @@ export class Activity {
     return this._events.get(type);
   }
 
+  toArray(): HistoryEventWithId[] {
+    return [...this];
+  }
+
   get events(): typeof this._events {
     return this._events;
   }

src/lib/utilities/route-for.ts

@@ -7,6 +7,7 @@ type RoutePath =
   | 'workflow.events.full.pending'
   | 'workflow.events.compact'
   | 'workflow.events.compact.activity'
+  | 'workflow.events.compact.activity.event'
   | 'workflow.events.json'
   | 'workflow.stack-trace'
   | 'workflow.query'
@@ -23,13 +24,17 @@ export type WorkflowParameters = {
 export type EventParameter = {
   eventId: string;
 } & WorkflowParameters;
+export type ActivityParameter = {
+  activityId: string;
+} & EventParameter;
 export type TaskQueueParameter = {
   queue: string;
 } & NamespaceParameter;
 
 export type RouteParameters = NamespaceParameter &
   WorkflowParameters &
   EventParameter &
+  ActivityParameter &
   TaskQueueParameter;
 
 const routeForNamespace = ({ namespace }: NamespaceParameter): string => {
@@ -68,6 +73,19 @@ const routeForEventHistoryItem = (
   return `${routeForEventHistory(parameters, view)}/${eventType}-${eventId}`;
 };
 
+const routeForActivity = (
+  parameters: WorkflowParameters,
+  view: EventHistoryView,
+  eventType: EventView,
+  activityId: string,
+  eventId: string,
+): string => {
+  return `${routeForEventHistory(
+    parameters,
+    view,
+  )}/${eventType}-${eventId}/events/${activityId}`;
+};
+
 const routeForWorkers = ({ queue, ...parameters }: TaskQueueParameter) => {
   return `${routeForNamespace(parameters)}/workers/${queue}`;
 };
@@ -94,6 +112,10 @@ export function routeFor(
     | 'workflow.events.compact.activity',
   parameters: EventParameter,
 ): string;
+export function routeFor(
+  path: 'workflow.events.compact.activity.event',
+  parameters: ActivityParameter,
+): string;
 export function routeFor(
   path: 'workers',
   parameters: TaskQueueParameter,
@@ -150,6 +172,16 @@ export function routeFor(path: RoutePath, parameters: RouteParameters): string {
     );
   }
 
+  if (path === 'workflow.events.compact.activity.event') {
+    return routeForActivity(
+      parameters,
+      'compact',
+      'activity',
+      parameters.eventId,
+      parameters.activityId,
+    );
+  }
+
   if (path === 'workflow.query') {
     return routeForWorkflow(parameters) + '/query';
   }

src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/__layout.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <EventTable events={activities}>
-  <div slot="details" class="w-full h-full">
+  <div slot="details" class="w-full h-full py-4">
     <slot />
   </div>
 </EventTable>

src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/__layout.svelte

@@ -0,0 +1,69 @@
+<script context="module" lang="ts">
+  import type { EventParameter } from '$lib/utilities/route-for';
+  import type { LoadInput } from '@sveltejs/kit';
+
+  export async function load({ page, stuff }: LoadInput) {
+    const {
+      workflow: workflowId,
+      run: runId,
+      namespace,
+      eventId,
+    } = page.params;
+
+    const { events } = stuff as {
+      events: HistoryEventWithId[];
+    };
+
+    return {
+      props: {
+        events,
+        params: {
+          workflowId,
+          runId,
+          namespace,
+          eventId,
+        },
+      },
+    };
+  }
+</script>
+
+<script lang="ts">
+  import { Activities } from '$lib/models/activity';
+  import { routeFor } from '$lib/utilities/route-for';
+  import { page } from '$app/stores';
+
+  export let events: HistoryEventWithId[];
+  export let params: EventParameter;
+
+  let activities = new Activities(events);
+  let activity = activities.get(params.eventId);
+
+  const getHref = (event: HistoryEventWithId) =>
+    routeFor('workflow.events.compact.activity.event', {
+      ...params,
+      activityId: activity.id,
+      eventId: event.id,
+    });
+</script>
+
+<div class="flex flex-col w-full h-full">
+  <nav class="mb-4">
+    <ul class="flex gap-4 w-full items-start">
+      {#each activity.toArray() as event}
+        <li>
+          <a href={getHref(event)} class:active={$page.path === getHref(event)}>
+            {event.eventType}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </nav>
+  <slot />
+</div>
+
+<style lang="postcss">
+  .active {
+    @apply text-blue-700 border-b-2 border-blue-600;
+  }
+</style>

src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/events/[id].svelte

@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+  import type { LoadInput } from '@sveltejs/kit';
+
+  export async function load({ stuff, page }: LoadInput) {
+    const { events } = stuff as {
+      events: HistoryEventWithId[];
+    };
+
+    return {
+      props: {
+        event: events.find((event) => event.id === page.params.id),
+      },
+    };
+  }
+</script>
+
+<script lang="ts">
+  import EventDetails from '$lib/components/event-details.svelte';
+
+  export let event: HistoryEventWithId;
+</script>
+
+<EventDetails attributes={event.attributes} />

src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/index.svelte

@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+  import { routeFor } from '$lib/utilities/route-for';
+
+  export async function load({ page }) {
+    const {
+      workflow: workflowId,
+      run: runId,
+      namespace,
+      eventId,
+    } = page.params;
+
+    return {
+      status: 302,
+      redirect: routeFor('workflow.events.compact.activity.event', {
+        namespace,
+        workflowId,
+        runId,
+        eventId,
+        activityId: eventId,
+      }),
+    };
+  }
+</script>

src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/full/__layout.svelte

@@ -45,7 +45,7 @@
       <Option value="workflow">Workflow</Option>
     </FilterSelect>
   </div>
-  <div slot="details" class="w-full h-full">
+  <div slot="details" class="w-full h-full py-4">
     <slot />
   </div>
 </EventTable>