mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +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
66 lines
2.4 KiB
JavaScript
66 lines
2.4 KiB
JavaScript
import { Map as makeMap } from 'immutable';
|
|
|
|
import { getNodeColor } from '../utils/color-utils';
|
|
import { formatMetricSvg } from '../utils/string-utils';
|
|
import { RESOURCES_LAYER_HEIGHT } from '../constants/styles';
|
|
|
|
|
|
export function nodeResourceViewColorDecorator(node) {
|
|
// Color lightness is normally determined from the node label. However, in the resource view
|
|
// mode, we don't want to vary the lightness so we just always forward the empty string instead.
|
|
return node.set('color', getNodeColor(node.get('rank'), '', node.get('pseudo')));
|
|
}
|
|
|
|
// Decorates the resource node with dimensions taken from its metric summary.
|
|
export function nodeResourceBoxDecorator(node) {
|
|
const metricSummary = node.get('metricSummary', makeMap());
|
|
const width = metricSummary.get('showCapacity') ?
|
|
metricSummary.get('totalCapacity') :
|
|
metricSummary.get('absoluteConsumption');
|
|
const height = RESOURCES_LAYER_HEIGHT;
|
|
|
|
return node.merge(makeMap({ width, height }));
|
|
}
|
|
|
|
// Decorates the node with the summary info of its metric of a fixed type.
|
|
export function nodeMetricSummaryDecoratorByType(metricType, showCapacity) {
|
|
return (node) => {
|
|
const metric = node
|
|
.get('metrics', makeMap())
|
|
.find(m => m.get('label') === metricType);
|
|
|
|
// Do nothing if there is no metric info.
|
|
if (!metric) return node;
|
|
|
|
const absoluteConsumption = metric.get('value');
|
|
const totalCapacity = showCapacity ? metric.get('max') : absoluteConsumption;
|
|
const relativeConsumption = absoluteConsumption / totalCapacity;
|
|
const defaultMetric = { format: metric.get('format') };
|
|
const percentMetric = { format: 'percent' };
|
|
const format = metric.get('format');
|
|
|
|
return node.set('metricSummary', makeMap({
|
|
showCapacity,
|
|
type: metricType,
|
|
humanizedTotalCapacity: formatMetricSvg(totalCapacity, defaultMetric),
|
|
humanizedAbsoluteConsumption: formatMetricSvg(absoluteConsumption, defaultMetric),
|
|
humanizedRelativeConsumption: formatMetricSvg(100 * relativeConsumption, percentMetric),
|
|
totalCapacity,
|
|
absoluteConsumption,
|
|
relativeConsumption,
|
|
format,
|
|
}));
|
|
};
|
|
}
|
|
|
|
// Decorates the node with the ID of the parent node belonging to a fixed topology.
|
|
export function nodeParentDecoratorByTopologyId(topologyId) {
|
|
return (node) => {
|
|
const parent = node
|
|
.get('parents', makeMap())
|
|
.find(p => p.get('topologyId') === topologyId);
|
|
|
|
return parent ? node.set('parentNodeId', parent.get('id')) : node;
|
|
};
|
|
}
|