Add error handling and refactoring

Added error for when common or instance props can't be retrieved
Added error for monitoring when control loops can't be retrieved
Made node templates collapsed by default when editing properties
Added single service function to get common or instance properties

Issue-ID: POLICY-3439
Change-Id: I74560a06aae1a820862f977d5e7ac86597a093c0
Signed-off-by: saul.gill <saul.gill@est.tech>

8 files changed, 153 insertions, 28 deletions

diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js
index ffe149a..9a615d0 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js
@@ -42,6 +42,10 @@ const StyledMessagesDiv = styled.div`
   text-align: center;
 `
 
+const AlertStyled = styled(Alert)`
+  margin-top: 10px;
+`
+
 const CommissioningModal = (props) => {
   const [windowLocationPathName, setWindowLocationPathName] = useState('');
   const [fullToscaTemplate, setFullToscaTemplate] = useState({});
@@ -51,6 +55,8 @@ const CommissioningModal = (props) => {
   const [jsonEditor, setJsonEditor] = useState(null);
   const [show, setShow] = useState(true);
   const [alertMessages, setAlertMessages] = useState();
+  const [commonPropertiesResponseOk, setCommonPropertiesResponseOk] = useState(true);
+  const [serviceTemplateResponseOk, setServiceTemplateResponseOk] = useState(true);
   const name = 'ToscaServiceTemplateSimple';
   const version = '1.0.0';
   let editorTemp = null
@@ -58,10 +64,26 @@ const CommissioningModal = (props) => {
   useEffect(async () => {
     const toscaTemplateResponse = await ControlLoopService.getToscaTemplate(name, version, windowLocationPathName)
       .catch(error => error.message);
-    const toscaCommonProperties = await ControlLoopService.getCommonProperties(name, version, windowLocationPathName)
+    const toscaCommonProperties = await ControlLoopService.getCommonOrInstanceProperties(name, version, windowLocationPathName, true)
       .catch(error => error.message);
 
-    await renderJsonEditor(toscaTemplateResponse, toscaCommonProperties)
+    if (!toscaCommonProperties.ok) {
+      const errorResponse = await toscaCommonProperties.json()
+      console.log(errorResponse)
+      setCommonProperties(errorResponse)
+      setCommonPropertiesResponseOk(false);
+    }
+
+    if (!toscaTemplateResponse.ok) {
+      const errorResponse = await toscaTemplateResponse.json()
+      console.log(errorResponse)
+      setFullToscaTemplate(errorResponse)
+      setServiceTemplateResponseOk(false);
+    }
+
+    if (toscaTemplateResponse.ok && toscaCommonProperties.ok) {
+      await renderJsonEditor(toscaTemplateResponse, toscaCommonProperties)
+    }
 
   }, []);
 
@@ -189,6 +211,9 @@ const CommissioningModal = (props) => {
 
       })
       newSchemaObject.properties[templateKey] = {
+        options: {
+          "collapsed": true
+        },
         properties: propertiesObject
       }
     })
@@ -209,7 +234,7 @@ const CommissioningModal = (props) => {
       case "object":
         return "object"
       default:
-        return "string"
+        return "object"
     }
   }
 
@@ -246,12 +271,16 @@ const CommissioningModal = (props) => {
                  backdrop="static"
                  keyboard={ false }>
       <Modal.Header closeButton>
-        <Modal.Title>Edit Common Properties</Modal.Title>
+        <Modal.Title>Change Control Loop Common Properties</Modal.Title>
       </Modal.Header>
       <br/>
       <div style={ { padding: '5px 5px 0px 5px' } }>
         <Modal.Body>
           <div id="editor"/>
+          <AlertStyled show={ !serviceTemplateResponseOk }
+                       variant="danger">Can't get service template:<br/>{ JSON.stringify(fullToscaTemplate, null, 2) }</AlertStyled>
+          <AlertStyled show={ !commonPropertiesResponseOk }
+                       variant="danger">Can't get common properties:<br/>{ JSON.stringify(commonProperties, null, 2) }</AlertStyled>
         </Modal.Body>
       </div>
       <StyledMessagesDiv>
@@ -262,7 +291,7 @@ const CommissioningModal = (props) => {
           variant="primary"
           onClick={ handleSave }
         >Save</Button>
-        <Button variant="success"
+        <Button variant="success mr-auto"
                 onClick={ handleCommission }>Commission</Button>
         <Button variant="secondary"
                 onClick={ handleClose }>Close</Button>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js
index 7a66812..0380fa6 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js
@@ -42,6 +42,10 @@ const DivWhiteSpaceStyled = styled.div`
   text-align: center;
 `
 
+const AlertStyled = styled(Alert)`
+  margin-top: 10px;
+`
+
 const templateName = "ToscaServiceTemplateSimple";
 const templateVersion = "1.0.0";
 let tempJsonEditor = null;
@@ -54,13 +58,32 @@ const InstanceModal = (props) => {
   const [toscaJsonSchema, setToscaJsonSchema] = useState({});
   const [jsonEditor, setJsonEditor] = useState(null);
   const [alertMessage, setAlertMessage] = useState(null);
+  const [instancePropertiesGlobal, setInstancePropertiesGlobal] = useState({});
+  const [serviceTemplateResponseOk, setServiceTemplateResponseOk] = useState(true);
+  const [instancePropertiesResponseOk, setInstancePropertiesResponseOk] = useState(true);
 
   useEffect(async () => {
-    const toscaInstanceProperties = await ControlLoopService.getInstanceProperties(templateName, templateVersion, windowLocationPathname).catch(error => error.message);
+    const toscaInstanceProperties = await ControlLoopService.getCommonOrInstanceProperties(templateName, templateVersion, windowLocationPathname, false).catch(error => error.message);
+
+    const toscaTemplateResponse = await ControlLoopService.getToscaTemplate(templateName, templateVersion, windowLocationPathname).catch(error => error.message);
+
+    if (!toscaInstanceProperties.ok) {
+      const errorResponse = await toscaInstanceProperties.json()
+      console.log(errorResponse)
+      setInstancePropertiesGlobal(errorResponse);
+      setInstancePropertiesResponseOk(false);
+    }
 
-    const toscaSchemaResponse = await ControlLoopService.getToscaTemplate(templateName, templateVersion, windowLocationPathname).catch(error => error.message);
+    if (!toscaTemplateResponse.ok) {
+      const errorResponse = await toscaTemplateResponse.json()
+      console.log(errorResponse)
+      setToscaFullTemplate(errorResponse)
+      setServiceTemplateResponseOk(false);
+    }
 
-    await parseJsonSchema(toscaSchemaResponse, toscaInstanceProperties);
+    if (toscaTemplateResponse.ok && toscaInstanceProperties.ok) {
+      await parseJsonSchema(toscaTemplateResponse, toscaInstanceProperties);
+    }
 
   }, []);
 
@@ -113,9 +136,8 @@ const InstanceModal = (props) => {
     newSchemaObject.type = "object";
     newSchemaObject.properties = {};
 
-    const newSchemaObjectArray = [];
     instancePropsArray.forEach(([key, value]) => {
-      const templateObj = {};
+
       const propertiesObject = {};
 
       Object.entries(value.properties).forEach(([pKey, pValue]) => {
@@ -125,6 +147,9 @@ const InstanceModal = (props) => {
       });
 
       newSchemaObject.properties[key] = {
+        options: {
+          "collapsed": true
+        },
         properties: propertiesObject
       }
     });
@@ -143,7 +168,7 @@ const InstanceModal = (props) => {
       case "object":
         return "object";
       default:
-        return "string";
+        return "object";
 
     }
   }
@@ -186,8 +211,8 @@ const InstanceModal = (props) => {
 
     instanceDataProperties.forEach(([key, value]) => {
       const nodeTemplatesKey = nodeTemplates[key]
-      Object.entries(value).forEach((pKey, pValue) => {
-        nodeTemplatesKey.properties[pKey] = pValue;
+      Object.entries(value).forEach(([pKey, pValue]) => {
+        nodeTemplatesKey.properties[pKey] = pValue
       });
     });
 
@@ -245,6 +270,10 @@ const InstanceModal = (props) => {
       <div style={ { padding: '5px 5px 0 5px' } }>
         <Modal.Body>
           <div id="editor"/>
+          <AlertStyled show={ !serviceTemplateResponseOk }
+                       variant="danger">Can't get service template:<br/>{ JSON.stringify(toscaFullTemplate, null, 2) }</AlertStyled>
+          <AlertStyled show={ !instancePropertiesResponseOk }
+                       variant="danger">Can't get instance properties:<br/>{ JSON.stringify(instancePropertiesGlobal, null, 2) }</AlertStyled>
         </Modal.Body>
         <DivWhiteSpaceStyled>
           { alertMessage }
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
index 47de20c..6c589b8 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
@@ -24,22 +24,36 @@ import Button from "react-bootstrap/Button";
 import InstantiationItem from "./InstantiationItem";
 import ControlLoopService from "../../../api/ControlLoopService";
 import InstantiationElements from "./InstantiationElements";
+import { Alert } from "react-bootstrap";
 
 const ModalStyled = styled(Modal)`
   background-color: transparent;
 `
+const AlertStyled = styled(Alert)`
+  margin-top: 10px;
+`
 
 const MonitorInstantiation = (props) => {
   const [show, setShow] = useState(true);
   const [controlLoopList, setControlLoopList] = useState([]);
   const [windowLocationPathname, setWindowLocationPathname] = useState('');
+  const [controlLoopInstantiationOk, setControlLoopInstantiationOk] = useState(true);
+  const [controlLoopInstantiationError, setControlLoopInstantiationError] = useState({});
 
-  useEffect(() => {
+  useEffect(async () => {
     setWindowLocationPathname(window.location.pathname);
 
-    ControlLoopService.getControlLoopInstantiation(windowLocationPathname).then(controlLoopList => {
-      setControlLoopList(controlLoopList['controlLoopList']);
-    });
+    const controlLoopInstantiation = await ControlLoopService.getControlLoopInstantiation(windowLocationPathname)
+      .catch(error => error.message);
+
+    const controlLoopInstantiationJson = await controlLoopInstantiation.json()
+    console.log(controlLoopInstantiationJson)
+    if (!controlLoopInstantiation.ok || controlLoopInstantiationJson['controlLoopList'].length === 0) {
+      setControlLoopInstantiationOk(false)
+      setControlLoopInstantiationError(controlLoopInstantiationJson)
+    } else {
+      setControlLoopList(controlLoopInstantiationJson[['controlLoopList']])
+    }
   }, [])
 
   const handleClose = () => {
@@ -61,6 +75,8 @@ const MonitorInstantiation = (props) => {
             </InstantiationItem>
           ))
         }
+        <AlertStyled show={ !controlLoopInstantiationOk }
+                     variant="danger">Can't get control loop instantiation info:<br/>{ JSON.stringify(controlLoopInstantiationError, null, 2) }</AlertStyled>
       </Modal.Body>
       <Modal.Footer>
         <Button variant="secondary" type="null" onClick={ handleClose }>Close</Button>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js
index 0ff8833..0eff5fe 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js
@@ -44,9 +44,10 @@ const PreStyled = styled.pre`
 const ReadAndConvertYaml = (props) => {
   const [show, setShow] = useState(true);
   const [toscaTemplateData, setToscaTemplateData] = useState();
-  const [deleteToscaTemplateData, setDeleteToscaTemplateData] = useState();
+  const [deleteToscaTemplateData, setDeleteToscaTemplateData] = useState(null);
   const [responseOk, setResponseOk] = useState(true);
   const [deleteResponseOk, setDeleteResponseOk] = useState(true);
+  const [showDeleteButton, setShowDeleteButton] = useState(false);
   const name = 'ToscaServiceTemplateSimple';
   const version = '1.0.0';
 
@@ -57,7 +58,6 @@ const ReadAndConvertYaml = (props) => {
   }
 
   const getToscaServiceTemplateHandler = async (toscaServiceTemplateResponse) => {
-    // console.log('getToscaServiceTemplateHandler called: ' + toscaServiceTemplate);
 
     if (!toscaServiceTemplateResponse.ok) {
       console.log('Response is not ok');
@@ -68,20 +68,26 @@ const ReadAndConvertYaml = (props) => {
       setResponseOk(true);
       const toscaData = await toscaServiceTemplateResponse.json();
       setToscaTemplateData(toscaData);
+      setShowDeleteButton(true)
     }
   }
 
   const deleteToscaServiceTemplateHandler = async (deleteToscaServiceTemplateResponse) => {
 
     if (!deleteToscaServiceTemplateResponse.ok) {
+      setShowDeleteButton(false)
       console.log('Delete response not ok');
       setDeleteResponseOk(false);
-      const deleteToscaData = await deleteToscaServiceTemplateResponse;
+      const deleteToscaData = await deleteToscaServiceTemplateResponse.json();
+      console.log(deleteToscaData)
       setDeleteToscaTemplateData(deleteToscaData);
     } else {
+      setShowDeleteButton(false)
       setDeleteResponseOk(true);
       const deleteToscaData = await deleteToscaServiceTemplateResponse.json();
+      setDeleteToscaTemplateData(null)
       setDeleteToscaTemplateData(deleteToscaData);
+      setShowDeleteButton(false);
     }
   }
 
@@ -101,15 +107,15 @@ const ReadAndConvertYaml = (props) => {
         { responseOk && <PreStyled> { JSON.stringify(toscaTemplateData, null, 2) } </PreStyled> }
         <AlertStyled show={ !responseOk }
                      variant="danger">{ JSON.stringify(toscaTemplateData, null, 2) }</AlertStyled>
-        { deleteResponseOk && responseOk && toscaTemplateData != null &&
+        { showDeleteButton &&
         <DeleteToscaTemplate templateName={ name }
                              templateVersion={ version }
                              onDeleteToscaServiceTemplate={ deleteToscaServiceTemplateHandler }
         />
         }
         <AlertStyled show={ !deleteResponseOk }
-                     variant="danger">{ deleteToscaTemplateData }</AlertStyled>
-        <AlertStyled show={ deleteResponseOk && deleteToscaTemplateData != null }
+                     variant="danger">{ JSON.stringify(deleteToscaTemplateData, null, 2) }</AlertStyled>
+        <AlertStyled show={ deleteResponseOk && deleteToscaTemplateData != null && toscaTemplateData != null}
                      variant="success"><h2>Delete Successful</h2><PreStyled>{ JSON.stringify(deleteToscaTemplateData, null, 2) }</PreStyled></AlertStyled>
       </Modal.Body>
       <Modal.Footer>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap
index 41c13de..8c26ff6 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap
@@ -13,7 +13,7 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = `
     closeLabel="Close"
   >
     <ModalTitle>
-      Edit Common Properties
+      Change Control Loop Common Properties
     </ModalTitle>
   </ModalHeader>
   <br />
@@ -28,6 +28,22 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = `
       <div
         id="editor"
       />
+      <Styled(Alert)
+        show={false}
+        variant="danger"
+      >
+        Can't get service template:
+        <br />
+        {}
+      </Styled(Alert)>
+      <Styled(Alert)
+        show={false}
+        variant="danger"
+      >
+        Can't get common properties:
+        <br />
+        {}
+      </Styled(Alert)>
     </ModalBody>
   </div>
   <styled.div />
@@ -44,7 +60,7 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = `
       active={false}
       disabled={false}
       onClick={[Function]}
-      variant="success"
+      variant="success mr-auto"
     >
       Commission
     </Button>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstanceModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstanceModal.test.js.snap
index 07ae8f8..ba7caf9 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstanceModal.test.js.snap
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstanceModal.test.js.snap
@@ -27,6 +27,22 @@ exports[`Verify MonitoringInstantiation renders correctly 1`] = `
       <div
         id="editor"
       />
+      <Styled(Alert)
+        show={false}
+        variant="danger"
+      >
+        Can't get service template:
+        <br />
+        {}
+      </Styled(Alert)>
+      <Styled(Alert)
+        show={false}
+        variant="danger"
+      >
+        Can't get instance properties:
+        <br />
+        {}
+      </Styled(Alert)>
     </ModalBody>
     <styled.div />
   </div>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/MonitorInstantiation.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/MonitorInstantiation.test.js.snap
index 6504b54..df5c243 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/MonitorInstantiation.test.js.snap
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/MonitorInstantiation.test.js.snap
@@ -16,7 +16,16 @@ exports[`Verify MonitoringInstantiation renders correctly 1`] = `
       Tosca Instantiation - Monitoring
     </ModalTitle>
   </ModalHeader>
-  <ModalBody />
+  <ModalBody>
+    <Styled(Alert)
+      show={false}
+      variant="danger"
+    >
+      Can't get control loop instantiation info:
+      <br />
+      {}
+    </Styled(Alert)>
+  </ModalBody>
   <ModalFooter>
     <Button
       active={false}
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap
index d515474..76739f3 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap
@@ -33,7 +33,9 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = `
     <Styled(Alert)
       show={false}
       variant="danger"
-    />
+    >
+      null
+    </Styled(Alert)>
     <Styled(Alert)
       show={false}
       variant="success"
@@ -41,7 +43,9 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = `
       <h2>
         Delete Successful
       </h2>
-      <styled.pre />
+      <styled.pre>
+        null
+      </styled.pre>
     </Styled(Alert)>
   </ModalBody>
   <ModalFooter>