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 4964d4d9cb..5b4f49e6ed 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,106 @@ */ 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, + canDelete: 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(); + //This method checks whether NON-REMOVED devices are selected + onDeleteDeviceCall = () => { + let tempDeleteState; + for(let i=0; i < this.props.selectedRows.length; i++){ + if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){ + tempDeleteState = false; + break; + } + tempDeleteState = true; } - } + this.setState({canDelete:tempDeleteState}) + }; - 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.canDelete) { + this.props.deleteDevice(); } + }; + + onConfirmDisenroll = () => { + //TODO: Implement disenrollment function + }; + + onDeviceGroupCall = () => { + this.props.getGroups(); } 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 7a096a2147..fd87a6a7e1 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) => { @@ -135,14 +124,16 @@ 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: [], 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); } }; @@ -173,7 +163,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( @@ -212,26 +202,112 @@ 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( - window.location.origin + config.serverConfig.invoker.uri + + 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(); + } + }).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 delete devices.", + }); + } + + this.setState({loading: false}); + }); + }; + + 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 + - "/admin/devices/permanent-delete", - deviceData, - { headers : {'Content-Type': 'application/json'}} + "/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.fetch(); - const pagination = {...this.state.pagination}; this.setState({ - loading: false, - data: res.data.data.devices, - pagination, - }); + 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 @@ -239,16 +315,43 @@ 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 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}; @@ -267,27 +370,58 @@ 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 (
- (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} + getGroups={this.getGroups} + 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}} + /> + + + + + ); }