From 9b8a31474250b2e5aed15d350ab70f2031363343 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 2 Sep 2015 17:45:07 +0200
Subject: [PATCH 1/3] Trim long container names and labels in details

fixes #418
---
 client/app/scripts/components/node-details-table.js | 10 +++++++---
 client/app/scripts/components/node-details.js       |  8 +++++---
 client/app/styles/main.less                         |  7 +++++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
index dd43a590c..baa8601da 100644
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -14,11 +14,15 @@ const NodeDetailsTable = React.createClass({
         {this.props.rows.map(function(row) {
           return (
             <div className="node-details-table-row">
-              <div className="node-details-table-row-key">{row.key}</div>
+              <div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
               {isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
               {isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
-              {!isNumeric && <div className="node-details-table-row-value-major truncate">{row.value_major}</div>}
-              {!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate">{row.value_minor}</div>}
+              {!isNumeric && <div className="node-details-table-row-value-major truncate" title={row.value_major}>
+                {row.value_major}
+              </div>}
+              {!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate" title={row.value_minor}>
+                {row.value_minor}
+              </div>}
             </div>
           );
         })}
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 0696bd79e..cd1177d3e 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -28,7 +28,7 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header node-details-header-notavailable">
-          <h2 className="node-details-header-label truncate">
+          <h2 className="node-details-header-label">
             n/a
           </h2>
           <div className="node-details-header-label-minor truncate">
@@ -64,10 +64,12 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header" style={style}>
-          <h2 className="node-details-header-label truncate">
+          <h2 className="node-details-header-label truncate" title={details.label_major}>
             {details.label_major}
           </h2>
-          <div className="node-details-header-label-minor truncate">{details.label_minor}</div>
+          <div className="node-details-header-label-minor truncate" title={details.label_minor}>
+            {details.label_minor}
+          </div>
         </div>
 
         <div className="node-details-content">
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 2dba6430f..20df646ba 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -310,13 +310,16 @@ body {
 
   &-table {
 
-    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 1em;
+    }
 
     &-title {
       text-transform: uppercase;
-      margin-bottom: 0;
+      margin-bottom: 0.25em;
       color: @text-secondary-color;
       font-size: 100%;
+      line-height: 125%;
     }
 
     &-row {

From 3fd98df8accbc8a323a8e531b786eb4ad0ed3625 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 2 Sep 2015 18:05:26 +0200
Subject: [PATCH 2/3] add row keys to keep react happy

---
 client/app/scripts/components/node-details-table.js | 2 +-
 client/app/scripts/components/node-details.js       | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
index baa8601da..c5e7981e0 100644
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -13,7 +13,7 @@ const NodeDetailsTable = React.createClass({
 
         {this.props.rows.map(function(row) {
           return (
-            <div className="node-details-table-row">
+            <div className="node-details-table-row" key={row.key + row.value_major}>
               <div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
               {isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
               {isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index cd1177d3e..235a4f34d 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -1,3 +1,4 @@
+const _ = require('lodash');
 const React = require('react');
 
 const NodeDetailsTable = require('./node-details-table');
@@ -74,7 +75,8 @@ const NodeDetails = React.createClass({
 
         <div className="node-details-content">
           {details.tables.map(function(table) {
-            return <NodeDetailsTable title={table.title} rows={table.rows} isNumeric={table.numeric} />;
+            const key = _.snakeCase(table.title);
+            return <NodeDetailsTable title={table.title} key={key} rows={table.rows} isNumeric={table.numeric} />;
           })}
         </div>
       </div>

From e08d533b72b8de6749e8244b1063cdc227ebc718 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 2 Sep 2015 18:09:36 +0200
Subject: [PATCH 3/3] truncate details table titles as well

---
 client/app/scripts/components/node-details-table.js | 2 +-
 client/app/styles/main.less                         | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
index c5e7981e0..5e5d4ea63 100644
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -7,7 +7,7 @@ const NodeDetailsTable = React.createClass({
 
     return (
       <div className="node-details-table">
-        <h4 className="node-details-table-title">
+        <h4 className="node-details-table-title truncate" title={this.props.title}>
           {this.props.title}
         </h4>
 
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 20df646ba..32eaf6e0a 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -316,10 +316,9 @@ body {
 
     &-title {
       text-transform: uppercase;
-      margin-bottom: 0.25em;
+      margin-bottom: 0;
       color: @text-secondary-color;
       font-size: 100%;
-      line-height: 125%;
     }
 
     &-row {