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

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