feat(ui): add countdown to cronWorkflowList Closes #4636

ui/package.json

@@ -30,7 +30,7 @@
         "react-chartjs-2": "^2.9.0",
         "react-datepicker": "^2.14.0",
         "react-dom": "^16.8.3",
-        "react-moment": "^0.9.7",
+        "react-moment": "^1.0.0",
         "react-monaco-editor": "^0.36.0",
         "react-router-dom": "^4.2.2",
         "superagent": "^3.8.2",

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

@@ -4,6 +4,7 @@ import {Link, RouteComponentProps} from 'react-router-dom';
 import * as models from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {BasePage} from '../../../shared/components/base-page';
+import {DurationFromNow} from '../../../shared/components/duration-panel';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {Loading} from '../../../shared/components/loading';
@@ -12,6 +13,7 @@ import {ResourceEditor} from '../../../shared/components/resource-editor/resourc
 import {Timestamp} from '../../../shared/components/timestamp';
 import {ZeroState} from '../../../shared/components/zero-state';
 import {Consumer} from '../../../shared/context';
+import {getNextScheduledTime} from '../../../shared/cron';
 import {exampleCronWorkflow} from '../../../shared/examples';
 import {services} from '../../../shared/services';
 import {Utils} from '../../../shared/utils';
@@ -132,9 +134,10 @@ export class CronWorkflowList extends BasePage<RouteComponentProps<any>, State>
                     <div className='row argo-table-list__head'>
                         <div className='columns small-1' />
                         <div className='columns small-3'>NAME</div>
-                        <div className='columns small-3'>NAMESPACE</div>
+                        <div className='columns small-2'>NAMESPACE</div>
                         <div className='columns small-2'>SCHEDULE</div>
-                        <div className='columns small-3'>CREATED</div>
+                        <div className='columns small-2'>CREATED</div>
+                        <div className='columns small-2'>NEXT RUN</div>
                     </div>
                     {this.state.cronWorkflows.map(w => (
                         <Link
@@ -143,16 +146,20 @@ export class CronWorkflowList extends BasePage<RouteComponentProps<any>, State>
                             to={uiUrl(`cron-workflows/${w.metadata.namespace}/${w.metadata.name}`)}>
                             <div className='columns small-1'>{w.spec.suspend ? <i className='fa fa-pause' /> : <i className='fa fa-clock' />}</div>
                             <div className='columns small-3'>{w.metadata.name}</div>
-                            <div className='columns small-3'>{w.metadata.namespace}</div>
+                            <div className='columns small-2'>{w.metadata.namespace}</div>
                             <div className='columns small-2'>{w.spec.schedule}</div>
-                            <div className='columns small-3'>
+                            <div className='columns small-2'>
                                 <Timestamp date={w.metadata.creationTimestamp} />
                             </div>
+                            <div className='columns small-2'>
+                                {w.spec.suspend ? '' : <DurationFromNow getDate={() => getNextScheduledTime(w.spec.schedule, w.spec.timezone)} />}
+                            </div>
                         </Link>
                     ))}
                 </div>
                 <p>
-                    <i className='fa fa-info-circle' /> Cron workflows are workflows that run on a preset schedule. <ExampleManifests />. {learnMore}.
+                    <i className='fa fa-info-circle' /> Cron workflows are workflows that run on a preset schedule. Next scheduled run assumes workflow-controller is in UTC.{' '}
+                    <ExampleManifests />. {learnMore}.
                 </p>
             </>
         );

ui/src/app/cron-workflows/components/cron-workflow-summary-panel.tsx

@@ -5,11 +5,11 @@ import {CronWorkflow} from '../../../models';
 import {ResourceEditor} from '../../shared/components/resource-editor/resource-editor';
 import {Timestamp} from '../../shared/components/timestamp';
 import {ConditionsPanel} from '../../shared/conditions-panel';
+import {getNextScheduledTime} from '../../shared/cron';
 import {services} from '../../shared/services';
 import {WorkflowLink} from '../../workflows/components/workflow-link';
 
 const jsonMergePatch = require('json-merge-patch');
-const parser = require('cron-parser');
 
 interface Props {
     cronWorkflow: CronWorkflow;
@@ -90,16 +90,3 @@ export const CronWorkflowSummaryPanel = (props: Props) => {
 function getCronWorkflowActiveWorkflowList(active: kubernetes.ObjectReference[]) {
     return active.reverse().map(activeWf => <WorkflowLink key={activeWf.uid} namespace={activeWf.namespace} name={activeWf.name} />);
 }
-
-function getNextScheduledTime(schedule: string, tz: string): string {
-    let out = '';
-    try {
-        out = parser
-            .parseExpression(schedule, {utc: !tz, tz})
-            .next()
-            .toISOString();
-    } catch (e) {
-        // Do nothing
-    }
-    return out;
-}

ui/src/app/shared/components/duration-panel.tsx

@@ -1,4 +1,6 @@
+import * as moment from 'moment';
 import * as React from 'react';
+import Moment from 'react-moment';
 import {NODE_PHASE, NodePhase} from '../../../models';
 import {formatDuration} from '../duration';
 import {ProgressLine} from './progress-line';
@@ -17,3 +19,19 @@ export const DurationPanel = (props: {phase: NodePhase; duration: number; estima
     }
     return <>{formatDuration(props.duration)}</>;
 };
+
+export const DurationFromNow = ({getDate, frequency = 1000}: {getDate: () => string; frequency?: number}) => {
+    const [now, setNow] = React.useState(moment());
+    const [date, setDate] = React.useState(getDate);
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(moment());
+            setDate(getDate);
+        }, frequency);
+        return () => {
+            clearInterval(interval);
+        };
+    }, []);
+
+    return <Moment duration={now} date={date} format='dd:hh:mm:ss' />;
+};

ui/src/app/shared/cron.tsx

@@ -0,0 +1,14 @@
+import parser = require('cron-parser');
+
+export function getNextScheduledTime(schedule: string, tz: string): string {
+    let out = '';
+    try {
+        out = parser
+            .parseExpression(schedule, {utc: !tz, tz})
+            .next()
+            .toISOString();
+    } catch (e) {
+        // Do nothing
+    }
+    return out;
+}

ui/yarn.lock

@@ -5251,10 +5251,10 @@ react-lifecycles-compat@^3.0.0:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-moment@^0.9.7:
-  version "0.9.7"
-  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.9.7.tgz#ca570466595b1aa4f7619e62da18b3bb2de8b6f3"
-  integrity sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g==
+react-moment@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-1.0.0.tgz#aedac867cd08739065799de9452c898d954ba6d7"
+  integrity sha512-J4iIiwUT4oZcL7cp2U7naQKbQtqvmzGXXBMg/DLj+Pi7n9EW0VhBRx/1aJ1Tp2poCqTCAPoadLEoUIkReGnNNg==
 
 react-monaco-editor@^0.36.0:
   version "0.36.0"