feat: show history about completed runs in each cron workflow (#11811)

Signed-off-by: juijeong8324 <juijeong8324@gmail.com>
Co-authored-by: yunwoo-yu <skypnal12@gmail.com>

ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.scss

@@ -0,0 +1,14 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
+.workflows-cron-list .workflows-list {
+  &__status {
+    max-width: 80px;
+    display: flex;
+    align-items: center;
+
+    /* checkboxes are not visible and are unused on this page */
+    &--checkbox {
+      appearance: none;
+    }
+  }
+}

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

@@ -2,19 +2,23 @@ import {NotificationType, Page, SlidingPanel} from 'argo-ui';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';
-import {CronWorkflow, Link} from '../../../../models';
+import * as models from '../../../../models';
+import {CronWorkflow, Link, Workflow} from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {Loading} from '../../../shared/components/loading';
 import {useCollectEvent} from '../../../shared/components/use-collect-event';
+import {ZeroState} from '../../../shared/components/zero-state';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
 import {useQueryParams} from '../../../shared/use-query-params';
 import {WidgetGallery} from '../../../widgets/widget-gallery';
+import {WorkflowsRow} from '../../../workflows/components/workflows-row/workflows-row';
 import {CronWorkflowEditor} from '../cron-workflow-editor';
 
 require('../../../workflows/components/workflow-details/workflow-details.scss');
+require('./cron-workflow-details.scss');
 
 export const CronWorkflowDetails = ({match, location, history}: RouteComponentProps<any>) => {
     // boiler-plate
@@ -25,6 +29,8 @@ export const CronWorkflowDetails = ({match, location, history}: RouteComponentPr
     const [name] = useState(match.params.name);
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
     const [tab, setTab] = useState(queryParams.get('tab'));
+    const [workflows, setWorkflows] = useState<Workflow[]>([]);
+    const [columns, setColumns] = useState<models.Column[]>([]);
 
     const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>();
     const [edited, setEdited] = useState(false);
@@ -62,6 +68,16 @@ export const CronWorkflowDetails = ({match, location, history}: RouteComponentPr
 
     useEffect(() => setEdited(true), [cronWorkflow]);
 
+    useEffect(() => {
+        (async () => {
+            const workflowList = await services.workflows.list(namespace, null, [`${models.labels.cronWorkflow}=${name}`], null);
+            const workflowsInfo = await services.info.getInfo();
+
+            setWorkflows(workflowList.items);
+            setColumns(workflowsInfo.columns);
+        })();
+    }, []);
+
     useCollectEvent('openedCronWorkflowDetails');
 
     const suspendButton =
@@ -207,6 +223,42 @@ export const CronWorkflowDetails = ({match, location, history}: RouteComponentPr
                 <SlidingPanel isShown={!!sidePanel} onClose={() => setSidePanel(null)}>
                     {sidePanel === 'share' && <WidgetGallery namespace={namespace} label={'workflows.argoproj.io/cron-workflow=' + name} />}
                 </SlidingPanel>
+                <>
+                    <ErrorNotice error={error} />
+                    {!workflows ? (
+                        <ZeroState title='No completed cron workflows'>
+                            <p> You can create new cron workflows here or using the CLI. </p>
+                        </ZeroState>
+                    ) : (
+                        <div className='argo-table-list workflows-cron-list'>
+                            <div className='row argo-table-list__head'>
+                                <div className='columns small-1 workflows-list__status' />
+                                <div className='row small-11'>
+                                    <div className='columns small-2'>NAME</div>
+                                    <div className='columns small-1'>NAMESPACE</div>
+                                    <div className='columns small-1'>STARTED</div>
+                                    <div className='columns small-1'>FINISHED</div>
+                                    <div className='columns small-1'>DURATION</div>
+                                    <div className='columns small-1'>PROGRESS</div>
+                                    <div className='columns small-2'>MESSAGE</div>
+                                    <div className='columns small-1'>DETAILS</div>
+                                    <div className='columns small-1'>ARCHIVED</div>
+                                    {(columns || []).map(col => {
+                                        return (
+                                            <div className='columns small-1' key={col.key}>
+                                                {col.name}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                            {/* checkboxes are not visible and are unused on this page */}
+                            {workflows.map(wf => {
+                                return <WorkflowsRow workflow={wf} key={wf.metadata.uid} checked={false} columns={columns} onChange={null} select={null} />;
+                            })}
+                        </div>
+                    )}
+                </>
             </>
         </Page>
     );