feat(ui): add history to WorkflowTemplate & ClusterWorkflowTemplate d…

…etails (#13452) Signed-off-by: panicboat <[email protected]> Signed-off-by: Anton Gilgur <[email protected]> Co-authored-by: Anton Gilgur <[email protected]>
argoproj · Aug 14, 2024 · 282a0d3 · 282a0d3
1 parent 89f2ed1
commit 282a0d3
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 38 deletions.
diff --git a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx
@@ -5,16 +5,19 @@ import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';
 
-import {ClusterWorkflowTemplate} from '../../models';
+import * as models from '../../models';
+import {ClusterWorkflowTemplate, 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/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 {Utils} from '../shared/utils';
+import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
 import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
 
@@ -29,6 +32,8 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
     const [namespace, setNamespace] = useState<string>();
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [tab, setTab] = useState<string>(queryParams.get('tab'));
+    const [workflows, setWorkflows] = useState<Workflow[]>([]);
+    const [columns, setColumns] = useState<models.Column[]>([]);
 
     const [error, setError] = useState<Error>();
     const [template, setTemplate] = useState<ClusterWorkflowTemplate>();
@@ -63,7 +68,11 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
     useEffect(() => {
         (async () => {
             try {
+                const workflowList = await services.workflows.list('', null, [`${models.labels.clusterWorkflowTemplate}=${name}`], {limit: 50});
                 const info = await services.info.getInfo();
+
+                setWorkflows(workflowList.items);
+                setColumns(info.columns);
                 setNamespace(Utils.getNamespaceWithDefault(info.managedNamespace));
                 setError(null);
             } catch (err) {
@@ -147,6 +156,16 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
                     />
                 </SlidingPanel>
             )}
+            <>
+                <ErrorNotice error={error} />
+                {!workflows ? (
+                    <ZeroState title='No completed cluster workflow templates'>
+                        <p> You can create new cluster workflow templates here or using the CLI. </p>
+                    </ZeroState>
+                ) : (
+                    <WorkflowDetailsList workflows={workflows} columns={columns} />
+                )}
+            </>
         </Page>
     );
 }
diff --git a/ui/src/app/cron-workflows/cron-workflow-details.tsx b/ui/src/app/cron-workflows/cron-workflow-details.tsx
@@ -18,11 +18,10 @@ 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 {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 import '../workflows/components/workflow-details/workflow-details.scss';
-import './cron-workflow-details.scss';
 
 export function CronWorkflowDetails({match, location, history}: RouteComponentProps<any>) {
     // boiler-plate
@@ -226,33 +225,7 @@ export function CronWorkflowDetails({match, location, history}: RouteComponentPr
                             <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>
+                        <WorkflowDetailsList workflows={workflows} columns={columns} />
                     )}
                 </>
             </>

diff --git a/ui/src/app/workflow-templates/workflow-template-details.tsx b/ui/src/app/workflow-templates/workflow-template-details.tsx
@@ -5,16 +5,19 @@ import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';
 
-import {WorkflowTemplate} from '../../models';
+import * as models from '../../models';
+import {WorkflowTemplate, 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/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 {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
 import {WorkflowTemplateEditor} from './workflow-template-editor';
 
@@ -28,6 +31,14 @@ export function WorkflowTemplateDetails({history, location, match}: RouteCompone
     const name = match.params.name;
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
     const [tab, setTab] = useState<string>(queryParams.get('tab'));
+    const [workflows, setWorkflows] = useState<Workflow[]>([]);
+    const [columns, setColumns] = useState<models.Column[]>([]);
+
+    const [template, setTemplate] = useState<WorkflowTemplate>();
+    const [error, setError] = useState<Error>();
+    const [edited, setEdited] = useState(false);
+
+    useEffect(() => setEdited(true), [template]);
 
     useEffect(
         useQueryParams(history, p => {
@@ -50,12 +61,6 @@ export function WorkflowTemplateDetails({history, location, match}: RouteCompone
         [namespace, name, sidePanel, tab]
     );
 
-    const [error, setError] = useState<Error>();
-    const [template, setTemplate] = useState<WorkflowTemplate>();
-    const [edited, setEdited] = useState(false);
-
-    useEffect(() => setEdited(true), [template]);
-
     useEffect(() => {
         services.workflowTemplate
             .get(name, namespace)
@@ -65,6 +70,16 @@ export function WorkflowTemplateDetails({history, location, match}: RouteCompone
             .catch(setError);
     }, [name, namespace]);
 
+    useEffect(() => {
+        (async () => {
+            const workflowList = await services.workflows.list(namespace, null, [`${models.labels.workflowTemplate}=${name}`], {limit: 50});
+            const workflowsInfo = await services.info.getInfo();
+
+            setWorkflows(workflowList.items);
+            setColumns(workflowsInfo.columns);
+        })();
+    }, []);
+
     useCollectEvent('openedWorkflowTemplateDetails');
 
     return (
@@ -139,6 +154,16 @@ export function WorkflowTemplateDetails({history, location, match}: RouteCompone
                     {sidePanel === 'share' && <WidgetGallery namespace={namespace} label={'workflows.argoproj.io/workflow-template=' + name} />}
                 </SlidingPanel>
             )}
+            <>
+                <ErrorNotice error={error} />
+                {!workflows ? (
+                    <ZeroState title='No completed workflow templates'>
+                        <p> You can create new workflow templates here or using the CLI. </p>
+                    </ZeroState>
+                ) : (
+                    <WorkflowDetailsList workflows={workflows} columns={columns} />
+                )}
+            </>
         </Page>
     );
 }
diff --git a/...cron-workflows/cron-workflow-details.scss → ...w-details-list/workflow-details-list.scss b/...cron-workflows/cron-workflow-details.scss → ...w-details-list/workflow-details-list.scss
@@ -1,6 +1,6 @@
 @import 'node_modules/argo-ui/src/styles/config';
 
-.workflows-cron-list .workflows-list {
+.workflows-details-list .workflows-list {
   &__status {
     max-width: 80px;
     display: flex;

diff --git a/ui/src/app/workflows/components/workflow-details-list/workflow-details-list.tsx b/ui/src/app/workflows/components/workflow-details-list/workflow-details-list.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import * as models from '../../../../models';
+import {WorkflowsRow} from '../../../workflows/components/workflows-row/workflows-row';
+
+import './workflow-details-list.scss';
+
+interface WorkflowDetailsList {
+    workflows: models.Workflow[];
+    columns: models.Column[];
+}
+
+export function WorkflowDetailsList(props: WorkflowDetailsList) {
+    return (
+        <div className='argo-table-list workflows-details-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>
+                    {(props.columns || []).map(col => {
+                        return (
+                            <div className='columns small-1' key={col.key}>
+                                {col.name}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+            {/* checkboxes are not visible and are unused in details pages */}
+            {props.workflows.map(wf => {
+                return <WorkflowsRow workflow={wf} key={wf.metadata.uid} checked={false} columns={props.columns} onChange={null} select={null} />;
+            })}
+        </div>
+    );
+}