forked from community/device-mgt-core
UI for device enrollment reports See merge request entgra/carbon-device-mgt!4154.x.x
Dharmakeerthi Lasantha
5 years ago
commit
275aa27b5a
@ -0,0 +1,125 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2019, 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 {
|
||||||
|
PageHeader,
|
||||||
|
Typography,
|
||||||
|
Breadcrumb,
|
||||||
|
Icon,
|
||||||
|
Tag,
|
||||||
|
Radio, Select, Button, Card,
|
||||||
|
Row, Col, message, notification
|
||||||
|
} from "antd";
|
||||||
|
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import PoliciesTable from "../../../components/Policies/PoliciesTable";
|
||||||
|
import DevicesTable from "../../../components/Devices/DevicesTable";
|
||||||
|
import DateRangePicker from "../../../components/Reports/DateRangePicker";
|
||||||
|
import ReportDeviceTable from "../../../components/Devices/ReportDevicesTable";
|
||||||
|
import PieChart from "../../../components/Reports/Widgets/PieChart";
|
||||||
|
import axios from "axios";
|
||||||
|
import CountWidget from "../../../components/Reports/Widgets/CountWidget";
|
||||||
|
import {withConfigContext} from "../../../context/ConfigContext";
|
||||||
|
const {Paragraph} = Typography;
|
||||||
|
const { CheckableTag } = Tag;
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
let config = null;
|
||||||
|
|
||||||
|
|
||||||
|
class DeviceStatusReport extends React.Component {
|
||||||
|
routes;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.routes = props.routes;
|
||||||
|
config = this.props.context;
|
||||||
|
const { reportData } = this.props.location;
|
||||||
|
this.state = {
|
||||||
|
selectedTags: ['Enrolled'],
|
||||||
|
paramsObject:{
|
||||||
|
from:reportData.duration[0],
|
||||||
|
to:reportData.duration[1]
|
||||||
|
},
|
||||||
|
statsObject:{},
|
||||||
|
statArray:[{item:"ACTIVE",count:0},{item:"INACTIVE",count:0},{item:"REMOVED",count:0}]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickPieChart = (value) => {
|
||||||
|
console.log(value.data.point.item);
|
||||||
|
const chartValue = value.data.point.item;
|
||||||
|
let tempParamObj = this.state.paramsObject;
|
||||||
|
|
||||||
|
tempParamObj.status = chartValue;
|
||||||
|
|
||||||
|
|
||||||
|
this.setState({paramsObject:tempParamObj});
|
||||||
|
console.log(this.state.paramsObject)
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { statArray } = this.state;
|
||||||
|
const { reportData } = this.props.location;
|
||||||
|
|
||||||
|
const params = {...this.state.paramsObject};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader style={{paddingTop: 0}}>
|
||||||
|
<Breadcrumb style={{paddingBottom: 16}}>
|
||||||
|
<Breadcrumb.Item>
|
||||||
|
<Link to="/entgra"><Icon type="home"/> Home</Link>
|
||||||
|
</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>Report</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
|
<div className="wrap" style={{marginBottom: '10px'}}>
|
||||||
|
<h3>Summary of enrollments</h3>
|
||||||
|
<div style={{marginBottom: '10px'}}>
|
||||||
|
<Select defaultValue="android" style={{ width: 120 , marginRight:10}}>
|
||||||
|
<Option value="android">Android</Option>
|
||||||
|
<Option value="ios">IOS</Option>
|
||||||
|
<Option value="windows">Windows</Option>
|
||||||
|
</Select>
|
||||||
|
<Button onClick={this.onSubmitReport} style={{marginLeft:10}} type="primary">Generate Report</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Card
|
||||||
|
bordered={true}
|
||||||
|
hoverable={true}
|
||||||
|
style={{borderRadius: 5, marginBottom: 10, height:window.innerHeight*0.5}}>
|
||||||
|
|
||||||
|
<PieChart onClickPieChart={this.onClickPieChart} reportData={reportData}/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
|
||||||
|
<ReportDeviceTable paramsObject={params}/>
|
||||||
|
</div>
|
||||||
|
</PageHeader>
|
||||||
|
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(DeviceStatusReport);
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2019, 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 {
|
||||||
|
PageHeader,
|
||||||
|
Typography,
|
||||||
|
Breadcrumb,
|
||||||
|
Icon,
|
||||||
|
Tag,
|
||||||
|
Radio, Select, Button, Card,
|
||||||
|
Row, Col, message, notification
|
||||||
|
} from "antd";
|
||||||
|
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import PoliciesTable from "../../../components/Policies/PoliciesTable";
|
||||||
|
import DevicesTable from "../../../components/Devices/DevicesTable";
|
||||||
|
import DateRangePicker from "../../../components/Reports/DateRangePicker";
|
||||||
|
import ReportDeviceTable from "../../../components/Devices/ReportDevicesTable";
|
||||||
|
import PieChart from "../../../components/Reports/Widgets/PieChart";
|
||||||
|
import axios from "axios";
|
||||||
|
import CountWidget from "../../../components/Reports/Widgets/CountWidget";
|
||||||
|
import {withConfigContext} from "../../../context/ConfigContext";
|
||||||
|
const {Paragraph} = Typography;
|
||||||
|
const { CheckableTag } = Tag;
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
let config = null;
|
||||||
|
|
||||||
|
|
||||||
|
class EnrollmentTypeReport extends React.Component {
|
||||||
|
routes;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.routes = props.routes;
|
||||||
|
config = this.props.context;
|
||||||
|
const { reportData } = this.props.location;
|
||||||
|
this.state = {
|
||||||
|
paramsObject:{
|
||||||
|
from:reportData.duration[0],
|
||||||
|
to:reportData.duration[1]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
console.log(reportData.duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
setParam = (tempParamObj, type, value) => {
|
||||||
|
if(type==="status"){
|
||||||
|
tempParamObj.status = value;
|
||||||
|
if(tempParamObj.status) {
|
||||||
|
delete tempParamObj.status;
|
||||||
|
}
|
||||||
|
} else if(type=="ownership"){
|
||||||
|
tempParamObj.ownership = value;
|
||||||
|
if(value=="ALL" && tempParamObj.ownership) {
|
||||||
|
delete tempParamObj.ownership;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onClickPieChart = (value) => {
|
||||||
|
const chartValue = value.data.point.item;
|
||||||
|
let tempParamObj = this.state.paramsObject;
|
||||||
|
|
||||||
|
console.log(chartValue)
|
||||||
|
|
||||||
|
tempParamObj.ownership = chartValue;
|
||||||
|
|
||||||
|
this.setState({paramsObject:tempParamObj});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { reportData } = this.props.location;
|
||||||
|
|
||||||
|
const params = {...this.state.paramsObject};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader style={{paddingTop: 0}}>
|
||||||
|
<Breadcrumb style={{paddingBottom: 16}}>
|
||||||
|
<Breadcrumb.Item>
|
||||||
|
<Link to="/entgra"><Icon type="home"/> Home</Link>
|
||||||
|
</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>Report</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
|
<div className="wrap" style={{marginBottom: '10px'}}>
|
||||||
|
<h3>Summary of enrollments</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Card
|
||||||
|
bordered={true}
|
||||||
|
hoverable={true}
|
||||||
|
style={{borderRadius: 5, marginBottom: 10, height:window.innerHeight*0.5}}>
|
||||||
|
|
||||||
|
|
||||||
|
<PieChart onClickPieChart={this.onClickPieChart} reportData={reportData}/>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
|
||||||
|
<ReportDeviceTable paramsObject={params}/>
|
||||||
|
</div>
|
||||||
|
</PageHeader>
|
||||||
|
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(EnrollmentTypeReport);
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2019, 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 {
|
||||||
|
PageHeader,
|
||||||
|
Typography,
|
||||||
|
Breadcrumb,
|
||||||
|
Icon,
|
||||||
|
Tag,
|
||||||
|
Radio, Select, Button, Card,
|
||||||
|
Row, Col, message, notification
|
||||||
|
} from "antd";
|
||||||
|
|
||||||
|
import {Link, Redirect} from "react-router-dom";
|
||||||
|
import PoliciesTable from "../../../components/Policies/PoliciesTable";
|
||||||
|
import DevicesTable from "../../../components/Devices/DevicesTable";
|
||||||
|
import DateRangePicker from "../../../components/Reports/DateRangePicker";
|
||||||
|
import ReportDeviceTable from "../../../components/Devices/ReportDevicesTable";
|
||||||
|
import PieChart from "../../../components/Reports/Widgets/PieChart";
|
||||||
|
import axios from "axios";
|
||||||
|
import CountWidget from "../../../components/Reports/Widgets/CountWidget";
|
||||||
|
import {withConfigContext} from "../../../context/ConfigContext";
|
||||||
|
const {Paragraph} = Typography;
|
||||||
|
const { CheckableTag } = Tag;
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
let config = null;
|
||||||
|
|
||||||
|
|
||||||
|
class EnrollmentsVsUnenrollmentsReport extends React.Component {
|
||||||
|
routes;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.routes = props.routes;
|
||||||
|
config = this.props.context;
|
||||||
|
const { reportData } = this.props.location;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
paramsObject:{
|
||||||
|
from:reportData? reportData.duration[0]: "2019-01-01",
|
||||||
|
to:reportData? reportData.duration[1]: "2019-01-01"
|
||||||
|
},
|
||||||
|
redirect: false
|
||||||
|
};
|
||||||
|
|
||||||
|
this.redirectToHome();
|
||||||
|
console.log(this.state.paramsObject);
|
||||||
|
}
|
||||||
|
|
||||||
|
setParam = (tempParamObj, type, value) => {
|
||||||
|
if(type==="status"){
|
||||||
|
tempParamObj.status = value;
|
||||||
|
if(tempParamObj.status) {
|
||||||
|
delete tempParamObj.status;
|
||||||
|
}
|
||||||
|
} else if(type=="ownership"){
|
||||||
|
tempParamObj.ownership = value;
|
||||||
|
if(value=="ALL" && tempParamObj.ownership) {
|
||||||
|
delete tempParamObj.ownership;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
redirectToHome = () => {
|
||||||
|
return <Redirect to="/entgra" />
|
||||||
|
};
|
||||||
|
|
||||||
|
setRedirect = (reportData) => {
|
||||||
|
if(!reportData){
|
||||||
|
this.setState({
|
||||||
|
redirect: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
renderRedirect = () => {
|
||||||
|
if (this.state.redirect) {
|
||||||
|
return <Redirect to='/entgra' />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickPieChart = (value) => {
|
||||||
|
const chartValue = value.data.point.item;
|
||||||
|
let tempParamObj = this.state.paramsObject;
|
||||||
|
|
||||||
|
console.log(chartValue)
|
||||||
|
|
||||||
|
// tempParamObj.status = chartValue;
|
||||||
|
|
||||||
|
if(chartValue==="Enrollments"){
|
||||||
|
tempParamObj.status = "ACTIVE&status=INACTIVE"
|
||||||
|
}else{
|
||||||
|
tempParamObj.status = "REMOVED"
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.setState({paramsObject:tempParamObj});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { reportData } = this.props.location;
|
||||||
|
|
||||||
|
console.log("======")
|
||||||
|
console.log(reportData)
|
||||||
|
console.log("======")
|
||||||
|
|
||||||
|
let reportDataClone = {
|
||||||
|
params: ["ACTIVE"],
|
||||||
|
duration: ["2020-01-01","2020-01-01"]
|
||||||
|
};
|
||||||
|
|
||||||
|
const params = {...this.state.paramsObject};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div>{!reportData ? (
|
||||||
|
<Redirect to='/entgra/reports' />
|
||||||
|
) : (
|
||||||
|
<PageHeader style={{paddingTop: 0}}>
|
||||||
|
<Breadcrumb style={{paddingBottom: 16}}>
|
||||||
|
<Breadcrumb.Item>
|
||||||
|
<Link to="/entgra"><Icon type="home"/> Home</Link>
|
||||||
|
</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>Report</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
|
<div className="wrap" style={{marginBottom: '10px'}}>
|
||||||
|
<h3>Summary of enrollments</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Card
|
||||||
|
bordered={true}
|
||||||
|
hoverable={true}
|
||||||
|
style={{borderRadius: 5, marginBottom: 10, height:window.innerHeight*0.5}}>
|
||||||
|
|
||||||
|
|
||||||
|
<PieChart onClickPieChart={this.onClickPieChart} reportData={reportData? reportData : reportDataClone}/>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
|
||||||
|
<ReportDeviceTable paramsObject={params}/>
|
||||||
|
</div>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
)}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(EnrollmentsVsUnenrollmentsReport);
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import {Card, Col, Icon} from "antd";
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
|
||||||
|
class CountWidget extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.routes = props.routes;
|
||||||
|
this.state = {
|
||||||
|
statArray:[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.setState({statArray:this.props.statArray})
|
||||||
|
console.log("$$$$")
|
||||||
|
console.log(this.props.statArray)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const countObj = [
|
||||||
|
{item:"All",count:100},
|
||||||
|
{item:"Enrolled",count:80},
|
||||||
|
{item:"Unenrolled",count:20}];
|
||||||
|
|
||||||
|
const { statArray } = this.state;
|
||||||
|
|
||||||
|
let card = statArray.map((data) =>
|
||||||
|
// <Card
|
||||||
|
// bordered={true}
|
||||||
|
// hoverable={true}
|
||||||
|
// key={data.item}
|
||||||
|
// style={{borderRadius: 5, marginBottom: 5, width:"100%"}}>
|
||||||
|
//
|
||||||
|
// <h3>{data.item} Devices: {data.count}</h3>
|
||||||
|
//
|
||||||
|
// </Card>
|
||||||
|
<Col key={data.item} span={6}>
|
||||||
|
<Card key={data.item} bordered={true} hoverable={true} style={{borderRadius: 10, marginBottom: 16}}>
|
||||||
|
|
||||||
|
<div align='center'>
|
||||||
|
<h2><b>{data.item}</b></h2>
|
||||||
|
<h1>{data.count}</h1>
|
||||||
|
{/*<p>{data.duration}</p>*/}
|
||||||
|
{/*<ReportFilterModal/>*/}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
)
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
{card}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CountWidget;
|
||||||
@ -0,0 +1,322 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
G2,
|
||||||
|
Chart,
|
||||||
|
Geom,
|
||||||
|
Axis,
|
||||||
|
Tooltip,
|
||||||
|
Coord,
|
||||||
|
Label,
|
||||||
|
Legend,
|
||||||
|
View,
|
||||||
|
Guide,
|
||||||
|
Shape,
|
||||||
|
Facet,
|
||||||
|
Util
|
||||||
|
} from "bizcharts";
|
||||||
|
import DataSet from "@antv/data-set";
|
||||||
|
import axios from "axios";
|
||||||
|
import {message, notification} from "antd";
|
||||||
|
import {withConfigContext} from "../../../context/ConfigContext";
|
||||||
|
|
||||||
|
let config = null;
|
||||||
|
|
||||||
|
class PieChart extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
config = this.props.context;
|
||||||
|
this.state = {
|
||||||
|
loading:true,
|
||||||
|
statArray:[]
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
let { statArray } = this.state;
|
||||||
|
const { reportData } = this.props;
|
||||||
|
let params = {
|
||||||
|
status: reportData.params[0],
|
||||||
|
from: reportData.duration[0],
|
||||||
|
to: reportData.duration[1]
|
||||||
|
};
|
||||||
|
|
||||||
|
const urlSet = {
|
||||||
|
paramsList:reportData.params,
|
||||||
|
duration:reportData.duration
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(urlSet)
|
||||||
|
|
||||||
|
if(reportData.params[0]==="Enrollments"){
|
||||||
|
this.getEnrollmentsVsUnenrollmentsCount(params, urlSet)
|
||||||
|
}else if(reportData.params[0]==="BYOD"){
|
||||||
|
this.getEnrollmentTypeCount(params, urlSet);
|
||||||
|
}else{
|
||||||
|
this.getCount(params, urlSet);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clicked = () => {
|
||||||
|
console.log("Clicked...!!")
|
||||||
|
};
|
||||||
|
|
||||||
|
onChartChange = (data) => {
|
||||||
|
this.props.onClickPieChart(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
statArray = [];
|
||||||
|
|
||||||
|
//Call count APIs and get count for given parameters, then create data object to build pie chart
|
||||||
|
getCount = (params, urlSet) => {
|
||||||
|
|
||||||
|
this.setState({loading: true});
|
||||||
|
|
||||||
|
let { statArray } = this.state;
|
||||||
|
|
||||||
|
console.log(urlSet);
|
||||||
|
|
||||||
|
const urlArray = [];
|
||||||
|
|
||||||
|
urlSet.paramsList.map((data) => {
|
||||||
|
const paramsObj = {
|
||||||
|
status:data,
|
||||||
|
from:urlSet.duration[0],
|
||||||
|
to:urlSet.duration[1]
|
||||||
|
}
|
||||||
|
// console.log(paramsObj)
|
||||||
|
const encodedExtraParams = Object.keys(paramsObj)
|
||||||
|
.map(key => key + '=' + paramsObj[key]).join('&');
|
||||||
|
const apiUrl = window.location.origin + config.serverConfig.invoker.uri +
|
||||||
|
config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/reports/devices/count?" + encodedExtraParams;
|
||||||
|
|
||||||
|
urlArray.push(axios.get(apiUrl, data));
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(urlArray)
|
||||||
|
|
||||||
|
|
||||||
|
axios.all(urlArray).then(res => {
|
||||||
|
|
||||||
|
res.map((response) => {
|
||||||
|
if(response.status === 200){
|
||||||
|
let countData = {item:response.config[0], count:parseInt(response.data.data)}
|
||||||
|
statArray.push(countData);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setState({statArray})
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popup 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 get device count.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//Call count APIs and get count for given parameters, then create data object to build pie chart
|
||||||
|
getEnrollmentsVsUnenrollmentsCount = (params, urlSet) => {
|
||||||
|
|
||||||
|
this.setState({loading: true});
|
||||||
|
|
||||||
|
let { statArray } = this.state;
|
||||||
|
|
||||||
|
console.log(urlSet);
|
||||||
|
|
||||||
|
const urlArray = [];
|
||||||
|
|
||||||
|
urlSet.paramsList.map((data) => {
|
||||||
|
const paramsObj = {
|
||||||
|
from:urlSet.duration[0],
|
||||||
|
to:urlSet.duration[1]
|
||||||
|
}
|
||||||
|
const encodedExtraParams = Object.keys(paramsObj)
|
||||||
|
.map(key => key + '=' + paramsObj[key]).join('&');
|
||||||
|
|
||||||
|
let apiUrl;
|
||||||
|
if(data==="Enrollments"){
|
||||||
|
apiUrl = window.location.origin + config.serverConfig.invoker.uri +
|
||||||
|
config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/reports/devices/count?status=ACTIVE&status=INACTIVE&" + encodedExtraParams;
|
||||||
|
}else{
|
||||||
|
apiUrl = window.location.origin + config.serverConfig.invoker.uri +
|
||||||
|
config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/reports/devices/count?status=REMOVED&" + encodedExtraParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
urlArray.push(axios.get(apiUrl, data));
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(urlArray)
|
||||||
|
|
||||||
|
|
||||||
|
axios.all(urlArray).then(res => {
|
||||||
|
res.map((response) => {
|
||||||
|
if(response.status === 200){
|
||||||
|
let countData = {item:response.config[0], count:parseInt(response.data.data)}
|
||||||
|
statArray.push(countData);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setState({statArray})
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popup 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 get device count.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//Call count APIs and get count for given parameters, then create data object to build pie chart
|
||||||
|
getEnrollmentTypeCount = (params, urlSet) => {
|
||||||
|
|
||||||
|
this.setState({loading: true});
|
||||||
|
|
||||||
|
let { statArray } = this.state;
|
||||||
|
|
||||||
|
console.log(urlSet);
|
||||||
|
|
||||||
|
const urlArray = [];
|
||||||
|
|
||||||
|
urlSet.paramsList.map((data) => {
|
||||||
|
const paramsObj = {
|
||||||
|
ownership:data,
|
||||||
|
from:urlSet.duration[0],
|
||||||
|
to:urlSet.duration[1]
|
||||||
|
}
|
||||||
|
const encodedExtraParams = Object.keys(paramsObj)
|
||||||
|
.map(key => key + '=' + paramsObj[key]).join('&');
|
||||||
|
const apiUrl = window.location.origin + config.serverConfig.invoker.uri +
|
||||||
|
config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/reports/devices/count?" + encodedExtraParams;
|
||||||
|
|
||||||
|
urlArray.push(axios.get(apiUrl, data));
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(urlArray)
|
||||||
|
|
||||||
|
|
||||||
|
axios.all(urlArray).then(res => {
|
||||||
|
res.map((response) => {
|
||||||
|
if(response.status === 200){
|
||||||
|
let countData = {item:response.config[0], count:parseInt(response.data.data)}
|
||||||
|
statArray.push(countData);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setState({statArray})
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popup 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 get device count.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { DataView } = DataSet;
|
||||||
|
const { Html } = Guide;
|
||||||
|
const { statArray , loading} = this.state;
|
||||||
|
|
||||||
|
const dv = new DataView();
|
||||||
|
dv.source(statArray).transform({
|
||||||
|
type: "percent",
|
||||||
|
field: "count",
|
||||||
|
dimension: "item",
|
||||||
|
as: "percent"
|
||||||
|
});
|
||||||
|
const cols = {
|
||||||
|
percent: {
|
||||||
|
formatter: val => {
|
||||||
|
val = val * 100 + "%";
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Chart
|
||||||
|
height={window.innerHeight/2}
|
||||||
|
data={dv}
|
||||||
|
scale={cols}
|
||||||
|
padding={[20, 25, 20, 20]}
|
||||||
|
forceFit
|
||||||
|
onPlotClick={this.onChartChange}
|
||||||
|
animate={true}
|
||||||
|
>
|
||||||
|
<Coord type={"theta"} radius={0.75} innerRadius={0.6} />
|
||||||
|
<Axis name="percent" />
|
||||||
|
<Legend
|
||||||
|
position="right"
|
||||||
|
offsetY={-window.innerHeight / 2 + 120}
|
||||||
|
offsetX={-100}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
showTitle={false}
|
||||||
|
itemTpl="<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>"
|
||||||
|
/>
|
||||||
|
<Guide>
|
||||||
|
<Html
|
||||||
|
position={["50%", "50%"]}
|
||||||
|
html="<div style="color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;">Total<br><span style="color:#262626;font-size:2.5em">200</span>台</div>"
|
||||||
|
alignX="middle"
|
||||||
|
alignY="middle"
|
||||||
|
/>
|
||||||
|
</Guide>
|
||||||
|
<div onClick={this.clicked}>
|
||||||
|
<Geom
|
||||||
|
type="intervalStack"
|
||||||
|
position="percent"
|
||||||
|
color="item"
|
||||||
|
|
||||||
|
tooltip={[
|
||||||
|
"item*percent",
|
||||||
|
(item, percent) => {
|
||||||
|
percent = percent * 100 + "%";
|
||||||
|
return {
|
||||||
|
name: item,
|
||||||
|
value: percent
|
||||||
|
};
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
style={{
|
||||||
|
lineWidth: 1,
|
||||||
|
stroke: "#fff"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Label
|
||||||
|
content="percent"
|
||||||
|
formatter={(val, item) => {
|
||||||
|
return item.point.item + ": " + val;
|
||||||
|
}}/>
|
||||||
|
</Geom>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Chart>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(PieChart);
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2019, 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 {
|
||||||
|
Icon,
|
||||||
|
Col,
|
||||||
|
Row, Select,
|
||||||
|
Radio, Card,
|
||||||
|
Button
|
||||||
|
} from "antd";
|
||||||
|
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
class ReportDurationItemList extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
reportParams:["ACTIVE","INACTIVE","REMOVED"],
|
||||||
|
enrollmentsVsUnenrollmentsParams:["Enrollments", "Unenrollments"],
|
||||||
|
enrollmentTypeParams:["BYOD", "COPE"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
durationItemArray = [
|
||||||
|
{name:"Daily Report", description:"Enrollments of today", duration:[moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD')]},
|
||||||
|
{name:"Weekly Report", description:"Enrollments of last 7 days", duration:[moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD')]},
|
||||||
|
{name:"Monthly Report", description:"Enrollments of last month", duration:[moment().subtract(29, 'days').format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD')]}]
|
||||||
|
|
||||||
|
|
||||||
|
render(){
|
||||||
|
|
||||||
|
let itemStatus = this.durationItemArray.map((data) =>
|
||||||
|
<Col key={data.name} span={6}>
|
||||||
|
<Link
|
||||||
|
to={{
|
||||||
|
//Path to respective report page
|
||||||
|
pathname: "/entgra/devicestatus",
|
||||||
|
reportData: {
|
||||||
|
duration: data.duration,
|
||||||
|
reportType: data.reportType,
|
||||||
|
params: this.state.reportParams,
|
||||||
|
paramsType: data.paramsType
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<Card key={data.name} bordered={true} hoverable={true} style={{borderRadius: 10, marginBottom: 16}}>
|
||||||
|
|
||||||
|
<div align='center'>
|
||||||
|
<Icon type="desktop" style={{ fontSize: '25px', color: '#08c' }}/>
|
||||||
|
<h2><b>{data.name}</b></h2>
|
||||||
|
<p>{data.description}</p>
|
||||||
|
{/*<p>{data.duration}</p>*/}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
|
||||||
|
let itemEnrollmentsVsUnenrollments = this.durationItemArray.map((data) =>
|
||||||
|
<Col key={data.name} span={6}>
|
||||||
|
<Link
|
||||||
|
to={{
|
||||||
|
//Path to respective report page
|
||||||
|
pathname: "/entgra/enrollmentsvsunenrollments",
|
||||||
|
reportData: {
|
||||||
|
duration: data.duration,
|
||||||
|
reportType: data.reportType,
|
||||||
|
params: this.state.enrollmentsVsUnenrollmentsParams,
|
||||||
|
paramsType: data.paramsType
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<Card key={data.name} bordered={true} hoverable={true} style={{borderRadius: 10, marginBottom: 16}}>
|
||||||
|
|
||||||
|
<div align='center'>
|
||||||
|
<Icon type="desktop" style={{ fontSize: '25px', color: '#08c' }}/>
|
||||||
|
<h2><b>{data.name}</b></h2>
|
||||||
|
<p>{data.description}</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
|
||||||
|
let itemEnrollmentType = this.durationItemArray.map((data) =>
|
||||||
|
<Col key={data.name} span={6}>
|
||||||
|
<Link
|
||||||
|
to={{
|
||||||
|
//Path to respective report page
|
||||||
|
pathname: "/entgra/enrollmenttype",
|
||||||
|
reportData: {
|
||||||
|
duration: data.duration,
|
||||||
|
reportType: data.reportType,
|
||||||
|
params: this.state.enrollmentTypeParams,
|
||||||
|
paramsType: data.paramsType
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<Card key={data.name} bordered={true} hoverable={true} style={{borderRadius: 10, marginBottom: 16}}>
|
||||||
|
|
||||||
|
<div align='center'>
|
||||||
|
<Icon type="desktop" style={{ fontSize: '25px', color: '#08c' }}/>
|
||||||
|
<h2><b>{data.name}</b></h2>
|
||||||
|
<p>{data.description}</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<div style={{borderRadius: 5}}>
|
||||||
|
<Row gutter={16} >
|
||||||
|
{itemStatus}
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{borderRadius: 5}}>
|
||||||
|
<Row gutter={16} >
|
||||||
|
{itemEnrollmentsVsUnenrollments}
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{borderRadius: 5}}>
|
||||||
|
<Row gutter={16} >
|
||||||
|
{itemEnrollmentType}
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportDurationItemList;
|
||||||
Loading…
Reference in new issue