Merge pull request #1272 from weaveworks/1076-maunal-column-width

Fixed column widths for node tables with few columns
weaveworks · Apr 12, 2016 · 7936977 · 7936977
2 parents d6eff06 + e497c3c
commit 7936977
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js
@@ -95,13 +95,24 @@ export default class NodeDetailsTable extends React.Component {
       const headers = [{id: 'label', label: this.props.label}].concat(columns);
       const defaultSortBy = this.getDefaultSortBy();
 
+      // 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;
+      } else if (headers.length === 3) {
+        headers[0].width = 50;
+      } else if (headers.length >= 3) {
+        headers[0].width = 33;
+      }
+
       return (
         <tr>
           {headers.map(header => {
             const headerClasses = ['node-details-table-header', 'truncate'];
             const onHeaderClick = ev => {
               this.handleHeaderClick(ev, header.id);
             };
+
             // sort by first metric by default
             const isSorted = this.state.sortBy !== null
               ? header.id === this.state.sortBy : header.id === defaultSortBy;
@@ -110,8 +121,16 @@ export default class NodeDetailsTable extends React.Component {
             if (isSorted) {
               headerClasses.push('node-details-table-header-sorted');
             }
+
+            // set header width in percent
+            const style = {};
+            if (header.width) {
+              style.width = `${header.width}%`;
+            }
+
             return (
-              <td className={headerClasses.join(' ')} onClick={onHeaderClick} key={header.id}>
+              <td className={headerClasses.join(' ')} style={style} onClick={onHeaderClick}
+                key={header.id}>
                 {isSortedAsc
                   && <span className="node-details-table-header-sorter fa fa-caret-up" />}
                 {isSortedDesc