From 238b457d88e187b9c234d1b378627642aeb5c279 Mon Sep 17 00:00:00 2001 From: Kaveesha Date: Wed, 8 Apr 2020 15:17:48 +0530 Subject: [PATCH] Add compnent to view devices locations --- .../react-app/src/index.js | 6 + .../react-app/src/scenes/Home/index.js | 6 + .../Component/DeviceLocationMap/index.js | 254 ++++++++++++++++++ .../DeviceLocationMap/pin_shadow.svg | 1 + .../Component/DeviceLocationMap/pin_start.svg | 1 + .../Home/scenes/DeviceLocations/index.js | 39 +++ 6 files changed, 307 insertions(+) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/index.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_shadow.svg create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_start.svg create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/index.js 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 b2f485e77b5..04a9b4b2b42 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 @@ -36,6 +36,7 @@ import Certificates from './scenes/Home/scenes/Configurations/scenes/Certificate import Devices from './scenes/Home/scenes/Devices'; import ViewPolicy from './scenes/Home/scenes/Policies/scenes/ViewPolicy'; import EditSelectedPolicy from './scenes/Home/scenes/Policies/scenes/EditSelectedPolicy'; +import DeviceLocations from './scenes/Home/scenes/DeviceLocations'; const routes = [ { @@ -113,6 +114,11 @@ const routes = [ component: Notifications, exact: true, }, + { + path: '/entgra/device-locations', + component: DeviceLocations, + exact: true, + }, ], }, ]; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/index.js index 9dfb1b4e7a2..01309ccad8f 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/index.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/index.js @@ -150,6 +150,12 @@ class Home extends React.Component { + + + + Device Location + + Notifications diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/index.js new file mode 100644 index 00000000000..20cb9fd0f93 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/index.js @@ -0,0 +1,254 @@ +/* + * Copyright (c) 2020, 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, { Component } from 'react'; +import { Map, TileLayer, Marker, Popup, CircleMarker } from 'react-leaflet'; +import L from 'leaflet'; +import { withConfigContext } from '../../../../../../components/ConfigContext'; +import axios from 'axios'; +import { message, notification } from 'antd'; + +// const { Title, Text } = Typography; + +// Icons for the location markers +const pinStart = new L.Icon({ + iconUrl: require('./pin_start.svg'), + iconRetinaUrl: require('./pin_start.svg'), + shadowUrl: require('./pin_shadow.svg'), + shadowSize: new L.Point(51, 51), + shadowAnchor: [22, 22], + popupAnchor: [0, -22], + iconSize: new L.Point(50, 50), + tooltipAnchor: [0, -22], +}); + +class DeviceLocationMap extends Component { + constructor(props) { + super(props); + this.config = this.props.context; + this.customMap = React.createRef(); + this.state = { + defaultZoomLevel: 3, + locations: [], + deviceData: {}, + minLatitute: -37.43997405227057, + maxLatitute: 37.43997405227057, + minLongtitute: -151.171875, + maxLongtitute: 151.34765625, + zoomLevel: 3, + deviceName: null, + isPopup: false, + }; + } + + componentDidMount() { + this.getDeviceLocations( + -37.43997405227057, + 37.43997405227057, + -151.171875, + 151.34765625, + 3, + ); + } + + getDeviceLocations = ( + minLatitute, + maxLatitute, + minLongtitute, + maxLongtitute, + zoomLevel, + ) => { + axios + .get( + window.location.origin + + this.config.serverConfig.invoker.uri + + this.config.serverConfig.invoker.deviceMgt + + '/geo-services/1.0.0/stats' + + '/device-locations?' + + 'minLat=' + + minLatitute + + '&maxLat=' + + maxLatitute + + '&minLong=' + + minLongtitute + + '&maxLong=' + + maxLongtitute + + '&zoom=' + + zoomLevel, + ) + .then(res => { + if (res.status === 200) { + // console.log(JSON.parse(res.data.data)); + this.setState({ + locations: JSON.parse(res.data.data), + }); + } + }) + .catch(error => { + if (error.hasOwnProperty('response') && error.response.status === 401) { + 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 fetch locations......', + }); + } + }); + }; + + setMarkers = positions => { + let markers = []; + positions.map(location => { + if (location.count > 1) { + markers.push( + + {location.count} + , + ); + } else { + markers.push( + + + {/* {this.getPopupData(*/} + {/* // location.deviceType, // location.deviceIdentification, // )}*/} + {/* {this.state.deviceData.name}*/} + {this.state.deviceName} + + , + ); + } + }); + + return ( +
+ {markers.map(markker => { + return markker; + })} +
+ ); + }; + + mouseOut = () => { + this.setState({ + isPopup: false, + }); + }; + + // todo get device details when mouse over the maker + mouseOver = (deviceType, deviceIdentification) => { + // let aaa = null; + // axios + // .get( + // window.location.origin + + // this.config.serverConfig.invoker.uri + + // this.config.serverConfig.invoker.deviceMgt + + // `/devices/1.0.0/${deviceType}/${deviceIdentification}`, + // ) + // .then(res => { + // if (res.status === 200) { + // // console.log(res.data.data); + // this.setState({ + // deviceData: res.data.data, + // isPopup: true, + // }); + // // aaa = res.data.data; + // // return ( + // //
+ // // {aaa.name} + // // + // // Type : {aaa.type} + // // + // // + // // Status : {aaa.enrolmentInfo.status} + // // + // // + // // Owner : {aaa.enrolmentInfo.owner} + // // + // //
+ // // ); + // } + // }) + // .catch(error => { + // if (error.hasOwnProperty('response') && error.response.status === 401) { + // 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 fetch locations......', + // }); + // } + // }); + }; + + // Todo : get bound and zoom level when doing movement and pass id to getDeviceLocations function + handleMovements = event => { + console.log(this.customMap.current.leafletElement.getZoom()); + }; + + render() { + const position = [this.state.lat, this.state.lng]; + const attribution = this.config.geoMap.attribution; + const url = this.config.geoMap.url; + return ( +
+ + + {this.setMarkers(this.state.locations)} + +
+ ); + } +} + +export default withConfigContext(DeviceLocationMap); diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_shadow.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_shadow.svg new file mode 100644 index 00000000000..ea27ab26a46 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_shadow.svg @@ -0,0 +1 @@ +map \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_start.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_start.svg new file mode 100644 index 00000000000..3a51859bfdf --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/Component/DeviceLocationMap/pin_start.svg @@ -0,0 +1 @@ +map \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/index.js new file mode 100644 index 00000000000..9cacbd879a6 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/DeviceLocations/index.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Breadcrumb, PageHeader } from 'antd'; +import DeviceLocationMap from './Component/DeviceLocationMap'; + +class DeviceLocations extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + Devices Location + +
+

Devices Location

+
+ +
+ +
+
+ ); + } +} + +export default DeviceLocations;