Skip to content

Commit

Permalink
refactor(ui): workflow panel components from class to functional (#11803
Browse files Browse the repository at this point in the history 
)

Signed-off-by: tetora1053 <[email protected]>
  • Loading branch information
@tetora1053
tetora1053 authored Sep 15, 2023
1 parent 6fade91 commit 92a30f2
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 292 deletions.
155 changes: 67 additions & 88 deletions ui/src/app/workflows/components/resubmit-workflow-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Checkbox} from 'argo-ui';
import * as React from 'react';
import React, {useState} from 'react';
import {Parameter, ResubmitOpts, Workflow} from '../../../models';
import {uiUrl} from '../../shared/base';
import {ErrorNotice} from '../../shared/components/error-notice';
Expand All @@ -12,103 +12,82 @@ interface Props {
isArchived: boolean;
}

interface State {
overrideParameters: boolean;
workflowParameters: Parameter[];
memoized: boolean;
error?: Error;
isSubmitting: boolean;
}
export function ResubmitWorkflowPanel(props: Props) {
const [overrideParameters, setOverrideParameters] = useState(false);
const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
const [memoized, setMemoized] = useState(false);
const [error, setError] = useState<Error>();
const [isSubmitting, setIsSubmitting] = useState(false);

export class ResubmitWorkflowPanel extends React.Component<Props, State> {
constructor(props: any) {
super(props);
const state: State = {
workflowParameters: JSON.parse(JSON.stringify(this.props.workflow.spec.arguments.parameters || [])),
memoized: false,
isSubmitting: false,
overrideParameters: false
async function submit() {
setIsSubmitting(true);
const parameters: ResubmitOpts['parameters'] = overrideParameters
? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
: [];
const opts: ResubmitOpts = {
parameters,
memoized
};
this.state = state;

try {
const submitted = props.isArchived
? await services.workflows.resubmitArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
: await services.workflows.resubmit(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
} catch (err) {
setError(err);
setIsSubmitting(false);
}
}

public render() {
return (
<>
<h4>Resubmit Workflow</h4>
<h5>
{this.props.workflow.metadata.namespace}/{this.props.workflow.metadata.name}
</h5>
{this.state.error && <ErrorNotice error={this.state.error} />}
<div className='white-box'>
<div key='override-parameters' style={{marginBottom: 25}}>
<label>Override Parameters</label>
<div className='columns small-9'>
<Checkbox checked={this.state.overrideParameters} onChange={overrideParameters => this.setState({overrideParameters})} />
</div>
return (
<>
<h4>Resubmit Workflow</h4>
<h5>
{props.workflow.metadata.namespace}/{props.workflow.metadata.name}
</h5>
{error && <ErrorNotice error={error} />}
<div className='white-box'>
<div key='override-parameters' style={{marginBottom: 25}}>
<label>Override Parameters</label>
<div className='columns small-9'>
<Checkbox checked={overrideParameters} onChange={setOverrideParameters} />
</div>
</div>

{this.state.overrideParameters && (
<div key='parameters' style={{marginBottom: 25}}>
<label>Parameters</label>
{this.state.workflowParameters.length > 0 && (
<ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
)}
{this.state.workflowParameters.length === 0 ? (
<>
<br />
<label>No parameters</label>
</>
) : (
<></>
)}
</div>
)}

<div key='memoized' style={{marginBottom: 25}}>
<label>Memoized</label>
<div className='columns small-9'>
<Checkbox checked={this.state.memoized} onChange={memoized => this.setState({memoized})} />
</div>
{overrideParameters && (
<div key='parameters' style={{marginBottom: 25}}>
<label>Parameters</label>
{workflowParameters.length > 0 && <ParametersInput parameters={workflowParameters} onChange={setWorkflowParameters} />}
{workflowParameters.length === 0 && (
<>
<br />
<label>No parameters</label>
</>
)}
</div>
)}

{this.state.overrideParameters && this.state.memoized && (
<div key='warning-override-with-memoized'>
<i className='fa fa-exclamation-triangle' style={{color: '#f4c030'}} />
Overriding parameters on memoized submitted workflows may have unexpected results.
</div>
)}

<div key='resubmit'>
<button onClick={() => this.submit()} className='argo-button argo-button--base' disabled={this.state.isSubmitting}>
<i className='fa fa-plus' /> {this.state.isSubmitting ? 'Loading...' : 'Resubmit'}
</button>
<div key='memoized' style={{marginBottom: 25}}>
<label>Memoized</label>
<div className='columns small-9'>
<Checkbox checked={memoized} onChange={setMemoized} />
</div>
</div>
</>
);
}

private submit() {
this.setState({isSubmitting: true});
const parameters: ResubmitOpts['parameters'] = this.state.overrideParameters
? [...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
: [];
const opts: ResubmitOpts = {
parameters,
memoized: this.state.memoized
};
{overrideParameters && memoized && (
<div key='warning-override-with-memoized'>
<i className='fa fa-exclamation-triangle' style={{color: '#f4c030'}} />
Overriding parameters on memoized submitted workflows may have unexpected results.
</div>
)}

if (!this.props.isArchived) {
services.workflows
.resubmit(this.props.workflow.metadata.name, this.props.workflow.metadata.namespace, opts)
.then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
.catch(error => this.setState({error, isSubmitting: false}));
} else {
services.workflows
.resubmitArchived(this.props.workflow.metadata.uid, this.props.workflow.metadata.namespace, opts)
.then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
.catch(error => this.setState({error, isSubmitting: false}));
}
}
<div key='resubmit'>
<button onClick={submit} className='argo-button argo-button--base' disabled={isSubmitting}>
<i className='fa fa-plus' /> {isSubmitting ? 'Loading...' : 'Resubmit'}
</button>
</div>
</div>
</>
);
}
172 changes: 77 additions & 95 deletions ui/src/app/workflows/components/retry-workflow-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Checkbox} from 'argo-ui';
import * as React from 'react';
import React, {useState} from 'react';
import {Parameter, RetryOpts, Workflow} from '../../../models';
import {uiUrl} from '../../shared/base';
import {ErrorNotice} from '../../shared/components/error-notice';
Expand All @@ -12,112 +12,94 @@ interface Props {
isArchived: boolean;
}

interface State {
overrideParameters: boolean;
restartSuccessful: boolean;
workflowParameters: Parameter[];
nodeFieldSelector: string;
error?: Error;
isSubmitting: boolean;
}
export function RetryWorkflowPanel(props: Props) {
const [overrideParameters, setOverrideParameters] = useState(false);
const [restartSuccessful, setRestartSuccessful] = useState(false);
const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
const [nodeFieldSelector, setNodeFieldSelector] = useState('');
const [error, setError] = useState<Error>();
const [isSubmitting, setIsSubmitting] = useState(false);

export class RetryWorkflowPanel extends React.Component<Props, State> {
constructor(props: any) {
super(props);
const state: State = {
workflowParameters: JSON.parse(JSON.stringify(this.props.workflow.spec.arguments.parameters || [])),
isSubmitting: false,
overrideParameters: false,
nodeFieldSelector: '',
restartSuccessful: false
async function submit() {
setIsSubmitting(true);
const parameters: RetryOpts['parameters'] = overrideParameters
? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
: [];
const opts: RetryOpts = {
parameters,
restartSuccessful,
nodeFieldSelector
};
this.state = state;

try {
const submitted = props.isArchived
? await services.workflows.retryArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
: await services.workflows.retry(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
} catch (err) {
setError(err);
setIsSubmitting(false);
}
}

public render() {
return (
<>
<h4>Retry Workflow</h4>
<h5>
{this.props.workflow.metadata.namespace}/{this.props.workflow.metadata.name}
</h5>
return (
<>
<h4>Retry Workflow</h4>
<h5>
{props.workflow.metadata.namespace}/{props.workflow.metadata.name}
</h5>

{this.state.error && <ErrorNotice error={this.state.error} />}
<div className='white-box'>
<div key='override-parameters' style={{marginBottom: 25}}>
<label>Override Parameters</label>
<div className='columns small-9'>
<Checkbox checked={this.state.overrideParameters} onChange={overrideParameters => this.setState({overrideParameters})} />
</div>
{error && <ErrorNotice error={error} />}
<div className='white-box'>
{/* Override Parameters */}
<div key='override-parameters' style={{marginBottom: 25}}>
<label>Override Parameters</label>
<div className='columns small-9'>
<Checkbox checked={overrideParameters} onChange={setOverrideParameters} />
</div>
</div>

{this.state.overrideParameters && (
<div key='parameters' style={{marginBottom: 25}}>
<label>Parameters</label>
{this.state.workflowParameters.length > 0 && (
<ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
)}
{this.state.workflowParameters.length === 0 ? (
<>
<br />
<label>No parameters</label>
</>
) : (
<></>
)}
</div>
)}
{overrideParameters && (
<div key='parameters' style={{marginBottom: 25}}>
<label>Parameters</label>
{workflowParameters.length > 0 ? (
<ParametersInput parameters={workflowParameters} onChange={setWorkflowParameters} />
) : (
<>
<br />
<label>No parameters</label>
</>
)}
</div>
)}

<div key='restart-successful' style={{marginBottom: 25}}>
<label>Restart Successful</label>
<div className='columns small-9'>
<Checkbox checked={this.state.restartSuccessful} onChange={restartSuccessful => this.setState({restartSuccessful})} />
</div>
{/* Restart Successful */}
<div key='restart-successful' style={{marginBottom: 25}}>
<label>Restart Successful</label>
<div className='columns small-9'>
<Checkbox checked={restartSuccessful} onChange={setRestartSuccessful} />
</div>
</div>

{this.state.restartSuccessful && (
<div key='node-field-selector' style={{marginBottom: 25}}>
<label>
Node Field Selector to restart nodes. <a href='https://argoproj.github.io/argo-workflows/node-field-selector/'>See document</a>.
</label>
{restartSuccessful && (
<div key='node-field-selector' style={{marginBottom: 25}}>
<label>
Node Field Selector to restart nodes. <a href='https://argoproj.github.io/argo-workflows/node-field-selector/'>See document</a>.
</label>

<div className='columns small-9'>
<textarea className='argo-field' value={this.state.nodeFieldSelector} onChange={e => this.setState({nodeFieldSelector: e.target.value})} />
</div>
<div className='columns small-9'>
<textarea className='argo-field' value={nodeFieldSelector} onChange={e => setNodeFieldSelector(e.target.value)} />
</div>
)}

<div key='retry'>
<button onClick={() => this.submit()} className='argo-button argo-button--base' disabled={this.state.isSubmitting}>
<i className='fa fa-plus' /> {this.state.isSubmitting ? 'Loading...' : 'Retry'}
</button>
</div>
</div>
</>
);
}
)}

private submit() {
this.setState({isSubmitting: true});
const parameters: RetryOpts['parameters'] = this.state.overrideParameters
? [...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
: [];
const opts: RetryOpts = {
parameters,
restartSuccessful: this.state.restartSuccessful,
nodeFieldSelector: this.state.nodeFieldSelector
};

if (!this.props.isArchived) {
services.workflows
.retry(this.props.workflow.metadata.name, this.props.workflow.metadata.namespace, opts)
.then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
.catch(error => this.setState({error, isSubmitting: false}));
} else {
services.workflows
.retryArchived(this.props.workflow.metadata.uid, this.props.workflow.metadata.namespace, opts)
.then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
.catch(error => this.setState({error, isSubmitting: false}));
}
}
{/* Retry button */}
<div key='retry'>
<button onClick={submit} className='argo-button argo-button--base' disabled={isSubmitting}>
<i className='fa fa-plus' /> {isSubmitting ? 'Loading...' : 'Retry'}
</button>
</div>
</div>
</>
);
}
Loading

0 comments on commit 92a30f2

Please sign in to comment.