Introduce a new json editor component
Add this a new react component so that the json editor can be called within the policies table
+ Add the tosca tab
+ Fix for Submit operation in clamp-api-v2.xml
Issue-ID: POLICY-3106
Issue-ID: POLICY-3124
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I18ab3a6034cac719525774f11b2c17f0a14bc2aa
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index fd1b0d5..c7c7ecb 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -23,7 +23,9 @@
"menuFontColor": "black",
"menuHighlightedBackgroundColor": "#337ab7",
"menuHighlightedFontColor": "white",
- "toscaTextareaBackgroundColor": "#E8E8E8",
+ "policyEditorBackgroundColor": "white",
+ "policyEditorFontSize": "13px",
+ "toscaTextareaBackgroundColor": "white",
"toscaTextareaFontSize": "13px",
}
}
diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js
index a77a8bd..a9f44b2 100644
--- a/ui-react/src/api/PolicyService.js
+++ b/ui-react/src/api/PolicyService.js
@@ -43,8 +43,9 @@
return "";
})
}
- static createNewPolicy(policyModelType, policyModelVersion, policyJson) {
- return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/' + policyModelVersion, {
+ static createNewPolicy(policyModelType, policyModelVersion, policyName, policyVersion, policyJson) {
+ return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/'
+ + policyModelVersion + '/' + policyName + '/' + policyVersion, {
method: 'POST',
credentials: 'same-origin',
headers: {
diff --git a/ui-react/src/api/PolicyToscaService.js b/ui-react/src/api/PolicyToscaService.js
index 3511263..c54e768 100644
--- a/ui-react/src/api/PolicyToscaService.js
+++ b/ui-react/src/api/PolicyToscaService.js
@@ -39,43 +39,43 @@
}
static getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
- return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/yaml/' + policyModelType + "/" + policyModelVersion, {
- method: 'GET',
- credentials: 'same-origin'
- })
- .then(function (response) {
- console.debug("getToscaPolicyModelYaml response received: ", response.status);
- if (response.ok) {
- return response.json();
- } else {
- console.error("getToscaPolicyModelYaml query failed");
- return "";
- }
- })
- .catch(function (error) {
- console.error("getToscaPolicyModelYaml error received", error);
- return "";
- });
+ return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/yaml/' + policyModelType + "/" + policyModelVersion, {
+ method: 'GET',
+ credentials: 'same-origin'
+ })
+ .then(function (response) {
+ console.debug("getToscaPolicyModelYaml response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("getToscaPolicyModelYaml query failed");
+ return "";
+ }
+ })
+ .catch(function (error) {
+ console.error("getToscaPolicyModelYaml error received", error);
+ return "";
+ });
}
static getToscaPolicyModel(policyModelType, policyModelVersion) {
- return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + "/" + policyModelVersion, {
- method: 'GET',
- credentials: 'same-origin'
- })
- .then(function (response) {
- console.debug("getToscaPolicyModel response received: ", response.status);
- if (response.ok) {
- return response.json();
- } else {
- console.error("getToscaPolicyModel query failed");
- return {};
- }
- })
- .catch(function (error) {
- console.error("getToscaPolicyModel error received", error);
- return {};
- });
+ return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + "/" + policyModelVersion, {
+ method: 'GET',
+ credentials: 'same-origin'
+ })
+ .then(function (response) {
+ console.debug("getToscaPolicyModel response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("getToscaPolicyModel query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("getToscaPolicyModel error received", error);
+ return {};
+ });
}
static createPolicyModelFromToscaModel(jsonData) {
diff --git a/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/ui-react/src/components/dialogs/Policy/PolicyEditor.js
new file mode 100644
index 0000000..e329e0c
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/PolicyEditor.js
@@ -0,0 +1,210 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React from 'react'
+import PolicyToscaService from '../../../api/PolicyToscaService';
+import JSONEditor from '@json-editor/json-editor';
+import styled from 'styled-components';
+import Button from 'react-bootstrap/Button';
+import TextField from '@material-ui/core/TextField';
+import Alert from 'react-bootstrap/Alert';
+import PolicyService from '../../../api/PolicyService';
+import OnapUtils from '../../../utils/OnapUtils';
+import uuid from 'react-uuid';
+
+const DivWhiteSpaceStyled = styled.div`
+ white-space: pre;
+`
+
+const JsonEditorDiv = styled.div`
+ margin-top: 20px;
+ background-color: ${props => props.theme.loopViewerBackgroundColor};
+ text-align: justify;
+ font-size: ${props => props.theme.policyEditorFontSize};
+`
+const PanelDiv = styled.div`
+ margin-top: 20px;
+ text-align: justify;
+ font-size: ${props => props.theme.policyEditorFontSize};
+ background-color: ${props => props.theme.loopViewerBackgroundColor};
+`
+
+export default class PolicyEditor extends React.Component {
+
+ state = {
+ policyModelType: this.props.policyModelType,
+ policyModelTypeVersion: this.props.policyModelTypeVersion,
+ policyName: (typeof this.props.policyName !== "undefined") ? this.props.policyName : "org.onap.policy.new",
+ policyVersion: (typeof this.props.policyVersion !== "undefined") ? this.props.policyVersion : "0.0.1",
+ policyProperties: this.props.policyProperties,
+ showSuccessAlert: false,
+ showFailAlert: false,
+ jsonEditor: null,
+ jsonEditorDivId: uuid(),
+ }
+
+ constructor(props, context) {
+ super(props, context);
+ this.createJsonEditor = this.createJsonEditor.bind(this);
+ this.getToscaModelForPolicy = this.getToscaModelForPolicy.bind(this);
+ this.disableAlert = this.disableAlert.bind(this);
+ this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this);
+ this.handleChangePolicyName = this.handleChangePolicyName.bind(this);
+ this.handleChangePolicyVersion = this.handleChangePolicyVersion.bind(this);
+ }
+
+ disableAlert() {
+ this.setState ({ showSuccessAlert: false, showFailAlert: false });
+ }
+
+ customValidation(editorData) {
+ // method for sub-classes to override with customized validation
+ return [];
+ }
+
+ handleCreateNewVersion() {
+ var editorData = this.state.jsonEditor.getValue();
+ var errors = this.state.jsonEditor.validate();
+ errors = errors.concat(this.customValidation(editorData));
+
+ if (errors.length !== 0) {
+ console.error("Errors detected during policy data validation ", errors);
+ this.setState({
+ showFailAlert: true,
+ showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
+ });
+ return;
+ } else {
+ console.info("NO validation errors found in policy data");
+ PolicyService.createNewPolicy(this.state.policyModelType, this.state.policyModelTypeVersion,
+ this.state.policyName, this.state.policyVersion, editorData).then(respPolicyCreation => {
+ if (respPolicyCreation === "") {
+ //it indicates a failure
+ this.setState({
+ showFailAlert: true,
+ showMessage: 'Policy Creation Failure'
+ });
+ } else {
+ this.setState({
+ showSuccessAlert: true,
+ showMessage: 'Policy '+ this.state.policyName + '/' + this.state.policyVersion + ' created successfully'
+ });
+ }
+ })
+ }
+ }
+
+ bumpVersion(versionToBump) {
+ let semVer = versionToBump.split(".");
+ return parseInt(semVer[0])+1 + "." + semVer[1] + "." + semVer[2];
+ }
+
+ getToscaModelForPolicy() {
+ PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => {
+ if (respJsonPolicyTosca !== {}) {
+ this.setState({
+ jsonSchemaPolicyTosca: respJsonPolicyTosca,
+ jsonEditor: this.createJsonEditor(respJsonPolicyTosca, this.state.policyProperties),
+ })
+ }
+ });
+ }
+
+ componentDidMount() {
+ this.getToscaModelForPolicy();
+ }
+
+ 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(this.state.jsonEditorDivId),
+ {
+ 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
+ })
+ }
+
+ handleChangePolicyName(event) {
+ this.setState({
+ policyName: event.target.value,
+ });
+ }
+
+ handleChangePolicyVersion(event) {
+ this.setState({
+ policyVersion: event.target.value,
+ });
+ }
+
+ render() {
+ return (
+ <PanelDiv>
+ <Alert variant="success" show={this.state.showSuccessAlert} onClose={this.disableAlert} dismissible>
+ <DivWhiteSpaceStyled>
+ {this.state.showMessage}
+ </DivWhiteSpaceStyled>
+ </Alert>
+ <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+ <DivWhiteSpaceStyled>
+ {this.state.showMessage}
+ </DivWhiteSpaceStyled>
+ </Alert>
+ <TextField required id="policyName" label="Required" defaultValue={this.state.policyName}
+ onChange={this.handleChangePolicyName} variant="outlined" size="small"/>
+ <TextField required id="policyVersion" label="Required" defaultValue={this.state.policyVersion}
+ onChange={this.handleChangePolicyVersion} size="small" variant="outlined"/>
+ <Button variant="secondary" title="Create a new policy version from the defined parameters"
+ onClick={this.handleCreateNewVersion}>Create New Version</Button>
+ <JsonEditorDiv id={this.state.jsonEditorDivId} title="Policy Properties"/>
+ </PanelDiv>
+ );
+ }
+}
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/ui-react/src/components/dialogs/Policy/ToscaViewer.js
new file mode 100644
index 0000000..06e8316
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/ToscaViewer.js
@@ -0,0 +1,67 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React from 'react'
+import PolicyToscaService from '../../../api/PolicyToscaService';
+import styled from 'styled-components';
+import Button from 'react-bootstrap/Button';
+
+const JsonEditorDiv = styled.div`
+ margin-top: 20px;
+ background-color: ${props => props.theme.toscaTextareaBackgroundColor};
+ text-align: justify;
+ font-size: ${props => props.theme.toscaTextareaFontSize};
+ width: 100%;
+ height: 30%;
+`
+
+export default class ToscaViewer extends React.Component {
+
+ state = {
+ toscaData: this.props.toscaData,
+ yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
+ }
+
+ constructor(props, context) {
+ super(props, context);
+ this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this);
+ }
+
+ getToscaModelYamlFor(toscaData) {
+ PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
+ this.setState({
+ yamlPolicyTosca: respYamlPolicyTosca,
+ })
+ });
+ }
+
+ render() {
+ return (
+ <JsonEditorDiv>
+ <pre>{this.state.yamlPolicyTosca}</pre>
+ <Button variant="secondary" title="Create a new policy version from the defined parameters"
+ onClick={this.handleCreateNewVersion}>Create New Version</Button>
+ </JsonEditorDiv>
+ );
+ }
+}
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
index b159584..1e71bb8 100644
--- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -31,7 +31,7 @@
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
-import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
@@ -40,42 +40,44 @@
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
+import DescriptionIcon from '@material-ui/icons/Description';
+import SettingsEthernetIcon from '@material-ui/icons/SettingsEthernet';
+import NoteAddIcon from '@material-ui/icons/NoteAdd';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import MaterialTable from "material-table";
import PolicyService from '../../../api/PolicyService';
import PolicyToscaService from '../../../api/PolicyToscaService';
import Select from 'react-select';
-import JSONEditor from '@json-editor/json-editor';
-import OnapUtils from '../../../utils/OnapUtils';
import Alert from 'react-bootstrap/Alert';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
+import PolicyEditor from './PolicyEditor';
+import ToscaViewer from './ToscaViewer';
const DivWhiteSpaceStyled = styled.div`
white-space: pre;
`
const ModalStyled = styled(Modal)`
- @media (min-width: 1200px) {
+ @media (min-width: 1000px) {
.modal-xl {
max-width: 96%;
}
}
background-color: transparent;
`
-const JsonEditorDiv = styled.div`
- margin-top: 20px;
- background-color: ${props => props.theme.toscaTextareaBackgroundColor};
- text-align: justify;
- font-size: ${props => props.theme.toscaTextareaFontSize};
- width: 100%;
- height: 30%;
- border: 1px solid black;
+const DetailedRow = styled.div`
+ margin: 0 auto;
+ background-color: ${props => props.theme.policyEditorBackgroundColor};
+ font-size: ${props => props.theme.policyEditorFontSize};
+ width: 97%;
+ margin-left: auto;
+ margin-right: 0;
`
-const standardCellStyle = { border: '1px solid black' };
+const standardCellStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black' };
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'};
@@ -86,6 +88,8 @@
content: 'Please select a policy to display it',
selectedRowId: -1,
policiesListData: [],
+ toscaModelsListData: [],
+ jsonEditorForPolicy: new Map(),
prefixGrouping: false,
showSuccessAlert: false,
showFailAlert: false,
@@ -128,11 +132,38 @@
headerStyle: headerStyle
}
],
+ toscaColumnsDefinition: [
+ {
+ title: "Policy Model Type", field: "policyModelType",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Policy Acronym", field: "policyAcronym",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Version", field: "version",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Uploaded By", field: "updatedBy",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Uploaded Date", field: "updatedDate", editable: 'never',
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ }
+ ],
tableIcons: {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
- Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+ Delete: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
@@ -154,14 +185,17 @@
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.handlePrefixGrouping = this.handlePrefixGrouping.bind(this);
this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
- this.handleUpdatePolicy = this.handleUpdatePolicy.bind(this);
- this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this);
this.disableAlert = this.disableAlert.bind(this);
this.getAllPolicies();
+ this.getAllToscaModels();
+ }
+ getAllToscaModels() {
+ PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
+ this.setState({ toscaModelsListData: toscaModelsList });
+ });
}
handlePdpGroupChange(e) {
@@ -177,45 +211,6 @@
}
}
- createJsonEditor(toscaModel, editorData) {
- document.getElementById("policy-editor").innerHTML = "";
- 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"};
@@ -245,17 +240,6 @@
this.props.history.push('/')
}
- handleOnRowClick(rowData) {
- PolicyToscaService.getToscaPolicyModel(rowData["type"], rowData["type_version"]).then(respJsonPolicyTosca => {
- this.setState({
- selectedRowId: rowData.tableData.id,
- selectedRowIdJsonSchema: respJsonPolicyTosca,
- selectedRowIdPolicyProperties: rowData["properties"],
- jsonEditorForPolicy: this.createJsonEditor(respJsonPolicyTosca, rowData["properties"])
- });
- });
- }
-
handlePrefixGrouping(event) {
this.setState({prefixGrouping: event.target.checked});
}
@@ -279,106 +263,150 @@
)
}
- customValidation(editorData) {
- // method for sub-classes to override with customized validation
- return [];
- }
-
- handleCreateNewVersion() {
- var editorData = this.state.jsonEditorForPolicy.getValue();
- var errors = this.state.jsonEditorForPolicy.validate();
- errors = errors.concat(this.customValidation(editorData));
-
- if (errors.length !== 0) {
- console.error("Errors detected during policy data validation ", errors);
- this.setState({
- showFailAlert: true,
- showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
- });
- return;
- } else {
- console.info("NO validation errors found in policy data");
- let newPolicy = JSON.parse(JSON.stringify(this.state.policiesListData[this.state.selectedRowId]));
- newPolicy["properties"] = editorData;
- let newVersion = this.bumpVersion(newPolicy["version"]);
- newPolicy["version"] = newVersion;
- newPolicy["metadata"]["policy-version"] = newVersion;
- // Remove stuff added by UI
- delete newPolicy["tableData"];
- PolicyService.createNewPolicy(newPolicy["type"], newPolicy["type_version"], newPolicy).then(respPolicyCreation => {
- if (respPolicyCreation === "") {
- //it indicates a failure
- this.setState({
- showFailAlert: true,
- showMessage: 'Policy Creation Failure'
- });
- } else {
- this.setState({
- showSuccessAlert: true,
- showMessage: 'Policy in version ' + newVersion + ' created successfully'
- });
- }
- })
- }
- }
-
- bumpVersion(versionToBump) {
- let semVer = versionToBump.split(".");
- return parseInt(semVer[0])+1 + "." + semVer[1] + "." + semVer[2];
- }
-
- handleUpdatePolicy() {
- this.setState({ show: false });
- this.props.history.push('/')
- }
-
disableAlert() {
this.setState ({ showSuccessAlert: false, showFailAlert: false });
}
+ renderPoliciesTab() {
+ return (
+ <Tab eventKey="policies" title="Policies in Policy Framework">
+ <Modal.Body>
+ <FormControlLabel
+ control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />}
+ label="Group by prefix"
+ />
+ <MaterialTable
+ title={"Policies"}
+ data={this.state.policiesListData}
+ columns={this.state.policyColumnsDefinition}
+ icons={this.state.tableIcons}
+ onRowClick={(event, rowData, togglePanel) => togglePanel()}
+ options={{
+ grouping: true,
+ exportButton: true,
+ headerStyle:rowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
+ }),
+ actionsColumnIndex: -1
+ }}
+ detailPanel={[
+ {
+ icon: SettingsEthernetIcon,
+ tooltip: 'Show Configuration',
+ render: rowData => {
+ return (
+ <DetailedRow>
+ <PolicyEditor policyModelType={rowData["type"]} policyModelTypeVersion={rowData["type_version"]} policyName={rowData["name"]} policyVersion={rowData["version"]} policyProperties={rowData["properties"]} />
+ </DetailedRow>
+ )
+ },
+ },
+ {
+ icon: DescriptionIcon,
+ tooltip: 'Show Raw Data',
+ render: rowData => {
+ return (
+ <DetailedRow>
+ <pre>{JSON.stringify(rowData, null, 2)}</pre>
+ </DetailedRow>
+ )
+ },
+ },
+ ]}
+ actions={[
+ {
+ icon: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />),
+ tooltip: 'Delete Policy',
+ onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
+ }
+ ]}
+ />
+ </Modal.Body>
+ </Tab>
+ );
+ }
+
+ renderToscaTab() {
+ return (
+ <Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
+ <Modal.Body>
+ <FormControlLabel
+ control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />}
+ label="Group by prefix"
+ />
+ <MaterialTable
+ title={"Tosca Models"}
+ data={this.state.toscaModelsListData}
+ columns={this.state.toscaColumnsDefinition}
+ icons={this.state.tableIcons}
+ onRowClick={(event, rowData, togglePanel) => togglePanel()}
+ options={{
+ grouping: true,
+ exportButton: true,
+ headerStyle:rowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
+ }),
+ actionsColumnIndex: -1
+ }}
+ detailPanel={[
+ {
+ icon: SettingsEthernetIcon,
+ tooltip: 'Show Tosca',
+ render: rowData => {
+ return (
+ <DetailedRow>
+ <ToscaViewer toscaData={rowData} />
+ </DetailedRow>
+ )
+ },
+ },
+ {
+ icon: DescriptionIcon,
+ tooltip: 'Show Raw Data',
+ render: rowData => {
+ return (
+ <DetailedRow>
+ <pre>{JSON.stringify(rowData, null, 2)}</pre>
+ </DetailedRow>
+ )
+ },
+ },
+ {
+ icon: NoteAddIcon,
+ tooltip: 'Create a policy from this model',
+ render: rowData => {
+ return (
+ <DetailedRow>
+ <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} />
+ </DetailedRow>
+ )
+ },
+ },
+ ]}
+ actions={[
+ {
+ icon: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />),
+ tooltip: 'Delete Tosca Model',
+ onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
+ }
+ ]}
+ />
+ </Modal.Body>
+ </Tab>
+ );
+ }
+
render() {
return (
<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
<Modal.Header closeButton>
</Modal.Header>
<Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
- <Tab eventKey="policies" title="Policies in Policy Framework">
- <Modal.Body>
- <FormControlLabel
- control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />}
- label="Group by prefix"
- />
- <MaterialTable
- title={"View All Policies in Policy Engine"}
- data={this.state.policiesListData}
- columns={this.state.policyColumnsDefinition}
- icons={this.state.tableIcons}
- onRowClick={(event, rowData) => {this.handleOnRowClick(rowData)}}
- options={{
- grouping: true,
- exportButton: true,
- headerStyle:rowHeaderStyle,
- rowStyle: rowData => ({
- backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
- })
- }}
- actions={[
- {
- icon: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
- tooltip: 'Delete Policy',
- onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
- }
- ]}
- />
- </Modal.Body>
- </Tab>
+ {this.renderPoliciesTab()}
+ {this.renderToscaTab()}
</Tabs>
- <JsonEditorDiv>
- <h5>Policy Properties Editor</h5>
- <div id="policy-editor" title="Policy Properties"/>
- <Button variant="secondary" title="Create a new policy version from the defined parameters"
- onClick={this.handleCreateNewVersion}>Create New Version</Button>
- </JsonEditorDiv>
<Alert variant="success" show={this.state.showSuccessAlert} onClose={this.disableAlert} dismissible>
<DivWhiteSpaceStyled>
{this.state.showMessage}
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 43aa30f..1e316d2 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -90,6 +90,9 @@
menuHighlightedBackgroundColor: '#337ab7',
menuHighlightedFontColor: 'white',
- toscaTextareaBackgroundColor: '#E8E8E8',
- toscaTextareaFontSize: '13px'
+ toscaTextareaBackgroundColor: 'white',
+ toscaTextareaFontSize: '13px',
+
+ policyEditorBackgroundColor: 'white',
+ policyEditorFontSize: '13px'
};