feat(ui): Add pagination to workflow list. Fixes #1080 and #976

ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx

@@ -1,7 +1,9 @@
 import {Page, SlidingPanel} from 'argo-ui';
 
+import {Ticker} from 'argo-ui/src/index';
 import * as classNames from 'classnames';
 import {isNaN} from 'formik';
+import * as moment from 'moment';
 import * as React from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 import * as models from '../../../../models';
@@ -13,6 +15,7 @@ import {ResourceSubmit} from '../../../shared/components/resource-submit';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {ZeroState} from '../../../shared/components/zero-state';
 import {Consumer} from '../../../shared/context';
+import {formatDuration} from '../../../shared/duration';
 import {exampleWorkflow} from '../../../shared/examples';
 import {services} from '../../../shared/services';
 import {Utils} from '../../../shared/utils';
@@ -219,25 +222,33 @@ export class ArchivedWorkflowList extends BasePage<RouteComponentProps<any>, Sta
  </ZeroState>
  );
  }
+ function wfDuration(workflow: models.WorkflowStatus, now: moment.Moment) {
+ const endTime = workflow.finishedAt ? moment(workflow.finishedAt) : now;
+ return endTime.diff(moment(workflow.startedAt)) / 1000;
+ }
 
  return (
  <>
  <div className='argo-table-list'>
  <div className='row argo-table-list__head'>
  <div className='columns small-1' />
- <div className='columns small-5'>NAME</div>
+ <div className='columns small-4'>NAME</div>
  <div className='columns small-3'>NAMESPACE</div>
- <div className='columns small-3'>CREATED</div>
+ <div className='columns small-2'>STARTED</div>
+ <div className='columns small-2'>DURATION</div>
  </div>
  {this.state.workflows.map(w => (
  <Link className='row argo-table-list__row' key={`${w.metadata.uid}`} to={uiUrl(`archived-workflows/${w.metadata.namespace}/${w.metadata.uid}`)}>
  <div className='columns small-1'>
  <i className={classNames('fa', Utils.statusIconClasses(w.status.phase))} />
  </div>
- <div className='columns small-5'>{w.metadata.name}</div>
+ <div className='columns small-4'>{w.metadata.name}</div>
  <div className='columns small-3'>{w.metadata.namespace}</div>
- <div className='columns small-3'>
- <Timestamp date={w.metadata.creationTimestamp} />
+ <div className='columns small-2'>
+ <Timestamp date={w.status.startedAt} />
+ </div>
+ <div className='columns small-2'>
+ <Ticker>{now => formatDuration(wfDuration(w.status, now))}</Ticker>
  </div>
  </Link>
  ))}

ui/src/app/shared/services/workflows-service.ts

@@ -6,6 +6,8 @@ import {Workflow, WorkflowList} from '../../../models';
 import requests from './requests';
 import {WorkflowDeleteResponse} from './responses';
 
+const fieldsFilter = `fields=items.metadata.name,items.metadata.namespace,items.status.phase,items.status.finishedAt,items.status.startedAt`;
+
 export class WorkflowsService {
  public create(workflow: Workflow, namespace: string) {
  return requests
@@ -14,16 +16,18 @@ export class WorkflowsService {
  .then(res => res.body as Workflow);
  }
 
- public list(namespace: string, phases: string[], labels: string[]) {
- return requests.get(`api/v1/workflows/${namespace}?${this.queryParams({phases, labels}).join('&')}`).then(res => res.body as WorkflowList);
+ public list(namespace: string, phases: string[], labels: string[], offset: string) {
+ return requests
+ .get(`api/v1/workflows/${namespace}?${fieldsFilter}&listOptions.continue=${offset}${this.queryParams({phases, labels}).join('&')}`)
+ .then(res => res.body as WorkflowList);
  }
 
  public get(namespace: string, name: string) {
  return requests.get(`api/v1/workflows/${namespace}/${name}`).then(res => res.body as Workflow);
  }
 
  public watch(filter: {namespace?: string; name?: string; phases?: Array<string>; labels?: Array<string>}): Observable<models.kubernetes.WatchEvent<Workflow>> {
- const url = `api/v1/workflow-events/${filter.namespace || ''}?${this.queryParams(filter).join('&')}`;
+ const url = `api/v1/workflow-events/${filter.namespace || ''}?${fieldsFilter}&${this.queryParams(filter).join('&')}`;
 
  return requests.loadEventSource(url, true).map(data => JSON.parse(data).result as models.kubernetes.WatchEvent<Workflow>);
  }

ui/src/app/workflows/components/index.ts

@@ -1,5 +1,4 @@
 export * from './workflow-dag/workflow-dag';
-export * from './workflow-list-item/workflow-list-item';
 export * from './workflow-logs-viewer/workflow-logs-viewer';
 export * from './workflow-node-info/workflow-node-info';
 export * from './workflow-timeline/workflow-timeline';