Elgato_dark/argo-cd
1
0
Fork 0
mirror of https://github.com/argoproj/argo-cd synced 2026-05-23 17:28:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Issue #2074 - Add UI to manage sync options (#2076)

Browse source
This commit is contained in:
Alexander Matyushentsev 2019-08-01 16:26:27 -07:00 committed by GitHub
parent 588d30268b
commit 2114189bef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/src/app/applications/components/application-create-panel/application-create-panel.scss
View file

@ -1,16 +1,14 @@
@import 'node_modules/argo-ui/src/app/shared/styles/config';
.application-create-panel {
.argo-form-row i {
position: absolute;
right: 0;
bottom: 1em;
cursor: pointer;
}
&__yaml-button {
position: absolute;
right: 1em;
top: 1em;
}
&__sync-params {
padding-top: 5px;
}
}

42
ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
View file

@ -1,4 +1,4 @@
import { DataLoader, DropDownMenu, FormField, Select } from 'argo-ui';
import { Checkbox, DataLoader, DropDownMenu, FormField, Select } from 'argo-ui';
import * as deepMerge from 'deepmerge';
import * as React from 'react';
import { FieldApi, Form, FormApi, FormField as ReactFormField, Text } from 'react-form';
@ -40,30 +40,28 @@ const DEFAULT_APP: Partial<models.Application> = {
const AutoSyncFormField = ReactFormField((props: {fieldApi: FieldApi, className: string }) => {
const manual = 'Manual';
const auto = 'Automatic, but do not automatically prune resources';
const autoWithPrune = 'Automatic with automatic pruning';
const auto = 'Automatic';
const { fieldApi: {getValue, setValue}} = props;
const value = getValue() as models.SyncPolicy;
let selectedOption = manual;
if (value && value.automated) {
selectedOption = value.automated.prune && autoWithPrune || auto;
}
const policy = getValue() as models.SyncPolicy;
return (
<Select value={selectedOption} options={[ manual, auto, autoWithPrune ]} onChange={(opt) => {
let policy: models.SyncPolicy;
switch (opt.value) {
case auto:
policy = { automated: { prune: false } };
break;
case autoWithPrune:
policy = { automated: { prune: true } };
break;
}
setValue(policy);
}} />);
<React.Fragment>
<label>Sync Policy</label>
<Select value={policy && policy.automated ? auto : manual} options={[ manual, auto ]} onChange={(opt) => {
setValue( opt.value === auto ? {automated: { prune: false, selfHeal: false }} : null );
}} />
{policy && policy.automated && (
<div className='application-create-panel__sync-params'>
<Checkbox onChange={(val) => setValue({ automated: {...policy.automated, prune: val} })}
checked={policy.automated.prune} id='policyPrune' /> <label htmlFor='policyPrune'>
Prune Resources</label> <Checkbox onChange={(val) => setValue({ automated: {...policy.automated, selfHeal: val} })}
checked={policy.automated.selfHeal} id='policySelfHeal' /> <label htmlFor='selfHeal'>
Self Heal</label>
</div>
)}
</React.Fragment>
);
});
export const ApplicationCreatePanel = (props: {
@ -131,7 +129,7 @@ export const ApplicationCreatePanel = (props: {
<FormField formApi={api} label='Project' field='spec.project' component={AutocompleteField} componentProps={{items: projects}} />
</div>
<div className='argo-form-row'>
<FormField formApi={api} label='Sync-policy' field='spec.syncPolicy' component={AutoSyncFormField} />
<FormField formApi={api} field='spec.syncPolicy' component={AutoSyncFormField} />
</div>
</div>
);

56
ui/src/app/applications/components/application-summary/application-summary.tsx
View file

@ -99,11 +99,11 @@ export const ApplicationSummary = (props: {
) });
}
async function setAutoSync(ctx: { popup: PopupApi }, confirmationTitle: string, confirmationText: string, prune: boolean) {
async function setAutoSync(ctx: { popup: PopupApi }, confirmationTitle: string, confirmationText: string, prune: boolean, selfHeal: boolean) {
const confirmed = await ctx.popup.confirm(confirmationTitle, confirmationText);
if (confirmed) {
const updatedApp = JSON.parse(JSON.stringify(props.app)) as models.Application;
updatedApp.spec.syncPolicy = { automated: { prune } };
updatedApp.spec.syncPolicy = { automated: { prune, selfHeal } };
props.updateApp(updatedApp);
}
}
@ -190,29 +190,51 @@ export const ApplicationSummary = (props: {
<button className='argo-button argo-button--base' onClick={() => unsetAutoSync(ctx)}>Disable Auto-Sync</button>
) || (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Enable Auto-Sync?', 'Are you sure you want to enable automated application synchronization?', false)
ctx, 'Enable Auto-Sync?', 'Are you sure you want to enable automated application synchronization?', false, false)
}>Enable Auto-Sync</button>
)}
</div>
</div>
{app.spec.syncPolicy && app.spec.syncPolicy.automated && (
<div className='row white-box__details-row'>
<div className='columns small-3'>
Prune Resources
<React.Fragment>
<div className='row white-box__details-row'>
<div className='columns small-3'>
Prune Resources
</div>
<div className='columns small-9'>
{app.spec.syncPolicy.automated.prune && (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Disable Prune Resources?', 'Are you sure you want to disable resource pruning during automated application synchronization?',
false, app.spec.syncPolicy.automated.selfHeal)
}>Disable</button>
) || (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Enable Prune Resources?', 'Are you sure you want to enable resource pruning during automated application synchronization?',
true, app.spec.syncPolicy.automated.selfHeal)
}>Enable</button>
)}
</div>
</div>
<div className='columns small-9'>
{app.spec.syncPolicy.automated.prune && (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Disable Prune Resources?', 'Are you sure you want to disable resource pruning during automated application synchronization?', false)
}>Disable</button>
) || (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Enable Prune Resources?', 'Are you sure you want to enable resource pruning during automated application synchronization?', true)
}>Enable</button>
)}
<div className='row white-box__details-row'>
<div className='columns small-3'>
Self Heal
</div>
<div className='columns small-9'>
{app.spec.syncPolicy.automated.selfHeal && (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Disable Self Heal?', 'Are you sure you want to disable automated self healing?',
app.spec.syncPolicy.automated.prune, false)
}>Disable</button>
) || (
<button className='argo-button argo-button--base' onClick={() => setAutoSync(
ctx, 'Enable Self Heal?', 'Are you sure you want to enable automated self healing?',
app.spec.syncPolicy.automated.prune, true)
}>Enable</button>
)}
</div>
</div>
</div>
</React.Fragment>
)}
</div>
</div>

2
ui/src/app/shared/models.ts
View file

@ -173,7 +173,7 @@ export interface ApplicationSourceDirectory {
}
export interface SyncPolicy {
automated?: { prune: boolean };
automated?: { prune: boolean; selfHeal: boolean; };
}
export interface Info {