From f11c559499f4e75bf586913dbc2250775a3cde0c Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Tue, 5 Jul 2016 12:26:10 +0200
Subject: [PATCH] Force some known column widths to prevent truncation of
 others

Port/count won't exceed a certain width so slim those down to free up
space for the IPs.

This can be extended to CPU/memory in the future but that needs a little
more refactoring in the number renderers
---
 .../node-details/node-details-table.js        | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js
index 7553def3a..667e61d04 100644
--- a/client/app/scripts/components/node-details/node-details-table.js
+++ b/client/app/scripts/components/node-details/node-details-table.js
@@ -5,10 +5,18 @@ import ShowMore from '../show-more';
 import NodeDetailsTableNodeLink from './node-details-table-node-link';
 import NodeDetailsTableNodeMetric from './node-details-table-node-metric';
 
+
 function isNumberField(field) {
   return field.dataType && field.dataType === 'number';
 }
 
+
+const COLUMN_WIDTHS = {
+  port: '44px',
+  count: '70px'
+};
+
+
 export default class NodeDetailsTable extends React.Component {
 
   constructor(props, context) {
@@ -98,13 +106,21 @@ export default class NodeDetailsTable extends React.Component {
       // Beauty hack: adjust first column width if there are only few columns;
       // this assumes the other columns are narrow metric columns of 20% table width
       if (headers.length === 2) {
-        headers[0].width = 66;
+        headers[0].width = '66%';
       } else if (headers.length === 3) {
-        headers[0].width = 50;
+        headers[0].width = '50%';
       } else if (headers.length >= 3) {
-        headers[0].width = 33;
+        headers[0].width = '33%';
       }
 
+      //
+      // More beauty hacking, ports and counts can only get so big, free up WS for other longer
+      // fields like IPs!
+      //
+      headers.forEach(h => {
+        h.width = COLUMN_WIDTHS[h.id];
+      });
+
       return (
         <tr>
           {headers.map(header => {
@@ -125,7 +141,7 @@ export default class NodeDetailsTable extends React.Component {
             // set header width in percent
             const style = {};
             if (header.width) {
-              style.width = `${header.width}%`;
+              style.width = header.width;
             }
 
             return (
@@ -210,6 +226,7 @@ export default class NodeDetailsTable extends React.Component {
   }
 }
 
+
 NodeDetailsTable.defaultProps = {
   nodeIdKey: 'id' // key to identify a node in a row (used for topology links)
 };