From 9d5b9172fa40a8759aad0e8a0bd4c5bf7ba30203 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 13 Nov 2015 15:04:16 +0100
Subject: [PATCH 1/4] Fix react key warning

---
 client/app/scripts/components/topology-options.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/app/scripts/components/topology-options.js b/client/app/scripts/components/topology-options.js
index a749317a52..301324a37b 100644
--- a/client/app/scripts/components/topology-options.js
+++ b/client/app/scripts/components/topology-options.js
@@ -7,10 +7,15 @@ const TopologyOptions = React.createClass({
 
   renderAction: function(action, option, topologyId) {
     return (
-      <TopologyOptionAction option={option} value={action} topologyId={topologyId} />
+      <TopologyOptionAction option={option} value={action} topologyId={topologyId} key={action} />
     );
   },
 
+  /**
+   * transforms a list of options into one sidebar-item.
+   * The sidebar text comes from the active option. the actions come from the
+   * remaining items.
+   */
   renderOption: function(items) {
     let activeText;
     let activeValue;
@@ -41,7 +46,7 @@ const TopologyOptions = React.createClass({
     }, this);
 
     return (
-      <div className="sidebar-item">
+      <div className="sidebar-item" key={option}>
         {activeText}
         <span className="sidebar-item-actions">
           {actions}

From 232a2ebe2a47b0a302ee1530410880d6db0a74cf Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 13 Nov 2015 15:43:15 +0100
Subject: [PATCH 2/4] Fix react error in NodeDetailsControls

---
 .../app/scripts/components/node-details-controls.js  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/app/scripts/components/node-details-controls.js b/client/app/scripts/components/node-details-controls.js
index 07edc5e60a..fb46f2527c 100644
--- a/client/app/scripts/components/node-details-controls.js
+++ b/client/app/scripts/components/node-details-controls.js
@@ -14,11 +14,13 @@ const NodeDetailsControls = React.createClass({
 
     return (
       <div className="node-details-controls">
-        {this.props.controls && this.props.controls.map(control => {
-          return (
-            <NodeControlButton control={control} pending={this.props.pending} />
-          );
-        })}
+        <span className="node-details-controls-buttons">
+          {this.props.controls && this.props.controls.map(control => {
+            return (
+              <NodeControlButton control={control} pending={this.props.pending} key={control.id} />
+            );
+          })}
+        </span>
         {this.props.controls && <span title="Applying..." className={spinnerClassName}></span>}
         {this.props.error && <div className="node-details-controls-error" title={this.props.error}>
           <span className="node-details-controls-error-icon fa fa-warning" />

From 2000890cac55101f702ce1e15fa06d55b750b2d3 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 13 Nov 2015 15:49:41 +0100
Subject: [PATCH 3/4] Mitigate flattenChildren warning

---
 client/app/scripts/components/node-details-table.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
index b2a7cf1c1b..767c0585f7 100644
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -12,7 +12,7 @@ const NodeDetailsTable = React.createClass({
 
         {this.props.rows.map(function(row) {
           return (
-            <div className="node-details-table-row" key={row.key + row.value_major}>
+            <div className="node-details-table-row" key={row.key + row.value_major + row.value_minor}>
               <div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
               { row.value_type === 'numeric' && <div className="node-details-table-row-value-scalar">{row.value_major}</div> }
               { row.value_type === 'numeric' && <div className="node-details-table-row-value-unit">{row.value_minor}</div> }

From ee5124719222db677c48634c56eccc6becfd6556 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 13 Nov 2015 17:21:32 +0100
Subject: [PATCH 4/4] Fix getDOMNode warning

---
 client/app/scripts/components/sparkline.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/components/sparkline.js b/client/app/scripts/components/sparkline.js
index 306731b661..216e11bb2b 100644
--- a/client/app/scripts/components/sparkline.js
+++ b/client/app/scripts/components/sparkline.js
@@ -1,5 +1,6 @@
 // Forked from: https://github.com/KyleAMathews/react-sparkline at commit a9d7c5203d8f240938b9f2288287aaf0478df013
 const React = require('react');
+const ReactDOM = require('react-dom');
 const d3 = require('d3');
 
 const Sparkline = React.createClass({
@@ -21,7 +22,7 @@ const Sparkline = React.createClass({
 
   renderSparkline: function() {
     // If the sparkline has already been rendered, remove it.
-    const el = this.getDOMNode();
+    const el = ReactDOM.findDOMNode(this);
     while (el.firstChild) {
       el.removeChild(el.firstChild);
     }
@@ -89,9 +90,9 @@ const Sparkline = React.createClass({
       title = data.length + ' samples, min: ' + d3.round(d3.min(data), 2) + ', max: ' + d3.round(d3.max(data), 2) + ', mean: ' + d3.round(d3.mean(data), 2);
     }
 
-    d3.select(this.getDOMNode()).attr('title', title);
+    d3.select(ReactDOM.findDOMNode(this)).attr('title', title);
 
-    const svg = d3.select(this.getDOMNode()).
+    const svg = d3.select(ReactDOM.findDOMNode(this)).
       append('svg').
       attr('width', this.props.width).
       attr('height', this.props.height).