diff options
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js')
-rw-r--r-- | gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js | 162 |
1 files changed, 13 insertions, 149 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js index 7a473e7..ada396c 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js @@ -22,11 +22,9 @@ import Modal from "react-bootstrap/Modal"; import styled from "styled-components"; import Button from "react-bootstrap/Button"; import ControlLoopService from "../../../api/ControlLoopService"; -import { JSONEditor } from "@json-editor/json-editor"; import Alert from "react-bootstrap/Alert"; import * as PropTypes from "prop-types"; -import Form from "react-bootstrap/Form"; -import Spinner from "react-bootstrap/Spinner"; +import InstantiationUtils from "./utils/InstantiationUtils"; const ModalStyled = styled(Modal)` @media (min-width: 800px) { @@ -51,7 +49,6 @@ const AlertStyled = styled(Alert)` const templateName = "ToscaServiceTemplateSimple"; const templateVersion = "1.0.0"; -let tempJsonEditor = null; function Fragment(props) { return null; @@ -67,7 +64,6 @@ const InstancePropertiesModal = (props) => { const [serviceTemplateResponseOk, setServiceTemplateResponseOk] = useState(true); const [instancePropertiesResponseOk, setInstancePropertiesResponseOk] = useState(true); const [instanceName, setInstanceName] = useState('') - const [isLoading, setIsLoading] = useState(true); useEffect(async () => { const toscaInstanceProperties = await ControlLoopService.getCommonOrInstanceProperties(templateName, templateVersion, false) @@ -77,171 +73,43 @@ const InstancePropertiesModal = (props) => { .catch(error => error.message); if (!toscaInstanceProperties.ok) { - const errorResponse = await toscaInstanceProperties.json() - console.log(errorResponse) + const errorResponse = await toscaInstanceProperties.json(); + console.log(errorResponse); setInstancePropertiesGlobal(errorResponse); setInstancePropertiesResponseOk(false); } if (!toscaTemplateResponse.ok) { - const errorResponse = await toscaTemplateResponse.json() - console.log(errorResponse) - setToscaFullTemplate(errorResponse) + const errorResponse = await toscaTemplateResponse.json(); + console.log(errorResponse); + setToscaFullTemplate(errorResponse); setServiceTemplateResponseOk(false); } if (toscaTemplateResponse.ok && toscaInstanceProperties.ok) { - await parseJsonSchema(toscaTemplateResponse, toscaInstanceProperties); + const renderedJsonSchema = await InstantiationUtils.parseJsonSchema(toscaTemplateResponse, toscaInstanceProperties); + setToscaFullTemplate(await (renderedJsonSchema).fullTemplate); + setJsonEditor(await (renderedJsonSchema).jsonEditor); } }, []); - const parseJsonSchema = async (fullTemplate, initialProperties) => { - - const fullJsonSchemaTemplate = await fullTemplate.json(); - setToscaFullTemplate(fullJsonSchemaTemplate); - - console.log(fullJsonSchemaTemplate); - - const filteredInitialStartValues = {}; - - const instanceProperties = await initialProperties.json().then(properties => { - const filteredTemplateObj = {}; - const propertiesTemplateArray = Object.entries(properties); - - propertiesTemplateArray.forEach(([key, value]) => { - const propertiesObj = { - properties: value.properties - } - - const propValues = {}; - filteredTemplateObj[key] = propertiesObj; - - const jsonNodeSchemaKey = fullJsonSchemaTemplate.topology_template.node_templates[key] - - Object.entries(propertiesObj.properties).forEach(([pKey, pValue]) => { - propValues[pKey] = jsonNodeSchemaKey.properties[pKey]; - }); - - filteredInitialStartValues[key] = propValues; - }); - - return filteredTemplateObj; - }); - - const propertySchema = makeSchemaForInstanceProperties(instanceProperties); - - tempJsonEditor = createJsonEditor(propertySchema, filteredInitialStartValues); - setJsonEditor(tempJsonEditor); - } - - const makeSchemaForInstanceProperties = (instanceProps) => { - const instancePropsArray = Object.entries(instanceProps); - - const newSchemaObject = {}; - - newSchemaObject.title = "InstanceProperties"; - newSchemaObject.type = "object"; - newSchemaObject.properties = {}; - - instancePropsArray.forEach(([key, value]) => { - - const propertiesObject = {}; - - Object.entries(value.properties).forEach(([pKey, pValue]) => { - propertiesObject[pKey] = { - type: getType(pValue.type) - } - }); - - newSchemaObject.properties[key] = { - options: { - "collapsed": true - }, - properties: propertiesObject - } - }); - - return newSchemaObject; - } - - const getType = (pType) => { - switch (pType) { - case "map": - return "string"; - case "string": - return "string"; - case "integer": - return "integer"; - case "list": - return "array"; - case "object": - return "object"; - default: - return "object"; - - } - } - - const createJsonEditor = (fullSchema, instanceProperties) => { - console.log(props.location.instanceName) - setIsLoading(false) - JSONEditor.defaults.options.collapse = true; - - return new JSONEditor(document.getElementById("editor"), - { - schema: fullSchema, - startval: instanceProperties, - theme: 'bootstrap4', - iconlib: 'fontawesome5', - object_layout: 'normal', - disable_properties: false, - disable_edit_json: false, - disable_array_reorder: true, - disable_array_delete_last_row: true, - disable_array_delete_all_rows: false, - array_controls_top: true, - keep_oneof_values: false, - collapsed: true, - show_errors: 'always', - display_required_only: false, - show_opt_in: false, - prompt_before_delete: true, - required_by_default: false, - }); - } - const handleClose = () => { console.log('handleClose called'); setShow(false); props.history.push('/'); } - const updateTemplate = (jsonEditorValues) => { - const nodeTemplates = toscaFullTemplate.topology_template.node_templates; - const instanceDataProperties = Object.entries(jsonEditorValues); - - instanceDataProperties.forEach(([key, value]) => { - const nodeTemplatesKey = nodeTemplates[key] - Object.entries(value).forEach(([pKey, pValue]) => { - nodeTemplatesKey.properties[pKey] = pValue - }); - }); - - toscaFullTemplate.topology_template.node_templates = nodeTemplates; - - setToscaFullTemplate(toscaFullTemplate); - - } - const handleSave = async () => { console.log("handleSave called"); + setInstanceName(instanceName); + console.log("instanceName to be saved is: " + instanceName); - console.log(JSON.stringify(toscaFullTemplate)); + console.log(jsonEditor); - updateTemplate(jsonEditor.getValue()); + //setToscaFullTemplate(InstantiationUtils.updateTemplate(jsonEditor.getValue(), toscaFullTemplate)); const response = await ControlLoopService.createInstanceProperties(instanceName, toscaFullTemplate) .catch(error => error.message); @@ -253,10 +121,6 @@ const InstancePropertiesModal = (props) => { } } - const handleNameChange = (e) => { - setInstanceName(e.target.value) - } - const successAlert = () => { console.log("successAlert called"); setAlertMessage(<Alert variant="success"> |