X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fdialogs%2FOperationalPolicy%2FOperationalPolicyModal.js;h=89e70795e30f0878886f80ae7e50a05790e61622;hb=e916ac28ba46ff7cad64f1a3150b128ba4772c70;hp=2a812c8779679f8c1cce1f2d4022c45d72a15930;hpb=5976c17b09b82db4d5dbce7cb7fe3b1b27891104;p=clamp.git diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js index 2a812c87..89e70795 100644 --- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js @@ -24,8 +24,10 @@ import React from 'react' import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; -import './OperationalPolicy.css' import styled from 'styled-components'; +import LoopCache from '../../../api/LoopCache'; +import LoopService from '../../../api/LoopService'; +import JSONEditor from '@json-editor/json-editor'; const ModalStyled = styled(Modal)` background-color: transparent; @@ -36,514 +38,133 @@ export default class OperationalPolicyModal extends React.Component { state = { show: true, loopCache: this.props.loopCache, + jsonEditor: null }; - allPolicies = []; - policyIds = []; - constructor(props, context) { super(props, context); - this.handleClose = this.handleClose.bind(this); - this.initPolicySelect = this.initPolicySelect.bind(this); - this.initPolicySelect(); + this.handleSave = this.handleSave.bind(this); + this.renderJsonEditor = this.renderJsonEditor.bind(this); + this.handleRefresh = this.handleRefresh.bind(this); + this.setDefaultJsonEditorOptions(); } - handleClose() { - this.setState({ show: false }); - this.props.history.push('/') - } + handleSave() { + var errors = this.state.jsonEditor.validate(); + var editorData = this.state.jsonEditor.getValue(); - initPolicySelect() { - if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) { - this.allPolicies = this.state.loopCache.getOperationalPolicyConfigurationJson(); + if (errors.length !== 0) { + console.error("Errors detected during config policy data validation ", errors); + this.props.showAlert(errors); } - // Provision all policies ID first - if (this.policyIds.length === 0 && this.allPolicies['operational_policy'] !== undefined) { - - for (let i = 0; i < this.allPolicies['operational_policy']['policies'].length; i++) { - this.policyIds.push(this.allPolicies['operational_policy']['policies'][i]['id']); - } + else { + console.info("NO validation errors found in config policy data"); + this.state.loopCache.updateOperationalPolicyProperties(editorData); + LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => { + this.setState({ show: false }); + this.props.history.push('/'); + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + }); } } - renderPolicyIdSelect() { - return ( - - -- choose an option -- - {this.policyIds.map(policyId => ({policyId}))} - - ); + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } + + componentDidMount() { + this.renderJsonEditor(); } - serializeElement(element) { - var o = {}; - element.serializeArray().forEach(function () { - if (o[this.name]) { - if (!o[this.name].push) { - o[this.name] = [o[this.name]]; - } - o[this.name].push(this.value || ''); - } else { - o[this.name] = this.value || ''; + setDefaultJsonEditorOptions() { + 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 o; } - // When we change the name of a policy - isDuplicatedId(event) { - // update policy id structure - var formNum = document.getElementById(event.target).closest('.formId').attr('id').substring(6); - var policyId = document.getElementById(event.target).val(); - if (this.policyIds.includes(policyId)) { - console.log("Duplicated ID, cannot proceed"); - return true; - } else { - this.duplicated = false; - this.policyIds.splice(this.policyIds.indexOf(document.getElementById("#formId" + formNum + " #id").val()), 1); - this.policyIds.push(document.getElementById(event.target).val()); - // Update the tab now - document.getElementById("#go_properties_tab" + formNum).text(document.getElementById(event.target).val()); + renderJsonEditor() { + console.debug("Rendering OperationalPolicyModal"); + var schema_json = this.state.loopCache.getOperationalPolicyJsonSchema(); + + if (schema_json == null) { + console.error("NO Operational policy schema found"); + return; } + var operationalPoliciesData = this.state.loopCache.getOperationalPoliciesNoJsonSchema(); + + this.setState({ + jsonEditor: new JSONEditor(document.getElementById("editor"), + { + schema: schema_json.schema, + startval: operationalPoliciesData, + theme: 'myBootstrap4', + object_layout: 'grid', + disable_properties: true, + disable_edit_json: false, + disable_array_reorder: true, + disable_array_delete_last_row: true, + disable_array_delete_all_rows: false, + array_controls_top: true, + show_errors: 'always', + keep_oneof_values: false, + collapsed:true + }) + }) } - configureComponents() { - console.log("Load properties to op policy"); - // Set the header - document.getElementsByClassName('form-control').forEach(function () { - this.val(this.allPolicies['operational_policy']['controlLoop'][this.id]); - }); - // Set the sub-policies - this.allPolicies['operational_policy']['policies'].forEach(function (opPolicyElemIndex, opPolicyElemValue) { - - /* var formNum = add_one_more(); - forEach(document.getElementsByClassName('policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) { - - $("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val( - allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]); - }); + handleRefresh() { + LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()[0]).then(data => { + var newLoopCache = new LoopCache(data); + var schema_json = newLoopCache.getOperationalPolicyJsonSchema(); + var operationalPoliciesData = newLoopCache.getOperationalPoliciesNoJsonSchema(); + document.getElementById("editor").innerHTML = ""; + this.setState({ + loopCache: newLoopCache, + jsonEditor: new JSONEditor(document.getElementById("editor"), + { schema: schema_json.schema, startval: operationalPoliciesData }) + }) + this.props.updateLoopFunction(data); - // Initial TargetResourceId options - initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum); - $.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) { - - $("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val( - allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]); - }); - - // update the current tab label - $("#go_properties_tab" + formNum).text( - allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']); - // Check if there is a guard set for it - $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) { - - if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) { - // Found one, set all guard prop - $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex, - guardPropElemValue) { - - guardElemValue['id'] = guardElemId; - $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val( - guardElemValue[guardPropElemValue.id]); - }); - iniGuardPolicyType(guardElemId, formNum); - // And finally enable the flag - $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true); - } - });*/ + }) + .catch(error => { + console.error("Error while refreshing the Operational Policy Json Representation"); }); } render() { return ( - + Operational policies - - - - - - Parent policy - - {this.renderPolicyIdSelect()} - - - Overall - Time Limit - - - - - Abatement - - - False - True - - - - - ControlLoopName - - - - - - - - - - - - - - - - - - - - - - - - - - ID - - - ID must be unique - - - - Recipe - - - -- choose an option -- - Restart - Rebuild - Migrate - Health-Check - ModifyConfig - VF Module Create - VF Module Delete - Reroute - - - - - Retry - - - - - - - - Timeout - - - - - - - Actor - - - -- choose an option -- - APPC - SO - VFC - SDNC° - SDNR° - - - - - Payload (YAML) - - - - - - When - Success - - - -- choose an option -- - - - - - When - Failure - - - -- choose an option -- - - - - - - When - Failure Timeout - - - -- choose an option -- - - - - - When - Failure Retries - - - -- choose an option -- - - - - - When - Failure Exception - - - -- choose an option -- - - - - - When - Failure Guard - - - -- choose an option -- - - - - - - - Target - Type - - - -- choose an option -- - VFMODULE - VM - VNF - - - - - - Target ResourceId - - - -- choose an option -- - - - - - - - Model Invariant Id - - - - - - - Model Version Id - - - - - - - Model Name - - - - - - - Model Version - - - - - - - Model Customization Id - - - - - - - - - Enable Guard Policy - - - - - - - Guard Policy Type - MinMax - FrequencyLimiter - - - - - - - Guard Policy ID - - - - - - Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type - - - Recipe - - - - - - ControlLoopName - - - - - - Actor - - - - - - - Guard - targets - - - - - - - Min - Guard - - - - Max - Guard - - - - - - Limit - - - - Time Units - - - - minute - hour - day - week - month - year - - - Time Window - - - - - - - Guard Active Start - - - - - Guard Active End - - - - - - - - - - + Close - - + + + Refresh + + Save Changes - +