diff --git a/client/app/scripts/charts/node-shape-stack.js b/client/app/scripts/charts/node-shape-stack.js index 13b6c0f58..3d691888c 100644 --- a/client/app/scripts/charts/node-shape-stack.js +++ b/client/app/scripts/charts/node-shape-stack.js @@ -20,7 +20,9 @@ export default function NodeShapeStack(props) { - + + + ); } diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 74435858e..e4a249193 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -1,4 +1,5 @@ import React from 'react'; +import debug from 'debug'; import Logo from './logo'; import AppStore from '../stores/app-store'; @@ -8,7 +9,8 @@ import Status from './status.js'; import Topologies from './topologies.js'; import TopologyOptions from './topology-options.js'; import { getApiDetails, getTopologies } from '../utils/web-api-utils'; -import { lockNextMetric, hitEsc } from '../actions/app-actions'; +import { lockNextMetric, hitEsc, unlockMetric, + selectMetric } from '../actions/app-actions'; import Details from './details'; import Nodes from './nodes'; import MetricSelector from './metric-selector'; @@ -19,8 +21,10 @@ import { showingDebugToolbar, toggleDebugToolbar, const ESC_KEY_CODE = 27; const D_KEY_CODE = 68; +const Q_KEY_CODE = 81; const RIGHT_ANGLE_KEY_IDENTIFIER = 'U+003C'; const LEFT_ANGLE_KEY_IDENTIFIER = 'U+003E'; +const keyPressLog = debug('scope:app-key-press'); function getStateFromStores() { return { @@ -76,12 +80,16 @@ export default class App extends React.Component { } onKeyPress(ev) { + keyPressLog('onKeyPress', 'keyCode', ev.keyCode, ev); if (ev.keyCode === ESC_KEY_CODE) { hitEsc(); } else if (ev.keyIdentifier === RIGHT_ANGLE_KEY_IDENTIFIER) { lockNextMetric(-1); } else if (ev.keyIdentifier === LEFT_ANGLE_KEY_IDENTIFIER) { lockNextMetric(1); + } else if (ev.keyCode === Q_KEY_CODE) { + unlockMetric(); + selectMetric(null); } else if (ev.keyCode === D_KEY_CODE) { toggleDebugToolbar(); this.forceUpdate(); diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js index 60bd30c2d..2a5c3bfa9 100644 --- a/client/app/scripts/components/debug-toolbar.js +++ b/client/app/scripts/components/debug-toolbar.js @@ -139,6 +139,7 @@ export class DebugToolbar extends React.Component { + diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 8aab819cf..fd33a1164 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -398,6 +398,13 @@ h2 { .highlighted { display: inline; } } + .stack .shape .metric-fill { + display: none; + } + .stack .onlyMetrics .shape .metric-fill { + display: inline-block; + } + .shape { /* cloud paths have stroke-width set dynamically */ &:not(.shape-cloud) .border {