diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js index 6226bd420..56a2c20ee 100644 --- a/client/app/scripts/components/node-details.js +++ b/client/app/scripts/components/node-details.js @@ -206,7 +206,7 @@ export class NodeDetails extends React.Component { } - ); diff --git a/client/app/scripts/components/node-details/node-details-labels.js b/client/app/scripts/components/node-details/node-details-labels.js index 1832395cd..b3928a50f 100644 --- a/client/app/scripts/components/node-details/node-details-labels.js +++ b/client/app/scripts/components/node-details/node-details-labels.js @@ -1,7 +1,9 @@ import React from 'react'; import { Map as makeMap } from 'immutable'; +import sortBy from 'lodash/sortBy'; import MatchedText from '../matched-text'; +import NodeDetailsControlButton from './node-details-control-button'; import ShowMore from '../show-more'; export default class NodeDetailsLabels extends React.Component { @@ -13,6 +15,7 @@ export default class NodeDetailsLabels extends React.Component { limit: this.DEFAULT_LIMIT, }; this.handleLimitClick = this.handleLimitClick.bind(this); + this.renderControls = this.renderControls.bind(this); } handleLimitClick() { @@ -20,8 +23,17 @@ export default class NodeDetailsLabels extends React.Component { this.setState({limit}); } + renderControls(controls) { + return ( +
+ {sortBy(controls, 'rank').map(control => )} +
+ ); + } + render() { - const { matches = makeMap() } = this.props; + const { controls, matches = makeMap() } = this.props; let rows = this.props.rows; let notShown = 0; const limited = rows && this.state.limit > 0 && rows.length > this.state.limit; @@ -37,6 +49,7 @@ export default class NodeDetailsLabels extends React.Component { return (
+ {controls && this.renderControls(controls)} {rows.map(field => (
diff --git a/client/app/styles/main.less b/client/app/styles/main.less index c03e953b7..80e9418e6 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -696,22 +696,7 @@ h2 { } .node-control-button { - .btn-opacity; - padding: 6px; - margin-left: 2px; - font-size: 110%; color: @white; - cursor: pointer; - border: 1px solid rgba(255, 255, 255, 0); - border-radius: 10%; - &:hover { - border-color: rgba(255, 255, 255, 0.6); - } - &-pending, &-pending:hover { - opacity: 0.2; - border-color: rgba(255, 255, 255, 0); - cursor: not-allowed; - } } &-spinner { @@ -848,6 +833,10 @@ h2 { } &-labels { + &-controls { + margin-left: -4px; + } + &-field { display: flex; align-items: baseline; @@ -958,6 +947,25 @@ h2 { } } +.node-control-button { + .btn-opacity; + padding: 6px; + margin-left: 2px; + font-size: 110%; + color: @text-secondary-color; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0); + border-radius: 10%; + &:hover { + border-color: rgba(255, 255, 255, 0.6); + } + &-pending, &-pending:hover { + opacity: 0.2; + border-color: rgba(255, 255, 255, 0); + cursor: not-allowed; + } +} + .terminal { &-app {