Elgato_dark/argo-cd
1
0
Fork 0
mirror of https://github.com/argoproj/argo-cd synced 2026-05-24 09:50:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Word-wraps app info in the table and list views. Closes #2004 (#2026)

Browse source
This commit is contained in:
Alex Collins 2019-07-29 16:14:36 -07:00 committed by GitHub
parent 4ec2ed3fe6
commit 3f34667dc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/src/app/applications/components/applications-list/applications-table.tsx
View file

@ -17,7 +17,7 @@ export const ApplicationsTable = (props: {
<div className='argo-table-list argo-table-list--clickable'>
<div className='argo-table-list__head'>
<div className='row'>
<div className='columns large-2 small-6'>PROJECT/NAME</div>
<div className='columns large-3 small-6'>PROJECT/NAME</div>
<div className='columns large-3 show-for-large'>SOURCE</div>
<div className='columns large-1 small-2'>TARGET REVISION</div>
<div className='columns large-3 show-for-large'>DESTINATION</div>
@ -30,25 +30,22 @@ export const ApplicationsTable = (props: {
applications-list__entry--health-${app.status.health.status}`
}>
<div className='row applications-list__table-row' onClick={(e) => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, { event: e })}>
<div className='columns large-2 small-6'>
<div className='columns large-3 small-6 wrap'>
<i className='icon argo-icon-application'/> {app.spec.project}/{app.metadata.name} <ApplicationURLs urls={app.status.summary.externalURLs}/>
</div>
<div className='columns large-3 show-for-large'>
<div className='columns large-3 show-for-large wrap'>
{app.spec.source.repoURL}/{app.spec.source.path}
</div>
<div className='columns large-1 small-2'>
{app.spec.source.targetRevision || 'HEAD'}
</div>
<div className='columns large-3 show-for-large'>
<div className='columns large-3 show-for-large wrap'>
{app.spec.destination.server}/{app.spec.destination.namespace}
</div>
<div className='columns large-3 small-4'>
<div className='applications-list__table-icon'>
<AppUtils.HealthStatusIcon state={app.status.health}/> <span>{app.status.health.status}</span>
</div>
<div className='applications-list__table-icon'>
<AppUtils.ComparisonStatusIcon status={app.status.sync.status}/> <span>{app.status.sync.status}</span>
</div>
<div className='columns large-2 small-4'>
<AppUtils.HealthStatusIcon state={app.status.health}/> <span>{app.status.health.status}</span>
&nbsp;
<AppUtils.ComparisonStatusIcon status={app.status.sync.status}/> <span>{app.status.sync.status}</span>
<DropDownMenu anchor={() => (
<button className='argo-button argo-button--light argo-button--lg argo-button--short'>
<i className='fa fa-ellipsis-v'/>

6
ui/src/app/applications/components/applications-list/applications-tiles.scss Normal file
View file

@ -0,0 +1,6 @@
.applications-tiles {
.argo-table-list__row {
padding-top: 0;
padding-bottom: 0;
}
}

10
ui/src/app/applications/components/applications-list/applications-tiles.tsx
View file

@ -7,6 +7,8 @@ import * as models from '../../../shared/models';
import { ApplicationURLs } from '../application-urls';
import * as AppUtils from '../utils';
require('./applications-tiles.scss');
export interface ApplicationTilesProps {
applications: models.Application[];
syncApplication: (appName: string) => any;
@ -17,7 +19,7 @@ export interface ApplicationTilesProps {
export const ApplicationTiles = ({applications, syncApplication, refreshApplication, deleteApplication}: ApplicationTilesProps) => (
<Consumer>
{(ctx) => (
<div className='argo-table-list argo-table-list--clickable row small-up-1 medium-up-2 large-up-3'>
<div className='applications-tiles argo-table-list argo-table-list--clickable row small-up-1 medium-up-2 large-up-3'>
{applications.map((app) => (
<div key={app.metadata.name} className='column column-block'>
<div className={`argo-table-list__row
@ -64,10 +66,8 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
</div>
<div className='row'>
<div className='columns small-3'>Namespace:</div>
<div className='columns small-9'>
<Tooltip content={app.spec.destination.namespace}>
<span>{app.spec.destination.namespace}</span>
</Tooltip>
<div className='columns small-9 wrap'>
{app.spec.destination.namespace}
</div>
</div>
<div className='row'>