From f9e2ceeae29504505f631086e612fad4e1e16979 Mon Sep 17 00:00:00 2001 From: sebdet Date: Fri, 9 Aug 2019 18:36:09 +0200 Subject: Draft of op policy First draft of the Operational policy based on JsonEditor, it's a wip code Issue-ID: CLAMP-430 Change-Id: I2c7970e94488f4020377fd9d4d00691a3590b13e Signed-off-by: sebdet --- .../OperationalPolicy/OperationalPolicyModal.js | 533 +++------------------ 1 file changed, 58 insertions(+), 475 deletions(-) (limited to 'ui-react/src/components/dialogs/OperationalPolicy') diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js index 2a812c877..6db38fd23 100644 --- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js @@ -24,8 +24,9 @@ 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 LoopService from '../../../api/LoopService'; +import JSONEditor from '@json-editor/json-editor'; const ModalStyled = styled(Modal)` background-color: transparent; @@ -36,512 +37,94 @@ 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.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); + alert(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 ( - - ); + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); } - 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 || ''; - } - }); - return o; + componentDidMount() { + this.renderJsonEditor(); } - // 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()); - } + setDefaultJsonEditorOptions() { + JSONEditor.defaults.options.theme = 'bootstrap4'; + // JSONEditor.defaults.options.iconlib = 'bootstrap2'; + + JSONEditor.defaults.options.object_layout = 'grid'; + JSONEditor.defaults.options.disable_properties = true; + JSONEditor.defaults.options.disable_edit_json = false; + JSONEditor.defaults.options.disable_array_reorder = true; + JSONEditor.defaults.options.disable_array_delete_last_row = true; + JSONEditor.defaults.options.disable_array_delete_all_rows = false; + JSONEditor.defaults.options.array_controls_top=true; + JSONEditor.defaults.options.show_errors = 'always'; + JSONEditor.defaults.options.keep_oneof_values=false; + JSONEditor.defaults.options.ajax=true; + JSONEditor.defaults.options.collapsed=true; + //JSONEditor.defaults.options.template = 'default'; } + + 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.getOperationalPolicies(); - 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]); - }); - - // 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); - } - });*/ - }); + this.setState({ + jsonEditor: new JSONEditor(document.getElementById("editor"), + { schema: schema_json.schema, startval: operationalPoliciesData }) + }) } render() { return ( - + Operational policies -
-
-
-
-
- -
- {this.renderPolicyIdSelect()} -
- - -
- -
- - -
- -
-
-
- -
- -
-
-
-
- -
-
-
-
-
-
-
- - -
-
- -
- - ID must be unique -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
- -
- -
- -
- - -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
- -
- -
- -
-
-
- -
- -
- -
-
-
- -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- - -
- -
-
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
-
- -
- - -
-
+
- -- cgit 1.2.3-korg