aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs
diff options
context:
space:
mode:
authordrveerendra <vrajasekharaiah@att.com>2019-10-31 12:45:30 -0400
committersebdet <sebastien.determe@intl.att.com>2019-11-04 18:28:24 +0100
commitf6b2625c5876c5ef1b8ead0b3962362fb2924f95 (patch)
treea4f365ded51ffc265b226560d20bc81d9dd28573 /ui-react/src/components/dialogs
parent2901ca9fec4a88db325b90bda2103ffc5e921681 (diff)
Adding viewToscamodels menu
Updated package.json file to include material table and material UI react libraries. Added ViewToscalModals folder which contains js file, corresponding test file and its snapshots Issue-ID: CLAMP-544 Change-Id: I6b9328d6270fc32b41a152c91a9fd872f3524beb Signed-off-by: drveerendra <vrajasekharaiah@att.com>
Diffstat (limited to 'ui-react/src/components/dialogs')
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js151
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js89
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap169
3 files changed, 409 insertions, 0 deletions
diff --git a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js
new file mode 100644
index 000000000..8073dc357
--- /dev/null
+++ b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js
@@ -0,0 +1,151 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React, { forwardRef } from 'react'
+import MaterialTable from "material-table";
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import TemplateMenu from '../../../api/TemplateMenu';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Search from '@material-ui/icons/Search';
+
+
+const ModalStyled = styled(Modal)`
+ background-color: transparent;
+`
+const StyledToscaView = styled.textarea`
+`
+const StyledToscaDiv = styled.div`
+`
+const vtmCellStyle = { border: '1px solid black' };
+const vtmHeaderStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const vtmRowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
+
+export default class ViewToscalModals extends React.Component {
+
+ state = {
+ show: true,
+ content: 'Please select Tosca model to view the details',
+ selectedRow: -1,
+ toscaNames: [],
+ toscaColumns: [
+ { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Micro Service Name", field: "toscaModelName",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "PolicyType", field: "policyType",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Version", field: "version",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Uploaded By", field: "userId",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Uploaded Date", field: "lastUpdatedDate", editable: 'never',
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ }
+ ],
+ tableIcons: {
+ FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+ LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+ NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+ PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+ ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+ Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+ SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
+ }
+ };
+
+ constructor(props, context) {
+ super(props, context);
+ this.handleClose = this.handleClose.bind(this);
+ this.getToscaModals = this.getToscaModals.bind(this);
+ this.handleYamlContent = this.handleYamlContent.bind(this);
+ }
+
+ componentWillMount() {
+ this.getToscaModals();
+ }
+
+ getToscaModals() {
+ TemplateMenu.getToscaModals().then(toscaNames => {
+ this.setState({ toscaNames: toscaNames });
+ });
+ }
+
+ handleYamlContent(event) {
+ console.log('inside handleYamlContent');
+ this.setState({ content: event.target.value });
+ }
+
+ handleClose() {
+ this.setState({ show: false });
+ this.props.history.push('/');
+ }
+
+ render() {
+ return (
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+ <Modal.Header closeButton>
+ <Modal.Title className="title">View Tosca Model</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <MaterialTable
+ title={"View ToscaModel"}
+ data={this.state.toscaNames}
+ columns={this.state.toscaColumns}
+ icons={this.state.tableIcons}
+ onRowClick={(event, rowData) => {this.setState({content: rowData.toscaModelRevisions[0].toscaModelYaml, selectedRow: rowData.tableData.id})}}
+ options={{
+ headerStyle: vtmRowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ })
+ }}
+ />
+ <StyledToscaDiv>
+ <StyledToscaView value={this.state.content} onChange={this.handleYamlContent}/>
+ </StyledToscaDiv>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+ </Modal.Footer>
+ </ModalStyled>
+ );
+ }
+}
diff --git a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js
new file mode 100644
index 000000000..4284dd3ed
--- /dev/null
+++ b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js
@@ -0,0 +1,89 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import ViewToscaModals from './ViewToscaModals';
+import { mount } from 'enzyme';
+
+
+describe('Verify ViewToscaModals', () => {
+ beforeEach(() => {
+ fetch.resetMocks();
+ fetch.mockImplementation(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ });
+
+ it('Test the tosca model view render method', () => {
+ const component = shallow(<ViewToscaModals/>);
+ component.setState({ toscaNames: {
+ "index": "1",
+ "toscaModelYaml": "MTCA",
+ "toscaModelName": "DCAE_MTCAConfig",
+ "version" : "16",
+ "userId" : "aj928f",
+ "policyType" : "mtca",
+ "lastUpdatedDate" : "05-07-2019 19:09:42"
+ }
+ });
+ expect(component).toMatchSnapshot();
+ });
+
+ it('Test Table icons', () => {
+ const component = mount(<ViewToscaModals/>);
+ expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+
+ });
+
+ it('Test handleYamlContent', () => {
+ const yamlContent = 'MTCA Tosca model details';
+ const component = shallow(<ViewToscaModals/>);
+ component.find('[value="Please select Tosca model to view the details"]').prop('onChange')({ target: { value: yamlContent }});
+ expect(component.state('content')).toEqual(yamlContent);
+ });
+
+ it('Test handleClose', () => {
+ const historyMock = { push: jest.fn() };
+ const handleClose = jest.spyOn(ViewToscaModals.prototype,'handleClose');
+ const component = shallow(<ViewToscaModals history={historyMock} />)
+ component.find('[variant="secondary"]').prop('onClick')();
+ expect(handleClose).toHaveBeenCalledTimes(1);
+ expect(component.state('show')).toEqual(false);
+ expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+ handleClose.mockClear();
+ });
+});
diff --git a/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap b/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap
new file mode 100644
index 000000000..55137b928
--- /dev/null
+++ b/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewToscaModals Test the tosca model view render method 1`] = `
+<Styled(Bootstrap(Modal))
+ onHide={[Function]}
+ show={true}
+ size="xl"
+>
+ <ModalHeader
+ closeButton={true}
+ closeLabel="Close"
+ >
+ <ModalTitle
+ className="title"
+ >
+ View Tosca Model
+ </ModalTitle>
+ </ModalHeader>
+ <ModalBody>
+ <WithStyles(Component)
+ columns={
+ Array [
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "index",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "render": [Function],
+ "title": "#",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "toscaModelName",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Micro Service Name",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "policyType",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "PolicyType",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "version",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Version",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "userId",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Uploaded By",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "editable": "never",
+ "field": "lastUpdatedDate",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Uploaded Date",
+ },
+ ]
+ }
+ data={
+ Object {
+ "index": "1",
+ "lastUpdatedDate": "05-07-2019 19:09:42",
+ "policyType": "mtca",
+ "toscaModelName": "DCAE_MTCAConfig",
+ "toscaModelYaml": "MTCA",
+ "userId": "aj928f",
+ "version": "16",
+ }
+ }
+ icons={
+ Object {
+ "FirstPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "LastPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "NextPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "PreviousPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "ResetSearch": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "Search": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "SortArrow": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ }
+ }
+ onRowClick={[Function]}
+ options={
+ Object {
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "1px solid black",
+ "fontSize": "15pt",
+ "text": "bold",
+ },
+ "rowStyle": [Function],
+ }
+ }
+ title="View ToscaModel"
+ />
+ <styled.div>
+ <styled.textarea
+ onChange={[Function]}
+ value="Please select Tosca model to view the details"
+ />
+ </styled.div>
+ </ModalBody>
+ <ModalFooter>
+ <Button
+ active={false}
+ disabled={false}
+ onClick={[Function]}
+ type="button"
+ variant="secondary"
+ >
+ Close
+ </Button>
+ </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;