summaryrefslogtreecommitdiffstats
path: root/gui-clamp/ui-react/src
diff options
context:
space:
mode:
authorbrunomilitzer <bruno.militzer@est.tech>2022-03-07 15:19:21 +0000
committerbrunomilitzer <bruno.militzer@est.tech>2022-03-07 16:12:20 +0000
commitd6094b9b8932afcb58281b170dd16d6dab845878 (patch)
tree38ca28bb7281d48700bdde00f37455a875ef0865 /gui-clamp/ui-react/src
parente54e656ce881207d6e0fae759dffc4f0dd38f979 (diff)
Fixed Instance Properties Name
Added a input text box so the user can customize the instance name properties Issue-ID: POLICY-3978 Change-Id: I505eff37699dbe50a285ce2f153c70be246e1d8c Signed-off-by: brunomilitzer <bruno.militzer@est.tech>
Diffstat (limited to 'gui-clamp/ui-react/src')
-rw-r--r--gui-clamp/ui-react/src/api/ACMService.js2
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js50
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js4
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap31
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js4
5 files changed, 73 insertions, 18 deletions
diff --git a/gui-clamp/ui-react/src/api/ACMService.js b/gui-clamp/ui-react/src/api/ACMService.js
index 405d222..393741f 100644
--- a/gui-clamp/ui-react/src/api/ACMService.js
+++ b/gui-clamp/ui-react/src/api/ACMService.js
@@ -27,7 +27,7 @@ export default class ACMService {
return response
}
- static async createInstanceProperties(instanceName, instancePropertiesTemplate) {
+ static async createInstanceProperties(instancePropertiesTemplate) {
const response = await fetch(window.location.pathname +
'restservices/clds/v2/acm/postToscaInstanceProperties', {
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 8d0023b..2dc2cb3 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js
@@ -25,6 +25,8 @@ import ACMService from "../../../api/ACMService";
import Alert from "react-bootstrap/Alert";
import * as PropTypes from "prop-types";
import InstantiationUtils from "./utils/InstantiationUtils";
+import Row from "react-bootstrap/Row";
+import Form from "react-bootstrap/Form";
const ModalStyled = styled(Modal)`
@media (min-width: 800px) {
@@ -66,6 +68,8 @@ const InstancePropertiesModal = (props) => {
const [instanceName, setInstanceName] = useState('')
useEffect(async () => {
+ setJsonEditor(null);
+
const toscaTemplateResponse = await ACMService.getToscaTemplate(templateName, templateVersion)
.catch(error => error.message);
@@ -100,27 +104,44 @@ const InstancePropertiesModal = (props) => {
props.history.push('/');
}
+ const handleInstanceName = (event) => {
+ console.log('handleInstanceName called');
+
+ setInstanceName(event.target.value);
+ }
+
const handleSave = async () => {
console.log("handleSave called");
+ if (instanceName !== '' || instanceName.length > 0) {
- setInstanceName(instanceName);
+ console.log("instanceName to be saved is: " + instanceName);
- console.log("instanceName to be saved is: " + instanceName);
+ if (jsonEditor != null) {
+ setToscaFullTemplate(InstantiationUtils.updateTemplate(instanceName, jsonEditor.getValue(), toscaFullTemplate));
+ }
- if (jsonEditor != null) {
- setToscaFullTemplate(InstantiationUtils.updateTemplate(jsonEditor.getValue(), toscaFullTemplate));
- }
+ const response = await ACMService.createInstanceProperties(toscaFullTemplate)
+ .catch(error => error.message);
- const response = await ACMService.createInstanceProperties(instanceName, toscaFullTemplate)
- .catch(error => error.message);
-
- if (response.ok) {
- successAlert();
+ if (response.ok) {
+ successAlert();
+ } else {
+ await errorAlert(response);
+ }
} else {
- await errorAlert(response);
+ await warningAlert();
}
}
+ const warningAlert = async () => {
+ console.log("warningAlert called");
+ setAlertMessage(<Alert variant="warning">
+ <Alert.Heading>Instantiation Properties Warning</Alert.Heading>
+ <p>Instance name cannot be empty</p>
+ <hr/>
+ </Alert>);
+ }
+
const successAlert = () => {
console.log("successAlert called");
setAlertMessage(<Alert variant="success">
@@ -152,6 +173,13 @@ const InstancePropertiesModal = (props) => {
</Modal.Header>
<div style={ { padding: '5px 5px 0 5px' } }>
<Modal.Body>
+ <Form.Group as={ Row } controlId="formPlaintextEmail">
+ <Form.Label column sm="2">Instance Name:</Form.Label>
+ <input sm="5" type="text" style={ { width: '50%' } }
+ value={ instanceName }
+ onChange={ handleInstanceName }
+ />
+ </Form.Group>
<div id="editor"/>
<AlertStyled show={ !serviceTemplateResponseOk }
variant="danger">Can't get service template:<br/>{ JSON.stringify(toscaFullTemplate, null, 2) }</AlertStyled>
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 78c2685..4b97748 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js
@@ -56,8 +56,6 @@ const InstantiationManagementModal = (props) => {
const instantiationListJson = await response.json();
- console.log(instantiationListJson);
-
const parsedInstantiationList = InstantiationUtils.parseInstantiationList(instantiationListJson['automationCompositionList']);
setInstantiationList(parsedInstantiationList);
@@ -74,8 +72,6 @@ const InstantiationManagementModal = (props) => {
const deleteInstantiationHandler = async (index, instantiation) => {
console.log("deleteInstantiationHandler called");
- console.log(instantiation);
-
if (instantiation.disableDelete) {
return;
}
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 d655b08..a4fea2a 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
@@ -24,6 +24,37 @@ exports[`Verify InstancePropertiesModal renders correctly 1`] = `
}
>
<ModalBody>
+ <FormGroup
+ as={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "defaultProps": Object {
+ "noGutters": false,
+ },
+ "render": [Function],
+ }
+ }
+ controlId="formPlaintextEmail"
+ >
+ <FormLabel
+ column={true}
+ sm="2"
+ srOnly={false}
+ >
+ Instance Name:
+ </FormLabel>
+ <input
+ onChange={[Function]}
+ sm="5"
+ style={
+ Object {
+ "width": "50%",
+ }
+ }
+ type="text"
+ value=""
+ />
+ </FormGroup>
<div
id="editor"
/>
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 aaaa1bd..f430b32 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
@@ -24,7 +24,6 @@ import { JSONEditor } from "@json-editor/json-editor";
const InstantiationUtils = {
parseInstantiationList: (acmList) => {
- console.log(acmList);
const parsedAcmList = [];
acmList.map((instance, index) => {
@@ -156,7 +155,7 @@ const InstantiationUtils = {
});
},
- updateTemplate: (jsonEditorValues, fullTemplate) => {
+ updateTemplate: (instanceName, jsonEditorValues, fullTemplate) => {
const nodeTemplates = fullTemplate.topology_template.node_templates;
const instanceDataProperties = Object.entries(jsonEditorValues);
@@ -168,6 +167,7 @@ const InstantiationUtils = {
});
fullTemplate.topology_template.node_templates = nodeTemplates;
+ fullTemplate.name = instanceName;
return fullTemplate;
}