forked from community/device-mgt-core
Add group devices view to devicemgt react app See merge request entgra/carbon-device-mgt!447feature/appm-store/pbac
Dharmakeerthi Lasantha
5 years ago
commit
c1bb3afc1f
@ -0,0 +1,137 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||||
|
* Version 2.0 (the "License"); you may not use this file except
|
||||||
|
* in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Button, Modal } from 'antd';
|
||||||
|
import TimeAgo from 'javascript-time-ago';
|
||||||
|
// Load locale-specific relative date/time formatting rules.
|
||||||
|
import en from 'javascript-time-ago/locale/en';
|
||||||
|
import { withConfigContext } from '../../context/ConfigContext';
|
||||||
|
|
||||||
|
import ReportDevicesTable from '../Reports/Widgets/ReportDevicesTable';
|
||||||
|
|
||||||
|
let apiUrl;
|
||||||
|
|
||||||
|
class GroupDevicesModal extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
TimeAgo.addLocale(en);
|
||||||
|
this.state = {
|
||||||
|
data: [],
|
||||||
|
pagination: {},
|
||||||
|
loading: false,
|
||||||
|
selectedRows: [],
|
||||||
|
visible: false,
|
||||||
|
apiUrl: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
openDrawer = () => {
|
||||||
|
this.setState({ visible: true });
|
||||||
|
const groupData = {
|
||||||
|
groupId: this.props.groupData.id,
|
||||||
|
groupName: this.props.groupData.name,
|
||||||
|
};
|
||||||
|
this.fetchGroupDevices(groupData);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleModalCancel = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// fetch data from api
|
||||||
|
fetchGroupDevices = (params = {}, filters = {}) => {
|
||||||
|
const config = this.props.context;
|
||||||
|
|
||||||
|
// get current page
|
||||||
|
const currentPage = params.hasOwnProperty('page') ? params.page : 1;
|
||||||
|
|
||||||
|
const extraParams = {
|
||||||
|
offset: 10 * (currentPage - 1), // calculate the offset
|
||||||
|
limit: 10,
|
||||||
|
...params,
|
||||||
|
};
|
||||||
|
|
||||||
|
const encodedExtraParams = Object.keys(extraParams)
|
||||||
|
.map(key => key + '=' + extraParams[key])
|
||||||
|
.join('&');
|
||||||
|
|
||||||
|
apiUrl =
|
||||||
|
window.location.origin +
|
||||||
|
config.serverConfig.invoker.uri +
|
||||||
|
config.serverConfig.invoker.deviceMgt +
|
||||||
|
'/devices?' +
|
||||||
|
encodedExtraParams;
|
||||||
|
|
||||||
|
this.setState({ apiUrl: apiUrl });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleTableChange = (pagination, filters, sorter) => {
|
||||||
|
const pager = { ...this.state.pagination };
|
||||||
|
pager.current = pagination.current;
|
||||||
|
this.setState({
|
||||||
|
pagination: pager,
|
||||||
|
});
|
||||||
|
this.fetchGroupDevices({
|
||||||
|
results: pagination.pageSize,
|
||||||
|
page: pagination.current,
|
||||||
|
sortField: sorter.field,
|
||||||
|
sortOrder: sorter.order,
|
||||||
|
...filters,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { apiUrl, visible } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
size={'small'}
|
||||||
|
icon="desktop"
|
||||||
|
onClick={this.openDrawer}
|
||||||
|
>
|
||||||
|
Devices
|
||||||
|
</Button>
|
||||||
|
<Modal
|
||||||
|
title="DEVICES"
|
||||||
|
width="80%"
|
||||||
|
visible={visible}
|
||||||
|
onCancel={this.handleModalCancel}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.handleModalCancel}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="ok" type="primary" onClick={this.handleModalCancel}>
|
||||||
|
OK
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<div style={{ alignItems: 'center' }}>
|
||||||
|
<ReportDevicesTable apiUrl={apiUrl} />
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(GroupDevicesModal);
|
||||||
Loading…
Reference in new issue