diff options
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs/ControlLoop')
4 files changed, 364 insertions, 0 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElementItem.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElementItem.js new file mode 100644 index 0000000..632cacd --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElementItem.js @@ -0,0 +1,124 @@ +/* + * ============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 styled from "styled-components"; +import { Button } from "react-bootstrap"; + +const UninitialisedBox = styled.div` + margin: 0; + padding: 0 0 1px 0; + border-bottom: 1px solid #7f7f7f; + background: #cccccc; + font-weight: normal; + border-radius: 0; +` +const PassiveBox = styled.div` + margin: 0; + padding: 0 0 1px 0; + border-bottom: 1px solid #7f7f7f; + background: #ffe87c; + font-weight: normal; + border-radius: 0; +` +const RunningBox = styled.div` + margin: 0; + padding: 0 0 1px 0; + border-bottom: 1px solid #7f7f7f; + background: #7ec699; + font-weight: normal; + border-radius: 0; +` +const ButtonStyle = styled(Button)` + margin: 0; + padding: 5px 12px; + width: 100%; + text-align: left; + background: transparent !important; + color: #000000 !important; + text-decoration: none !important; + border: none; + border-radius: 0; + + :hover, :active :focus { + color: #000000 !important; + outline: 0 !important; + box-shadow: none !important; + background: transparent !important; + text-decoration: none !important; + } +` + +const ControlLoopElementItem = (props) => { + const [title, setTitle] = useState(""); + + useEffect(() => { + const title = props.title.split("."); + setTitle(title[4]); + }, []); + + const toggleState = () => { + switch (props.orderedState) { + case 'UNINITIALISED': + return renderUninitialisedOrderedState(); + case 'PASSIVE': + return renderPassiveOrderedState(); + case 'RUNNING': + return renderRunningOrderedState(); + } + } + + const renderUninitialisedOrderedState = () => { + return ( + <UninitialisedBox className="panel-header"> + <Button as={ ButtonStyle } variant="link"> + { title } + </Button> + </UninitialisedBox> + ) + } + + const renderPassiveOrderedState = () => { + return ( + <PassiveBox className="panel-header"> + <Button as={ ButtonStyle } variant="link"> + { title } + </Button> + </PassiveBox> + ) + } + + const renderRunningOrderedState = () => { + return ( + <RunningBox className="panel-header"> + <Button as={ ButtonStyle } variant="link" active={ true }> + { title } + </Button> + </RunningBox> + ) + } + + return ( + <React.Fragment> + { toggleState() } + </React.Fragment> + ); +} + +export default ControlLoopElementItem; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElements.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElements.js new file mode 100644 index 0000000..57bdf40 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElements.js @@ -0,0 +1,41 @@ +/* + * ============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 ControlLoopElementItem from "./ControlLoopElementItem"; + +const ControlLoopElements = (props) => { + const [clElements, setClElements] = useState([]); + + useEffect(() => { + setClElements(Object.values(props.elements)); + }, []); + + return ( + <React.Fragment> + { + clElements.map((clEl, index) => ( + <ControlLoopElementItem title={ clEl["definition"]["name"] } orderedState={ clEl["orderedState"] } key={ index } /> + )) + } + </React.Fragment> + ); +} + +export default ControlLoopElements; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopItem.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopItem.js new file mode 100644 index 0000000..f149517 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopItem.js @@ -0,0 +1,128 @@ +/* + * ============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 styled from 'styled-components'; + +import { Accordion, Button, Card } from "react-bootstrap"; + +const AccordionBody = styled.div` + margin: 0; + padding: 0; + border: 1px solid #7f7f7f; + border-radius: 0; +` + +const CardBody = styled(Card.Body)` + padding: 0; + margin: 0; +` + +const UninitialisedHeader = styled.div` + margin: 0; + padding: 0 0 1px 0; + border-bottom: 1px solid #7f7f7f; + background: #cccccc; + font-weight: normal; + border-radius: 0; +` + +const PassiveHeader = styled.div` + margin: 0; + padding: 0 0 1px 0; + border-bottom: 1px solid #7f7f7f; + background: #ffe87c; + font-weight: normal; + border-radius: 0; +` + +const RunningHeader = styled.div` + margin: 0; + padding: 0 0 1px 0; + border-bottom: 1px solid #7f7f7f; + background: #7ec699; + font-weight: normal; + border-radius: 0; +` + +const ToggleButton = styled(Button)` + color: #000000; + text-decoration: none; + + :hover, :active { + color: #000000; + text-decoration: none !important; + } +` + +const ControlLoopItem = (props) => { + const toggleState = () => { + switch (props.orderedState) { + case 'UNINITIALISED': + return renderUninitialisedOrderedState() + case 'PASSIVE': + return renderPassiveOrderedState(); + case 'RUNNING': + return renderRunningOrderedState(); + } + } + + const renderUninitialisedOrderedState = () => { + return ( + <UninitialisedHeader className="panel-header"> + <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }> + { props.title } + </Accordion.Toggle> + </UninitialisedHeader> + ) + } + + const renderPassiveOrderedState = () => { + return ( + <PassiveHeader className="panel-header"> + <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }> + { props.title } + </Accordion.Toggle> + </PassiveHeader> + ) + } + + const renderRunningOrderedState = () => { + return ( + <RunningHeader className="panel-header"> + <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }> + { props.title } + </Accordion.Toggle> + </RunningHeader> + ) + } + + return ( + <Accordion> + <AccordionBody> + { toggleState() } + <Accordion.Collapse eventKey={ props.index.toString() }> + <CardBody>{ props.children }</CardBody> + </Accordion.Collapse> + </AccordionBody> + </Accordion> + ); +} + +export default ControlLoopItem; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitoringControlLoopModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitoringControlLoopModal.js new file mode 100644 index 0000000..03fb64b --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitoringControlLoopModal.js @@ -0,0 +1,71 @@ +/* + * ============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 styled from "styled-components"; +import Modal from "react-bootstrap/Modal"; +import Button from "react-bootstrap/Button"; +import ControlLoopItem from "./ControlLoopItem"; +import ControlLoopService from "../../../api/ControlLoopService"; +import ControlLoopElements from "./ControlLoopElements"; + +const ModalStyled = styled(Modal)` + background-color: transparent; +` + +const MonitoringControlLoopModal = (props) => { + const [show, setShow] = useState(true); + const [controlLoopList, setControlLoopList] = useState([]); + const [windowLocationPathname, setWindowLocationPathname] = useState(''); + + useEffect(() => { + setWindowLocationPathname(window.location.pathname); + + ControlLoopService.getControlLoopList(windowLocationPathname).then(controlLoopList => { + setControlLoopList(controlLoopList['controlLoopList']); + }); + }, []) + + const handleClose = () => { + setShow(false); + props.history.push('/'); + } + + return ( + <ModalStyled size="xl" show={ show } onHide={ handleClose } backdrop="static" keyboard={ false }> + <Modal.Header closeButton> + <Modal.Title>Tosca Control Loop - Monitoring</Modal.Title> + </Modal.Header> + <Modal.Body> + { + controlLoopList.map((clList, index) => ( + <ControlLoopItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index }> + <ControlLoopElements elements={ clList["elements"] } /> + </ControlLoopItem> + )) + } + </Modal.Body> + <Modal.Footer> + <Button variant="secondary" type="null" onClick={ handleClose }>Cancel</Button> + </Modal.Footer> + </ModalStyled> + ) +} + +export default MonitoringControlLoopModal; |