Merge branch 'application-mgt-new' into 'application-mgt-new'

Device delete frontend

See merge request entgra/carbon-device-mgt!279
merge-requests/281/head^2
Dharmakeerthi Lasantha 5 years ago
commit 3e1692510f

@ -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,17 @@ class DeviceTable extends React.Component {
data: [],
pagination: {},
loading: false,
selectedRows: []
selectedRows: [],
deviceIds: []
};
}
rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({
selectedRows: selectedRows
})
});
this.state.deviceIds = selectedRows.map(obj => obj.deviceIdentifier);
}
};
@ -157,6 +158,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 +182,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 +218,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;

@ -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}

@ -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>
);

Loading…
Cancel
Save