diff options
author | saul.gill <saul.gill@est.tech> | 2021-07-12 17:10:10 +0100 |
---|---|---|
committer | saul.gill <saul.gill@est.tech> | 2021-07-19 16:08:22 +0100 |
commit | 3f99e6d9f007477fe6074f470048440d2b29c1ff (patch) | |
tree | f8c35c32fa163fc6f21f04cb61f2c3b6db5545de /gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js | |
parent | 71d6358a8f787c5d2688a485d42ff9514dc58a56 (diff) |
Added Commissioning Template Editor
Added a new modal to allow editing of the tosca template
Json schema from the backend generates a for the user
Added Decommissioning capability while viewing template
Added service for decommissioning
Issue-ID: POLICY-3439
Change-Id: Ic5bec9ea26aa8df468d36a893faa06f88d248dd5
Signed-off-by: saul.gill <saul.gill@est.tech>
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js')
-rw-r--r-- | gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js new file mode 100644 index 0000000..6baa06c --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.js @@ -0,0 +1,144 @@ +/* + * ============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 Modal from "react-bootstrap/Modal"; +import Button from "react-bootstrap/Button"; +import React, { useEffect, useState } from "react"; +import styled from "styled-components"; +import { JSONEditor } from "@json-editor/json-editor"; +import ControlLoopService from "../../../api/ControlLoopService"; +import OnapConstant from "../../../utils/OnapConstants"; + +const ModalStyled = styled(Modal)` + @media (min-width: 800px) { + .modal-xl { + max-width: 96%; + } + } + background-color: transparent; +` + +const StyledMessagesDiv = styled.div` + overflow: auto; + min-width: 100%; + max-height: 300px; + padding: 5px 5px 0px 5px; + text-align: center; +` + +const CommissioningModal = (props) => { + const [windowLocationPathName, setWindowLocationPathName] = useState(''); + const [toscaInitialValues, setToscaInitialValues] = useState({}); + const [toscaJsonSchema, setToscaJsonSchema] = useState({}); + const [jsonEditor, setJsonEditor] = useState({}); + const [show, setShow] = useState(true); + + const handleClose = () => { + console.log('handleClose called'); + setShow(false); + props.history.push('/'); + } + + const getToscaServiceTemplateHandler = async (toscaServiceTemplateResponse) => { + + if (!toscaServiceTemplateResponse.ok) { + const toscaData = await toscaServiceTemplateResponse; + setToscaInitialValues(toscaData); + } else { + const toscaData = await toscaServiceTemplateResponse.json(); + setToscaInitialValues(toscaData); + } + } + + const getToscaSchemaHandler = async (toscaSchemaResponse) => { + + if (!toscaSchemaResponse.ok) { + const toscaSchemaData = await toscaSchemaResponse; + setToscaJsonSchema(toscaSchemaData); + } else { + const toscaSchemaData = await toscaSchemaResponse.json(); + setToscaJsonSchema(toscaSchemaData); + } + } + + useEffect(async () => { + setWindowLocationPathName(window.location.pathname); + + const toscaTemplateResponse = await ControlLoopService.getToscaControlLoopDefinitions(windowLocationPathName) + .catch(error => error.message); + + const toscaSchemaResponse = await ControlLoopService.getToscaServiceTemplateSchema('node_templates', windowLocationPathName); + + createJsonEditor(await toscaSchemaResponse.json(), await toscaTemplateResponse.json()); + + }, []); + + // TODO Need to Hook this up to a new camel endpoint to get it working + const createJsonEditor = (toscaModel, editorData) => { + JSONEditor.defaults.options.collapse = true; + + return new JSONEditor(document.getElementById("editor"), + { + schema: toscaModel, + startval: editorData, + 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, + }) + } + + return ( + <ModalStyled size="xl" + show={ show } + onHide={ handleClose } + backdrop="static" + keyboard={ false }> + <Modal.Header closeButton> + <Modal.Title>Edit Control Loop Parameters</Modal.Title> + </Modal.Header> + <br/> + <div style={ { padding: '5px 5px 0px 5px' } }> + <Modal.Body> + <div id="editor"/> + </Modal.Body> + </div> + <Modal.Footer> + <Button variant="primary" + >Submit</Button> + <Button variant="secondary" + onClick={ handleClose }>Close</Button> + </Modal.Footer> + </ModalStyled> + ); +} + +export default CommissioningModal; |