From 02a8fd35dcff0100cf5fba560141931abbbcf392 Mon Sep 17 00:00:00 2001 From: shamalka Date: Sat, 19 Oct 2019 23:59:11 +0530 Subject: [PATCH 1/2] Add main devicemgt features to dashboard --- .../react-app/public/conf/config.json | 2 +- .../react-app/public/images/logo.svg | 799 +++++++++++++++++- .../react-app/src/App.js | 45 +- .../DeviceTypes/DeviceTypesTable.js | 135 +++ .../src/components/Devices/DevicesTable.js | 6 +- .../components/Devices/ReportDevicesTable.js | 13 +- .../src/components/Groups/GroupsTable.js | 174 ++++ .../src/components/Roles/RolesTable.js | 147 ++++ .../src/components/Users/UsersTable.js | 134 +++ .../react-app/src/index.js | 30 + .../src/pages/Dashboard/Dashboard.css | 7 +- .../src/pages/Dashboard/Dashboard.js | 40 +- .../Dashboard/DeviceTypes/DeviceTypes.js | 66 ++ .../src/pages/Dashboard/Devices/Devices.js | 2 +- .../src/pages/Dashboard/Groups/Groups.js | 63 ++ .../src/pages/Dashboard/Policies/Policies.js | 62 ++ .../src/pages/Dashboard/Roles/Roles.js | 63 ++ .../src/pages/Dashboard/Users/Users.js | 63 ++ 18 files changed, 1821 insertions(+), 30 deletions(-) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/DeviceTypes/DeviceTypesTable.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json index aa72ba06e4..916421e377 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json @@ -1,6 +1,6 @@ { "theme": { - "logo" : "https://localhost:9443/entgra/public/images/logo.svg", + "logo" : "https://entgra.io/assets/images/svg/logo.svg", "primaryColor": "rgb(24, 144, 255)" }, "serverConfig": { diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg index 05eb79a811..7986a8d1b4 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg @@ -1 +1,798 @@ -logo \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js index 68f8823e1a..5f8f429e8e 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js @@ -67,11 +67,8 @@ class App extends React.Component { axios.get( window.location.origin + "/entgra/public/conf/config.json", ).then(res => { - console.log(res); - this.setState({ - loading: false, - config: res.data - }) + const config = res.data; + this.checkUserLoggedIn(config); }).catch((error) => { this.setState({ loading: false, @@ -80,6 +77,44 @@ class App extends React.Component { }); } + checkUserLoggedIn = (config) => { + axios.post( + window.location.origin + "/entgra-ui-request-handler/user", + "platform=entgra" + ).then(res => { + config.user = res.data.data; + const pageURL = window.location.pathname; + const lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1); + if (lastURLSegment === "login") { + window.location.href = window.location.origin + `/entgra/`; + } else { + this.setState({ + loading: false, + config: config + }); + } + }).catch((error) => { + if (error.hasOwnProperty("response") && error.response.status === 401) { + const redirectUrl = encodeURI(window.location.href); + const pageURL = window.location.pathname; + const lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1); + if (lastURLSegment !== "login") { + window.location.href = window.location.origin + `/entgra/login?redirect=${redirectUrl}`; + } else { + this.setState({ + loading: false, + config: config + }) + } + } else { + this.setState({ + loading: false, + error: true + }) + } + }); + }; + render() { const {loading, error} = this.state; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/DeviceTypes/DeviceTypesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/DeviceTypes/DeviceTypesTable.js new file mode 100644 index 0000000000..ee5bed4129 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/DeviceTypes/DeviceTypesTable.js @@ -0,0 +1,135 @@ +/* + * 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, Divider, Card, Col, Row, Select} 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; +let apiUrl; + +class DeviceTypesTable extends React.Component { + constructor(props) { + super(props); + config = this.props.context; + TimeAgo.addLocale(en); + this.state = { + data: [], + pagination: {}, + loading: false, + selectedRows: [] + }; + } + + componentDidMount() { + this.fetchUsers(); + } + + //fetch data from api + fetchUsers = (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, + }; + + const encodedExtraParams = Object.keys(extraParams) + .map(key => key + '=' + extraParams[key]).join('&'); + + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/device-types"; + + //send request to the invokerss + axios.get(apiUrl).then(res => { + if (res.status === 200) { + const pagination = {...this.state.pagination}; + this.setState({ + loading: false, + data: JSON.parse(res.data.data), + pagination, + }); + } + console.log(JSON.parse(res.data.data)) + + }).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 device types.", + }); + } + + 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; + + const itemCard = data.map((data) => + + + {data.name} + + + ); + return ( +
+ + {itemCard} + +
+ ); + } +} + +export default withConfigContext(DeviceTypesTable); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js index 62cb0c9f14..21fe449b48 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js @@ -176,7 +176,7 @@ class DeviceTable extends React.Component { this.setState({ loading: false, data: res.data.data.devices, - pagination, + pagination }); } @@ -253,7 +253,7 @@ class DeviceTable extends React.Component { message: "Done", duration: 4, description: - "Successfully disenrolled the device.", + "Successfully dis-enrolled the device.", }); } }).catch((error) => { @@ -266,7 +266,7 @@ class DeviceTable extends React.Component { message: "There was a problem", duration: 0, description: - "Error occurred while trying to disenroll devices.", + "Error occurred while trying to dis-enroll devices.", }); } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/ReportDevicesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/ReportDevicesTable.js index d71f141e96..5d24e85986 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/ReportDevicesTable.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/ReportDevicesTable.js @@ -112,18 +112,7 @@ const columns = [ return {timeAgoString}; } // todo add filtering options - }, - { - title: 'Action', - key: 'action', - render: () => ( - - - - - - ), - }, + } ]; const getTimeAgo = (time) => { diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js new file mode 100644 index 0000000000..f411c0782a --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js @@ -0,0 +1,174 @@ +/* + * 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, Divider} 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; +let apiUrl; + +const columns = [ + { + title: 'Group Name', + dataIndex: 'name', + width: 100, + }, + { + title: 'Owner', + dataIndex: 'owner', + key: 'owner', + // render: enrolmentInfo => enrolmentInfo.owner + // todo add filtering options + }, + { + title: 'Description', + dataIndex: 'description', + key: 'description', + // render: enrolmentInfo => enrolmentInfo.ownership + // todo add filtering options + } +]; + +const getTimeAgo = (time) => { + const timeAgo = new TimeAgo('en-US'); + return timeAgo.format(time); +}; + +class GroupsTable 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) => { + this.setState({ + selectedRows: selectedRows + }) + } + }; + + componentDidMount() { + this.fetchGroups(); + } + + //fetch data from api + fetchGroups = (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, + }; + + const encodedExtraParams = Object.keys(extraParams) + .map(key => key + '=' + extraParams[key]).join('&'); + + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/admin/groups?" + encodedExtraParams; + + //send request to the invokerss + axios.get(apiUrl).then(res => { + if (res.status === 200) { + const pagination = {...this.state.pagination}; + this.setState({ + loading: false, + data: res.data.data.deviceGroups, + 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 device groups.", + }); + } + + 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 ( +
+ (record.id)} + dataSource={data} + pagination={{ + ...pagination, + size: "small", + // position: "top", + showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} groups` + // showQuickJumper: true + }} + loading={loading} + onChange={this.handleTableChange} + rowSelection={this.rowSelection} + scroll={{x: 1000}} + /> + + ); + } +} + +export default withConfigContext(GroupsTable); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js new file mode 100644 index 0000000000..6808350646 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js @@ -0,0 +1,147 @@ +/* + * 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, Divider, Card, Col, Row, Select} 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; +let apiUrl; + +const columns = [ + { + title: 'User Name', + dataIndex: 'username', + width: 100, + } +]; + +const getTimeAgo = (time) => { + const timeAgo = new TimeAgo('en-US'); + return timeAgo.format(time); +}; + +class RolesTable extends React.Component { + constructor(props) { + super(props); + config = this.props.context; + TimeAgo.addLocale(en); + this.state = { + data: [], + pagination: {}, + loading: false, + selectedRows: [] + }; + } + + componentDidMount() { + this.fetchUsers(); + } + + //fetch data from api + fetchUsers = (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, + }; + + const encodedExtraParams = Object.keys(extraParams) + .map(key => key + '=' + extraParams[key]).join('&'); + + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/roles"; + + //send request to the invokerss + axios.get(apiUrl).then(res => { + if (res.status === 200) { + const pagination = {...this.state.pagination}; + this.setState({ + loading: false, + data: res.data.data.roles, + 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 users.", + }); + } + + 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; + + const itemCard = data.map((data) => + + + {data} + + + ); + return ( +
+ + {itemCard} + +
+ ); + } +} + +export default withConfigContext(RolesTable); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js new file mode 100644 index 0000000000..beb34a94d6 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js @@ -0,0 +1,134 @@ +/* + * 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, Divider, Card, Col, Row, Select} 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; +let apiUrl; + +class UsersTable extends React.Component { + constructor(props) { + super(props); + config = this.props.context; + TimeAgo.addLocale(en); + this.state = { + data: [], + pagination: {}, + loading: false, + selectedRows: [] + }; + } + + componentDidMount() { + this.fetchUsers(); + } + + //fetch data from api + fetchUsers = (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, + }; + + const encodedExtraParams = Object.keys(extraParams) + .map(key => key + '=' + extraParams[key]).join('&'); + + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/users"; + + //send request to the invokerss + axios.get(apiUrl).then(res => { + if (res.status === 200) { + const pagination = {...this.state.pagination}; + this.setState({ + loading: false, + data: res.data.data.users, + 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 users.", + }); + } + + 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; + + const itemCard = data.map((data) => + + + {data.username} + + + ); + return ( +
+ + {itemCard} + +
+ ); + } +} + +export default withConfigContext(UsersTable); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js index b8206d16d7..8eeca9f07c 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js @@ -26,6 +26,11 @@ import './index.css'; import Devices from "./pages/Dashboard/Devices/Devices"; import Reports from "./pages/Dashboard/Reports/Reports"; import Geo from "./pages/Dashboard/Geo/Geo"; +import Groups from "./pages/Dashboard/Groups/Groups"; +import Users from "./pages/Dashboard/Users/Users"; +import Policies from "./pages/Dashboard/Policies/Policies"; +import Roles from "./pages/Dashboard/Roles/Roles"; +import DeviceTypes from "./pages/Dashboard/DeviceTypes/DeviceTypes"; const routes = [ { @@ -52,6 +57,31 @@ const routes = [ path: '/entgra/reports', component: Reports, exact: true + }, + { + path: '/entgra/groups', + component: Groups, + exact: true + }, + { + path: '/entgra/users', + component: Users, + exact: true + }, + { + path: '/entgra/policies', + component: Policies, + exact: true + }, + { + path: '/entgra/roles', + component: Roles, + exact: true + }, + { + path: '/entgra/devicetypes', + component: DeviceTypes, + exact: true } ] } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.css b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.css index edb16b4c68..7923d0a9fc 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.css +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.css @@ -54,8 +54,11 @@ } .layout .logo-image img { - height: 32px; - margin: 16px; + height: 55px; + margin-top: 5px; + margin-left: 16px; + margin-right: 16px; + margin-bottom: 5px; } @media only screen and (min-width: 760px) { diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js index 9a20fb39a8..0ab9a85619 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js @@ -42,9 +42,11 @@ class Dashboard extends React.Component { mobileWidth }; this.logo = this.props.context.theme.logo; + this.config = this.props.context; } toggle = () => { + console.log(this.config) this.setState({ isNavBarCollapsed: !this.state.isNavBarCollapsed, }); @@ -63,8 +65,7 @@ class Dashboard extends React.Component { >
- logo - Entgra + logo
@@ -85,6 +86,36 @@ class Dashboard extends React.Component { Reports + + + + Groups + + + + + + Users + + + + + + Policies + + + + + + Roles + + + + + + Device Types + + @@ -109,9 +140,8 @@ class Dashboard extends React.Component { title={ - - } - > + {this.config.user} + }> diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js new file mode 100644 index 0000000000..0f3b92aba3 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js @@ -0,0 +1,66 @@ +/* + * 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 +} from "antd"; +import {Link} from "react-router-dom"; +import DeviceTypesTable from "../../../components/DeviceTypes/DeviceTypesTable"; + +const {Paragraph} = Typography; + +class DeviceTypes extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Device Types + +
+

Device Types

+ Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an + illud incorrupte nam. +
+
+ +
+ +
+ +
+
+ ); + } +} + +export default DeviceTypes; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js index f78f1c89f9..7b0eadcc0f 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js @@ -48,7 +48,7 @@ class Devices extends React.Component { Devices
-

Devices

+

Devicessss

Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an illud incorrupte nam.
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js new file mode 100644 index 0000000000..8e3c6390a4 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js @@ -0,0 +1,63 @@ +/* + * 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 +} from "antd"; +import {Link} from "react-router-dom"; +import GroupsTable from "../../../components/Groups/GroupsTable"; + +const {Paragraph} = Typography; + +class Groups extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Groups + +
+

Groups

+ Lorem ipsum dolordd sit amet, est similique constituto at, quot inermis id mel, an + illud incorrupte nam. +
+
+ +
+ +
+ ); + } +} + +export default Groups; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js new file mode 100644 index 0000000000..228468579a --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js @@ -0,0 +1,62 @@ +/* + * 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 +} from "antd"; +import {Link} from "react-router-dom"; + +const {Paragraph} = Typography; + +class Policies extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Policies + +
+

Policies

+ Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an + illud incorrupte nam. +
+
+ +
+ +
+ ); + } +} + +export default Policies; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js new file mode 100644 index 0000000000..39119bbf56 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js @@ -0,0 +1,63 @@ +/* + * 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 +} from "antd"; +import {Link} from "react-router-dom"; +import RolesTable from "../../../components/Roles/RolesTable"; + +const {Paragraph} = Typography; + +class Roles extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Roles + +
+

Roles

+ Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an + illud incorrupte nam. +
+
+ +
+ +
+ ); + } +} + +export default Roles; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js new file mode 100644 index 0000000000..71ebc7112a --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js @@ -0,0 +1,63 @@ +/* + * 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 +} from "antd"; +import {Link} from "react-router-dom"; +import UsersTable from "../../../components/Users/UsersTable"; + +const {Paragraph} = Typography; + +class Users extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Users + +
+

Users

+ Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an + illud incorrupte nam. +
+
+ +
+ +
+ ); + } +} + +export default Users; From 318736bcbf3233c7b83f6aa1df645e095e3662f6 Mon Sep 17 00:00:00 2001 From: shamalka Date: Sun, 20 Oct 2019 00:17:02 +0530 Subject: [PATCH 2/2] Add feature descriptions --- .../src/pages/Dashboard/DeviceTypes/DeviceTypes.js | 3 +-- .../react-app/src/pages/Dashboard/Devices/Devices.js | 5 ++--- .../react-app/src/pages/Dashboard/Groups/Groups.js | 3 +-- .../react-app/src/pages/Dashboard/Policies/Policies.js | 3 +-- .../react-app/src/pages/Dashboard/Roles/Roles.js | 6 ++++-- .../react-app/src/pages/Dashboard/Users/Users.js | 6 ++++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js index 0f3b92aba3..de9625bcc1 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/DeviceTypes/DeviceTypes.js @@ -48,8 +48,7 @@ class DeviceTypes extends React.Component {

Device Types

- Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an - illud incorrupte nam. + All device types for device management.
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js index 7b0eadcc0f..3adf87207c 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Devices/Devices.js @@ -48,9 +48,8 @@ class Devices extends React.Component { Devices
-

Devicessss

- Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an - illud incorrupte nam. +

Devices

+ All enrolled devices
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js index 8e3c6390a4..e17cac8665 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js @@ -48,8 +48,7 @@ class Groups extends React.Component {

Groups

- Lorem ipsum dolordd sit amet, est similique constituto at, quot inermis id mel, an - illud incorrupte nam. + All device groups.
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js index 228468579a..bedaff0b57 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js @@ -47,8 +47,7 @@ class Policies extends React.Component {

Policies

- Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an - illud incorrupte nam. + All policies for device management
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js index 39119bbf56..03a8f5e78f 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js @@ -48,13 +48,15 @@ class Roles extends React.Component {

Roles

- Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an - illud incorrupte nam. + All user roles
+
+ +
); } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js index 71ebc7112a..dcd9a1d0f8 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js @@ -48,13 +48,15 @@ class Users extends React.Component {

Users

- Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an - illud incorrupte nam. + All users for device management.
+
+ +
); }