mirror of https://github.com/linkerd/linkerd2.git
Remove the deployment search bar from the sidebar (#853)
We removed individual Deployment pages a while ago, but left the autocomplete search bar in. Clicking on searches goes to a 404 because we don't have /deployment any more. This will be revisited in the future with direct links to grafana dashboards to all the resources we support.
This commit is contained in:
parent
d55e334a42
commit
cd8c53ca2d
|
@ -1,78 +1,15 @@
|
||||||
import _ from 'lodash';
|
|
||||||
import { getPodsByDeployment } from './util/MetricUtils.js';
|
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import logo from './../../img/reversed_logo.png';
|
import logo from './../../img/reversed_logo.png';
|
||||||
|
import { Menu } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import SocialLinks from './SocialLinks.jsx';
|
import SocialLinks from './SocialLinks.jsx';
|
||||||
import Version from './Version.jsx';
|
import Version from './Version.jsx';
|
||||||
import { AutoComplete, Menu } from 'antd';
|
|
||||||
import './../../css/sidebar.css';
|
import './../../css/sidebar.css';
|
||||||
|
|
||||||
const searchBarWidth = 240;
|
|
||||||
|
|
||||||
export default class Sidebar extends React.Component {
|
export default class Sidebar extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.api = this.props.api;
|
this.api = this.props.api;
|
||||||
this.filterDeployments = this.filterDeployments.bind(this);
|
|
||||||
this.onAutocompleteSelect = this.onAutocompleteSelect.bind(this);
|
|
||||||
this.loadFromServer = this.loadFromServer.bind(this);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
pollingInterval: 10000, // longer, this doesn't need to be updated as often
|
|
||||||
pendingRequests: false,
|
|
||||||
autocompleteValue: '',
|
|
||||||
deployments: [],
|
|
||||||
filteredDeployments: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.loadFromServer();
|
|
||||||
this.timerId = window.setInterval(this.loadFromServer, this.state.pollingInterval);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
window.clearInterval(this.timerId);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadFromServer() {
|
|
||||||
if (this.state.pendingRequests) {
|
|
||||||
return; // don't make more requests if the ones we sent haven't completed
|
|
||||||
}
|
|
||||||
this.setState({ pendingRequests: true });
|
|
||||||
|
|
||||||
this.api.fetchPods().promise.then(r => {
|
|
||||||
let deploys = _.map(getPodsByDeployment(r.pods), 'name');
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
pendingRequests: false,
|
|
||||||
deployments: deploys,
|
|
||||||
filteredDeployments: deploys
|
|
||||||
});
|
|
||||||
}).catch(this.handleApiError);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleApiError(e) {
|
|
||||||
console.warn(e.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
onAutocompleteSelect(deployment) {
|
|
||||||
let pathToDeploymentPage = `${this.props.pathPrefix}/deployment?deploy=${deployment}`;
|
|
||||||
this.props.history.push(pathToDeploymentPage);
|
|
||||||
this.setState({
|
|
||||||
autocompleteValue: '',
|
|
||||||
filteredDeployments: this.state.deployments
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
filterDeployments(search) {
|
|
||||||
this.setState({
|
|
||||||
autocompleteValue: search,
|
|
||||||
filteredDeployments: _.filter(this.state.deployments, d => {
|
|
||||||
return d.indexOf(search) !== -1;
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -86,15 +23,6 @@ export default class Sidebar extends React.Component {
|
||||||
<ConduitLink to="/servicemesh"><img src={logo} /></ConduitLink>
|
<ConduitLink to="/servicemesh"><img src={logo} /></ConduitLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AutoComplete
|
|
||||||
className="conduit-autocomplete"
|
|
||||||
value={this.state.autocompleteValue}
|
|
||||||
dataSource={this.state.filteredDeployments}
|
|
||||||
style={{ width: searchBarWidth }}
|
|
||||||
onSelect={this.onAutocompleteSelect}
|
|
||||||
onSearch={this.filterDeployments}
|
|
||||||
placeholder="Search by deployment" />
|
|
||||||
|
|
||||||
<Menu className="sidebar-menu" theme="dark" selectedKeys={[normalizedPath]}>
|
<Menu className="sidebar-menu" theme="dark" selectedKeys={[normalizedPath]}>
|
||||||
<Menu.Item className="sidebar-menu-item" key="/servicemesh">
|
<Menu.Item className="sidebar-menu-item" key="/servicemesh">
|
||||||
<ConduitLink to="/servicemesh">Service mesh</ConduitLink>
|
<ConduitLink to="/servicemesh">Service mesh</ConduitLink>
|
||||||
|
|
Loading…
Reference in New Issue