From a090a83268cfd8b1341c266d32ccfb670b9f0e8c Mon Sep 17 00:00:00 2001 From: brunomilitzer Date: Mon, 30 Aug 2021 18:46:53 +0100 Subject: Add Delete Instantiation Functionality. Update UI to centralize Instantiation Management Created Delete button to delete the instantiations Fixed Change Order State Functionality Issue-ID: POLICY-3558 Change-Id: I2efb00ce041ab4fc217e06ed72385ad8ea1b10fb Signed-off-by: brunomilitzer --- .../dialogs/ControlLoop/InstanceModal.js | 290 --------------------- 1 file changed, 290 deletions(-) delete mode 100644 gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js (limited to 'gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js') diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js deleted file mode 100644 index 0380fa6..0000000 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstanceModal.js +++ /dev/null @@ -1,290 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * Copyright (C) 2021 Nordix Foundation. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - * ============LICENSE_END========================================================= - */ - -import React, { useEffect, useState } from "react"; -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"; - -const ModalStyled = styled(Modal)` - @media (min-width: 800px) { - .modal-xl { - max-width: 96%; - } - } - background-color: transparent; -` - -const DivWhiteSpaceStyled = styled.div` - overflow: auto; - min-width: 100%; - max-height: 300px; - padding: 5px 5px 0px 5px; - text-align: center; -` - -const AlertStyled = styled(Alert)` - margin-top: 10px; -` - -const templateName = "ToscaServiceTemplateSimple"; -const templateVersion = "1.0.0"; -let tempJsonEditor = null; - -const InstanceModal = (props) => { - const [show, setShow] = useState(true); - const [windowLocationPathname, setWindowLocationPathname] = useState(''); - const [toscaFullTemplate, setToscaFullTemplate] = useState({}); - const [toscaFilteredInitialValues, setToscaFilteredInitialValues] = useState({}); - 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.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); - } - - if (!toscaTemplateResponse.ok) { - const errorResponse = await toscaTemplateResponse.json() - console.log(errorResponse) - setToscaFullTemplate(errorResponse) - setServiceTemplateResponseOk(false); - } - - if (toscaTemplateResponse.ok && toscaInstanceProperties.ok) { - await parseJsonSchema(toscaTemplateResponse, toscaInstanceProperties); - } - - }, []); - - const parseJsonSchema = async (fullTemplate, initialProperties) => { - - const fullJsonSchemaTemplate = await fullTemplate.json(); - setToscaFullTemplate(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; - }); - - setToscaFilteredInitialValues(filteredInitialStartValues); - - return filteredTemplateObj; - }); - - const propertySchema = makeSchemaForInstanceProperties(instanceProperties); - setToscaJsonSchema(propertySchema); - - 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 "string": - return "string"; - case "integer": - return "integer"; - case "list": - return "array"; - case "object": - return "object"; - default: - return "object"; - - } - } - - const createJsonEditor = (fullSchema, instanceProperties) => { - 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") - - setWindowLocationPathname(window.location.pathname); - - updateTemplate(jsonEditor.getValue()); - - const response = await ControlLoopService.createInstanceProperties(toscaFullTemplate, windowLocationPathname).catch(error => error.message); - - if (response.ok) { - successAlert(); - } else { - await errorAlert(response); - } - } - - const successAlert = () => { - console.log("successAlert called"); - setAlertMessage( - Instantiation Properties Success -

Instance Properties was successfully saved

-
- ); - } - - const errorAlert = async (response) => { - console.log("errorAlert called"); - setAlertMessage( - Instantiation Properties Failure -

An error occurred while trying to save

-

Status code: { await response.status } : { response.statusText }

-

Status Text: { await response.text() }

-
- ); - } - - return ( - - - Change Tosca Instance Properties - -
- -
- Can't get service template:
{ JSON.stringify(toscaFullTemplate, null, 2) } - Can't get instance properties:
{ JSON.stringify(instancePropertiesGlobal, null, 2) } - - - { alertMessage } - -
- - - - - - ); -} - -export default InstanceModal; -- cgit 1.2.3-korg