From d79502b351a2a546b711064c578f3266596e7aa9 Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Mon, 3 Apr 2023 10:07:19 -0700 Subject: [PATCH 1/2] feat: expose customized UI links and columns Signed-off-by: Remington Breeze --- .../workflows-list/workflows-list.tsx | 23 +++++++++++++++++-- .../workflows-row/workflows-row.tsx | 10 ++++++++ ui/src/models/info.ts | 6 +++++ 3 files changed, 37 insertions(+), 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 index 5082997df92a..6514b3832a2a 100644 --- 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, State> { minStartedAt: this.lastMonth(), maxStartedAt: this.nextDay(), selectedWorkflows: new Map(), - 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()}, () => { this.fetchWorkflows( this.state.namespace, @@ -162,7 +170,12 @@ export class WorkflowsList extends BasePage, 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,11 @@ export class WorkflowsList extends BasePage, State> {
PROGRESS
MESSAGE
DETAILS
+ {(this.state.columns || []).map(col => { + return ( +
{col.name}
+ ); + })} {this.state.workflows.map(wf => { @@ -375,6 +393,7 @@ export class WorkflowsList extends BasePage, 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 index 32515a099d7d..0bdc38ce8547 100644 --- a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx +++ b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx @@ -1,5 +1,6 @@ import {Ticker} from 'argo-ui/src/index'; import * as React from 'react'; +import * as models from '../../../../models'; import {Link} from 'react-router-dom'; import {Workflow} from '../../../../models'; import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations'; @@ -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 + {(this.props.columns || []).map(column => { + const value = wf.metadata.labels[column.key]; + return ( +
+ {value} +
+ ); + })} {this.state.hideDrawer ? ( ) : ( diff --git a/ui/src/models/info.ts b/ui/src/models/info.ts index a4285d5a85f4..9c7a641dced0 100644 --- 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 { From 688e1c79865564e097c8773dcca3b41dc1c4f93b Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Mon, 3 Apr 2023 10:32:36 -0700 Subject: [PATCH 2/2] fix: lint Signed-off-by: Remington Breeze --- .../components/workflows-list/workflows-list.tsx | 14 ++++++++------ .../components/workflows-row/workflows-row.tsx | 2 +- 2 files changed, 9 insertions(+), 7 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 index 6514b3832a2a..3b72fab4791c 100644 --- a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx +++ b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx @@ -122,7 +122,7 @@ export class WorkflowsList extends BasePage, State> { minStartedAt: this.lastMonth(), maxStartedAt: this.nextDay(), selectedWorkflows: new Map(), - batchActionDisabled: {...allBatchActionsEnabled}, + batchActionDisabled: {...allBatchActionsEnabled}, links: [], columns: [] }; @@ -131,7 +131,7 @@ export class WorkflowsList extends BasePage, State> { 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({links, columns: info.columns}); }); this.setState({selectedWorkflows: new Map()}, () => { this.fetchWorkflows( @@ -171,11 +171,11 @@ export class WorkflowsList extends BasePage, State> { iconClassName: 'fa fa-plus', action: () => ctx.navigation.goto('.', {sidePanel: 'submit-new-workflow'}) }, - ...(this.state.links.map(link => ({ + ...this.state.links.map(link => ({ title: link.name, iconClassName: 'fa fa-external-link', - action: () => window.location.href = link.url - }))) + action: () => (window.location.href = link.url) + })) ] } }}> @@ -382,7 +382,9 @@ export class WorkflowsList extends BasePage, State> {
DETAILS
{(this.state.columns || []).map(col => { return ( -
{col.name}
+
+ {col.name} +
); })} diff --git a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx index 0bdc38ce8547..6e24d1f1fbb4 100644 --- a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx +++ b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx @@ -1,7 +1,7 @@ import {Ticker} from 'argo-ui/src/index'; import * as React from 'react'; -import * as models from '../../../../models'; 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';