github.com/argoproj/argo-cd@v1.8.7/ui/src/app/settings/components/clusters-list/clusters-list.tsx (about)

     1  import {DropDownMenu} from 'argo-ui';
     2  import * as React from 'react';
     3  import {RouteComponentProps} from 'react-router-dom';
     4  import {clusterName, ConnectionStateIcon, DataLoader, EmptyState, Page} from '../../../shared/components';
     5  import {Consumer} from '../../../shared/context';
     6  import * as models from '../../../shared/models';
     7  import {services} from '../../../shared/services';
     8  
     9  export const ClustersList = (props: RouteComponentProps<{}>) => {
    10      const clustersLoaderRef = React.useRef<DataLoader>();
    11      return (
    12          <Consumer>
    13              {ctx => (
    14                  <React.Fragment>
    15                      <Page title='Clusters' toolbar={{breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'Clusters'}]}}>
    16                          <div className='repos-list'>
    17                              <div className='argo-container'>
    18                                  <DataLoader
    19                                      ref={clustersLoaderRef}
    20                                      load={() => services.clusters.list().then(clusters => clusters.sort((first, second) => first.name.localeCompare(second.name)))}>
    21                                      {(clusters: models.Cluster[]) =>
    22                                          (clusters.length > 0 && (
    23                                              <div className='argo-table-list argo-table-list--clickable'>
    24                                                  <div className='argo-table-list__head'>
    25                                                      <div className='row'>
    26                                                          <div className='columns small-3'>NAME</div>
    27                                                          <div className='columns small-5'>URL</div>
    28                                                          <div className='columns small-2'>VERSION</div>
    29                                                          <div className='columns small-2'>CONNECTION STATUS</div>
    30                                                      </div>
    31                                                  </div>
    32                                                  {clusters.map(cluster => (
    33                                                      <div
    34                                                          className='argo-table-list__row'
    35                                                          key={cluster.server}
    36                                                          onClick={() => ctx.navigation.goto(`./${encodeURIComponent(cluster.server)}`)}>
    37                                                          <div className='row'>
    38                                                              <div className='columns small-3'>
    39                                                                  <i className='icon argo-icon-hosts' /> {clusterName(cluster.name)}
    40                                                              </div>
    41                                                              <div className='columns small-5'>{cluster.server}</div>
    42                                                              <div className='columns small-2'>{cluster.info.serverVersion}</div>
    43                                                              <div className='columns small-2'>
    44                                                                  <ConnectionStateIcon state={cluster.info.connectionState} /> {cluster.info.connectionState.status}
    45                                                                  <DropDownMenu
    46                                                                      anchor={() => (
    47                                                                          <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
    48                                                                              <i className='fa fa-ellipsis-v' />
    49                                                                          </button>
    50                                                                      )}
    51                                                                      items={[
    52                                                                          {
    53                                                                              title: 'Delete',
    54                                                                              action: () =>
    55                                                                                  services.clusters.delete(cluster.server).finally(() => {
    56                                                                                      ctx.navigation.goto('.', {new: null});
    57                                                                                      if (clustersLoaderRef.current) {
    58                                                                                          clustersLoaderRef.current.reload();
    59                                                                                      }
    60                                                                                  })
    61                                                                          }
    62                                                                      ]}
    63                                                                  />
    64                                                              </div>
    65                                                          </div>
    66                                                      </div>
    67                                                  ))}
    68                                              </div>
    69                                          )) || (
    70                                              <EmptyState icon='argo-icon-hosts'>
    71                                                  <h4>No clusters connected</h4>
    72                                                  <h5>Connect more clusters using argocd CLI</h5>
    73                                              </EmptyState>
    74                                          )
    75                                      }
    76                                  </DataLoader>
    77                              </div>
    78                          </div>
    79                      </Page>
    80                  </React.Fragment>
    81              )}
    82          </Consumer>
    83      );
    84  };