feat: show history about completed runs in each cron workflow

Co-authored-by: yunwoo-yu <skypnal12@gmail.com>
argoproj · Sep 13, 2023 · 08afa9f · 08afa9f
1 parent 9b7b780
commit 08afa9f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.scss b/ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.scss
@@ -0,0 +1,13 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
+.workflows-list {
+  &__status {
+    max-width: 80px;
+    display: flex;
+    align-items: center;
+
+    &--checkbox {
+      appearance: none;
+    }
+  }
+}
diff --git a/ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.tsx b/ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.tsx
@@ -2,7 +2,8 @@ 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';
@@ -12,9 +13,12 @@ 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';
+import {ZeroState} from '../../../shared/components/zero-state';
 
 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,18 @@ export const CronWorkflowDetails = ({match, location, history}: RouteComponentPr
 
     useEffect(() => setEdited(true), [cronWorkflow]);
 
+    useEffect(() => {
+        const getWorkflowsList = 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);
+        };
+
+        getWorkflowsList();
+    }, []);
+
     useCollectEvent('openedCronWorkflowDetails');
 
     const suspendButton =
@@ -207,7 +225,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 submit or resume cron workflow to run a cron-workflow. </p>
+                        </ZeroState>
+                    ) : (
+                        <div className='argo-table-list'>
+                            <div className='row argo-table-list__head'>
+                                <div className='columns small-1 workflows-list__status'></div>
+                                <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>
+                            {workflows.map(wf => {
+                                return <WorkflowsRow workflow={wf} key={wf.metadata.uid} checked={false} columns={columns} onChange={null} select={null} />;
+                            })}
+                        </div>
+                    )}
+                </>
             </>
         </Page>
     );
-};
+};