Merge pull request #1874 from weaveworks/1862-fix-ip-truncation-in-conn-table

Fix ip column width in connections table, avoid truncating long ips

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

@@ -11,6 +11,7 @@ function isNumberField(field) {
 }
 
 const CW = {
+  XS: '32px',
   S: '50px',
   M: '80px',
   L: '120px',
@@ -19,8 +20,13 @@ const CW = {
 };
 
 
+const XS_LABEL = {
+  count: '#'
+};
+
+
 const COLUMN_WIDTHS = {
-  count: '70px',
+  count: CW.XS,
   docker_container_created: CW.XL,
   docker_container_restart_count: CW.M,
   docker_container_state_human: CW.XXL,
@@ -226,14 +232,19 @@ export default class NodeDetailsTable extends React.Component {
               headerClasses.push('node-details-table-header-sorted');
             }
 
+            const style = colStyles[i];
+            const label = (style.width === CW.XS && XS_LABEL[header.id]) ?
+              XS_LABEL[header.id] :
+              header.label;
+
             return (
-              <td className={headerClasses.join(' ')} style={colStyles[i]} onClick={onHeaderClick}
+              <td className={headerClasses.join(' ')} style={style} onClick={onHeaderClick}
                 title={header.label} key={header.id}>
                 {isSortedAsc
                   && <span className="node-details-table-header-sorter fa fa-caret-up" />}
                 {isSortedDesc
                   && <span className="node-details-table-header-sorter fa fa-caret-down" />}
-                {header.label}
+                {label}
               </td>
             );
           })}

render/detailed/connections.go

@@ -11,11 +11,13 @@ import (
 )
 
 const (
-	portKey    = "port"
-	portLabel  = "Port"
-	countKey   = "count"
-	countLabel = "Count"
-	number     = "number"
+	portKey     = "port"
+	portLabel   = "Port"
+	countKey    = "count"
+	countLabel  = "Count"
+	remoteKey   = "remote"
+	remoteLabel = "Remote"
+	number      = "number"
 )
 
 // Exported for testing
@@ -25,7 +27,7 @@ var (
 		{ID: countKey, Label: countLabel, DefaultSort: true},
 	}
 	InternetColumns = []Column{
-		{ID: "foo", Label: "Remote"},
+		{ID: remoteKey, Label: remoteLabel},
 		{ID: portKey, Label: portLabel},
 		{ID: countKey, Label: countLabel, DefaultSort: true},
 	}
@@ -140,7 +142,7 @@ func (c *connectionCounters) rows(r report.Report, ns report.Nodes, includeLocal
 		if includeLocal {
 			connection.Metadata = append(connection.Metadata,
 				report.MetadataRow{
-					ID:       "foo",
+					ID:       remoteKey,
 					Value:    row.localAddr,
 					Datatype: number,
 				})