Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Switch to ant sider/content Layout modules, to help style sidebar #188

Merged
merged 3 commits into from
Jan 24, 2018
Merged

Switch to ant sider/content Layout modules, to help style sidebar #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a9b1285
Switch to ant sider/content Layout modules, to help style sidebar
Jan 19, 2018
3b56dbf
Fix a bug where the autocomplete options weren't being reset when an …
Jan 20, 2018
cbf4c80
Change height to 100vh to prevent premature scrollbar
Jan 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 6 additions & 12 deletions web/app/css/sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,10 @@
@import 'styles.css';

.list-container {
width: 100%;
float: right;
min-height: 50vh;
background-size: auto 100%;
}

.sidebar {
width: 100%;
padding: 0px 0px 0px 20%;
float: right;
background-color: #091B39;
color: white;
height: 100vh;
min-height: 200vh;
min-height: 100vh;
background-image: url(./../img/sidebar-bg.png);
background-repeat: no-repeat;
background-size: 100% 50vh;
Expand All @@ -37,7 +27,7 @@
}

& .sidebar-headers {
margin: 27px 0px 27px 0px;
padding: 27px 0px;
}

& .ant.menu {
Expand Down Expand Up @@ -85,5 +75,9 @@

& .ant-input {
border: 1px solid #7395C8;

&.ant-select-search__field {
color: white;
}
}
}
8 changes: 6 additions & 2 deletions web/app/js/components/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export default class Sidebar extends React.Component {

this.state = {
autocompleteValue: '',
deployments: []
deployments: [],
filteredDeployments: []
};
}

Expand All @@ -42,7 +43,10 @@ export default class Sidebar extends React.Component {
onAutocompleteSelect(deployment) {
let pathToDeploymentPage = `/deployment?deploy=${deployment}`;
this.props.history.push(pathToDeploymentPage);
this.setState({ autocompleteValue: '' });
this.setState({
autocompleteValue: '',
filteredDeployments: this.state.deployments
});
}

filterDeployments(search) {
Expand Down
40 changes: 21 additions & 19 deletions web/app/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import DeploymentDetail from './components/DeploymentDetail.jsx';
import DeploymentsList from './components/DeploymentsList.jsx';
import { Layout } from 'antd';
import NoMatch from './components/NoMatch.jsx';
import Paths from './components/Paths.jsx';
import PodDetail from './components/PodDetail.jsx';
Expand All @@ -9,7 +10,6 @@ import Routes from './components/Routes.jsx';
import ServiceMesh from './components/ServiceMesh.jsx';
import Sidebar from './components/Sidebar.jsx';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import { Col, Row } from 'antd';
import './../css/styles.css';

let appMain = document.getElementById('main');
Expand All @@ -23,24 +23,26 @@ if (proxyPathMatch) {

ReactDOM.render((
<BrowserRouter>
<Row>
<Col xs={6} sm={6}>
<Layout>
<Layout.Sider width="310">
<Route render={routeProps => <Sidebar {...routeProps} goVersion={appData.goVersion} releaseVersion={appData.releaseVersion} pathPrefix={pathPrefix} uuid={appData.uuid} />} />
</Col>
<Col xs={18} sm={18}>
<div className="main-content">
<Switch>
<Redirect exact from={`${pathPrefix}/`} to={`${pathPrefix}/servicemesh`} />
<Route path={`${pathPrefix}/servicemesh`} render={() => <ServiceMesh pathPrefix={pathPrefix} releaseVersion={appData.releaseVersion} />} />
<Route path={`${pathPrefix}/deployments`} render={() => <DeploymentsList pathPrefix={pathPrefix} />} />
<Route path={`${pathPrefix}/deployment`} render={props => <DeploymentDetail pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/paths`} render={props => <Paths pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/pod`} render={props => <PodDetail pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/routes`} render={() => <Routes pathPrefix={pathPrefix} />} />
<Route component={NoMatch} />
</Switch>
</div>
</Col>
</Row>
</Layout.Sider>
<Layout>
<Layout.Content style={{ margin: '0 0', padding: 0, background: '#fff' }}>
<div className="main-content">
<Switch>
<Redirect exact from={`${pathPrefix}/`} to={`${pathPrefix}/servicemesh`} />
<Route path={`${pathPrefix}/servicemesh`} render={() => <ServiceMesh pathPrefix={pathPrefix} releaseVersion={appData.releaseVersion} />} />
<Route path={`${pathPrefix}/deployments`} render={() => <DeploymentsList pathPrefix={pathPrefix} />} />
<Route path={`${pathPrefix}/deployment`} render={props => <DeploymentDetail pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/paths`} render={props => <Paths pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/pod`} render={props => <PodDetail pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/routes`} render={() => <Routes pathPrefix={pathPrefix} />} />
<Route component={NoMatch} />
</Switch>
</div>
</Layout.Content>
</Layout>
</Layout>
</BrowserRouter>
), appMain);