diff options
Diffstat (limited to 'gui-clamp/ui-react/src/components')
13 files changed, 324 insertions, 98 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js new file mode 100644 index 0000000..2997239 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js @@ -0,0 +1,116 @@ +/* + * ============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 { Accordion, Button } from "react-bootstrap"; +import React, { useEffect, useState } from "react"; + +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 AccordionHeader = (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 = () => { + console.log("renderPassiveOrderedState called"); + + return ( + <PassiveHeader className="panel-header"> + <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }> + { props.title } + </Accordion.Toggle> + </PassiveHeader> + ) + } + + const renderRunningOrderedState = () => { + console.log("renderRunningOrderedState called"); + + return ( + <RunningHeader className="panel-header"> + <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }> + { props.title } + </Accordion.Toggle> + </RunningHeader> + ) + } + + return ( + toggleState() + ); +} + +export default AccordionHeader;
\ No newline at end of file diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js new file mode 100644 index 0000000..7685340 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js @@ -0,0 +1,38 @@ +/* + * ============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 { shallow } from "enzyme"; +import React from "react"; +import AccordionHeader from "./AccordionHeader"; +import toJson from "enzyme-to-json"; + +describe('Verify AccordionHeader', () => { + + const index = 0; + const title = "PMSH Instance"; + const orderState = "UNINITIALISED"; + const container = shallow(<AccordionHeader title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>); + + it("renders correctly", () => { + expect(toJson(container)).toMatchSnapshot(); + }); + +});
\ No newline at end of file diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js index 8ad855e..7a473e7 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js @@ -235,9 +235,11 @@ const InstancePropertiesModal = (props) => { } const handleSave = async () => { - console.log("handleSave called") + console.log("handleSave called"); - console.log("instanceName to be saved is: " + instanceName) + console.log("instanceName to be saved is: " + instanceName); + + console.log(JSON.stringify(toscaFullTemplate)); updateTemplate(jsonEditor.getValue()); diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js new file mode 100644 index 0000000..136983a --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js @@ -0,0 +1,33 @@ +/* + * ============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 { shallow } from "enzyme"; +import toJson from "enzyme-to-json"; +import React from "react"; +import InstantiationElementItem from "./InstantiationElementItem"; + +describe('Verify InstantiationElementItem', () => { + const container = shallow(<InstantiationElementItem />); + + it("renders correctly", () => { + expect(toJson(container)).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js new file mode 100644 index 0000000..127a886 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js @@ -0,0 +1,33 @@ +/* + * ============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 toJson from "enzyme-to-json"; +import { shallow } from "enzyme"; +import React from "react"; +import InstantiationElements from "./InstantiationElements"; + +describe('Verify InstantiationElements', () => { + const container = shallow(<InstantiationElements />); + + it("renders correctly", () => { + expect(toJson(container)).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js index a59770b..7b8e453 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js @@ -21,6 +21,7 @@ import React from "react"; import styled from 'styled-components'; import { Accordion, Button, Card } from "react-bootstrap"; +import AccordionHeader from "./AccordionHeader"; const AccordionBody = styled.div` margin: 0; @@ -34,89 +35,12 @@ const CardBody = styled(Card.Body)` 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 InstantiationItem = (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() } + <AccordionHeader title={ props.title } orderedState={ props.orderedState } index={ props.index } key={ props.index } /> <Accordion.Collapse eventKey={ props.index.toString() }> <CardBody>{ props.children }</CardBody> </Accordion.Collapse> diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js new file mode 100644 index 0000000..fe4aaf8 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js @@ -0,0 +1,53 @@ +/* + * ============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 { shallow } from "enzyme"; +import toJson from "enzyme-to-json"; + +import InstantiationItem from "./InstantiationItem"; + +describe('Verify InstantiationItem', () => { + + const index = 0; + const title = "PMSH Instance"; + const orderState = "UNINITIALISED"; + const container = shallow(<InstantiationItem title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>); + + it("renders without crashing", () => { + shallow(<InstantiationItem title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>); + }); + + it("renders correctly", () => { + expect(toJson(container)).toMatchSnapshot(); + }); + + it("should contain an Accordion", () => { + const accordion = container.find('Accordion'); + expect(accordion).toHaveLength(1); + }); + + it("should contain an AccordionHeader", () => { + const accordion = container.find('AccordionHeader'); + expect(accordion).toHaveLength(1); + }); + +});
\ No newline at end of file diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js index dad4185..4186477 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js @@ -43,13 +43,13 @@ const MonitorInstantiation = (props) => { const controlLoopInstantiation = await ControlLoopService.getControlLoopInstantiation() .catch(error => error.message); - const controlLoopInstantiationJson = await controlLoopInstantiation.json() - console.log(controlLoopInstantiationJson) + const controlLoopInstantiationJson = await controlLoopInstantiation.json(); + if (!controlLoopInstantiation.ok || controlLoopInstantiationJson['controlLoopList'].length === 0) { setControlLoopInstantiationOk(false) setControlLoopInstantiationError(controlLoopInstantiationJson) } else { - setControlLoopList(controlLoopInstantiationJson[['controlLoopList']]) + setControlLoopList(controlLoopInstantiationJson['controlLoopList']); } }, []) @@ -67,7 +67,7 @@ const MonitorInstantiation = (props) => { <Modal.Body> { controlLoopList.map((clList, index) => ( - <InstantiationItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index }> + <InstantiationItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index } > <InstantiationElements elements={ clList["elements"] } /> </InstantiationItem> )) diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js index 5e30924..cce6225 100644 --- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js @@ -17,7 +17,7 @@ * ============LICENSE_END========================================================= */ -import { mount, shallow } from "enzyme"; +import { shallow } from "enzyme"; import toJson from "enzyme-to-json"; import { createMemoryHistory } from "history"; import React from "react"; @@ -25,39 +25,31 @@ import MonitorInstantiation from "./MonitorInstantiation"; import { act } from "react-dom/test-utils"; describe('Verify MonitoringInstantiation', () => { - - it("renders without crashing", () => { - shallow(<MonitorInstantiation/>); - }); + const container = shallow(<MonitorInstantiation />); + const containerWithHistory = shallow(<MonitorInstantiation history={ createMemoryHistory() }/>); it("renders correctly", () => { - const tree = shallow(<MonitorInstantiation/>); - expect(toJson(tree)).toMatchSnapshot(); + expect(toJson(container)).toMatchSnapshot(); }); it('should have a Button element', () => { - const container = shallow(<MonitorInstantiation/>) expect(container.find('Button').length).toEqual(1); }); it('handleClose called when bottom button clicked', () => { - const history = createMemoryHistory(); - const component = mount(<MonitorInstantiation history={ history }/>) const logSpy = jest.spyOn(console, 'log'); act(() => { - component.find('[variant="secondary"]').simulate('click'); + containerWithHistory.find('[variant="secondary"]').simulate('click'); expect(logSpy).toHaveBeenCalledWith('handleClose called'); }); }); it('handleClose called when top-right button clicked', () => { - const history = createMemoryHistory(); - const component = mount(<MonitorInstantiation history={ history }/>) const logSpy = jest.spyOn(console, 'log'); act(() => { - component.find('[size="xl"]').get(0).props.onHide(); + containerWithHistory.find('[size="xl"]').get(0).props.onHide(); expect(logSpy).toHaveBeenCalledWith('handleClose called'); }); }); diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap new file mode 100644 index 0000000..b4a707b --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify AccordionHeader renders correctly 1`] = `""`; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap new file mode 100644 index 0000000..2c5d298 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify InstantiationElementItem renders correctly 1`] = `<Fragment />`; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap new file mode 100644 index 0000000..8fa928e --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify InstantiationElements renders correctly 1`] = `<Fragment />`; diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap new file mode 100644 index 0000000..a3a230a --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify InstantiationItem renders correctly 1`] = ` +<Accordion> + <styled.div> + <AccordionHeader + index={ + Object { + "index": 0, + } + } + key="[object Object]" + title={ + Object { + "title": "PMSH Instance", + } + } + /> + <AccordionCollapse + eventKey="[object Object]" + > + <Styled(CardBody) /> + </AccordionCollapse> + </styled.div> +</Accordion> +`; |