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

Merge pull request #1784 from weaveworks/1745-right-align-column-numbers

Browse Source 
Right align numbers, left align strings.
This commit is contained in:
Simon
2016-08-15 09:43:31 +02:00
committed by GitHub
parent 6334836f69 3851d9c662
commit 6f9912501d
4 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/app/scripts/charts/nodes-grid.js
View File

@@ -18,7 +18,7 @@ function getColumns(nodes) {
.toList()
.flatMap(n => {
const metrics = (n.get('metrics') || makeList())
.map(m => makeMap({ id: m.get('id'), label: m.get('label') }));
.map(m => makeMap({ id: m.get('id'), label: m.get('label'), dataType: 'number' }));
return metrics;
})
.toSet()
@@ -29,7 +29,7 @@ function getColumns(nodes) {
.toList()
.flatMap(n => {
const metadata = (n.get('metadata') || makeList())
.map(m => makeMap({ id: m.get('id'), label: m.get('label') }));
.map(m => makeMap({ id: m.get('id'), label: m.get('label'), dataType: m.get('dataType') }));
return metadata;
})
.toSet()

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

@@ -32,11 +32,11 @@ function getValuesForNode(node) {
}
function renderValues(node, columns = [], columnWidths = []) {
function renderValues(node, columns = [], columnStyles = []) {
const fields = getValuesForNode(node);
return columns.map(({id}, i) => {
const field = fields[id];
const style = { width: columnWidths[i] };
const style = columnStyles[i];
if (field) {
if (field.valueType === 'metadata') {
return (
@@ -119,9 +119,9 @@ export default class NodeDetailsTableRow extends React.Component {
render() {
const { node, nodeIdKey, topologyId, columns, onClick, onMouseEnterRow, onMouseLeaveRow,
selected, widths } = this.props;
const [firstColumnWidth, ...columnWidths] = widths;
const values = renderValues(node, columns, columnWidths);
selected, colStyles } = this.props;
const [firstColumnStyle, ...columnStyles] = colStyles;
const values = renderValues(node, columns, columnStyles);
const nodeId = node[nodeIdKey];
const className = classNames('node-details-table-node', { selected });
@@ -133,7 +133,7 @@ export default class NodeDetailsTableRow extends React.Component {
onMouseLeave={onMouseLeaveRow && this.onMouseLeave}
className={className}>
<td ref={this.storeLabelRef} className="node-details-table-node-label truncate"
style={{ width: firstColumnWidth }}>
style={firstColumnStyle}>
{this.props.renderIdCell(Object.assign(node, {topologyId, nodeId}))}
</td>
{values}

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

@@ -117,28 +117,34 @@ function getSortedNodes(nodes, columns, sortBy, sortedDesc) {
}
function getColumnsWidths(headers) {
return headers.map((h, i) => {
//
// 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 (i === 0) {
if (headers.length === 2) {
return '66%';
} else if (headers.length === 3) {
return '50%';
} else if (headers.length > 3 && headers.length <= 5) {
return '33%';
}
function getColumnWidth(headers, h, i) {
//
// 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 (i === 0) {
if (headers.length === 2) {
return '66%';
} else if (headers.length === 3) {
return '50%';
} else if (headers.length > 3 && headers.length <= 5) {
return '33%';
}
}
//
// More beauty hacking, ports and counts can only get so big, free up WS for other longer
// fields like IPs!
//
return COLUMN_WIDTHS[h.id];
});
//
// More beauty hacking, ports and counts can only get so big, free up WS for other longer
// fields like IPs!
//
return COLUMN_WIDTHS[h.id];
}
function getColumnsStyles(headers) {
return headers.map((h, i) => ({
width: getColumnWidth(headers, h, i),
textAlign: h.dataType === 'number' ? 'right' : 'left',
}));
}
@@ -177,7 +183,7 @@ export default class NodeDetailsTable extends React.Component {
renderHeaders() {
if (this.props.nodes && this.props.nodes.length > 0) {
const headers = this.getColumnHeaders();
const widths = getColumnsWidths(headers);
const colStyles = getColumnsStyles(headers);
const defaultSortBy = getDefaultSortBy(this.props.columns, this.props.nodes);
return (
@@ -196,14 +202,8 @@ export default class NodeDetailsTable extends React.Component {
headerClasses.push('node-details-table-header-sorted');
}
// set header width in percent
const style = {};
if (widths[i]) {
style.width = widths[i];
}
return (
<td className={headerClasses.join(' ')} style={style} onClick={onHeaderClick}
<td className={headerClasses.join(' ')} style={colStyles[i]} onClick={onHeaderClick}
title={header.label} key={header.id}>
{isSortedAsc
&& <span className="node-details-table-header-sorter fa fa-caret-up" />}
@@ -251,7 +251,7 @@ export default class NodeDetailsTable extends React.Component {
selected={this.props.selectedNodeId === node.id}
node={node}
nodeIdKey={nodeIdKey}
widths={getColumnsWidths(this.getColumnHeaders())}
colStyles={getColumnsStyles(this.getColumnHeaders())}
columns={columns}
onClick={onClickRow}
onMouseLeaveRow={onMouseLeaveRow}

4
probe/process/reporter.go
View File

@@ -24,8 +24,8 @@ var (
MetadataTemplates = report.MetadataTemplates{
PID: {ID: PID, Label: "PID", From: report.FromLatest, Datatype: "number", Priority: 1},
Cmdline: {ID: Cmdline, Label: "Command", From: report.FromLatest, Priority: 2},
PPID: {ID: PPID, Label: "Parent PID", From: report.FromLatest, Priority: 3},
Threads: {ID: Threads, Label: "# Threads", From: report.FromLatest, Priority: 4},
PPID: {ID: PPID, Label: "Parent PID", From: report.FromLatest, Datatype: "number", Priority: 3},
Threads: {ID: Threads, Label: "# Threads", From: report.FromLatest, Datatype: "number", Priority: 4},
}
MetricTemplates = report.MetricTemplates{