Add devices to groups

feature/appm-store/pbac
shamalka 5 years ago
parent c69f9c9f1d
commit e068317a62

@ -32,14 +32,15 @@ class BulkActionBar extends React.Component {
//This method checks whether NON-REMOVED devices are selected //This method checks whether NON-REMOVED devices are selected
onDeleteDeviceCall = () => { onDeleteDeviceCall = () => {
let i; let tempDeleteState;
for(i=0; i < this.props.selectedRows.length; i++){ for(let i=0; i < this.props.selectedRows.length; i++){
if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){ if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){
this.setState({canDelete:false}); tempDeleteState = false;
break; break;
} }
this.setState({canDelete:true}); tempDeleteState = true;
} }
this.setState({canDelete:tempDeleteState})
}; };
onConfirmDelete = () => { onConfirmDelete = () => {
@ -52,13 +53,16 @@ class BulkActionBar extends React.Component {
//TODO: Implement disenrollment function //TODO: Implement disenrollment function
}; };
onDeviceGroupCall = () => {
this.props.getGroups();
}
render() { render() {
const isSelected = this.props.selectedRows.length > 0; const isSelected = this.props.selectedRows.length > 0;
const isSelectedSingle = this.props.selectedRows.length == 1; const isSelectedSingle = this.props.selectedRows.length == 1;
return ( return (
<div <div style={{display: isSelected ? "inline" : "none", padding: '11px'}}>
style={{display: isSelected ? "inline" : "none", padding: '11px'}}>
<Tooltip <Tooltip
placement="bottom" placement="bottom"
@ -97,10 +101,21 @@ class BulkActionBar extends React.Component {
shape="circle" shape="circle"
icon="close" icon="close"
size={'default'} size={'default'}
disabled={isSelectedSingle ? false : true} style={{display:isSelectedSingle ? "inline" : "none", margin: "2px"}}/>
style={{margin: "2px"}}/>
</Popconfirm> </Popconfirm>
</Tooltip> </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"}}/>
</Tooltip>
</div> </div>
) )
} }

@ -18,7 +18,7 @@
import React from "react"; import React from "react";
import axios from "axios"; 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' import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
@ -112,18 +112,7 @@ const columns = [
return <Tooltip title={new Date(dateOfLastUpdate).toString()}>{timeAgoString}</Tooltip>; return <Tooltip title={new Date(dateOfLastUpdate).toString()}>{timeAgoString}</Tooltip>;
} }
// todo add filtering options // 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) => { const getTimeAgo = (time) => {
@ -142,7 +131,9 @@ class DeviceTable extends React.Component {
pagination: {}, pagination: {},
loading: false, loading: false,
selectedRows: [], selectedRows: [],
deviceIds: [] deviceGroups: [],
groupModalVisible: false,
selectedGroupId: []
}; };
} }
@ -151,7 +142,6 @@ class DeviceTable extends React.Component {
this.setState({ this.setState({
selectedRows: selectedRows selectedRows: selectedRows
}); });
this.state.deviceIds = selectedRows.map(obj => obj.deviceIdentifier);
} }
}; };
@ -212,7 +202,7 @@ class DeviceTable extends React.Component {
const config = this.props.context; const config = this.props.context;
this.setState({loading: true}); this.setState({loading: true});
const deviceData = this.state.deviceIds; const deviceData = this.state.selectedRows.map(obj => obj.deviceIdentifier);
//send request to the invoker //send request to the invoker
axios.put( axios.put(
@ -243,6 +233,126 @@ class DeviceTable extends React.Component {
}); });
}; };
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 +
"/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.setState({
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
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 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) => { handleTableChange = (pagination, filters, sorter) => {
const pager = {...this.state.pagination}; const pager = {...this.state.pagination};
pager.current = pagination.current; pager.current = pagination.current;
@ -260,10 +370,20 @@ class DeviceTable extends React.Component {
render() { render() {
const {data, pagination, loading, selectedRows} = this.state; 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 ( return (
<div> <div>
<BulkActionBar <BulkActionBar
deleteDevice={this.deleteDevice} deleteDevice={this.deleteDevice}
getGroups={this.getGroups}
selectedRows={this.state.selectedRows}/> selectedRows={this.state.selectedRows}/>
<div> <div>
<Table <Table
@ -283,6 +403,25 @@ class DeviceTable extends React.Component {
scroll={{x: 1000}} scroll={{x: 1000}}
/> />
</div> </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> </div>
); );
} }

Loading…
Cancel
Save