From 7dfb126e31824ed2abeb017d5fbf930027e65ee4 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Mon, 15 Feb 2016 17:09:40 +0000
Subject: [PATCH] Docker Labels Component

* moved to bottom of details panel in its own section
* show all labels (no expand/collapse)
* label vs value width 1:1
---
 client/app/scripts/components/node-details.js |  8 +++--
 .../node-details/node-details-labels.js       | 24 +++++++++++++++
 client/app/styles/main.less                   | 29 +++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 client/app/scripts/components/node-details/node-details-labels.js

diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index d7a654586..a9ad0dc1b 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -4,6 +4,7 @@ import React from 'react';
 import NodeDetailsControls from './node-details/node-details-controls';
 import NodeDetailsHealth from './node-details/node-details-health';
 import NodeDetailsInfo from './node-details/node-details-info';
+import NodeDetailsLabels from './node-details/node-details-labels';
 import NodeDetailsRelatives from './node-details/node-details-relatives';
 import NodeDetailsTable from './node-details/node-details-table';
 import { clickCloseDetails, clickShowTopologyForNode } from '../actions/app-actions';
@@ -169,8 +170,6 @@ export default class NodeDetails extends React.Component {
             <div className="node-details-content-section-header">Status</div>
             {details.metrics && <NodeDetailsHealth metrics={details.metrics} />}
             {details.metadata && <NodeDetailsInfo rows={details.metadata} />}
-            {details.docker_labels && <div className="node-details-content-section-header">Docker Labels</div>}
-            {details.docker_labels && <NodeDetailsInfo rows={details.docker_labels} />}
           </div>}
 
           {details.children && details.children.map(children => {
@@ -180,6 +179,11 @@ export default class NodeDetails extends React.Component {
               </div>
             );
           })}
+
+          {details.docker_labels && details.docker_labels.length > 0 && <div className="node-details-content-section">
+            <div className="node-details-content-section-header">Docker Labels</div>
+            <NodeDetailsLabels rows={details.docker_labels} />
+          </div>}
         </div>
       </div>
     );
diff --git a/client/app/scripts/components/node-details/node-details-labels.js b/client/app/scripts/components/node-details/node-details-labels.js
new file mode 100644
index 000000000..ccc81e3ec
--- /dev/null
+++ b/client/app/scripts/components/node-details/node-details-labels.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default class NodeDetailsLabels extends React.Component {
+  render() {
+    return (
+      <div className="node-details-labels">
+        {this.props.rows.map(field => {
+          return (
+            <div className="node-details-labels-field" key={field.id}>
+              <div className="node-details-labels-field-label truncate" title={field.label}>
+                {field.label}
+              </div>
+              <div className="node-details-labels-field-value" title={field.value}>
+                <div className="truncate">
+                  {field.value}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index e72155543..3c7addb03 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -684,6 +684,35 @@ h2 {
     }
   }
 
+  &-labels {
+    &-field {
+      display: flex;
+      align-items: baseline;
+
+      &-label {
+        text-align: right;
+        width: 50%;
+        color: @text-secondary-color;
+        padding: 0 0.5em 0 0;
+        white-space: nowrap;
+        text-transform: uppercase;
+        font-size: 80%;
+
+        &::after {
+          content: ':';
+        }
+      }
+
+      &-value {
+        font-size: 105%;
+        flex: 1;
+        // Now required (from chrome 48) to get overflow + flexbox behaving:
+        min-width: 0;
+        color: @text-color;
+      }
+    }
+  }
+
   &-table {
     width: 100%;
     border-spacing: 0;