diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js index a9ad0dc1b9..44f1b30da6 100644 --- a/client/app/scripts/components/node-details.js +++ b/client/app/scripts/components/node-details.js @@ -130,7 +130,6 @@ export default class NodeDetails extends React.Component { renderDetails() { const details = this.props.details; - const showSummary = (details.metadata || details.metrics || details.docker_labels) !== undefined; const showControls = details.controls && details.controls.length > 0; const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo); const {error, pending} = (this.props.nodeControlStatus || {}); @@ -166,10 +165,13 @@ export default class NodeDetails extends React.Component { }
- {showSummary &&
+ {details.metrics &&
Status
- {details.metrics && } - {details.metadata && } + +
} + {details.metadata &&
+
Info
+
} {details.children && details.children.map(children => { diff --git a/client/app/scripts/components/node-details/node-details-health-overflow.js b/client/app/scripts/components/node-details/node-details-health-overflow.js index 45e2c3c4ec..76fcea7f8c 100644 --- a/client/app/scripts/components/node-details/node-details-health-overflow.js +++ b/client/app/scripts/components/node-details/node-details-health-overflow.js @@ -3,11 +3,22 @@ import React from 'react'; import NodeDetailsHealthOverflowItem from './node-details-health-overflow-item'; export default class NodeDetailsHealthOverflow extends React.Component { + + constructor(props, context) { + super(props, context); + this.handleClick = this.handleClick.bind(this); + } + + handleClick(ev) { + ev.preventDefault(); + this.props.handleClick(); + } + render() { const items = this.props.items.slice(0, 4); return ( -
+
{items.map(item => )}
); diff --git a/client/app/scripts/components/node-details/node-details-health.js b/client/app/scripts/components/node-details/node-details-health.js index d389a653af..811b195643 100644 --- a/client/app/scripts/components/node-details/node-details-health.js +++ b/client/app/scripts/components/node-details/node-details-health.js @@ -35,7 +35,8 @@ export default class NodeDetailsHealth extends React.Component { {primeMetrics.map(item => { return ; })} - {showOverflow && } + {showOverflow && this.handleClickMore()} />}
this.handleClickMore()} collection={this.props.metrics} expanded={this.state.expanded} notShown={notShown} hideNumber /> diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js index 0d18772194..c9e1863a5d 100644 --- a/client/app/scripts/components/node-details/node-details-table.js +++ b/client/app/scripts/components/node-details/node-details-table.js @@ -115,6 +115,8 @@ export default class NodeDetailsTable extends React.Component { } return ; } + // empty cell to complete the row for proper hover + return ; }); } diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 68013cd1ad..a77207103f 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -546,10 +546,6 @@ h2 { padding: 0 36px 0 36px; overflow-y: auto; - &-info { - margin-top: 16px; - } - &-loading { margin-top: 48px; text-align: center; @@ -628,7 +624,6 @@ h2 { } &-info { - margin: 16px 0; &-field { display: flex; @@ -694,7 +689,7 @@ h2 { table-layout: fixed; &-wrapper { - margin: 24px 0; + margin: 24px -4px; } &-header { @@ -703,7 +698,7 @@ h2 { font-size: 90%; text-align: right; cursor: pointer; - padding: 0; + padding: 0 4px; &-sorted { color: @text-secondary-color; @@ -728,7 +723,7 @@ h2 { } > * { - padding: 0; + padding: 0 4px; } &-link { @@ -897,7 +892,7 @@ h2 { .show-more { .btn-opacity; - border-top: 1px solid lighten(@text-tertiary-color, 30%); + border-top: 1px dotted @border-light-color; padding: 0px 0; margin-top: 4px; text-align: right;