Initial implementation of event history

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "date-fns": "^2.22.1",
+    "json-beautify": "^1.1.1",
     "svelte-hero-icons": "^2.2.0"
   },
   "devDependencies": {

src/routes/__layout.svelte

@@ -17,7 +17,7 @@
 
 <main class="flex align-start">
   <Navigation />
-  <div class="w-full">
+  <div class="w-full overflow-y-scroll">
     <slot />
   </div>
 </main>

src/routes/workflows/[workflow]/[run].svelte

@@ -1,5 +1,8 @@
 <script context="module" lang="ts">
-  import type { DescribeWorkflowExecutionResponse } from '$types/temporal/api/workflowservice/v1/request_response';
+  import type {
+    DescribeWorkflowExecutionResponse,
+    GetWorkflowExecutionHistoryResponse,
+  } from '$types/temporal/api/workflowservice/v1/request_response';
   import type { LoadInput } from '@sveltejs/kit';
 
   export async function load({ fetch, page }: LoadInput) {
@@ -11,9 +14,16 @@
       .then((response) => response.json())
       .catch(console.error);
 
+    const events: GetWorkflowExecutionHistoryResponse = await fetch(
+      `http://localhost:8080/api/v1/namespaces/default/workflows/${id}/executions/${run}/events`,
+    )
+      .then((response) => response.json())
+      .catch(console.error);
+
     return {
       props: {
         execution,
+        events,
       },
     };
   }
@@ -27,8 +37,12 @@
   import Header from './_header.svelte';
   import ExecutionInformation from './_execution-information.svelte';
   import PendingActivities from './_pending-activities.svelte';
+  import Events from './_events.svelte';
 
   export let execution: DescribeWorkflowExecutionResponse;
+  export let events: GetWorkflowExecutionHistoryResponse;
+
+  let { history } = events;
 
   $: workflow = new WorkflowExecutionResponse(execution);
 </script>
@@ -54,6 +68,11 @@
         <PendingActivities activities={workflow.pendingActivities} />
       </div>
     </div>
+    {#if $isFullScreen}
+      <div class="px-6 py-6">
+        <Events {history} />
+      </div>
+    {/if}
   </main>
 </section>
 
@@ -64,6 +83,7 @@
 
   .sidebar {
     width: 600px;
+    overflow-y: scroll;
   }
 
   .full .execution-information {

src/routes/workflows/[workflow]/_event.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import beautify from 'json-beautify';
+  import { formatDate } from '$lib/utilities/format-date';
+  import { HistoryEvent } from '$types/temporal/api/history/v1/message';
+  export let event: HistoryEvent;
+  export let index: number;
+
+  let even = !(index % 2);
+  let odd = !even;
+</script>
+
+<tr class:even class:odd>
+  <td>{event.eventId}</td>
+  <td>{event.eventType}</td>
+  <td>{formatDate(event.eventTime)}</td>
+  <td><pre><code>{beautify(event, null, 2, 80)}</code></pre></td>
+</tr>
+
+<style>
+  tr {
+    @apply my-4;
+    @apply py-4;
+  }
+
+  td {
+    vertical-align: top;
+    @apply p-4;
+  }
+
+  .even {
+    @apply bg-gray-100;
+  }
+
+  .even {
+    @apply bg-gray-50;
+  }
+</style>

src/routes/workflows/[workflow]/_events.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Event from './_event.svelte';
+  import { History } from '$types/temporal/api/history/v1/message';
+
+  export let history: History;
+</script>
+
+<section>
+  <h2 class="text-lg">Events</h2>
+
+  <table class="border-collapse w-full border-2">
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Type</th>
+        <th>Time</th>
+        <th>Details</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each history.events as event, index}
+        <Event {event} {index} />
+      {/each}
+    </tbody>
+  </table>
+</section>
+
+<style lang="postcss">
+  th {
+    @apply bg-gray-200;
+    @apply text-gray-500;
+    @apply text-xs;
+    @apply h-6;
+    @apply m-0;
+    @apply p-3;
+    @apply text-left;
+    @apply uppercase;
+  }
+</style>