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

Add UI component to Enroll device and add policies

Browse Source
feature/appm-store/pbac
Kaveesha Mihirangi 5 years ago committed by Dharmakeerthi Lasantha
parent e924e26ced
commit 2c4f11e3b6
5 changed files with 464 additions and 4 deletions
Show Stats Download Patch File Download Diff File

74
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/AddPolicy.js vendored
Unescape View File

@ -0,0 +1,74 @@
import React from 'react';
import {Button, Form, Row, Col, Card, Steps, Input, message, Modal, notification, Typography} from "antd";
import axios from "axios";
import {withConfigContext} from "../../context/ConfigContext";
import DeviceType from "../Devices/DeviceType";
import ConfigureProfile from "./ConfigureProfile";
const {Step} = Steps;
class AddPolicy extends React.Component {
constructor(props) {
super(props);
this.config = this.props.context;
this.state = {
isAddDeviceModalVisible: false,
current : 0,
}
};
onClickType = () =>{
this.setState({
current: 1,
})
};
openAddDeviceModal = () =>{
this.setState({
isAddDeviceModalVisible : true,
})
};
render() {
const {loading, current, isError, supportedOsVersions, errorText, forbiddenErrors} = this.state;
const { getFieldDecorator } = this.props.form;
return (
<div>
<Row>
<Col span={20} offset={2}>
<Steps style={{minHeight: 32}} current={current}>
<Step key="Platform" title="Select a Platform"/>
<Step key="ProfileConfigure" title="Configure profile"/>
<Step key="PolicyType" title="Select policy type"/>
<Step key="AssignGroups" title="Assign to groups"/>
<Step key="Publish" title="Publish to devices"/>
<Step key="Result" title="Result"/>
</Steps>
</Col>
<Col span={16} offset={4}>
<Card style={{marginTop: 24}}>
<div style={{display: (current === 0 ? 'unset' : 'none')}}>
<DeviceType onClickType={this.onClickType}/>
</div>
<div style={{display: (current === 1 ? 'unset' : 'none')}}>
<ConfigureProfile/>
</div>
<div style={{display: (current === 2 ? 'unset' : 'none')}}>
</div>
<div style={{display: (current === 3 ? 'unset' : 'none')}}>
</div>
<div style={{display: (current === 4 ? 'unset' : 'none')}}>
</div>
<div style={{display: (current === 5 ? 'unset' : 'none')}}>
</div>
</Card>
</Col>
</Row>
</div>
);
}
}
export default withConfigContext(Form.create({name: 'add-policy'})(AddPolicy));

302
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/ConfigureProfile.js vendored
Unescape View File

@ -0,0 +1,302 @@
import React from 'react';
import {Tabs, Row, Col, Switch, Menu,Input, Typography, Form, Checkbox, Select} from "antd";
import {withConfigContext} from "../../context/ConfigContext";
const { Title } = Typography;
const { TabPane } = Tabs;
const {Option} = Select;
class ConfigureProfile extends React.Component {
constructor(props) {
super(props);
this.config = this.props.context;
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<Tabs tabPosition={"left"} type={"card"} size={"large"}>
<TabPane tab="Passcode Policy" key="1">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Passcode Policy</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF"/>
</Col>
</Row>
<Row>
Enforce a configured passcode policy on Android devices.
Once this profile is applied, the device
owners won't be able to modify the password settings on their devices.
</Row>
<div>
<Form>
<Form.Item >
{getFieldDecorator('allowSimpleValue', {
})(<Checkbox>Allow simple value</Checkbox>)}
</Form.Item>
<Form.Item >
{getFieldDecorator('remember', {
})(<Checkbox>Require alphanumeric value</Checkbox>)}
</Form.Item>
<Form.Item label="Minimum passcode length" style={{display: "block"}}>
{getFieldDecorator('minPasscodeLength', {
initialValue: '0'
})(
<Select>
<Option key="0">None</Option>
<Option key="4">4</Option>
<Option key="5">5</Option>
<Option key="6">6</Option>
<Option key="7">7</Option>
<Option key="8">8</Option>
<Option key="9">9</Option>
<Option key="10">10</Option>
<Option key="11">11</Option>
<Option key="12">12</Option>
<Option key="13">13</Option>
<Option key="14">14</Option>
<Option key="15">15</Option>
</Select>
)}
</Form.Item>
<Form.Item label="Minimum number of complex characters" style={{display: "block"}}>
{getFieldDecorator('minComplexChar', {
initialValue: '0'
})(
<Select>
<Option key="0">None</Option>
<Option key="1">1</Option>
<Option key="2">2</Option>
<Option key="3">3</Option>
<Option key="4">4</Option>
<Option key="5">5</Option>
</Select>
)}
</Form.Item>
<Form.Item label="Maximum passcode age in days* " style={{display: "block"}}>
{getFieldDecorator('maxPasscodeAge', {
})(
<Input/>
)}
</Form.Item>
<Form.Item label="Passcode history*" style={{display: "block"}}>
{getFieldDecorator('passcodeHistory', {
})(
<Input/>
)}
</Form.Item>
<Form.Item label="Maximum number of failed attempts" style={{display: "block"}}>
{getFieldDecorator('maxFailedAttemps', {
initialValue: '0'
})(
<Select>
<Option key="0">None</Option>
<Option key="3">3</Option>
<Option key="4">4</Option>
<Option key="5">5</Option>
<Option key="6">6</Option>
<Option key="7">7</Option>
<Option key="8">8</Option>
<Option key="9">9</Option>
<Option key="10">10</Option>
</Select>
)}
</Form.Item>
</Form>
</div>
</TabPane>
<TabPane tab="Restrictions" key="2">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Restrictions</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configurations can be used to restrict certain settings on an Android device.
Once this configuration profile is installed on a device, corresponding users will
not be able to modify these settings on their devices.</p>
</Row>
</TabPane>
<TabPane tab="Encryption Settings" key="3">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Encryption Settings</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configuration can be used to encrypt data on an Android device,
when the device is locked and make it readable when the passcode is entered.
Once this configuration profile is installed on a device, corresponding users will
not be able to modify these settings on their devices.</p>
</Row>
</TabPane>
<TabPane tab="Wi-Fi Settings" key="4">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Wi-Fi Settings</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF"/>
</Col>
</Row>
<Row>
<p>This configurations can be used to configure Wi-Fi access on an Android device.
Once this configuration profile is installed on a device, corresponding
users will not be able to modify these settings on their devices.</p>
</Row>
</TabPane>
<TabPane tab="Global Proxy Settings" key="5">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Global Proxy Settings</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configurations can be used to set a network-independent global HTTP
proxy on an Android device. Once this configuration profile is installed on a device,
all the network traffic will be routed through the proxy server.</p>
</Row>
</TabPane>
<TabPane tab="Virtual Private Network" key="6">
<div>
<Row>
<Col offset={0} span={8}>
<Title level={4}>VPN Settings</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>Configure the OpenVPN settings on Android devices. In order to enable this,
device needs to have "OpenVPN for Android" application installed.</p>
</Row>
</div>
<div>
<Row>
<Col offset={0} span={8}>
<Title level={4}>Always On VPN Settings</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>Configure an always-on VPN connection through a specific VPN client application.</p>
</Row>
</div>
</TabPane>
<TabPane tab="Certificate Install" key="7">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Certificate Install Settings</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>Configure the certificate install settings on Android devices.</p>
</Row>
</TabPane>
<TabPane tab="Work-Profile Configurations" key="8">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Work-Profile Configurations</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>The configurations below can be applied to the devices where the agent
is running in Android Work-Profile.</p>
</Row>
</TabPane>
<TabPane tab="COSU Profile Configuration" key="9">
<Row>
<Col offset={0} span={8}>
<Title level={4}>COSU Profile Configuration</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This policy can be used to configure the profile of COSU Devices.</p>
</Row>
</TabPane>
<TabPane tab="Application Restrictions" key="10">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Application Restrictions</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configuration can be used to create a black list or white list of applications.</p>
</Row>
</TabPane>
<TabPane tab="Runtime Permission Policy" key="11">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Runtime Permission Policy</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configuration can be used to set a runtime permission policy to an Android Device.</p>
</Row>
</TabPane>
<TabPane tab="System Update Policy (COSU)" key="12">
<Row>
<Col offset={0} span={8}>
<Title level={4}>System Update Policy (COSU)</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configuration can be used to set a passcode policy to an Android Device.
Once this configuration profile is installed on a device,
corresponding users will not be able to modify these settings on their devices.</p>
</Row>
</TabPane>
<TabPane tab="Enrollment Application Install" key="13">
<Row>
<Col offset={0} span={8}>
<Title level={4}>Enrollment Application Install</Title>
</Col>
<Col offset={12} span={2} >
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
</Col>
</Row>
<Row>
<p>This configuration can be used to install applications during Android device enrollment.</p>
</Row>
</TabPane>
</Tabs>
</div>
);
}
}
export default withConfigContext(Form.create({name: 'add-policy'})(ConfigureProfile));

6
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js vendored
Unescape View File

@ -32,6 +32,7 @@ import Policies from "./pages/Dashboard/Policies/Policies";
import Roles from "./pages/Dashboard/Roles/Roles"; import Roles from "./pages/Dashboard/Roles/Roles";
import DeviceTypes from "./pages/Dashboard/DeviceTypes/DeviceTypes"; import DeviceTypes from "./pages/Dashboard/DeviceTypes/DeviceTypes";
import DeviceEnroll from "./pages/Dashboard/Devices/DeviceEnroll"; import DeviceEnroll from "./pages/Dashboard/Devices/DeviceEnroll";
import AddNewPolicy from "./pages/Dashboard/Policies/AddNewPolicy";
const routes = [ const routes = [
{ {
@ -79,6 +80,11 @@ const routes = [
component: Policies, component: Policies,
exact: true exact: true
}, },
{
path: '/entgra/policy/add',
component: AddNewPolicy,
exact: true
},
{ {
path: '/entgra/roles', path: '/entgra/roles',
component: Roles, component: Roles,

21
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js vendored
Unescape View File

@ -123,12 +123,25 @@ class Dashboard extends React.Component {
<span>Users</span> <span>Users</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="policies"> <SubMenu
<Link to="/entgra/policies"> key="policies"
title={
<span>
<Icon type="audit"/> <Icon type="audit"/>
<span>Policies</span> <span>Policies</span>
</Link> </span>}
</Menu.Item> >
<Menu.Item key="policiesList">
<Link to="/entgra/policies">
<span>View</span>
</Link>
</Menu.Item>
<Menu.Item key="addPolicy">
<Link to="/entgra/policy/add">
<span>Add New Policy</span>
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="roles"> <Menu.Item key="roles">
<Link to="/entgra/roles"> <Link to="/entgra/roles">
<Icon type="book"/> <Icon type="book"/>

65
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/AddNewPolicy.js vendored
Unescape View File

@ -0,0 +1,65 @@
/*
* 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
} from "antd";
import {Link} from "react-router-dom";
import AddPolicy from "../../../components/Policies/AddPolicy";
const {Paragraph} = Typography;
class AddNewPolicy extends React.Component {
routes;
constructor(props) {
super(props);
this.routes = props.routes;
}
render() {
return (
<div>
<PageHeader style={{paddingTop: 0}}>
<Breadcrumb style={{paddingBottom: 16}}>
<Breadcrumb.Item>
<Link to="/entgra"><Icon type="home"/> Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Policies</Breadcrumb.Item>
</Breadcrumb>
<div className="wrap">
<h3>Policies</h3>
<Paragraph>Create new policy on IoT Server.</Paragraph>
</div>
<div style={{ borderRadius: 5}}>
<AddPolicy/>
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
</div>
</div>
);
}
}
export default AddNewPolicy;
Write Preview
Loading…
Cancel
Save