No preview for overflow health items

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

@@ -4,17 +4,18 @@ import Sparkline from '../sparkline';
 import { formatMetric } from '../../utils/string-utils';
 
 function NodeDetailsHealthItem(props) {
+  const labelStyle = { color: props.labelColor };
   return (
     <div className="node-details-health-item">
-      {!props.valueEmpty && <div className="node-details-health-item-value">{formatMetric(props.value, props)}</div>}
+      {!props.valueEmpty && <div className="node-details-health-item-value" style={labelStyle}>{formatMetric(props.value, props)}</div>}
       <div className="node-details-health-item-sparkline">
         <Sparkline
           data={props.samples} max={props.max} format={props.format}
           first={props.first} last={props.last} hoverColor={props.metricColor}
-          hovered={props.samples && props.hovered}
+          hovered={props.hovered}
         />
       </div>
-      <div className="node-details-health-item-label" style={{ color: props.labelColor }}>
+      <div className="node-details-health-item-label" style={labelStyle}>
         {props.label}
       </div>
     </div>

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

@@ -3,6 +3,7 @@ import React from 'react';
 import NodeDetailsHealthItem from './node-details-health-item';
 import CloudLink from '../cloud-link';
 import { getMetricColor } from '../../utils/metric-utils';
+import { darkenColor } from '../../utils/color-utils';
 import { trackMixpanelEvent } from '../../utils/tracking-utils';
 
 export default class NodeDetailsHealthLinkItem extends React.Component {
@@ -33,6 +34,7 @@ export default class NodeDetailsHealthLinkItem extends React.Component {
   render() {
     const { id, url, ...props } = this.props;
     const metricColor = getMetricColor(id);
+    const labelColor = this.state.hovered && !props.valueEmpty && darkenColor(metricColor);
 
     return (
       <CloudLink
@@ -46,6 +48,7 @@ export default class NodeDetailsHealthLinkItem extends React.Component {
         <NodeDetailsHealthItem
           {...props}
           hovered={this.state.hovered}
+          labelColor={labelColor}
           metricColor={metricColor}
         />
       </CloudLink>

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

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { formatMetric } from '../../utils/string-utils';
-
-function NodeDetailsHealthOverflowItem(props) {
-  return (
-    <div className="node-details-health-overflow-item">
-      <div className="node-details-health-overflow-item-value">
-        {!props.valueEmpty && formatMetric(props.value, props)}
-      </div>
-      <div className="node-details-health-overflow-item-label truncate">{props.label}</div>
-    </div>
-  );
-}
-
-export default NodeDetailsHealthOverflowItem;

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

@@ -1,26 +0,0 @@
-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" onClick={this.handleClick} title="Expand metrics">
-        {items.map(item => <NodeDetailsHealthOverflowItem key={item.id} {...item} />)}
-      </div>
-    );
-  }
-}

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import ShowMore from '../show-more';
-import NodeDetailsHealthOverflow from './node-details-health-overflow';
 import NodeDetailsHealthLinkItem from './node-details-health-link-item';
 
 export default class NodeDetailsHealth extends React.Component {
@@ -25,30 +24,38 @@ export default class NodeDetailsHealth extends React.Component {
       topologyId,
     } = this.props;
 
-    const primeCutoff = metrics.length > 3 && !this.state.expanded ? 2 : metrics.length;
-    const primeMetrics = metrics.slice(0, primeCutoff);
-    const overflowMetrics = metrics.slice(primeCutoff);
-    const showOverflow = overflowMetrics.length > 0 && !this.state.expanded;
-    const flexWrap = showOverflow || !this.state.expanded ? 'nowrap' : 'wrap';
-    const justifyContent = showOverflow || !this.state.expanded ? 'space-around' : 'flex-start';
-    const notShown = overflowMetrics.length;
+    let primeMetrics = metrics.filter(m => !m.valueEmpty);
+    let emptyMetrics = metrics.filter(m => m.valueEmpty);
+
+    if (primeMetrics.length === 0 && emptyMetrics.length > 0) {
+      primeMetrics = emptyMetrics;
+      emptyMetrics = [];
+    }
+
+    const shownWithData = this.state.expanded ? primeMetrics : primeMetrics.slice(0, 3);
+    const shownEmpty = this.state.expanded ? emptyMetrics : [];
+    const notShown = metrics.length - shownWithData.length - shownEmpty.length;
 
     return (
-      <div className="node-details-health" style={{flexWrap, justifyContent}}>
+      <div className="node-details-health" style={{ justifyContent: 'space-around' }}>
         <div className="node-details-health-wrapper">
-          {primeMetrics.map(item => <NodeDetailsHealthLinkItem
+          {shownWithData.map(item => <NodeDetailsHealthLinkItem
+            {...item}
+            key={item.id}
+            topologyId={topologyId}
+          />)}
+        </div>
+        <div className="node-details-health-wrapper">
+          {shownEmpty.map(item => <NodeDetailsHealthLinkItem
             {...item}
             key={item.id}
             topologyId={topologyId}
           />)}
-          {showOverflow && <NodeDetailsHealthOverflow
-            items={overflowMetrics}
-            handleClick={this.handleClickMore}
-          />}
         </div>
         <ShowMore
-          handleClick={this.handleClickMore} collection={this.props.metrics}
-          expanded={this.state.expanded} notShown={notShown} hideNumber />
+          handleClick={this.handleClickMore} collection={metrics}
+          expanded={this.state.expanded} notShown={notShown} hideNumber={this.state.expanded}
+        />
       </div>
     );
   }