aboutsummaryrefslogtreecommitdiffstats
path: root/runtime/ui-react/src/components/dialogs/Tosca
diff options
context:
space:
mode:
Diffstat (limited to 'runtime/ui-react/src/components/dialogs/Tosca')
-rw-r--r--runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js224
-rw-r--r--runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js259
2 files changed, 247 insertions, 236 deletions
diff --git a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 4796b8d73..e7be9841e 100644
--- a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -38,126 +38,136 @@ import LoopCache from '../../../api/LoopCache';
import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
const ModalStyled = styled(Modal)`
- background-color: transparent;
+ background-color: transparent;
`
const cellStyle = { border: '1px solid black' };
-const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
-const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
+const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
export default class ViewLoopTemplatesModal extends React.Component {
state = {
- show: true,
- content: 'Please select a loop template to display it',
- selectedRow: -1,
- loopTemplatesData: [],
- fakeLoopCacheWithTemplate: new LoopCache({}),
- loopTemplateColumnsDefinition: [
- { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
- cellStyle: cellStyle,
- headerStyle: headerStyle
- },
- { title: "Template Name", field: "name",
- cellStyle: cellStyle,
- headerStyle: headerStyle
- },
- { title: "Service Model Name", field: "modelService.serviceDetails.name",
- cellStyle: cellStyle,
- headerStyle: headerStyle
- },
- { title: "Loop Type Allowed", field: "allowedLoopType",
- cellStyle: cellStyle,
- headerStyle: headerStyle
- },
- { title: "# Instances Allowed", field: "maximumInstancesAllowed",
- cellStyle: cellStyle,
- headerStyle: headerStyle
- },
- { title: "Modified Date", field: "updatedDate", editable: 'never',
- cellStyle: cellStyle,
- headerStyle: headerStyle
- }
- ],
- 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.renderSvg = this.renderSvg.bind(this);
- this.getLoopTemplate = this.getLoopTemplate.bind(this);
- this.getAllLoopTemplates();
- }
+ show: true,
+ content: 'Please select a loop template to display it',
+ selectedRow: -1,
+ loopTemplatesData: [],
+ fakeLoopCacheWithTemplate: new LoopCache({}),
+ loopTemplateColumnsDefinition: [
+ {
+ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Template Name", field: "name",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Service Model Name", field: "modelService.serviceDetails.name",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Loop Type Allowed", field: "allowedLoopType",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "# Instances Allowed", field: "maximumInstancesAllowed",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Modified Date", field: "updatedDate", editable: 'never',
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ }
+ ],
+ 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 }/>)
+ }
+ };
- getAllLoopTemplates() {
- TemplateService.getAllLoopTemplates().then(templatesData => {
- // replace -1 in maximumInstancesAllowed with more meaningful 'No Limit'
- for (let item in templatesData) {
- if (templatesData[item].maximumInstancesAllowed === -1) {
- templatesData[item].maximumInstancesAllowed = 'No Limit';
- }
- }
- this.setState({ loopTemplatesData: templatesData })
- });
- }
+ constructor(props, context) {
+ super(props, context);
+ this.handleClose = this.handleClose.bind(this);
+ this.renderSvg = this.renderSvg.bind(this);
+ this.getLoopTemplate = this.getLoopTemplate.bind(this);
+ this.getAllLoopTemplates();
+ }
- getLoopTemplate(templateIdInDataArray) {
- if (typeof templateIdInDataArray !== "undefined") {
- this.setState({ fakeLoopCacheWithTemplate:
- new LoopCache({
- "loopTemplate":this.state.loopTemplatesData[templateIdInDataArray],
- "name": "fakeLoop"
- })
- })
- } else {
- this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+ getAllLoopTemplates() {
+ TemplateService.getAllLoopTemplates().then(templatesData => {
+ // replace -1 in maximumInstancesAllowed with more meaningful 'No Limit'
+ for (let item in templatesData) {
+ if (templatesData[item].maximumInstancesAllowed === -1) {
+ templatesData[item].maximumInstancesAllowed = 'No Limit';
}
+ }
+ this.setState({ loopTemplatesData: templatesData })
+ });
+ }
+
+ getLoopTemplate(templateIdInDataArray) {
+ if (typeof templateIdInDataArray !== "undefined") {
+ this.setState({
+ fakeLoopCacheWithTemplate:
+ new LoopCache({
+ "loopTemplate": this.state.loopTemplatesData[templateIdInDataArray],
+ "name": "fakeLoop"
+ })
+ })
+ } else {
+ this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
}
+ }
- handleClose() {
- this.setState({ show: false });
- this.props.history.push('/')
- }
+ handleClose() {
+ this.setState({ show: false });
+ this.props.history.push('/')
+ }
- renderSvg() {
- return(
- <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
- )
- }
+ renderSvg() {
+ return (
+ <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/>
+ )
+ }
- render() {
+ render() {
return (
- <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
- <Modal.Header closeButton>
- </Modal.Header>
- <Modal.Body>
- <MaterialTable
- title={"View Blueprint MicroService Templates"}
- data={this.state.loopTemplatesData}
- columns={this.state.loopTemplateColumnsDefinition}
- icons={this.state.tableIcons}
- onRowClick={(event, rowData) => {this.getLoopTemplate(rowData.tableData.id);this.setState({selectedRow: rowData.tableData.id})}}
- options={{
- headerStyle:rowHeaderStyle,
- rowStyle: rowData => ({
- backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
- })
- }}
- />
- {this.renderSvg()}
- </Modal.Body>
- <Modal.Footer>
- <Button variant="secondary" onClick={this.handleClose}>Close</Button>
- </Modal.Footer>
+ <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+ <Modal.Header closeButton>
+ </Modal.Header>
+ <Modal.Body>
+ <MaterialTable
+ title={ "View Blueprint MicroService Templates" }
+ data={ this.state.loopTemplatesData }
+ columns={ this.state.loopTemplateColumnsDefinition }
+ icons={ this.state.tableIcons }
+ onRowClick={ (event, rowData) => {
+ this.getLoopTemplate(rowData.tableData.id);
+ this.setState({ selectedRow: rowData.tableData.id })
+ } }
+ options={ {
+ headerStyle: rowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ })
+ } }
+ />
+ { this.renderSvg() }
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+ </Modal.Footer>
</ModalStyled>
- );
- }
+ );
}
+}
diff --git a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 7680ec4b9..d93f0b00c 100644
--- a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -27,136 +27,137 @@ import { mount } from 'enzyme';
import { BrowserRouter as Router } from 'react-router-dom';
describe('Verify ViewLoopTemplatesModal', () => {
- beforeEach(() => {
- fetch.resetMocks();
- });
+ beforeEach(() => {
+ fetch.resetMocks();
+ });
- it('Test API Successful', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "name": "MTCA version 1",
- "modelService.serviceDetails.name": "MTCA",
- "allowedLoopType" : "CLOSED",
- "maximumInstancesAllowed":1,
- "updatedDate":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = shallow(<ViewLoopTemplatesModal/>);
- });
-
- it('Test API Exception', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: false,
- status: 500,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "name": "MTCA version 1",
- "modelService.serviceDetails.name": "MTCA",
- "allowedLoopType" : "CLOSED",
- "maximumInstancesAllowed":1,
- "updatedDate":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = shallow(<ViewLoopTemplatesModal/>);
- });
+ it('Test API Successful', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "name": "MTCA version 1",
+ "modelService.serviceDetails.name": "MTCA",
+ "allowedLoopType": "CLOSED",
+ "maximumInstancesAllowed": 1,
+ "updatedDate": "2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewLoopTemplatesModal/>);
+ });
- it('Test API Rejection', () => {
- const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error'));
- setTimeout( () => myMockFunc().catch(e => {
- console.info(e);
- }),
- 100
- );
- const component = shallow(<ViewLoopTemplatesModal/>);
- expect(myMockFunc.mock.calls.length).toBe(1);
- });
+ it('Test API Exception', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: false,
+ status: 500,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "name": "MTCA version 1",
+ "modelService.serviceDetails.name": "MTCA",
+ "allowedLoopType": "CLOSED",
+ "maximumInstancesAllowed": 1,
+ "updatedDate": "2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewLoopTemplatesModal/>);
+ });
- it('Test the tosca model view render method', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "name": "MTCA version 1",
- "modelService.serviceDetails.name": "MTCA",
- "allowedLoopType" : "CLOSED",
- "maximumInstancesAllowed":1,
- "updatedDate":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = shallow(<ViewLoopTemplatesModal/>);
- component.setState({ loopTemplateData: {
- "index": "1",
- "name": "MTCA version 1",
- "modelService.serviceDetails.name": "MTCA",
- "allowedLoopType" : "CLOSED",
- "maximumInstancesAllowed":1,
- "updatedDate":"2019-09-06 19:09:42"
- }
- });
- expect(component).toMatchSnapshot();
- });
+ it('Test API Rejection', () => {
+ const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error'));
+ setTimeout(() => myMockFunc().catch(e => {
+ console.info(e);
+ }),
+ 100
+ );
+ const component = shallow(<ViewLoopTemplatesModal/>);
+ expect(myMockFunc.mock.calls.length).toBe(1);
+ });
- it('Test Table icons', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "name": "MTCA version 1",
- "modelService.serviceDetails.name": "MTCA",
- "allowedLoopType" : "CLOSED",
- "maximumInstancesAllowed":1,
- "updatedDate":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
- expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
- });
-
- it('Test handleClose', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "name": "MTCA version 1",
- "modelService.serviceDetails.name": "MTCA",
- "allowedLoopType" : "CLOSED",
- "maximumInstancesAllowed":1,
- "updatedDate":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const historyMock = { push: jest.fn() };
- const handleClose = jest.spyOn(ViewLoopTemplatesModal.prototype,'handleClose');
- const component = shallow(<ViewLoopTemplatesModal 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();
- });
- });
+ it('Test the tosca model view render method', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "name": "MTCA version 1",
+ "modelService.serviceDetails.name": "MTCA",
+ "allowedLoopType": "CLOSED",
+ "maximumInstancesAllowed": 1,
+ "updatedDate": "2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewLoopTemplatesModal/>);
+ component.setState({
+ loopTemplateData: {
+ "index": "1",
+ "name": "MTCA version 1",
+ "modelService.serviceDetails.name": "MTCA",
+ "allowedLoopType": "CLOSED",
+ "maximumInstancesAllowed": 1,
+ "updatedDate": "2019-09-06 19:09:42"
+ }
+ });
+ expect(component).toMatchSnapshot();
+ });
+
+ it('Test Table icons', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "name": "MTCA version 1",
+ "modelService.serviceDetails.name": "MTCA",
+ "allowedLoopType": "CLOSED",
+ "maximumInstancesAllowed": 1,
+ "updatedDate": "2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
+ expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+ });
+
+ it('Test handleClose', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "name": "MTCA version 1",
+ "modelService.serviceDetails.name": "MTCA",
+ "allowedLoopType": "CLOSED",
+ "maximumInstancesAllowed": 1,
+ "updatedDate": "2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const historyMock = { push: jest.fn() };
+ const handleClose = jest.spyOn(ViewLoopTemplatesModal.prototype, 'handleClose');
+ const component = shallow(<ViewLoopTemplatesModal 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();
+ });
+});