|
|
@ -18,16 +18,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import React from 'react';
|
|
|
|
import moment from 'moment';
|
|
|
|
import moment from 'moment';
|
|
|
|
import {
|
|
|
|
import { message, notification, Empty, DatePicker } from 'antd';
|
|
|
|
Button,
|
|
|
|
|
|
|
|
Select,
|
|
|
|
|
|
|
|
message,
|
|
|
|
|
|
|
|
notification,
|
|
|
|
|
|
|
|
Tag,
|
|
|
|
|
|
|
|
Tooltip,
|
|
|
|
|
|
|
|
Empty,
|
|
|
|
|
|
|
|
DatePicker,
|
|
|
|
|
|
|
|
} from 'antd';
|
|
|
|
|
|
|
|
import axios from 'axios';
|
|
|
|
import axios from 'axios';
|
|
|
|
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
|
|
|
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
|
|
|
import GeoCustomMap from '../CustomMap';
|
|
|
|
import GeoCustomMap from '../CustomMap';
|
|
|
@ -53,7 +44,7 @@ class GeoDashboard extends React.Component {
|
|
|
|
this.state = {
|
|
|
|
this.state = {
|
|
|
|
deviceData: [],
|
|
|
|
deviceData: [],
|
|
|
|
selectedDevice: '',
|
|
|
|
selectedDevice: '',
|
|
|
|
locationData: [],
|
|
|
|
locationHistorySnapshots: [],
|
|
|
|
loading: false,
|
|
|
|
loading: false,
|
|
|
|
start: start,
|
|
|
|
start: start,
|
|
|
|
end: end,
|
|
|
|
end: end,
|
|
|
@ -62,32 +53,23 @@ class GeoDashboard extends React.Component {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
componentDidMount() {
|
|
|
|
this.fetchDevices();
|
|
|
|
this.fetchLocationHistory();
|
|
|
|
// this.fetchCurrentLocation();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* Call back on apply button in the date time picker
|
|
|
|
* Call back on apply button in the date time picker
|
|
|
|
* @param startDate - start date
|
|
|
|
* @param startDate - start date
|
|
|
|
* @param endDate - end date
|
|
|
|
* @param endDate - end date
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
applyCallback = (dates, dateStrings) => {
|
|
|
|
applyCallback = (dates, dateStrings) => {
|
|
|
|
console.log('Apply Callback');
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
this.setState({
|
|
|
|
start: dateStrings[0],
|
|
|
|
start: dateStrings[0],
|
|
|
|
end: dateStrings[1],
|
|
|
|
end: dateStrings[1],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
fetchLocationHistory = () => {
|
|
|
|
* Api call handle on fetch location date button
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
handleApiCall = () => {
|
|
|
|
|
|
|
|
if (this.state.selectedDevice && this.state.start && this.state.end) {
|
|
|
|
|
|
|
|
const toInMills = moment(this.state.end);
|
|
|
|
const toInMills = moment(this.state.end);
|
|
|
|
const fromInMills = moment(this.state.start);
|
|
|
|
const fromInMills = moment(this.state.start);
|
|
|
|
const deviceType = this.state.selectedDevice.type;
|
|
|
|
|
|
|
|
const deviceId = this.state.selectedDevice.deviceIdentifier;
|
|
|
|
|
|
|
|
const config = this.props.context;
|
|
|
|
const config = this.props.context;
|
|
|
|
this.setState({ loading: true });
|
|
|
|
this.setState({ loading: true });
|
|
|
|
|
|
|
|
|
|
|
@ -97,9 +79,9 @@ class GeoDashboard extends React.Component {
|
|
|
|
config.serverConfig.invoker.uri +
|
|
|
|
config.serverConfig.invoker.uri +
|
|
|
|
config.serverConfig.invoker.deviceMgt +
|
|
|
|
config.serverConfig.invoker.deviceMgt +
|
|
|
|
'/devices/' +
|
|
|
|
'/devices/' +
|
|
|
|
deviceType +
|
|
|
|
this.props.deviceType +
|
|
|
|
'/' +
|
|
|
|
'/' +
|
|
|
|
deviceId +
|
|
|
|
this.props.deviceIdentifier +
|
|
|
|
'/location-history?' +
|
|
|
|
'/location-history?' +
|
|
|
|
'from=' +
|
|
|
|
'from=' +
|
|
|
|
fromInMills +
|
|
|
|
fromInMills +
|
|
|
@ -108,89 +90,9 @@ class GeoDashboard extends React.Component {
|
|
|
|
)
|
|
|
|
)
|
|
|
|
.then(res => {
|
|
|
|
.then(res => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
if (res.status === 200) {
|
|
|
|
const locationData = JSON.parse(res.data.data);
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
this.setState({
|
|
|
|
loading: false,
|
|
|
|
loading: false,
|
|
|
|
locationData,
|
|
|
|
locationHistorySnapshots: res.data.data.locationHistorySnapshots,
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
error.hasOwnProperty('response') &&
|
|
|
|
|
|
|
|
error.response.status === 401
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
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 fetch locations......',
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.setState({ loading: false });
|
|
|
|
|
|
|
|
console.log(error);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
notification.error({
|
|
|
|
|
|
|
|
message: 'There was a problem',
|
|
|
|
|
|
|
|
duration: 0,
|
|
|
|
|
|
|
|
description: 'Please provide a date range and a device.',
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* Device dropdown list handler
|
|
|
|
|
|
|
|
* @param e - selected device data
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
handleDeviceList = e => {
|
|
|
|
|
|
|
|
let selectedDevice = this.state.deviceData[e];
|
|
|
|
|
|
|
|
this.setState({ selectedDevice });
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* render fetch location button
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
fetchLocationButton = () => {
|
|
|
|
|
|
|
|
let flag;
|
|
|
|
|
|
|
|
let toolTip = '';
|
|
|
|
|
|
|
|
if (this.state.selectedDevice === '') {
|
|
|
|
|
|
|
|
flag = true;
|
|
|
|
|
|
|
|
toolTip = 'Please select a Device';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<Tooltip placement="rightBottom" title={toolTip}>
|
|
|
|
|
|
|
|
<Button disabled={flag} onClick={this.handleApiCall}>
|
|
|
|
|
|
|
|
Fetch Locations
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* fetches device data to populate the dropdown list
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
fetchDevices = () => {
|
|
|
|
|
|
|
|
const config = this.props.context;
|
|
|
|
|
|
|
|
this.setState({ loading: true });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
axios
|
|
|
|
|
|
|
|
.get(
|
|
|
|
|
|
|
|
window.location.origin +
|
|
|
|
|
|
|
|
config.serverConfig.invoker.uri +
|
|
|
|
|
|
|
|
config.serverConfig.invoker.deviceMgt +
|
|
|
|
|
|
|
|
'/devices?status=ACTIVE&status=INACTIVE&status=UNCLAIMED&status=UNREACHABLE&status=SUSPENDED&' +
|
|
|
|
|
|
|
|
'status=DISENROLLMENT_REQUESTED&status=BLOCKED&status=CREATED',
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
|
|
if (res.status === 200) {
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
|
|
deviceData: res.data.data.devices,
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
@ -202,11 +104,12 @@ class GeoDashboard extends React.Component {
|
|
|
|
notification.error({
|
|
|
|
notification.error({
|
|
|
|
message: 'There was a problem',
|
|
|
|
message: 'There was a problem',
|
|
|
|
duration: 0,
|
|
|
|
duration: 0,
|
|
|
|
description: 'Error occurred while trying to load devices.',
|
|
|
|
description: 'Error occurred while trying to fetch locations......',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.setState({ loading: false });
|
|
|
|
this.setState({ loading: false });
|
|
|
|
|
|
|
|
console.log(error);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -235,76 +138,29 @@ class GeoDashboard extends React.Component {
|
|
|
|
'1 Month': [moment(start).subtract(1, 'months'), moment(end)],
|
|
|
|
'1 Month': [moment(start).subtract(1, 'months'), moment(end)],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
let { deviceData } = this.state;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="controllerDiv">
|
|
|
|
<div className="controllerDiv">
|
|
|
|
<RangePicker
|
|
|
|
<RangePicker
|
|
|
|
ranges={ranges}
|
|
|
|
ranges={ranges}
|
|
|
|
style={{ marginRight: 20 }}
|
|
|
|
style={{ marginRight: 20, width: 400 }}
|
|
|
|
showTime
|
|
|
|
showTime
|
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
defaultValue={[this.state.start, this.state.end]}
|
|
|
|
defaultValue={[this.state.start, this.state.end]}
|
|
|
|
onChange={this.applyCallback}
|
|
|
|
onChange={this.applyCallback}
|
|
|
|
|
|
|
|
onOk={this.fetchLocationHistory}
|
|
|
|
|
|
|
|
size="large"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<Select
|
|
|
|
|
|
|
|
showSearch
|
|
|
|
|
|
|
|
style={{ width: 220, marginRight: 20 }}
|
|
|
|
|
|
|
|
placeholder="Select a Device"
|
|
|
|
|
|
|
|
optionFilterProp="children"
|
|
|
|
|
|
|
|
onChange={this.handleDeviceList}
|
|
|
|
|
|
|
|
filterOption={(input, option) =>
|
|
|
|
|
|
|
|
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
|
|
|
|
|
|
|
|
0
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{deviceData.map((device, index) => (
|
|
|
|
|
|
|
|
<Select.Option key={index} value={index}>
|
|
|
|
|
|
|
|
{device.name + ' '}
|
|
|
|
|
|
|
|
{this.statusTag(device)}
|
|
|
|
|
|
|
|
</Select.Option>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</Select>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{this.fetchLocationButton()}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* Creates color based tags on device status
|
|
|
|
|
|
|
|
* @param device - device object
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
statusTag = device => {
|
|
|
|
|
|
|
|
const status = device.enrolmentInfo.status.toLowerCase();
|
|
|
|
|
|
|
|
let color = '#f9ca24';
|
|
|
|
|
|
|
|
switch (status) {
|
|
|
|
|
|
|
|
case 'active':
|
|
|
|
|
|
|
|
color = '#badc58';
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'created':
|
|
|
|
|
|
|
|
color = '#6ab04c';
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'inactive':
|
|
|
|
|
|
|
|
color = '#f9ca24';
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'blocked':
|
|
|
|
|
|
|
|
color = '#636e72';
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return <Tag color={color}>{status}</Tag>;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const locationData = [...this.state.locationData];
|
|
|
|
const { locationHistorySnapshots } = this.state;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="container">
|
|
|
|
<div className="container">
|
|
|
|
{this.controllerBar()}
|
|
|
|
{this.controllerBar()}
|
|
|
|
{locationData.length > 0 ? (
|
|
|
|
{locationHistorySnapshots.length > 0 ? (
|
|
|
|
<GeoCustomMap locationData={locationData} />
|
|
|
|
<GeoCustomMap locationHistorySnapshots={locationHistorySnapshots} />
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<Empty />
|
|
|
|
<Empty />
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|