Improve device delete UI

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;

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(
             <RangePicker
                 ranges={{
-                    'Today': [moment(), moment()],
-                    'Yesterday': [moment()
-                                          .subtract(1, 'days'), moment()
-                                          .subtract(1, 'days')],
-                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
-                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
-                    'This Month': [moment()
-                                           .startOf('month'), moment()
-                                           .endOf('month')],
-                    'Last Month': [moment().subtract(1, 'month')
-                                           .startOf('month'), moment()
-                                           .subtract(1, 'month')
-                                           .endOf('month')]
+                    'Today': [
+                        moment(),
+                        moment()],
+                    'Yesterday': [
+                        moment().subtract(1, 'days'),
+                        moment().subtract(1, 'days')],
+                    'Last 7 Days': [
+                        moment().subtract(6, 'days'),
+                        moment()],
+                    'Last 30 Days': [
+                        moment().subtract(29, 'days'),
+                        moment()],
+                    'This Month': [
+                        moment().startOf('month'),
+                        moment().endOf('month')],
+                    'Last Month': [
+                        moment().subtract(1, 'month').startOf('month'),
+                        moment().subtract(1, 'month').endOf('month')]
                 }}
                 format="YYYY-MM-DD"
                 onChange={this.onChange}

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

@@ -22,7 +22,7 @@ import {
     Typography,
     Breadcrumb,
     Icon,
-    Card
+    Button, Select
 } from "antd";
 import {Link} from "react-router-dom";
 import DeviceTable from "../../../components/Devices/DevicesTable";
@@ -35,7 +35,32 @@ class Devices extends React.Component {
     constructor(props) {
         super(props);
         this.routes = props.routes;
+        this.state = {
+            deselectRequest:false,
+            deleteRequest:false,
+            deleteButtonDisabled:true,
+            displayDeleteButton:'none',
+            selected:"Actions"
+        }
+        this.deleteCall = this.deleteCall.bind(this);
+        this.cancelDelete = this.cancelDelete.bind(this);
+    }
+
+    //This method is used to trigger delete request on selected devices
+    deleteCall = () => {
+        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 {
                         <h3>Devices</h3>
                         <Paragraph>Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an
                             illud incorrupte nam.</Paragraph>
+                        <div style={{paddingBottom:'5px'}}>
+                            <table>
+                                <tbody>
+                                <tr>
+                                    <td>
+                                        <Select
+                                                value={this.state.selected}
+                                                showSearch
+                                                style={{ width: 100 }}
+                                                placeholder="Actions"
+                                                optionFilterProp="children"
+                                                onChange={this.onChange}
+                                                filterOption={(input, option) =>
+                                                        option.props.children
+                                                                .toLowerCase()
+                                                                .indexOf(input.toLowerCase()) >= 0
+                                                }>
+                                            <Select.Option value="delete">Delete</Select.Option>
+                                        </Select>
+                                    </td>
+                                    <td>
+                                        <Button type="primary" icon="delete"
+                                                onClick={this.deleteCall}
+                                                style={{display:this.state.displayDeleteButton}}>
+                                            Delete Selected Devices
+                                        </Button>.
+                                    </td>
+                                    <td>
+                                        <Button type="danger"
+                                                onClick={this.cancelDelete}
+                                                style={{display:this.state.displayDeleteButton}}>
+                                            Cancel
+                                        </Button>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                </PageHeader>
-                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
                     <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
-                        <DeviceTable/>
+                        <DeviceTable
+                                deleteRequest={this.state.deleteRequest}
+                                deselectRequest={this.state.deselectRequest}/>
                     </div>
+                </PageHeader>
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
+
                 </div>
             </div>
         );