diff options
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs')
11 files changed, 446 insertions, 11 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; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.test.js new file mode 100644 index 0000000..f189c58 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/CommissioningModal.test.js @@ -0,0 +1,69 @@ +/* + * ============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 from 'react'; +import { mount, shallow } from 'enzyme'; +import ReadAndConvertYaml from './ReadAndConvertYaml'; +import toJson from "enzyme-to-json"; +import { act } from "react-dom/test-utils"; +import { createMemoryHistory } from "history"; +import CommissioningModal from "./CommissioningModal"; + +describe('Verify ReadAndConvertYaml', () => { + + it("renders without crashing", () => { + shallow(<CommissioningModal/>); + }); + + it("renders correctly", () => { + const tree = shallow(<CommissioningModal/>); + expect(toJson(tree)).toMatchSnapshot(); + }); + + it('should have two Button elements', () => { + const container = shallow(<CommissioningModal/>) + expect(container.find('Button').length).toEqual(2); + }); + + it('handleClose called when bottom button clicked', () => { + const history = createMemoryHistory(); + const component = mount(<CommissioningModal history={ history }/>) + const logSpy = jest.spyOn(console, 'log'); + + + act(() => { + component.find('[variant="secondary"]').simulate('click'); + expect(logSpy).toHaveBeenCalledWith('handleClose called'); + }); + }); + + it('handleClose called when top-right button clicked', () => { + const history = createMemoryHistory(); + const component = mount(<CommissioningModal history={ history }/>) + const logSpy = jest.spyOn(console, 'log'); + + + act(() => { + component.find('[size="xl"]').get(0).props.onHide(); + expect(logSpy).toHaveBeenCalledWith('handleClose called'); + }); + }); + +}); diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/DeleteToscaTemplate.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/DeleteToscaTemplate.js new file mode 100644 index 0000000..c641272 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/DeleteToscaTemplate.js @@ -0,0 +1,54 @@ +/* + * ============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, { useState } from "react"; +import Button from "react-bootstrap/Button"; +import ControlLoopService from "../../../api/ControlLoopService"; + +const DeleteToscaTemplate = props => { + + const [windowLocationPathName, setWindowLocationPathname] = useState(''); + + const deleteTemplateHandler = async () => { + console.log('deleteTemplateHandler called'); + setWindowLocationPathname(window.location.pathname); + + const response = await ControlLoopService.deleteToscaTemplate(props.templateName, props.templateVersion, windowLocationPathName) + .catch(error => error.message); + + console.log('Response is ok: ' + response.ok); + + props.onDeleteToscaServiceTemplate(response); + + } + + return ( + <React.Fragment> + <Button variant="danger" + type="submit" + style={{float: "right"}} + onClick={ deleteTemplateHandler }>Delete Tosca Service Template</Button> + </React.Fragment> + ); + + +} + +export default DeleteToscaTemplate; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/DeleteToscaTemplate.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/DeleteToscaTemplate.test.js new file mode 100644 index 0000000..e4d437a --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/DeleteToscaTemplate.test.js @@ -0,0 +1,55 @@ +/* + * ============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 from 'react'; +import { mount, shallow } from 'enzyme'; +import GetToscaTemplate from './GetToscaTemplate'; +import toJson from "enzyme-to-json"; +import DeleteToscaTemplate from "./DeleteToscaTemplate"; + +describe('Verify DeleteToscaTemplate', () => { + + it("renders without crashing", () => { + shallow(<DeleteToscaTemplate/>); + }); + + it("renders correctly", () => { + const tree = shallow(<DeleteToscaTemplate/>); + expect(toJson(tree)).toMatchSnapshot(); + }); + + it('should have a Button element', () => { + const container = shallow(<DeleteToscaTemplate/>) + expect(container.find('Button').length).toEqual(1); + }); + + it('button should call deleteTemplateHandler when clicked', async () => { + const component = mount(<DeleteToscaTemplate/>) + const logSpy = jest.spyOn(console, 'log'); + + component.find('[variant="danger"]').simulate('click'); + expect(logSpy).toHaveBeenCalledWith('deleteTemplateHandler called'); + }); + + it('should have a Button element with specified text', () => { + const container = shallow(<DeleteToscaTemplate/>) + expect(container.find('Button').text()).toBe('Delete Tosca Service Template'); + }); +}); diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.js index 7da8c13..273957f 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.js @@ -40,7 +40,7 @@ const GetToscaTemplate = (props) => { <React.Fragment> <Button variant="primary" type="submit" - onClick={ getTemplateHandler }>Get Tosca Service Template</Button> + onClick={ getTemplateHandler }>Pull Tosca Service Template</Button> </React.Fragment> ); diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.test.js index ce2a398..38da005 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.test.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/GetToscaTemplate.test.js @@ -48,6 +48,6 @@ describe('Verify GetToscaTemplate', () => { it('should have a Button element with specified text', () => { const container = shallow(<GetToscaTemplate/>) - expect(container.find('Button').text()).toBe('Get Tosca Service Template'); + expect(container.find('Button').text()).toBe('Pull Tosca Service Template'); }); }); diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js index 53b541c..0ff8833 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ReadAndConvertYaml.js @@ -24,6 +24,7 @@ import Button from "react-bootstrap/Button"; import { Alert } from "react-bootstrap"; import styled from 'styled-components'; +import DeleteToscaTemplate from "./DeleteToscaTemplate"; const ModalStyled = styled(Modal)` background-color: transparent; @@ -43,7 +44,9 @@ const PreStyled = styled.pre` const ReadAndConvertYaml = (props) => { const [show, setShow] = useState(true); const [toscaTemplateData, setToscaTemplateData] = useState(); - const [responeOk, setResponseOk] = useState(true); + const [deleteToscaTemplateData, setDeleteToscaTemplateData] = useState(); + const [responseOk, setResponseOk] = useState(true); + const [deleteResponseOk, setDeleteResponseOk] = useState(true); const name = 'ToscaServiceTemplateSimple'; const version = '1.0.0'; @@ -57,8 +60,9 @@ const ReadAndConvertYaml = (props) => { // console.log('getToscaServiceTemplateHandler called: ' + toscaServiceTemplate); if (!toscaServiceTemplateResponse.ok) { + console.log('Response is not ok'); setResponseOk(false); - const toscaData = await toscaServiceTemplateResponse; + const toscaData = await toscaServiceTemplateResponse.json(); setToscaTemplateData(toscaData); } else { setResponseOk(true); @@ -67,6 +71,20 @@ const ReadAndConvertYaml = (props) => { } } + const deleteToscaServiceTemplateHandler = async (deleteToscaServiceTemplateResponse) => { + + if (!deleteToscaServiceTemplateResponse.ok) { + console.log('Delete response not ok'); + setDeleteResponseOk(false); + const deleteToscaData = await deleteToscaServiceTemplateResponse; + setDeleteToscaTemplateData(deleteToscaData); + } else { + setDeleteResponseOk(true); + const deleteToscaData = await deleteToscaServiceTemplateResponse.json(); + setDeleteToscaTemplateData(deleteToscaData); + } + } + return ( <ModalStyled size="xl" show={ show } @@ -80,17 +98,28 @@ const ReadAndConvertYaml = (props) => { <GetToscaTemplate templateName={ name } templateVersion={ version } onGetToscaServiceTemplate={ getToscaServiceTemplateHandler }/> - { responeOk && <PreStyled> { JSON.stringify(toscaTemplateData, null, 2) } </PreStyled> } - <AlertStyled show={ !responeOk } - variant="danger">{ toscaTemplateData }</AlertStyled> + { responseOk && <PreStyled> { JSON.stringify(toscaTemplateData, null, 2) } </PreStyled> } + <AlertStyled show={ !responseOk } + variant="danger">{ JSON.stringify(toscaTemplateData, null, 2) }</AlertStyled> + { deleteResponseOk && responseOk && toscaTemplateData != null && + <DeleteToscaTemplate templateName={ name } + templateVersion={ version } + onDeleteToscaServiceTemplate={ deleteToscaServiceTemplateHandler } + /> + } + <AlertStyled show={ !deleteResponseOk } + variant="danger">{ deleteToscaTemplateData }</AlertStyled> + <AlertStyled show={ deleteResponseOk && deleteToscaTemplateData != null } + variant="success"><h2>Delete Successful</h2><PreStyled>{ JSON.stringify(deleteToscaTemplateData, null, 2) }</PreStyled></AlertStyled> </Modal.Body> <Modal.Footer> <Button variant="secondary" type="null" - onClick={ handleClose }>Cancel</Button> + onClick={ handleClose }>Close</Button> </Modal.Footer> </ModalStyled> ); -}; +} +; export default ReadAndConvertYaml; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap new file mode 100644 index 0000000..78c8983 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/CommissioningModal.test.js.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify ReadAndConvertYaml renders correctly 1`] = ` +<Styled(Modal) + backdrop="static" + keyboard={false} + onHide={[Function]} + show={true} + size="xl" +> + <ModalHeader + closeButton={true} + closeLabel="Close" + > + <ModalTitle> + Edit Control Loop Parameters + </ModalTitle> + </ModalHeader> + <br /> + <div + style={ + Object { + "padding": "5px 5px 0px 5px", + } + } + > + <ModalBody> + <div + id="editor" + /> + </ModalBody> + </div> + <ModalFooter> + <Button + active={false} + disabled={false} + variant="primary" + > + Submit + </Button> + <Button + active={false} + disabled={false} + onClick={[Function]} + variant="secondary" + > + Close + </Button> + </ModalFooter> +</Styled(Modal)> +`; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/DeleteToscaTemplate.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/DeleteToscaTemplate.test.js.snap new file mode 100644 index 0000000..cd2288e --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/DeleteToscaTemplate.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify DeleteToscaTemplate renders correctly 1`] = ` +<Fragment> + <Button + active={false} + disabled={false} + onClick={[Function]} + style={ + Object { + "float": "right", + } + } + type="submit" + variant="danger" + > + Delete Tosca Service Template + </Button> +</Fragment> +`; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/GetToscaTemplate.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/GetToscaTemplate.test.js.snap index 2c591d9..873afa7 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/GetToscaTemplate.test.js.snap +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/GetToscaTemplate.test.js.snap @@ -9,7 +9,7 @@ exports[`Verify GetToscaTemplate renders correctly 1`] = ` type="submit" variant="primary" > - Get Tosca Service Template + Pull Tosca Service Template </Button> </Fragment> `; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap index fab7801..d515474 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/ReadAndConvertYaml.test.js.snap @@ -30,6 +30,19 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = ` show={false} variant="danger" /> + <Styled(Alert) + show={false} + variant="danger" + /> + <Styled(Alert) + show={false} + variant="success" + > + <h2> + Delete Successful + </h2> + <styled.pre /> + </Styled(Alert)> </ModalBody> <ModalFooter> <Button @@ -39,7 +52,7 @@ exports[`Verify ReadAndConvertYaml renders correctly 1`] = ` type="null" variant="secondary" > - Cancel + Close </Button> </ModalFooter> </Styled(Modal)> |