linkerd2/web/app/js/components/NavigationResources.jsx

102 lines
2.9 KiB
JavaScript

import { metricsPropType, processMultiResourceRollup } from './util/MetricUtils.jsx';
import Collapse from '@material-ui/core/Collapse';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import NavigationResource from './NavigationResource.jsx';
import PropTypes from 'prop-types';
import React from 'react';
import ViewListIcon from '@material-ui/icons/ViewList';
import _has from 'lodash/has';
import { withContext } from './util/AppContext.jsx';
import withREST from './util/withREST.jsx';
import { withStyles } from '@material-ui/core/styles';
const styles = () => ({
navMenuItem: {
paddingLeft: "24px",
paddingRight: "24px",
},
});
class NavigationResourcesBase extends React.Component {
static propTypes = {
classes: PropTypes.shape({}).isRequired,
data: PropTypes.arrayOf(metricsPropType.isRequired).isRequired,
}
constructor(props) {
super(props);
this.state = {open: false};
}
handleOnClick = () => {
this.setState({ open: !this.state.open });
};
menu() {
const { classes } = this.props;
return (
<MenuItem
className={classes.navMenuItem}
button
onClick={this.handleOnClick}>
<ListItemIcon><ViewListIcon /></ListItemIcon>
<ListItemText inset primary="Resources" />
{this.state.open ? <ExpandLess /> : <ExpandMore />}
</MenuItem>
);
}
subMenu() {
const { data } = this.props;
let allMetrics = {};
let nsMetrics = {};
if (_has(data, '[0]')) {
allMetrics = processMultiResourceRollup(data[0]);
if (_has(data, '[1]')) {
nsMetrics = processMultiResourceRollup(data[1]);
}
}
return (
<MenuList dense component="div" disablePadding>
<NavigationResource type="authorities" />
<NavigationResource type="deployments" metrics={allMetrics.deployment} />
<NavigationResource type="namespaces" metrics={nsMetrics.namespace} />
<NavigationResource type="pods" metrics={allMetrics.pod} />
<NavigationResource type="replicationcontrollers" metrics={allMetrics.replicationcontroller} />
</MenuList>
);
}
render() {
return (
<React.Fragment>
{this.menu()}
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
{this.subMenu()}
</Collapse>
</React.Fragment>
);
}
}
export default withREST(
withContext(withStyles(styles, { withTheme: true })(NavigationResourcesBase)),
({api}) => [
// TODO: modify "all" to also retrieve namespaces, also share fetch with parent component
api.fetchMetrics(api.urlsForResource("all")),
api.fetchMetrics(api.urlsForResource("namespace")),
],
{
resetProps: ['resource'],
},
);