mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 18:51:17 +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
32 lines
1.0 KiB
JavaScript
32 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
import pick from 'lodash/pick';
|
|
|
|
import { applyTransform } from '../../utils/transform-utils';
|
|
import {
|
|
RESOURCES_LAYER_TITLE_WIDTH,
|
|
RESOURCES_LAYER_HEIGHT,
|
|
} from '../../constants/styles';
|
|
|
|
|
|
export default class NodeResourcesLayerTopology extends React.Component {
|
|
render() {
|
|
// This component always has a fixed horizontal position and width,
|
|
// so we only apply the vertical zooming transformation to match the
|
|
// vertical position and height of the resource boxes.
|
|
const verticalTransform = pick(this.props.transform, ['translateY', 'scaleY']);
|
|
const { width, height, y } = applyTransform(verticalTransform, {
|
|
width: RESOURCES_LAYER_TITLE_WIDTH,
|
|
height: RESOURCES_LAYER_HEIGHT,
|
|
y: this.props.verticalPosition,
|
|
});
|
|
|
|
return (
|
|
<foreignObject width={width} height={height} y={y}>
|
|
<div className="node-resources-layer-topology" style={{ lineHeight: `${height}px` }}>
|
|
{this.props.topologyId}
|
|
</div>
|
|
</foreignObject>
|
|
);
|
|
}
|
|
}
|