Merge branch 'application-mgt-new' into 'application-mgt-new'

Add navbar to device mgt reat app

See merge request entgra/carbon-device-mgt!213

components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json

@@ -1,17 +1,11 @@
 {
   "theme": {
-    "type": "default",
-    "value": "lightBaseTheme",
-    "logo" : "https://entgra.io/assets/images/svg/logo.svg",
+    "logo" : "https://localhost:9443/entgra/public/images/logo.svg",
     "primaryColor": "rgb(24, 144, 255)"
   },
   "serverConfig": {
-    "invokerUri": "/ui-request-handler/invoke/application-mgt-entgra/v1.0",
     "invoker": {
       "uri": "/entgra-ui-request-handler/invoke",
-      "publisher": "/application-mgt-publisher/v1.0",
-      "entgra": "/application-mgt-entgra/v1.0",
-      "admin" : "",
       "deviceMgt" : "/device-mgt/v1.0"
     },
     "loginUri": "/entgra-ui-request-handler/login",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css

@@ -17,51 +17,85 @@
  */
 
 .ant-upload.ant-upload-drag {
-  height: 170px;
+    height: 170px;
 }
 
-.release .release-icon{
-  margin-right: 15px;
+.release .release-icon {
+    margin-right: 15px;
 }
 
-.release .release-icon img{
-  width: 100%;
-  border-radius: 28%;
+.release .release-icon img {
+    width: 100%;
+    border-radius: 28%;
 }
 
-.release .release-title{
-  margin-left: 15px;
+.release .release-title {
+    margin-left: 15px;
 }
 
-.release .release-screenshot img{
-  width: 100%;
-  border-radius: 15px;
-  padding: 5px;
+.release .release-screenshot img {
+    width: 100%;
+    border-radius: 15px;
+    padding: 5px;
 }
 
-.logo-image {
-  /*width: 120px;*/
-  height: 31px;
-  margin: 0 5px 16px 24px;
-  float: left;
+/*.logo-image {*/
+/*!*width: 120px;*!*/
+/*height: 31px;*/
+/*margin: 0 5px 16px 24px;*/
+/*float: left;*/
+/*}*/
+
+
+.main-container {
+    background: #f0f2f5;
+    min-height: 780px
 }
 
-.logo-image img{
-  height: 35px;
+.profile {
+    float: right;
+    margin-right: 2%;
 }
 
-.main-container{
-  background: #f0f2f5;
-  min-height: 780px
+@media only screen and (min-width: 768px) {
+    .main-container {
+        padding: 24px;
+    }
 }
 
-.profile{
-  float:right;
-  margin-right: 2%;
+.layout .trigger {
+    font-size: 18px;
+    /*line-height: 64px;*/
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+    float: left;
 }
 
-@media only screen and (min-width: 768px) {
-  .main-container{
-    padding: 24px;
-  }
+.layout .trigger:hover {
+    color: #1890ff;
+}
+
+.layout .logo-image {
+    position: relative;
+    height: 64px;
+    padding-left: 8px;
+    overflow: hidden;
+    line-height: 64px;
+    background: #001529;
+    transition: all .3s;
+}
+
+.layout .brand{
+    display: inline-block;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
+    vertical-align: middle;
+}
+
+.layout .logo-image img {
+    height: 32px;
+    margin: 16px;
 }

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon} from 'antd';
+import {Layout, Menu, Icon, Typography} from 'antd';
 import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
@@ -25,9 +25,10 @@ import "../../App.css";
 import {withConfigContext} from "../../context/ConfigContext";
 import Logout from "./Logout/Logout";
 
-const {Header, Content, Footer} = Layout;
+const {Header, Content, Footer, Sider} = Layout;
 const {SubMenu} = Menu;
 
+const {Title} = Typography;
 
 class Dashboard extends React.Component {
     constructor(props) {
@@ -35,56 +36,92 @@ class Dashboard extends React.Component {
         this.state = {
             routes: props.routes,
             selectedKeys: [],
-            deviceTypes: []
+            deviceTypes: [],
+            isNavBarCollapsed: false,
         };
         this.logo = this.props.context.theme.logo;
     }
 
+    toggle = () => {
+        this.setState({
+            isNavBarCollapsed: !this.state.isNavBarCollapsed,
+        });
+    };
+
     render() {
         return (
             <div>
-                <Layout className="layout">
-                    <Header style={{paddingLeft: 0, paddingRight: 0}}>
+                <Layout className="layout" >
+                    <Sider
+                        trigger={null}
+                        collapsible
+                        collapsed={this.state.isNavBarCollapsed}>
                         <div className="logo-image">
                             <img alt="logo" src={this.logo}/>
+                            <span className="brand">Entgra</span>
                         </div>
-                        <Menu
-                            theme="light"
-                            mode="horizontal"
-                            defaultSelectedKeys={['1']}
-                            style={{lineHeight: '64px'}}
-                        >
-                            <Menu.Item key="devices"><Link to="/entgra/devices"><Icon type="appstore"/>Devices</Link></Menu.Item>
-                            <Menu.Item key="geo"><Link to="/entgra/geo"><Icon type="environment"/>Geo</Link></Menu.Item>
-                            <Menu.Item key="reports"><Link to="/entgra/reports"><Icon type="bar-chart"/>Reports</Link></Menu.Item>
+                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['devices']}>
+                           <Menu.Item key="devices">
+                                <Link to="/entgra/devices">
+                                    <Icon type="appstore"/>
+                                    <span>Devices</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="geo">
+                                <Link to="/entgra/geo">
+                                    <Icon type="environment"/>
+                                    <span>Geo</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="reports">
+                                <Link to="/entgra/reports">
+                                    <Icon type="bar-chart"/>
+                                    <span>Reports</span>
+                                </Link>
+                            </Menu.Item>
+                        </Menu>
+                    </Sider>
+                    <Layout>
+                        <Header style={{background: '#fff', padding: 0}}>
+                            <div className="trigger">
+                            <Icon
+                                type={this.state.isNavBarCollapsed ? 'menu-unfold' : 'menu-fold'}
+                                onClick={this.toggle}
+                            />
+                            </div>
+                            <Menu
+                                theme="light"
+                                mode="horizontal"
+                                style={{lineHeight: '64px'}}
+                            >
+                                <Menu.Item key="trigger">
 
-                            <SubMenu className="profile"
-                                     title={
-                                         <span className="submenu-title-wrapper">
+                                </Menu.Item>
+                                <SubMenu className="profile"
+                                         title={
+                                             <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
                                          Profile
                                      </span>
-                                     }
-                            >
-                                <Logout/>
-                            </SubMenu>
+                                         }
+                                >
+                                    <Logout/>
+                                </SubMenu>
 
-                        </Menu>
-
-                    </Header>
-                </Layout>
-                <Layout>
-                    <Content style={{marginTop: 2}}>
-                        <Switch>
-                            <Redirect exact from="/entgra" to="/entgra/devices"/>
-                            {this.state.routes.map((route) => (
-                                <RouteWithSubRoutes key={route.path} {...route} />
-                            ))}
-                        </Switch>
-                    </Content>
-                    <Footer style={{textAlign: 'center'}}>
-                        ©2019 entgra.io
-                    </Footer>
+                            </Menu>
+                        </Header>
+                        <Content style={{marginTop: 2}}>
+                            <Switch>
+                                <Redirect exact from="/entgra" to="/entgra/devices"/>
+                                {this.state.routes.map((route) => (
+                                    <RouteWithSubRoutes key={route.path} {...route} />
+                                ))}
+                            </Switch>
+                        </Content>
+                        <Footer style={{textAlign: 'center'}}>
+                            ©2019 entgra.io
+                        </Footer>
+                    </Layout>
                 </Layout>
             </div>
         );