diff options
Diffstat (limited to 'gui-clamp/ui-react')
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 }> <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> |