Refactor event history routing (#984)

* Refactor event history routing * Remove console.log * Add layout to each page * Remove log * Remove view routes but keep fallback redirect * Update and improve cypress tests * Fix stale data flash by setting loading=true onDestroy of layout of workflow run * Remove console.log * Move clearPreviousEventParameters to layout * Broadcast event view type store * Bump to 2.1.92
temporalio · Dec 9, 2022 · bc21f1e · bc21f1e · vercel · Dec 9, 2022
1 parent 6079d46
commit bc21f1e
Show file tree

Hide file tree

Showing 33 changed files with 231 additions and 186 deletions.
diff --git a/cypress/integration/event-history-empty-states.spec.js b/cypress/integration/event-history-empty-states.spec.js
@@ -23,26 +23,36 @@ describe('Workflow Executions List', () => {
     ).as('workflow-api');
   });
 
-  for (const view of ['feed', 'compact']) {
-    it(`should show an empty state in the ${view} view`, () => {
-      cy.visit(workflowUrl + `/history/${view}`);
+  it(`should show an empty state in the feed view`, () => {
+    cy.visit(workflowUrl + `/history`);
 
-      cy.wait('@workflow-api');
-      cy.wait('@event-history-api');
-      cy.wait('@query-api');
+    cy.wait('@workflow-api');
+    cy.wait('@event-history-api');
 
-      cy.contains('No Events Match');
-    });
-  }
+    cy.contains('No Events Match');
+  });
+
+  it(`should show an empty state in the compact view`, () => {
+    cy.visit(workflowUrl + `/history`);
+
+    cy.wait('@workflow-api');
+    cy.wait('@event-history-api');
+
+    cy.get('[data-cy="compact"]').click();
 
-  it.only('should display a custom empty state if there are events, but no event groups', () => {
+    cy.contains('No Events Match');
+  });
+
+  it('should display a custom empty state if there are events, but no event groups', () => {
     cy.intercept(
       Cypress.env('VITE_API_HOST') +
         `/api/v1/namespaces/default/workflows/*/runs/*/events*`,
       { fixture: 'event-history-with-no-activities.json' },
     ).as('event-history-api');
 
-    cy.visit(workflowUrl + `/history/compact`);
+    cy.visit(workflowUrl + `/history`);
+
+    cy.get('[data-cy="compact"]').click();
 
     cy.contains('No Events Match');
   });

diff --git a/cypress/integration/event-history.spec.js b/cypress/integration/event-history.spec.js
@@ -48,7 +48,7 @@ describe('Workflow Events', () => {
     cy.wait('@workflow-api');
     cy.wait('@event-history-descending');
 
-    cy.url().should('contain', '/feed');
+    cy.url().should('contain', '/history');
   });
 
   it('default to last viewed event view when visiting a workflow', () => {
@@ -57,21 +57,41 @@ describe('Workflow Events', () => {
     cy.wait('@workflow-api');
     cy.wait('@event-history-descending');
 
-    cy.url().should('contain', '/feed');
+    cy.url().should('contain', '/history');
 
-    cy.get('[data-cy="feed"]').click();
-    cy.url().should('contain', '/feed');
+    cy.get('[data-cy="feed"]').should('have.class', 'active');
+    cy.get('[data-cy="compact"]').should('not.have.class', 'active');
+    cy.get('[data-cy="json"]').should('not.have.class', 'active');
+
+    cy.get('[data-cy="compact"]').click();
+
+    cy.visit('/namespaces/default/workflows');
+
+    cy.visit(`/namespaces/default/workflows/${workflowId}/${runId}`);
+
+    cy.url().should('contain', '/history');
+    cy.get('[data-cy="compact"]').should('have.class', 'active');
+    cy.get('[data-cy="json"]').should('not.have.class', 'active');
+    cy.get('[data-cy="feed"]').should('not.have.class', 'active');
+
+    cy.get('[data-cy="event-summary-row"]')
+      .should('not.have.length', 0)
+      .should('not.have.length', eventsFixtureDescending.history.events.length);
+    cy.get('table').contains('activity.timeout');
+
+    cy.get('[data-cy="json"]').click();
 
     cy.visit('/namespaces/default/workflows');
 
     cy.visit(`/namespaces/default/workflows/${workflowId}/${runId}`);
-    cy.url().should('contain', '/feed');
+
+    cy.get('[data-cy="json"]').should('have.class', 'active');
+    cy.get('[data-cy="compact"]').should('not.have.class', 'active');
+    cy.get('[data-cy="feed"]').should('not.have.class', 'active');
   });
 
   it('should render events in feed view', () => {
-    cy.visit(
-      `/namespaces/default/workflows/${workflowId}/${runId}/history/feed`,
-    );
+    cy.visit(`/namespaces/default/workflows/${workflowId}/${runId}/history`);
 
     cy.wait('@workflow-api');
     cy.wait('@event-history-descending');
@@ -85,9 +105,7 @@ describe('Workflow Events', () => {
   });
 
   it('should render event time in various formats', () => {
-    cy.visit(
-      `/namespaces/default/workflows/${workflowId}/${runId}/history/feed`,
-    );
+    cy.visit(`/namespaces/default/workflows/${workflowId}/${runId}/history`);
 
     cy.wait('@workflow-api');
     cy.wait('@event-history-descending');
@@ -111,13 +129,13 @@ describe('Workflow Events', () => {
   });
 
   it('should render events in compact view', () => {
-    cy.visit(
-      `/namespaces/default/workflows/${workflowId}/${runId}/history/compact`,
-    );
+    cy.visit(`/namespaces/default/workflows/${workflowId}/${runId}/history`);
 
     cy.wait('@workflow-api');
     cy.wait('@event-history-descending');
 
+    cy.get('[data-cy="compact"]').click();
+
     cy.get('[data-cy="event-summary-row"]')
       .should('not.have.length', 0)
       .should('not.have.length', eventsFixtureDescending.history.events.length);

diff --git a/cypress/integration/event-ordering-fallback-for-older-versions.spec.js b/cypress/integration/event-ordering-fallback-for-older-versions.spec.js
@@ -1,9 +1,7 @@
 /// <reference types="cypress" />
 
 const visitWorkflow = (suffix = '') => {
-  cy.visit(
-    `/namespaces/default/workflows/workflowId/runId/history/feed${suffix}`,
-  );
+  cy.visit(`/namespaces/default/workflows/workflowId/runId/history${suffix}`);
 };
 
 describe('Fallback to Ascending Ordering of Event History on Older Versions of Temporal Server', () => {

diff --git a/cypress/integration/events-in-ascending-order-in-json-view.spec.js b/cypress/integration/events-in-ascending-order-in-json-view.spec.js
@@ -1,9 +1,9 @@
 /// <reference types="cypress" />
 
 const visitWorkflow = (suffix = '') => {
-  cy.visit(
-    `/namespaces/default/workflows/workflowId/runId/history/json${suffix}`,
-  );
+  cy.visit(`/namespaces/default/workflows/workflowId/runId/history${suffix}`);
+
+  cy.get('[data-cy="json"]').click();
 };
 
 describe('Fallback to Ascending Ordering of Event History on Older Versions of Temporal Server', () => {

diff --git a/cypress/integration/workers.spec.js b/cypress/integration/workers.spec.js
@@ -40,11 +40,72 @@ describe('Workflow Workers', () => {
 
     cy.wait('@namespaces-api');
     cy.wait('@workflow-api');
+    cy.wait('@worker-task-queues-api');
+    cy.wait('@activity-task-queues-api');
   });
 
   it('View both worker and activity poller', () => {
+    cy.get('[data-cy=worker-row]').should('have.length', 1);
+    cy.get('[data-cy=worker-identity]').contains(wtq.pollers[0].identity);
+    cy.get('[data-cy=worker-last-access-time]').contains(
+      dateTz.formatInTimeZone(
+        new Date(atq.pollers[0].lastAccessTime),
+        'UTC',
+        'yyyy-MM-dd z HH:mm:ss.SS',
+      ),
+    );
+
+    cy.get('[data-cy="workflow-poller"] > .text-blue-700').should('exist');
+    cy.get('[data-cy="activity-poller"] > .text-blue-700').should('exist');
+  });
+});
+
+describe('Navigate to Workflow Workers', () => {
+  beforeEach(() => {
+    cy.interceptApi();
+
+    cy.intercept(
+      Cypress.env('VITE_API_HOST') +
+        `/api/v1/namespaces/default/workflows/${workflowId}/runs/${runId}?`,
+      { fixture: 'workflow-completed.json' },
+    ).as('workflow-api');
+
+    cy.intercept(
+      Cypress.env('VITE_API_HOST') +
+        `/api/v1/namespaces/default/task-queues/${name}?taskQueueType=1`,
+      {
+        fixture: 'worker-task-queues.json',
+      },
+    ).as('worker-task-queues-api');
+
+    cy.intercept(
+      Cypress.env('VITE_API_HOST') +
+        `/api/v1/namespaces/default/task-queues/${name}?taskQueueType=2`,
+      {
+        fixture: 'activity-task-queues.json',
+      },
+    ).as('activity-task-queues-api');
+
+    cy.intercept(
+      Cypress.env('VITE_API_HOST') +
+        `/api/v1/namespaces/default/workflows/*/runs/*/events/reverse*`,
+      { fixture: 'event-history-completed-reverse.json' },
+    ).as('event-history-descending');
+
+    cy.visit(`/namespaces/default/workflows/${workflowId}/${runId}`);
+
+    cy.wait('@namespaces-api');
+    cy.wait('@workflow-api');
+    cy.wait('@event-history-descending');
+  });
+
+  it('View both worker and activity poller', () => {
+    cy.url().should('contain', '/history');
+
     cy.get('[data-cy=workers-tab]').click();
 
+    cy.url().should('contain', '/workers');
+
     cy.wait('@worker-task-queues-api');
     cy.wait('@activity-task-queues-api');
 
@@ -93,14 +154,11 @@ describe('Workflow Workers - Workflow Worker Only', () => {
 
     cy.wait('@namespaces-api');
     cy.wait('@workflow-api');
-  });
-
-  it('View workflow worker only poller', () => {
-    cy.get('[data-cy=workers-tab]').click();
-
     cy.wait('@worker-task-queues-api');
     cy.wait('@activity-task-queues-api');
+  });
 
+  it('View workflow worker only poller', () => {
     cy.get('[data-cy=worker-row]').should('have.length', 1);
     cy.get('[data-cy=worker-identity]').contains(wtq.pollers[0].identity);
     cy.get('[data-cy=worker-last-access-time]').contains(
@@ -146,14 +204,11 @@ describe('Workflow Workers - Activity Worker Only', () => {
 
     cy.wait('@namespaces-api');
     cy.wait('@workflow-api');
-  });
-
-  it('View activity worker only poller', () => {
-    cy.get('[data-cy=workers-tab]').click();
-
     cy.wait('@worker-task-queues-api');
     cy.wait('@activity-task-queues-api');
+  });
 
+  it('View activity worker only poller', () => {
     cy.get('[data-cy=worker-row]').should('have.length', 1);
     cy.get('[data-cy=worker-identity]').contains(atq.pollers[0].identity);
     cy.get('[data-cy=worker-last-access-time]').contains(

diff --git a/cypress/integration/workflow-actions.spec.js b/cypress/integration/workflow-actions.spec.js
@@ -25,7 +25,7 @@ describe('Workflow Actions', () => {
   describe('Terminate', () => {
     it('works if the workflow is running and write actions are enabled', () => {
       cy.visit(
-        `/namespaces/default/workflows/${workflowId}/${runId}/history/feed?sort=descending`,
+        `/namespaces/default/workflows/${workflowId}/${runId}/history?sort=descending`,
       );
 
       cy.wait('@settings-api');
@@ -42,7 +42,7 @@ describe('Workflow Actions', () => {
   describe('Cancel', () => {
     it('works if the workflow is running a write actions are enabled', () => {
       cy.visit(
-        `/namespaces/default/workflows/${workflowId}/${runId}/history/feed?sort=descending`,
+        `/namespaces/default/workflows/${workflowId}/${runId}/history?sort=descending`,
       );
 
       cy.wait('@settings-api');
@@ -62,7 +62,7 @@ describe('Workflow Actions', () => {
       }).as('settings-api');
 
       cy.visit(
-        `/namespaces/default/workflows/${workflowId}/${runId}/history/feed?sort=descending`,
+        `/namespaces/default/workflows/${workflowId}/${runId}/history?sort=descending`,
       );
 
       cy.wait('@settings-api');

diff --git a/cypress/integration/workflow-executions-with-new-search.spec.js b/cypress/integration/workflow-executions-with-new-search.spec.js
@@ -205,7 +205,7 @@ describe('Workflow Executions List With Search', () => {
         cy.wait('@workflow-api');
         cy.wait('@event-history-api');
 
-        cy.url().should('contain', '/feed');
+        cy.url().should('contain', '/history');
         cy.get('[data-cy="back-to-workflows"]').click();
 
         cy.url().should(

diff --git a/cypress/integration/workflow-executions.spec.js b/cypress/integration/workflow-executions.spec.js
@@ -110,7 +110,7 @@ describe('Workflow Executions List', () => {
         cy.wait('@workflow-api');
         cy.wait('@event-history-api');
 
-        cy.url().should('contain', '/feed');
+        cy.url().should('contain', '/history');
         cy.get('[data-cy="back-to-workflows"]').click();
 
         cy.url().should(

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@temporalio/ui",
-  "version": "2.1.91",
+  "version": "2.1.92",
   "type": "module",
   "description": "Temporal.io UI",
   "keywords": [

diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
@@ -18,7 +18,6 @@
   import Link from '$lib/holocene/link.svelte';
   import Copyable from '../copyable.svelte';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
-  import { eventViewType } from '$lib/stores/event-view';
 
   export let key: string;
   export let value: string | Record<string, unknown>;
@@ -51,7 +50,6 @@
           <Link
             newTab
             href={routeForEventHistory({
-              view: $eventViewType,
               namespace,
               workflow,
               run: value,
@@ -70,7 +68,6 @@
           <Link
             newTab
             href={routeForEventHistory({
-              view: $eventViewType,
               namespace,
               workflow: attributes.workflowExecutionWorkflowId,
               run: attributes.workflowExecutionRunId,

diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
@@ -18,7 +18,6 @@
   import Link from '$lib/holocene/link.svelte';
   import Copyable from '../copyable.svelte';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
-  import { eventViewType } from '$lib/stores/event-view';
 
   export let key: string;
   export let value: string | Record<string, unknown>;
@@ -49,7 +48,6 @@
             class="truncate"
             newTab
             href={routeForEventHistory({
-              view: $eventViewType,
               namespace,
               workflow,
               run: value,
@@ -69,7 +67,6 @@
             class="truncate"
             newTab
             href={routeForEventHistory({
-              view: $eventViewType,
               namespace,
               workflow: attributes.workflowExecutionWorkflowId,
               run: attributes.workflowExecutionRunId,

diff --git a/src/lib/components/schedule/schedule-recent-runs.svelte b/src/lib/components/schedule/schedule-recent-runs.svelte
@@ -9,7 +9,6 @@
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import { routeForEventHistory } from '$lib/utilities/route-for';
   import Link from '$lib/holocene/link.svelte';
-  import { eventViewType } from '$lib/stores/event-view';
 
   export let recentRuns: ScheduleActionResult[] = [];
   export let namespace: string;
@@ -27,7 +26,6 @@
           <Link
             sveltekit:prefetch
             href={routeForEventHistory({
-              view: $eventViewType,
               workflow: run.startWorkflowResult.workflowId,
               run: run.startWorkflowResult.runId,
               namespace,

diff --git a/src/lib/components/schedule/schedules-table-row.svelte b/src/lib/components/schedule/schedules-table-row.svelte
@@ -12,7 +12,6 @@
 
   import ScheduleFrequency from './schedule-frequency.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
-  import { eventViewType } from '$lib/stores/event-view';
 
   let { namespace } = $page.params;
 
@@ -59,7 +58,6 @@
       <p>
         <Link
           href={routeForEventHistory({
-            view: $eventViewType,
             namespace,
             workflow: run?.startWorkflowResult?.workflowId,
             run: run?.startWorkflowResult?.runId,