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 --- ui-react/package.json | 2 +- ui-react/src/LoopUI.js | 7 +- ui-react/src/api/LoopCache.js | 4 + ui-react/src/api/LoopService.js | 24 + .../ConfigurationPolicyModal.js | 2 +- .../OperationalPolicy/OperationalPolicyModal.js | 533 +++------------------ ui-react/src/index.js | 2 +- ui-react/src/theme/globalStyle.js | 13 + 8 files changed, 106 insertions(+), 481 deletions(-) (limited to 'ui-react') diff --git a/ui-react/package.json b/ui-react/package.json index de7cb26d1..9c94ccc3f 100644 --- a/ui-react/package.json +++ b/ui-react/package.json @@ -13,7 +13,7 @@ "author": "ONAP Clamp Team", "license": "Apache-2.0", "dependencies": { - "@json-editor/json-editor": "1.3.5", + "@json-editor/json-editor": "1.4.0-beta.0", "react": "16.8.0", "react-dom": "16.8.0", "react-scripts": "3.0.1", diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 5b8283f8f..b64cfbaa3 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -41,9 +41,9 @@ import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/C import LoopProperties from './components/dialogs/LoopProperties'; import UserInfo from './components/dialogs/UserInfo'; import LoopService from './api/LoopService'; -import PerformAction from './components/menu/PerformActions'; -import RefreshStatus from './components/menu/RefreshStatus'; -import DeployLoop from './components/menu/DeployLoop'; +import PerformAction from './components/dialogs/PerformActions'; +import RefreshStatus from './components/dialogs/RefreshStatus'; +import DeployLoop from './components/dialogs/DeployLoop'; const ProjectNameStyled = styled.a` vertical-align: middle; @@ -185,6 +185,7 @@ export default class LoopUI extends React.Component { this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName }); this.props.history.push('/'); } + render() { return (
diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js index 3ee5acc68..d83e3ce9d 100644 --- a/ui-react/src/api/LoopCache.js +++ b/ui-react/src/api/LoopCache.js @@ -51,6 +51,10 @@ export default class LoopCache { getOperationalPolicyConfigurationJson() { return this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"]; } + + getOperationalPolicyJsonSchema() { + return this.loopJsonCache["operationalPolicySchema"]; + } getOperationalPolicies() { return this.loopJsonCache["operationalPolicies"]; diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js index 031ec638f..eece20c96 100644 --- a/ui-react/src/api/LoopService.js +++ b/ui-react/src/api/LoopService.js @@ -104,6 +104,30 @@ export default class LoopService { return ""; }); } + + static setOperationalPolicyProperties(loopName, jsonData) { + return fetch('/restservices/clds/v2/loop/updateOperationalPolicies/' + loopName, { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(jsonData), + }) + .then(function (response) { + console.debug("updateOperationalPolicies response received: ", response.status); + if (response.ok) { + return response.text(); + } else { + console.error("updateOperationalPolicies query failed"); + return ""; + } + }) + .catch(function (error) { + console.error("updateOperationalPolicies error received", error); + return ""; + }); + } static updateGlobalProperties(loopName, jsonData) { return fetch('/restservices/clds/v2/loop/updateGlobalProperties/' + loopName, { diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js index 4fbb7832c..9863ef721 100644 --- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js +++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js @@ -103,7 +103,7 @@ export default class ConfigurationPolicyModal extends React.Component { render() { return ( - + Configuration policies 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 -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
- -
- -
- -
- - -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
- -
- -
- -
-
-
- -
- -
- -
-
-
- -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- - -
- -
-
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
-
- -
- - -
-
+
- diff --git a/ui-react/src/index.js b/ui-react/src/index.js index 39df36427..cbbdc65ef 100644 --- a/ui-react/src/index.js +++ b/ui-react/src/index.js @@ -32,7 +32,7 @@ const routing = ( ); -ReactDOM.render( +export var mainClamp = ReactDOM.render( routing, document.getElementById('root') ) diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js index cbd86b199..0f6fb91c6 100644 --- a/ui-react/src/theme/globalStyle.js +++ b/ui-react/src/theme/globalStyle.js @@ -65,6 +65,19 @@ export const GlobalClampStyle = createGlobalStyle` width: 100%; height: 100%; } + + button { + background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)}; + border: 1px; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: ${props => props.theme.fontSize}; + font-family: ${props => props.theme.fontFamily}; + + } ` export const DefaultClampTheme = { -- cgit 1.2.3-korg