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

Merge pull request #1877 from weaveworks/1794-fixes-left-alignment-number-cols

Browse Source 
Fixes left alignment of numbers in the details panel tables
This commit is contained in:
Simon
2016-09-22 16:59:10 +02:00
committed by GitHub
parent 2db892fd53 685a895dd5
commit 8462819a12
5 changed files with 74 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/app/scripts/components/node-details/node-details-table.js
+16 -13
View File
@@ -6,8 +6,8 @@ import ShowMore from '../show-more';
import NodeDetailsTableRow from './node-details-table-row';
function isNumberField(field) {
return field.dataType && field.dataType === 'number';
function isNumber(data) {
return data.dataType && data.dataType === 'number';
}
const CW = {
@@ -69,12 +69,13 @@ function maybeToLower(value) {
}
function getNodeValue(node, fieldId) {
function getNodeValue(node, header) {
const fieldId = header && header.id;
if (fieldId !== null) {
let field = _.union(node.metrics, node.metadata).find(f => f.id === fieldId);
if (field) {
if (isNumberField(field)) {
if (isNumber(header)) {
return parseFloat(field.value);
}
return field.value;
@@ -96,8 +97,8 @@ function getNodeValue(node, fieldId) {
}
function getValueForSortBy(sortBy) {
return (node) => maybeToLower(getNodeValue(node, sortBy));
function getValueForSortBy(sortByHeader) {
return (node) => maybeToLower(getNodeValue(node, sortByHeader));
}
@@ -106,7 +107,7 @@ function getMetaDataSorters(nodes) {
return _.get(nodes, [0, 'metadata'], []).map((field, index) => node => {
const nodeMetadataField = node.metadata && node.metadata[index];
if (nodeMetadataField) {
if (isNumberField(nodeMetadataField)) {
if (isNumber(nodeMetadataField)) {
return parseFloat(nodeMetadataField.value);
}
return nodeMetadataField.value;
@@ -129,8 +130,8 @@ function sortNodes(nodes, getValue, sortedDesc) {
}
function getSortedNodes(nodes, sortBy, sortedDesc) {
const getValue = getValueForSortBy(sortBy);
function getSortedNodes(nodes, sortByHeader, sortedDesc) {
const getValue = getValueForSortBy(sortByHeader);
const withAndWithoutValues = _.groupBy(nodes, (n) => {
const v = getValue(n);
return v !== null && v !== undefined ? 'withValues' : 'withoutValues';
@@ -174,7 +175,7 @@ function getColumnsStyles(headers) {
function defaultSortDesc(header) {
return header.dataType === 'number';
return header && header.dataType === 'number';
}
@@ -259,12 +260,12 @@ export default class NodeDetailsTable extends React.Component {
onMouseEnterRow, onMouseLeaveRow } = this.props;
const sortBy = this.state.sortBy || getDefaultSortBy(columns, this.props.nodes);
const header = this.getColumnHeaders().find(h => h.id === sortBy);
const sortByHeader = this.getColumnHeaders().find(h => h.id === sortBy);
const sortedDesc = this.state.sortedDesc !== null ?
this.state.sortedDesc :
defaultSortDesc(header);
defaultSortDesc(sortByHeader);
let nodes = getSortedNodes(this.props.nodes, sortBy, sortedDesc);
let nodes = getSortedNodes(this.props.nodes, sortByHeader, sortedDesc);
const limited = nodes && this.state.limit > 0 && nodes.length > this.state.limit;
const expanded = this.state.limit === 0;
const notShown = nodes.length - this.state.limit;
@@ -315,4 +316,6 @@ export default class NodeDetailsTable extends React.Component {
NodeDetailsTable.defaultProps = {
nodeIdKey: 'id', // key to identify a node in a row (used for topology links)
onSortChange: () => {},
sortedDesc: null,
sortBy: null,
};
render/detailed/connections.go
+10 -13
View File
@@ -23,13 +23,13 @@ const (
// Exported for testing
var (
NormalColumns = []Column{
{ID: portKey, Label: portLabel},
{ID: countKey, Label: countLabel, DefaultSort: true},
{ID: portKey, Label: portLabel, Datatype: "number"},
{ID: countKey, Label: countLabel, Datatype: "number", DefaultSort: true},
}
InternetColumns = []Column{
{ID: remoteKey, Label: remoteLabel},
{ID: portKey, Label: portLabel},
{ID: countKey, Label: countLabel, DefaultSort: true},
{ID: portKey, Label: portLabel, Datatype: "number"},
{ID: countKey, Label: countLabel, Datatype: "number", DefaultSort: true},
}
)
@@ -142,21 +142,18 @@ func (c *connectionCounters) rows(r report.Report, ns report.Nodes, includeLocal
if includeLocal {
connection.Metadata = append(connection.Metadata,
report.MetadataRow{
ID: remoteKey,
Value: row.localAddr,
Datatype: number,
ID: remoteKey,
Value: row.localAddr,
})
}
connection.Metadata = append(connection.Metadata,
report.MetadataRow{
ID: portKey,
Value: row.port,
Datatype: number,
ID: portKey,
Value: row.port,
},
report.MetadataRow{
ID: countKey,
Value: strconv.Itoa(count),
Datatype: number,
ID: countKey,
Value: strconv.Itoa(count),
},
)
output = append(output, connection)
render/detailed/node.go
+12 -12
View File
@@ -136,8 +136,8 @@ var (
TopologyID: "hosts",
Label: "Hosts",
Columns: []Column{
{ID: host.CPUUsage, Label: "CPU"},
{ID: host.MemoryUsage, Label: "Memory"},
{ID: host.CPUUsage, Label: "CPU", Datatype: "number"},
{ID: host.MemoryUsage, Label: "Memory", Datatype: "number"},
},
},
},
@@ -147,7 +147,7 @@ var (
TopologyID: "services",
Label: "Services",
Columns: []Column{
{ID: report.Pod, Label: "# Pods"},
{ID: report.Pod, Label: "# Pods", Datatype: "number"},
{ID: kubernetes.IP, Label: "IP"},
},
},
@@ -158,8 +158,8 @@ var (
TopologyID: "replica-sets",
Label: "Replica Sets",
Columns: []Column{
{ID: report.Pod, Label: "# Pods"},
{ID: kubernetes.ObservedGeneration, Label: "Observed Gen."},
{ID: report.Pod, Label: "# Pods", Datatype: "number"},
{ID: kubernetes.ObservedGeneration, Label: "Observed Gen.", Datatype: "number"},
},
},
},
@@ -171,7 +171,7 @@ var (
Columns: []Column{
{ID: kubernetes.State, Label: "State"},
{ID: report.Container, Label: "Containers"},
{ID: report.Container, Label: "# Containers", Datatype: "number"},
{ID: kubernetes.IP, Label: "IP"},
},
},
@@ -181,8 +181,8 @@ var (
NodeSummaryGroup: NodeSummaryGroup{
TopologyID: "containers",
Label: "Containers", Columns: []Column{
{ID: docker.CPUTotalUsage, Label: "CPU"},
{ID: docker.MemoryUsage, Label: "Memory"},
{ID: docker.CPUTotalUsage, Label: "CPU", Datatype: "number"},
{ID: docker.MemoryUsage, Label: "Memory", Datatype: "number"},
},
},
},
@@ -191,9 +191,9 @@ var (
NodeSummaryGroup: NodeSummaryGroup{
TopologyID: "processes",
Label: "Processes", Columns: []Column{
{ID: process.PID, Label: "PID"},
{ID: process.CPUUsage, Label: "CPU"},
{ID: process.MemoryUsage, Label: "Memory"},
{ID: process.PID, Label: "PID", Datatype: "number"},
{ID: process.CPUUsage, Label: "CPU", Datatype: "number"},
{ID: process.MemoryUsage, Label: "Memory", Datatype: "number"},
},
},
},
@@ -203,7 +203,7 @@ var (
TopologyID: "containers-by-image",
Label: "Container Images",
Columns: []Column{
{ID: report.Container, Label: "# Containers", DefaultSort: true},
{ID: report.Container, Label: "# Containers", DefaultSort: true, Datatype: "number"},
},
},
},
render/detailed/node_test.go
+35 -45
View File
@@ -105,7 +105,7 @@ func TestMakeDetailedHostNode(t *testing.T) {
TopologyID: "pods",
Columns: []detailed.Column{
{ID: kubernetes.State, Label: "State"},
{ID: report.Container, Label: "Containers"},
{ID: report.Container, Label: "# Containers", Datatype: "number"},
{ID: kubernetes.IP, Label: "IP"},
},
Nodes: []detailed.NodeSummary{podNodeSummary},
@@ -114,8 +114,8 @@ func TestMakeDetailedHostNode(t *testing.T) {
Label: "Containers",
TopologyID: "containers",
Columns: []detailed.Column{
{ID: docker.CPUTotalUsage, Label: "CPU"},
{ID: docker.MemoryUsage, Label: "Memory"},
{ID: docker.CPUTotalUsage, Label: "CPU", Datatype: "number"},
{ID: docker.MemoryUsage, Label: "Memory", Datatype: "number"},
},
Nodes: []detailed.NodeSummary{containerNodeSummary},
},
@@ -123,9 +123,9 @@ func TestMakeDetailedHostNode(t *testing.T) {
Label: "Processes",
TopologyID: "processes",
Columns: []detailed.Column{
{ID: process.PID, Label: "PID"},
{ID: process.CPUUsage, Label: "CPU"},
{ID: process.MemoryUsage, Label: "Memory"},
{ID: process.PID, Label: "PID", Datatype: "number"},
{ID: process.CPUUsage, Label: "CPU", Datatype: "number"},
{ID: process.MemoryUsage, Label: "Memory", Datatype: "number"},
},
Nodes: []detailed.NodeSummary{process1NodeSummary, process2NodeSummary},
},
@@ -133,7 +133,7 @@ func TestMakeDetailedHostNode(t *testing.T) {
Label: "Container Images",
TopologyID: "containers-by-image",
Columns: []detailed.Column{
{ID: report.Container, Label: "# Containers", DefaultSort: true},
{ID: report.Container, Label: "# Containers", DefaultSort: true, Datatype: "number"},
},
Nodes: []detailed.NodeSummary{containerImageNodeSummary},
},
@@ -159,14 +159,12 @@ func TestMakeDetailedHostNode(t *testing.T) {
Linkable: true,
Metadata: []report.MetadataRow{
{
ID: "port",
Value: "80",
Datatype: "number",
ID: "port",
Value: "80",
},
{
ID: "count",
Value: "2",
Datatype: "number",
ID: "count",
Value: "2",
},
},
},
@@ -246,9 +244,9 @@ func TestMakeDetailedContainerNode(t *testing.T) {
Label: "Processes",
TopologyID: "processes",
Columns: []detailed.Column{
{ID: process.PID, Label: "PID"},
{ID: process.CPUUsage, Label: "CPU"},
{ID: process.MemoryUsage, Label: "Memory"},
{ID: process.PID, Label: "PID", Datatype: "number"},
{ID: process.CPUUsage, Label: "CPU", Datatype: "number"},
{ID: process.MemoryUsage, Label: "Memory", Datatype: "number"},
},
Nodes: []detailed.NodeSummary{serverProcessNodeSummary},
},
@@ -267,14 +265,12 @@ func TestMakeDetailedContainerNode(t *testing.T) {
Linkable: true,
Metadata: []report.MetadataRow{
{
ID: "port",
Value: "80",
Datatype: "number",
ID: "port",
Value: "80",
},
{
ID: "count",
Value: "2",
Datatype: "number",
ID: "count",
Value: "2",
},
},
},
@@ -285,14 +281,12 @@ func TestMakeDetailedContainerNode(t *testing.T) {
Linkable: true,
Metadata: []report.MetadataRow{
{
ID: "port",
Value: "80",
Datatype: "number",
ID: "port",
Value: "80",
},
{
ID: "count",
Value: "1",
Datatype: "number",
ID: "count",
Value: "1",
},
},
},
@@ -357,8 +351,8 @@ func TestMakeDetailedPodNode(t *testing.T) {
Label: "Containers",
TopologyID: "containers",
Columns: []detailed.Column{
{ID: docker.CPUTotalUsage, Label: "CPU"},
{ID: docker.MemoryUsage, Label: "Memory"},
{ID: docker.CPUTotalUsage, Label: "CPU", Datatype: "number"},
{ID: docker.MemoryUsage, Label: "Memory", Datatype: "number"},
},
Nodes: []detailed.NodeSummary{containerNodeSummary},
},
@@ -366,9 +360,9 @@ func TestMakeDetailedPodNode(t *testing.T) {
Label: "Processes",
TopologyID: "processes",
Columns: []detailed.Column{
{ID: process.PID, Label: "PID"},
{ID: process.CPUUsage, Label: "CPU"},
{ID: process.MemoryUsage, Label: "Memory"},
{ID: process.PID, Label: "PID", Datatype: "number"},
{ID: process.CPUUsage, Label: "CPU", Datatype: "number"},
{ID: process.MemoryUsage, Label: "Memory", Datatype: "number"},
},
Nodes: []detailed.NodeSummary{serverProcessNodeSummary},
},
@@ -387,14 +381,12 @@ func TestMakeDetailedPodNode(t *testing.T) {
Linkable: true,
Metadata: []report.MetadataRow{
{
ID: "port",
Value: "80",
Datatype: "number",
ID: "port",
Value: "80",
},
{
ID: "count",
Value: "2",
Datatype: "number",
ID: "count",
Value: "2",
},
},
},
@@ -405,14 +397,12 @@ func TestMakeDetailedPodNode(t *testing.T) {
Linkable: true,
Metadata: []report.MetadataRow{
{
ID: "port",
Value: "80",
Datatype: "number",
ID: "port",
Value: "80",
},
{
ID: "count",
Value: "1",
Datatype: "number",
ID: "count",
Value: "1",
},
},
},
render/detailed/summary.go
+1
View File
@@ -38,6 +38,7 @@ type Column struct {
ID string `json:"id"`
Label string `json:"label"`
DefaultSort bool `json:"defaultSort"`
Datatype string `json:"dataType"`
}
// NodeSummary is summary information about a child for a Node.