fix(orchestrator): set default workflow runs table size to 20 (#1127)

fix(orchestrator): increase default workflow runs table size from 5 to 10

Author: jkilzi

plugins/orchestrator/src/__fixtures__/fakeLongProcessInstanceList.ts

@@ -0,0 +1,65 @@
+import {
+  ProcessInstance,
+  ProcessInstanceState,
+  WorkflowCategory,
+} from '@janus-idp/backstage-plugin-orchestrator-common';
+
+import { fakeWorkflowOverviewList } from './fakeWorkflowOverviewList';
+
+const createValuesGenerator = (counter: number, size: number) => {
+  const baseDate = new Date('2024-02-01');
+  const DAY = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
+  const startDate = new Date(baseDate.getTime() - 30 * DAY); // 30 days ago
+  const endDate = new Date();
+
+  const getNextEnumValue = (enumerator: object) => {
+    const values = Object.values(enumerator);
+    const index = counter % values.length;
+    return values[index];
+  };
+
+  const getNextDate = (): Date => {
+    const startMillis = startDate.getTime();
+    const endMillis = endDate.getTime();
+    const millis =
+      startMillis + ((endMillis - startMillis) / size) * (counter % size); // Assuming 5 states
+    return new Date(millis);
+  };
+
+  return {
+    getNextEnumValue,
+    getNextDate,
+  };
+};
+
+export const generateFakeProcessInstances = (
+  listSize: number,
+): ProcessInstance[] => {
+  const instances: ProcessInstance[] = [];
+
+  for (let i = 0; i < listSize; i++) {
+    const valuesGenerator = createValuesGenerator(i, listSize);
+
+    const randomState = valuesGenerator.getNextEnumValue(ProcessInstanceState);
+    const randomCategory = valuesGenerator.getNextEnumValue(WorkflowCategory);
+
+    instances.push({
+      id: `12f767c1-9002-43af-9515-62a72d0eaf${i}`,
+      processId:
+        fakeWorkflowOverviewList[i % fakeWorkflowOverviewList.length]
+          .workflowId,
+      state: randomState,
+      endpoint: 'enpoint/foo',
+      start: valuesGenerator.getNextDate(),
+      lastUpdate: valuesGenerator.getNextDate(),
+      nodes: [],
+      variables: {},
+      isOpen: false,
+      isSelected: false,
+      category: randomCategory,
+      description: `test description ${i}`,
+    });
+  }
+
+  return instances;
+};

plugins/orchestrator/src/components/WorkflowRunsTabContent.stories.tsx

@@ -4,9 +4,7 @@ import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
 
 import { Meta, StoryObj } from '@storybook/react';
 
-import { WorkflowOverview } from '@janus-idp/backstage-plugin-orchestrator-common';
-
-import { fakeProcessInstances } from '../__fixtures__/fakeProcessInstance';
+import { generateFakeProcessInstances } from '../__fixtures__/fakeLongProcessInstanceList';
 import { fakeWorkflowOverviewList } from '../__fixtures__/fakeWorkflowOverviewList';
 import { orchestratorApiRef } from '../api';
 import { MockOrchestratorClient } from '../api/MockOrchestratorClient';
@@ -19,12 +17,16 @@ const meta = {
   decorators: [
     (Story, context) => {
       const api = new MockOrchestratorClient({
-        getInstancesResponse: Promise.resolve(fakeProcessInstances),
+        getInstancesResponse: Promise.resolve(
+          generateFakeProcessInstances(
+            (context.args as { length: number }).length,
+          ),
+        ),
         listWorkflowsOverviewResponse: Promise.resolve({
           limit: 0,
           offset: 0,
           totalCount: 1,
-          items: (context.args as { items: WorkflowOverview[] }).items,
+          items: fakeWorkflowOverviewList,
         }),
       });
 
@@ -48,9 +50,16 @@ const meta = {
 type Story = StoryObj<typeof meta>;
 
 export const WorkflowRunsTabContentStory: Story = {
-  name: 'Sample 1',
+  name: 'Short list',
+  args: {
+    length: 3,
+  },
+};
+
+export const WorkflowRunsTabContentLongListStory: Story = {
+  name: 'Long list',
   args: {
-    items: fakeWorkflowOverviewList,
+    length: 100,
   },
 };
 

plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx

@@ -18,7 +18,7 @@ import {
 } from '@janus-idp/backstage-plugin-orchestrator-common';
 
 import { orchestratorApiRef } from '../api';
-import { VALUE_UNAVAILABLE } from '../constants';
+import { DEFAULT_TABLE_PAGE_SIZE, VALUE_UNAVAILABLE } from '../constants';
 import usePolling from '../hooks/usePolling';
 import { workflowInstanceRouteRef } from '../routes';
 import { capitalize, ellipsis } from '../utils/StringUtils';
@@ -116,6 +116,7 @@ export const WorkflowRunsTabContent = () => {
     ),
     [statusSelectorValue, statuses],
   );
+  const paging = (value?.length || 0) > DEFAULT_TABLE_PAGE_SIZE; // this behavior fits the backstage catalog table behavior https://github.com/backstage/backstage/blob/v1.14.0/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx#L228
 
   return error ? (
     <ErrorPanel error={error} />
@@ -124,8 +125,9 @@ export const WorkflowRunsTabContent = () => {
       <Table
         title="Workflow Runs"
         options={{
+          paging,
           search: true,
-          paging: true,
+          pageSize: DEFAULT_TABLE_PAGE_SIZE,
         }}
         isLoading={loading}
         columns={columns}

plugins/orchestrator/src/constants.ts

@@ -1,3 +1,4 @@
 export const VALUE_UNAVAILABLE = '---' as const;
 export const SHORT_REFRESH_INTERVAL = 5000;
 export const LONG_REFRESH_INTERVAL = 15000;
+export const DEFAULT_TABLE_PAGE_SIZE = 20;