mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 02:30:45 +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
69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import classNames from 'classnames';
|
|
|
|
import MetricSelector from './metric-selector';
|
|
import { setGraphView, setTableView, setResourceView } from '../actions/app-actions';
|
|
import { layersTopologyIdsSelector } from '../selectors/resource-view/layout';
|
|
import { availableMetricsSelector } from '../selectors/node-metric';
|
|
import {
|
|
isGraphViewModeSelector,
|
|
isTableViewModeSelector,
|
|
isResourceViewModeSelector,
|
|
} from '../selectors/topology';
|
|
|
|
|
|
const Item = (icons, label, isSelected, onClick, isEnabled = true) => {
|
|
const className = classNames('view-mode-selector-action', {
|
|
'view-mode-selector-action-selected': isSelected,
|
|
});
|
|
return (
|
|
<div
|
|
className={className}
|
|
disabled={!isEnabled}
|
|
onClick={isEnabled && onClick}>
|
|
<span className={icons} style={{fontSize: 12}} />
|
|
<span>{label}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
class ViewModeSelector extends React.Component {
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.isResourceViewMode && !nextProps.hasResourceView) {
|
|
nextProps.setGraphView();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { isGraphViewMode, isTableViewMode, isResourceViewMode, hasResourceView } = this.props;
|
|
|
|
return (
|
|
<div className="view-mode-selector">
|
|
<div className="view-mode-selector-wrapper">
|
|
{Item('fa fa-share-alt', 'Graph', isGraphViewMode, this.props.setGraphView)}
|
|
{Item('fa fa-table', 'Table', isTableViewMode, this.props.setTableView)}
|
|
{Item('fa fa-bar-chart', 'Resources', isResourceViewMode, this.props.setResourceView,
|
|
hasResourceView)}
|
|
</div>
|
|
<MetricSelector alwaysPinned={isResourceViewMode} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
isGraphViewMode: isGraphViewModeSelector(state),
|
|
isTableViewMode: isTableViewModeSelector(state),
|
|
isResourceViewMode: isResourceViewModeSelector(state),
|
|
hasResourceView: !layersTopologyIdsSelector(state).isEmpty(),
|
|
showingMetricsSelector: availableMetricsSelector(state).count() > 0,
|
|
};
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
{ setGraphView, setTableView, setResourceView }
|
|
)(ViewModeSelector);
|