argo-cd

1
import {DataLoader, DropDownMenu} from 'argo-ui';
2
import * as React from 'react';
3

4
import {services} from '../../../shared/services';
5
import {Context} from '../../context';
6

7
require('./badge-panel.scss');
8

9
export const BadgePanel = ({app, project, appNamespace, nsEnabled}: {app?: string; project?: string; appNamespace?: string; nsEnabled?: boolean}) => {
10
    const [badgeType, setBadgeType] = React.useState('URL');
11
    const context = React.useContext(Context);
12
    if (!app && !project) {
13
        throw new Error('Either app or project property must be specified');
14
    }
15

16
    function badgeContent(statusBadgeRootUrl: string) {
17
        const root = statusBadgeRootUrl ? statusBadgeRootUrl : `${location.protocol}//${location.host}${context.baseHref}`;
18
        let badgeURL = '';
19
        let entityURL = '';
20
        let alt = '';
21
        if (app) {
22
            badgeURL = `${root}api/badge?name=${app}&revision=true`;
23
            if (nsEnabled) {
24
                badgeURL += `&namespace=${appNamespace}`;
25
            }
26
            entityURL = `${root}applications/${app}`;
27
            alt = 'App Status';
28
        } else if (project) {
29
            badgeURL = `${root}api/badge?project=${project}&revision=true`;
30
            entityURL = `${root}projects/${project}`;
31
            alt = 'Project Status';
32
        }
33
        return (
34
            <div className='white-box'>
35
                <div className='white-box__details'>
36
                    <p>STATUS BADGE</p>
37
                    <p>
38
                        <img src={badgeURL} />{' '}
39
                    </p>
40
                    <div className='white-box__details-row'>
41
                        <DropDownMenu
42
                            anchor={() => (
43
                                <p>
44
                                    {badgeType} <i className='fa fa-caret-down' />
45
                                </p>
46
                            )}
47
                            items={['URL', 'Markdown', 'Textile', 'Rdoc', 'AsciiDoc'].map(type => ({title: type, action: () => setBadgeType(type)}))}
48
                        />
49
                        <textarea
50
                            onClick={e => (e.target as HTMLInputElement).select()}
51
                            className='badge-panel'
52
                            readOnly={true}
53
                            value={
54
                                badgeType === 'URL'
55
                                    ? badgeURL
56
                                    : badgeType === 'Markdown'
57
                                    ? `[![${alt}](${badgeURL})](${entityURL})`
58
                                    : badgeType === 'Textile'
59
                                    ? `!${badgeURL}!:${entityURL}`
60
                                    : badgeType === 'Rdoc'
61
                                    ? `{<img src="${badgeURL}" alt="${alt}" />}[${entityURL}]`
62
                                    : badgeType === 'AsciiDoc'
63
                                    ? `image:${badgeURL}["${alt}", link="${entityURL}"]`
64
                                    : ''
65
                            }
66
                        />
67
                    </div>
68
                </div>
69
            </div>
70
        );
71
    }
72

73
    return (
74
        <DataLoader load={() => services.authService.settings()}>
75
            {settings => (settings.statusBadgeEnabled && <div>{badgeContent(settings.statusBadgeRootUrl)}</div>) || null}
76
        </DataLoader>
77
    );
78
};
79