diff options
author | Ian Wienand <iwienand@redhat.com> | 2021-08-16 14:54:36 +1000 |
---|---|---|
committer | Ian Wienand <iwienand@redhat.com> | 2021-08-16 15:48:02 +1000 |
commit | aead5adcc5e0cf008dc915eb22254cda29f19327 (patch) | |
tree | ef6df7870dfb4b1dcf2c2c0a78fbe60a1525e9ac | |
parent | 10a942de8f0e7515ea0ad9fd8f1ae7fd2b4f5211 (diff) | |
download | zuul-aead5adcc5e0cf008dc915eb22254cda29f19327.tar.gz |
web: JobVariant: add icons
Similar to the build page, add icons next to the terms. I would agree
the layout of these is not absolutely consistent; I have filed [1] to
allow icons on DescriptionListTerm items, which I think would be the
best solution.
[1] https://github.com/patternfly/patternfly/issues/4298
Change-Id: Ic72cda3253337ad9501d5c0732a321b0d096c946
-rw-r--r-- | web/src/containers/job/JobVariant.jsx | 63 |
1 files changed, 37 insertions, 26 deletions
diff --git a/web/src/containers/job/JobVariant.jsx b/web/src/containers/job/JobVariant.jsx index bec543afb..bb515bb8b 100644 --- a/web/src/containers/job/JobVariant.jsx +++ b/web/src/containers/job/JobVariant.jsx @@ -23,12 +23,25 @@ import { ListVariant, } from '@patternfly/react-core' import { - ExternalLinkAltIcon, - LockedIcon, - InfrastructureIcon, + AnsibleTowerIcon, + BanIcon, + CatalogIcon, + ClipboardCheckIcon, + ClusterIcon, + CodeBranchIcon, + CodeIcon, ConnectedIcon, DisconnectedIcon, - OutlinedClockIcon + ExternalLinkAltIcon, + FlagIcon, + HistoryIcon, + InfrastructureIcon, + LockIcon, + LockedIcon, + OutlinedClockIcon, + PackageIcon, + RedoIcon, + WrenchIcon } from '@patternfly/react-icons' import { TableComposable, @@ -109,7 +122,7 @@ class JobVariant extends React.Component { context={variant.source_context} showBranch={true}/> ) - nice_label = 'Defined at' + nice_label = (<span><PackageIcon /> Defined at</span>) } if (label === 'builds') { value = ( @@ -117,11 +130,11 @@ class JobVariant extends React.Component { <ExternalLinkAltIcon /> {variant.name} </Link> ) - nice_label = 'Build history' + nice_label = (<span><HistoryIcon/> Build history</span>) } if (label === 'status') { value = this.renderStatus(variant) - nice_label = 'Job flags' + nice_label = (<span><FlagIcon/> Job flags</span>) } if (!value) { @@ -129,30 +142,26 @@ class JobVariant extends React.Component { } if (label === 'attempts') { - nice_label = 'Retry attempts' + nice_label = (<span><RedoIcon/> Retry attempts</span>) } if (label === 'timeout') { - value = ( - <span> - <OutlinedClockIcon /> {value} seconds - </span> - ) - nice_label = 'Timeout' + value = (<span>{value} seconds</span>) + nice_label = (<span><OutlinedClockIcon /> Timeout</span>) } if (label === 'semaphores') { - nice_label = 'Semaphores required' if (value.length === 0) { value = (<i>none</i>) } + nice_label = (<span><LockIcon /> Semaphores required</span>) } if (label === 'nodeset') { value = ( <Nodeset nodeset={value} /> ) - nice_label = 'Required nodes' + nice_label = (<span><ClusterIcon /> Required nodes</span>) } if (label === 'parent') { @@ -161,7 +170,7 @@ class JobVariant extends React.Component { <ExternalLinkAltIcon /> {value} </Link> ) - nice_label = 'Parent' + nice_label = (<span><CodeBranchIcon /> Parent</span>) } if (label === 'variables') { value = ( @@ -175,17 +184,19 @@ class JobVariant extends React.Component { displayDataTypes={false}/> </span> ) - nice_label = 'Job variables' + nice_label = (<span><CodeIcon /> Job variables</span>) } if (label === 'description') { value = ( - <div style={{whiteSpace: 'pre-wrap'}}> - {value} - </div> + <div style={{whiteSpace: 'pre-wrap'}}> + {value} + </div> ) - nice_label = 'Description' + nice_label = (<span><CatalogIcon /> Description</span>) } + rows.push({label: nice_label, value: value}) + }) const jobInfosList = [ 'required_projects', 'dependencies', 'files', 'irrelevant_files', 'roles' @@ -206,20 +217,20 @@ class JobVariant extends React.Component { nice_label = 'Required Projects' item = <JobProject project={value} /> } else if (label === 'roles') { - nice_label = 'Uses roles from' + nice_label = (<span><AnsibleTowerIcon /> Uses roles from</span>) item = <Role role={value} /> } else if (label === 'dependencies') { - nice_label = 'Job dependencies' + nice_label = (<span><WrenchIcon /> Job dependencies</span>) if (value['soft']) { item = value['name'] + ' (soft)' } else { item = value['name'] } } else if (label === 'irrelevant_files') { - nice_label = 'Irrelevant files matchers' + nice_label = (<span><BanIcon /> Irrelevant files matchers</span>) item = value } else if (label === 'files') { - nice_label = 'Files matchers' + nice_label = (<span><ClipboardCheckIcon />Files matchers</span>) item = value } else { item = value |