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

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