diff options
author | Ian Wienand <iwienand@redhat.com> | 2022-09-02 07:55:49 +1000 |
---|---|---|
committer | Ian Wienand <iwienand@redhat.com> | 2022-09-13 11:24:58 +1000 |
commit | 588b1ab187429d7502bf9bd327d5c6268ea48591 (patch) | |
tree | 8d93d9569e97787b504bf0c0d45869c86fc706e3 /web | |
parent | 46eb8ab9dddf682444ae67033c6964bf9e22e9fa (diff) | |
download | zuul-588b1ab187429d7502bf9bd327d5c6268ea48591.tar.gz |
web: task summary: make more consistent with other tabs
After converting the console to PF4 with
Ie480deb046502879542e41844e919a362203e25d, flipping back through the
tabs I notied some inconsistency with the "Task Summary" tab.
Firstly this puts a <br> so it is vertically aligned the same as the
other tabs. We remove the card around it because nothing else uses
this; now it is a DataList that is the same as the console page. CSS
is added to remove the top line which is also inconsistent with the
other tabs.
We convert the node to a chip with a node icon as used elsewhere.
Future work would probably be to put the failed tasks as expandable
content in each node's summary line.
Change-Id: Ic134cf560cc78540f6af71964ac366f89ca594d9
Diffstat (limited to 'web')
-rw-r--r-- | web/src/containers/build/BuildOutput.jsx | 27 | ||||
-rw-r--r-- | web/src/index.css | 16 |
2 files changed, 33 insertions, 10 deletions
diff --git a/web/src/containers/build/BuildOutput.jsx b/web/src/containers/build/BuildOutput.jsx index 8c064f860..2066852da 100644 --- a/web/src/containers/build/BuildOutput.jsx +++ b/web/src/containers/build/BuildOutput.jsx @@ -20,6 +20,7 @@ import { Card, CardBody, CardHeader, + Chip, DataList, DataListItem, DataListItemRow, @@ -32,6 +33,7 @@ import { import { CheckCircleIcon, + ContainerNodeIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, @@ -44,19 +46,23 @@ class BuildOutput extends React.Component { renderHosts (hosts) { return ( - <Card> - <CardHeader> - <strong>Task run summary</strong> - </CardHeader> - <CardBody> - <DataList aria-label="Build Results"> + <> + <br /> + <div className={'zuul-task-summary'}> + <DataList aria-label="Build Results" isCompact={true}> {Object.entries(hosts).map(([host, values]) => ( <DataListItem key={host} aria-label="Host"> <DataListItemRow> <DataListItemCells dataListCells={[ - <DataListCell key={host + '.name'}>{host} </DataListCell>, - <DataListCell key={host + '.data'}> + <DataListCell key={host + '.name'}> + <Chip isReadOnly={true} textMaxWidth='50ch'> + <span style={{ fontSize: 'var(--pf-global--FontSize--md)' }}> + <ContainerNodeIcon /> {host} + </span> + </Chip> + </DataListCell>, + <DataListCell key={host + '.data'} > <Flex> <FlexItem> <Label color="green" icon={<CheckCircleIcon />}>{values.ok} OK</Label> @@ -75,8 +81,8 @@ class BuildOutput extends React.Component { </DataListItem> ))} </DataList> - </CardBody> - </Card> + </div> + </> ) } @@ -139,6 +145,7 @@ class BuildOutput extends React.Component { return ( <React.Fragment> {this.renderHosts(output)} + <br /> {Object.entries(output) .filter(([, values]) => values.failed.length > 0) .map(([host, values]) => (values.failed.map(failed => ( diff --git a/web/src/index.css b/web/src/index.css index b701255b8..b1dfc73f0 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -402,3 +402,19 @@ details.foldable[open] summary::before { .zuul-job-graph text { font-size: 12px; } + +/* task summary */ + +.zuul-task-summary .pf-c-data-list { + border: none +} + +.zuul-task-summary .pf-c-data-list__item:hover +{ + background: var(--pf-global--BackgroundColor--light-200); +} + +.zuul-task-summary .pf-c-data-list__item:hover::before +{ + background: var(--pf-global--active-color--400); +} |