Align ui-react file in policy-clamp and policy-gui

When the ui-react code was transferred to policy-gui, the white space
was cleaned up and reformatted. This makes it difficult to track the
real functional changes if any between ui-react in policy-clamp and
policy-gui.

This review brings more white space changes into ui-react in policy-clamp
to make file comparisons easier.

Issue-ID: POLICY-3358
Change-Id: Ie65d5bb664e6f43fe2f8a4342cf679e34ced18b8
Signed-off-by: liamfallon <liam.fallon@est.tech>

4 files changed, 695 insertions, 687 deletions

diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
index 57d61600a..de29947fe 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
@@ -32,145 +32,147 @@ import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 const DivWhiteSpaceStyled = styled.div`
-    white-space: pre;
+  white-space: pre;
 `
 
 const PanelDiv = styled.div`
-    text-align: justify;
-    font-size: ${props => props.theme.policyEditorFontSize};
-    background-color: ${props => props.theme.loopViewerBackgroundColor};
+  text-align: justify;
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  background-color: ${ props => props.theme.loopViewerBackgroundColor };
 `
 
 export default class PolicyDeploymentEditor extends React.Component {
 
-    state = {
-            policyData: this.props.policyData,
-            showSuccessAlert: false,
-            showFailAlert: false,
-            checkboxesState: this.createPdpStructure(this.props.policyData),
-            checkboxesInitialState: this.createPdpStructure(this.props.policyData),
-    };
+  state = {
+    policyData: this.props.policyData,
+    showSuccessAlert: false,
+    showFailAlert: false,
+    checkboxesState: this.createPdpStructure(this.props.policyData),
+    checkboxesInitialState: this.createPdpStructure(this.props.policyData),
+  };
 
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.handleUpdatePdpDeployment = this.handleUpdatePdpDeployment.bind(this);
-        this.disableAlert = this.disableAlert.bind(this);
-        this.renderPdpDeploymentCheckboxes = this.renderPdpDeploymentCheckboxes.bind(this);
-        this.createPdpStructure = this.createPdpStructure.bind(this);
-        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
-        this.createPdpGroupOperations = this.createPdpGroupOperations.bind(this);
-    }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleUpdatePdpDeployment = this.handleUpdatePdpDeployment.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.renderPdpDeploymentCheckboxes = this.renderPdpDeploymentCheckboxes.bind(this);
+    this.createPdpStructure = this.createPdpStructure.bind(this);
+    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+    this.createPdpGroupOperations = this.createPdpGroupOperations.bind(this);
+  }
 
-    handleClose() {
-        this.setState({ show: false });
+  handleClose() {
+    this.setState({ show: false });
 
-    }
+  }
 
-    disableAlert() {
-        this.setState ({ showSuccessAlert: false, showFailAlert: false });
-    }
+  disableAlert() {
+    this.setState({ showSuccessAlert: false, showFailAlert: false });
+  }
 
-    createPdpGroupOperations(initialStates, newStates) {
-        let commandsArray = [];
-        initialStates.forEach(initElem => {
-            let newStateFound = newStates.find(newElement => newElement.name === initElem.name);
-            if (initElem.value !== newStateFound.value) {
-                let newPdpGroupsArray = newStateFound.name.split("/");
-                let operation = "POST/";
-                if (initElem.value) {
-                    operation = "DELETE/";
-                }
-                commandsArray.push(operation + newPdpGroupsArray[0] + "/"+newPdpGroupsArray[1] + "/"
-                    +this.state.policyData.name + "/" + this.state.policyData.version);
-            }
-        });
-        return commandsArray.length > 0 ? {"PdpActions":commandsArray} : undefined;
-    }
+  createPdpGroupOperations(initialStates, newStates) {
+    let commandsArray = [];
+    initialStates.forEach(initElem => {
+      let newStateFound = newStates.find(newElement => newElement.name === initElem.name);
+      if (initElem.value !== newStateFound.value) {
+        let newPdpGroupsArray = newStateFound.name.split("/");
+        let operation = "POST/";
+        if (initElem.value) {
+          operation = "DELETE/";
+        }
+        commandsArray.push(operation + newPdpGroupsArray[0] + "/" + newPdpGroupsArray[1] + "/"
+          + this.state.policyData.name + "/" + this.state.policyData.version);
+      }
+    });
+    return commandsArray.length > 0 ? { "PdpActions": commandsArray } : undefined;
+  }
 
-    handleUpdatePdpDeployment() {
-            let operationsList = this.createPdpGroupOperations(this.state.checkboxesInitialState,
-                                                 this.state.checkboxesState);
-            if (typeof(operationsList) !== "undefined") {
-                PolicyService.updatePdpDeployment(operationsList).then(respPdpDeploymentUpdate => {
-                    if (typeof(respPdpDeploymentUpdate) === "undefined") {
-                        //it indicates a failure
-                        this.setState({
-                            showFailAlert: true,
-                            showMessage: 'Pdp Deployment update Failure'
-                        });
-                    } else {
-                        this.setState({
-                            showSuccessAlert: true,
-                            showMessage: 'Pdp Deployment Update successful'
-                        });
-                        this.props.policiesTableUpdateFunction();
-                    }
-                })
-            } else {
-                this.setState({
-                    showSuccessAlert: true,
-                    showMessage: 'Pdp Deployment: Nothing to change'
-                });
-            }
+  handleUpdatePdpDeployment() {
+    let operationsList = this.createPdpGroupOperations(this.state.checkboxesInitialState,
+      this.state.checkboxesState);
+    if (typeof (operationsList) !== "undefined") {
+      PolicyService.updatePdpDeployment(operationsList).then(respPdpDeploymentUpdate => {
+        if (typeof (respPdpDeploymentUpdate) === "undefined") {
+          //it indicates a failure
+          this.setState({
+            showFailAlert: true,
+            showMessage: 'Pdp Deployment update Failure'
+          });
+        } else {
+          this.setState({
+            showSuccessAlert: true,
+            showMessage: 'Pdp Deployment Update successful'
+          });
+          this.props.policiesTableUpdateFunction();
+        }
+      })
+    } else {
+      this.setState({
+        showSuccessAlert: true,
+        showMessage: 'Pdp Deployment: Nothing to change'
+      });
     }
+  }
 
-    createPdpStructure(policyData) {
-            // Create map with data for all group/subgroup where the policy is deployed
-            let infoPdpMap = new Map();
-            if (typeof policyData.pdpGroupInfo !== "undefined") {
-                policyData["pdpGroupInfo"].forEach(pdpGroupElem => {
-                    let pdpGroupName = Object.keys(pdpGroupElem)[0];
-                    pdpGroupElem[pdpGroupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
-                        infoPdpMap.set(pdpGroupName + "/" + pdpSubGroupElem["pdpType"], true);
-                    });
-                });
-            }
-            // Create the possible values for pdpgroup/subgroup and tick the ones where policy is deployed
-            let pdpStates = [];
-            if (typeof policyData.supportedPdpGroups !== "undefined") {
-                for (const pdpGroup of policyData["supportedPdpGroups"]) {
-                    let pdpGroupName = Object.keys(pdpGroup)[0];
-                    for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
-                            let fullName = pdpGroupName + "/" + pdpSubGroup;
-                            pdpStates.push({name: fullName,
-                                value: infoPdpMap.get(fullName) !== undefined});
-                    }
-                }
-            }
-            return pdpStates;
+  createPdpStructure(policyData) {
+    // Create map with data for all group/subgroup where the policy is deployed
+    let infoPdpMap = new Map();
+    if (typeof policyData.pdpGroupInfo !== "undefined") {
+      policyData["pdpGroupInfo"].forEach(pdpGroupElem => {
+        let pdpGroupName = Object.keys(pdpGroupElem)[0];
+        pdpGroupElem[pdpGroupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
+          infoPdpMap.set(pdpGroupName + "/" + pdpSubGroupElem["pdpType"], true);
+        });
+      });
     }
-
-    handleCheckboxChange(event) {
-        const checkboxesArray = this.state.checkboxesState;
-        checkboxesArray.find(element => element.name === event.target.name).value = event.target.checked;
-        this.setState({checkboxesState:checkboxesArray});
+    // Create the possible values for pdpgroup/subgroup and tick the ones where policy is deployed
+    let pdpStates = [];
+    if (typeof policyData.supportedPdpGroups !== "undefined") {
+      for (const pdpGroup of policyData["supportedPdpGroups"]) {
+        let pdpGroupName = Object.keys(pdpGroup)[0];
+        for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
+          let fullName = pdpGroupName + "/" + pdpSubGroup;
+          pdpStates.push({
+            name: fullName,
+            value: infoPdpMap.get(fullName) !== undefined
+          });
+        }
+      }
     }
+    return pdpStates;
+  }
 
-    renderPdpDeploymentCheckboxes() {
-        return this.state.checkboxesState.map(item => {
-            return <FormControlLabel control={<Checkbox checked={item.value} onChange={this.handleCheckboxChange}
-                name={item.name} />} label={item.name} />;
-        });
-    }
+  handleCheckboxChange(event) {
+    const checkboxesArray = this.state.checkboxesState;
+    checkboxesArray.find(element => element.name === event.target.name).value = event.target.checked;
+    this.setState({ checkboxesState: checkboxesArray });
+  }
 
-    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>
-          <Button variant="secondary" title="Update the policy to the specified PDP Groups/Subgroups"
-            onClick={this.handleUpdatePdpDeployment}>Update PDP</Button>
-          <FormGroup>{this.renderPdpDeploymentCheckboxes()}</FormGroup>
-        </PanelDiv>
-       );
-    }
- }
\ No newline at end of file
+  renderPdpDeploymentCheckboxes() {
+    return this.state.checkboxesState.map(item => {
+      return <FormControlLabel control={ <Checkbox checked={ item.value } onChange={ this.handleCheckboxChange }
+                                                   name={ item.name }/> } label={ item.name }/>;
+    });
+  }
+
+  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>
+        <Button variant="secondary" title="Update the policy to the specified PDP Groups/Subgroups"
+                onClick={ this.handleUpdatePdpDeployment }>Update PDP</Button>
+        <FormGroup>{ this.renderPdpDeploymentCheckboxes() }</FormGroup>
+      </PanelDiv>
+    );
+  }
+}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 4a883fffa..0c7637c44 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -31,315 +31,319 @@ import Modal from 'react-bootstrap/Modal';
 import styled from 'styled-components';
 import LoopService from '../../../api/LoopService';
 import LoopCache from '../../../api/LoopCache';
-import { JSONEditor }  from '@json-editor/json-editor/dist/jsoneditor.js';
+import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor.js';
 import "@fortawesome/fontawesome-free/css/all.css"
 import Alert from 'react-bootstrap/Alert';
 import OnapConstant from '../../../utils/OnapConstants';
 import OnapUtils from '../../../utils/OnapUtils';
 
 const ModalStyled = styled(Modal)`
-    background-color: transparent;
+  background-color: transparent;
 `
 
 const DivWhiteSpaceStyled = styled.div`
-    white-space: pre;
+  white-space: pre;
 `
 
 export default class PolicyModal extends React.Component {
 
-    state = {
-        show: true,
-        loopCache: this.props.loopCache,
-        jsonEditor: null,
-        policyName: this.props.match.params.policyName,
-        // This is to indicate whether it's an operational or config policy (in terms of loop instance)
-        policyInstanceType: this.props.match.params.policyInstanceType,
-        pdpGroup: null,
-        pdpGroupList: [],
-        pdpSubgroupList: [],
-        chosenPdpGroup: '',
-        chosenPdpSubgroup: '',
-        showSucAlert: false,
-        showFailAlert: false
-    };
-
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.handleSave = this.handleSave.bind(this);
-        this.renderJsonEditor = this.renderJsonEditor.bind(this);
-        this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
-        this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this);
-        this.createJsonEditor = this.createJsonEditor.bind(this);
-        this.handleRefresh = this.handleRefresh.bind(this);
-        this.disableAlert =  this.disableAlert.bind(this);
-        this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this);
-        this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this);
-        this.renderModalTitle = this.renderModalTitle.bind(this);
-        this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
-    }
+  state = {
+    show: true,
+    loopCache: this.props.loopCache,
+    jsonEditor: null,
+    policyName: this.props.match.params.policyName,
+    // This is to indicate whether it's an operational or config policy (in terms of loop instance)
+    policyInstanceType: this.props.match.params.policyInstanceType,
+    pdpGroup: null,
+    pdpGroupList: [],
+    pdpSubgroupList: [],
+    chosenPdpGroup: '',
+    chosenPdpSubgroup: '',
+    showSucAlert: false,
+    showFailAlert: false
+  };
 
-    handleSave() {
-        var editorData = this.state.jsonEditor.getValue();
-        var errors = this.state.jsonEditor.validate();
-        errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName()));
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.renderJsonEditor = this.renderJsonEditor.bind(this);
+    this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
+    this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this);
+    this.createJsonEditor = this.createJsonEditor.bind(this);
+    this.handleRefresh = this.handleRefresh.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this);
+    this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this);
+    this.renderModalTitle = this.renderModalTitle.bind(this);
+    this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+  }
 
-        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");
-            if (this.state.policyInstanceType === OnapConstant.microServiceType) {
-                this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData);
-                this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
-                LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => {
-                    this.setState({ show: false });
-                    this.props.history.push('/');
-                    this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-                });
-            } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
-                this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData);
-                this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
-                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());
-                });
-            }
-        }
-    }
+  handleSave() {
+    var editorData = this.state.jsonEditor.getValue();
+    var errors = this.state.jsonEditor.validate();
+    errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName()));
 
-    customValidation(editorData, templateName) {
-        // method for sub-classes to override with customized validation
-        return [];
+    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");
+      if (this.state.policyInstanceType === OnapConstant.microServiceType) {
+        this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData);
+        this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
+        LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => {
+          this.setState({ show: false });
+          this.props.history.push('/');
+          this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+        });
+      } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
+        this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData);
+        this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
+        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());
+        });
+      }
     }
+  }
 
-    handleClose() {
-        this.setState({ show: false });
-        this.props.history.push('/');
-    }
+  customValidation(editorData, templateName) {
+    // method for sub-classes to override with customized validation
+    return [];
+  }
 
-    componentDidMount() {
-        this.renderJsonEditor();
-    }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-    componentDidUpdate() {
-        if (this.state.showSucAlert === true || this.state.showFailAlert === true) {
-            let modalElement = document.getElementById("policyModal")
-            if (modalElement) {
-                modalElement.scrollTo(0, 0);
-            }
-        }
-    }
+  componentDidMount() {
+    this.renderJsonEditor();
+  }
 
-    createJsonEditor(toscaModel, editorData) {
-        return new JSONEditor(document.getElementById("editor"),
-        {   schema: toscaModel,
-              startval: editorData,
-              theme: 'bootstrap4',
-              iconlib: 'fontawesome5',
-              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
-        })
+  componentDidUpdate() {
+    if (this.state.showSucAlert === true || this.state.showFailAlert === true) {
+      let modalElement = document.getElementById("policyModal")
+      if (modalElement) {
+        modalElement.scrollTo(0, 0);
+      }
     }
+  }
 
-    renderJsonEditor() {
-        console.debug("Rendering PolicyModal ", this.state.policyName);
-        var toscaModel = {};
-        var editorData = {};
-        var pdpGroupValues = {};
-        var chosenPdpGroupValue, chosenPdpSubgroupValue;
-        if (this.state.policyInstanceType === OnapConstant.microServiceType) {
-            toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
-            editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
-            pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName);
-            chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName);
-            chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName);
-        } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
-            toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
-            editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
-            pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
-            chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName);
-            chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName);
-        }
-
-        if (toscaModel == null) {
-            return;
-        }
+  createJsonEditor(toscaModel, editorData) {
+    return new JSONEditor(document.getElementById("editor"),
+      {
+        schema: toscaModel,
+        startval: editorData,
+        theme: 'bootstrap4',
+        iconlib: 'fontawesome5',
+        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
+      })
+  }
 
-        var pdpSubgroupValues = [];
-        if (typeof(chosenPdpGroupValue) !== "undefined") {
-            var selectedPdpGroup =    pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue));
-            pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
-        }
-        this.setState({
-                        jsonEditor: this.createJsonEditor(toscaModel,editorData),
-                        pdpGroup: pdpGroupValues,
-                        pdpGroupList: pdpGroupValues.map(entry => {
-                                                      return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] };
-                                              }),
-                        pdpSubgroupList: pdpSubgroupValues,
-                        chosenPdpGroup: chosenPdpGroupValue,
-                        chosenPdpSubgroup: chosenPdpSubgroupValue
-                    })
+  renderJsonEditor() {
+    console.debug("Rendering PolicyModal ", this.state.policyName);
+    var toscaModel = {};
+    var editorData = {};
+    var pdpGroupValues = {};
+    var chosenPdpGroupValue, chosenPdpSubgroupValue;
+    if (this.state.policyInstanceType === OnapConstant.microServiceType) {
+      toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
+      editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
+      pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName);
+      chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName);
+      chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName);
+    } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
+      toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
+      editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
+      pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
+      chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName);
+      chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName);
     }
 
-    handlePdpGroupChange(e) {
-        var selectedPdpGroup =    this.state.pdpGroup.filter(entry => (Object.keys(entry)[0] === e.value));
-        const pdpSubgroupValues = selectedPdpGroup[0][e.value].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
-        if (this.state.chosenPdpGroup !== e.value) {
-            this.setState({
-                chosenPdpGroup: e.value,
-                chosenPdpSubgroup: '',
-                pdpSubgroupList: pdpSubgroupValues
-            });
-        }
+    if (toscaModel == null) {
+      return;
     }
 
-    handlePdpSubgroupChange(e) {
-        this.setState({ chosenPdpSubgroup: e.value });
+    var pdpSubgroupValues = [];
+    if (typeof (chosenPdpGroupValue) !== "undefined") {
+      var selectedPdpGroup = pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue));
+      pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => {
+        return { label: pdpSubgroup, value: pdpSubgroup }
+      });
     }
+    this.setState({
+      jsonEditor: this.createJsonEditor(toscaModel, editorData),
+      pdpGroup: pdpGroupValues,
+      pdpGroupList: pdpGroupValues.map(entry => {
+        return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] };
+      }),
+      pdpSubgroupList: pdpSubgroupValues,
+      chosenPdpGroup: chosenPdpGroupValue,
+      chosenPdpSubgroup: chosenPdpSubgroupValue
+    })
+  }
 
-    handleRefresh() {
-        var newLoopCache, toscaModel, editorData;
-        if (this.state.policyInstanceType === OnapConstant.microServiceType) {
-            LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
-                newLoopCache =  new LoopCache(data);
-                toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
-                editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName);
-                document.getElementById("editor").innerHTML = "";
-                this.setState({
-                    loopCache: newLoopCache,
-                    jsonEditor: this.createJsonEditor(toscaModel,editorData),
-                    showSucAlert: true,
-                    showMessage: "Successfully refreshed"
-                });
-            })
-            .catch(error => {
-                console.error("Error while refreshing the Operational Policy Json Representation");
-                this.setState({
-                    showFailAlert: true,
-                    showMessage: "Refreshing of UI failed"
-                });
-            });
-        } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
-            LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
-                var newLoopCache =  new LoopCache(data);
-                toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
-                editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
-                document.getElementById("editor").innerHTML = "";
-                this.setState({
-                    loopCache: newLoopCache,
-                    jsonEditor: this.createJsonEditor(toscaModel,editorData),
-                    showSucAlert: true,
-                    showMessage: "Successfully refreshed"
-                });
-            })
-            .catch(error => {
-                console.error("Error while refreshing the Operational Policy Json Representation");
-                this.setState({
-                    showFailAlert: true,
-                    showMessage: "Refreshing of UI failed"
-                });
-            });
-        }
+  handlePdpGroupChange(e) {
+    var selectedPdpGroup = this.state.pdpGroup.filter(entry => (Object.keys(entry)[0] === e.value));
+    const pdpSubgroupValues = selectedPdpGroup[0][e.value].map((pdpSubgroup) => {
+      return { label: pdpSubgroup, value: pdpSubgroup }
+    });
+    if (this.state.chosenPdpGroup !== e.value) {
+      this.setState({
+        chosenPdpGroup: e.value,
+        chosenPdpSubgroup: '',
+        pdpSubgroupList: pdpSubgroupValues
+      });
     }
+  }
 
-    disableAlert() {
-        this.setState ({ showSucAlert: false, showFailAlert: false });
-    }
+  handlePdpSubgroupChange(e) {
+    this.setState({ chosenPdpSubgroup: e.value });
+  }
 
-    renderPdpGroupDropDown() {
-        if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
-            return (
-                <Form.Group as={Row} controlId="formPlaintextEmail">
-                    <Form.Label column sm="2">Pdp Group Info</Form.Label>
-                    <Col sm="3">
-                        <Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
-                    </Col>
-                    <Col sm="3">
-                        <Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
-                    </Col>
-                </Form.Group>
-            );
-        }
+  handleRefresh() {
+    var newLoopCache, toscaModel, editorData;
+    if (this.state.policyInstanceType === OnapConstant.microServiceType) {
+      LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(), this.state.policyName).then(data => {
+        newLoopCache = new LoopCache(data);
+        toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
+        editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName);
+        document.getElementById("editor").innerHTML = "";
+        this.setState({
+          loopCache: newLoopCache,
+          jsonEditor: this.createJsonEditor(toscaModel, editorData),
+          showSucAlert: true,
+          showMessage: "Successfully refreshed"
+        });
+      })
+        .catch(error => {
+          console.error("Error while refreshing the Operational Policy Json Representation");
+          this.setState({
+            showFailAlert: true,
+            showMessage: "Refreshing of UI failed"
+          });
+        });
+    } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
+      LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(), this.state.policyName).then(data => {
+        var newLoopCache = new LoopCache(data);
+        toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
+        editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
+        document.getElementById("editor").innerHTML = "";
+        this.setState({
+          loopCache: newLoopCache,
+          jsonEditor: this.createJsonEditor(toscaModel, editorData),
+          showSucAlert: true,
+          showMessage: "Successfully refreshed"
+        });
+      })
+        .catch(error => {
+          console.error("Error while refreshing the Operational Policy Json Representation");
+          this.setState({
+            showFailAlert: true,
+            showMessage: "Refreshing of UI failed"
+          });
+        });
     }
+  }
 
-    renderOpenLoopMessage() {
-        if(this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) {
-            return (
-                   "Operational Policy cannot be configured as only Open Loop is supported for this Template!"
-               );
-           }
-    }
+  disableAlert() {
+    this.setState({ showSucAlert: false, showFailAlert: false });
+  }
 
-    renderModalTitle() {
-        return (
-                <Modal.Title>Edit the policy</Modal.Title>
-        );
+  renderPdpGroupDropDown() {
+    if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+      return (
+        <Form.Group as={ Row } controlId="formPlaintextEmail">
+          <Form.Label column sm="2">Pdp Group Info</Form.Label>
+          <Col sm="3">
+            <Select value={ { label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup } } onChange={ this.handlePdpGroupChange } options={ this.state.pdpGroupList }/>
+          </Col>
+          <Col sm="3">
+            <Select value={ { label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup } } onChange={ this.handlePdpSubgroupChange } options={ this.state.pdpSubgroupList }/>
+          </Col>
+        </Form.Group>
+      );
     }
+  }
 
-    renderButton() {
-        var allElement = [(<Button key="close" variant="secondary" onClick={this.handleClose}>
-                                                   Close
-                         </Button>)];
-        if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
-             allElement.push((
-                <Button key="save" variant="primary" disabled={this.readOnly} onClick={this.handleSave}>
-                                Save Changes
-                </Button>
-             ));
-             allElement.push((
-                <Button key="refresh" variant="primary" disabled={this.readOnly} onClick={this.handleRefresh}>
-                                Refresh
-                </Button>
-             ));
-        }
-        return allElement;
+  renderOpenLoopMessage() {
+    if (this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) {
+      return (
+        "Operational Policy cannot be configured as only Open Loop is supported for this Template!"
+      );
     }
+  }
 
-    render() {
-        return (
-            <ModalStyled size="xl" backdrop="static" keyboard={false} show={this.state.show} onHide={this.handleClose}>
-                <Modal.Header closeButton>
-                    {this.renderModalTitle()}
-                </Modal.Header>
-                                <Alert variant="success" show={this.state.showSucAlert} 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>
-                <Modal.Body>
-                    {this.renderOpenLoopMessage()}
-                    <div id="editor" />
-                    {this.renderPdpGroupDropDown()}
-                </Modal.Body>
-                <Modal.Footer>
-                    {this.renderButton()}
-                </Modal.Footer>
-            </ModalStyled>
-        );
+  renderModalTitle() {
+    return (
+      <Modal.Title>Edit the policy</Modal.Title>
+    );
+  }
+
+  renderButton() {
+    var allElement = [(<Button key="close" variant="secondary" onClick={ this.handleClose }>
+      Close
+    </Button>)];
+    if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+      allElement.push((
+        <Button key="save" variant="primary" disabled={ this.readOnly } onClick={ this.handleSave }>
+          Save Changes
+        </Button>
+      ));
+      allElement.push((
+        <Button key="refresh" variant="primary" disabled={ this.readOnly } onClick={ this.handleRefresh }>
+          Refresh
+        </Button>
+      ));
     }
+    return allElement;
+  }
+
+  render() {
+    return (
+      <ModalStyled size="xl" backdrop="static" keyboard={ false } show={ this.state.show } onHide={ this.handleClose }>
+        <Modal.Header closeButton>
+          { this.renderModalTitle() }
+        </Modal.Header>
+        <Alert variant="success" show={ this.state.showSucAlert } 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>
+        <Modal.Body>
+          { this.renderOpenLoopMessage() }
+          <div id="editor"/>
+          { this.renderPdpGroupDropDown() }
+        </Modal.Body>
+        <Modal.Footer>
+          { this.renderButton() }
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
index 1e6fac0a0..658b19e26 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
@@ -29,107 +29,107 @@ import OnapConstant from '../../../utils/OnapConstants';
 import { shallow } from 'enzyme';
 
 describe('Verify PolicyModal', () => {
-    beforeEach(() => {
-        fetch.resetMocks();
-        fetch.mockImplementation(() => {
-            return Promise.resolve({
-                ok: true,
-                status: 200,
-                text: () => "OK"
-            });
-        });
-    })
-    const loopCacheStr = {
-            "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-            "operationalPolicies": [{
-                "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-                "configurationsJson": {
-                    "operational_policy": {
-                        "controlLoop": {},
-                        "policies": []
-                    }
-                },
-                "policyModel": {"policyPdpGroup": {"supportedPdpGroups":[{"monitoring": ["xacml"]}]}},
-                "jsonRepresentation" : {"schema": {}}
-             }]
-    };
-
-    const loopCache = new LoopCache(loopCacheStr);
-    const historyMock = { push: jest.fn() };
-    const flushPromises = () => new Promise(setImmediate);
-    const match = {params: {policyName:"OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType}}
-
-    it('Test handleClose', () => {
-      const handleClose = jest.spyOn(PolicyModal.prototype,'handleClose');
-      const component = mount(<PolicyModal history={historyMock} match={match} loopCache={loopCache}/>)
-
-      component.find('[variant="secondary"]').prop('onClick')();
-
-      expect(handleClose).toHaveBeenCalledTimes(1);
-      expect(component.state('show')).toEqual(false);
-      expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => "OK"
+      });
     });
-
-    it('Test handleSave', async () => {
-        const loadLoopFunction = jest.fn();
-        const handleSave = jest.spyOn(PolicyModal.prototype,'handleSave');
-        const component = mount(<PolicyModal history={historyMock} 
-                          loopCache={loopCache} match={match} loadLoopFunction={loadLoopFunction} />)
-
-        component.find('[variant="primary"]').get(0).props.onClick();
-        await flushPromises();
-        component.update();
-
-        expect(handleSave).toHaveBeenCalledTimes(1);
-        expect(component.state('show')).toEqual(false);
-        expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+  })
+  const loopCacheStr = {
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "operationalPolicies": [{
+      "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+      "configurationsJson": {
+        "operational_policy": {
+          "controlLoop": {},
+          "policies": []
+        }
+      },
+      "policyModel": { "policyPdpGroup": { "supportedPdpGroups": [{ "monitoring": ["xacml"] }] } },
+      "jsonRepresentation": { "schema": {} }
+    }]
+  };
+
+  const loopCache = new LoopCache(loopCacheStr);
+  const historyMock = { push: jest.fn() };
+  const flushPromises = () => new Promise(setImmediate);
+  const match = { params: { policyName: "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType } }
+
+  it('Test handleClose', () => {
+    const handleClose = jest.spyOn(PolicyModal.prototype, 'handleClose');
+    const component = mount(<PolicyModal history={ historyMock } match={ match } loopCache={ loopCache }/>)
+
+    component.find('[variant="secondary"]').prop('onClick')();
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
+
+  it('Test handleSave', async () => {
+    const loadLoopFunction = jest.fn();
+    const handleSave = jest.spyOn(PolicyModal.prototype, 'handleSave');
+    const component = mount(<PolicyModal history={ historyMock }
+                                         loopCache={ loopCache } match={ match } loadLoopFunction={ loadLoopFunction }/>)
+
+    component.find('[variant="primary"]').get(0).props.onClick();
+    await flushPromises();
+    component.update();
+
+    expect(handleSave).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
+
+  it('Test handleRefresh', async () => {
+    LoopService.refreshOperationalPolicyJson = jest.fn().mockImplementation(() => {
+      return Promise.resolve(loopCacheStr);
     });
-
-    it('Test handleRefresh', async () => {
-        LoopService.refreshOperationalPolicyJson = jest.fn().mockImplementation(() => {
-            return Promise.resolve(loopCacheStr);
-        });
-        const updateLoopFunction = jest.fn();
-        const handleRefresh = jest.spyOn(PolicyModal.prototype,'handleRefresh');
-        const component = mount(<PolicyModal loopCache={loopCache} match={match} updateLoopFunction={updateLoopFunction} />)
-
-        component.find('[variant="primary"]').get(1).props.onClick();
-        await flushPromises();
-        component.update();
-
-        expect(handleRefresh).toHaveBeenCalledTimes(1);
-        expect(component.state('show')).toEqual(true);
-        expect(component.state('showSucAlert')).toEqual(true);
-        expect(component.state('showMessage')).toEqual("Successfully refreshed");
-    });
-
-    it('Test handlePdpGroupChange', () => {
-        const component = mount(<PolicyModal loopCache={loopCache} match={match} />)
-        component.setState({ 
-                "pdpGroup": [{"option1":["subPdp1","subPdp2"]}],
-                "chosenPdpGroup": "option2"
-        });
-        expect(component.state('chosenPdpGroup')).toEqual("option2");
-
-        const instance = component.instance();
-        const event = {label:"option1", value:"option1"}
-        instance.handlePdpGroupChange(event);
-        expect(component.state('chosenPdpGroup')).toEqual("option1");
-        expect(component.state('chosenPdpSubgroup')).toEqual("");
-        expect(component.state('pdpSubgroupList')).toEqual([{label:"subPdp1", value:"subPdp1"}, {label:"subPdp2", value:"subPdp2"}]);
-    });
-
-    it('Test handlePdpSubgroupChange', () => {
-        const component = mount(<PolicyModal loopCache={loopCache} match={match} />)
-
-        const instance = component.instance();
-        const event = {label:"option1", value:"option1"}
-        instance.handlePdpSubgroupChange(event);
-        expect(component.state('chosenPdpSubgroup')).toEqual("option1");
-    });
-
-    it('Test the render method', () => {
-        const component = shallow(<PolicyModal loopCache={loopCache} match={match}/>)
-        expect(component).toMatchSnapshot();
+    const updateLoopFunction = jest.fn();
+    const handleRefresh = jest.spyOn(PolicyModal.prototype, 'handleRefresh');
+    const component = mount(<PolicyModal loopCache={ loopCache } match={ match } updateLoopFunction={ updateLoopFunction }/>)
+
+    component.find('[variant="primary"]').get(1).props.onClick();
+    await flushPromises();
+    component.update();
+
+    expect(handleRefresh).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(true);
+    expect(component.state('showSucAlert')).toEqual(true);
+    expect(component.state('showMessage')).toEqual("Successfully refreshed");
+  });
+
+  it('Test handlePdpGroupChange', () => {
+    const component = mount(<PolicyModal loopCache={ loopCache } match={ match }/>)
+    component.setState({
+      "pdpGroup": [{ "option1": ["subPdp1", "subPdp2"] }],
+      "chosenPdpGroup": "option2"
     });
-});
\ No newline at end of file
+    expect(component.state('chosenPdpGroup')).toEqual("option2");
+
+    const instance = component.instance();
+    const event = { label: "option1", value: "option1" }
+    instance.handlePdpGroupChange(event);
+    expect(component.state('chosenPdpGroup')).toEqual("option1");
+    expect(component.state('chosenPdpSubgroup')).toEqual("");
+    expect(component.state('pdpSubgroupList')).toEqual([{ label: "subPdp1", value: "subPdp1" }, { label: "subPdp2", value: "subPdp2" }]);
+  });
+
+  it('Test handlePdpSubgroupChange', () => {
+    const component = mount(<PolicyModal loopCache={ loopCache } match={ match }/>)
+
+    const instance = component.instance();
+    const event = { label: "option1", value: "option1" }
+    instance.handlePdpSubgroupChange(event);
+    expect(component.state('chosenPdpSubgroup')).toEqual("option1");
+  });
+
+  it('Test the render method', () => {
+    const component = shallow(<PolicyModal loopCache={ loopCache } match={ match }/>)
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
index 6d3cd7a21..2692aefa0 100644
--- a/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
+++ b/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -27,220 +27,222 @@ import LoopCache from '../../../api/LoopCache';
 import OnapConstant from '../../../utils/OnapConstants';
 
 const DivStyled = styled.div`
-	overflow-x: scroll;
-	  display: flex;
-    width: 100%;
-    height: 100%;
+  overflow-x: scroll;
+  display: flex;
+  width: 100%;
+  height: 100%;
 `
 
-const emptySvg = (<svg> <text x="60" y="40">No LOOP (SVG)</text> </svg>);
+const emptySvg = (<svg>
+  <text x="60" y="40">No LOOP (SVG)</text>
+</svg>);
 
 class SvgGenerator extends React.Component {
-    boxWidth = 200;
-    boxHeight = 100;
-    boxSpace = 50;
-
-    static GENERATED_FROM_INSTANCE = "INSTANCE";
-    static GENERATED_FROM_TEMPLATE = "TEMPLATE";
-
-	state = {
-		loopCache: new LoopCache({}),
-		clickable: false,
-		generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
-	}
-
-	constructor(props) {
-		super(props);
-		this.state.loopCache = props.loopCache;
-		this.state.clickable = props.clickable;
-		this.state.generatedFrom = props.generatedFrom;
-		this.handleSvgClick = this.handleSvgClick.bind(this);
-		this.renderSvg = this.renderSvg.bind(this);
-	}
-
-	shouldComponentUpdate(nextProps, nextState) {
-		return this.state.loopCache !== nextProps.loopCache;
-	}
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.loopCache !== this.props.loopCache) {
-            this.setState({
-                loopCache: this.props.loopCache,
-            });
-        }
+  boxWidth = 200;
+  boxHeight = 100;
+  boxSpace = 50;
+
+  static GENERATED_FROM_INSTANCE = "INSTANCE";
+  static GENERATED_FROM_TEMPLATE = "TEMPLATE";
+
+  state = {
+    loopCache: new LoopCache({}),
+    clickable: false,
+    generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
+  }
+
+  constructor(props) {
+    super(props);
+    this.state.loopCache = props.loopCache;
+    this.state.clickable = props.clickable;
+    this.state.generatedFrom = props.generatedFrom;
+    this.handleSvgClick = this.handleSvgClick.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.loopCache !== nextProps.loopCache;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.loopCache !== this.props.loopCache) {
+      this.setState({
+        loopCache: this.props.loopCache,
+      });
     }
-
-	handleSvgClick(event) {
-		console.debug("svg click event received");
-		if (this.state.clickable) {
-			var elementName = event.target.parentNode.getAttribute('policyId');
-			console.info("SVG element clicked", elementName);
-			// Only allow movement to policy editing IF there busyLoadingCOunt is 0,
-			// meaning we are not waiting for refreshStatus to complete, for example
-			if (elementName !== null && !this.props.isBusyLoading()) {
-				this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
-			}
-		}
-	}
-
-    createVesBox (xPos) {
-        return this.createOneBox(xPos,null,null,'VES Collector','VES',null);
+  }
+
+  handleSvgClick(event) {
+    console.debug("svg click event received");
+    if (this.state.clickable) {
+      var elementName = event.target.parentNode.getAttribute('policyId');
+      console.info("SVG element clicked", elementName);
+      // Only allow movement to policy editing IF there busyLoadingCOunt is 0,
+      // meaning we are not waiting for refreshStatus to complete, for example
+      if (elementName !== null && !this.props.isBusyLoading()) {
+        this.props.history.push("/policyModal/" + event.target.parentNode.getAttribute('policyType') + "/" + elementName);
+      }
     }
-
-    createOneArrow(xPos) {
-        return (
-         <svg width={this.boxSpace} height={this.boxHeight} x={xPos}>
-           <defs>
-            		<marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
-            			<path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
-            				stroke-width= "1" stroke-linecap= "butt" stroke-dasharray= "10000, 1"
-            				fill="#000000" stroke="#000000" />
-            		</marker>
-           </defs>
-           <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
-         </svg>
-        );
+  }
+
+  createVesBox(xPos) {
+    return this.createOneBox(xPos, null, null, 'VES Collector', 'VES', null);
+  }
+
+  createOneArrow(xPos) {
+    return (
+      <svg width={ this.boxSpace } height={ this.boxHeight } x={ xPos }>
+        <defs>
+          <marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
+            <path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
+                  stroke-width="1" stroke-linecap="butt" stroke-dasharray="10000, 1"
+                  fill="#000000" stroke="#000000"/>
+          </marker>
+        </defs>
+        <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
+      </svg>
+    );
+  }
+
+  createBeginCircle(xPos, text) {
+    return (
+      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }>
+        <circle cx={ this.boxWidth - 30 } cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
+        <text x={ this.boxWidth - 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text>
+      </svg>
+    );
+  }
+
+  createEndCircle(xPos, text) {
+    return (
+      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }>
+        <circle cx={ 30 } cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
+        <text x={ 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text>
+      </svg>
+    );
+  }
+
+  createOneBox(xPos, policyId, loopElementModelId, name, title, policyType) {
+    return (
+      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos } title="test">
+        <g policyId={ policyId } loopElementModelId={ loopElementModelId } policyType={ policyType }>
+          <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
+          <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{ title }</text>
+          <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs">{ name }</text>
+          <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs">{ policyId }</text>
+        </g>
+      </svg>
+    );
+  }
+
+  createSvgFromTemplate() {
+    const allElements = [];
+    var xPos = 0;
+
+    allElements.push(this.createBeginCircle(xPos, "Start"))
+    xPos += (this.boxWidth + this.boxSpace);
+
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
+
+    allElements.push(this.createVesBox(xPos));
+    xPos += (this.boxWidth + this.boxSpace);
+
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
+    //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
+    for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
+
+      allElements.push(this.createOneBox(xPos,
+        loopElement['name'],
+        loopElement['name'],
+        loopElement['shortName'],
+        loopElement['loopElementType'],
+        loopElement['loopElementType']))
+      xPos += (this.boxWidth + this.boxSpace);
+      allElements.push(this.createOneArrow(xPos - this.boxSpace));
     }
 
-    createBeginCircle(xPos, text) {
-            return (
-            <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
-                <circle cx={this.boxWidth-30} cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
-                <text x={this.boxWidth-30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
-            </svg>
-            );
-    }
+    allElements.push(this.createEndCircle(xPos, "End"))
+    xPos += (this.boxWidth + this.boxSpace);
 
-    createEndCircle(xPos, text) {
-            return (
-            <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
-                <circle cx={30} cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
-                <text x={30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
-            </svg>
-            );
-    }
-
-    createOneBox(xPos, policyId, loopElementModelId , name, title, policyType) {
-        return (
-        <svg width={this.boxWidth} height={this.boxHeight} x={xPos} title="test">
-            <g policyId={policyId} loopElementModelId={loopElementModelId} policyType={policyType}>
-                <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
-                <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{title}</text>
-                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs" >{name}</text>
-                <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs" >{policyId}</text>
-            </g>
-        </svg>
-        );
-    }
+    return allElements;
+  }
 
-    createSvgFromTemplate() {
-        const allElements = [];
-        var xPos = 0;
+  createSvgFromInstance() {
+    const allElements = [];
+    var xPos = 0;
 
-        allElements.push(this.createBeginCircle(xPos,"Start"))
-        xPos+=(this.boxWidth+this.boxSpace);
+    allElements.push(this.createBeginCircle(xPos, "Start"))
+    xPos += (this.boxWidth + this.boxSpace);
 
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
 
-        allElements.push(this.createVesBox(xPos));
-        xPos+=(this.boxWidth+this.boxSpace);
+    allElements.push(this.createVesBox(xPos));
+    xPos += (this.boxWidth + this.boxSpace);
 
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
-        for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
 
-            allElements.push(this.createOneBox(xPos,
-                loopElement['name'],
-                loopElement['name'],
-                loopElement['shortName'],
-                loopElement['loopElementType'],
-                loopElement['loopElementType']))
-            xPos+=(this.boxWidth+this.boxSpace);
-            allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        }
-
-        allElements.push(this.createEndCircle(xPos, "End"))
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        return allElements;
+    for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
+      var loopElementModelName = this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
+      if (loopElementModelName !== undefined) {
+        loopElementModelName = loopElementModelName['name'];
+      }
+      allElements.push(this.createOneBox(xPos,
+        this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
+        loopElementModelName,
+        this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
+        'microservice',
+        OnapConstant.microServiceType))
+      xPos += (this.boxWidth + this.boxSpace);
+      allElements.push(this.createOneArrow(xPos - this.boxSpace));
     }
 
-    createSvgFromInstance() {
-        const allElements = [];
-        var xPos = 0;
-
-        allElements.push(this.createBeginCircle(xPos,"Start"))
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
-
-        allElements.push(this.createVesBox(xPos));
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
-
-        for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
-            var loopElementModelName =  this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
-            if (loopElementModelName !== undefined) {
-                loopElementModelName = loopElementModelName['name'];
-            }
-            allElements.push(this.createOneBox(xPos,
-                this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
-                loopElementModelName,
-                this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
-                'microservice',
-                OnapConstant.microServiceType))
-            xPos+=(this.boxWidth+this.boxSpace);
-            allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        }
-
-        for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
-            loopElementModelName =  this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
-            if (loopElementModelName !== undefined) {
-                loopElementModelName = loopElementModelName['name'];
-            }
-            allElements.push(this.createOneBox(xPos,
-                this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
-                loopElementModelName,
-                this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
-                'operational',
-                OnapConstant.operationalPolicyType))
-            xPos+=(this.boxWidth+this.boxSpace);
-            allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        }
-
-        allElements.push(this.createEndCircle(xPos, "End"))
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        return allElements;
+    for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
+      loopElementModelName = this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
+      if (loopElementModelName !== undefined) {
+        loopElementModelName = loopElementModelName['name'];
+      }
+      allElements.push(this.createOneBox(xPos,
+        this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
+        loopElementModelName,
+        this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
+        'operational',
+        OnapConstant.operationalPolicyType))
+      xPos += (this.boxWidth + this.boxSpace);
+      allElements.push(this.createOneArrow(xPos - this.boxSpace));
     }
 
-    renderSvg() {
-        if (this.state.loopCache.getLoopName() === undefined) {
-            return [emptySvg];
-        }
-        if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
-            return this.createSvgFromInstance();
-        } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
-            return this.createSvgFromTemplate();
-        }
-    }
+    allElements.push(this.createEndCircle(xPos, "End"))
+    xPos += (this.boxWidth + this.boxSpace);
 
-    render() {
-        var allTheElements = this.renderSvg();
-        var svgWidth = this.boxWidth*allTheElements.length;
-        var svgHeight = this.boxHeight+50;
-        return (
-
-            <DivStyled onClick={this.handleSvgClick} >
-                <svg key="main" height={svgHeight} width={svgWidth}  viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
-                    <svg key="content" x="-50" y="25">
-                        {allTheElements}
-					</svg>
-                </svg>
-            </DivStyled>
-        );
+    return allElements;
+  }
+
+  renderSvg() {
+    if (this.state.loopCache.getLoopName() === undefined) {
+      return [emptySvg];
+    }
+    if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
+      return this.createSvgFromInstance();
+    } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
+      return this.createSvgFromTemplate();
     }
+  }
+
+  render() {
+    var allTheElements = this.renderSvg();
+    var svgWidth = this.boxWidth * allTheElements.length;
+    var svgHeight = this.boxHeight + 50;
+    return (
+
+      <DivStyled onClick={ this.handleSvgClick }>
+        <svg key="main" height={ svgHeight } width={ svgWidth } viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
+          <svg key="content" x="-50" y="25">
+            { allTheElements }
+          </svg>
+        </svg>
+      </DivStyled>
+    );
+  }
 }
 
 export default withRouter(SvgGenerator);