diff options
author | brunomilitzer <bruno.militzer@est.tech> | 2021-08-30 18:46:53 +0100 |
---|---|---|
committer | brunomilitzer <bruno.militzer@est.tech> | 2021-09-10 09:21:50 +0100 |
commit | a090a83268cfd8b1341c266d32ccfb670b9f0e8c (patch) | |
tree | 0b4ecc386f90316008d453c9eacd99b4063bb348 /gui-clamp/ui-react/src/components/dialogs/ControlLoop/ChangeOrderStateModal.js | |
parent | f2047d16b47f086395856aefca6c5047b488d207 (diff) |
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 <bruno.militzer@est.tech>
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs/ControlLoop/ChangeOrderStateModal.js')
-rw-r--r-- | gui-clamp/ui-react/src/components/dialogs/ControlLoop/ChangeOrderStateModal.js | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ChangeOrderStateModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ChangeOrderStateModal.js new file mode 100644 index 0000000..2c6d9aa --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ChangeOrderStateModal.js @@ -0,0 +1,176 @@ +/* + * ============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 styled from "styled-components"; +import Modal from "react-bootstrap/Modal"; +import Button from "react-bootstrap/Button"; +import React, { useContext, useEffect, useRef, useState } from "react"; +import InstantiationOrderStateChangeItem from "./InstantiationOrderStateChangeItem"; +import ControlLoopService from "../../../api/ControlLoopService"; +import { Alert, Container, Dropdown } from "react-bootstrap"; + +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 ChangeOrderStateModal = (props) => { + const [show, setShow] = useState(true); + const [windowLocationPathnameGet, setWindowLocationPathnameGet] = useState(''); + const [windowLocationPathNameSave, setWindowLocationPathNameSave] = useState(''); + const [controlLoopIdentifierList, setControlLoopIdentifierList] = useState([]); + const [orderedState, setOrderedState] = useState(''); + const [toscaOrderStateObject, setToscaOrderStateObject] = useState({}); + const [instantiationOrderStateError, setInstantiationOrderStateError] = useState(false); + const [instantiationOrderStateMsgError, setInstantiationOrderStateMsgError] = useState({}); + const [alertMessage, setAlertMessage] = useState(null); + + useEffect(async () => { + setWindowLocationPathnameGet(window.location.pathname); + + const instantiationOrderState = await ControlLoopService.getInstanceOrderState( + props.location.instantiationName, + props.location.instantiationVersion, windowLocationPathnameGet) + .catch(error => error.message); + + const orderStateJson = await instantiationOrderState.json(); + + console.log(orderStateJson); + + if (!instantiationOrderState.ok || orderStateJson['controlLoopIdentifierList'].length === 0) { + setInstantiationOrderStateError(true); + setInstantiationOrderStateMsgError(orderStateJson); + } else { + setControlLoopIdentifierList(orderStateJson['controlLoopIdentifierList']); + setOrderedState(orderStateJson['orderedState']); + } + }, []); + + const handleDropSelect = (event) => { + console.log("handleDropDownChange called"); + + const stateChangeObject = { + orderedState: event, + controlLoopIdentifierList: controlLoopIdentifierList + } + setToscaOrderStateObject(stateChangeObject); + setOrderedState(event); + } + + const handleSave = async () => { + console.log("handleSave called"); + setWindowLocationPathNameSave(window.location.pathname); + + const response = await ControlLoopService.changeInstanceOrderState( + toscaOrderStateObject, + windowLocationPathNameSave).catch(error => error.message); + + if (response.ok) { + successAlert(); + } else { + await errorAlert(response); + } + } + + const handleClose = () => { + console.log('handleClose called'); + setShow(false); + props.history.push('/'); + } + + const successAlert = () => { + console.log("successAlert called"); + setAlertMessage(<Alert variant="success"> + <Alert.Heading>Order State Changed Success</Alert.Heading> + <p>Order State Changed was successfully changed</p> + <hr/> + </Alert>); + } + + const errorAlert = async (response) => { + console.log("errorAlert called"); + setAlertMessage(<Alert variant="danger"> + <Alert.Heading>Order State Changed Failure</Alert.Heading> + <p>An error occurred while trying to change order state</p> + <p>Status code: { await response.status } : { response.statusText }</p> + <p>Status Text: { await response.text() }</p> + <hr/> + </Alert>); + } + + return ( + <ModalStyled size="sm" + show={ show } + onHide={ handleClose } + backdrop="static" + keyboard={ false }> + <Modal.Header closeButton> + <Modal.Title>Manage Instantiation</Modal.Title> + </Modal.Header> + <div style={ { padding: '5px 5px 0 5px' } }> + <Modal.Body> + <Container> + <Dropdown onSelect={ handleDropSelect }> + <Dropdown.Toggle variant="dark" id="dropdown-basic"> + Select Order State + </Dropdown.Toggle> + <Dropdown.Menu> + <Dropdown.Item eventKey="UNINITIALISED">UNINITIALISED</Dropdown.Item> + <Dropdown.Item eventKey="PASSIVE">PASSIVE</Dropdown.Item> + <Dropdown.Item eventKey="RUNNING">RUNNING</Dropdown.Item> + </Dropdown.Menu> + </Dropdown> + { + controlLoopIdentifierList.map((clIdList, index) => ( + <InstantiationOrderStateChangeItem title={ clIdList.name } orderState={ orderedState } index={ index } key={ index }/> + )) + } + </Container> + <AlertStyled show={ instantiationOrderStateError } + variant="danger">Can't get instantiation ordered state:<br/>{ JSON.stringify(instantiationOrderStateMsgError, null, 2) }</AlertStyled> + </Modal.Body> + <DivWhiteSpaceStyled> + { alertMessage } + </DivWhiteSpaceStyled> + </div> + <Modal.Footer> + <Button variant="primary" onClick={ handleSave }>Save</Button> + <Button variant="secondary" onClick={ handleClose }>Close</Button> + </Modal.Footer> + </ModalStyled> + ); +} + +export default ChangeOrderStateModal; |