argo-cd

1
import {ErrorNotification, NotificationType, SlidingPanel} from 'argo-ui';
2
import * as React from 'react';
3
import {Form, FormApi} from 'react-form';
4
import {ProgressPopup} from '../../../shared/components';
5
import {Consumer} from '../../../shared/context';
6
import * as models from '../../../shared/models';
7
import {services} from '../../../shared/services';
8
import {ApplicationSelector} from '../../../shared/components';
9

10
interface Progress {
11
    percentage: number;
12
    title: string;
13
}
14

15
const RefreshTypes = ['normal', 'hard'];
16

17
export const ApplicationsRefreshPanel = ({show, apps, hide}: {show: boolean; apps: models.Application[]; hide: () => void}) => {
18
    const [form, setForm] = React.useState<FormApi>(null);
19
    const [progress, setProgress] = React.useState<Progress>(null);
20
    const getSelectedApps = (params: any) => apps.filter((_, i) => params['app/' + i]);
21

22
    return (
23
        <Consumer>
24
            {ctx => (
25
                <SlidingPanel
26
                    isMiddle={true}
27
                    isShown={show}
28
                    onClose={() => hide()}
29
                    header={
30
                        <div>
31
                            <button className='argo-button argo-button--base' onClick={() => form.submitForm(null)}>
32
                                Refresh
33
                            </button>{' '}
34
                            <button onClick={() => hide()} className='argo-button argo-button--base-o'>
35
                                Cancel
36
                            </button>
37
                        </div>
38
                    }>
39
                    <Form
40
                        defaultValues={{refreshType: 'normal'}}
41
                        onSubmit={async (params: any) => {
42
                            const selectedApps = getSelectedApps(params);
43
                            if (selectedApps.length === 0) {
44
                                ctx.notifications.show({content: `No apps selected`, type: NotificationType.Error});
45
                                return;
46
                            }
47

48
                            setProgress({percentage: 0, title: 'Refreshing applications'});
49
                            let i = 0;
50
                            const refreshActions = [];
51
                            for (const app of selectedApps) {
52
                                const refreshAction = async () => {
53
                                    await services.applications.get(app.metadata.name, app.metadata.namespace, params.refreshType).catch(e => {
54
                                        ctx.notifications.show({
55
                                            content: <ErrorNotification title={`Unable to refresh ${app.metadata.name}`} e={e} />,
56
                                            type: NotificationType.Error
57
                                        });
58
                                    });
59
                                    i++;
60
                                    setProgress({
61
                                        percentage: i / selectedApps.length,
62
                                        title: `Refreshed ${i} of ${selectedApps.length} applications`
63
                                    });
64
                                };
65
                                refreshActions.push(refreshAction());
66

67
                                if (refreshActions.length >= 20) {
68
                                    await Promise.all(refreshActions);
69
                                    refreshActions.length = 0;
70
                                }
71
                            }
72
                            await Promise.all(refreshActions);
73
                            setProgress({percentage: 100, title: 'Complete'});
74
                        }}
75
                        getApi={setForm}>
76
                        {formApi => (
77
                            <React.Fragment>
78
                                <div className='argo-form-row' style={{marginTop: 0}}>
79
                                    <h4>Refresh app(s)</h4>
80
                                    {progress !== null && <ProgressPopup onClose={() => setProgress(null)} percentage={progress.percentage} title={progress.title} />}
81
                                    <div style={{marginBottom: '1em'}}>
82
                                        <label>Refresh Type</label>
83
                                        <div className='row application-sync-options'>
84
                                            {RefreshTypes.map(refreshType => (
85
                                                <label key={refreshType} style={{paddingRight: '1.5em', marginTop: '0.4em'}}>
86
                                                    <input
87
                                                        type='radio'
88
                                                        value={refreshType}
89
                                                        checked={formApi.values.refreshType === refreshType}
90
                                                        onChange={() => formApi.setValue('refreshType', refreshType)}
91
                                                        style={{marginRight: '5px', transform: 'translateY(2px)'}}
92
                                                    />
93
                                                    {refreshType}
94
                                                </label>
95
                                            ))}
96
                                        </div>
97
                                    </div>
98
                                    <ApplicationSelector apps={apps} formApi={formApi} />
99
                                </div>
100
                            </React.Fragment>
101
                        )}
102
                    </Form>
103
                </SlidingPanel>
104
            )}
105
        </Consumer>
106
    );
107
};
108