mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +00:00
749571ebe9
* Fix node-details-test for search * Label spacing and matched text truncation * Delete pinned search on backspace, add hint for metrics, escape % in URL * Fix text-bg on node highlight * Added tests for search-utils * Fix matching of other topologies, added comment re quick clear * s/cx/classnames/ * Ignore MoC keys when search in focus, blur on Esc * Fixes search term highlighting on-hover * Fix SVG exports * Fine-tuned search item rendering * Fixed search highlighting in the details panel * Dont throb node on hover * Hotkey for search: '/' * Keep focus on search when tabbing away from the browser * bring hovered node to top * background for search results on hover * fixed height for foreign object to prevent layout glitches * Dont blur focused nodes on search * More robust metric matchers * More meaningful search hints
45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
const GENERAL_SHORTCUTS = [
|
|
{key: 'esc', label: 'Close active panel'},
|
|
{key: '/', label: 'Activate search field'},
|
|
{key: '?', label: 'Toggle shortcut menu'},
|
|
];
|
|
|
|
const CANVAS_METRIC_SHORTCUTS = [
|
|
{key: '<', label: 'Select and pin previous metric'},
|
|
{key: '>', label: 'Select and pin next metric'},
|
|
{key: 'q', label: 'Unpin current metric'},
|
|
];
|
|
|
|
function renderShortcuts(cuts) {
|
|
return (
|
|
<div>
|
|
{cuts.map(({key, label}) => (
|
|
<div key={key} className="help-panel-shortcut">
|
|
<div className="key"><kbd>{key}</kbd></div>
|
|
<div className="label">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default class HelpPanel extends React.Component {
|
|
render() {
|
|
return (
|
|
<div className="help-panel">
|
|
<div className="help-panel-header">
|
|
<h2>Keyboard Shortcuts</h2>
|
|
</div>
|
|
<div className="help-panel-main">
|
|
<h3>General</h3>
|
|
{renderShortcuts(GENERAL_SHORTCUTS)}
|
|
<h3>Canvas Metrics</h3>
|
|
{renderShortcuts(CANVAS_METRIC_SHORTCUTS)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|