github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 10:11:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed column widths for node tables with few columns

Browse Source 
* Gives the node label column more space
* let the remaining columns fight over the rest

Fixes #1076
This commit is contained in:
David Kaltschmidt
2016-04-12 17:04:49 +02:00
parent d6eff06bc0
commit e497c3ce39
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/app/scripts/components/node-details/node-details-table.js
View File

@@ -95,6 +95,16 @@ 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 => {
@@ -102,6 +112,7 @@ export default class NodeDetailsTable extends React.Component {
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