summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorIan Wienand <iwienand@redhat.com>2022-09-02 08:17:34 +1000
committerIan Wienand <iwienand@redhat.com>2022-09-13 11:24:58 +1000
commit7a8a979fda7b09a10600ce2c4d8d2c73a8acf985 (patch)
treed28f64142f5c1c8d9745e569c57d14c1ff62b270 /web
parent588b1ab187429d7502bf9bd327d5c6268ea48591 (diff)
downloadzuul-7a8a979fda7b09a10600ce2c4d8d2c73a8acf985.tar.gz
web: console: better task modal titles
The task modal title is very sparse; since this can be deep-linked it should provide more context. This adds the task description as the main title, then adds the status, node and deeplink icon as the modal-description. This should give more context to what is going on, and everything is styled the same as on the console page so it's visually consistent. Change-Id: I804d2eba9d67ed3a8781aa15ab6a14a2434329bb
Diffstat (limited to 'web')
-rw-r--r--web/src/containers/build/Console.jsx23
1 files changed, 16 insertions, 7 deletions
diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index d3a456075..96ccb95e9 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -324,20 +324,29 @@ class HostTask extends React.Component {
const item = interestingKeys ? expandableItem : regularItem
- // TODO(ianw) : This goes in the modal; this could be made to look
- // much better with headings and footers and whatnot.
- const description = <a href={'#'+makeTaskPath(taskPath)}>
- <LinkIcon name='link' title='Permalink' />
- </a>
+ const modalDescription = <Flex>
+ <FlexItem>{label}</FlexItem>
+ <FlexItem>
+ <Chip isReadOnly={true} textMaxWidth='50ch'>
+ <span style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>
+ <ContainerNodeIcon />&nbsp;{hostname}</span>
+ </Chip>
+ </FlexItem>
+ <FlexItem>
+ <a href={'#'+makeTaskPath(taskPath)}>
+ <LinkIcon name='link' title='Permalink' />
+ </a>
+ </FlexItem>
+ </Flex>
return (
<>
{item}
<Modal
- title={hostname}
+ title={name}
isOpen={this.state.showModal}
onClose={this.close}
- description={description}>
+ description={modalDescription}>
<TaskOutput data={host}/>
</Modal>
</>