mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-06 03:31:00 +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
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import Logo from '../components/logo';
|
|
import NodesChartElements from './nodes-chart-elements';
|
|
import ZoomWrapper from '../components/zoom-wrapper';
|
|
import { clickBackground } from '../actions/app-actions';
|
|
import {
|
|
graphZoomLimitsSelector,
|
|
graphZoomStateSelector,
|
|
} from '../selectors/graph-view/zoom';
|
|
|
|
const EdgeMarkerDefinition = ({ selectedNodeId }) => {
|
|
const markerOffset = selectedNodeId ? '35' : '40';
|
|
const markerSize = selectedNodeId ? '10' : '30';
|
|
return (
|
|
<defs>
|
|
<marker
|
|
className="edge-marker"
|
|
id="end-arrow"
|
|
viewBox="1 0 10 10"
|
|
refX={markerOffset}
|
|
refY="3.5"
|
|
markerWidth={markerSize}
|
|
markerHeight={markerSize}
|
|
orient="auto">
|
|
<polygon className="link" points="0 0, 10 3.5, 0 7" />
|
|
</marker>
|
|
</defs>
|
|
);
|
|
};
|
|
|
|
class NodesChart extends React.Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
|
|
this.handleMouseClick = this.handleMouseClick.bind(this);
|
|
}
|
|
|
|
handleMouseClick() {
|
|
if (this.props.selectedNodeId) {
|
|
this.props.clickBackground();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { selectedNodeId } = this.props;
|
|
return (
|
|
<div className="nodes-chart">
|
|
<svg id="canvas" width="100%" height="100%" onClick={this.handleMouseClick}>
|
|
<Logo transform="translate(24,24) scale(0.25)" />
|
|
<EdgeMarkerDefinition selectedNodeId={selectedNodeId} />
|
|
<ZoomWrapper
|
|
svg="canvas" disabled={selectedNodeId}
|
|
zoomLimitsSelector={graphZoomLimitsSelector}
|
|
zoomStateSelector={graphZoomStateSelector}>
|
|
<NodesChartElements />
|
|
</ZoomWrapper>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
selectedNodeId: state.get('selectedNodeId'),
|
|
};
|
|
}
|
|
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
{ clickBackground }
|
|
)(NodesChart);
|