feat: Expose customized UI links and columns (#10808)

Signed-off-by: Remington Breeze <remington@breeze.software>
argoproj · Apr 6, 2023 · 49890ec · 49890ec
1 parent 3ed6887
commit 49890ec
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -41,6 +41,8 @@ interface State {
     resourceVersion?: string;
     error?: Error;
     batchActionDisabled: Actions.OperationDisabled;
+    links: models.Link[];
+    columns: models.Column[];
 }
 
 interface WorkflowListRenderOptions {
@@ -120,11 +122,17 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
             minStartedAt: this.lastMonth(),
             maxStartedAt: this.nextDay(),
             selectedWorkflows: new Map<string, models.Workflow>(),
-            batchActionDisabled: {...allBatchActionsEnabled}
+            batchActionDisabled: {...allBatchActionsEnabled},
+            links: [],
+            columns: []
         };
     }
 
     public componentDidMount(): void {
+        services.info.getInfo().then(info => {
+            const links = (info.links || []).filter(link => link.scope === 'workflow-list');
+            this.setState({links, columns: info.columns});
+        });
         this.setState({selectedWorkflows: new Map<string, models.Workflow>()}, () => {
             this.fetchWorkflows(
                 this.state.namespace,
@@ -162,7 +170,12 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                                         title: 'Submit New Workflow',
                                         iconClassName: 'fa fa-plus',
                                         action: () => ctx.navigation.goto('.', {sidePanel: 'submit-new-workflow'})
-                                    }
+                                    },
+                                    ...this.state.links.map(link => ({
+                                        title: link.name,
+                                        iconClassName: 'fa fa-external-link',
+                                        action: () => (window.location.href = link.url)
+                                    }))
                                 ]
                             }
                         }}>
@@ -367,6 +380,13 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                                     <div className='columns small-1'>PROGRESS</div>
                                     <div className='columns small-2'>MESSAGE</div>
                                     <div className='columns small-1'>DETAILS</div>
+                                    {(this.state.columns || []).map(col => {
+                                        return (
+                                            <div className='columns small-1' key={col.key}>
+                                                {col.name}
+                                            </div>
+                                        );
+                                    })}
                                 </div>
                             </div>
                             {this.state.workflows.map(wf => {
@@ -375,6 +395,7 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                                         workflow={wf}
                                         key={wf.metadata.uid}
                                         checked={this.state.selectedWorkflows.has(wf.metadata.uid)}
+                                        columns={this.state.columns}
                                         onChange={key => {
                                             const value = `${key}=${wf.metadata.labels[key]}`;
                                             let newTags: string[] = [];

diff --git a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
@@ -1,6 +1,7 @@
 import {Ticker} from 'argo-ui/src/index';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
+import * as models from '../../../../models';
 import {Workflow} from '../../../../models';
 import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations';
 import {uiUrl} from '../../../shared/base';
@@ -15,6 +16,7 @@ interface WorkflowsRowProps {
     onChange: (key: string) => void;
     select: (wf: Workflow) => void;
     checked: boolean;
+    columns: models.Column[];
 }
 
 interface WorkflowRowState {
@@ -85,6 +87,14 @@ export class WorkflowsRow extends React.Component<WorkflowsRowProps, WorkflowRow
                                 </div>
                             </div>
                         </div>
+                        {(this.props.columns || []).map(column => {
+                            const value = wf.metadata.labels[column.key];
+                            return (
+                                <div key={column.name} className='columns small-1'>
+                                    {value}
+                                </div>
+                            );
+                        })}
                         {this.state.hideDrawer ? (
                             <span />
                         ) : (

diff --git a/ui/src/models/info.ts b/ui/src/models/info.ts
@@ -4,11 +4,17 @@ export interface Link {
     url: string;
 }
 
+export interface Column {
+    name: string;
+    type: string;
+    key: string;
+}
 export interface Info {
     modals: {string: boolean};
     managedNamespace?: string;
     links?: Link[];
     navColor?: string;
+    columns: Column[];
 }
 
 export interface Version {