Switch to ant sider/content Layout modules (#188)

* Switch to ant sider/content Layout modules, to help style sidebar
This fixes the problem of the sidebar not extending all the way on long pages.
* Fix a bug where the autocomplete options weren't being reset when an item was selected

web/app/css/sidebar.css

@@ -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;
@@ -37,7 +27,7 @@
   }
 
   & .sidebar-headers {
-    margin: 27px 0px 27px 0px;
+    padding: 27px 0px;
   }
 
   & .ant.menu {
@@ -85,5 +75,9 @@
 
   & .ant-input {
     border: 1px solid #7395C8;
+
+    &.ant-select-search__field {
+      color: white;
+    }
   }
 }

web/app/js/components/Sidebar.jsx

@@ -20,7 +20,8 @@ export default class Sidebar extends React.Component {
 
     this.state = {
       autocompleteValue: '',
-      deployments: []
+      deployments: [],
+      filteredDeployments: []
     };
   }
 
@@ -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) {

web/app/js/index.js

@@ -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';
@@ -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');
@@ -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);