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

     1  import {DropDown} from 'argo-ui';
     2  import * as React from 'react';
     3  
     4  import * as models from '../../../shared/models';
     5  import {ResourceIcon} from '../resource-icon';
     6  import {ResourceLabel} from '../resource-label';
     7  import {ComparisonStatusIcon, HealthStatusIcon, nodeKey} from '../utils';
     8  
     9  export const ApplicationResourceList = ({
    10      resources,
    11      onNodeClick,
    12      nodeMenu
    13  }: {
    14      resources: models.ResourceStatus[];
    15      onNodeClick?: (fullName: string) => any;
    16      nodeMenu?: (node: models.ResourceNode) => React.ReactNode;
    17  }) => (
    18      <div className='argo-table-list argo-table-list--clickable'>
    19          <div className='argo-table-list__head'>
    20              <div className='row'>
    21                  <div className='columns small-1 xxxlarge-1' />
    22                  <div className='columns small-2 xxxlarge-2'>NAME</div>
    23                  <div className='columns small-3 xxxlarge-4'>GROUP/KIND</div>
    24                  <div className='columns small-3 xxxlarge-3'>NAMESPACE</div>
    25                  <div className='columns small-2 xxxlarge-2'>STATUS</div>
    26              </div>
    27          </div>
    28          {resources
    29              .sort((first, second) => nodeKey(first).localeCompare(nodeKey(second)))
    30              .map(res => (
    31                  <div key={nodeKey(res)} className='argo-table-list__row' onClick={() => onNodeClick(nodeKey(res))}>
    32                      <div className='row'>
    33                          <div className='columns small-1 xxxlarge-1'>
    34                              <div className='application-details__resource-icon'>
    35                                  <ResourceIcon kind={res.kind} />
    36                                  <br />
    37                                  <div>{ResourceLabel({kind: res.kind})}</div>
    38                              </div>
    39                          </div>
    40                          <div className='columns small-2 xxxlarge-2'>{res.name}</div>
    41                          <div className='columns small-3 xxxlarge-4'>{[res.group, res.kind].filter(item => !!item).join('/')}</div>
    42                          <div className='columns small-3 xxxlarge-3'>{res.namespace}</div>
    43                          <div className='columns small-2 xxxlarge-2'>
    44                              {res.health && (
    45                                  <React.Fragment>
    46                                      <HealthStatusIcon state={res.health} /> {res.health.status} &nbsp;
    47                                  </React.Fragment>
    48                              )}
    49                              {res.status && <ComparisonStatusIcon status={res.status} resource={res} label={true} />}
    50                              {res.hook && <i title='Resource lifecycle hook' className='fa fa-anchor' />}
    51                              <div className='application-details__node-menu'>
    52                                  <DropDown
    53                                      isMenu={true}
    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                                      {() =>
    60                                          nodeMenu({
    61                                              name: res.name,
    62                                              version: res.version,
    63                                              kind: res.kind,
    64                                              namespace: res.namespace,
    65                                              group: res.group,
    66                                              info: null,
    67                                              uid: '',
    68                                              resourceVersion: null,
    69                                              parentRefs: []
    70                                          })
    71                                      }
    72                                  </DropDown>
    73                              </div>
    74                          </div>
    75                      </div>
    76                  </div>
    77              ))}
    78      </div>
    79  );