mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 10:41:14 +00:00
* 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
74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import { createSelector } from 'reselect';
|
|
import { createMapSelector } from 'reselect-map';
|
|
import { fromJS, Map as makeMap, List as makeList } from 'immutable';
|
|
|
|
import { isGraphViewModeSelector, isResourceViewModeSelector } from '../selectors/topology';
|
|
import { RESOURCE_VIEW_METRICS } from '../constants/resources';
|
|
|
|
|
|
// Resource view uses the metrics of the nodes from the cache, while the graph and table
|
|
// view are looking at the current nodes (which are among other things filtered by topology
|
|
// options which are currently ignored in the resource view).
|
|
export const availableMetricsSelector = createSelector(
|
|
[
|
|
isGraphViewModeSelector,
|
|
isResourceViewModeSelector,
|
|
state => state.get('nodes'),
|
|
],
|
|
(isGraphView, isResourceView, nodes) => {
|
|
// In graph view, we always look through the fresh state
|
|
// of topology nodes to get all the available metrics.
|
|
if (isGraphView) {
|
|
return nodes
|
|
.valueSeq()
|
|
.flatMap(n => n.get('metrics', makeList()))
|
|
.map(m => makeMap({ id: m.get('id'), label: m.get('label') }))
|
|
.toSet()
|
|
.toList()
|
|
.sortBy(m => m.get('label'));
|
|
}
|
|
|
|
// In resource view, we're displaying only the hardcoded CPU and Memory metrics.
|
|
// TODO: Make this dynamic as well.
|
|
if (isResourceView) {
|
|
return fromJS(RESOURCE_VIEW_METRICS);
|
|
}
|
|
|
|
// Don't show any metrics in the table view mode.
|
|
return makeList();
|
|
}
|
|
);
|
|
|
|
export const pinnedMetricSelector = createSelector(
|
|
[
|
|
availableMetricsSelector,
|
|
state => state.get('pinnedMetricType'),
|
|
],
|
|
(availableMetrics, pinnedMetricType) => {
|
|
const metric = availableMetrics.find(m => m.get('label') === pinnedMetricType);
|
|
return metric && metric.get('id');
|
|
}
|
|
);
|
|
|
|
const topCardNodeSelector = createSelector(
|
|
[
|
|
state => state.get('nodeDetails')
|
|
],
|
|
nodeDetails => nodeDetails.last()
|
|
);
|
|
|
|
export const nodeMetricSelector = createMapSelector(
|
|
[
|
|
state => state.get('nodes'),
|
|
state => state.get('selectedMetric'),
|
|
topCardNodeSelector,
|
|
],
|
|
(node, selectedMetric, topCardNode) => {
|
|
const isHighlighted = topCardNode && topCardNode.details && topCardNode.id === node.get('id');
|
|
const sourceNode = isHighlighted ? fromJS(topCardNode.details) : node;
|
|
return sourceNode.get('metrics') && sourceNode.get('metrics')
|
|
.filter(m => m.get('id') === selectedMetric)
|
|
.first();
|
|
}
|
|
);
|