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

     1  import {DropDownMenu} from 'argo-ui';
     2  import * as React from 'react';
     3  import {Cluster} from '../../../shared/components';
     4  import {Consumer} from '../../../shared/context';
     5  import * as models from '../../../shared/models';
     6  import {ApplicationURLs} from '../application-urls';
     7  import * as AppUtils from '../utils';
     8  import {OperationState} from '../utils';
     9  require('./applications-table.scss');
    10  
    11  export const ApplicationsTable = (props: {
    12      applications: models.Application[];
    13      syncApplication: (appName: string) => any;
    14      refreshApplication: (appName: string) => any;
    15      deleteApplication: (appName: string) => any;
    16  }) => (
    17      <Consumer>
    18          {ctx => (
    19              <div className='applications-table argo-table-list argo-table-list--clickable'>
    20                  {props.applications.map(app => (
    21                      <div
    22                          key={app.metadata.name}
    23                          className={`argo-table-list__row
    24                  applications-list__entry applications-list__entry--comparison-${app.status.sync.status}
    25                  applications-list__entry--health-${app.status.health.status}`}>
    26                          <div className='row applications-list__table-row' onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, {event: e})}>
    27                              <div className='columns small-4'>
    28                                  <div className='row'>
    29                                      <div className='show-for-xxlarge columns small-3'>Project:</div>
    30                                      <div className='columns small-12 xxlarge-9'>{app.spec.project}</div>
    31                                  </div>
    32                                  <div className='row'>
    33                                      <div className='show-for-xxlarge columns small-3'>Name:</div>
    34                                      <div className='columns small-12 xxlarge-9'>
    35                                          {app.metadata.name} <ApplicationURLs urls={app.status.summary.externalURLs} />
    36                                      </div>
    37                                  </div>
    38                              </div>
    39                              <div className='columns small-6'>
    40                                  <div className='row'>
    41                                      <div className='show-for-xxlarge columns small-2'>Source:</div>
    42                                      <div className='columns small-12 xxlarge-10' style={{position: 'relative'}}>
    43                                          {app.spec.source.repoURL}/{app.spec.source.path || app.spec.source.chart}
    44                                          <div className='applications-table__meta'>
    45                                              <span>{app.spec.source.targetRevision || 'HEAD'}</span>
    46                                              {Object.keys(app.metadata.labels || {}).map(label => (
    47                                                  <span key={label}>{`${label}=${app.metadata.labels[label]}`}</span>
    48                                              ))}
    49                                          </div>
    50                                      </div>
    51                                  </div>
    52                                  <div className='row'>
    53                                      <div className='show-for-xxlarge columns small-2'>Destination:</div>
    54                                      <div className='columns small-12 xxlarge-10'>
    55                                          <Cluster server={app.spec.destination.server} name={app.spec.destination.name} />/{app.spec.destination.namespace}
    56                                      </div>
    57                                  </div>
    58                              </div>
    59                              <div className='columns small-2'>
    60                                  <AppUtils.HealthStatusIcon state={app.status.health} /> <span>{app.status.health.status}</span>
    61                                  <br />
    62                                  <AppUtils.ComparisonStatusIcon status={app.status.sync.status} />
    63                                  <span>{app.status.sync.status}</span> <OperationState app={app} quiet={true} />
    64                                  <DropDownMenu
    65                                      anchor={() => (
    66                                          <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
    67                                              <i className='fa fa-ellipsis-v' />
    68                                          </button>
    69                                      )}
    70                                      items={[
    71                                          {title: 'Sync', action: () => props.syncApplication(app.metadata.name)},
    72                                          {title: 'Refresh', action: () => props.refreshApplication(app.metadata.name)},
    73                                          {title: 'Delete', action: () => props.deleteApplication(app.metadata.name)}
    74                                      ]}
    75                                  />
    76                              </div>
    77                          </div>
    78                      </div>
    79                  ))}
    80              </div>
    81          )}
    82      </Consumer>
    83  );