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

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