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 (