forked from community/device-mgt-core
Implement create, apply, edit, view policy features to device-mgt React App See merge request entgra/carbon-device-mgt!4834.x.x
Dharmakeerthi Lasantha
5 years ago
commit
66722ed71e
@ -0,0 +1,269 @@
|
||||
/*
|
||||
* 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;';
|
||||
}
|
||||
};
|
||||
|
||||
// generate payload by adding Assign Groups
|
||||
onHandleContinue = (e, formName) => {
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (typeof values.roles === 'string') {
|
||||
values.roles = [values.roles];
|
||||
}
|
||||
if (!values.users) {
|
||||
delete values.users;
|
||||
}
|
||||
|
||||
if (values.deviceGroups === 'NONE') {
|
||||
delete values.deviceGroups;
|
||||
}
|
||||
|
||||
this.props.getPolicyPayloadData(formName, values);
|
||||
this.props.getNextStep();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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 { policyData } = this.props;
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
let deviceGroups = null;
|
||||
if (policyData.deviceGroups.length > 0) {
|
||||
deviceGroups = policyData.deviceGroups;
|
||||
} else {
|
||||
deviceGroups = 'NONE';
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<Radio.Group
|
||||
defaultValue={'roleSelector'}
|
||||
onChange={this.handleSetUserRoleFormItem}
|
||||
>
|
||||
<Radio value="roleSelector">Set User role(s)</Radio>
|
||||
<Radio value="userSelector">Set User(s)</Radio>
|
||||
</Radio.Group>
|
||||
<div
|
||||
id={'roleSelector'}
|
||||
ref={this.roleSelector}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('roles', {
|
||||
initialValue: policyData.roles,
|
||||
})(
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
defaultActiveFirstOption={true}
|
||||
>
|
||||
<Option value={'ANY'}>Any</Option>
|
||||
{this.state.roles.map(role => (
|
||||
<Option key={role} value={role}>
|
||||
{role}
|
||||
</Option>
|
||||
))}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
id={'userSelector'}
|
||||
ref={this.userSelector}
|
||||
style={{ display: 'none' }}
|
||||
>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('users', {
|
||||
initialValue: policyData.users,
|
||||
})(
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
onSearch={this.getUsersList}
|
||||
>
|
||||
{this.state.users.map(user => (
|
||||
<Option key={user.username} value={user.username}>
|
||||
{user.username}
|
||||
</Option>
|
||||
))}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
<Form.Item label={'Select Groups'} style={{ display: 'block' }}>
|
||||
{getFieldDecorator('deviceGroups', {
|
||||
initialValue: deviceGroups,
|
||||
})(
|
||||
<Select mode="multiple" style={{ width: '100%' }}>
|
||||
<Option value={'NONE'}>NONE</Option>
|
||||
{this.state.groups.map(group => (
|
||||
<Option key={group.name} value={group.name}>
|
||||
{group.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<Col span={16} offset={20}>
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={e => this.onHandleContinue(e, 'groupData')}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create()(AssignGroups));
|
||||
@ -0,0 +1,873 @@
|
||||
/*
|
||||
* 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 {
|
||||
Tabs,
|
||||
Row,
|
||||
Col,
|
||||
Switch,
|
||||
Input,
|
||||
Typography,
|
||||
Form,
|
||||
Collapse,
|
||||
Checkbox,
|
||||
Select,
|
||||
Tooltip,
|
||||
Icon,
|
||||
Table,
|
||||
Alert,
|
||||
Upload,
|
||||
Popconfirm,
|
||||
Button,
|
||||
Radio,
|
||||
} from 'antd';
|
||||
import { withConfigContext } from '../../../../../../../../components/ConfigContext';
|
||||
import '../../../../styles.css';
|
||||
import moment from 'moment';
|
||||
const { Text, Title, Paragraph } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const subPanelpayloadAttributes = {};
|
||||
|
||||
class ConfigureProfile extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
loading: false,
|
||||
activePanelKeys: [],
|
||||
activeSubPanelKeys: [],
|
||||
subFormList: [],
|
||||
subPanelpayloadAttributes: {},
|
||||
customInputDataArray: [],
|
||||
inputTableDataSources: {},
|
||||
};
|
||||
}
|
||||
|
||||
setProfileInfo = e => {
|
||||
let activePolicies = [];
|
||||
let activePolicyFields = {};
|
||||
const allFields = this.props.form.getFieldsValue();
|
||||
this.props.policyFeatureList.map(element => {
|
||||
activePolicies.push(element.featureCode);
|
||||
let featureData = JSON.parse(element.content);
|
||||
Object.keys(featureData).map(key => {
|
||||
let regex = new RegExp(`${element.featureCode}.+${key}`, 'g');
|
||||
Object.keys(allFields).map(fieldName => {
|
||||
if (fieldName.match(regex) != null) {
|
||||
activePolicyFields[fieldName] = featureData[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
this.props.form.setFieldsValue(activePolicyFields);
|
||||
this.setState({
|
||||
activePanelKeys: activePolicies,
|
||||
});
|
||||
};
|
||||
|
||||
// convert time from 24h format to 12h format
|
||||
timeConverter = time => {
|
||||
time = time
|
||||
.toString()
|
||||
.match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
|
||||
if (time.length > 1) {
|
||||
time = time.slice(1);
|
||||
time[5] = +time[0] < 12 ? ' AM' : ' PM';
|
||||
time[0] = +time[0] % 12 || 12;
|
||||
}
|
||||
return time.join('');
|
||||
};
|
||||
|
||||
// get Option value from start Time, end Time and time difference between 2 values
|
||||
getOptionForTimeSelectors = (startTimeValue, endTimeValue, timeIncrement) => {
|
||||
let timeOptions = [];
|
||||
let time = new Date(
|
||||
moment()
|
||||
.startOf('day')
|
||||
.format('YYYY/MM/DD'),
|
||||
);
|
||||
let tempValue = startTimeValue;
|
||||
time.setMinutes(time.getMinutes() + tempValue);
|
||||
let startOption = (
|
||||
<Option value={String(tempValue)}>
|
||||
{this.timeConverter(
|
||||
`${String(time)
|
||||
.split(' ')[4]
|
||||
.substring(0, 5)}`,
|
||||
)}
|
||||
</Option>
|
||||
);
|
||||
timeOptions.push(startOption);
|
||||
|
||||
while (tempValue !== endTimeValue) {
|
||||
time = new Date(
|
||||
moment()
|
||||
.startOf('day')
|
||||
.format('YYYY/MM/DD'),
|
||||
);
|
||||
tempValue += timeIncrement;
|
||||
if (tempValue > 1440) {
|
||||
tempValue = 0;
|
||||
continue;
|
||||
}
|
||||
time.setMinutes(time.getMinutes() + tempValue);
|
||||
let option = (
|
||||
<Option value={String(tempValue)}>
|
||||
{this.timeConverter(
|
||||
`${String(time)
|
||||
.split(' ')[4]
|
||||
.substring(0, 5)}`,
|
||||
)}
|
||||
</Option>
|
||||
);
|
||||
timeOptions.push(option);
|
||||
}
|
||||
return timeOptions;
|
||||
};
|
||||
|
||||
// handle items which handle from radio buttons
|
||||
handleRadioPanel = (e, subPanel) => {
|
||||
{
|
||||
subPanel.map((panel, i) => {
|
||||
if (panel.value === e.target.value) {
|
||||
document.getElementById(panel.value).style.display = 'block';
|
||||
} else {
|
||||
document.getElementById(panel.value).style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// handle items which handle from select options
|
||||
handleSelectedPanel = (e, subPanel) => {
|
||||
{
|
||||
subPanel.map((panel, i) => {
|
||||
if (panel.id === e) {
|
||||
document.getElementById(panel.id).style.display = 'block';
|
||||
} else {
|
||||
document.getElementById(panel.id).style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// handle items which handle from checkbox
|
||||
handleSubPanel = e => {
|
||||
if (e.target.checked) {
|
||||
let joined = this.state.activeSubPanelKeys.concat(e.target.id);
|
||||
this.setState({ activeSubPanelKeys: joined });
|
||||
} else {
|
||||
let index = this.state.activeSubPanelKeys.indexOf(e.target.id);
|
||||
if (index !== -1) {
|
||||
this.state.activeSubPanelKeys.splice(index, 1);
|
||||
let removed = this.state.activeSubPanelKeys;
|
||||
this.setState({ activeSubPanelKeys: removed });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// handle Switch on off button
|
||||
handleMainPanel = (e, ref) => {
|
||||
if (e) {
|
||||
let joined = this.state.activePanelKeys.concat(ref);
|
||||
this.setState({ activePanelKeys: joined });
|
||||
} else {
|
||||
let index = this.state.activePanelKeys.indexOf(ref);
|
||||
if (index !== -1) {
|
||||
this.state.activePanelKeys.splice(index, 1);
|
||||
let removed = this.state.activePanelKeys;
|
||||
this.setState({ activePanelKeys: removed });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleCustomInputTable = event => {
|
||||
const { count, customInputDataArray } = this.state;
|
||||
|
||||
const newData = [
|
||||
{
|
||||
key: count,
|
||||
CERT_NAME: `${event.file.name}`,
|
||||
},
|
||||
];
|
||||
this.setState({
|
||||
customInputDataArray: [...customInputDataArray, newData],
|
||||
count: count + 1,
|
||||
});
|
||||
};
|
||||
|
||||
handleAdd = array => {
|
||||
const { count, inputTableDataSources } = this.state;
|
||||
const newData = [
|
||||
{
|
||||
key: count,
|
||||
},
|
||||
];
|
||||
inputTableDataSources[array].push(newData);
|
||||
Object.defineProperty(inputTableDataSources, array, {
|
||||
value: inputTableDataSources[array],
|
||||
});
|
||||
this.setState({
|
||||
inputTableDataSources,
|
||||
count: count + 1,
|
||||
});
|
||||
};
|
||||
|
||||
getColumns = ({ getFieldDecorator }, arr) => {
|
||||
const columnArray = [];
|
||||
const actionColumn = [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'operation',
|
||||
render: (name, row) => (
|
||||
<Form.Item>
|
||||
<Popconfirm title="Sure to delete?">
|
||||
<a>
|
||||
<Text type="danger">
|
||||
<Icon type="delete" />
|
||||
</Text>
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Form.Item>
|
||||
),
|
||||
},
|
||||
];
|
||||
Object.values(arr).map((columnData, c) => {
|
||||
if (columnData.type === 'input') {
|
||||
const column = {
|
||||
title: `${columnData.name}`,
|
||||
dataIndex: `${columnData.key}`,
|
||||
key: `${columnData.key}`,
|
||||
render: (name, row, i) => (
|
||||
<Form.Item>
|
||||
{getFieldDecorator(`${columnData.key}${i}`, {})(
|
||||
<Input
|
||||
type={columnData.others.inputType}
|
||||
placeholder={columnData.others.placeholder}
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
),
|
||||
};
|
||||
columnArray.push(column);
|
||||
} else if (columnData.type === 'upload') {
|
||||
const column = {
|
||||
title: `${columnData.name}`,
|
||||
dataIndex: `${columnData.key}`,
|
||||
key: `${columnData.key}`,
|
||||
render: (name, row, i) => (
|
||||
<Form.Item>
|
||||
{getFieldDecorator(`${columnData.key}${i}`, {})(
|
||||
<Upload>
|
||||
<Button>
|
||||
<Icon type="upload" /> Choose file
|
||||
</Button>
|
||||
</Upload>,
|
||||
)}
|
||||
</Form.Item>
|
||||
),
|
||||
};
|
||||
columnArray.push(column);
|
||||
} else if (columnData.type === 'select') {
|
||||
const column = {
|
||||
title: `${columnData.name}`,
|
||||
dataIndex: `${columnData.key}`,
|
||||
key: `${columnData.key}`,
|
||||
render: (name, row, i) => (
|
||||
<Form.Item>
|
||||
{getFieldDecorator(`${columnData.key}${i}`, {
|
||||
initialValue: columnData.others.initialDataIndex,
|
||||
})(
|
||||
<Select>
|
||||
{columnData.others.option.map((option, i) => {
|
||||
return (
|
||||
<Option key={i} value={option.key}>
|
||||
{option.value}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
),
|
||||
};
|
||||
columnArray.push(column);
|
||||
}
|
||||
});
|
||||
const columns = columnArray.concat(actionColumn);
|
||||
return columns;
|
||||
};
|
||||
|
||||
// generate payload by adding policy configurations
|
||||
onHandleContinue = (e, formname) => {
|
||||
const allFields = this.props.form.getFieldsValue();
|
||||
let activeFields = [];
|
||||
// get currently active field list
|
||||
for (let i = 0; i < this.state.activePanelKeys.length; i++) {
|
||||
Object.keys(allFields).map(key => {
|
||||
if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
|
||||
if (
|
||||
subPanelpayloadAttributes.hasOwnProperty(
|
||||
`${this.state.activePanelKeys[i]}`,
|
||||
)
|
||||
) {
|
||||
Object.keys(
|
||||
subPanelpayloadAttributes[this.state.activePanelKeys[i]],
|
||||
).map(subPanel => {
|
||||
if (`${this.state.activePanelKeys[i]}-${subPanel}` === true) {
|
||||
if (key.includes(`-${subPanel}-`)) {
|
||||
activeFields.push(key);
|
||||
}
|
||||
} else if (!key.includes(`-${subPanel}-`)) {
|
||||
activeFields.push(key);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
activeFields.push(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.onFieldValidate(activeFields, formname);
|
||||
};
|
||||
|
||||
onFieldValidate = (fields, formName) => {
|
||||
// validate fields and get profile features list
|
||||
this.props.form.validateFields(fields, (err, values) => {
|
||||
if (!err) {
|
||||
let profileFeaturesList = [];
|
||||
for (let i = 0; i < this.state.activePanelKeys.length; i++) {
|
||||
let content = {};
|
||||
Object.entries(values).map(([key, value]) => {
|
||||
if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
|
||||
content[
|
||||
key.replace(`${this.state.activePanelKeys[i]}-`, '')
|
||||
] = value;
|
||||
}
|
||||
});
|
||||
let feature = {
|
||||
featureCode: this.state.activePanelKeys[i],
|
||||
deviceType: this.props.deviceType,
|
||||
content: content,
|
||||
};
|
||||
profileFeaturesList.push(feature);
|
||||
}
|
||||
this.props.getPolicyPayloadData(formName, profileFeaturesList);
|
||||
this.props.getNextStep();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// generate form items
|
||||
getPanelItems = (panel, panelId) => {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const subPanelList = {};
|
||||
return panel.map((item, k) => {
|
||||
switch (item.type) {
|
||||
case 'select':
|
||||
if (item.optional.hasOwnProperty('subPanel')) {
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: `${item.optional.option[0].name}`,
|
||||
})(
|
||||
<Select
|
||||
onChange={e =>
|
||||
this.handleSelectedPanel(e, item.optional.subPanel)
|
||||
}
|
||||
>
|
||||
{item.optional.option.map((option, i) => {
|
||||
return (
|
||||
<Option key={i} value={option.value}>
|
||||
{option.name}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className={'sub-panel-container'}>
|
||||
{item.optional.subPanel.map((panel, i) => {
|
||||
return (
|
||||
<div
|
||||
id={panel.id}
|
||||
key={i}
|
||||
style={
|
||||
panel.id === item.optional.initialDataIndex
|
||||
? { display: 'block' }
|
||||
: { display: 'none' }
|
||||
}
|
||||
>
|
||||
{this.getPanelItems(panel.panelItem)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: `${item.optional.option[0].name}`,
|
||||
})(
|
||||
<Select>
|
||||
{item.optional.option.map((option, i) => {
|
||||
return (
|
||||
<Option key={i} value={option.value}>
|
||||
{option.name}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'timeSelector':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: item.optional.initialDataIndex,
|
||||
})(
|
||||
<Select>
|
||||
{this.getOptionForTimeSelectors(
|
||||
item.optional.firstOptionValue,
|
||||
item.optional.lastOptionValue,
|
||||
item.optional.valueDifference,
|
||||
)}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'input':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
rules: [
|
||||
{
|
||||
pattern: new RegExp(`${item.optional.rules.regex}`),
|
||||
message: `${item.optional.rules.validationMsg}`,
|
||||
},
|
||||
],
|
||||
})(<Input placeholder={item.optional.placeholder} />)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'checkbox':
|
||||
if (item.optional.hasOwnProperty('subPanel')) {
|
||||
return (
|
||||
<div key={k}>
|
||||
<Collapse
|
||||
bordered={false}
|
||||
activeKey={this.state.activeSubPanelKeys}
|
||||
>
|
||||
<Collapse.Panel
|
||||
key={item.id}
|
||||
showArrow={false}
|
||||
style={{ border: 0 }}
|
||||
header={
|
||||
<Form.Item key={k}>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
valuePropName: 'checked',
|
||||
initialValue: item.optional.ischecked,
|
||||
})(
|
||||
<Checkbox onChange={this.handleSubPanel}>
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</Checkbox>,
|
||||
)}
|
||||
</Form.Item>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
{item.optional.subPanel.map((panel, i) => {
|
||||
subPanelList[panel.others.itemSwitch] =
|
||||
panel.others.itemPayload;
|
||||
if (
|
||||
subPanelpayloadAttributes.hasOwnProperty(panelId)
|
||||
) {
|
||||
Object.assign(
|
||||
subPanelpayloadAttributes[panelId],
|
||||
subPanelList,
|
||||
);
|
||||
} else {
|
||||
subPanelpayloadAttributes[panelId] = subPanelList;
|
||||
}
|
||||
return (
|
||||
<div key={i}>
|
||||
{this.getPanelItems(panel.panelItem, panelId)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form.Item key={k}>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
valuePropName: 'checked',
|
||||
initialValue: item.optional.ischecked,
|
||||
})(
|
||||
<Checkbox>
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</Checkbox>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'textArea':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: null,
|
||||
})(
|
||||
<TextArea
|
||||
placeholder={item.optional.placeholder}
|
||||
rows={item.optional.row}
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'radioGroup':
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: `${item.optional.initialValue}`,
|
||||
})(
|
||||
<Radio.Group
|
||||
onChange={e =>
|
||||
this.handleRadioPanel(e, item.optional.radio)
|
||||
}
|
||||
>
|
||||
{item.optional.radio.map((option, i) => {
|
||||
return (
|
||||
<Radio key={i} value={option.value}>
|
||||
{option.name}
|
||||
</Radio>
|
||||
);
|
||||
})}
|
||||
</Radio.Group>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className={'sub-panel-container'}>
|
||||
{item.optional.subPanel.map((panel, i) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
id={panel.id}
|
||||
style={
|
||||
panel.id === item.optional.initialValue
|
||||
? { display: 'block' }
|
||||
: { display: 'none' }
|
||||
}
|
||||
>
|
||||
{this.getPanelItems(panel.panelItem)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'title':
|
||||
return (
|
||||
<Title key={k} level={4}>
|
||||
{item.label}{' '}
|
||||
</Title>
|
||||
);
|
||||
case 'paragraph':
|
||||
return (
|
||||
<Paragraph key={k} style={{ marginTop: 20 }}>
|
||||
{item.label}{' '}
|
||||
</Paragraph>
|
||||
);
|
||||
case 'alert':
|
||||
return (
|
||||
<Alert key={k} description={item.label} type="warning" showIcon />
|
||||
);
|
||||
case 'upload':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('upload', {})(
|
||||
<Upload>
|
||||
<Button>
|
||||
<Icon type="upload" /> Click to upload
|
||||
</Button>
|
||||
</Upload>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'inputTable':
|
||||
if (
|
||||
!(`${item.optional.dataSource}` in this.state.inputTableDataSources)
|
||||
) {
|
||||
Object.defineProperty(
|
||||
this.state.inputTableDataSources,
|
||||
`${item.optional.dataSource}`,
|
||||
{ value: [], writable: true },
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div key={k}>
|
||||
<Button
|
||||
onClick={() => this.handleAdd(item.optional.dataSource)}
|
||||
type="primary"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Icon type="plus-circle" />
|
||||
{item.optional.button.name}
|
||||
</Button>
|
||||
<Table
|
||||
id={item.id}
|
||||
dataSource={
|
||||
this.state.inputTableDataSources[item.optional.dataSource]
|
||||
}
|
||||
columns={this.getColumns(
|
||||
{ getFieldDecorator },
|
||||
item.optional.columns,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'customInputTable':
|
||||
return (
|
||||
<div key={k}>
|
||||
<Upload onChange={this.handleCustomInputTable}>
|
||||
<Button type="primary" style={{ marginBottom: 16 }}>
|
||||
<Icon type="plus-circle" />
|
||||
{item.optional.button.name}
|
||||
</Button>
|
||||
</Upload>
|
||||
<Table
|
||||
id={item.id}
|
||||
dataSource={this.state.customInputDataArray}
|
||||
columns={this.getColumns(
|
||||
{ getFieldDecorator },
|
||||
item.optional.columns,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { policyUIConfigurationsList } = this.props;
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div className="tab-container">
|
||||
<Tabs
|
||||
tabPosition={'left'}
|
||||
size={'large'}
|
||||
onTabClick={this.setProfileInfo}
|
||||
>
|
||||
{policyUIConfigurationsList.map((element, i) => {
|
||||
return (
|
||||
<TabPane tab={<span>{element.name}</span>} key={i}>
|
||||
{Object.values(element.panels).map((panel, j) => {
|
||||
panel = panel.panel;
|
||||
return (
|
||||
<div key={j}>
|
||||
<Collapse
|
||||
bordered={false}
|
||||
activeKey={this.state.activePanelKeys}
|
||||
>
|
||||
<Collapse.Panel
|
||||
key={panel.panelId}
|
||||
showArrow={false}
|
||||
style={{ border: 0 }}
|
||||
header={
|
||||
<div>
|
||||
<Row>
|
||||
<Col offset={0} span={14}>
|
||||
<Title level={4}> {panel.title} </Title>
|
||||
</Col>
|
||||
<Col offset={8} span={1}>
|
||||
<Switch
|
||||
checkedChildren="ON"
|
||||
unCheckedChildren="OFF"
|
||||
onChange={e =>
|
||||
this.handleMainPanel(
|
||||
e,
|
||||
`${panel.panelId}`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>{panel.description}</Row>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{panel.hasOwnProperty('panelItem') && (
|
||||
<div>
|
||||
<Form name={panel.panelId}>
|
||||
<Form.Item style={{ display: 'none' }}>
|
||||
{getFieldDecorator(`${panel.panelId}`, {
|
||||
initialValue: ' ',
|
||||
})(<Input />)}
|
||||
</Form.Item>
|
||||
{this.getPanelItems(
|
||||
panel.panelItem,
|
||||
panel.panelId,
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
)}
|
||||
{panel.hasOwnProperty('subFormLists') && (
|
||||
<div>
|
||||
{Object.values(panel.subFormLists).map(
|
||||
(form, i) => {
|
||||
return (
|
||||
<Form name={form.id} key={i}>
|
||||
<Form.Item style={{ display: 'none' }}>
|
||||
{getFieldDecorator(`${form.id}`, {
|
||||
initialValue: ' ',
|
||||
})(<Input />)}
|
||||
</Form.Item>
|
||||
{this.getPanelItems(form.panelItem)}
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</TabPane>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
<Col span={16} offset={20}>
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={e => this.onHandleContinue(e, 'configureProfileData')}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create()(ConfigureProfile));
|
||||
@ -0,0 +1,86 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
onClickSavePolicy = (event, formName) => {
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.props.getPolicyPayloadData(formName, values);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { policyData } = this.props;
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
label={'Set a name to your policy *'}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator('policyName', {
|
||||
initialValue: policyData.policyName,
|
||||
rules: [
|
||||
{
|
||||
pattern: new RegExp('^.{1,30}$'),
|
||||
message: 'Should be 1-to-30 characters long',
|
||||
},
|
||||
],
|
||||
})(<Input placeholder={'Should be 1 to 30 characters long'} />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={'Add a Description'} style={{ display: 'block' }}>
|
||||
{getFieldDecorator('description', {
|
||||
initialValue: policyData.description,
|
||||
})(<TextArea rows={8} />)}
|
||||
</Form.Item>
|
||||
<Col span={16} offset={18}>
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={e => this.onClickSavePolicy(e, 'publishDevicesData')}
|
||||
>
|
||||
Save & Publish
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={e => this.onClickSavePolicy(e, 'publishDevicesData')}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create()(PublishDevices));
|
||||
@ -0,0 +1,182 @@
|
||||
/*
|
||||
* 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,
|
||||
Col,
|
||||
Form,
|
||||
Icon,
|
||||
message,
|
||||
notification,
|
||||
Radio,
|
||||
Select,
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
import { withConfigContext } from '../../../../../../../../components/ConfigContext';
|
||||
import axios from 'axios';
|
||||
const { Option } = Select;
|
||||
|
||||
class SelectPolicyType extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
correctivePoliciesList: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchPolicies();
|
||||
}
|
||||
|
||||
// generate payload using Select policy type
|
||||
onHandleContinue = (e, formName) => {
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (
|
||||
values.policyType === 'CORRECTIVE' ||
|
||||
values.correctiveActions === 'NONE'
|
||||
) {
|
||||
values.correctiveActions = [];
|
||||
}
|
||||
this.props.getPolicyPayloadData(formName, values);
|
||||
this.props.getNextStep();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
fetchPolicies = () => {
|
||||
let apiUrl =
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/policies';
|
||||
|
||||
// send request to the invokerss
|
||||
axios
|
||||
.get(apiUrl)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
let policies = res.data.data.policies;
|
||||
let correctivePolicies = [];
|
||||
for (let i = 0; i < policies.length; i++) {
|
||||
if (policies[i].policyType === 'CORRECTIVE') {
|
||||
correctivePolicies.push(
|
||||
<Option key={policies[i].profileId}>
|
||||
{policies[i].policyName}
|
||||
</Option>,
|
||||
);
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
correctivePoliciesList: correctivePolicies,
|
||||
});
|
||||
}
|
||||
})
|
||||
.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 policies.',
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
};
|
||||
|
||||
handlePolicyTypes = event => {
|
||||
if (event.target.value === 'GENERAL') {
|
||||
document.getElementById('generalPolicySubPanel').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('generalPolicySubPanel').style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { policyData } = this.props;
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
let correctiveActions = null;
|
||||
if (policyData.correctiveActions.length > 0) {
|
||||
correctiveActions = '';
|
||||
} else {
|
||||
correctiveActions = 'NONE';
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form.Item style={{ display: 'block' }}>
|
||||
{getFieldDecorator('policyType', {
|
||||
initialValue: policyData.policyType,
|
||||
})(
|
||||
<Radio.Group onChange={this.handlePolicyTypes}>
|
||||
<Radio value="GENERAL">General Policy</Radio>
|
||||
<Radio value="CORRECTIVE">Corrective Policy</Radio>
|
||||
</Radio.Group>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<div id="generalPolicySubPanel" style={{ display: 'block' }}>
|
||||
<Form.Item
|
||||
label={
|
||||
<span>
|
||||
Select Corrective Policy
|
||||
<Tooltip
|
||||
title={
|
||||
'Select the corrective policy to be applied when this general policy is violated'
|
||||
}
|
||||
placement="right"
|
||||
>
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('correctiveActions', {
|
||||
initialValue: correctiveActions,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="NONE">None</Option>
|
||||
{this.state.correctivePoliciesList}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Col span={16} offset={20}>
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={e => this.onHandleContinue(e, 'policyTypeData')}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create()(SelectPolicyType));
|
||||
@ -0,0 +1,273 @@
|
||||
/*
|
||||
* 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 { Form, Row, Col, Card, Steps, message, notification } from 'antd';
|
||||
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
||||
import ConfigureProfile from './components/ConfigureProfile';
|
||||
import SelectPolicyType from './components/SelectPolicyType';
|
||||
import AssignGroups from './components/AssignGroups';
|
||||
import PublishDevices from './components/PublishDevices';
|
||||
import axios from 'axios';
|
||||
const { Step } = Steps;
|
||||
|
||||
class EditPolicy extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
currentStepIndex: 0,
|
||||
policyUIConfigurationsList: null,
|
||||
newPolicyPayload: { compliance: 'enforce' },
|
||||
policyProfile: {},
|
||||
payloadData: {},
|
||||
policyFeatureList: [],
|
||||
policyData: {},
|
||||
deviceType: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getSelectedPolicy(this.props.policyId);
|
||||
}
|
||||
|
||||
getPolicyPayloadData = (dataName, dataValue) => {
|
||||
Object.defineProperty(this.state.payloadData, dataName, {
|
||||
value: dataValue,
|
||||
writable: true,
|
||||
});
|
||||
if (dataName === 'publishDevicesData') {
|
||||
this.createPayload();
|
||||
}
|
||||
};
|
||||
|
||||
createPayload = () => {
|
||||
const {
|
||||
publishDevicesData,
|
||||
configureProfileData,
|
||||
policyTypeData,
|
||||
groupData,
|
||||
} = this.state.payloadData;
|
||||
const profile = {
|
||||
profileName: publishDevicesData.policyName,
|
||||
deviceType: this.state.deviceType,
|
||||
profileFeaturesList: configureProfileData,
|
||||
};
|
||||
|
||||
const payload = {
|
||||
...publishDevicesData,
|
||||
compliance: 'enforce',
|
||||
ownershipType: null,
|
||||
...policyTypeData,
|
||||
profile: profile,
|
||||
...groupData,
|
||||
};
|
||||
this.onEditPolicy(JSON.stringify(payload));
|
||||
};
|
||||
|
||||
getSelectedPolicy = policyId => {
|
||||
let apiUrl =
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/policies/' +
|
||||
policyId;
|
||||
|
||||
// send request to the invokers
|
||||
axios
|
||||
.get(apiUrl)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
isLoading: true,
|
||||
policyData: res.data.data,
|
||||
deviceType: res.data.data.profile.deviceType,
|
||||
policyFeatureList: res.data.data.profile.profileFeaturesList,
|
||||
});
|
||||
this.getPolicyConfigJson(res.data.data.profile.deviceType);
|
||||
}
|
||||
})
|
||||
.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 selected policy.',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getPolicyConfigJson = type => {
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
let apiUrl =
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/device-types/' +
|
||||
type +
|
||||
'/ui-policy-configurations';
|
||||
// send request to the invokers
|
||||
axios
|
||||
.get(apiUrl)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
policyUIConfigurationsList: JSON.parse(res.data.data),
|
||||
});
|
||||
}
|
||||
})
|
||||
.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 Policy details.',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onEditPolicy = value => {
|
||||
axios
|
||||
.put(
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/policies/' +
|
||||
this.props.policyId,
|
||||
value,
|
||||
{ headers: { 'Content-Type': 'application-json' } },
|
||||
)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
notification.success({
|
||||
message: 'Done',
|
||||
duration: 4,
|
||||
description: 'Successfully Updated the Policy.',
|
||||
});
|
||||
}
|
||||
})
|
||||
.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 Updated the Policy.',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getNextStep = () => {
|
||||
const currentStepIndex = this.state.currentStepIndex + 1;
|
||||
this.setState({ currentStepIndex });
|
||||
};
|
||||
|
||||
getPrevStep = () => {
|
||||
const currentStepIndex = this.state.currentStepIndex - 1;
|
||||
this.setState({ currentStepIndex });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
currentStepIndex,
|
||||
policyUIConfigurationsList,
|
||||
policyFeatureList,
|
||||
policyData,
|
||||
deviceType,
|
||||
} = this.state;
|
||||
return (
|
||||
<div>
|
||||
{policyUIConfigurationsList != null && (
|
||||
<Row>
|
||||
<Col span={20} offset={2}>
|
||||
<Steps style={{ minHeight: 32 }} current={currentStepIndex}>
|
||||
<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" />
|
||||
</Steps>
|
||||
</Col>
|
||||
<Col span={16} offset={4}>
|
||||
<Card style={{ marginTop: 24 }}>
|
||||
<div
|
||||
style={{ display: currentStepIndex === 0 ? 'unset' : 'none' }}
|
||||
>
|
||||
<ConfigureProfile
|
||||
policyUIConfigurationsList={policyUIConfigurationsList}
|
||||
getPolicyPayloadData={this.getPolicyPayloadData}
|
||||
getNextStep={this.getNextStep}
|
||||
policyFeatureList={policyFeatureList}
|
||||
deviceType={deviceType}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: currentStepIndex === 1 ? 'unset' : 'none' }}
|
||||
>
|
||||
<SelectPolicyType
|
||||
getPolicyPayloadData={this.getPolicyPayloadData}
|
||||
policyData={policyData}
|
||||
getPrevStep={this.getPrevStep}
|
||||
getNextStep={this.getNextStep}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: currentStepIndex === 2 ? 'unset' : 'none' }}
|
||||
>
|
||||
<AssignGroups
|
||||
getPolicyPayloadData={this.getPolicyPayloadData}
|
||||
policyData={policyData}
|
||||
getPrevStep={this.getPrevStep}
|
||||
getNextStep={this.getNextStep}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: currentStepIndex === 3 ? 'unset' : 'none' }}
|
||||
>
|
||||
<PublishDevices
|
||||
policyData={policyData}
|
||||
getPolicyPayloadData={this.getPolicyPayloadData}
|
||||
getPrevStep={this.getPrevStep}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(
|
||||
Form.create({ name: 'edit-policy' })(EditPolicy),
|
||||
);
|
||||
@ -0,0 +1,55 @@
|
||||
/*
|
||||
* 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 { Divider, Icon, Tooltip } from 'antd';
|
||||
import { withConfigContext } from '../../../../../../../../components/ConfigContext';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
class PolicyAction extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<Tooltip placement="top" title={'Edit Policy'}>
|
||||
<Link
|
||||
to={`/entgra/policy/edit/${this.props.selectedPolicyData.id}`}
|
||||
>
|
||||
<Icon type="edit" />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="top" title={''}>
|
||||
<Link
|
||||
to={`/entgra/policy/view/${this.props.selectedPolicyData.id}`}
|
||||
>
|
||||
<Icon type="eye" />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(PolicyAction);
|
||||
@ -0,0 +1,170 @@
|
||||
/*
|
||||
* 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, Tooltip, Popconfirm, Divider } from 'antd';
|
||||
|
||||
class BulkActionBar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedMultiple: false,
|
||||
selectedSingle: false,
|
||||
isPolicyActive: true,
|
||||
};
|
||||
}
|
||||
|
||||
// This method checks whether active devices are selected
|
||||
onCheckPolicyStatus = () => {
|
||||
let tempIsPolicyActive;
|
||||
for (let i = 0; i < this.props.selectedRows.length; i++) {
|
||||
if (this.props.selectedRows[i].active) {
|
||||
tempIsPolicyActive = true;
|
||||
break;
|
||||
}
|
||||
tempIsPolicyActive = false;
|
||||
}
|
||||
this.setState({ isPolicyActive: tempIsPolicyActive });
|
||||
};
|
||||
|
||||
onConfirmRemove = () => {
|
||||
if (!this.state.isPolicyActive) {
|
||||
this.props.removePolicy();
|
||||
}
|
||||
};
|
||||
|
||||
onConfirmPublish = () => {
|
||||
if (!this.state.isPolicyActive) {
|
||||
this.props.publishPolicy();
|
||||
}
|
||||
};
|
||||
|
||||
onConfirmUnpublish = () => {
|
||||
if (this.state.isPolicyActive) {
|
||||
this.props.unpublishPolicy();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const isSelected = this.props.selectedRows.length > 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Tooltip placement="bottom" title={'Apply Changes to Device'}>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
title={'Do you really want to apply changes to all policies?'}
|
||||
onConfirm={this.props.applyChanges}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
shape="circle"
|
||||
icon="check-circle"
|
||||
size={'default'}
|
||||
style={{ margin: '2px' }}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: isSelected ? 'inline' : 'none', padding: '8px' }}
|
||||
>
|
||||
<Tooltip
|
||||
placement="bottom"
|
||||
title={'Remove'}
|
||||
autoAdjustOverflow={true}
|
||||
>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
title={
|
||||
!this.state.isPolicyActive
|
||||
? 'Do you really want to remove the selected policy(s)?'
|
||||
: 'You cannot select already active policies. Please deselect active policies and try again.'
|
||||
}
|
||||
onConfirm={this.onConfirmRemove}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
shape="circle"
|
||||
icon="delete"
|
||||
size={'default'}
|
||||
onClick={this.onCheckPolicyStatus}
|
||||
style={{ margin: '2px' }}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="bottom" title={'Publish'}>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
title={
|
||||
!this.state.isPolicyActive
|
||||
? 'Do you really want to publish the selected policy(s)??'
|
||||
: 'You cannot select already active policies. Please deselect active policies and try again.'
|
||||
}
|
||||
okText="Yes"
|
||||
onConfirm={this.onConfirmPublish}
|
||||
cancelText="No"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
shape="circle"
|
||||
icon="import"
|
||||
onClick={this.onCheckPolicyStatus}
|
||||
size={'default'}
|
||||
style={{
|
||||
margin: '2px',
|
||||
}}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="bottom" title={'Unpublish'}>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
title={
|
||||
this.state.isPolicyActive
|
||||
? 'Do you really want to unpublish the selected policy(s)?'
|
||||
: 'You cannot select already inactive policies to be unpublished. Please deselect inactive policies and try again.'
|
||||
}
|
||||
okText="Yes"
|
||||
onConfirm={this.onConfirmUnpublish}
|
||||
cancelText="No"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
shape="circle"
|
||||
icon="export"
|
||||
onClick={this.onCheckPolicyStatus}
|
||||
size={'default'}
|
||||
style={{ margin: '2px' }}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BulkActionBar;
|
||||
@ -0,0 +1,756 @@
|
||||
/*
|
||||
* 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 {
|
||||
Alert,
|
||||
Button,
|
||||
Checkbox,
|
||||
Col,
|
||||
Collapse,
|
||||
Form,
|
||||
Icon,
|
||||
Input,
|
||||
Popconfirm,
|
||||
Radio,
|
||||
Row,
|
||||
Select,
|
||||
Table,
|
||||
Tabs,
|
||||
Tooltip,
|
||||
Typography,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
import { withConfigContext } from '../../../../../../../../components/ConfigContext';
|
||||
import moment from 'moment';
|
||||
|
||||
const { Text, Title, Paragraph } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const subPanelpayloadAttributes = {};
|
||||
const fieldKeys = [];
|
||||
|
||||
class PolicyInfo extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
data: {},
|
||||
policyFeatureList: [],
|
||||
activePanelKeys: [],
|
||||
profilePreviewKey: '',
|
||||
customInputDataArray: [],
|
||||
inputTableDataSources: {},
|
||||
isInfoPreview: false,
|
||||
};
|
||||
}
|
||||
|
||||
setProfileInfo = e => {
|
||||
let activePolicies = [];
|
||||
let activePolicyFields = {};
|
||||
const allFields = this.props.form.getFieldsValue();
|
||||
this.props.policyFeatureList.map(element => {
|
||||
activePolicies.push(element.featureCode);
|
||||
let featureData = JSON.parse(element.content);
|
||||
Object.keys(featureData).map(key => {
|
||||
let regex = new RegExp(`${element.featureCode}.+${key}`, 'g');
|
||||
Object.keys(allFields).map(fieldName => {
|
||||
if (fieldName.match(regex) != null) {
|
||||
activePolicyFields[fieldName] = featureData[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
this.props.form.setFieldsValue(activePolicyFields);
|
||||
this.setState({
|
||||
activePanelKeys: activePolicies,
|
||||
});
|
||||
};
|
||||
|
||||
// convert time from 24h format to 12h format
|
||||
timeConverter = time => {
|
||||
time = time
|
||||
.toString()
|
||||
.match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
|
||||
if (time.length > 1) {
|
||||
time = time.slice(1);
|
||||
time[5] = +time[0] < 12 ? ' AM' : ' PM';
|
||||
time[0] = +time[0] % 12 || 12;
|
||||
}
|
||||
return time.join('');
|
||||
};
|
||||
|
||||
// get Option value from start Time, end Time and time difference between 2 values
|
||||
getOptionForTimeSelectors = (startTimeValue, endTimeValue, timeIncrement) => {
|
||||
let timeOptions = [];
|
||||
let time = new Date(
|
||||
moment()
|
||||
.startOf('day')
|
||||
.format('YYYY/MM/DD'),
|
||||
);
|
||||
let tempValue = startTimeValue;
|
||||
time.setMinutes(time.getMinutes() + tempValue);
|
||||
let startOption = (
|
||||
<Option value={String(tempValue)}>
|
||||
{this.timeConverter(
|
||||
`${String(time)
|
||||
.split(' ')[4]
|
||||
.substring(0, 5)}`,
|
||||
)}
|
||||
</Option>
|
||||
);
|
||||
timeOptions.push(startOption);
|
||||
|
||||
while (tempValue !== endTimeValue) {
|
||||
time = new Date(
|
||||
moment()
|
||||
.startOf('day')
|
||||
.format('YYYY/MM/DD'),
|
||||
);
|
||||
tempValue += timeIncrement;
|
||||
if (tempValue > 1440) {
|
||||
tempValue = 0;
|
||||
continue;
|
||||
}
|
||||
time.setMinutes(time.getMinutes() + tempValue);
|
||||
let option = (
|
||||
<Option value={String(tempValue)}>
|
||||
{this.timeConverter(
|
||||
`${String(time)
|
||||
.split(' ')[4]
|
||||
.substring(0, 5)}`,
|
||||
)}
|
||||
</Option>
|
||||
);
|
||||
timeOptions.push(option);
|
||||
}
|
||||
return timeOptions;
|
||||
};
|
||||
|
||||
// handle items which handle from radio buttons
|
||||
handleRadioPanel = (e, subPanel) => {
|
||||
{
|
||||
subPanel.map((panel, i) => {
|
||||
if (panel.value === e.target.value) {
|
||||
document.getElementById(panel.value).style.display = 'block';
|
||||
} else {
|
||||
document.getElementById(panel.value).style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// handle items which handle from select options
|
||||
handleSelectedPanel = (e, subPanel) => {
|
||||
{
|
||||
subPanel.map((panel, i) => {
|
||||
if (panel.id === e) {
|
||||
document.getElementById(panel.id).style.display = 'block';
|
||||
} else {
|
||||
document.getElementById(panel.id).style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
getColumns = ({ getFieldDecorator }, arr) => {
|
||||
const columnArray = [];
|
||||
const actionColumn = [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'operation',
|
||||
render: (name, row) => (
|
||||
<Form.Item>
|
||||
<Popconfirm title="Sure to delete?">
|
||||
<a>
|
||||
<Text type="danger">
|
||||
<Icon type="delete" />
|
||||
</Text>
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Form.Item>
|
||||
),
|
||||
},
|
||||
];
|
||||
Object.values(arr).map((columnData, c) => {
|
||||
if (columnData.type === 'input') {
|
||||
const column = {
|
||||
title: `${columnData.name}`,
|
||||
dataIndex: `${columnData.key}`,
|
||||
key: `${columnData.key}`,
|
||||
render: (name, row, i) => (
|
||||
<Form.Item>
|
||||
{getFieldDecorator(`${columnData.key}${i}`, {})(
|
||||
<Input
|
||||
type={columnData.others.inputType}
|
||||
placeholder={columnData.others.placeholder}
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
),
|
||||
};
|
||||
columnArray.push(column);
|
||||
} else if (columnData.type === 'upload') {
|
||||
const column = {
|
||||
title: `${columnData.name}`,
|
||||
dataIndex: `${columnData.key}`,
|
||||
key: `${columnData.key}`,
|
||||
render: (name, row, i) => (
|
||||
<Form.Item>
|
||||
{getFieldDecorator(`${columnData.key}${i}`, {})(
|
||||
<Upload>
|
||||
<Button>
|
||||
<Icon type="upload" /> Choose file
|
||||
</Button>
|
||||
</Upload>,
|
||||
)}
|
||||
</Form.Item>
|
||||
),
|
||||
};
|
||||
columnArray.push(column);
|
||||
} else if (columnData.type === 'select') {
|
||||
const column = {
|
||||
title: `${columnData.name}`,
|
||||
dataIndex: `${columnData.key}`,
|
||||
key: `${columnData.key}`,
|
||||
render: (name, row, i) => (
|
||||
<Form.Item>
|
||||
{getFieldDecorator(`${columnData.key}${i}`, {
|
||||
initialValue: columnData.others.initialDataIndex,
|
||||
})(
|
||||
<Select>
|
||||
{columnData.others.option.map((option, i) => {
|
||||
return (
|
||||
<Option key={i} value={option.key}>
|
||||
{option.value}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
),
|
||||
};
|
||||
columnArray.push(column);
|
||||
}
|
||||
});
|
||||
const columns = columnArray.concat(actionColumn);
|
||||
return columns;
|
||||
};
|
||||
|
||||
// generate form items
|
||||
getPanelItems = (panel, panelId) => {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const subPanelList = {};
|
||||
return panel.map((item, k) => {
|
||||
fieldKeys.push(item.id);
|
||||
switch (item.type) {
|
||||
case 'select':
|
||||
if (item.optional.hasOwnProperty('subPanel')) {
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: `${item.optional.option[0].name}`,
|
||||
})(
|
||||
<Select
|
||||
onChange={e =>
|
||||
this.handleSelectedPanel(e, item.optional.subPanel)
|
||||
}
|
||||
>
|
||||
{item.optional.option.map((option, i) => {
|
||||
return (
|
||||
<Option key={i} value={option.value}>
|
||||
{option.name}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className={'sub-panel-container'}>
|
||||
{item.optional.subPanel.map((panel, i) => {
|
||||
return (
|
||||
<div
|
||||
id={panel.id}
|
||||
key={i}
|
||||
style={
|
||||
panel.id === item.optional.initialDataIndex
|
||||
? { display: 'block' }
|
||||
: { display: 'none' }
|
||||
}
|
||||
>
|
||||
{this.getPanelItems(panel.panelItem)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: `${item.optional.option[0].name}`,
|
||||
})(
|
||||
<Select>
|
||||
{item.optional.option.map((option, i) => {
|
||||
return (
|
||||
<Option key={i} value={option.value}>
|
||||
{option.name}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'timeSelector':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: item.optional.initialDataIndex,
|
||||
})(
|
||||
<Select>
|
||||
{this.getOptionForTimeSelectors(
|
||||
item.optional.firstOptionValue,
|
||||
item.optional.lastOptionValue,
|
||||
item.optional.valueDifference,
|
||||
)}
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'input':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
rules: [
|
||||
{
|
||||
pattern: new RegExp(`${item.optional.rules.regex}`),
|
||||
message: `${item.optional.rules.validationMsg}`,
|
||||
},
|
||||
],
|
||||
})(<Input placeholder={item.optional.placeholder} disabled />)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'checkbox':
|
||||
if (item.optional.hasOwnProperty('subPanel')) {
|
||||
return (
|
||||
<div key={k}>
|
||||
<Collapse
|
||||
bordered={false}
|
||||
activeKey={this.state.activeSubPanelKeys}
|
||||
>
|
||||
<Collapse.Panel
|
||||
key={item.id}
|
||||
showArrow={false}
|
||||
style={{ border: 0 }}
|
||||
header={
|
||||
<Form.Item key={k}>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
valuePropName: 'checked',
|
||||
initialValue: item.optional.ischecked,
|
||||
})(
|
||||
<Checkbox>
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</Checkbox>,
|
||||
)}
|
||||
</Form.Item>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
{item.optional.subPanel.map((panel, i) => {
|
||||
subPanelList[panel.others.itemSwitch] =
|
||||
panel.others.itemPayload;
|
||||
if (
|
||||
subPanelpayloadAttributes.hasOwnProperty(panelId)
|
||||
) {
|
||||
Object.assign(
|
||||
subPanelpayloadAttributes[panelId],
|
||||
subPanelList,
|
||||
);
|
||||
} else {
|
||||
subPanelpayloadAttributes[panelId] = subPanelList;
|
||||
}
|
||||
return (
|
||||
<div key={i}>
|
||||
{this.getPanelItems(panel.panelItem, panelId)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form.Item key={k}>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
valuePropName: 'checked',
|
||||
initialValue: item.optional.ischecked,
|
||||
})(
|
||||
<Checkbox>
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</Checkbox>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'textArea':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: null,
|
||||
})(
|
||||
<TextArea
|
||||
placeholder={item.optional.placeholder}
|
||||
rows={item.optional.row}
|
||||
disabled
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'radioGroup':
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{getFieldDecorator(`${item.id}`, {
|
||||
initialValue: `${item.optional.initialValue}`,
|
||||
})(
|
||||
<Radio.Group
|
||||
onChange={e =>
|
||||
this.handleRadioPanel(e, item.optional.radio)
|
||||
}
|
||||
>
|
||||
{item.optional.radio.map((option, i) => {
|
||||
return (
|
||||
<Radio key={i} value={option.value}>
|
||||
{option.name}
|
||||
</Radio>
|
||||
);
|
||||
})}
|
||||
</Radio.Group>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className={'sub-panel-container'}>
|
||||
{item.optional.subPanel.map((panel, i) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
id={panel.id}
|
||||
style={
|
||||
panel.id === item.optional.initialValue
|
||||
? { display: 'block' }
|
||||
: { display: 'none' }
|
||||
}
|
||||
>
|
||||
{this.getPanelItems(panel.panelItem)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'title':
|
||||
return (
|
||||
<Title key={k} level={4}>
|
||||
{item.label}{' '}
|
||||
</Title>
|
||||
);
|
||||
case 'paragraph':
|
||||
return (
|
||||
<Paragraph key={k} style={{ marginTop: 20 }}>
|
||||
{item.label}{' '}
|
||||
</Paragraph>
|
||||
);
|
||||
case 'alert':
|
||||
return (
|
||||
<Alert key={k} description={item.label} type="warning" showIcon />
|
||||
);
|
||||
case 'upload':
|
||||
return (
|
||||
<Form.Item
|
||||
key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('upload', {})(
|
||||
<Upload>
|
||||
<Button>
|
||||
<Icon type="upload" /> Click to upload
|
||||
</Button>
|
||||
</Upload>,
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'inputTable':
|
||||
if (
|
||||
!(`${item.optional.dataSource}` in this.state.inputTableDataSources)
|
||||
) {
|
||||
Object.defineProperty(
|
||||
this.state.inputTableDataSources,
|
||||
`${item.optional.dataSource}`,
|
||||
{ value: [], writable: true },
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div key={k}>
|
||||
<Table
|
||||
id={item.id}
|
||||
dataSource={
|
||||
this.state.inputTableDataSources[item.optional.dataSource]
|
||||
}
|
||||
columns={this.getColumns(
|
||||
{ getFieldDecorator },
|
||||
item.optional.columns,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'customInputTable':
|
||||
return (
|
||||
<div key={k}>
|
||||
<Table
|
||||
id={item.id}
|
||||
dataSource={this.state.customInputDataArray}
|
||||
columns={this.getColumns(
|
||||
{ getFieldDecorator },
|
||||
item.optional.columns,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onPreview = e => {
|
||||
this.setState({
|
||||
profilePreviewKey: 'profileInfo',
|
||||
isInfoPreview: true,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { policyUIConfigurationsList } = this.props;
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Title level={4}>Profile Information</Title>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<Button type="link" icon="eye" onClick={this.onPreview}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 'small',
|
||||
display: this.state.isInfoPreview ? 'none' : 'inline',
|
||||
}}
|
||||
>
|
||||
(Click to view policy information)
|
||||
</Text>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Collapse
|
||||
bordered={false}
|
||||
activeKey={this.state.profilePreviewKey}
|
||||
style={{ display: this.state.isInfoPreview ? 'block' : 'none' }}
|
||||
>
|
||||
<Collapse.Panel
|
||||
key={'profileInfo'}
|
||||
showArrow={false}
|
||||
style={{
|
||||
border: 0,
|
||||
}}
|
||||
>
|
||||
<div className="tab-container">
|
||||
<Tabs
|
||||
tabPosition={'left'}
|
||||
size={'large'}
|
||||
onChange={this.setProfileInfo}
|
||||
>
|
||||
{policyUIConfigurationsList.map((element, i) => {
|
||||
return (
|
||||
<TabPane tab={<span>{element.name}</span>} key={i}>
|
||||
{Object.values(element.panels).map((panel, j) => {
|
||||
panel = panel.panel;
|
||||
return (
|
||||
<div key={j}>
|
||||
<Collapse
|
||||
bordered={false}
|
||||
activeKey={this.state.activePanelKeys}
|
||||
>
|
||||
<Collapse.Panel
|
||||
key={panel.panelId}
|
||||
showArrow={false}
|
||||
style={{ border: 0 }}
|
||||
header={
|
||||
<div>
|
||||
<Row>
|
||||
<Col offset={0} span={14}>
|
||||
<Title level={4}> {panel.title} </Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>{panel.description}</Row>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{panel.hasOwnProperty('panelItem') && (
|
||||
<div>
|
||||
<Form name={panel.panelId}>
|
||||
<Form.Item style={{ display: 'none' }}>
|
||||
{getFieldDecorator(`${panel.panelId}`, {
|
||||
initialValue: ' ',
|
||||
})(<Input />)}
|
||||
</Form.Item>
|
||||
{this.getPanelItems(
|
||||
panel.panelItem,
|
||||
panel.panelId,
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
)}
|
||||
{panel.hasOwnProperty('subFormLists') && (
|
||||
<div>
|
||||
{Object.values(panel.subFormLists).map(
|
||||
(form, i) => {
|
||||
return (
|
||||
<Form name={form.id} key={i}>
|
||||
<Form.Item
|
||||
style={{ display: 'none' }}
|
||||
>
|
||||
{getFieldDecorator(`${form.id}`, {
|
||||
initialValue: ' ',
|
||||
})(<Input />)}
|
||||
</Form.Item>
|
||||
{this.getPanelItems(form.panelItem)}
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</TabPane>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create()(PolicyInfo));
|
||||
@ -0,0 +1,131 @@
|
||||
/*
|
||||
* 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 { Card, Col, Icon, Row, Typography } from 'antd';
|
||||
import { withConfigContext } from '../../../../../../../../components/ConfigContext';
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
class ProfileOverview extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
data: {},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { policyData } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<div>
|
||||
<Title level={4}>Policy Overview</Title>
|
||||
</div>
|
||||
<Card>
|
||||
<div style={{ paddingLeft: 4 }}>
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Col span={8}>
|
||||
<Text>Platform</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text>{policyData.profile.deviceType.toUpperCase()}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr style={{ backgroundColor: 'grey' }} />
|
||||
<Row style={{ marginTop: 15 }}>
|
||||
<Col span={8}>
|
||||
<Text>Groups</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text>{policyData.deviceGroups}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Row style={{ marginTop: 15 }}>
|
||||
<Col span={8}>
|
||||
<Text>Action upon non-compliance</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text>{policyData.compliance.toUpperCase()}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Row style={{ marginTop: 15 }}>
|
||||
<Col span={8}>
|
||||
<Text>Status</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text>
|
||||
{policyData.active ? (
|
||||
<span>
|
||||
<Icon
|
||||
type="exclamation-circle"
|
||||
style={{ color: '#6ab04c' }}
|
||||
/>
|
||||
Active
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
<Icon
|
||||
type="exclamation-circle"
|
||||
style={{ color: '#f9ca24' }}
|
||||
/>
|
||||
Inactive
|
||||
</span>
|
||||
)}
|
||||
{policyData.updated ? <span>/Updated</span> : <span></span>}
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Row style={{ marginTop: 15 }}>
|
||||
<Col span={8}>
|
||||
<Text>Assigned Roles</Text>
|
||||
</Col>
|
||||
<Col span={8}>{policyData.roles}</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Row style={{ marginTop: 15 }}>
|
||||
<Col span={8}>
|
||||
<Text type={8}>Policy Type</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text>{policyData.policyType}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<Title level={4}>Description</Title>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Text>{policyData.description}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(ProfileOverview);
|
||||
@ -0,0 +1,147 @@
|
||||
/*
|
||||
* 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 { Col, message, notification } from 'antd';
|
||||
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
||||
import PolicyInfo from './component/PolicyInfo';
|
||||
import ProfileOverview from './component/ProfileOverview';
|
||||
import axios from 'axios';
|
||||
|
||||
class PolicyProfile extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
policyId: this.props.policyId,
|
||||
policyData: null,
|
||||
policyUIConfigurationsList: [],
|
||||
policyFeatureList: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getSelectedPolicy(this.props.policyId);
|
||||
}
|
||||
|
||||
getSelectedPolicy = policyId => {
|
||||
let apiUrl =
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/policies/' +
|
||||
policyId;
|
||||
|
||||
// send request to the invokers
|
||||
axios
|
||||
.get(apiUrl)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
policyData: res.data.data,
|
||||
policyFeatureList: res.data.data.profile.profileFeaturesList,
|
||||
});
|
||||
this.getPolicyConfigJson(res.data.data.profile.deviceType);
|
||||
}
|
||||
})
|
||||
.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 selected policy.',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getPolicyConfigJson = type => {
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
let apiUrl =
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/device-types/' +
|
||||
type +
|
||||
'/ui-policy-configurations';
|
||||
// send request to the invokers
|
||||
axios
|
||||
.get(apiUrl)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
policyUIConfigurationsList: JSON.parse(res.data.data),
|
||||
});
|
||||
}
|
||||
})
|
||||
.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 Policy details.',
|
||||
});
|
||||
}
|
||||
this.setState({ isLoading: false });
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
policyData,
|
||||
policyUIConfigurationsList,
|
||||
policyFeatureList,
|
||||
} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Col span={16} offset={4}>
|
||||
{/* <Card style={{ marginTop: 24 }}>*/}
|
||||
<div>
|
||||
{policyData != null && (
|
||||
<ProfileOverview
|
||||
policyId={this.props.policyId}
|
||||
policyData={policyData}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{policyData != null && (
|
||||
<PolicyInfo
|
||||
policyId={this.state.policyId}
|
||||
policyFeatureList={policyFeatureList}
|
||||
policyUIConfigurationsList={policyUIConfigurationsList}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(PolicyProfile);
|
||||
@ -0,0 +1,69 @@
|
||||
/*
|
||||
* 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, { Component } from 'react';
|
||||
import { Breadcrumb, Icon, PageHeader } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import EditPolicy from '../../components/EditPolicy';
|
||||
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
||||
class EditSelectedPolicy extends Component {
|
||||
routes;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.routes = props.routes;
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
data: {},
|
||||
policyOverview: {},
|
||||
policyId: '',
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
match: { params },
|
||||
} = this.props;
|
||||
|
||||
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 }}>
|
||||
<EditPolicy policyId={params.policyId} />
|
||||
</div>
|
||||
</PageHeader>
|
||||
<div
|
||||
style={{ background: '#f0f2f5', padding: 24, minHeight: 720 }}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default withConfigContext(EditSelectedPolicy);
|
||||
@ -0,0 +1,68 @@
|
||||
/*
|
||||
* 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, { Component } from 'react';
|
||||
import { Breadcrumb, Icon, PageHeader } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
||||
import PolicyProfile from '../../components/PolicyProfile';
|
||||
class ViewPolicy extends Component {
|
||||
routes;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.routes = props.routes;
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
data: {},
|
||||
policyOverview: {},
|
||||
policyId: '',
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
match: { params },
|
||||
} = this.props;
|
||||
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 }}>
|
||||
<PolicyProfile policyId={params.policyId} />
|
||||
</div>
|
||||
</PageHeader>
|
||||
<div
|
||||
style={{ background: '#f0f2f5', padding: 24, minHeight: 720 }}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default withConfigContext(ViewPolicy);
|
||||
@ -0,0 +1,27 @@
|
||||
package org.wso2.carbon.device.mgt.extensions.device.type.template.config;
|
||||
|
||||
import javax.xml.bind.annotation.XmlElement;
|
||||
|
||||
public class SubPanelValuesList {
|
||||
@XmlElement(name = "PanelSwitch")
|
||||
private String itemSwitch;
|
||||
|
||||
@XmlElement(name = "PayloadKey")
|
||||
private String itemPayload;
|
||||
|
||||
public String getSwitchItem() {
|
||||
return itemSwitch;
|
||||
}
|
||||
|
||||
public void setSwitchItem(String itemSwitch) {
|
||||
this.itemSwitch = itemSwitch;
|
||||
}
|
||||
|
||||
public String getPayloadItem() {
|
||||
return itemPayload;
|
||||
}
|
||||
|
||||
public void setPayloadItem(String itemPayload) {
|
||||
this.itemPayload = itemPayload;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue