mirror of
https://github.com/argoproj/argo-cd
synced 2026-05-24 09:50:08 +00:00
Issue #2378 - Creating an application from Helm repository should select Helm as source type (#2409)
This commit is contained in:
Alexander Matyushentsev
GitHub
parent
399a022099
commit
e9b2a6212a
2 changed files with 71 additions and 40 deletions
|
|
@ -64,6 +64,23 @@ const AutoSyncFormField = ReactFormField((props: {fieldApi: FieldApi, className:
|
|||
);
|
||||
});
|
||||
|
||||
function normalizeAppSource(app: models.Application, type: string): boolean {
|
||||
const repoType = app.spec.source.hasOwnProperty('chart') && 'helm' || 'git';
|
||||
if (repoType !== type) {
|
||||
if (type === 'git') {
|
||||
app.spec.source.path = app.spec.source.chart;
|
||||
delete(app.spec.source.chart);
|
||||
app.spec.source.targetRevision = 'HEAD';
|
||||
} else {
|
||||
app.spec.source.chart = app.spec.source.path;
|
||||
delete(app.spec.source.path);
|
||||
app.spec.source.targetRevision = '';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export const ApplicationCreatePanel = (props: {
|
||||
app: models.Application,
|
||||
onAppChanged: (app: models.Application) => any;
|
||||
|
|
@ -92,10 +109,15 @@ export const ApplicationCreatePanel = (props: {
|
|||
.map((cluster) => ({label: clusterTitle(cluster), value: cluster.server}))
|
||||
.sort((first, second) => first.label.localeCompare(second.label)),
|
||||
),
|
||||
services.repos.list().then((repos) => repos.map((repo) => repo.repo).sort()),
|
||||
]).then(([projects, clusters, repos]) => ({projects, clusters, repos}))}>
|
||||
{({projects, clusters, repos}) => {
|
||||
services.repos.list(),
|
||||
]).then(([projects, clusters, reposInfo]) => ({projects, clusters, reposInfo}))}>
|
||||
{({projects, clusters, reposInfo}) => {
|
||||
const repos = reposInfo.map((info) => info.repo).sort();
|
||||
const app = deepMerge(DEFAULT_APP, props.app || {});
|
||||
const repoInfo = reposInfo.find((info) => info.repo === app.spec.source.repoURL);
|
||||
if (repoInfo) {
|
||||
normalizeAppSource(app, repoInfo.type || 'git');
|
||||
}
|
||||
return (
|
||||
<div className='application-create-panel'>
|
||||
{yamlMode && (
|
||||
|
|
@ -139,26 +161,31 @@ export const ApplicationCreatePanel = (props: {
|
|||
const sourcePanel = () => (
|
||||
<div className='white-box'>
|
||||
<p>SOURCE</p>
|
||||
<DropDownMenu anchor={() => (<p>{repoType.toUpperCase()} <i className='fa fa-caret-down'/></p>)} items={['git', 'helm'].map(
|
||||
(type: 'git' | 'helm') => ({ title: type.toUpperCase(), action: () => {
|
||||
if (repoType !== type) {
|
||||
const updatedApp = api.getFormState().values as models.Application;
|
||||
if (type === 'git') {
|
||||
updatedApp.spec.source.path = updatedApp.spec.source.chart;
|
||||
delete(updatedApp.spec.source.chart);
|
||||
updatedApp.spec.source.targetRevision = 'HEAD';
|
||||
} else {
|
||||
updatedApp.spec.source.chart = updatedApp.spec.source.path;
|
||||
delete(updatedApp.spec.source.path);
|
||||
updatedApp.spec.source.targetRevision = '';
|
||||
}
|
||||
api.setAllValues(updatedApp);
|
||||
}
|
||||
}}))}
|
||||
/>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={api}
|
||||
label='Repository URL' field='spec.source.repoURL' component={AutocompleteField} componentProps={{items: repos}}/>
|
||||
<div className='row argo-form-row'>
|
||||
<div className='columns small-11'>
|
||||
<FormField formApi={api}
|
||||
label='Repository URL' field='spec.source.repoURL' component={AutocompleteField} componentProps={{items: repos}}/>
|
||||
</div>
|
||||
<div className='columns small-1'>
|
||||
<div style={{paddingTop: '1.5em'}}>
|
||||
{repoInfo && (
|
||||
<React.Fragment>
|
||||
<span>{(repoInfo.type || 'git').toUpperCase()}</span> <i className='fa fa-check'/>
|
||||
</React.Fragment>
|
||||
) || (
|
||||
<DropDownMenu anchor={() => (<p>{repoType.toUpperCase()} <i className='fa fa-caret-down'/></p>)} items={['git', 'helm'].map(
|
||||
(type: 'git' | 'helm') => ({ title: type.toUpperCase(), action: () => {
|
||||
if (repoType !== type) {
|
||||
const updatedApp = api.getFormState().values as models.Application;
|
||||
if (normalizeAppSource(updatedApp, type)) {
|
||||
api.setAllValues(updatedApp);
|
||||
}
|
||||
}
|
||||
}}))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{repoType === 'git' && (
|
||||
<React.Fragment>
|
||||
|
|
@ -193,12 +220,12 @@ export const ApplicationCreatePanel = (props: {
|
|||
const selectedChart = charts.find((chart) => chart.name === api.getFormState().values.spec.source.chart);
|
||||
return (
|
||||
<div className='row argo-form-row'>
|
||||
<div className='columns small-10'>
|
||||
<div className='columns small-11'>
|
||||
<FormField formApi={api} label='Chart' field='spec.source.chart' component={AutocompleteField} componentProps={{
|
||||
items: charts.map((chart) => chart.name), filterSuggestions: true,
|
||||
}}/>
|
||||
</div>
|
||||
<div className='columns small-2'>
|
||||
<div className='columns small-1'>
|
||||
<FormField formApi={api} field='spec.source.targetRevision' component={AutocompleteField} componentProps={{
|
||||
items: selectedChart && selectedChart.versions || [],
|
||||
}}/>
|
||||
|
|
@ -233,7 +260,7 @@ export const ApplicationCreatePanel = (props: {
|
|||
targetRevision: app.spec.source.targetRevision,
|
||||
}}
|
||||
load={async (src) => {
|
||||
if (src.repoURL && (src.path || src.chart )) {
|
||||
if (src.repoURL && src.targetRevision && (src.path || src.chart)) {
|
||||
return services.repos.appDetails(src).catch(() => ({
|
||||
type: 'Directory',
|
||||
details: {},
|
||||
|
|
|
|||
|
|
@ -77,9 +77,9 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
|
|||
<div className='argo-table-list__row' key={repo.repo}>
|
||||
<div className='row'>
|
||||
<div className='columns small-1'>
|
||||
<i className={'icon argo-icon-' + (repo.type)}/>
|
||||
<i className={'icon argo-icon-' + (repo.type || 'git')}/>
|
||||
</div>
|
||||
<div className='columns small-1'>{repo.type}</div>
|
||||
<div className='columns small-1'>{repo.type || 'git'}</div>
|
||||
<div className='columns small-2'>{repo.name}</div>
|
||||
<div className='columns small-5'>
|
||||
<Repo url={repo.repo}/>
|
||||
|
|
@ -134,6 +134,7 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
|
|||
defaultValues={{type: 'git'}}
|
||||
validateError={(params: NewHTTPSRepoParams) => ({
|
||||
url: !params.url && 'Repo URL is required',
|
||||
name: params.type === 'helm' && !params.name && 'Name is required',
|
||||
password: !params.password && params.username && 'Password is required if username is given.',
|
||||
tlsClientCertKey: !params.tlsClientCertKey && params.tlsClientCertData && 'TLS client cert key is required if TLS client cert is given.',
|
||||
})}>
|
||||
|
|
@ -142,9 +143,11 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
|
|||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Type' field='type' component={FormSelect} componentProps={{options: ['git', 'helm']}}/>
|
||||
</div>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Name (mandatory for Helm)' field='name' component={Text}/>
|
||||
</div>
|
||||
{formApi.getFormState().values.type === 'helm' && (
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Name' field='name' component={Text}/>
|
||||
</div>
|
||||
)}
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Repository URL' field='url' component={Text}/>
|
||||
</div>
|
||||
|
|
@ -161,12 +164,16 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
|
|||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='TLS client certificate key (optional)' field='tlsClientCertKey' component={TextArea}/>
|
||||
</div>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Skip server verification' field='insecure' component={CheckboxField}/>
|
||||
</div>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Enable LFS support (Git only)' field='enableLfs' component={CheckboxField}/>
|
||||
</div>
|
||||
{formApi.getFormState().values.type === 'git' && (
|
||||
<React.Fragment>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Skip server verification' field='insecure' component={CheckboxField}/>
|
||||
</div>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Enable LFS support (Git only)' field='enableLfs' component={CheckboxField}/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</Form>
|
||||
|
|
@ -190,9 +197,6 @@ export class ReposList extends React.Component<RouteComponentProps<any>> {
|
|||
})}>
|
||||
{(formApi) => (
|
||||
<form onSubmit={formApi.submitForm} role='form' className='repos-list width-control'>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Type' field='type' component={FormSelect} componentProps={{options: ['git', 'helm']}}/>
|
||||
</div>
|
||||
<div className='argo-form-row'>
|
||||
<FormField formApi={formApi} label='Name (mandatory for Helm)' field='name' component={Text}/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue