Event History and Workflow Run store refactor (#1051)

* WIP: removing workflowRun and eventHistory stores

* WIP refactor

* Move up layout logic to +layout, add back stores, need to figure out worker query page logic

* Use page params for params to query

* Use stores, not props to be consistent

* More refactoring, move fetchEvents to event history instead of the page layout

* Remove unused file and bump version

* Bump back down to 2.2.0

Author: Alex-Tideman

Diff for: src/lib/components/event/event-empty-row.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
   import EmptyState from '$lib/holocene/empty-state.svelte';
+  import Loading from '$lib/holocene/loading.svelte';
+
+  export let loading = false;
 </script>
 
 <tr class="row">
   <td class="table-cell" colspan="6">
-    <EmptyState
-      title="No Events Match"
-      content="There are no events that match your filters or selected view. Adjust your filters or view to see your events."
-    />
+    {#if loading}
+      <Loading />
+    {:else}
+      <EmptyState
+        title="No Events Match"
+        content="There are no events that match your filters or selected view. Adjust your filters or view to see your events."
+      />
+    {/if}
   </td>
 </tr>
 

Diff for: src/lib/components/event/event-history-timeline-container.svelte

@@ -16,7 +16,9 @@
   import Badge from '$lib/holocene/badge.svelte';
   import { groupEvents } from '$lib/models/event-groups';
 
-  $: isRunning = $workflowRun.workflow?.isRunning;
+  $: ({ workflow } = $workflowRun);
+
+  $: isRunning = workflow?.isRunning;
 
   let showEventTypeFilter = false;
   let eventTypeValue = '';

Diff for: src/lib/components/event/event-summary.svelte

@@ -1,23 +1,58 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { eventFilterSort, expandAllEvents } from '$lib/stores/event-view';
-  import { eventHistory } from '$lib/stores/events';
+  import {
+    eventFilterSort,
+    type EventSortOrder,
+    expandAllEvents,
+  } from '$lib/stores/event-view';
   import { refresh } from '$lib/stores/workflow-run';
+  import { eventHistory } from '$lib/stores/events';
 
   import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
   import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
   import EventEmptyRow from './event-empty-row.svelte';
   import { groupEvents } from '$lib/models/event-groups';
   import Pagination from '$lib/holocene/pagination.svelte';
+  import { fetchAllEvents } from '$lib/services/events-service';
 
-  export let events: CommonHistoryEvent[];
   export let compact = false;
 
+  $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
+
+  let fullHistory: CommonHistoryEvent[] = [];
+  let loading: boolean = true;
+
+  const resetFullHistory = () => {
+    fullHistory = [];
+    loading = true;
+  };
+
+  const fetchEvents = async (
+    namespace: string,
+    workflowId: string,
+    runId: string,
+    sort: EventSortOrder,
+  ) => {
+    const { settings, user } = $page.data;
+    resetFullHistory();
+    fullHistory = await fetchAllEvents({
+      namespace,
+      workflowId,
+      runId,
+      settings,
+      accessToken: user?.accessToken,
+      sort: compact ? 'ascending' : sort,
+    });
+    loading = false;
+  };
+
+  $: $refresh, fetchEvents(namespace, workflowId, runId, $eventFilterSort);
+
   function handleExpandChange(event: CustomEvent) {
     $expandAllEvents = event.detail.expanded;
   }
 
-  const getEvents = (
+  const getEventsOrGroups = (
     items: CommonHistoryEvent[],
     category: string,
   ): IterableEvent[] => {
@@ -33,10 +68,10 @@
     $eventFilterSort === 'descending' && !compact
       ? $eventHistory?.end
       : $eventHistory?.start;
-  $: currentEvents = events.length ? events : intialEvents;
+  $: currentEvents = fullHistory.length ? fullHistory : intialEvents;
   $: initialItem = currentEvents?.[0];
-  $: items = getEvents(currentEvents, category);
-  $: updating = currentEvents.length && !events.length;
+  $: items = getEventsOrGroups(currentEvents, category);
+  $: updating = currentEvents.length && !fullHistory.length;
 </script>
 
 {#key [$eventFilterSort, category, $refresh]}
@@ -60,7 +95,7 @@
           onRowClick={() => setActiveRowIndex(index)}
         />
       {:else}
-        <EventEmptyRow />
+        <EventEmptyRow {loading} />
       {/each}
     </EventSummaryTable>
   </Pagination>

Diff for: src/lib/components/workflow/pending-activities.svelte

@@ -16,7 +16,8 @@
   } from '$lib/utilities/format-event-attributes';
   import { toTimeDifference } from '$lib/utilities/to-time-difference';
 
-  $: pendingActivities = $workflowRun.workflow?.pendingActivities;
+  $: ({ workflow } = $workflowRun);
+  $: pendingActivities = workflow?.pendingActivities;
 
   $: href = routeForPendingActivities({
     namespace: $page.params.namespace,
@@ -25,7 +26,7 @@
   });
 
   $: canceled = ['Terminated', 'TimedOut', 'Canceled'].includes(
-    $workflowRun.workflow?.status,
+    workflow?.status,
   );
 </script>
 

Diff for: src/lib/components/workflow/workflow-relationships.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { eventHistory } from '$lib/stores/events';
-  import { workflowRun } from '$lib/stores/workflow-run';
   import { routeForEventHistory } from '$lib/utilities/route-for';
+  import { workflowRun } from '$lib/stores/workflow-run';
+  import { eventHistory } from '$lib/stores/events';
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import Badge from '$lib/holocene/badge.svelte';

Diff for: src/lib/components/workflow/workflow-stack-trace-error.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
   import EmptyState from '$lib/holocene/empty-state.svelte';
 
-  import type { GetPollersResponse } from '$lib/services/pollers-service';
-
-  export let workflow: WorkflowExecution;
-  export let workers: GetPollersResponse;
+  import { workflowRun } from '$lib/stores/workflow-run';
 
+  $: ({ workflow, workers } = $workflowRun);
   $: runningWithNoWorkers = workflow.isRunning && !workers?.pollers?.length;
 </script>
 

Diff for: src/lib/components/workflow/workflow-summary.svelte

@@ -10,6 +10,8 @@
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import WorkflowDetail from '$lib/components/workflow/workflow-detail.svelte';
+
+  $: ({ workflow } = $workflowRun);
 </script>
 
 <Accordion
@@ -26,40 +28,36 @@
     <div class="col-span-1 md:col-span-2">
       <h3 class="font-medium">Workflow Type</h3>
       <div class="h-0.5 rounded-full bg-gray-900" />
-      <WorkflowDetail content={$workflowRun.workflow?.name} copyable />
-      <WorkflowDetail
-        title="Run ID"
-        content={$workflowRun.workflow?.runId}
-        copyable
-      />
+      <WorkflowDetail content={workflow?.name} copyable />
+      <WorkflowDetail title="Run ID" content={workflow?.runId} copyable />
     </div>
     <div class="col-span-1">
       <h3 class="font-medium">Task Queue</h3>
       <div class="h-0.5 rounded-full bg-gray-900" />
       <WorkflowDetail
-        content={$workflowRun.workflow?.taskQueue}
+        content={workflow?.taskQueue}
         href={routeForWorkers({
           namespace: $page.params.namespace,
-          workflow: $workflowRun.workflow?.id,
-          run: $workflowRun.workflow?.runId,
+          workflow: workflow?.id,
+          run: workflow?.runId,
         })}
         copyable
       />
       <WorkflowDetail
         title="State Transitions"
-        content={$workflowRun.workflow?.stateTransitionCount}
+        content={workflow?.stateTransitionCount}
       />
     </div>
     <div class="col-span-1">
       <h3 class="font-medium">Start & Close Time</h3>
       <div class="h-0.5 rounded-full bg-gray-900" />
       <WorkflowDetail
         title="Start Time"
-        content={formatDate($workflowRun.workflow?.startTime, $timeFormat)}
+        content={formatDate(workflow?.startTime, $timeFormat)}
       />
       <WorkflowDetail
         title="Close Time"
-        content={formatDate($workflowRun.workflow?.endTime, $timeFormat)}
+        content={formatDate(workflow?.endTime, $timeFormat)}
       />
     </div>
   </div>

Diff for: src/lib/layouts/workflow-header.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-  import Badge from '$lib/holocene/badge.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
   import { onDestroy, onMount } from 'svelte';
   import { fly } from 'svelte/transition';
 
   import { autoRefreshWorkflow } from '$lib/stores/event-view';
   import { workflowsQuery, workflowsSearch } from '$lib/stores/workflows';
-  import { workflowRun, refresh } from '$lib/stores/workflow-run';
+  import { refresh, workflowRun } from '$lib/stores/workflow-run';
   import { eventHistory } from '$lib/stores/events';
 
   import {
@@ -19,8 +17,8 @@
   } from '$lib/utilities/route-for';
   import { toListWorkflowQuery } from '$lib/utilities/query/list-workflow-query';
 
-  import type { GetPollersResponse } from '$lib/services/pollers-service';
-
+  import Badge from '$lib/holocene/badge.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import WorkflowActions from '$lib/components/workflow-actions.svelte';
   import Tab from '$lib/holocene/tab.svelte';
@@ -31,8 +29,8 @@
   import { isCancelInProgress } from '$lib/utilities/cancel-in-progress';
 
   export let namespace: string;
-  export let workflow: WorkflowExecution;
-  export let workers: GetPollersResponse;
+
+  $: ({ workflow, workers } = $workflowRun);
 
   export let terminateEnabled: boolean = false;
   export let cancelEnabled: boolean = false;

Diff for: src/lib/layouts/workflow-history-layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { workflowRun, refresh } from '$lib/stores/workflow-run';
   import { eventViewType } from '$lib/stores/event-view';
-  import { eventHistory } from '$lib/stores/events';
-  import { fetchStartAndEndEvents } from '$lib/services/events-service';
   import { getWorkflowStartedCompletedAndTaskFailedEvents } from '$lib/utilities/get-started-completed-and-task-failed-events';
   import { exportHistory } from '$lib/utilities/export-history';
+  import { workflowRun } from '$lib/stores/workflow-run';
+  import { eventHistory } from '$lib/stores/events';
 
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
@@ -20,31 +19,9 @@
 
   let showShortcuts = false;
 
-  $: namespace = $page.params.namespace;
-  $: workflowId = $page.params.workflow;
-  $: runId = $page.params.run;
-
-  $: $refresh, getStartAndEndEvents(namespace, workflowId, runId);
-
   $: workflowEvents =
     getWorkflowStartedCompletedAndTaskFailedEvents($eventHistory);
 
-  const getStartAndEndEvents = async (
-    namespace: string,
-    workflowId: string,
-    runId: string,
-  ) => {
-    const { settings, user } = $page.data;
-    const events = await fetchStartAndEndEvents({
-      namespace,
-      workflowId,
-      runId,
-      settings,
-      accessToken: user?.accessToken,
-    });
-    $eventHistory = events;
-  };
-
   const onViewClick = (view: EventView) => {
     if ($page.url.searchParams.get('page')) {
       $page.url.searchParams.delete('page');
@@ -56,10 +33,7 @@
 <section class="flex flex-col gap-4">
   <WorkflowSummary />
   <WorkflowRelationships />
-  <WorkflowStackTraceError
-    workflow={$workflowRun.workflow}
-    workers={$workflowRun.workers}
-  />
+  <WorkflowStackTraceError />
   <WorkflowTypedError error={workflowEvents.error} />
   <PendingActivities />
   <section class="flex w-full" data-cy="inputs-results">