Implement Rudimentary UI

src/lib/utilities/format-date.ts

@@ -0,0 +1,6 @@
+import { format } from 'date-fns';
+
+export function formatDate(date: string | null): string {
+  if (!date) return '';
+  return format(new Date(date), 'MMMM dd, yyyy — h:mm a');
+}

src/routes/__layout.svelte

@@ -33,7 +33,6 @@
 <style>
   main {
     display: grid;
-    grid-gap: 24px;
     grid-template-columns: 0fr 1fr;
   }
 

src/routes/api/workflows/[workflow]/[run]/history.ts

@@ -0,0 +1,17 @@
+const apiHost = process.env.TEMPORAL_API_HOST || 'http://localhost:8088';
+
+export async function get({ params, query }) {
+  const { workflow: workflowId, run: runId } = params;
+
+  const response = await fetch(
+    `${apiHost}/api/namespaces/default/workflows/${workflowId}/${runId}/history?{query}`,
+  );
+
+  const history = await response.json();
+
+  return {
+    body: {
+      ...history,
+    },
+  };
+}

src/routes/api/workflows/[workflow]/[run]/index.ts

@@ -0,0 +1,17 @@
+const apiHost = process.env.TEMPORAL_API_HOST || 'http://localhost:8088';
+
+export async function get({ params }) {
+  const { workflow: workflowId, run: runId } = params;
+
+  const response = await fetch(
+    `${apiHost}/api/namespaces/default/workflows/${workflowId}/${runId}`,
+  );
+
+  const workflow = await response.json();
+
+  return {
+    body: {
+      ...workflow,
+    },
+  };
+}

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

@@ -0,0 +1,136 @@
+<script context="module">
+  export async function load({ fetch, page }) {
+    const { workflow: id, run } = page.params;
+    const workflowResponse = await fetch(`/api/workflows/${id}/${run}`);
+    const historyResponse = await fetch(
+      `/api/workflows/${id}/${run}/history?waitForHistory=true`,
+    );
+
+    if (!workflowResponse.ok) {
+      const message = `An error has occured: ${workflowResponse.status}`;
+      throw new Error(message);
+    }
+
+    if (!historyResponse.ok) {
+      const message = `An error has occured: ${workflowResponse.status}`;
+      throw new Error(message);
+    }
+
+    const workflow = await workflowResponse.json();
+    const { history } = await historyResponse.json();
+
+    const name = workflow.workflowExecutionInfo.type.name;
+    const workflowId = workflow.workflowExecutionInfo.execution.workflowId;
+    const runId = workflow.workflowExecutionInfo.execution.runId;
+    const events = history.events;
+
+    const lastEvent = events[events.length - 1];
+    const input = lastEvent.details.input && lastEvent.details.input.payloads;
+    const result =
+      lastEvent.details.result && lastEvent.details.result.payloads;
+
+    return {
+      props: {
+        workflow,
+        name,
+        workflowId,
+        runId,
+        events,
+        input,
+        result,
+      },
+    };
+  }
+</script>
+
+<script lang="ts">
+  import { formatDate } from '$lib/utilities/format-date';
+
+  export let workflow;
+  export let name;
+  export let workflowId;
+  export let runId;
+  export let events;
+  export let input;
+  export let result;
+
+  console.log(workflow);
+</script>
+
+<section>
+  <header>
+    <h1>{name}</h1>
+    <p>{runId}</p>
+  </header>
+  <main>
+    <h3>Start Time</h3>
+    <p>{formatDate(workflow.workflowExecutionInfo.startTime)}</p>
+    <h3>End Time</h3>
+    {#if workflow.workflowExecutionInfo.closeTime}
+      <p>{formatDate(workflow.workflowExecutionInfo.closeTime)}</p>
+    {:else}
+      <p>Still running…</p>
+    {/if}
+    <h3>Task Queue</h3>
+    <p>{workflow.workflowExecutionInfo.taskQueue || '(None)'}</p>
+    <h3>History Events</h3>
+    <p>{events.length}</p>
+    {#if input}
+      <h3>Input</h3>
+      <code>
+        <pre>
+          {JSON.stringify(input)}
+        </pre>
+      </code>
+    {/if}
+    {#if result}
+      <h3>Result</h3>
+      <code>
+        <pre>
+          {JSON.stringify(result)}
+        </pre>
+      </code>
+    {/if}
+  </main>
+</section>
+
+<style>
+  section {
+    min-width: 400px;
+    width: 33%;
+    border-left: 1px solid #e5e7eb;
+    height: 100vh;
+  }
+
+  header {
+    padding: 24px 16px;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  header h1 {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+    margin: 0;
+  }
+
+  header p {
+    color: #6b7280;
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+  }
+
+  main {
+    padding: 24px 16px;
+  }
+
+  code {
+  }
+
+  pre {
+    padding: 16px;
+    background-color: #f3f4f6;
+    overflow-x: scroll;
+  }
+</style>

src/routes/workflows/__layout.svelte

@@ -6,8 +6,7 @@
     const endTime = addDays(new Date(), 30).toISOString();
 
     const query = new URLSearchParams({ startTime, endTime });
-
-    const response = await fetch(`/api/workflows.json?${query.toString()}`);
+    const response = await fetch(`/api/workflows?${query}`);
 
     if (!response.ok) {
       const message = `An error has occured: ${response.status}`;
@@ -25,20 +24,152 @@
   }
 </script>
 
-<script>
+<script lang="ts">
+  import { formatDate } from '$lib/utilities/format-date';
+
   export let workflows;
 </script>
 
-<h2>Workflows</h2>
+<section id="workflows">
+  <table>
+    <thead>
+      <tr>
+        <th>Workflow/Run ID</th>
+        <th>Status</th>
+        <th>Started</th>
+        <th>Ended</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#await workflows}
+        <p>Loading…</p>
+      {:then workflows}
+        {#each workflows.executions as workflow}
+          <tr>
+            <td>
+              <a
+                href="/workflows/{workflow.execution.workflowId}/{workflow
+                  .execution.runId}"
+              >
+                <h3>
+                  {workflow.type.name}
+                </h3>
+                <p>
+                  {workflow.execution.runId}
+                </p>
+              </a>
+            </td>
+            <td>
+              <a
+                href="/workflows/{workflow.execution.workflowId}/{workflow
+                  .execution.runId}"
+              >
+                <p class="workflow-status">{workflow.status}</p>
+              </a>
+            </td>
+            <td>
+              <a
+                href="/workflows/{workflow.execution.workflowId}/{workflow
+                  .execution.runId}"
+              >
+                <p>{formatDate(workflow.startTime)}</p>
+              </a>
+            </td>
+            <td>
+              <a
+                href="/workflows/{workflow.execution.workflowId}/{workflow
+                  .execution.runId}"
+              >
+                <p>{formatDate(workflow.closeTime)}</p>
+              </a>
+            </td>
+          </tr>
+        {/each}
+      {:catch}
+        <p>There was an error.</p>
+      {/await}
+    </tbody>
+  </table>
+  <slot />
+</section>
+
+<style>
+  #workflows {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  a {
+    text-decoration: none;
+    display: block;
+    padding: 16px 24px;
+    height: 100%;
+    width: 100%;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  thead tr {
+    background: #f9fafb;
+  }
+
+  th {
+    background: #f9fafb;
+    color: #6b7280;
+    font-size: 12px;
+    height: 40px;
+    letter-spacing: 0.05em;
+    line-height: 16px;
+    margin: 0;
+    padding: 12px 24px;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  tbody {
+    background: #f3f4f6;
+  }
+
+  tbody tr {
+    background: #f3f4f6;
+  }
+
+  tbody tr:hover {
+    background: #eeeff1;
+  }
+
+  tbody td {
+    padding: 0;
+  }
+
+  tbody h3 {
+    color: #111827;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+  }
 
-{#await workflows}
-  <p>Loading…</p>
-{:then workflows}
-  {#each workflows.executions as workflow}
-    <p>{workflow.execution.workflowId}</p>
-  {/each}
-{:catch}
-  <p>There was an error.</p>
-{/await}
+  tbody p {
+    color: #6b7280;
+    font-size: 14px;
+    margin: 0;
+  }
 
-<slot />
+  tbody p.workflow-status {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    color: #065f46;
+    padding: 2px 10px;
+    background: #d1fae5;
+    border-radius: 10px;
+  }
+</style>

static/css/global.css

@@ -5,5 +5,5 @@
 }
 
 body {
-  font-family: Inter;
+  font-family: Inter, sans-serif;
 }