diff options
Diffstat (limited to 'gui-clamp/ui-react')
6 files changed, 145 insertions, 36 deletions
diff --git a/gui-clamp/ui-react/src/api/ACMService.js b/gui-clamp/ui-react/src/api/ACMService.js index 393741f..722a571 100644 --- a/gui-clamp/ui-react/src/api/ACMService.js +++ b/gui-clamp/ui-react/src/api/ACMService.js @@ -42,6 +42,25 @@ export default class ACMService { return response } + static async updateInstanceProperties(instanceName, version, instancePropertiesTemplate) { + const params = { + name: instanceName, + version: version + } + + const response = await fetch(window.location.pathname + + 'restservices/clds/v2/acm/putToscaInstanceProperties?' + (new URLSearchParams(params)), { + method: 'PUT', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin', + body: JSON.stringify(instancePropertiesTemplate), + }); + + return response + } + static async deleteInstantiation(name, version) { const params = { name: name, @@ -86,11 +105,17 @@ export default class ACMService { return response } - static async getToscaTemplate(name, version) { - const params = { - name: name, - version: version - } + static async getToscaTemplate(name, version, instanceName) { + const params = instanceName != null ? + { + name: name, + version: version, + instanceName: instanceName + } : + { + name: name, + version: version + } const response = await fetch(window.location.pathname + 'restservices/clds/v2/acm/getToscaTemplate' + '?' + (new URLSearchParams(params))); @@ -132,12 +157,19 @@ export default class ACMService { return data; } - static async getCommonOrInstanceProperties(name, version, isCommon) { - const params = { - name: name, - version: version, - common: isCommon - } + static async getCommonOrInstanceProperties(name, version, instanceName, isCommon) { + const params = instanceName != null ? + { + name: name, + version: version, + instanceName: instanceName, + common: isCommon + } : + { + name: name, + version: version, + common: isCommon + } const response = await fetch(window.location.pathname + 'restservices/clds/v2/acm/getCommonOrInstanceProperties' + '?' + (new URLSearchParams(params))); diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/CommissioningModal.js b/gui-clamp/ui-react/src/components/dialogs/ACM/CommissioningModal.js index db71cd9..d120def 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ACM/CommissioningModal.js +++ b/gui-clamp/ui-react/src/components/dialogs/ACM/CommissioningModal.js @@ -48,9 +48,7 @@ const AlertStyled = styled(Alert)` const CommissioningModal = (props) => { const [fullToscaTemplate, setFullToscaTemplate] = useState({}); - const [toscaInitialValues, setToscaInitialValues] = useState({}); const [commonProperties, setCommonProperties] = useState({}) - const [toscaJsonSchema, setToscaJsonSchema] = useState({}); const [jsonEditor, setJsonEditor] = useState(null); const [show, setShow] = useState(true); const [alertMessages, setAlertMessages] = useState(); @@ -60,14 +58,13 @@ const CommissioningModal = (props) => { const version = '1.0.0'; useEffect(async () => { - const toscaTemplateResponse = await ACMService.getToscaTemplate(name, version) + const toscaTemplateResponse = await ACMService.getToscaTemplate(name, version, null) .catch(error => error.message); - const toscaCommonProperties = await ACMService.getCommonOrInstanceProperties(name, version, true) + const toscaCommonProperties = await ACMService.getCommonOrInstanceProperties(name, version, null, true) .catch(error => error.message); if (!toscaCommonProperties.ok) { const errorResponse = await toscaCommonProperties.json() - console.log(errorResponse) setCommonProperties(errorResponse) setCommonPropertiesResponseOk(false); } @@ -82,9 +79,7 @@ const CommissioningModal = (props) => { if (toscaTemplateResponse.ok && toscaCommonProperties.ok) { const renderedEditorObjects = CommissioningUtils.renderJsonEditor(toscaTemplateResponse, toscaCommonProperties) setFullToscaTemplate((await renderedEditorObjects).fullTemplate) - setToscaJsonSchema((await renderedEditorObjects).propertySchema) setJsonEditor((await renderedEditorObjects).editorTemp) - setToscaInitialValues((await renderedEditorObjects).toscaInitialValues) } diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js index 5181b64..1c152ff 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js +++ b/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js @@ -56,24 +56,49 @@ function Fragment(props) { return null; } -Fragment.propTypes = { children: PropTypes.node }; +const specialCharacter = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/; + +Fragment.propTypes = {children: PropTypes.node}; const InstancePropertiesModal = (props) => { const [show, setShow] = useState(true); const [toscaFullTemplate, setToscaFullTemplate] = useState({}); const [jsonEditor, setJsonEditor] = useState(null); const [alertMessage, setAlertMessage] = useState(null); + const [clearButton, setClearButton] = useState(null); const [instancePropertiesGlobal, setInstancePropertiesGlobal] = useState({}); const [serviceTemplateResponseOk, setServiceTemplateResponseOk] = useState(true); const [instancePropertiesResponseOk, setInstancePropertiesResponseOk] = useState(true); const [instanceName, setInstanceName] = useState(''); + const [instanceVersion, setInstanceVersion] = useState(''); + const [oldInstanceName, setOldInstanceName] = useState(''); + const [tempInstanceName, setTempInstanceName] = useState(''); + const [validated, setValidated] = useState(false); + const [editMode, setEditMode] = useState(false); useEffect(async () => { - const toscaTemplateResponse = await ACMService.getToscaTemplate(templateName, templateVersion) + let isEditMode = false; + + if (props.location.instantiationName !== undefined) { + isEditMode = true; + setEditMode(true); + setInstanceName(props.location.instantiationName); + setInstanceVersion(props.location.instantiationVersion); + } + + const instantiationName = isEditMode ? props.location.instantiationName : null; + console.log(instantiationName); + + const toscaTemplateResponse = await ACMService.getToscaTemplate(templateName, templateVersion, instantiationName) .catch(error => error.message); - const toscaInstanceProperties = await ACMService.getCommonOrInstanceProperties(templateName, templateVersion, false) + const toscaInstanceProperties = await ACMService.getCommonOrInstanceProperties(templateName, templateVersion, instantiationName, false) .catch(error => error.message); + if (toscaInstanceProperties == null || toscaTemplateResponse == null) { + await warningAlert('Tosca service template is empty') + return; + } + if (!toscaInstanceProperties.ok) { const errorResponse = await toscaInstanceProperties.json(); console.log(errorResponse); @@ -96,6 +121,30 @@ const InstancePropertiesModal = (props) => { }, []); + useEffect(async () => { + + await validateInstanceName(); + + }, [instanceName]) + + const validateInstanceName = async () => { + console.log('validateInstanceName called'); + + if (specialCharacter.test(instanceName)) { + await warningAlert('Instance name cannot contain special characters'); + } else if (alertMessage) { + clearWarning(); + } + + if (instanceName.length > 2 && !specialCharacter.test(instanceName)) { + console.log('validated'); + setOldInstanceName(tempInstanceName); + setValidated(true); + } else { + setValidated(false); + } + } + const handleClose = () => { console.log('handleClose called'); setShow(false); @@ -105,7 +154,11 @@ const InstancePropertiesModal = (props) => { const handleInstanceName = (event) => { console.log('handleInstanceName called'); + setTempInstanceName(instanceName); setInstanceName(event.target.value); + + validateInstanceName().then(() => { + }); } const handleSave = async () => { @@ -118,8 +171,15 @@ const InstancePropertiesModal = (props) => { setToscaFullTemplate(InstantiationUtils.updateTemplate(instanceName, jsonEditor.getValue(), toscaFullTemplate)); } - const response = await ACMService.createInstanceProperties(toscaFullTemplate) - .catch(error => error.message); + let response = null; + + if (editMode) { + response = await ACMService.updateInstanceProperties(oldInstanceName, instanceVersion, toscaFullTemplate) + .catch(error => error.message); + } else { + response = await ACMService.createInstanceProperties(toscaFullTemplate) + .catch(error => error.message); + } if (response.ok) { successAlert(); @@ -127,15 +187,16 @@ const InstancePropertiesModal = (props) => { await errorAlert(response); } } else { - await warningAlert(); + await warningAlert('Instance name cannot be empty'); } } - const warningAlert = async () => { + const warningAlert = async (message) => { console.log("warningAlert called"); + setAlertMessage(<Alert variant="warning"> <Alert.Heading>Instantiation Properties Warning</Alert.Heading> - <p>Instance name cannot be empty</p> + <p>{message}</p> <hr/> </Alert>); } @@ -160,6 +221,17 @@ const InstancePropertiesModal = (props) => { </Alert>); } + const clearWarning = () => { + console.log("clearWarning called"); + + if (specialCharacter.test(instanceName)) { + return; + } + + setClearButton(null); + setAlertMessage(null); + } + return ( <ModalStyled size="xl" show={ show } @@ -167,7 +239,7 @@ const InstancePropertiesModal = (props) => { backdrop="static" keyboard={ false }> <Modal.Header closeButton> - <Modal.Title>Create Tosca Instance Properties</Modal.Title> + <Modal.Title>{ editMode ? 'Edit' : 'Create' } Tosca Instance Properties</Modal.Title> </Modal.Header> <div style={ { padding: '5px 5px 0 5px' } }> <Modal.Body> @@ -189,7 +261,8 @@ const InstancePropertiesModal = (props) => { </DivWhiteSpaceStyled> </div> <Modal.Footer> - <Button variant="primary" onClick={ handleSave }>Save</Button> + { clearButton } + <Button variant="primary" disabled={ !validated } onClick={ handleSave } style={validated ? {} : { cursor: "not-allowed" }}>Save</Button> <Button variant="secondary" onClick={ handleClose }>Close</Button> </Modal.Footer> </ModalStyled> diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js b/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js index 4b97748..2d87119 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js +++ b/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js @@ -172,10 +172,12 @@ const InstantiationManagementModal = (props) => { <td style={ { textAlign: "center" } }> <Link to={ { pathname: "editACMInstanceProperties", - } } state={ instantiation.name }> - <Button variant="outline-success" type="null" - disabled={ true } - style={ { cursor: "not-allowed" } }>Edit</Button> + instantiationName: instantiation.name, + instantiationVersion: instantiation.version + } }> + <Button variant={ instantiation.disabled ? "outline-success" : "success" } type="null" + disabled={ instantiation.disableEdit } + style={ instantiation.disableEdit ? { cursor: "not-allowed" } : {} }>Edit</Button> </Link> </td> <td style={ { textAlign: "center" } }> diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap index a4fea2a..4791083 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap +++ b/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap @@ -13,7 +13,8 @@ exports[`Verify InstancePropertiesModal renders correctly 1`] = ` closeLabel="Close" > <ModalTitle> - Create Tosca Instance Properties + Create + Tosca Instance Properties </ModalTitle> </ModalHeader> <div @@ -80,8 +81,13 @@ exports[`Verify InstancePropertiesModal renders correctly 1`] = ` <ModalFooter> <Button active={false} - disabled={false} + disabled={true} onClick={[Function]} + style={ + Object { + "cursor": "not-allowed", + } + } variant="primary" > Save diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js b/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js index f430b32..1e33edb 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js +++ b/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js @@ -34,7 +34,8 @@ const InstantiationUtils = { version: instance['version'], orderedState: instance['orderedState'], currentState: instance['state'], - disableDelete: instance['state'] !== 'UNINITIALISED' + disableDelete: instance['state'] !== 'UNINITIALISED', + disableEdit: instance['state'] !== 'UNINITIALISED' } parsedAcmList.push(acmObj); @@ -90,7 +91,7 @@ const InstantiationUtils = { const propValues = {}; filteredTemplateObj[key] = propertiesObj; - const jsonNodeSchemaKey = fullTemplate.topology_template.node_templates[key] + const jsonNodeSchemaKey = fullTemplate.topology_template.node_templates[key]; Object.entries(propertiesObj.properties).forEach(([pKey, pValue]) => { propValues[pKey] = jsonNodeSchemaKey.properties[pKey]; |