mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +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
52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import Logo from './logo';
|
|
import ZoomWrapper from './zoom-wrapper';
|
|
import NodesResourcesLayer from './nodes-resources/node-resources-layer';
|
|
import { layersTopologyIdsSelector } from '../selectors/resource-view/layout';
|
|
import {
|
|
resourcesZoomLimitsSelector,
|
|
resourcesZoomStateSelector,
|
|
} from '../selectors/resource-view/zoom';
|
|
|
|
|
|
class NodesResources extends React.Component {
|
|
renderLayers(transform) {
|
|
return this.props.layersTopologyIds.map((topologyId, index) => (
|
|
<NodesResourcesLayer
|
|
key={topologyId}
|
|
topologyId={topologyId}
|
|
transform={transform}
|
|
slot={index}
|
|
/>
|
|
));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="nodes-resources">
|
|
<svg id="canvas" width="100%" height="100%">
|
|
<Logo transform="translate(24,24) scale(0.25)" />
|
|
<ZoomWrapper
|
|
svg="canvas" bounded forwardTransform fixVertical
|
|
zoomLimitsSelector={resourcesZoomLimitsSelector}
|
|
zoomStateSelector={resourcesZoomStateSelector}>
|
|
{transform => this.renderLayers(transform)}
|
|
</ZoomWrapper>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
layersTopologyIds: layersTopologyIdsSelector(state),
|
|
};
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps
|
|
)(NodesResources);
|