From c762c9d2a7a85a459ce9b1f5650ad586963306b1 Mon Sep 17 00:00:00 2001 From: shamalka Date: Tue, 8 Oct 2019 16:08:55 +0530 Subject: [PATCH 1/5] Change bulk action UI --- .../react-app/src/pages/Dashboard/Devices/Devices.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f78f1c89f97..cb244edfecf 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

+

Devicesssdsds

Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an illud incorrupte nam.
From b92046fa3d45912cd77b6ca6f9a8c9f2014a1e5b Mon Sep 17 00:00:00 2001 From: shamalka Date: Tue, 8 Oct 2019 17:27:05 +0530 Subject: [PATCH 2/5] Change UI structure --- .../react-app/src/pages/Dashboard/Devices/Devices.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cb244edfecf..f78f1c89f97 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
-

Devicesssdsds

+

Devices

Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an illud incorrupte nam.
From 5ba56207c995a7d78d728397ee822946b0b62e14 Mon Sep 17 00:00:00 2001 From: shamalka Date: Wed, 9 Oct 2019 17:22:51 +0530 Subject: [PATCH 3/5] Improve delete device UI --- .../src/components/Devices/BulkActionBar.js | 116 +++++++++++------- .../src/components/Devices/DevicesTable.js | 77 ++++++------ 2 files changed, 106 insertions(+), 87 deletions(-) diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js index 4964d4d9cb7..b8076683dae 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js @@ -17,67 +17,91 @@ */ import React from "react"; -import {Button, Icon, notification} from "antd"; +import {Button, Tooltip, Popconfirm, Divider} from "antd"; class BulkActionBar extends React.Component { - constructor(props){ + constructor(props) { super(props); this.state = { - selectedMultiple:false, - selectedSingle:false + selectedMultiple: false, + selectedSingle: false, + deleteable: true, } } //This method is used to trigger delete request on selected devices - deleteDevice = () => { - const deviceStatusArray = this.props.selectedRows.map(obj => obj.enrolmentInfo.status); - if(deviceStatusArray.includes("ACTIVE") || deviceStatusArray.includes("INACTIVE")){ - notification["error"]({ - message: "There was a problem", - duration: 0, - description: - "Cannot delete ACTIVE/INACTIVE devices.", - }); - }else{ - this.props.deleteDevice(); + onDeleteDeviceCall = () => { + let i; + for(i=0; i < this.props.selectedRows.length; i++){ + if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){ + this.setState({deletable:false}); + break; + } + this.setState({deletable:true}); } - } + }; - componentDidUpdate(prevProps, prevState, snapshot) { - if(prevProps.selectedRows !== this.props.selectedRows){ - if(this.props.selectedRows.length > 1){ - this.setState({selectedMultiple:true,selectedSingle:false}) - }else if(this.props.selectedRows.length == 1){ - this.setState({selectedSingle:true,selectedMultiple:true}) - }else{ - this.setState({selectedSingle:false,selectedMultiple:false}) - } + onConfirmDelete = () => { + if (this.state.deletable) { + this.props.deleteDevice(); } - } + }; + + onConfirmDisenroll = () => { + //TODO: Implement disenrollment function + }; render() { - return( -
- + const isSelected = this.props.selectedRows.length > 0; + const isSelectedSingle = this.props.selectedRows.length == 1; + + return ( +
+ + + - -
+
) } } 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 7a096a2147a..ae14f450f20 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 @@ -118,9 +118,9 @@ const columns = [ key: 'action', render: () => ( - - - + + + ), }, @@ -135,7 +135,7 @@ const getTimeAgo = (time) => { class DeviceTable extends React.Component { constructor(props) { super(props); - config = this.props.context; + config = this.props.context; TimeAgo.addLocale(en); this.state = { data: [], @@ -173,7 +173,7 @@ class DeviceTable extends React.Component { }; const encodedExtraParams = Object.keys(extraParams) - .map(key => key + '=' + extraParams[key]).join('&'); + .map(key => key + '=' + extraParams[key]).join('&'); //send request to the invoker axios.get( @@ -216,21 +216,14 @@ class DeviceTable extends React.Component { //send request to the invoker axios.put( - window.location.origin + config.serverConfig.invoker.uri + - config.serverConfig.invoker.deviceMgt + - "/admin/devices/permanent-delete", - deviceData, - { headers : {'Content-Type': 'application/json'}} - + window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/admin/devices/permanent-delete", + deviceData, + {headers: {'Content-Type': 'application/json'}} ).then(res => { if (res.status === 200) { this.fetch(); - 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) { @@ -239,16 +232,16 @@ class DeviceTable extends React.Component { window.location.href = window.location.origin + '/entgra/login'; } else { notification["error"]({ - message: "There was a problem", - duration: 0, - description: - "Error occurred while trying to delete devices.", - }); + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to delete devices.", + }); } this.setState({loading: false}); }); - } + }; handleTableChange = (pagination, filters, sorter) => { const pager = {...this.state.pagination}; @@ -270,24 +263,26 @@ class DeviceTable extends React.Component { return (
- (record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)} - 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}} - /> + deleteDevice={this.deleteDevice} + selectedRows={this.state.selectedRows}/> +
+
(record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)} + 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}} + /> + ); } From c69f9c9f1d8eb10cbdc53e10cbc4a06372e78c0c Mon Sep 17 00:00:00 2001 From: shamalka Date: Wed, 9 Oct 2019 17:57:05 +0530 Subject: [PATCH 4/5] Fix spelling mistakes --- .../src/components/Devices/BulkActionBar.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js index b8076683dae..55fac8e17c1 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js @@ -26,24 +26,24 @@ class BulkActionBar extends React.Component { this.state = { selectedMultiple: false, selectedSingle: false, - deleteable: true, + canDelete: true, } } - //This method is used to trigger delete request on selected devices + //This method checks whether NON-REMOVED devices are selected onDeleteDeviceCall = () => { let i; for(i=0; i < this.props.selectedRows.length; i++){ if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){ - this.setState({deletable:false}); + this.setState({canDelete:false}); break; } - this.setState({deletable:true}); + this.setState({canDelete:true}); } }; onConfirmDelete = () => { - if (this.state.deletable) { + if (this.state.canDelete) { this.props.deleteDevice(); } }; @@ -67,7 +67,7 @@ class BulkActionBar extends React.Component { Date: Thu, 10 Oct 2019 18:04:05 +0530 Subject: [PATCH 5/5] Add devices to groups --- .../src/components/Devices/BulkActionBar.js | 31 +++- .../src/components/Devices/DevicesTable.js | 171 ++++++++++++++++-- 2 files changed, 178 insertions(+), 24 deletions(-) diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js index 55fac8e17c1..5b4f49e6ed5 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js @@ -32,14 +32,15 @@ class BulkActionBar extends React.Component { //This method checks whether NON-REMOVED devices are selected onDeleteDeviceCall = () => { - let i; - for(i=0; i < this.props.selectedRows.length; i++){ + let tempDeleteState; + for(let i=0; i < this.props.selectedRows.length; i++){ if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){ - this.setState({canDelete:false}); + tempDeleteState = false; break; } - this.setState({canDelete:true}); + tempDeleteState = true; } + this.setState({canDelete:tempDeleteState}) }; onConfirmDelete = () => { @@ -52,13 +53,16 @@ class BulkActionBar extends React.Component { //TODO: Implement disenrollment function }; + onDeviceGroupCall = () => { + this.props.getGroups(); + } + render() { const isSelected = this.props.selectedRows.length > 0; const isSelectedSingle = this.props.selectedRows.length == 1; return ( -
+
+ style={{display:isSelectedSingle ? "inline" : "none", margin: "2px"}}/> + + + +
) } 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 ae14f450f20..fd87a6a7e16 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 @@ -18,7 +18,7 @@ import React from "react"; import axios from "axios"; -import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button} from "antd"; +import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button, Modal, Select} from "antd"; import TimeAgo from 'javascript-time-ago' // Load locale-specific relative date/time formatting rules. @@ -112,18 +112,7 @@ const columns = [ return {timeAgoString}; } // todo add filtering options - }, - { - title: 'Action', - key: 'action', - render: () => ( - - - - - - ), - }, + } ]; const getTimeAgo = (time) => { @@ -142,7 +131,9 @@ class DeviceTable extends React.Component { pagination: {}, loading: false, selectedRows: [], - deviceIds: [] + deviceGroups: [], + groupModalVisible: false, + selectedGroupId: [] }; } @@ -151,7 +142,6 @@ class DeviceTable extends React.Component { this.setState({ selectedRows: selectedRows }); - this.state.deviceIds = selectedRows.map(obj => obj.deviceIdentifier); } }; @@ -212,7 +202,7 @@ class DeviceTable extends React.Component { const config = this.props.context; this.setState({loading: true}); - const deviceData = this.state.deviceIds; + const deviceData = this.state.selectedRows.map(obj => obj.deviceIdentifier); //send request to the invoker axios.put( @@ -243,6 +233,126 @@ class DeviceTable extends React.Component { }); }; + addDevicesToGroup = (groupId) => { + const config = this.props.context; + this.setState({loading: true}); + + let apiUrl; + let deviceData; + if (this.state.selectedRows.length === 1) { + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/groups/device/assign"; + deviceData = { + deviceIdentifier: { + id: this.state.selectedRows[0].deviceIdentifier, + type: this.state.selectedRows[0].type + }, + deviceGroupIds: groupId + } + } else if (!groupId[0]){ + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/groups/id/" + groupId + "/devices/add"; + deviceData = this.state.selectedRows.map(obj => ({id: obj.deviceIdentifier, type: obj.type})); + } else{ + apiUrl = window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/groups/id/" + groupId[0] + "/devices/add"; + deviceData = this.state.selectedRows.map(obj => ({id: obj.deviceIdentifier, type: obj.type})); + } + + //send request to the invoker + axios.post( + apiUrl, + deviceData, + {headers: {'Content-Type': 'application/json'}} + ).then(res => { + if (res.status === 200) { + this.setState({ + loading: false + }); + notification["success"]({ + message: "Done", + duration: 4, + description: + "Successfully added to the device group.", + }); + } + }).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 adding to the device group.", + }); + } + + this.setState({loading: false}); + }); + }; + + getGroups = () => { + this.setState({ + groupModalVisible: true + }); + //send request to the invoker + axios.get( + window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/groups" + ).then(res => { + this.setState({deviceGroups: res.data.data.deviceGroups}) + }).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 retrieving device groups.", + }); + } + + this.setState({loading: false}); + }); + }; + + handleOk = e => { + if(this.state.selectedGroupId){ + this.addDevicesToGroup(this.state.selectedGroupId); + this.setState({ + groupModalVisible: false + }); + }else{ + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Please select a group.", + }); + } + + }; + + handleCancel = e => { + this.setState({ + groupModalVisible: false, + }); + }; + + onGroupSelectChange = (value) => { + this.setState({selectedGroupId: value}); + }; + handleTableChange = (pagination, filters, sorter) => { const pager = {...this.state.pagination}; pager.current = pagination.current; @@ -260,10 +370,20 @@ class DeviceTable extends React.Component { render() { const {data, pagination, loading, selectedRows} = this.state; + + const isSelectedSingle = this.state.selectedRows.length == 1; + + let item = this.state.deviceGroups.map((data) => + + {data.name} + ); return (
+ + + + ); }