Refactored details health items to prepare for grouping

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

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

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

@@ -1,23 +1,13 @@
 import React from 'react';
 
-import Sparkline from '../sparkline';
-import { formatMetric } from '../../utils/string-utils';
+import NodeDetailsHealthItem from './node-details-health-item';
 
 export default class NodeDetailsHealth extends React.Component {
   render() {
     return (
       <div className="node-details-health">
-        {this.props.metrics && this.props.metrics.map(field => {
-          return (
-            <div className="node-details-health-field" key={field.id}>
-            <div className="node-details-health-field-value">{formatMetric(field.value, field)}</div>
-              <div className="node-details-health-field-sparkline">
-                <Sparkline data={field.samples} min={0} max={field.max}
-                  first={field.first} last={field.last} interpolate="none" />
-              </div>
-              <div className="node-details-health-field-label">{field.label}</div>
-            </div>
-          );
+        {this.props.metrics && this.props.metrics.map(item => {
+          return <NodeDetailsHealthItem key={item.id} item={item} />;
         })}
       </div>
     );

client/app/styles/main.less

@@ -538,11 +538,11 @@ h2 {
     justify-content: space-around;
     text-align: center;
 
-    &-field {
+    &-item {
       &-label {
-        color: @text-tertiary-color;
+        color: @text-secondary-color;
         text-transform: uppercase;
-        font-size: 90%;
+        font-size: 80%;
       }
 
       &-value {
@@ -558,13 +558,16 @@ h2 {
 
     &-field {
       display: flex;
+      align-items: baseline;
 
       &-label {
         text-align: right;
-        width: 6em;
+        width: 10em;
         color: @text-secondary-color;
         padding: 0 0.5em 0 0;
         white-space: nowrap;
+        text-transform: uppercase;
+        font-size: 80%;
 
         &::after {
           content: ':';