rajitha
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Bulk actions UI

See merge request entgra/carbon-device-mgt!299
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
parent 7f1f62bdc5 e068317a62
commit f0d8f4d023
2 changed files with 271 additions and 98 deletions
Show Stats Download Patch File Download Diff File

131
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js vendored
Unescape View File

@ -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(
<div style={{padding:'5px'}}>
<Button
type="normal"
icon="delete"
size={'default'}
onClick={this.deleteDevice}
style={
{display:this.state.selectedMultiple ? "inline" : "none"}
}>Delete
</Button>
const isSelected = this.props.selectedRows.length > 0;
const isSelectedSingle = this.props.selectedRows.length == 1;
return (
<div style={{display: isSelected ? "inline" : "none", padding: '11px'}}>
<Tooltip
placement="bottom"
title={"Delete Device"}
autoAdjustOverflow={true}>
<Popconfirm
placement="topLeft"
title={
this.state.canDelete ?
"Are you sure you want to delete?" : "You can only delete disenrolled devices"}
onConfirm={this.onConfirmDelete}
okText="Ok"
cancelText="Cancel">
<Button
type="link"
shape="circle"
icon="delete"
size={'default'}
onClick={this.onDeleteDeviceCall}
disabled={isSelected ? false : true}
style={{margin: "2px"}}/>
</Popconfirm>
</Tooltip>
<Divider type="vertical"/>
<Tooltip placement="bottom" title={"Disenroll Device"}>
<Popconfirm
placement="topLeft"
title={"Are you sure?"}
onConfirm={this.onConfirmDisenroll}
okText="Ok"
disabled={isSelectedSingle ? false : true}
cancelText="Cancel">
<Button
type="link"
shape="circle"
icon="close"
size={'default'}
style={{display:isSelectedSingle ? "inline" : "none", margin: "2px"}}/>
</Popconfirm>
</Tooltip>
<Divider type="vertical" style={{display:isSelectedSingle ? "inline-block" : "none"}}/>
<Tooltip placement="bottom" title={"Add to group"}>
<Button
type="link"
shape="circle"
icon="deployment-unit"
size={'default'}
onClick={this.onDeviceGroupCall}
style={{margin: "2px"}}/>
<Button
type="normal"
icon="delete"
size={'default'}
style={
{display:this.state.selectedSingle ? "inline" : "none"}
}>Disenroll
</Button>
</div>
</Tooltip>
</div>
)
}
}

238
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js vendored
Unescape View File

@ -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 <Tooltip title={new Date(dateOfLastUpdate).toString()}>{timeAgoString}</Tooltip>;
}
// todo add filtering options
},
{
title: 'Action',
key: 'action',
render: () => (
<span>
<a><Icon type="edit" /></a>
<Divider type="vertical" />
<a><Text type="danger"><Icon type="delete" /></Text></a>
</span>
),
},
}
];
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) =>
<Select.Option
value={data.id}
key={data.id}>
{data.name}
</Select.Option>);
return (
<div>
<BulkActionBar
deleteDevice={this.deleteDevice}
selectedRows={this.state.selectedRows}/>
<Table
columns={columns}
rowKey={record => (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}/>
<div>
<Table
columns={columns}
rowKey={record => (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}}
/>
</div>
<Modal
title="Grouping Devices"
width="350px"
visible={this.state.groupModalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Select
mode={isSelectedSingle ? "multiple" : "default"}
showSearch
style={{width: 200}}
placeholder="Select Group"
optionFilterProp="children"
onChange={this.onGroupSelectChange}
>
{item}
</Select>
</Modal>
</div>
);
}

Write Preview
Loading…
Cancel
Save