From c984b88c758e9591cde051ed08a7b264ff66da63 Mon Sep 17 00:00:00 2001 From: Kaveesha Mihirangi Date: Wed, 18 Mar 2020 06:10:21 +0000 Subject: [PATCH] Add UI components to Assign policy Type, Assign Groups and Publish Policy view --- .../components/AssignGroups/index.js | 232 ++++++++++++++++++ .../components/ConfigureProfile/index.js | 17 +- .../components/PublishDevices/index.js | 65 +++++ .../components/SelectPlatform/index.js | 27 +- .../components/SelectPolicyType/index.js | 155 ++++++++++++ .../Policies/components/AddPolicy/index.js | 60 ++--- 6 files changed, 489 insertions(+), 67 deletions(-) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPolicyType/index.js diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js new file mode 100644 index 00000000000..38df0b96050 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js @@ -0,0 +1,232 @@ +/* + * 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 { withConfigContext } from '../../../../../../../../components/ConfigContext'; +import { Button, Col, Form, message, notification, Radio, Select } from 'antd'; +import axios from 'axios'; +const { Option } = Select; + +class AssignGroups extends React.Component { + constructor(props) { + super(props); + this.config = this.props.context; + this.userSelector = React.createRef(); + this.roleSelector = React.createRef(); + this.state = { + roles: [], + users: [], + groups: [], + }; + } + componentDidMount() { + this.getRolesList(); + this.getGroupsList(); + } + + handleSetUserRoleFormItem = event => { + if (event.target.value === 'roleSelector') { + this.roleSelector.current.style.cssText = 'display: block;'; + this.userSelector.current.style.cssText = 'display: none;'; + } else { + this.roleSelector.current.style.cssText = 'display: none;'; + this.userSelector.current.style.cssText = 'display: block;'; + } + }; + + getRolesList = () => { + let apiURL = + window.location.origin + + this.config.serverConfig.invoker.uri + + this.config.serverConfig.invoker.deviceMgt + + '/roles?user-store=PRIMARY&limit=100'; + + axios + .get(apiURL) + .then(res => { + if (res.status === 200) { + this.setState({ + roles: res.data.data.roles, + }); + } + }) + .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 trying to load roles.', + }); + } + }); + }; + + getUsersList = value => { + let apiURL = + window.location.origin + + this.config.serverConfig.invoker.uri + + this.config.serverConfig.invoker.deviceMgt + + '/users/search/usernames?filter=' + + value + + '&domain=Primary'; + axios + .get(apiURL) + .then(res => { + if (res.status === 200) { + let users = JSON.parse(res.data.data); + this.setState({ + users, + }); + } + }) + .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 trying to load users.', + }); + } + }); + }; + + // fetch data from api + getGroupsList = () => { + let apiUrl = + window.location.origin + + this.config.serverConfig.invoker.uri + + this.config.serverConfig.invoker.deviceMgt + + '/admin/groups'; + + // send request to the invokerss + axios + .get(apiUrl) + .then(res => { + if (res.status === 200) { + this.setState({ + groups: 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 trying to load device groups.', + }); + } + }); + }; + + render() { + const { getFieldDecorator } = this.props.form; + return ( +
+
+ + Set User role(s) + Set User(s) + +
+ + {getFieldDecorator('roles', {})( + , + )} + +
+
+ + {getFieldDecorator('users', {})( + , + )} + +
+
+ + {getFieldDecorator('deviceGroups', {})( + , + )} + + +
+ + +
+ +
+ ); + } +} + +export default withConfigContext(Form.create()(AssignGroups)); diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js index c28046d100d..a17ad5d6a06 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js @@ -62,8 +62,6 @@ class ConfigureProfile extends React.Component { }; } - componentDidMount() {} - // convert time from 24h format to 12h format timeConverter = time => { time = time @@ -673,11 +671,6 @@ class ConfigureProfile extends React.Component { const { policyUIConfigurationsList } = this.props; return (
- {/*
*/} - {/* */} - {/*
*/} {policyUIConfigurationsList.map((element, i) => { return ( @@ -729,6 +722,16 @@ class ConfigureProfile extends React.Component { ); })} + +
+ + +
+
); } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js new file mode 100644 index 00000000000..8075d5789c7 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js @@ -0,0 +1,65 @@ +/* + * 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 { withConfigContext } from '../../../../../../../../components/ConfigContext'; +import { Button, Col, Form, Input } from 'antd'; +const { TextArea } = Input; + +class PublishDevices extends React.Component { + constructor(props) { + super(props); + this.config = this.props.context; + } + + render() { + const { getFieldDecorator } = this.props.form; + return ( +
+ + {getFieldDecorator('policyName', { + rules: [ + { + pattern: new RegExp('^.{1,30}$'), + message: 'Should be 1-to-30 characters long', + }, + ], + })()} + + + {getFieldDecorator('description', {})(