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

     1  import * as React from 'react';
     2  
     3  import {DataLoader, EmptyState, Page} from '../../../shared/components';
     4  import {Context} from '../../../shared/context';
     5  import {services} from '../../../shared/services';
     6  
     7  export const AccountsList = () => {
     8      const ctx = React.useContext(Context);
     9      return (
    10          <Page
    11              title='Accounts'
    12              toolbar={{
    13                  breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'Accounts'}]
    14              }}>
    15              <div className='argo-container'>
    16                  <DataLoader load={() => services.accounts.list()}>
    17                      {accounts =>
    18                          (accounts.length > 0 && (
    19                              <div className='argo-table-list argo-table-list--clickable'>
    20                                  <div className='argo-table-list__head'>
    21                                      <div className='row'>
    22                                          <div className='columns small-3'>NAME</div>
    23                                          <div className='columns small-3'>ENABLED</div>
    24                                          <div className='columns small-6'>CAPABILITIES</div>
    25                                      </div>
    26                                  </div>
    27                                  {accounts.map(account => (
    28                                      <div className='argo-table-list__row' key={account.name} onClick={() => ctx.navigation.goto(`./${account.name}`)}>
    29                                          <div className='row'>
    30                                              <div className='columns small-3'>{account.name}</div>
    31                                              <div className='columns small-3'>{(account.enabled && 'true') || 'false'}</div>
    32                                              <div className='columns small-6'>{account.capabilities.join(', ')}</div>
    33                                          </div>
    34                                      </div>
    35                                  ))}
    36                              </div>
    37                          )) || (
    38                              <EmptyState icon='fa fa-user-circle'>
    39                                  <h4>No accounts yet</h4>
    40                                  <h5>Define new accounts in Argo CD configuration</h5>
    41                              </EmptyState>
    42                          )
    43                      }
    44                  </DataLoader>
    45              </div>
    46          </Page>
    47      );
    48  };