diff options
| author | Ian Wienand <iwienand@redhat.com> | 2022-09-02 08:17:34 +1000 |
|---|---|---|
| committer | Ian Wienand <iwienand@redhat.com> | 2022-09-13 11:24:58 +1000 |
| commit | 7a8a979fda7b09a10600ce2c4d8d2c73a8acf985 (patch) | |
| tree | d28f64142f5c1c8d9745e569c57d14c1ff62b270 /web | |
| parent | 588b1ab187429d7502bf9bd327d5c6268ea48591 (diff) | |
| download | zuul-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.jsx | 23 |
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 /> {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> </> |