github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-28 09:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic table header width according to scrollbar (#3169)

Browse Source 
Sizes the fixed table header of `NodeDetailsTable` width dynamically
depending on the content's scrollbar width. Makes sure the table header
cells align with the table body cells.

This also widens the "Parent PID" cell to make sure the text is not cut
off. Alternatively, could be renamed to "PPID".

Fixes #3158.
This commit is contained in:
Roland Schilter
2018-05-11 13:26:45 -07:00
committed by GitHub
parent 25415f7cba
commit daccb6648d
3 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,6 +145,7 @@ class NodeDetailsTable extends React.Component {
this.onMouseLeaveRow = this.onMouseLeaveRow.bind(this);
this.onMouseEnterRow = this.onMouseEnterRow.bind(this);
this.saveTableContentRef = this.saveTableContentRef.bind(this);
this.saveTableHeadRef = this.saveTableHeadRef.bind(this);
// Use debouncing to prevent event flooding when e.g. crossing fast with mouse cursor
// over the whole table. That would be expensive as each focus causes table to rerender.
this.debouncedFocusRow = debounce(this.focusRow, TABLE_ROW_FOCUS_DEBOUNCE_INTERVAL);
@@ -172,7 +173,7 @@ class NodeDetailsTable extends React.Component {
this.focusState = {
focusedNode: node,
focusedRowIndex: rowIndex,
tableContentMinHeightConstraint: this.tableContent && this.tableContent.scrollHeight,
tableContentMinHeightConstraint: this.tableContentRef && this.tableContentRef.scrollHeight,
};
}
@@ -192,7 +193,11 @@ class NodeDetailsTable extends React.Component {
}
saveTableContentRef(ref) {
this.tableContent = ref;
this.tableContentRef = ref;
}
saveTableHeadRef(ref) {
this.tableHeadRef = ref;
}
getColumnHeaders() {
@@ -200,6 +205,11 @@ class NodeDetailsTable extends React.Component {
return [{id: 'label', label: this.props.label}].concat(columns);
}
componentDidMount() {
const scrollbarWidth = this.tableContentRef.offsetWidth - this.tableContentRef.clientWidth;
this.tableHeadRef.style.paddingRight = `${scrollbarWidth}px`;
}
render() {
const {
nodeIdKey, columns, topologyId, onClickRow,
@@ -250,7 +260,7 @@ class NodeDetailsTable extends React.Component {
<div className={className} style={this.props.style}>
<div className="node-details-table-wrapper">
<table className="node-details-table">
<thead>
<thead ref={this.saveTableHeadRef}>
{this.props.nodes && this.props.nodes.length > 0 && <NodeDetailsTableHeaders
headers={headers}
sortedBy={sortedBy}

2
client/app/scripts/constants/styles.js
View File

@@ -70,7 +70,7 @@ export const NODE_DETAILS_TABLE_COLUMN_WIDTHS = {
open_files_count: NODE_DETAILS_TABLE_CW.M,
pid: NODE_DETAILS_TABLE_CW.S,
port: NODE_DETAILS_TABLE_CW.S,
ppid: NODE_DETAILS_TABLE_CW.S,
ppid: NODE_DETAILS_TABLE_CW.M, // Label "Parent PID" needs more space
process_cpu_usage_percent: NODE_DETAILS_TABLE_CW.M,
process_memory_usage_bytes: NODE_DETAILS_TABLE_CW.M,
threads: NODE_DETAILS_TABLE_CW.M,