Add react device-mgt device view page

components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json

@@ -1,17 +1,12 @@
 {
-  "name": "store",
+  "name": "entgra",
   "version": "1.0.0",
-  "description": "WSO2 IoT Server App Store",
+  "description": "Entgra device management",
   "main": "App.js",
-  "proxy": "http://localhost:3001",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/wso2/carbon-devicemgt"
-  },
   "license": "Apache License 2.0",
   "dependencies": {
     "acorn": "^6.2.0",
-    "antd": "^3.20.1",
+    "antd": "^3.22.0",
     "axios": "^0.18.1",
     "d3": "^5.9.7",
     "dagre": "^0.8.4",

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

@@ -6,21 +6,21 @@
     "primaryColor": "rgb(24, 144, 255)"
   },
   "serverConfig": {
-    "invokerUri": "/ui-request-handler/invoke/application-mgt-store/v1.0",
+    "invokerUri": "/ui-request-handler/invoke/application-mgt-entgra/v1.0",
     "invoker": {
-      "uri": "/store-ui-request-handler/invoke",
+      "uri": "/entgra-ui-request-handler/invoke",
       "publisher": "/application-mgt-publisher/v1.0",
-      "store": "/application-mgt-store/v1.0",
+      "entgra": "/application-mgt-entgra/v1.0",
       "admin" : "",
       "deviceMgt" : "/device-mgt/v1.0"
     },
-    "loginUri": "/store-ui-request-handler/login",
+    "loginUri": "/entgra-ui-request-handler/login",
-    "logoutUri": "/store-ui-request-handler/logout",
+    "logoutUri": "/entgra-ui-request-handler/logout",
-    "platform": "store"
+    "platform": "entgra"
   },
   "defaultPlatformIcons": {
     "default": {
-      "icon": "global",
+      "icon": "hdd",
       "color": "#535c68",
       "theme": "outlined"
     },

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

@@ -65,7 +65,7 @@ class App extends React.Component {
 
     componentDidMount() {
         axios.get(
-            window.location.origin + "/store/public/conf/config.json",
+            window.location.origin + "/entgra/public/conf/config.json",
         ).then(res => {
             console.log(res);
             this.setState({
@@ -88,7 +88,7 @@ class App extends React.Component {
                 <ConfigContext.Provider value={this.state.config}>
                     <div>
                         <Switch>
-                            <Redirect exact from="/store" to="/store/android"/>
+                            <Redirect exact from="/entgra" to="/entgra/devices"/>
                             {this.props.routes.map((route) => (
                                 <RouteWithSubRoutes key={route.path} {...route} />
                             ))}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js

@@ -0,0 +1,262 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import axios from "axios";
+import {Tag, message, notification, Table, Typography, Tooltip, Icon} from "antd";
+import TimeAgo from 'javascript-time-ago'
+
+// Load locale-specific relative date/time formatting rules.
+import en from 'javascript-time-ago/locale/en'
+import {withConfigContext} from "../../context/ConfigContext";
+
+const {Text} = Typography;
+
+let config = null;
+
+const columns = [
+    {
+        title: 'Device',
+        dataIndex: 'name',
+        width: 100,
+    },
+    {
+        title: 'Type',
+        dataIndex: 'type',
+        key: 'type',
+        render: type => {
+            const defaultPlatformIcons = config.defaultPlatformIcons;
+            let icon = defaultPlatformIcons.default.icon;
+            let color = defaultPlatformIcons.default.color;
+            let theme = defaultPlatformIcons.default.theme;
+
+            if (defaultPlatformIcons.hasOwnProperty(type)) {
+                icon = defaultPlatformIcons[type].icon;
+                color = defaultPlatformIcons[type].color;
+                theme = defaultPlatformIcons[type].theme;
+            }
+
+            return (
+                <span style={{fontSize: 20, color: color, textAlign: "center"}}>
+                    <Icon type={icon} theme={theme}/>
+                </span>
+            );
+        }
+        // todo add filtering options
+    },
+    {
+        title: 'Owner',
+        dataIndex: 'enrolmentInfo',
+        key: 'owner',
+        render: enrolmentInfo => enrolmentInfo.owner
+        // todo add filtering options
+    },
+    {
+        title: 'Ownership',
+        dataIndex: 'enrolmentInfo',
+        key: 'ownership',
+        render: enrolmentInfo => enrolmentInfo.ownership
+        // todo add filtering options
+    },
+    {
+        title: 'Status',
+        dataIndex: 'enrolmentInfo',
+        key: 'status',
+        render: (enrolmentInfo) => {
+            const status = enrolmentInfo.status.toLowerCase();
+            let color = "#f9ca24";
+            switch (status) {
+                case "active":
+                    color = "#badc58";
+                    break;
+                case "created":
+                    color = "#6ab04c";
+                    break;
+                case "removed":
+                    color = "#ff7979";
+                    break;
+                case "inactive":
+                    color = "#f9ca24";
+                    break;
+                case "blocked":
+                    color = "#636e72";
+                    break;
+            }
+            return <Tag color={color}>{status}</Tag>;
+        }
+        // todo add filtering options
+    },
+    {
+        title: 'Last Updated',
+        dataIndex: 'enrolmentInfo',
+        key: 'dateOfLastUpdate',
+        render: (data) => {
+            const {dateOfLastUpdate} = data;
+            const timeAgoString = getTimeAgo(dateOfLastUpdate);
+            return <Tooltip title={new Date(dateOfLastUpdate).toString()}>{timeAgoString}</Tooltip>;
+        }
+        // todo add filtering options
+    },
+    // {
+    //     title: 'OS Version',
+    //     dataIndex: 'deviceInfo',
+    //     key: 'osVersion',
+    //     render: deviceInfo => deviceInfo.osVersion
+    //     // todo add filtering options
+    // },
+    // {
+    //     title: 'IMEI',
+    //     dataIndex: 'properties',
+    //     key: 'imei',
+    //     render: properties => {
+    //         let imei = "not-found";
+    //         for (let i = 0; i < properties.length; i++) {
+    //             if (properties[i].name === "IMEI") {
+    //                 imei = properties[i].value;
+    //             }
+    //         }
+    //         return imei;
+    //     }
+    //     // todo add filtering options
+    // },
+];
+
+const getTimeAgo = (time) => {
+    const timeAgo = new TimeAgo('en-US');
+    return timeAgo.format(time);
+};
+
+
+class DeviceTable extends React.Component {
+    constructor(props) {
+        super(props);
+        config =  this.props.context;
+        TimeAgo.addLocale(en);
+        this.state = {
+            data: [],
+            pagination: {},
+            loading: false,
+            selectedRows: []
+        };
+    }
+
+    rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            this.setState({
+                selectedRows: selectedRows
+            })
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+        }),
+    };
+
+    componentDidMount() {
+        this.fetch();
+    }
+
+    //fetch data from api
+    fetch = (params = {}) => {
+        const config = this.props.context;
+        this.setState({loading: true});
+        // get current page
+        const currentPage = (params.hasOwnProperty("page")) ? params.page : 1;
+
+        const extraParams = {
+            offset: 10 * (currentPage - 1), //calculate the offset
+            limit: 10,
+            requireDeviceInfo: true,
+        };
+
+        const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&');
+
+        //send request to the invoker
+        axios.get(
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt +
+            "/devices?" + encodedExtraParams,
+        ).then(res => {
+            if (res.status === 200) {
+                const pagination = {...this.state.pagination};
+                this.setState({
+                    loading: false,
+                    data: res.data.data.devices,
+                    pagination,
+                });
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                //todo display a popop with error
+                message.error('You are not logged in');
+                window.location.href = window.location.origin + '/entgra/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to load devices.",
+                });
+            }
+
+            this.setState({loading: false});
+        });
+    };
+
+    handleTableChange = (pagination, filters, sorter) => {
+        const pager = {...this.state.pagination};
+        pager.current = pagination.current;
+        this.setState({
+            pagination: pager,
+        });
+        this.fetch({
+            results: pagination.pageSize,
+            page: pagination.current,
+            sortField: sorter.field,
+            sortOrder: sorter.order,
+            ...filters,
+        });
+    };
+
+    render() {
+        const {data, pagination, loading, selectedRows} = this.state;
+        return (
+            <div>
+                <Table
+                    columns={columns}
+                    rowKey={record => record.deviceIdentifier}
+                    dataSource={data}
+                    pagination={{
+                        ...pagination,
+                        size: "small",
+                        // position: "top",
+                        showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
+                        // showQuickJumper: true
+                    }}
+                    loading={loading}
+                    onChange={this.handleTableChange}
+                    rowSelection={this.rowSelection}
+                    scroll={{x: 1000}}
+                />
+            </div>
+        );
+    }
+}
+
+export default withConfigContext(DeviceTable);

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/AppCard.js

@@ -42,7 +42,7 @@ class AppCard extends React.Component {
 
         const description = (
             <div className="appCard">
-                <Link to={"/store/"+app.deviceType+"/apps/" + release.uuid}>
+                <Link to={"/entgra/"+app.deviceType+"/apps/" + release.uuid}>
                     <Row className="release">
                         <Col span={24} className="release-icon">
                             <img src={release.iconPath} alt="icon"/>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/AppList.js

@@ -59,7 +59,7 @@ class AppList extends React.Component {
         });
         //send request to the invoker
         axios.post(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra + "/applications/",
             payload,
         ).then(res => {
             if (res.status === 200) {
@@ -76,7 +76,7 @@ class AppList extends React.Component {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 //todo display a popup with error
                 message.error('You are not logged in');
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/DetailedRating.js

@@ -52,7 +52,7 @@ class DetailedRating extends React.Component{
         const config = this.props.context;
 
         return axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+uuid+"/"+type+"-rating",
+            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.entgra+"/reviews/"+uuid+"/"+type+"-rating",
             ).then(res => {
             if (res.status === 200) {
                 let detailedRating = res.data.data;
@@ -63,7 +63,7 @@ class DetailedRating extends React.Component{
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = window.location.origin+'/store/login';
+                window.location.href = window.location.origin+'/entgra/login';
             }
         });
     };

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -47,7 +47,7 @@ class ReleaseView extends React.Component {
         this.setState({
             loading: true,
         });
-        const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/install";
+        const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra + "/subscription/" + uuid + "/" + type + "/install";
         axios.post(
             url,
             payload,
@@ -79,7 +79,7 @@ class ReleaseView extends React.Component {
 
         }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 this.setState({
                     loading: false,

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/install/DeviceInstall.js

@@ -168,7 +168,7 @@ class DeviceInstall extends React.Component {
             if (error.hasOwnProperty("status") && error.response.status === 401) {
                 //todo display a popop with error
                 message.error('You are not logged in');
-                window.location.href = window.location.origin + '/store/login';
+                window.location.href = window.location.origin + '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/install/GroupInstall.js

@@ -67,7 +67,7 @@ class GroupInstall extends React.Component {
         }).catch((error) => { console.log(error);
             if (error.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = window.location.origin+'/store/login';
+                window.location.href = window.location.origin+'/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/install/RoleInstall.js

@@ -67,7 +67,7 @@ class RoleInstall extends React.Component {
         }).catch((error) => { console.log(error);
             if (error.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = window.location.origin+'/store/login';
+                window.location.href = window.location.origin+'/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/install/UserInstall.js

@@ -69,7 +69,7 @@ class UserInstall extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty(status) && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/review/AddReview.js

@@ -72,7 +72,7 @@ class AddReview extends React.Component {
         };
 
         axios.post(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra + "/reviews/" + uuid,
             payload,
         ).then(res => {
             if (res.status === 201) {
@@ -104,7 +104,7 @@ class AddReview extends React.Component {
 
         }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 this.setState({
                     loading: false,

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js

@@ -44,7 +44,7 @@ class CurrentUsersReview extends React.Component {
         const config = this.props.context;
 
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra + "/reviews/app/user/" + uuid,
         ).then(res => {
             if (res.status === 200) {
                 const data = res.data.data.data;
@@ -54,7 +54,7 @@ class CurrentUsersReview extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty(status) && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/review/Reviews.js

@@ -50,7 +50,7 @@ class Reviews extends React.Component {
         const config = this.props.context;
 
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+type+"/"+uuid,
+            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.entgra+"/reviews/"+type+"/"+uuid,
             {
                 headers: {'X-Platform': config.serverConfig.platform}
             }).then(res => {
@@ -61,7 +61,7 @@ class Reviews extends React.Component {
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js

@@ -58,7 +58,7 @@ class SingleReview extends React.Component {
         const {id} = this.state.review;
         const config = this.props.context;
 
-        let url =window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store;
+        let url =window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra;
 
         // call as an admin api if the review is not a personal review
         if (!this.props.isPersonalReview) {
@@ -80,7 +80,7 @@ class SingleReview extends React.Component {
         }).catch((error) => {
             console.log(error);
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js

@@ -86,7 +86,7 @@ class EditReview extends React.Component {
         };
 
         axios.put(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid+"/"+id,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra + "/reviews/" + uuid+"/"+id,
             payload,
         ).then(res => {
             if (res.status === 200) {
@@ -117,7 +117,7 @@ class EditReview extends React.Component {
         }).catch((error) => {
             console.log(error);
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/store/login';
+                window.location.href = window.location.origin+ '/entgra/login';
             } else {
                 this.setState({
                     loading: false,

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.html

@@ -20,7 +20,7 @@
 <html>
     <head>
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
-        <title>Entgra App Store</title>
+        <title>Entgra Device Management</title>
     </head>
 <div id="root"></div>
 </html>

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

@@ -22,30 +22,24 @@ import * as serviceWorker from './serviceWorker';
 import App from "./App";
 import Login from "./pages/Login";
 import Dashboard from "./pages/dashboard/Dashboard";
-import Apps from "./pages/dashboard/apps/Apps";
-import Release from "./pages/dashboard/apps/release/Release";
 import './index.css';
+import Devices from "./pages/dashboard/devices/Devices";
 
 const routes = [
     {
-        path: '/store/login',
+        path: '/entgra/login',
         exact: true,
         component: Login
     },
     {
-        path: '/store',
+        path: '/entgra',
         exact: false,
         component: Dashboard,
         routes: [
             {
-                path: '/store/:deviceType',
+                path: '/entgra/devices',
-                component: Apps,
+                component: Devices,
                 exact: true
-            },
-            {
-                path: '/store/:deviceType/apps/:uuid',
-                exact: true,
-                component: Release
             }
         ]
     }

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

@@ -93,7 +93,7 @@ class NormalLoginForm extends React.Component {
                 const parameters = {
                     username: values.username,
                     password: values.password,
-                    platform: "store"
+                    platform: "entgra"
                 };
 
                 const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
@@ -101,7 +101,7 @@ class NormalLoginForm extends React.Component {
                 axios.post(window.location.origin+ config.serverConfig.loginUri, request
                 ).then(res => {
                     if (res.status === 200) {
-                        window.location = window.location.origin+ "/store";
+                        window.location = window.location.origin+ "/entgra";
                     }
                 }).catch(function (error) {
                     if (error.response.status === 400) {

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

@@ -18,18 +18,17 @@
 
 import React from "react";
 import {Layout, Menu, Icon} from 'antd';
-
+import {Switch, Link} from "react-router-dom";
-const {Header, Content, Footer} = Layout;
+import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
-import {Link} from "react-router-dom";
+import {Redirect} from 'react-router'
-import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
-import {Switch} from 'react-router';
-import axios from "axios";
 import "../../App.css";
 import {withConfigContext} from "../../context/ConfigContext";
 import Logout from "./logout/Logout";
 
+const {Header, Content, Footer} = Layout;
 const {SubMenu} = Menu;
 
+
 class Dashboard extends React.Component {
     constructor(props) {
         super(props);
@@ -41,50 +40,7 @@ class Dashboard extends React.Component {
         this.logo = this.props.context.theme.logo;
     }
 
-    componentDidMount() {
-        this.getDeviceTypes();
-    }
-
-    getDeviceTypes = () => {
-        const config = this.props.context;
-        axios.get(
-            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
-        ).then(res => {
-            if (res.status === 200) {
-                const deviceTypes = JSON.parse(res.data.data);
-                this.setState({
-                    deviceTypes,
-                    loading: false,
-                });
-            }
-
-        }).catch((error) => {
-            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin + '/store/login';
-            } else {
-                notification["error"]({
-                    message: "There was a problem",
-                    duration: 0,
-                    description:
-                        "Error occurred while trying to load device types.",
-                });
-            }
-            this.setState({
-                loading: false
-            });
-        });
-    };
-
-    changeSelectedMenuItem = (key) => {
-        this.setState({
-            selectedKeys: [key]
-        })
-    };
-
     render() {
-        const config = this.props.context;
-        const {selectedKeys, deviceTypes} = this.state;
-
         return (
             <div>
                 <Layout className="layout">
@@ -95,31 +51,10 @@ class Dashboard extends React.Component {
                         <Menu
                             theme="light"
                             mode="horizontal"
-                            defaultSelectedKeys={selectedKeys}
+                            defaultSelectedKeys={['1']}
                             style={{lineHeight: '64px'}}
                         >
-                            {
+                            <Menu.Item key="1"><Link to="/entgra/entgra"><Icon type="appstore"/>Devices</Link></Menu.Item>
-                                deviceTypes.map((deviceType) => {
-                                    const platform = deviceType.name;
-                                    const defaultPlatformIcons = config.defaultPlatformIcons;
-                                    let icon = defaultPlatformIcons.default.icon;
-                                    let theme = defaultPlatformIcons.default.theme;
-                                    if (defaultPlatformIcons.hasOwnProperty(platform)) {
-                                        icon = defaultPlatformIcons[platform].icon;
-                                        theme = defaultPlatformIcons[platform].theme;
-                                    }
-                                    return (
-                                        <Menu.Item key={platform}>
-                                            <Link to={"/store/" + platform}>
-                                                <Icon type={icon} theme={theme}/>
-                                                {platform}
-                                            </Link>
-                                        </Menu.Item>
-                                    );
-                                })
-                            }
-                            <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
-                                Clips</Link></Menu.Item>
 
                             <SubMenu className="profile"
                                      title={
@@ -131,19 +66,19 @@ class Dashboard extends React.Component {
                             >
                                 <Logout/>
                             </SubMenu>
+
                         </Menu>
+
                     </Header>
                 </Layout>
                 <Layout>
-                    <Content style={{padding: '0 0'}}>
+                    <Content style={{marginTop: 2}}>
                         <Switch>
+                            <Redirect exact from="/entgra" to="/entgra/devices"/>
                             {this.state.routes.map((route) => (
-                                <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem}
+                                <RouteWithSubRoutes key={route.path} {...route} />
-                                                    key={route.path} {...route} />
                             ))}
-
                         </Switch>
-
                     </Content>
                     <Footer style={{textAlign: 'center'}}>
                         ©2019 entgra.io

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js

@@ -48,7 +48,7 @@ const Dragger = Upload.Dragger;
 const routes = [
     {
         path: 'index',
-        breadcrumbName: 'store',
+        breadcrumbName: 'entgra',
     },
     {
         path: 'first',

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -58,7 +58,7 @@ class Release extends React.Component {
 
         //send request to the invoker
         axios.get(
-            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/" + uuid,
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.entgra + "/applications/" + uuid,
         ).then(res => {
             if (res.status === 200) {
                 let app = res.data.data;
@@ -75,7 +75,7 @@ class Release extends React.Component {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 //todo display a popop with error
                 message.error('You are not logged in');
-                window.location.href = window.location.origin + '/store/login';
+                window.location.href = window.location.origin + '/entgra/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -110,7 +110,7 @@ class Release extends React.Component {
                     <Col lg={16} md={24} style={{padding: 3}}>
                         <Breadcrumb style={{paddingBottom: 16}}>
                             <Breadcrumb.Item>
-                                <Link to={"/store/"+deviceType}><Icon type="home"/> {deviceType + " apps"} </Link>
+                                <Link to={"/entgra/"+deviceType}><Icon type="home"/> {deviceType + " apps"} </Link>
                             </Breadcrumb.Item>
                             <Breadcrumb.Item>{appName}</Breadcrumb.Item>
                         </Breadcrumb>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/dashboard/devices/Devices.js

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import {
+    PageHeader,
+    Typography,
+    Breadcrumb,
+    Icon,
+    Card
+} from "antd";
+import {Link} from "react-router-dom";
+import DeviceTable from "../../../components/Devices/DevicesTable";
+
+const {Paragraph} = Typography;
+
+class Devices extends React.Component {
+    routes;
+
+    constructor(props) {
+        super(props);
+        this.routes = props.routes;
+
+    }
+
+    render() {
+        return (
+            <div>
+                <PageHeader style={{paddingTop: 0}}>
+                    <Breadcrumb style={{paddingBottom: 16}}>
+                        <Breadcrumb.Item>
+                            <Link to="/entgra/devices"><Icon type="home"/> Home</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>Devices</Breadcrumb.Item>
+                    </Breadcrumb>
+                    <div className="wrap">
+                        <h3>Devices</h3>
+                        <Paragraph>Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an
+                            illud incorrupte nam.</Paragraph>
+                    </div>
+                </PageHeader>
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
+                    <div style={{backgroundColor:"#ffffff"}}>
+                        <DeviceTable/>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Devices;

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/dashboard/logout/Logout.js

@@ -49,7 +49,7 @@ class Logout extends React.Component {
         ).then(res => {
             //if the api call status is correct then user will logout and then it goes to login page
             if (res.status === 200) {
-                window.location = window.location.origin + "/store/login";
+                window.location = window.location.origin + "/entgra/login";
             }
         }).catch(function (error) {
 

components/device-mgt/io.entgra.device.mgt.ui/react-app/webpack.config.js

@@ -23,7 +23,7 @@ const configurations = require("./public/conf/config.json");
 const config = {
     devtool: "source-map",
     output: {
-        publicPath: '/store/'
+        publicPath: '/entgra/'
     },
     watch: false,
     resolve: {