argo-cd

1
import * as React from 'react';
2
import {FormFunctionProps} from 'react-form';
3
import {CheckboxField} from '..';
4
import * as models from '../../models';
5
import {appInstanceName, appQualifiedName, ComparisonStatusIcon, HealthStatusIcon, OperationPhaseIcon} from '../../../applications/components/utils';
6
import {AuthSettingsCtx} from '../../context';
7

8
export const ApplicationSelector = ({apps, formApi}: {apps: models.Application[]; formApi: FormFunctionProps}) => {
9
    const useAuthSettingsCtx = React.useContext(AuthSettingsCtx);
10
    return (
11
        <>
12
            <label>
13
                Apps (<a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, true))}>all</a>/
14
                <a onClick={() => apps.forEach((app, i) => formApi.setValue('app/' + i, app.status.sync.status === models.SyncStatuses.OutOfSync))}>out of sync</a>/
15
                <a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, false))}>none</a>
16
                ):
17
            </label>
18
            <div style={{marginTop: '0.4em'}}>
19
                {apps.map((app, i) => (
20
                    <label key={appInstanceName(app)} style={{marginTop: '0.5em', cursor: 'pointer'}}>
21
                        <CheckboxField field={`app/${i}`} />
22
                        &nbsp;
23
                        {app.isAppOfAppsPattern
24
                            ? `(App of Apps) ${appQualifiedName(app, useAuthSettingsCtx?.appsInAnyNamespaceEnabled)}`
25
                            : appQualifiedName(app, useAuthSettingsCtx?.appsInAnyNamespaceEnabled)}
26
                        &nbsp;
27
                        <ComparisonStatusIcon status={app.status.sync.status} />
28
                        &nbsp;
29
                        <HealthStatusIcon state={app.status.health} />
30
                        &nbsp;
31
                        <OperationPhaseIcon app={app} />
32
                        <br />
33
                    </label>
34
                ))}
35
            </div>
36
        </>
37
    );
38
};
39