mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 02:30:45 +00:00
- Change scrolling behaviour to lock headers in place
- Enable filtering (hitting enter in the search bar) in grid-mode
- Little more top-margin for k8s (can have 3 topos) + taller rows.
- Trying out rank-color + node.relatives in the grid-mode
- First pass at selecting rows.
- Needs a bit more a fiddle, colors + click areas
- Store grid sort direction (asc/desc) in url state
- Simplify node selection to one method. (over-ride existing card)
- Remove clicking on name directly (links) to overlay new cards for now.
- Playing w/ grid-mode-toggle icons and labels
- Improves rendering in ff, change of shortcut keys for grid-mode-toggle
- Playing w/ clearer selection colors for grid-mode
- Slight change to selection-ui
- Fixes showNodeInTopology button visibility on the details-panel
- Was using an old heuristic. Table-mode allows you to open child cards
before the parent.
- Make it clear what the default sort is in tables
- E.g. always show a sorting caret
- Sort grid-mode columns, first meta then metrics
- dancing-nodes rememdy #1: pause updates onRowHover
- Splits relatives out into their own columns
- Take into account scrollbar width for grid-mode col header position
- Tooltips on table column headers
- grid-mode: fixes first column headers (proc/container/c-by-image)
- Disable pause-on-hover, too aggresive
- reduce label column width a bit (33pc -> 25pc) for big tables
- Filter grid-mode onSearchChange
- Rather than previous behaviour of waiting for an <enter>
- Show label_minor on pseudo nodes, that might not have much other info
- grid-mode: further reduce width of id column.
- Fixes go tests, properly moves parents into node-summary
- Fixes sorting of string columns w/ missing fields.
- E.g. uptime. Where -1e-10 > '3days' doesn't work.
47 lines
1.2 KiB
JavaScript
47 lines
1.2 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'},
|
|
{key: 't', label: 'Activate Table mode'},
|
|
{key: 'v', label: 'Activate Visualization mode'},
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|
|
}
|