argo-cd

1
import * as React from 'react';
2
import {DataLoader, Page} from '../../shared/components';
3
import {Consumer} from '../../shared/context';
4
import {combineLatest} from 'rxjs';
5
import {services} from '../../shared/services';
6
import {map} from 'rxjs/operators';
7
import classNames from 'classnames';
8

9
require('./help.scss');
10

11
export const Help = () => {
12
    return (
13
        <DataLoader
14
            load={() =>
15
                combineLatest([services.authService.settings()]).pipe(
16
                    map(items => {
17
                        return {
18
                            binaryUrls: items[0].help.binaryUrls || {}
19
                        };
20
                    })
21
                )
22
            }>
23
            {({binaryUrls}: {binaryUrls: Record<string, string>}) => {
24
                return (
25
                    <Consumer>
26
                        {() => (
27
                            <Page title='Help'>
28
                                <div className='row'>
29
                                    <div className='columns large-4 small-6'>
30
                                        <div className='help-box'>
31
                                            <p>New to Argo CD?</p>
32
                                            <a className='user-info-panel-buttons argo-button argo-button--base' href='https://argo-cd.readthedocs.io'>
33
                                                Read the docs
34
                                            </a>
35
                                        </div>
36
                                    </div>
37
                                    <div className='columns large-4 small-6'>
38
                                        <div className='help-box'>
39
                                            <p>Want to download the CLI tool?</p>
40
                                            <a href={`download/argocd-linux-${process.env.HOST_ARCH}`} className='user-info-panel-buttons argo-button argo-button--base'>
41
                                                <i className='fab fa-linux' /> Linux ({process.env.HOST_ARCH})
42
                                            </a>
43
                                            &nbsp;
44
                                            {Object.keys(binaryUrls || {}).map(binaryName => {
45
                                                const url = binaryUrls[binaryName];
46
                                                const match = binaryName.match(/.*(darwin|windows|linux)-(amd64|arm64|ppc64le|s390x)/);
47
                                                const [platform, arch] = match ? match.slice(1) : ['', ''];
48
                                                return (
49
                                                    <>
50
                                                        &nbsp;
51
                                                        <a key={binaryName} href={url} className='user-info-panel-buttons argo-button argo-button--base'>
52
                                                            <i
53
                                                                className={classNames('fab', {
54
                                                                    'fa-windows': platform === 'windows',
55
                                                                    'fa-apple': platform === 'darwin',
56
                                                                    'fa-linux': platform === 'linux'
57
                                                                })}
58
                                                            />
59
                                                            {` ${platform}`} {arch && `(${arch})`}
60
                                                        </a>
61
                                                    </>
62
                                                );
63
                                            })}
64
                                        </div>
65
                                    </div>
66
                                    <div className='columns large-4 small-6'>
67
                                        <div className='help-box'>
68
                                            <p>You want to develop against Argo CD's API?</p>
69
                                            <a className='user-info-panel-buttons argo-button argo-button--base' href='swagger-ui'>
70
                                                Open the API docs
71
                                            </a>
72
                                        </div>
73
                                    </div>
74
                                </div>
75
                            </Page>
76
                        )}
77
                    </Consumer>
78
                );
79
            }}
80
        </DataLoader>
81
    );
82
};
83