Review feedback

client/app/scripts/components/node-details.js

@@ -130,7 +130,6 @@ export default class NodeDetails extends React.Component {
 
   renderDetails() {
     const details = this.props.details;
-    const showSummary = (details.metadata || details.metrics || details.docker_labels) !== undefined;
     const showControls = details.controls && details.controls.length > 0;
     const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);
     const {error, pending} = (this.props.nodeControlStatus || {});
@@ -166,10 +165,13 @@ export default class NodeDetails extends React.Component {
         </div>}
 
         <div className="node-details-content">
-          {showSummary && <div className="node-details-content-section">
+          {details.metrics && <div className="node-details-content-section">
             <div className="node-details-content-section-header">Status</div>
-            {details.metrics && <NodeDetailsHealth metrics={details.metrics} />}
-            {details.metadata && <NodeDetailsInfo rows={details.metadata} />}
+            <NodeDetailsHealth metrics={details.metrics} />
+          </div>}
+          {details.metadata && <div className="node-details-content-section">
+            <div className="node-details-content-section-header">Info</div>
+            <NodeDetailsInfo rows={details.metadata} />
           </div>}
 
           {details.children && details.children.map(children => {

client/app/scripts/components/node-details/node-details-health-overflow.js

@@ -3,11 +3,22 @@ import React from 'react';
 import NodeDetailsHealthOverflowItem from './node-details-health-overflow-item';
 
 export default class NodeDetailsHealthOverflow extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(ev) {
+    ev.preventDefault();
+    this.props.handleClick();
+  }
+
   render() {
     const items = this.props.items.slice(0, 4);
 
     return (
-      <div className="node-details-health-overflow">
+      <div className="node-details-health-overflow" onClick={this.handleClick}>
         {items.map(item => <NodeDetailsHealthOverflowItem key={item.id} {...item} />)}
       </div>
     );

client/app/scripts/components/node-details/node-details-health.js

@@ -35,7 +35,8 @@ export default class NodeDetailsHealth extends React.Component {
             {primeMetrics.map(item => {
               return <NodeDetailsHealthItem key={item.id} {...item} />;
             })}
-          {showOverflow && <NodeDetailsHealthOverflow items={overflowMetrics} />}
+          {showOverflow && <NodeDetailsHealthOverflow items={overflowMetrics}
+            handleClick={() => this.handleClickMore()} />}
         </div>
         <ShowMore handleClick={() => this.handleClickMore()} collection={this.props.metrics}
           expanded={this.state.expanded} notShown={notShown} hideNumber />

client/app/scripts/components/node-details/node-details-table.js

@@ -115,6 +115,8 @@ export default class NodeDetailsTable extends React.Component {
         }
         return <NodeDetailsTableNodeMetric key={field.id} {...field} />;
       }
+      // empty cell to complete the row for proper hover
+      return <td className="node-details-table-node-value" key={id} />;
     });
   }
 

client/app/styles/main.less

@@ -546,10 +546,6 @@ h2 {
     padding: 0 36px 0 36px;
     overflow-y: auto;
 
-    &-info {
-      margin-top: 16px;
-    }
-
     &-loading {
       margin-top: 48px;
       text-align: center;
@@ -628,7 +624,6 @@ h2 {
   }
 
   &-info {
-    margin: 16px 0;
 
     &-field {
       display: flex;
@@ -694,7 +689,7 @@ h2 {
     table-layout: fixed;
 
     &-wrapper {
-      margin: 24px 0;
+      margin: 24px -4px;
     }
 
     &-header {
@@ -703,7 +698,7 @@ h2 {
       font-size: 90%;
       text-align: right;
       cursor: pointer;
-      padding: 0;
+      padding: 0 4px;
 
       &-sorted {
         color: @text-secondary-color;
@@ -728,7 +723,7 @@ h2 {
       }
 
       > * {
-        padding: 0;
+        padding: 0 4px;
       }
 
       &-link {
@@ -897,7 +892,7 @@ h2 {
 
 .show-more {
   .btn-opacity;
-  border-top: 1px solid lighten(@text-tertiary-color, 30%);
+  border-top: 1px dotted @border-light-color;
   padding: 0px 0;
   margin-top: 4px;
   text-align: right;