From 6ad48326583f162c163d6c272a3d83fb8a01353d Mon Sep 17 00:00:00 2001 From: brunomilitzer Date: Fri, 18 Jun 2021 16:07:16 +0100 Subject: Add Tosca Monitoring App to Policy Gui Implemented the prototype monitoring gui onto the policy gui Issue-ID: POLICY-3357 Change-Id: Iabf25cd6c26d4e65a7a963cdd79c25aa91c39736 Signed-off-by: brunomilitzer --- gui-clamp/ui-react/src/LoopUI.js | 3 + .../ui-react/src/__snapshots__/LoopUI.test.js.snap | 4 + .../src/__snapshots__/OnapClamp.test.js.snap | 4 + gui-clamp/ui-react/src/api/ControlLoopService.js | 47 ++++++++ .../dialogs/ControlLoop/ControlLoopElementItem.js | 124 ++++++++++++++++++++ .../dialogs/ControlLoop/ControlLoopElements.js | 41 +++++++ .../dialogs/ControlLoop/ControlLoopItem.js | 128 +++++++++++++++++++++ .../ControlLoop/MonitoringControlLoopModal.js | 71 ++++++++++++ gui-clamp/ui-react/src/components/menu/MenuBar.js | 3 + .../menu/__snapshots__/MenuBar.test.js.snap | 69 +++++++++++ 10 files changed, 494 insertions(+) create mode 100644 gui-clamp/ui-react/src/api/ControlLoopService.js create mode 100644 gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElementItem.js create mode 100644 gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopElements.js create mode 100644 gui-clamp/ui-react/src/components/dialogs/ControlLoop/ControlLoopItem.js create mode 100644 gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitoringControlLoopModal.js (limited to 'gui-clamp/ui-react') diff --git a/gui-clamp/ui-react/src/LoopUI.js b/gui-clamp/ui-react/src/LoopUI.js index 6904122..4009bf1 100644 --- a/gui-clamp/ui-react/src/LoopUI.js +++ b/gui-clamp/ui-react/src/LoopUI.js @@ -17,6 +17,7 @@ * SPDX-License-Identifier: Apache-2.0 * ============LICENSE_END========================================================= */ + import React from 'react'; import styled from 'styled-components'; import MenuBar from './components/menu/MenuBar'; @@ -51,6 +52,7 @@ import Spinner from 'react-bootstrap/Spinner'; import { Link } from 'react-router-dom'; import ReadAndConvertYaml from "./components/dialogs/ReadAndConvertYaml"; +import MonitoringControlLoopModal from "./components/dialogs/ControlLoop/MonitoringControlLoopModal"; import GetLocalToscaFileForUpload from "./components/dialogs/GetLocalToscaFileForUpload"; const StyledMainDiv = styled.div` @@ -380,6 +382,7 @@ export default class LoopUI extends React.Component { showSucAlert={ this.showSucAlert } showFailAlert={ this.showFailAlert }/>) } /> + () }/> ); } diff --git a/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap b/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap index e9ed817..6d25823 100644 --- a/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap +++ b/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -81,6 +81,10 @@ exports[`Verify LoopUI Test the render method 1`] = ` path="/refreshStatus" render={[Function]} /> +
+
{ + console.log("getControlLoopList received " + response.status); + + if (response.ok) { + console.info("getControlLoopList query successful"); + return response.json(); + } else { + return response.text().then(responseBody => { + throw Error("HTTP " + response.status + "," + responseBody); + }); + } + }).catch(error => { + console.error("getControlLoopList error occurred ", error); + alert("getControlLoopList error occurred " + error); + return undefined; + }); + } +} 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 ( + + + + ) + } + + const renderPassiveOrderedState = () => { + return ( + + + + ) + } + + const renderRunningOrderedState = () => { + return ( + + + + ) + } + + return ( + + { toggleState() } + + ); +} + +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 ( + + { + clElements.map((clEl, index) => ( + + )) + } + + ); +} + +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 ( + + + { props.title } + + + ) + } + + const renderPassiveOrderedState = () => { + return ( + + + { props.title } + + + ) + } + + const renderRunningOrderedState = () => { + return ( + + + { props.title } + + + ) + } + + return ( + + + { toggleState() } + + { props.children } + + + + ); +} + +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 ( + + + Tosca Control Loop - Monitoring + + + { + controlLoopList.map((clList, index) => ( + + + + )) + } + + + + + + ) +} + +export default MonitoringControlLoopModal; diff --git a/gui-clamp/ui-react/src/components/menu/MenuBar.js b/gui-clamp/ui-react/src/components/menu/MenuBar.js index 978a87a..d7784ef 100644 --- a/gui-clamp/ui-react/src/components/menu/MenuBar.js +++ b/gui-clamp/ui-react/src/components/menu/MenuBar.js @@ -117,6 +117,9 @@ export default class MenuBar extends React.Component { Deploy to DCAE (DEPLOY) UnDeploy to DCAE (UNDEPLOY) + + Monitoring Control Loop + Wiki Contact diff --git a/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap index 2fef6c7..416d62e 100644 --- a/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap +++ b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap @@ -1136,6 +1136,75 @@ exports[`Verify MenuBar Test the render method 1`] = ` UnDeploy to DCAE (UNDEPLOY) + + + Monitoring Control Loop + + -- cgit 1.2.3-korg