mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 10:41:14 +00:00
69fd397217
* Added resource view selector button * Showing resource boxes in the resource view * Crude CPU resource view prototype * Improved the viewMode state logic * Extracted zooming into a separate wrapper component * Split the layout selectors between graph-view and resource-view * Proper zooming logic for the resource view * Moved all node networks utils to selectors * Improved the zoom caching logic * Further refactoring of selectors * Added sticky labels to the resource boxes * Added panning translation limits in the resource view * Renamed GridModeSelector -> ViewModeSelector * Polished the topology resource view selection logic * Search bar hidden in the resource view * Added per-layer topology names to the resource view * Made metric selectors work for the resource view * Adjusted the viewport selectors * Renamed viewport selector to canvas (+ maximal zoom fix) * Showing more useful metric info in the resource box labels * Fetching only necessary nodes for the resource view * Refactored the resource view layer component * Addressed first batch UI comments (from the Scope meeting) * Switch to deep zooming transform in the resource view to avoid SVG precision errors * Renamed and moved resource view components * Polished all the resource view components * Changing the available metrics selection * Improved and polished the state transition logic for the resource view * Separated zoom limits from the zoom active state * Renaming and bunch of comments * Addressed all the UI comments (@davkal + @fons) * Made graph view selectors independent from resource view selectors
77 lines
2.6 KiB
JavaScript
77 lines
2.6 KiB
JavaScript
import debug from 'debug';
|
|
import { createSelector, createStructuredSelector } from 'reselect';
|
|
import { Map as makeMap } from 'immutable';
|
|
|
|
import { initEdgesFromNodes } from '../../utils/layouter-utils';
|
|
import { canvasWidthSelector, canvasHeightSelector } from '../canvas';
|
|
import { activeTopologyOptionsSelector } from '../topology';
|
|
import { shownNodesSelector } from '../node-filters';
|
|
import { doLayout } from '../../charts/nodes-layout';
|
|
import timer from '../../utils/timer-utils';
|
|
|
|
const log = debug('scope:nodes-chart');
|
|
|
|
|
|
const layoutOptionsSelector = createStructuredSelector({
|
|
forceRelayout: state => state.get('forceRelayout'),
|
|
topologyId: state => state.get('currentTopologyId'),
|
|
topologyOptions: activeTopologyOptionsSelector,
|
|
height: canvasHeightSelector,
|
|
width: canvasWidthSelector,
|
|
});
|
|
|
|
const graphLayoutSelector = createSelector(
|
|
[
|
|
// TODO: Instead of sending the nodes with all the information (metrics, metadata, etc...)
|
|
// to the layout engine, it would suffice to forward it just the nodes adjacencies map, which
|
|
// we could get with another selector like:
|
|
//
|
|
// const nodesAdjacenciesSelector = createMapSelector(
|
|
// [ (_, props) => props.nodes ],
|
|
// node => node.get('adjacency') || makeList()
|
|
// );
|
|
//
|
|
// That would enable us to use smarter caching, so that the layout doesn't get recalculated
|
|
// if adjacencies don't change but e.g. metrics gets updated. We also don't need to init
|
|
// edges here as the adjacencies data is enough to reconstruct them in the layout engine (this
|
|
// might enable us to simplify the caching system there since we really only need to cache
|
|
// the adjacencies map in that case and not nodes and edges).
|
|
shownNodesSelector,
|
|
layoutOptionsSelector,
|
|
],
|
|
(nodes, options) => {
|
|
// If the graph is empty, skip computing the layout.
|
|
if (nodes.size === 0) {
|
|
return {
|
|
nodes: makeMap(),
|
|
edges: makeMap(),
|
|
};
|
|
}
|
|
|
|
const edges = initEdgesFromNodes(nodes);
|
|
const timedLayouter = timer(doLayout);
|
|
const graph = timedLayouter(nodes, edges, options);
|
|
|
|
// NOTE: We probably shouldn't log anything in a
|
|
// computed property, but this is still useful.
|
|
log(`graph layout calculation took ${timedLayouter.time}ms`);
|
|
|
|
return graph;
|
|
}
|
|
);
|
|
|
|
export const graphNodesSelector = createSelector(
|
|
[
|
|
graphLayoutSelector,
|
|
],
|
|
// NOTE: This might be a good place to add (some of) nodes/edges decorators.
|
|
graph => graph.nodes
|
|
);
|
|
|
|
export const graphEdgesSelector = createSelector(
|
|
[
|
|
graphLayoutSelector,
|
|
],
|
|
graph => graph.edges
|
|
);
|