github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/applications-list/applications-tiles.tsx (about) 1 import {Tooltip} from 'argo-ui'; 2 import * as classNames from 'classnames'; 3 import * as React from 'react'; 4 5 import {Consumer} from '../../../shared/context'; 6 import * as models from '../../../shared/models'; 7 8 import {Cluster} from '../../../shared/components'; 9 import {ApplicationURLs} from '../application-urls'; 10 import * as AppUtils from '../utils'; 11 import {OperationState} from '../utils'; 12 13 require('./applications-tiles.scss'); 14 15 export interface ApplicationTilesProps { 16 applications: models.Application[]; 17 syncApplication: (appName: string) => any; 18 refreshApplication: (appName: string) => any; 19 deleteApplication: (appName: string) => any; 20 } 21 22 export const ApplicationTiles = ({applications, syncApplication, refreshApplication, deleteApplication}: ApplicationTilesProps) => ( 23 <Consumer> 24 {ctx => ( 25 <div className='applications-tiles argo-table-list argo-table-list--clickable row small-up-1 medium-up-2 large-up-3 xxxlarge-up-4'> 26 {applications.map(app => ( 27 <div key={app.metadata.name} className='column column-block'> 28 <div 29 className={`argo-table-list__row 30 applications-list__entry applications-list__entry--comparison-${app.status.sync.status} 31 applications-list__entry--health-${app.status.health.status}`}> 32 <div className='row' onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, {event: e})}> 33 <div className={'columns small-12 applications-list__info qe-applications-list-' + app.metadata.name}> 34 <div className='applications-list__external-link'> 35 <ApplicationURLs urls={app.status.summary.externalURLs} /> 36 </div> 37 <div className='row'> 38 <div className='columns small-12'> 39 <i className={'icon argo-icon-' + (app.spec.source.chart != null ? 'helm' : 'git')} /> 40 <span className='applications-list__title'>{app.metadata.name}</span> 41 </div> 42 </div> 43 <div className='row'> 44 <div className='columns small-3' title='Project:'> 45 Project: 46 </div> 47 <div className='columns small-9'>{app.spec.project}</div> 48 </div> 49 <div className='row'> 50 <div className='columns small-3' title='Labels:'> 51 Labels: 52 </div> 53 <div className='columns small-9'> 54 <Tooltip 55 content={ 56 <div> 57 {Object.keys(app.metadata.labels || {}) 58 .map(label => ({label, value: app.metadata.labels[label]})) 59 .map(item => ( 60 <div key={item.label}> 61 {item.label}={item.value} 62 </div> 63 ))} 64 </div> 65 }> 66 <span> 67 {Object.keys(app.metadata.labels || {}) 68 .map(label => `${label}=${app.metadata.labels[label]}`) 69 .join(', ')} 70 </span> 71 </Tooltip> 72 </div> 73 </div> 74 <div className='row'> 75 <div className='columns small-3' title='Status:'> 76 Status: 77 </div> 78 <div className='columns small-9' qe-id='applications-tiles-health-status'> 79 <AppUtils.HealthStatusIcon state={app.status.health} /> {app.status.health.status} 80 81 <AppUtils.ComparisonStatusIcon status={app.status.sync.status} /> {app.status.sync.status} 82 83 <OperationState app={app} quiet={true} /> 84 </div> 85 </div> 86 <div className='row'> 87 <div className='columns small-3' title='Repository:'> 88 Repository: 89 </div> 90 <div className='columns small-9'> 91 <Tooltip content={app.spec.source.repoURL}> 92 <span>{app.spec.source.repoURL}</span> 93 </Tooltip> 94 </div> 95 </div> 96 <div className='row'> 97 <div className='columns small-3' title='Target Revision:'> 98 Target Revision: 99 </div> 100 <div className='columns small-9'>{app.spec.source.targetRevision}</div> 101 </div> 102 {app.spec.source.path && ( 103 <div className='row'> 104 <div className='columns small-3' title='Path:'> 105 Path: 106 </div> 107 <div className='columns small-9'>{app.spec.source.path}</div> 108 </div> 109 )} 110 {app.spec.source.chart && ( 111 <div className='row'> 112 <div className='columns small-3' title='Chart:'> 113 Chart: 114 </div> 115 <div className='columns small-9'>{app.spec.source.chart}</div> 116 </div> 117 )} 118 <div className='row'> 119 <div className='columns small-3' title='Destination:'> 120 Destination: 121 </div> 122 <div className='columns small-9'> 123 <Cluster server={app.spec.destination.server} name={app.spec.destination.name} /> 124 </div> 125 </div> 126 <div className='row'> 127 <div className='columns small-3' title='Namespace:'> 128 Namespace: 129 </div> 130 <div className='columns small-9'>{app.spec.destination.namespace}</div> 131 </div> 132 <div className='row'> 133 <div className='columns applications-list__entry--actions'> 134 <a 135 className='argo-button argo-button--base' 136 qe-id='applications-tiles-button-sync' 137 onClick={e => { 138 e.stopPropagation(); 139 syncApplication(app.metadata.name); 140 }}> 141 <i className='fa fa-sync' /> Sync 142 </a> 143 144 <a 145 className='argo-button argo-button--base' 146 qe-id='applications-tiles-button-refresh' 147 {...AppUtils.refreshLinkAttrs(app)} 148 onClick={e => { 149 e.stopPropagation(); 150 refreshApplication(app.metadata.name); 151 }}> 152 <i className={classNames('fa fa-redo', {'status-icon--spin': AppUtils.isAppRefreshing(app)})} />{' '} 153 <span className='show-for-xlarge'>Refresh</span> 154 </a> 155 156 <a 157 className='argo-button argo-button--base' 158 qe-id='applications-tiles-button-delete' 159 onClick={e => { 160 e.stopPropagation(); 161 deleteApplication(app.metadata.name); 162 }}> 163 <i className='fa fa-times-circle' /> Delete 164 </a> 165 </div> 166 </div> 167 </div> 168 </div> 169 </div> 170 </div> 171 ))} 172 </div> 173 )} 174 </Consumer> 175 );