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

Force some known column widths to prevent truncation of others

Browse Source 
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
This commit is contained in:
Simon Howe
2016-07-05 12:26:10 +02:00
parent d79a412116
commit f11c559499
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)
};