web: Put status icon into one label

In some recent changes I've been looking at the narrow view of the
console page.  One thing that remains inconsistent is the magnifying
arrow; it can jump around depending on the page width and in my
subjective opinion it looks a little out of context.

This proposes making a single "pill" for the status and magnifying
icon.  The width should be consistent, and the magnifying glass
floating right behind a divider to inidicate it is separate to the
status -- it is also set to not break so it stays together.

Change-Id: I183d4c939a1c74e21198564d1d51e33ecdbc813c

1 files changed, 29 insertions, 22 deletions

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index 74f1274d7..9faf59974 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -29,6 +29,7 @@ import {
   DataListItemCells,
   DataListToggle,
   DataListContent,
+  Divider,
   Flex,
   FlexItem,
   Label,
@@ -231,35 +232,39 @@ class HostTask extends React.Component {
       <DataListCell key='name' width={4}>{name}</DataListCell>
     )
 
-    let label = null
+    let labelColor = null
+    let labelString = null
+
     if (this.state.failed) {
-      label = <Label color='red' onClick={this.open}
-                     style={{cursor: 'pointer'}}>FAILED</Label>
+      labelColor = 'red'
+      labelString = 'Failed'
     } else if (this.state.changed) {
-      label = <Label color='orange' onClick={this.open}
-                     style={{cursor: 'pointer'}}>CHANGED</Label>
+      labelColor = 'orange'
+      labelString = 'Changed'
     } else if (this.state.skipped) {
-      label = <Label color='grey' onClick={this.open}
-                     style={{cursor: 'pointer'}}>SKIPPED</Label>
+      labelColor = 'grey'
+      labelString = 'Skipped'
     } else if (this.state.ok) {
-      label = <Label color='green' onClick={this.open}
-                     style={{cursor: 'pointer'}}>OK</Label>
+      labelColor = 'green'
+      labelString = 'OK'
     }
 
     dataListCells.push(
       <DataListCell key='state'>
-          <Flex>
-            <FlexItem>
-              <Tooltip content={<div>Click for details</div>}>
-                <SearchPlusIcon style={{cursor: 'pointer'}} onClick={this.open} />
-              </Tooltip>
-            </FlexItem>
-            <FlexItem>
-              <Tooltip content={<div>Click for details</div>}>
-                {label}
-              </Tooltip>
-            </FlexItem>
-          </Flex>
+        <Tooltip content={<div>Click for details</div>}>
+          <Label color={labelColor} onClick={this.open}
+                 style={{cursor: 'pointer'}}>
+            <Flex flexWrap={{default: 'nowrap' }}>
+              <FlexItem style={{minWidth: '7ch'}}>
+                {labelString}
+              </FlexItem>
+              <Divider align={{default: 'alignRight'}} orientation={{default: 'vertical'}} />
+              <FlexItem>
+                <SearchPlusIcon color='var(--pf-global--Color--200)' style={{cursor: 'pointer'}} />
+              </FlexItem>
+            </Flex>
+          </Label>
+        </Tooltip>
       </DataListCell>)
 
     dataListCells.push(
@@ -325,7 +330,9 @@ class HostTask extends React.Component {
     }
 
     const modalDescription = <Flex>
-                               <FlexItem>{label}</FlexItem>
+                               <FlexItem>
+                                 <Label color={labelColor}>{labelString}</Label>
+                               </FlexItem>
                                <FlexItem>
                                  <Chip isReadOnly={true} textMaxWidth='50ch'>
                                    <span style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>