Merge pull request #795 from weaveworks/638-animate-sparklines

Animate sparklines

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

@@ -1,17 +1,22 @@
 import React from 'react';
 
 import Sparkline from '../sparkline';
+import metricFeeder from '../../hoc/metric-feeder';
 import { formatMetric } from '../../utils/string-utils';
 
-export default (props) => {
-  return (
-    <div className="node-details-health-item">
-    <div className="node-details-health-item-value">{formatMetric(props.item.value, props.item)}</div>
-      <div className="node-details-health-item-sparkline">
-        <Sparkline data={props.item.samples} min={0} max={props.item.max}
-          first={props.item.first} last={props.item.last} interpolate="none" />
+class NodeDetailsHealthItem extends React.Component {
+  render() {
+    return (
+      <div className="node-details-health-item">
+      <div className="node-details-health-item-value">{formatMetric(this.props.value, this.props)}</div>
+        <div className="node-details-health-item-sparkline">
+          <Sparkline data={this.props.samples} max={this.props.max}
+            first={this.props.first} last={this.props.last} />
+        </div>
+        <div className="node-details-health-item-label">{this.props.label}</div>
       </div>
-      <div className="node-details-health-item-label">{props.item.label}</div>
-    </div>
-  );
-};
+    );
+  }
+}
+
+export default metricFeeder(NodeDetailsHealthItem);

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

@@ -1,14 +1,17 @@
 import React from 'react';
 
+import metricFeeder from '../../hoc/metric-feeder';
 import { formatMetric } from '../../utils/string-utils';
 
-export default class NodeDetailsHealthOverflowItem extends React.Component {
+class NodeDetailsHealthOverflowItem extends React.Component {
   render() {
     return (
       <div className="node-details-health-overflow-item">
-      <div className="node-details-health-overflow-item-value">{formatMetric(this.props.item.value, this.props.item)}</div>
-        <div className="node-details-health-overflow-item-label truncate">{this.props.item.label}</div>
+      <div className="node-details-health-overflow-item-value">{formatMetric(this.props.value, this.props)}</div>
+        <div className="node-details-health-overflow-item-label truncate">{this.props.label}</div>
       </div>
     );
   }
 }
+
+export default metricFeeder(NodeDetailsHealthOverflowItem);

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

@@ -8,7 +8,7 @@ export default class NodeDetailsHealthOverflow extends React.Component {
 
     return (
       <div className="node-details-health-overflow" onClick={this.props.handleClickMore}>
-        {items.map(item => <NodeDetailsHealthOverflowItem key={item.id} item={item} />)}
+        {items.map(item => <NodeDetailsHealthOverflowItem key={item.id} {...item} />)}
         <div className="node-details-health-overflow-expand">
           Show more
         </div>

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

@@ -32,7 +32,7 @@ export default class NodeDetailsHealth extends React.Component {
     return (
       <div className="node-details-health" style={{flexWrap, justifyContent}}>
           {primeMetrics.map(item => {
-            return <NodeDetailsHealthItem key={item.id} item={item} />;
+            return <NodeDetailsHealthItem key={item.id} {...item} />;
           })}
         {showOverflow && <NodeDetailsHealthOverflow items={overflowMetrics} handleClickMore={this.handleClickMore} />}
         {showLess && <div className="node-details-health-expand" onClick={this.handleClickMore}>show less</div>}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { formatMetric } from '../../utils/string-utils';
+
+class NodeDetailsTableNodeMetric extends React.Component {
+  render() {
+    return (
+      <td className="node-details-table-node-metric">
+        {formatMetric(this.props.value, this.props)}
+      </td>
+    );
+  }
+}
+
+export default NodeDetailsTableNodeMetric;

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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 
 import NodeDetailsTableNodeLink from './node-details-table-node-link';
-import { formatMetric } from '../../utils/string-utils';
+import NodeDetailsTableNodeMetric from './node-details-table-node-metric';
 
 export default class NodeDetailsTable extends React.Component {
 
@@ -60,6 +60,7 @@ export default class NodeDetailsTable extends React.Component {
     ['metrics', 'metadata'].forEach(collection => {
       if (node[collection]) {
         node[collection].forEach(field => {
+          field.valueType = collection;
           values[field.id] = field;
         });
       }
@@ -116,11 +117,14 @@ export default class NodeDetailsTable extends React.Component {
     return this.props.columns.map(col => {
       const field = fields[col];
       if (field) {
-        return (
-          <td className="node-details-table-node-value" key={field.id}>
-            {formatMetric(field.value, field)}
-          </td>
-        );
+        if (field.valueType === 'metadata') {
+          return (
+            <td className="node-details-table-node-value" key={field.id}>
+              {field.value}
+            </td>
+          );
+        }
+        return <NodeDetailsTableNodeMetric key={field.id} {...field} />;
       }
     });
   }