mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +00:00
d520cffec7
Add debug.html to show toolbar Perfjankie test runner Playing w/ the pure mixin for perf. improvements * Works well! Smoother zooming/panning when things have settled. * Extract node movement to node-container, make nodes pure Extracted node chart elements into own components Keep control objects immutable while in components Keep layout state objects alive Made other components pure, removed mixin from stateless components Remove font size adjustment from scaling Fix zoomscale Move node transform to node * makes more sense there because the coords are rounded in the container dynamic coords precision based on topology size Make edge points immutable Remove nodes maximum for layout engine Dont send all canvas state down to next component moving layout handling back to nodes-chart.js Omit some props for edges/nodes, dont animate edges on low precision Moved AppStore access out of lower components
94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
import reactMixin from 'react-mixin';
|
|
|
|
import NodesChart from '../charts/nodes-chart';
|
|
import NodesError from '../charts/nodes-error';
|
|
|
|
const navbarHeight = 160;
|
|
const marginTop = 0;
|
|
|
|
/**
|
|
* dynamic coords precision based on topology size
|
|
*/
|
|
function getLayoutPrecision(nodesCount) {
|
|
let precision;
|
|
if (nodesCount >= 50) {
|
|
precision = 0;
|
|
} else if (nodesCount > 20) {
|
|
precision = 1;
|
|
} else if (nodesCount > 10) {
|
|
precision = 2;
|
|
} else {
|
|
precision = 3;
|
|
}
|
|
|
|
return precision;
|
|
}
|
|
|
|
export default class Nodes extends React.Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
this.handleResize = this.handleResize.bind(this);
|
|
|
|
this.state = {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight - navbarHeight - marginTop
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener('resize', this.handleResize);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener('resize', this.handleResize);
|
|
}
|
|
|
|
renderEmptyTopologyError(show) {
|
|
return (
|
|
<NodesError faIconClass="fa-circle-thin" hidden={!show}>
|
|
<div className="heading">Nothing to show. This can have any of these reasons:</div>
|
|
<ul>
|
|
<li>We haven't received any reports from probes recently.
|
|
Are the probes properly configured?</li>
|
|
<li>There are nodes, but they're currently hidden. Check the view options
|
|
in the bottom-left if they allow for showing hidden nodes.</li>
|
|
<li>Containers view only: you're not running Docker,
|
|
or you don't have any containers.</li>
|
|
</ul>
|
|
</NodesError>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { nodes, selectedNodeId, topologyEmpty } = this.props;
|
|
const layoutPrecision = getLayoutPrecision(nodes.size);
|
|
const hasSelectedNode = selectedNodeId && nodes.has(selectedNodeId);
|
|
const errorEmpty = this.renderEmptyTopologyError(topologyEmpty);
|
|
|
|
return (
|
|
<div className="nodes-wrapper">
|
|
{topologyEmpty && errorEmpty}
|
|
<NodesChart {...this.props} {...this.state}
|
|
layoutPrecision={layoutPrecision}
|
|
hasSelectedNode={hasSelectedNode}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
handleResize() {
|
|
this.setDimensions();
|
|
}
|
|
|
|
setDimensions() {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight - navbarHeight - marginTop;
|
|
|
|
this.setState({height, width});
|
|
}
|
|
}
|
|
|
|
reactMixin.onClass(Nodes, PureRenderMixin);
|