From df5d0a81ece88776bf14f8165d6229905735275a Mon Sep 17 00:00:00 2001
From: Steve Kinney <hello@stevekinney.net>
Date: Thu, 30 Dec 2021 08:51:01 -0800
Subject: [PATCH] Implement compact view for activities

---
 src/lib/components/event-details.svelte       |  4 +-
 src/lib/models/activity.ts                    |  4 ++
 src/lib/utilities/route-for.ts                | 32 +++++++++
 .../[run]/history/compact/__layout.svelte     |  2 +-
 .../activity-[eventId]/__layout.svelte        | 69 +++++++++++++++++++
 .../activity-[eventId]/events/[id].svelte     | 23 +++++++
 .../compact/activity-[eventId]/index.svelte   | 23 +++++++
 .../history/compact/activity-[id].svelte      | 29 --------
 .../[run]/history/full/__layout.svelte        |  2 +-
 9 files changed, 156 insertions(+), 32 deletions(-)
 create mode 100644 src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/__layout.svelte
 create mode 100644 src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/events/[id].svelte
 create mode 100644 src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/index.svelte
 delete mode 100644 src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[id].svelte

diff --git a/src/lib/components/event-details.svelte b/src/lib/components/event-details.svelte
index d64e37d66e..ea5562866f 100644
--- a/src/lib/components/event-details.svelte
+++ b/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>
diff --git a/src/lib/models/activity.ts b/src/lib/models/activity.ts
index 5a9b1e8c94..9083255723 100644
--- a/src/lib/models/activity.ts
+++ b/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;
   }
diff --git a/src/lib/utilities/route-for.ts b/src/lib/utilities/route-for.ts
index f145155783..3841f7beae 100644
--- a/src/lib/utilities/route-for.ts
+++ b/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,6 +24,9 @@ export type WorkflowParameters = {
 export type EventParameter = {
   eventId: string;
 } & WorkflowParameters;
+export type ActivityParameter = {
+  activityId: string;
+} & EventParameter;
 export type TaskQueueParameter = {
   queue: string;
 } & NamespaceParameter;
@@ -30,6 +34,7 @@ export type TaskQueueParameter = {
 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';
   }
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/__layout.svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/__layout.svelte
index 464276728f..ca6a50663c 100644
--- a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/__layout.svelte
+++ b/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>
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/__layout.svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/__layout.svelte
new file mode 100644
index 0000000000..1cce372a8c
--- /dev/null
+++ b/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>
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/events/[id].svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/events/[id].svelte
new file mode 100644
index 0000000000..5cc6c9fbd2
--- /dev/null
+++ b/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} />
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/index.svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[eventId]/index.svelte
new file mode 100644
index 0000000000..cce3afc1cb
--- /dev/null
+++ b/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>
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[id].svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[id].svelte
deleted file mode 100644
index 8354a915fa..0000000000
--- a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/compact/activity-[id].svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script context="module" lang="ts">
-  import type { LoadInput } from '@sveltejs/kit';
-
-  export async function load({ stuff }: LoadInput) {
-    const { events } = stuff as {
-      events: HistoryEventWithId[];
-    };
-
-    return {
-      props: {
-        events,
-      },
-    };
-  }
-</script>
-
-<script lang="ts">
-  import { page } from '$app/stores';
-  import { Activities } from '$lib/models/activity';
-
-  export let events: HistoryEventWithId[];
-
-  const activities = new Activities(events);
-  const activity = activities.get($page.params.id);
-</script>
-
-<div class="flex items-center justify-center w-full h-full">
-  <p>{activity.name} (To be implemented.)</p>
-</div>
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/full/__layout.svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/full/__layout.svelte
index a19e3efe43..535c808712 100644
--- a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/full/__layout.svelte
+++ b/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>