From 706b284cb8091ef00bc352bc5ee32f4fdca1162a Mon Sep 17 00:00:00 2001 From: "saul.gill" Date: Mon, 9 Aug 2021 14:19:33 +0100 Subject: 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 --- gui-clamp/ui-react/src/api/ControlLoopService.js | 78 +++++++++------------- .../dialogs/ControlLoop/CommissioningModal.js | 39 +++++++++-- .../dialogs/ControlLoop/InstanceModal.js | 45 ++++++++++--- .../dialogs/ControlLoop/MonitorInstantiation.js | 24 +++++-- .../dialogs/ControlLoop/ReadAndConvertYaml.js | 18 +++-- .../__snapshots__/CommissioningModal.test.js.snap | 20 +++++- .../__snapshots__/InstanceModal.test.js.snap | 16 +++++ .../MonitorInstantiation.test.js.snap | 11 ++- .../__snapshots__/ReadAndConvertYaml.test.js.snap | 8 ++- 9 files changed, 186 insertions(+), 73 deletions(-) diff --git a/gui-clamp/ui-react/src/api/ControlLoopService.js b/gui-clamp/ui-react/src/api/ControlLoopService.js index 513fe68..4a2fdbd 100644 --- a/gui-clamp/ui-react/src/api/ControlLoopService.js +++ b/gui-clamp/ui-react/src/api/ControlLoopService.js @@ -21,42 +21,9 @@ export default class ControlLoopService { static async getControlLoopInstantiation(windowLocationPathname) { - return await fetch(windowLocationPathname + '/restservices/clds/v2/toscaControlLoop/getToscaInstantiation', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - credentials: 'same-origin', - }).then(response => { - console.log("fetchControlLoopInstantiation received " + response.status); - - if (response.ok) { - console.info("fetchControlLoopInstantiation query successful"); - return response.json(); - } else { - return response.text().then(responseBody => { - throw Error("HTTP " + response.status + "," + responseBody); - }); - } - }).catch(error => { - console.error("fetchControlLoopInstantiation error occurred ", error); - alert("fetchControlLoopInstantiation error occurred " + error); - return undefined; - }); - } - - static async getInstanceProperties(name, version, windowLocationPathname) { - const params = { - name: name, - version: version, - common: "false" - } - - const response = await fetch(windowLocationPathname + '/restservices/clds/v2/toscaControlLoop/getCommonOrInstanceProperties' + '?' + (new URLSearchParams(params))); + const response = await fetch(windowLocationPathname + '/restservices/clds/v2/toscaControlLoop/getToscaInstantiation'); - this.checkResponseForError(response); - - return response; + return response } static async createInstanceProperties(instancePropertiesTemplate, windowLocationPathname) { @@ -83,11 +50,6 @@ export default class ControlLoopService { const response = await fetch(windowLocationPathname + '/restservices/clds/v2/toscaControlLoop/getToscaTemplate' + '?' + (new URLSearchParams(params))); - if (!response.ok) { - const message = `An error has occurred: ${ response.status }`; - throw new Error(message); - } - const data = await response; return data; @@ -108,20 +70,46 @@ export default class ControlLoopService { } - static async getCommonProperties(name, version, windowLocationPathName) { + static async deleteToscaTemplate(name, version, windowLocationPathname) { + const params = { + name: name, + version: version + } + + const response = await fetch(windowLocationPathname + + '/restservices/clds/v2/toscaControlLoop/decommissionToscaTemplate' + '?' + (new URLSearchParams(params)), + { + method: 'DELETE' + }); + + const data = await response; + + return data; + } + + static async getToscaControlLoopDefinitions(windowLocationPathname) { + + const response = await fetch(windowLocationPathname + + '/restservices/clds/v2/toscaControlLoop/getElementDefinitions'); + + this.checkResponseForError(response); + + const data = await response; + + return data; + } + + static async getCommonOrInstanceProperties(name, version, windowLocationPathName, isCommon) { const params = { name: name, version: version, - common: "true" + common: isCommon } const response = await fetch(windowLocationPathName + '/restservices/clds/v2/toscaControlLoop/getCommonOrInstanceProperties' + '?' + (new URLSearchParams(params))); - this.checkResponseForError(response); - return response; - } static async getToscaServiceTemplateSchema(section, windowLocationPathName) { 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 }> - Edit Common Properties + Change Control Loop Common Properties
+ Can't get service template:
{ JSON.stringify(fullToscaTemplate, null, 2) } + Can't get common properties:
{ JSON.stringify(commonProperties, null, 2) }
@@ -262,7 +291,7 @@ const CommissioningModal = (props) => { variant="primary" onClick={ handleSave } >Save - 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) => {
+ Can't get service template:
{ JSON.stringify(toscaFullTemplate, null, 2) } + Can't get instance properties:
{ JSON.stringify(instancePropertiesGlobal, null, 2) } { 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) => { )) } + Can't get control loop instantiation info:
{ JSON.stringify(controlLoopInstantiationError, null, 2) } 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 && { JSON.stringify(toscaTemplateData, null, 2) } } { JSON.stringify(toscaTemplateData, null, 2) } - { deleteResponseOk && responseOk && toscaTemplateData != null && + { showDeleteButton && } { deleteToscaTemplateData } - { JSON.stringify(deleteToscaTemplateData, null, 2) } +

Delete Successful

{ JSON.stringify(deleteToscaTemplateData, null, 2) } 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" > - Edit Common Properties + Change Control Loop Common Properties
@@ -28,6 +28,22 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = `
+ + Can't get service template: +
+ {} + + + Can't get common properties: +
+ {} +
@@ -44,7 +60,7 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = ` active={false} disabled={false} onClick={[Function]} - variant="success" + variant="success mr-auto" > Commission 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`] = `
+ + Can't get service template: +
+ {} + + + Can't get instance properties: +
+ {} +
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 - + + + Can't get control loop instantiation info: +
+ {} + +