Modify Backend for listing the policies
Improve Ui components to list policies + changes an existing camel route to expose the policy json schema properly. New files added to emulator for testing + comments added.
Now the Ui can show the policy config
Issue-ID: POLICY-3061
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: Iacf9577a4ab2cc927d05ff267e7356d8410eb77a
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
index 216a8ab..a93aa35 100644
--- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -33,11 +33,17 @@
import LastPage from '@material-ui/icons/LastPage';
import Search from '@material-ui/icons/Search';
import MaterialTable from "material-table";
-import LoopCache from '../../../api/LoopCache';
import PolicyService from '../../../api/PolicyService';
+import PolicyToscaService from '../../../api/PolicyToscaService';
import Select from 'react-select';
+import JSONEditor from '@json-editor/json-editor';
const ModalStyled = styled(Modal)`
+ @media (min-width: 1200px) {
+ .modal-xl {
+ max-width: 96%;
+ }
+ }
background-color: transparent;
`
@@ -45,9 +51,6 @@
const cellPdpGroupStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black'};
const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
-const selectPdpGroupStyle = {
- width: 2000
-}
export default class ViewAllPolicies extends React.Component {
state = {
@@ -114,7 +117,7 @@
this.handleClose = this.handleClose.bind(this);
this.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this);
this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
-
+ this.createJsonEditor = this.createJsonEditor.bind(this);
this.getAllPolicies();
}
@@ -124,12 +127,51 @@
let selectedPdpGroup = pdpSplit[0];
let selectedSubPdpGroup = pdpSplit[1];
if (typeof selectedSubPdpGroup !== "undefined") {
- this.state.policiesListData[this.state.selectedRow]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup};
+ let temp = this.state.policiesListData;
+ temp[this.state.selectedRow]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup};
+ this.setState({policiesListData: temp});
} else {
delete this.state.policiesListData[this.state.selectedRow]["pdpGroupInfo"];
}
}
+ createJsonEditor(toscaModel, editorData) {
+ JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({
+ getTab: function(text,tabId) {
+ var liel = document.createElement('li');
+ liel.classList.add('nav-item');
+ var ael = document.createElement("a");
+ ael.classList.add("nav-link");
+ ael.setAttribute("style",'padding:10px;max-width:160px;');
+ ael.setAttribute("href", "#" + tabId);
+ ael.setAttribute('data-toggle', 'tab');
+ text.setAttribute("style",'word-wrap:break-word;');
+ ael.appendChild(text);
+ liel.appendChild(ael);
+ return liel;
+ }
+ });
+ return new JSONEditor(document.getElementById("policy-editor"),
+ { schema: toscaModel,
+ startval: editorData,
+ theme: 'myBootstrap4',
+ object_layout: 'grid',
+ disable_properties: false,
+ disable_edit_json: false,
+ disable_array_reorder: true,
+ disable_array_delete_last_row: true,
+ disable_array_delete_all_rows: false,
+ array_controls_top: true,
+ keep_oneof_values: false,
+ collapsed:true,
+ show_errors: 'always',
+ display_required_only: false,
+ show_opt_in: false,
+ prompt_before_delete: true,
+ required_by_default: false
+ })
+ }
+
renderPdpGroupDropBox(dataRow) {
let optionItems = [{label: "NOT DEPLOYED", value: "NOT DEPLOYED"}];
let selectedItem = {label: "NOT DEPLOYED", value: "NOT DEPLOYED"};
@@ -159,6 +201,17 @@
this.props.history.push('/')
}
+ handleOnRowClick(rowData) {
+ PolicyToscaService.getToscaPolicyModel(rowData["type"], rowData["type_version"]).then(respJsonPolicyTosca => {
+ this.setState({
+ selectedRow: rowData.tableData.id,
+ selectedRowJsonSchema: respJsonPolicyTosca,
+ selectedRowPolicyProperties: rowData["properties"],
+ jsonEditorForPolicy: this.createJsonEditor(respJsonPolicyTosca, rowData["properties"])
+ });
+ });
+ }
+
render() {
return (
<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
@@ -170,7 +223,7 @@
data={this.state.policiesListData}
columns={this.state.policyColumnsDefinition}
icons={this.state.tableIcons}
- onRowClick={(event, rowData) => {this.setState({selectedRow: rowData.tableData.id})}}
+ onRowClick={(event, rowData) => {this.handleOnRowClick(rowData)}}
options={{
headerStyle:rowHeaderStyle,
rowStyle: rowData => ({
@@ -178,6 +231,7 @@
})
}}
/>
+ <div id="policy-editor" />
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>Close</Button>