From 795edd4c66afc129aab4f76efd747b525b9ba02f Mon Sep 17 00:00:00 2001 From: shamalka Date: Sat, 5 Oct 2019 23:13:34 +0530 Subject: [PATCH 1/2] Improve device delete UI --- .../src/components/Devices/DevicesTable.js | 70 ++++++++++++++++-- .../src/components/Reports/DateRangePicker.js | 31 ++++---- .../src/pages/Dashboard/Devices/Devices.js | 74 ++++++++++++++++++- 3 files changed, 152 insertions(+), 23 deletions(-) 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 41301c1d89..b7f43905ca 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} from "antd"; +import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button} from "antd"; import TimeAgo from 'javascript-time-ago' // Load locale-specific relative date/time formatting rules. @@ -140,16 +140,18 @@ class DeviceTable extends React.Component { data: [], pagination: {}, loading: false, - selectedRows: [] + selectedRows: [], + deviceIds: [] }; } rowSelection = { onChange: (selectedRowKeys, selectedRows) => { - // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); this.setState({ selectedRows: selectedRows - }) + }); + this.state.deviceIds = selectedRows.map(obj => obj.deviceIdentifier); } }; @@ -157,6 +159,17 @@ class DeviceTable extends React.Component { this.fetch(); } + componentDidUpdate(prevProps, prevState, snapshot) { + if(prevProps.deleteRequest !== this.props.deleteRequest){ + this.deleteDevice(); + } + if(prevProps.deselectRequest !== this.props.deselectRequest){ + this.rowSelection.getCheckboxProps = record => ({ + disabled: record.enrolmentInfo.status !== 'REMOVED' // Column configuration not to be checked + }) + } + } + //fetch data from api fetch = (params = {}) => { const config = this.props.context; @@ -170,11 +183,13 @@ class DeviceTable extends React.Component { requireDeviceInfo: true, }; - const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&'); + 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 + + window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + "/devices?" + encodedExtraParams, ).then(res => { if (res.status === 200) { @@ -204,6 +219,49 @@ class DeviceTable extends React.Component { }); }; + deleteDevice = () => { + const config = this.props.context; + this.setState({loading: true}); + + const deviceData = JSON.stringify(this.state.deviceIds); + + //send request to the invoker + axios.delete( + window.location.origin + config.serverConfig.invoker.uri + + config.serverConfig.invoker.deviceMgt + + "/admin/devices/permanent-delete", + { + headers:{'Content-Type': 'application/json; charset=utf-8'} , + data: deviceData + }, + ).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; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Reports/DateRangePicker.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Reports/DateRangePicker.js index c41c0c86e5..dde40a35b6 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Reports/DateRangePicker.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Reports/DateRangePicker.js @@ -36,19 +36,24 @@ class DateRangePicker extends React.Component { return( { + this.setState({deleteRequest:!this.state.deleteRequest}); + } + + //This method is used to cancel deletion + cancelDelete = () => { + this.setState({displayDeleteButton:'none' , deleteRequest:false}) + } + //When delete action is selected, this method is called and devices which aren't in REMOVED state becomes unselectable + onChange = value => { + this.setState( + {displayDeleteButton:'inline' , deselectRequest:!this.state.deselectRequest + }); } render() { @@ -52,12 +77,53 @@ class Devices extends React.Component {

Devices

Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an illud incorrupte nam. +
+ + + + + + + + +
+ + + . + + +
+
- -
- +
+ +
+
); From d43971b1b8297695b47b1df8f365807cc72fa96f Mon Sep 17 00:00:00 2001 From: shamalka Date: Sat, 5 Oct 2019 23:26:19 +0530 Subject: [PATCH 2/2] Remove unnecessary comments --- .../react-app/src/components/Devices/DevicesTable.js | 1 - 1 file changed, 1 deletion(-) 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 b7f43905ca..d9caa0a984 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 @@ -147,7 +147,6 @@ class DeviceTable extends React.Component { rowSelection = { onChange: (selectedRowKeys, selectedRows) => { - // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); this.setState({ selectedRows: selectedRows });