forked from argoproj/argo-workflows
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: UI enhancement for Cluster Workflow Template (argoproj#2525)
- Loading branch information
1 parent
0801a42
commit 59f746e
Showing
17 changed files
with
534 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| # Cluster Workflow Templates | ||
|
|
||
| > v2.8 and after | ||
| ## Introduction | ||
|
|
||
| `ClusterWorkflowTemplates` are cluster scoped `WorkflowTemplates`. `ClusterWorkflowTemplate` | ||
| can be created cluster scoped like `ClusterRole` and can be accessed all namespaces in the cluster. | ||
|
|
||
| `WorkflowTemplate` documentation [link](./workflow-template.md) | ||
|
|
||
| ## Defining `ClusterWorkflowTemplate` | ||
|
|
||
| ```yaml | ||
| apiVersion: argoproj.io/v1alpha1 | ||
| kind: ClusterWorkflowTemplate | ||
| metadata: | ||
| name: cluster-workflow-template-whalesay-template | ||
| spec: | ||
| templates: | ||
| - name: whalesay-template | ||
| inputs: | ||
| parameters: | ||
| - name: message | ||
| container: | ||
| image: docker/whalesay | ||
| command: [cowsay] | ||
| args: ["{{inputs.parameters.message}}"] | ||
| ``` | ||
|
|
||
| ## Referencing other `ClusterWorkflowTemplates` | ||
|
|
||
| You can reference `templates` from another `ClusterWorkflowTemplates` using a `templateRef` field with `clusterScope: true` . | ||
| Just as how you reference other `templates` within the same `Workflow`, you should do so from a `steps` or `dag` template. | ||
|
|
||
| Here is an example: | ||
| More examples []() | ||
| ```yaml | ||
| apiVersion: argoproj.io/v1alpha1 | ||
| kind: Workflow | ||
| metadata: | ||
| generateName: workflow-template-hello-world- | ||
| spec: | ||
| entrypoint: whalesay | ||
| templates: | ||
| - name: whalesay | ||
| steps: # You should only reference external "templates" in a "steps" or "dag" "template". | ||
| - - name: call-whalesay-template | ||
| templateRef: # You can reference a "template" from another "WorkflowTemplate or ClusterWorkflowTemplate" using this field | ||
| name: cluster-workflow-template-whalesay-template # This is the name of the "WorkflowTemplate or ClusterWorkflowTempalte" CRD that contains the "template" you want | ||
| template: whalesay-template # This is the name of the "template" you want to reference | ||
| clusterScope: true # This field indicates this templateRef is pointing ClusterWorkflowTemplate | ||
| arguments: # You can pass in arguments as normal | ||
| parameters: | ||
| - name: message | ||
| value: "hello world" | ||
| ``` | ||
|
|
||
| ## Managing `ClusterWorkflowTemplates` | ||
|
|
||
| ### CLI | ||
|
|
||
| You can create some example templates as follows: | ||
|
|
||
| ``` | ||
| argo cluster-template create https://raw.githubusercontent.com/argoproj/argo/master/examples/cluster-workflow-template/clustertemplates.yaml | ||
| ``` | ||
|
|
||
| The submit a workflow using one of those templates: | ||
|
|
||
| ``` | ||
| argo submit https://raw.githubusercontent.com/argoproj/argo/master/examples/cluster-workflow-template/cluster-wftmpl-dag.yaml | ||
| ``` | ||
|
|
||
| ### `kubectl` | ||
|
|
||
| Using `kubectl apply -f` and `kubectl get cwft` | ||
|
|
||
| ### UI | ||
|
|
||
| `ClusterWorkflowTemplate` resources can also be managed by the UI |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-container.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import * as React from 'react'; | ||
| import {Route, RouteComponentProps, Switch} from 'react-router'; | ||
| import {ClusterWorkflowTemplateDetails} from './cluster-workflow-template-details/cluster-workflow-template-details'; | ||
| import {ClusterWorkflowTemplateList} from './cluster-workflow-template-list/cluster-workflow-template-list'; | ||
|
|
||
| export const ClusterWorkflowTemplateContainer = (props: RouteComponentProps<any>) => ( | ||
| <Switch> | ||
| <Route exact={true} path={`${props.match.path}`} component={ClusterWorkflowTemplateList} /> | ||
| <Route exact={true} path={`${props.match.path}/:name`} component={ClusterWorkflowTemplateDetails} /> | ||
| </Switch> | ||
| ); |
147 changes: 147 additions & 0 deletions
147
...plates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import {NotificationType, Page} from 'argo-ui'; | ||
| import {SlidingPanel} from 'argo-ui/src/index'; | ||
| import * as React from 'react'; | ||
| import {RouteComponentProps} from 'react-router'; | ||
| import * as models from '../../../../models'; | ||
| import {uiUrl} from '../../../shared/base'; | ||
| import {BasePage} from '../../../shared/components/base-page'; | ||
| import {Loading} from '../../../shared/components/loading'; | ||
| import {ResourceSubmit} from '../../../shared/components/resource-submit'; | ||
| import {Consumer} from '../../../shared/context'; | ||
| import {services} from '../../../shared/services'; | ||
| import {ClusterWorkflowTemplateSummaryPanel} from '../cluster-workflow-template-summary-panel'; | ||
|
|
||
| require('../../../workflows/components/workflow-details/workflow-details.scss'); | ||
|
|
||
| interface State { | ||
| template?: models.ClusterWorkflowTemplate; | ||
| error?: Error; | ||
| } | ||
|
|
||
| export class ClusterWorkflowTemplateDetails extends BasePage<RouteComponentProps<any>, State> { | ||
|
|
||
|
|
||
| private get name() { | ||
| return this.props.match.params.name; | ||
| } | ||
|
|
||
| private get sidePanel() { | ||
| return this.queryParam('sidePanel'); | ||
| } | ||
|
|
||
| private set sidePanel(sidePanel) { | ||
| this.setQueryParams({sidePanel}); | ||
| } | ||
|
|
||
| constructor(props: RouteComponentProps<any>, context: any) { | ||
| super(props, context); | ||
| this.state = {}; | ||
| } | ||
|
|
||
| public componentDidMount(): void { | ||
| services.clusterWorkflowTemplate | ||
| .get(this.name) | ||
| .then(template => { | ||
| this.setState({template}); | ||
| }) | ||
| .catch(error => this.setState({error})); | ||
| } | ||
|
|
||
| public render() { | ||
| if (this.state.error !== undefined) { | ||
| throw this.state.error; | ||
| } | ||
| return ( | ||
| <Consumer> | ||
| {ctx => ( | ||
| <Page | ||
| title='Cluster Workflow Template Details' | ||
| toolbar={{ | ||
| actionMenu: { | ||
| items: [ | ||
| { | ||
| title: 'Submit', | ||
| iconClassName: 'fa fa-plus', | ||
| action: () => (this.sidePanel = 'new') | ||
| }, | ||
| { | ||
| title: 'Delete', | ||
| iconClassName: 'fa fa-trash', | ||
| action: () => this.deleteClusterWorkflowTemplate() | ||
| } | ||
| ] | ||
| }, | ||
| breadcrumbs: [ | ||
| { | ||
| title: 'Cluster Workflow Template', | ||
| path: uiUrl('cluster-workflow-templates') | ||
| }, | ||
| {title: this.name} | ||
| ] | ||
| }}> | ||
| <div className='argo-container'> | ||
| <div className='workflow-details__content'>{this.renderClusterWorkflowTemplate()}</div> | ||
| </div> | ||
| {this.state.template && ( | ||
| <SlidingPanel isShown={this.sidePanel !== null} onClose={() => (this.sidePanel = null)}> | ||
| <ResourceSubmit<models.Workflow> | ||
| resourceName={'Workflow'} | ||
| defaultResource={this.getWorkflow(this.state.template)} | ||
| onSubmit={wfValue => { | ||
| return services.workflows | ||
| .create(wfValue, wfValue.metadata.namespace) | ||
| .then(workflow => ctx.navigation.goto(uiUrl(`workflows/${workflow.metadata.namespace}/${workflow.metadata.name}`))); | ||
| }} | ||
| /> | ||
| </SlidingPanel> | ||
| )} | ||
| </Page> | ||
| )} | ||
| </Consumer> | ||
| ); | ||
| } | ||
|
|
||
| private renderClusterWorkflowTemplate() { | ||
| if (!this.state.template) { | ||
| return <Loading />; | ||
| } | ||
| return <ClusterWorkflowTemplateSummaryPanel template={this.state.template} onChange={template => this.setState({template})} onError={error => this.setState({error})} />; | ||
| } | ||
|
|
||
| private deleteClusterWorkflowTemplate() { | ||
| if (!confirm('Are you sure you want to delete this cluster workflow template?\nThere is no undo.')) { | ||
| return; | ||
| } | ||
| services.clusterWorkflowTemplate | ||
| .delete(this.name) | ||
| .catch(e => { | ||
| this.appContext.apis.notifications.show({ | ||
| content: 'Failed to delete cluster workflow template ' + e, | ||
| type: NotificationType.Error | ||
| }); | ||
| }) | ||
| .then(() => { | ||
| document.location.href = uiUrl('cluster-workflow-templates'); | ||
| }); | ||
| } | ||
|
|
||
| private getWorkflow(template: models.ClusterWorkflowTemplate): models.Workflow { | ||
| return { | ||
| metadata: { | ||
| generateName: template.metadata.name + '-', | ||
| namespace: '<enter the namespace>' | ||
| }, | ||
| spec: { | ||
| entrypoint: template.spec.templates[0].name, | ||
| templates: template.spec.templates.map(t => ({ | ||
| name: t.name, | ||
| templateRef: { | ||
| name: template.metadata.name, | ||
| template: t.name, | ||
| clusterscope: true, | ||
| } | ||
| })) | ||
| } | ||
| }; | ||
| } | ||
| } |
8 changes: 8 additions & 0 deletions
8
...w-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| @import 'node_modules/argo-ui/src/styles/config'; | ||
|
|
||
| .argo-table-list { | ||
| margin: 1em; | ||
| &__row:hover { | ||
| box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1), 0 0 0 1px rgba($argo-color-teal-5, .5); | ||
| } | ||
| } |
Oops, something went wrong.