github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/help/components/help.tsx (about)

     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  };