github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/shared/components/version-info/version-info-panel.tsx (about)

     1  import {DataLoader, SlidingPanel, Tooltip} from 'argo-ui';
     2  import React, {useState} from 'react';
     3  import {VersionMessage} from '../../models';
     4  import {services} from '../../services';
     5  import {ThemeWrapper} from '../layout/layout';
     6  
     7  interface VersionPanelProps {
     8      isShown: boolean;
     9      onClose: () => void;
    10      version: Promise<VersionMessage>;
    11  }
    12  
    13  type CopyState = 'success' | 'failed' | undefined;
    14  
    15  export function VersionPanel({isShown, onClose, version}: VersionPanelProps) {
    16      const [copyState, setCopyState] = useState<CopyState>(undefined);
    17      const header = 'Argo CD Server Version';
    18  
    19      const buildVersionTable = (version: VersionMessage): JSX.Element => {
    20          const formattedVersion = {
    21              'Argo CD': version.Version,
    22              'Build Date': version.BuildDate,
    23              'Go Version': version.GoVersion,
    24              'Go Compiler': version.Compiler,
    25              'Platform': version.Platform,
    26              'jsonnet': version.JsonnetVersion,
    27              'kustomize': version.KustomizeVersion,
    28              'Helm': version.HelmVersion,
    29              'kubectl': version.KubectlVersion
    30          };
    31  
    32          return (
    33              <>
    34                  {Object.entries(formattedVersion).map(([key, value]) => (
    35                      <div className='argo-table-list__row' key={key}>
    36                          <div className='row'>
    37                              <div className='columns small-4' title={key}>
    38                                  <strong>{key}</strong>
    39                              </div>
    40                              <div className='columns'>
    41                                  {value && (
    42                                      <Tooltip content={value}>
    43                                          <span>{value}</span>
    44                                      </Tooltip>
    45                                  )}
    46                              </div>
    47                          </div>
    48                      </div>
    49                  ))}
    50              </>
    51          );
    52      };
    53  
    54      const getCopyButton = (version: VersionMessage): JSX.Element => {
    55          let img: string;
    56          let text: string;
    57          if (copyState === 'success') {
    58              img = 'fa-check';
    59              text = 'Copied';
    60          } else if (copyState === 'failed') {
    61              img = 'fa-times';
    62              text = 'Copy Failed';
    63          } else {
    64              img = 'fa-copy';
    65              text = 'Copy JSON';
    66          }
    67  
    68          return (
    69              <button className='argo-button argo-button--base' style={{marginTop: '1em', minWidth: '18ch'}} onClick={() => onCopy(version)}>
    70                  <i className={'fa ' + img} />
    71                  &nbsp;&nbsp;{text}
    72              </button>
    73          );
    74      };
    75  
    76      const onCopy = async (version: VersionMessage): Promise<void> => {
    77          const stringifiedVersion = JSON.stringify(version, undefined, 4) + '\n';
    78          try {
    79              await navigator.clipboard.writeText(stringifiedVersion);
    80              setCopyState('success');
    81          } catch (err) {
    82              setCopyState('failed');
    83          }
    84          setTimeout(() => {
    85              setCopyState(undefined);
    86          }, 750);
    87      };
    88  
    89      return (
    90          <DataLoader load={() => services.viewPreferences.getPreferences()}>
    91              {pref => (
    92                  <DataLoader load={() => version}>
    93                      {version => (
    94                          <ThemeWrapper theme={pref.theme}>
    95                              <SlidingPanel header={header} isShown={isShown} onClose={onClose} hasCloseButton={true} isNarrow={true}>
    96                                  <div className='argo-table-list'>{buildVersionTable(version)}</div>
    97                                  <div>
    98                                      <Tooltip content='Copy all version info as JSON'>{getCopyButton(version)}</Tooltip>
    99                                  </div>
   100                              </SlidingPanel>
   101                          </ThemeWrapper>
   102                      )}
   103                  </DataLoader>
   104              )}
   105          </DataLoader>
   106      );
   107  }