ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
   6  *                             reserved.
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END============================================
  20  * ===================================================================
  21  *
  22  */
  23
  24 import React from 'react'
  25 import Button from 'react-bootstrap/Button';
  26 import Modal from 'react-bootstrap/Modal';
  27 import styled from 'styled-components';
  28 import LoopCache from '../../../api/LoopCache';
  29 import LoopService from '../../../api/LoopService';
  30 import JSONEditor from '@json-editor/json-editor';
  31
  32 const ModalStyled = styled(Modal)`
  33         background-color: transparent;
  34 `
  35
  36 export default class OperationalPolicyModal extends React.Component {
  37
  38         state = {
  39                 show: true,
  40                 loopCache: this.props.loopCache,
  41                 jsonEditor: null
  42         };
  43
  44         constructor(props, context) {
  45                 super(props, context);
  46                 this.handleClose = this.handleClose.bind(this);
  47                 this.handleSave = this.handleSave.bind(this);
  48                 this.renderJsonEditor = this.renderJsonEditor.bind(this);
  49                 this.handleRefresh = this.handleRefresh.bind(this);
  50                 this.setDefaultJsonEditorOptions();
  51         }
  52
  53         handleSave() {
  54                 var errors = this.state.jsonEditor.validate();
  55                 var editorData = this.state.jsonEditor.getValue();
  56
  57                 if (errors.length !== 0) {
  58                         console.error("Errors detected during config policy data validation ", errors);
  59                         this.props.showAlert(errors);
  60                 }
  61                 else {
  62                         console.info("NO validation errors found in config policy data");
  63                         this.state.loopCache.updateOperationalPolicyProperties(editorData);
  64                         LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => {
  65                                 this.setState({ show: false });
  66                                 this.props.history.push('/');
  67                                 this.props.loadLoopFunction(this.state.loopCache.getLoopName());
  68                         });
  69                 }
  70         }
  71
  72         handleClose() {
  73                 this.setState({ show: false });
  74                 this.props.history.push('/');
  75         }
  76
  77         componentDidMount() {
  78                 this.renderJsonEditor();
  79         }
  80
  81         setDefaultJsonEditorOptions() {
  82                 JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({
  83                         getTab: function(text,tabId) {
  84                                 var liel = document.createElement('li');
  85                                 liel.classList.add('nav-item');
  86                                 var ael = document.createElement("a");
  87                                 ael.classList.add("nav-link");
  88                                 ael.setAttribute("style",'padding:10px;max-width:160px;');
  89                                 ael.setAttribute("href", "#" + tabId);
  90                                 ael.setAttribute('data-toggle', 'tab');
  91                                 text.setAttribute("style",'word-wrap:break-word;');
  92                                 ael.appendChild(text);
  93                                 liel.appendChild(ael);
  94                                 return liel;
  95                         }
  96                 });
  97         }
  98
  99         renderJsonEditor() {
 100                 console.debug("Rendering OperationalPolicyModal");
 101                 var schema_json = this.state.loopCache.getOperationalPolicyJsonSchema();
 102
 103                 if (schema_json == null) {
 104                         console.error("NO Operational policy schema found");
 105                         return;
 106                 }
 107                 var operationalPoliciesData = this.state.loopCache.getOperationalPoliciesNoJsonSchema();
 108
 109                 this.setState({
 110                                 jsonEditor: new JSONEditor(document.getElementById("editor"),
 111                                         {
 112                                             schema: schema_json.schema,
 113                                             startval: operationalPoliciesData,
 114                                             theme: 'myBootstrap4',
 115                         object_layout: 'grid',
 116                         disable_properties: true,
 117                         disable_edit_json: false,
 118                         disable_array_reorder: true,
 119                         disable_array_delete_last_row: true,
 120                         disable_array_delete_all_rows: false,
 121                         array_controls_top: true,
 122                         show_errors: 'always',
 123                         keep_oneof_values: false,
 124                         collapsed:true
 125                                         })
 126                         })
 127         }
 128
 129         handleRefresh() {
 130                 LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()[0]).then(data => {
 131                         var newLoopCache =  new LoopCache(data);
 132                         var schema_json = newLoopCache.getOperationalPolicyJsonSchema();
 133                         var operationalPoliciesData = newLoopCache.getOperationalPoliciesNoJsonSchema();
 134                         document.getElementById("editor").innerHTML = "";
 135                         this.setState({
 136                                 loopCache: newLoopCache,
 137                                 jsonEditor: new JSONEditor(document.getElementById("editor"),
 138                                         { schema: schema_json.schema, startval: operationalPoliciesData })
 139                         })
 140                         this.props.updateLoopFunction(data);
 141
 142                 })
 143                 .catch(error => {
 144                         console.error("Error while refreshing the Operational Policy Json Representation");
 145                 });
 146         }
 147
 148         render() {
 149                 return (
 150                         <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
 151                                 <Modal.Header closeButton>
 152                                         <Modal.Title>Operational policies</Modal.Title>
 153                                 </Modal.Header>
 154                                 <Modal.Body>
 155                                         <div id="editor" />
 156
 157                                 </Modal.Body>
 158                                 <Modal.Footer>
 159                                         <Button variant="secondary" onClick={this.handleClose}>
 160                                                 Close
 161                                         </Button>
 162                                         <Button variant="secondary" onClick={this.handleRefresh}>
 163                                                 Refresh
 164                                         </Button>
 165                                         <Button variant="primary" onClick={this.handleSave}>
 166                                                 Save Changes
 167                                         </Button>
 168                                 </Modal.Footer>
 169                         </ModalStyled>
 170
 171                 );
 172         }
 173 }