mirror of https://github.com/linkerd/linkerd2.git
117 lines
3.0 KiB
JavaScript
117 lines
3.0 KiB
JavaScript
import AppBar from '@material-ui/core/AppBar';
|
|
import ConfigureProfilesMsg from './ConfigureProfilesMsg.jsx';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import PropTypes from 'prop-types';
|
|
import QueryToCliCmd from './QueryToCliCmd.jsx';
|
|
import React from 'react';
|
|
import Tab from '@material-ui/core/Tab';
|
|
import Tabs from '@material-ui/core/Tabs';
|
|
import TopModule from './TopModule.jsx';
|
|
import TopRoutesModule from './TopRoutesModule.jsx';
|
|
import _ from 'lodash';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
flexGrow: 1,
|
|
backgroundColor: theme.palette.background.paper,
|
|
marginBottom: theme.spacing.unit * 3,
|
|
},
|
|
});
|
|
|
|
class TopRoutesTabs extends React.Component {
|
|
state = {
|
|
value: 0,
|
|
};
|
|
|
|
handleChange = (_event, value) => {
|
|
this.setState({ value });
|
|
};
|
|
|
|
renderTopComponent() {
|
|
let { disableTop, query, pathPrefix, updateNeighborsFromTapData } = this.props;
|
|
if (disableTop) {
|
|
return null;
|
|
}
|
|
|
|
let topQuery = {
|
|
resource: query.resourceType + "/" + query.resourceName,
|
|
namespace: query.namespace
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<TopModule
|
|
pathPrefix={pathPrefix}
|
|
query={topQuery}
|
|
startTap={true}
|
|
updateNeighbors={updateNeighborsFromTapData}
|
|
maxRowsToDisplay={10} />
|
|
<QueryToCliCmd cmdName="top" query={topQuery} resource={topQuery.resource} />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
renderRoutesComponent() {
|
|
const { query } = this.props;
|
|
|
|
if (_.isEmpty(query)) {
|
|
return <ConfigureProfilesMsg />;
|
|
}
|
|
|
|
let routesQuery = {
|
|
resource_name: query.resourceName,
|
|
resource_type: query.resourceType,
|
|
namespace: query.namespace
|
|
};
|
|
let resource = query.resourceType + "/" + query.resourceName;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<TopRoutesModule query={routesQuery} />
|
|
<QueryToCliCmd cmdName="routes" query={routesQuery} resource={resource} />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { classes } = this.props;
|
|
const { value } = this.state;
|
|
|
|
return (
|
|
<Paper className={classes.root}>
|
|
<AppBar position="static" className={classes.root}>
|
|
|
|
<Tabs
|
|
value={value}
|
|
onChange={this.handleChange}
|
|
indicatorColor="primary"
|
|
textColor="primary">
|
|
<Tab label="Live Calls" />
|
|
<Tab label="Route Metrics" />
|
|
</Tabs>
|
|
</AppBar>
|
|
{value === 0 && this.renderTopComponent()}
|
|
{value === 1 && this.renderRoutesComponent()}
|
|
</Paper>
|
|
);
|
|
}
|
|
}
|
|
|
|
TopRoutesTabs.propTypes = {
|
|
classes: PropTypes.shape({}).isRequired,
|
|
disableTop: PropTypes.bool,
|
|
pathPrefix: PropTypes.string.isRequired,
|
|
query: PropTypes.shape({}),
|
|
theme: PropTypes.shape({}).isRequired,
|
|
updateNeighborsFromTapData: PropTypes.func
|
|
};
|
|
|
|
TopRoutesTabs.defaultProps = {
|
|
disableTop: false,
|
|
query: {},
|
|
updateNeighborsFromTapData: _.noop
|
|
};
|
|
|
|
export default withStyles(styles, { withTheme: true })(TopRoutesTabs);
|