From 2022e5ce5a03788a6edc5761c495cfadc5ded485 Mon Sep 17 00:00:00 2001 From: liamfallon Date: Tue, 9 Nov 2021 15:22:22 +0000 Subject: Align ui-react file in policy-clamp and policy-gui When the ui-react code was transferred to policy-gui, the white space was cleaned up and reformatted. This makes it difficult to track the real functional changes if any between ui-react in policy-clamp and policy-gui. This review brings the white space changes into ui-react in policy-clamp to make file comparisons easier. Issue-ID: POLICY-3358 Change-Id: Ic303e71b341e5c0f7ca0de0ed4c4962ebf2f988a Signed-off-by: liamfallon --- .../src/components/dialogs/Loop/CreateLoopModal.js | 277 +++++++-------- .../dialogs/Loop/CreateLoopModal.test.js | 72 ++-- .../src/components/dialogs/Loop/DeployLoopModal.js | 263 +++++++------- .../dialogs/Loop/DeployLoopModal.test.js | 146 ++++---- .../components/dialogs/Loop/LoopPropertiesModal.js | 144 ++++---- .../dialogs/Loop/LoopPropertiesModal.test.js | 132 +++---- .../src/components/dialogs/Loop/ModifyLoopModal.js | 387 +++++++++++---------- .../dialogs/Loop/ModifyLoopModal.test.js | 134 +++---- .../src/components/dialogs/Loop/OpenLoopModal.js | 174 ++++----- .../components/dialogs/Loop/OpenLoopModal.test.js | 49 +-- 10 files changed, 908 insertions(+), 870 deletions(-) (limited to 'runtime/ui-react/src/components/dialogs/Loop') diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index 5663360a0..690dcbbdf 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js +++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js @@ -34,157 +34,160 @@ import LoopCache from '../../../api/LoopCache'; import SvgGenerator from '../../loop_viewer/svg/SvgGenerator'; const ModalStyled = styled(Modal)` - background-color: transparent; + background-color: transparent; ` const ErrMsgStyled = styled.div` - color: red; + color: red; ` export default class CreateLoopModal extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props, context) { + super(props, context); - this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this); - this.handleCreate = this.handleCreate.bind(this); - this.handleModelName = this.handleModelName.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleDropDownListChange = this.handleDropDownListChange.bind(this); - this.renderSvg = this.renderSvg.bind(this); - this.state = { - show: true, - chosenTemplateName: '', - modelInputErrMsg: '', - modelName: '', - templateNames: [], - fakeLoopCacheWithTemplate: new LoopCache({}) - }; - } + this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this); + this.handleCreate = this.handleCreate.bind(this); + this.handleModelName = this.handleModelName.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleDropDownListChange = this.handleDropDownListChange.bind(this); + this.renderSvg = this.renderSvg.bind(this); + this.state = { + show: true, + chosenTemplateName: '', + modelInputErrMsg: '', + modelName: '', + templateNames: [], + fakeLoopCacheWithTemplate: new LoopCache({}) + }; + } - async componentDidMount() { - await this.getAllLoopTemplates(); - await this.getModelNames(); - } + async componentDidMount() { + await this.getAllLoopTemplates(); + await this.getModelNames(); + } - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } - handleDropDownListChange(e) { - if (typeof e.value !== "undefined") { - this.setState({ - fakeLoopCacheWithTemplate: - new LoopCache({ - "loopTemplate":e.templateObject, - "name": "fakeLoop" - }), - chosenTemplateName: e.value - }) - } else { - this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) }) - } - } + handleDropDownListChange(e) { + if (typeof e.value !== "undefined") { + this.setState({ + fakeLoopCacheWithTemplate: + new LoopCache({ + "loopTemplate": e.templateObject, + "name": "fakeLoop" + }), + chosenTemplateName: e.value + }) + } else { + this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) }) + } + } - getAllLoopTemplates() { - TemplateService.getAllLoopTemplates().then(templatesData => { - const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } }); - this.setState({ - templateNames: templateOptions }) - }); - } + getAllLoopTemplates() { + TemplateService.getAllLoopTemplates().then(templatesData => { + const templateOptions = templatesData.map((templateData) => { + return { label: templateData.name, value: templateData.name, templateObject: templateData } + }); + this.setState({ + templateNames: templateOptions + }) + }); + } - getModelNames() { - TemplateService.getLoopNames().then(loopNames => { - if (!loopNames) { - loopNames = []; - } - // Remove LOOP_ prefix - let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', '')); - this.setState({ modelNames: trimmedLoopNames }); - }); - } + getModelNames() { + TemplateService.getLoopNames().then(loopNames => { + if (!loopNames) { + loopNames = []; + } + // Remove LOOP_ prefix + let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', '')); + this.setState({ modelNames: trimmedLoopNames }); + }); + } - handleCreate() { - if (!this.state.modelName) { - alert("A model name is required"); - return; - } - console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen"); - this.setState({ show: false }); - LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => { - console.debug("CreateLoop response received: ", text); - try { - this.props.history.push('/'); - this.props.loadLoopFunction("LOOP_" + this.state.modelName); - } catch(err) { - alert(text); - this.props.history.push('/'); - } - }) - .catch(error => { - console.debug("Create Loop failed"); - }); - } + handleCreate() { + if (!this.state.modelName) { + alert("A model name is required"); + return; + } + console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen"); + this.setState({ show: false }); + LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => { + console.debug("CreateLoop response received: ", text); + try { + this.props.history.push('/'); + this.props.loadLoopFunction("LOOP_" + this.state.modelName); + } catch (err) { + alert(text); + this.props.history.push('/'); + } + }) + .catch(error => { + console.debug("Create Loop failed"); + }); + } - handleModelName(event) { - if (this.state.modelNames.includes(event.target.value)) { - this.setState({ - modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.', - modelName: event.target.value - }); - return; - } else { - this.setState({ - modelInputErrMsg: '', - modelName: event.target.value - }); - } - } + handleModelName(event) { + if (this.state.modelNames.includes(event.target.value)) { + this.setState({ + modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.', + modelName: event.target.value + }); + return; + } else { + this.setState({ + modelInputErrMsg: '', + modelName: event.target.value + }); + } + } - renderSvg() { - return ( - - ); - } + renderSvg() { + return ( + + ); + } - render() { - return ( - - - Create Model - - - - Template Name: - - - - - - - {this.state.modelInputErrMsg} - - - - - - - - ); - } + render() { + return ( + + + Create Model + + + + Template Name: + + + + + + + { this.state.modelInputErrMsg } + + + + + + + + ); + } } diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js index 8ef53b412..3d9483334 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js +++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js @@ -27,7 +27,10 @@ import LoopService from '../../../api/LoopService'; import TemplateService from '../../../api/TemplateService'; let errorMessage = ''; -window.alert = jest.fn().mockImplementation((mesg) => { errorMessage = mesg ; return }); +window.alert = jest.fn().mockImplementation((mesg) => { + errorMessage = mesg; + return +}); describe('Verify CreateLoopModal', () => { @@ -35,7 +38,7 @@ describe('Verify CreateLoopModal', () => { it('Test the render method', async () => { const flushPromises = () => new Promise(setImmediate); TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { - return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]); }); TemplateService.getLoopNames = jest.fn().mockImplementation(() => { return Promise.resolve([]); @@ -45,21 +48,25 @@ describe('Verify CreateLoopModal', () => { expect(component).toMatchSnapshot(); await flushPromises(); component.update(); - expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]); + expect(component.state('templateNames')).toStrictEqual([{ "label": "template1", "value": "template1", "templateObject": { "name": "template1" } }, { + "label": "template2", + "value": "template2", + "templateObject": { "name": "template2" } + }]); }); it('handleDropdownListChange event', async () => { - const flushPromises = () => new Promise(setImmediate); + const flushPromises = () => new Promise(setImmediate); const component = shallow(); - component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} }); + component.find('StateManager').simulate('change', { value: 'template1', templateObject: { "name": "template1" } }); await flushPromises(); component.update(); expect(component.state('chosenTemplateName')).toEqual("template1"); expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template1"); expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop"); - component.find('StateManager').simulate('change',{value: 'template2', templateObject: {"name":"template2"} }); + component.find('StateManager').simulate('change', { value: 'template2', templateObject: { "name": "template2" } }); await flushPromises(); component.update(); expect(component.state('chosenTemplateName')).toEqual("template2"); @@ -70,12 +77,12 @@ describe('Verify CreateLoopModal', () => { it('handleModelName event', async () => { const flushPromises = () => new Promise(setImmediate); TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { - return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]); }); TemplateService.getLoopNames = jest.fn().mockImplementation(() => { return Promise.resolve([]); }); - const event = {target: {value : "model1"} }; + const event = { target: { value: "model1" } }; const component = shallow(); await flushPromises(); component.find('input').simulate('change', event); @@ -84,21 +91,21 @@ describe('Verify CreateLoopModal', () => { }); it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(CreateLoopModal.prototype,'handleClose'); - const component = shallow() + const historyMock = { push: jest.fn() }; + const handleClose = jest.spyOn(CreateLoopModal.prototype, 'handleClose'); + const component = shallow() component.find('[variant="secondary"]').prop('onClick')(); expect(handleClose).toHaveBeenCalledTimes(1); expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + handleClose.mockClear(); }); it('Test handleCreate Fail', () => { - const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate'); + const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate'); const component = shallow() component.find('[variant="primary"]').prop('onClick')(); @@ -110,32 +117,33 @@ describe('Verify CreateLoopModal', () => { }); it('Test handleCreate Suc', async () => { - const flushPromises = () => new Promise(setImmediate); + const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; - const loadLoopFunction = jest.fn(); - + const loadLoopFunction = jest.fn(); + LoopService.createLoop = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => {} - }); - }); - - const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate'); - const component = shallow() + return Promise.resolve({ + ok: true, + status: 200, + json: () => { + } + }); + }); + + const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate'); + const component = shallow() component.setState({ - modelName: "modelNameTest", - chosenTemplateName: "template1" - }); + modelName: "modelNameTest", + chosenTemplateName: "template1" + }); component.find('[variant="primary"]').prop('onClick')(); - await flushPromises(); - component.update(); + await flushPromises(); + component.update(); expect(handleCreate).toHaveBeenCalledTimes(1); expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); handleCreate.mockClear(); }); diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js index 803cfa9cb..5fff58631 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js +++ b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js @@ -32,142 +32,147 @@ import styled from 'styled-components'; import Spinner from 'react-bootstrap/Spinner' const StyledSpinnerDiv = styled.div` - justify-content: center !important; - display: flex !important; + justify-content: center !important; + display: flex !important; `; const ModalStyled = styled(Modal)` - background-color: transparent; + background-color: transparent; ` const FormStyled = styled(Form.Group)` - padding: .25rem 1.5rem; + padding: .25rem 1.5rem; ` export default class DeployLoopModal extends React.Component { - - constructor(props, context) { - super(props, context); - - this.handleSave = this.handleSave.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleChange = this.handleChange.bind(this); - this.refreshStatus = this.refreshStatus.bind(this); - this.renderDeployParam = this.renderDeployParam.bind(this); - this.renderSpinner = this.renderSpinner.bind(this); - - const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())); - this.state = { - loopCache: this.props.loopCache, - temporaryPropertiesJson: propertiesJson, - show: true, - key: this.getInitialKeyValue(propertiesJson) - }; - } - getInitialKeyValue(temporaryPropertiesJson) { - const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"]; - return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0); - } - componentWillReceiveProps(newProps) { - this.setState({ - loopName: newProps.loopCache.getLoopName(), - show: true - }); - } - - handleClose(){ - this.setState({ show: false }); - this.props.history.push('/'); - } - - renderSpinner() { - if (this.state.deploying) { - return ( - - - Loading... - - - ); - } else { - return (
); - } - } - - handleSave() { - const loopName = this.props.loopCache.getLoopName(); - // save the global propserties - this.setState({ deploying: true }); - LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { - LoopActionService.performAction(loopName, "deploy").then(pars => { - this.props.showSucAlert("Action deploy successfully performed"); - // refresh status and update loop logs - this.refreshStatus(loopName); - }) - .catch(error => { - this.props.showFailAlert("Action deploy failed"); - // refresh status and update loop logs - this.refreshStatus(loopName); - }); - }); - } - - refreshStatus(loopName) { - LoopActionService.refreshStatus(loopName).then(data => { - this.props.updateLoopFunction(data); - this.setState({ show: false, deploying: false }); - this.props.history.push('/'); - }) - .catch(error => { - this.props.showFailAlert("Refresh status failed"); - this.setState({ show: false, deploying: false }); - this.props.history.push('/'); - }); - } - handleChange(event) { - let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; - deploymentParam[this.state.key][event.target.name] = event.target.value; - - this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}}); - } - renderDeployParamTabs() { - if (typeof (this.state.temporaryPropertiesJson) === "undefined") { - return ""; - } - - const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; - var indents = []; - Object.keys(deployJsonList).forEach(item => - indents.push( - {this.renderDeployParam(deployJsonList[item])} - ) - ); - return indents; - } - renderDeployParam(deployJson) { - var indents = []; - Object.keys(deployJson).forEach(item => - indents.push( - {item} - - )); - return indents; - } - render() { - return ( - - - Deployment parameters - - this.setState({ key })}> - {this.renderDeployParamTabs()} - - {this.renderSpinner()} - - - - - - ); - } + constructor(props, context) { + super(props, context); + + this.handleSave = this.handleSave.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleChange = this.handleChange.bind(this); + this.refreshStatus = this.refreshStatus.bind(this); + this.renderDeployParam = this.renderDeployParam.bind(this); + this.renderSpinner = this.renderSpinner.bind(this); + + const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())); + this.state = { + loopCache: this.props.loopCache, + temporaryPropertiesJson: propertiesJson, + show: true, + key: this.getInitialKeyValue(propertiesJson) + }; + } + + getInitialKeyValue(temporaryPropertiesJson) { + const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"]; + return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0); + } + + componentWillReceiveProps(newProps) { + this.setState({ + loopName: newProps.loopCache.getLoopName(), + show: true + }); + } + + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } + + renderSpinner() { + if (this.state.deploying) { + return ( + + + Loading... + + + ); + } else { + return (
); + } + } + + handleSave() { + const loopName = this.props.loopCache.getLoopName(); + // save the global propserties + this.setState({ deploying: true }); + LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { + LoopActionService.performAction(loopName, "deploy").then(pars => { + this.props.showSucAlert("Action deploy successfully performed"); + // refresh status and update loop logs + this.refreshStatus(loopName); + }) + .catch(error => { + this.props.showFailAlert("Action deploy failed"); + // refresh status and update loop logs + this.refreshStatus(loopName); + }); + }); + } + + refreshStatus(loopName) { + LoopActionService.refreshStatus(loopName).then(data => { + this.props.updateLoopFunction(data); + this.setState({ show: false, deploying: false }); + this.props.history.push('/'); + }) + .catch(error => { + this.props.showFailAlert("Refresh status failed"); + this.setState({ show: false, deploying: false }); + this.props.history.push('/'); + }); + } + + handleChange(event) { + let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + deploymentParam[this.state.key][event.target.name] = event.target.value; + + this.setState({ temporaryPropertiesJson: { dcaeDeployParameters: deploymentParam } }); + } + + renderDeployParamTabs() { + if (typeof (this.state.temporaryPropertiesJson) === "undefined") { + return ""; + } + + const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + var indents = []; + Object.keys(deployJsonList).forEach(item => + indents.push( + { this.renderDeployParam(deployJsonList[item]) } + ) + ); + return indents; + } + + renderDeployParam(deployJson) { + var indents = []; + Object.keys(deployJson).forEach(item => + indents.push( + { item } + + )); + return indents; + } + + render() { + return ( + + + Deployment parameters + + this.setState({ key }) }> + { this.renderDeployParamTabs() } + + { this.renderSpinner() } + + + + + + ); + } } diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js index 84dbfd1f6..0c68f237c 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js +++ b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js @@ -28,85 +28,87 @@ import LoopActionService from '../../../api/LoopActionService'; import LoopService from '../../../api/LoopService'; describe('Verify DeployLoopModal', () => { - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "globalPropertiesJson": { - "dcaeDeployParameters": { - "testMs": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } - } - }); + const loopCache = new LoopCache({ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "globalPropertiesJson": { + "dcaeDeployParameters": { + "testMs": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + } + } + }); - it('Test the render method', () => { - const component = shallow( - - ) + it('Test the render method', () => { + const component = shallow( + + ) - expect(component).toMatchSnapshot(); - }); - - it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(DeployLoopModal.prototype,'handleClose'); - const component = shallow() + expect(component).toMatchSnapshot(); + }); - component.find('[variant="secondary"]').prop('onClick')(); + it('Test handleClose', () => { + const historyMock = { push: jest.fn() }; + const handleClose = jest.spyOn(DeployLoopModal.prototype, 'handleClose'); + const component = shallow() - expect(handleClose).toHaveBeenCalledTimes(1); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - }); + component.find('[variant="secondary"]').prop('onClick')(); - it('Test handleSave successful', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const updateLoopFunction = jest.fn(); - const showSucAlert = jest.fn(); - const showFailAlert = jest.fn(); - const handleSave = jest.spyOn(DeployLoopModal.prototype,'handleSave'); - LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - text: () => "OK" - }); - }); - LoopActionService.performAction = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => {} - }); - }); - LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => {} - }); - }); + expect(handleClose).toHaveBeenCalledTimes(1); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + }); - const component = shallow() + it('Test handleSave successful', async () => { + const flushPromises = () => new Promise(setImmediate); + const historyMock = { push: jest.fn() }; + const updateLoopFunction = jest.fn(); + const showSucAlert = jest.fn(); + const showFailAlert = jest.fn(); + const handleSave = jest.spyOn(DeployLoopModal.prototype, 'handleSave'); + LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { + return Promise.resolve({ + ok: true, + status: 200, + text: () => "OK" + }); + }); + LoopActionService.performAction = jest.fn().mockImplementation(() => { + return Promise.resolve({ + ok: true, + status: 200, + json: () => { + } + }); + }); + LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { + return Promise.resolve({ + ok: true, + status: 200, + json: () => { + } + }); + }); - component.find('[variant="primary"]').prop('onClick')(); - await flushPromises(); - component.update(); + const component = shallow() - expect(handleSave).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - handleSave.mockClear(); - }); + component.find('[variant="primary"]').prop('onClick')(); + await flushPromises(); + component.update(); - it('Onchange event', () => { - const event = { target: { name: "location_id", value: "testLocation"} }; - const component = shallow(); + expect(handleSave).toHaveBeenCalledTimes(1); + expect(component.state('show')).toEqual(false); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + handleSave.mockClear(); + }); - component.find('[name="location_id"]').simulate('change', event); - component.update(); - expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation"); - }); -}); \ No newline at end of file + it('Onchange event', () => { + const event = { target: { name: "location_id", value: "testLocation" } }; + const component = shallow(); + + component.find('[name="location_id"]').simulate('change', event); + component.update(); + expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation"); + }); +}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js index acd0acade..69177134b 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js +++ b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js @@ -28,91 +28,91 @@ import styled from 'styled-components'; import LoopService from '../../../api/LoopService'; const ModalStyled = styled(Modal)` - background-color: transparent; + background-color: transparent; ` export default class LoopPropertiesModal extends React.Component { - state = { - show: true, - loopCache: this.props.loopCache, - temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())) - }; + state = { + show: true, + loopCache: this.props.loopCache, + temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())) + }; - constructor(props, context) { - super(props, context); + constructor(props, context) { + super(props, context); - this.handleClose = this.handleClose.bind(this); - this.handleSave = this.handleSave.bind(this); - this.handleChange = this.handleChange.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleSave = this.handleSave.bind(this); + this.handleChange = this.handleChange.bind(this); - this.renderDcaeParameters = this.renderDcaeParameters.bind(this); - this.renderAllParameters = this.renderAllParameters.bind(this); - this.getDcaeParameters = this.getDcaeParameters.bind(this); - this.readOnly = props.readOnly !== undefined ? props.readOnly : false; - } + this.renderDcaeParameters = this.renderDcaeParameters.bind(this); + this.renderAllParameters = this.renderAllParameters.bind(this); + this.getDcaeParameters = this.getDcaeParameters.bind(this); + this.readOnly = props.readOnly !== undefined ? props.readOnly : false; + } - componentWillReceiveProps(newProps) { - this.setState({ - loopCache: newProps.loopCache, - temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())) - }); - } + componentWillReceiveProps(newProps) { + this.setState({ + loopCache: newProps.loopCache, + temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())) + }); + } - handleClose() { - this.props.history.push('/'); - } + handleClose() { + this.props.history.push('/'); + } - handleSave(event) { - LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => { - this.setState({ show: false }); - this.props.history.push('/'); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - }); - } + handleSave(event) { + LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => { + this.setState({ show: false }); + this.props.history.push('/'); + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + }); + } - handleChange(event) { - this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}}); - } + handleChange(event) { + this.setState({ temporaryPropertiesJson: { [event.target.name]: JSON.parse(event.target.value) } }); + } - renderAllParameters() { - return ( -
- {this.renderDcaeParameters()} -
- - ); - } + renderAllParameters() { + return ( +
+ { this.renderDcaeParameters() } +
+ + ); + } - getDcaeParameters() { - if (typeof (this.state.temporaryPropertiesJson) !== "undefined") { - return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]); - } else { - return ""; - } + getDcaeParameters() { + if (typeof (this.state.temporaryPropertiesJson) !== "undefined") { + return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]); + } else { + return ""; + } - } + } - renderDcaeParameters() { - return ( - - Deploy Parameters - - - ); - } + renderDcaeParameters() { + return ( + + Deploy Parameters + + + ); + } - render() { - return ( - - - Model Properties - - {this.renderAllParameters()} - - - - - - ); - } + render() { + return ( + + + Model Properties + + { this.renderAllParameters() } + + + + + + ); + } } diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js index 5bbefe228..a9c5903a4 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js +++ b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js @@ -27,82 +27,84 @@ import LoopCache from '../../../api/LoopCache'; import LoopService from '../../../api/LoopService'; describe('Verify LoopPropertiesModal', () => { - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "globalPropertiesJson": { - "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } - }); + const loopCache = new LoopCache({ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "globalPropertiesJson": { + "dcaeDeployParameters": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + } + }); - it('Test the render method', () => { - const component = shallow( - - ) - component.setState({ show: true, - temporaryPropertiesJson: { - "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } - }); + it('Test the render method', () => { + const component = shallow( + + ) + component.setState({ + show: true, + temporaryPropertiesJson: { + "dcaeDeployParameters": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + } + }); - expect(component.state('temporaryPropertiesJson')).toEqual({ - "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"} - }); - expect(component.state('show')).toEqual(true); + expect(component.state('temporaryPropertiesJson')).toEqual({ + "dcaeDeployParameters": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + }); + expect(component.state('show')).toEqual(true); - expect(component).toMatchSnapshot(); - }); + expect(component).toMatchSnapshot(); + }); - it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(LoopPropertiesModal.prototype,'handleClose'); - const component = shallow() + it('Test handleClose', () => { + const historyMock = { push: jest.fn() }; + const handleClose = jest.spyOn(LoopPropertiesModal.prototype, 'handleClose'); + const component = shallow() - component.find('[variant="secondary"]').prop('onClick')(); + component.find('[variant="secondary"]').prop('onClick')(); - expect(handleClose).toHaveBeenCalledTimes(1); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - }); + expect(handleClose).toHaveBeenCalledTimes(1); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + }); - it('Test handleSave successful', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const loadLoopFunction = jest.fn(); - const handleSave = jest.spyOn(LoopPropertiesModal.prototype,'handleSave'); - LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - text: () => "OK" - }); - }); + it('Test handleSave successful', async () => { + const flushPromises = () => new Promise(setImmediate); + const historyMock = { push: jest.fn() }; + const loadLoopFunction = jest.fn(); + const handleSave = jest.spyOn(LoopPropertiesModal.prototype, 'handleSave'); + LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { + return Promise.resolve({ + ok: true, + status: 200, + text: () => "OK" + }); + }); - const component = shallow() + const component = shallow() - component.find('[variant="primary"]').prop('onClick')(); - await flushPromises(); - component.update(); + component.find('[variant="primary"]').prop('onClick')(); + await flushPromises(); + component.update(); - expect(handleSave).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - }); + expect(handleSave).toHaveBeenCalledTimes(1); + expect(component.state('show')).toEqual(false); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + }); - it('Onchange event', () => { - const event = {target:{name:"dcaeDeployParameters", value:"{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}"}}; - const component = shallow(); + it('Onchange event', () => { + const event = { target: { name: "dcaeDeployParameters", value: "{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}" } }; + const component = shallow(); - component.find('FormControl').simulate('change', event); - component.update(); + component.find('FormControl').simulate('change', event); + component.update(); - expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation"); - }); + expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation"); + }); }); diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js index f6c0d2ede..0d203418b 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js +++ b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js @@ -40,208 +40,223 @@ import Tab from 'react-bootstrap/Tab'; import Alert from 'react-bootstrap/Alert'; const ModalStyled = styled(Modal)` - background-color: transparent; + background-color: transparent; ` const TextModal = styled.textarea` - margin-top: 20px; - white-space:pre; - background-color: ${props => props.theme.toscaTextareaBackgroundColor}; - text-align: justify; - font-size: ${props => props.theme.toscaTextareaFontSize}; - width: 100%; - height: 300px; + margin-top: 20px; + white-space: pre; + background-color: ${ props => props.theme.toscaTextareaBackgroundColor }; + text-align: justify; + font-size: ${ props => props.theme.toscaTextareaFontSize }; + width: 100%; + height: 300px; ` 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 ModifyLoopModal extends React.Component { - state = { - show: true, - loopCache: this.props.loopCache, - content: 'Please select Tosca model to view the details', - selectedRowData: {}, - toscaPolicyModelsData: [], - selectedPolicyModelsData: [], - key: 'add', - showFailAlert: false, - toscaColumns: [ - { title: "#", field: "index", render: rowData => rowData.tableData.id + 1, - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Policy Model Type", field: "policyModelType", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Policy Acronym", field: "policyAcronym", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Policy Name", field: "policyName", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Version", field: "version", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Uploaded By", field: "updatedBy", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Uploaded Date", field: "updatedDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { title: "Created Date", field: "createdDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - } - ], - tableIcons: { - FirstPage: forwardRef((props, ref) => ), - LastPage: forwardRef((props, ref) => ), - NextPage: forwardRef((props, ref) => ), - PreviousPage: forwardRef((props, ref) => ), - ResetSearch: forwardRef((props, ref) => ), - Search: forwardRef((props, ref) => ), - SortArrow: forwardRef((props, ref) => ) - } - }; + state = { + show: true, + loopCache: this.props.loopCache, + content: 'Please select Tosca model to view the details', + selectedRowData: {}, + toscaPolicyModelsData: [], + selectedPolicyModelsData: [], + key: 'add', + showFailAlert: false, + toscaColumns: [ + { + title: "#", field: "index", render: rowData => rowData.tableData.id + 1, + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Policy Model Type", field: "policyModelType", + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Policy Acronym", field: "policyAcronym", + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Policy Name", field: "policyName", + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Version", field: "version", + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Uploaded By", field: "updatedBy", + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Uploaded Date", field: "updatedDate", editable: 'never', + cellStyle: cellStyle, + headerStyle: headerStyle + }, + { + title: "Created Date", field: "createdDate", editable: 'never', + cellStyle: cellStyle, + headerStyle: headerStyle + } + ], + tableIcons: { + FirstPage: forwardRef((props, ref) => ), + LastPage: forwardRef((props, ref) => ), + NextPage: forwardRef((props, ref) => ), + PreviousPage: forwardRef((props, ref) => ), + ResetSearch: forwardRef((props, ref) => ), + Search: forwardRef((props, ref) => ), + SortArrow: forwardRef((props, ref) => ) + } + }; - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.bind(this); - this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this); - this.handleYamlContent = this.handleYamlContent.bind(this); - this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this); - this.handleAdd = this.handleAdd.bind(this); - this.handleRemove = this.handleRemove.bind(this); - this.initializeToscaPolicyModelsInfo(); - } + constructor(props, context) { + super(props, context); + this.handleClose = this.handleClose.bind(this); + this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this); + this.handleYamlContent = this.handleYamlContent.bind(this); + this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this); + this.handleAdd = this.handleAdd.bind(this); + this.handleRemove = this.handleRemove.bind(this); + this.initializeToscaPolicyModelsInfo(); + } - initializeToscaPolicyModelsInfo() { - var operationalPolicies = this.state.loopCache.getOperationalPolicies(); - var selectedPolicyModels = []; - for (var policy in operationalPolicies) { - var newRow = operationalPolicies[policy]["policyModel"]; - newRow["policyName"] = operationalPolicies[policy].name; - selectedPolicyModels.push(newRow); - } + initializeToscaPolicyModelsInfo() { + var operationalPolicies = this.state.loopCache.getOperationalPolicies(); + var selectedPolicyModels = []; + for (var policy in operationalPolicies) { + var newRow = operationalPolicies[policy]["policyModel"]; + newRow["policyName"] = operationalPolicies[policy].name; + selectedPolicyModels.push(newRow); + } - PolicyToscaService.getToscaPolicyModels().then(allToscaModels => { - this.setState({ toscaPolicyModelsData: allToscaModels, - selectedPolicyModelsData: selectedPolicyModels}); - }); - } + PolicyToscaService.getToscaPolicyModels().then(allToscaModels => { + this.setState({ + toscaPolicyModelsData: allToscaModels, + selectedPolicyModelsData: selectedPolicyModels + }); + }); + } - getToscaPolicyModelYaml(policyModelType, policyModelVersion) { - if (typeof policyModelType !== "undefined") { - PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => { - if (toscaYaml.length !== 0) { - this.setState({content: toscaYaml}) - } else { - this.setState({ content: 'No Tosca model Yaml available' }) - } - }); - } else { - this.setState({ content: 'Please select Tosca model to view the details' }) - } - } + getToscaPolicyModelYaml(policyModelType, policyModelVersion) { + if (typeof policyModelType !== "undefined") { + PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => { + if (toscaYaml.length !== 0) { + this.setState({ content: toscaYaml }) + } else { + this.setState({ content: 'No Tosca model Yaml available' }) + } + }); + } else { + this.setState({ content: 'Please select Tosca model to view the details' }) + } + } - handleYamlContent(event) { - this.setState({ content: event.target.value }); - } + handleYamlContent(event) { + this.setState({ content: event.target.value }); + } - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } - renderAlert() { - return ( -
- - {this.state.showMessage} - -
- ); - } + renderAlert() { + return ( +
+ + { this.state.showMessage } + +
+ ); + } - handleAdd() { - LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version) - .then(pars => { - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - this.handleClose(); - }) - .catch(error => { - this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message}); - }); - } + handleAdd() { + LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(), this.state.selectedRowData.policyModelType, this.state.selectedRowData.version) + .then(pars => { + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + this.handleClose(); + }) + .catch(error => { + this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message }); + }); + } - handleRemove() { - LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version,this.state.selectedRowData.policyName); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - this.handleClose(); - } + handleRemove() { + LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(), this.state.selectedRowData.policyModelType, this.state.selectedRowData.version, this.state.selectedRowData.policyName); + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + this.handleClose(); + } - render() { - return ( - - - Modify Loop Operational Policies - - this.setState({ key, selectedRowData: {} })}> - - - {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}} - options={{ - headerStyle: rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined - && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' - }) - }} - /> -
- -
- - {this.renderAlert()} - - - - {this.setState({selectedRowData: rowData})}} - options={{ - headerStyle: rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined - && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' - }) - }} - /> - - - - - - - - + render() { + return ( + + + Modify Loop Operational Policies + + this.setState({ key, selectedRowData: {} }) }> + + + { + this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version); + this.setState({ selectedRowData: rowData }) + } } + options={ { + headerStyle: rowHeaderStyle, + rowStyle: rowData => ({ + backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined + && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' + }) + } } + /> +
+ +
+ + { this.renderAlert() } + + + + { + this.setState({ selectedRowData: rowData }) + } } + options={ { + headerStyle: rowHeaderStyle, + rowStyle: rowData => ({ + backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined + && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' + }) + } } + /> + + + + + + + + - - ); - } + + ); + } } diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js index 055ad0e68..79267af4f 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js +++ b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js @@ -28,82 +28,82 @@ import LoopService from '../../../api/LoopService'; import PolicyToscaService from '../../../api/PolicyToscaService'; describe('Verify ModifyLoopModal', () => { - beforeEach(() => { - PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => { - return Promise.resolve([{ - "policyModelType":"test", - "policyAcronym":"test", - "version":"1.0.0", - "updatedBy":"", - "updatedDate":"" - }]); - }); - PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { - return Promise.resolve("OK"); - }); - }) + beforeEach(() => { + PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => { + return Promise.resolve([{ + "policyModelType": "test", + "policyAcronym": "test", + "version": "1.0.0", + "updatedBy": "", + "updatedDate": "" + }]); + }); + PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { + return Promise.resolve("OK"); + }); + }) - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "microServicePolicies": [{ - "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", - "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", - "properties": {"domain": "measurementsForVfScaling"}, - "shared": false, - "jsonRepresentation": {"schema": {}} - }], - "globalPropertiesJson": { - "dcaeDeployParameters": { - "testMs": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } + const loopCache = new LoopCache({ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "microServicePolicies": [{ + "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", + "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", + "properties": { "domain": "measurementsForVfScaling" }, + "shared": false, + "jsonRepresentation": { "schema": {} } + }], + "globalPropertiesJson": { + "dcaeDeployParameters": { + "testMs": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" } - }); - const historyMock = { push: jest.fn() }; - const flushPromises = () => new Promise(setImmediate); + } + } + }); + const historyMock = { push: jest.fn() }; + const flushPromises = () => new Promise(setImmediate); - it('Test handleClose', () => { - const handleClose = jest.spyOn(ModifyLoopModal.prototype,'handleClose'); - const component = mount() + it('Test handleClose', () => { + const handleClose = jest.spyOn(ModifyLoopModal.prototype, 'handleClose'); + const component = mount() - component.find('[variant="secondary"]').get(0).props.onClick(); + component.find('[variant="secondary"]').get(0).props.onClick(); - expect(handleClose).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - }); + expect(handleClose).toHaveBeenCalledTimes(1); + expect(component.state('show')).toEqual(false); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + }); - it('Test getToscaPolicyModelYaml', async () => { - const flushPromises = () => new Promise(setImmediate); - const component = mount() - component.setState({ - "selectedRowData": {"tableData":{"id":0}} - }); - const instance = component.instance(); + it('Test getToscaPolicyModelYaml', async () => { + const flushPromises = () => new Promise(setImmediate); + const component = mount() + component.setState({ + "selectedRowData": { "tableData": { "id": 0 } } + }); + const instance = component.instance(); - instance.getToscaPolicyModelYaml("","1.0.0"); - expect(component.state('content')).toEqual("Please select Tosca model to view the details"); + instance.getToscaPolicyModelYaml("", "1.0.0"); + expect(component.state('content')).toEqual("Please select Tosca model to view the details"); - instance.getToscaPolicyModelYaml("test","1.0.0"); - await flushPromises(); - expect(component.state('content')).toEqual("OK"); + instance.getToscaPolicyModelYaml("test", "1.0.0"); + await flushPromises(); + expect(component.state('content')).toEqual("OK"); - PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { - return Promise.resolve(""); - }); - instance.getToscaPolicyModelYaml("test","1.0.0"); - await flushPromises(); - expect(component.state('content')).toEqual("No Tosca model Yaml available"); + PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { + return Promise.resolve(""); }); + instance.getToscaPolicyModelYaml("test", "1.0.0"); + await flushPromises(); + expect(component.state('content')).toEqual("No Tosca model Yaml available"); + }); - it('Test handleYamlContent', async () => { - const component = mount() - const instance = component.instance(); + it('Test handleYamlContent', async () => { + const component = mount() + const instance = component.instance(); - const event = {"target":{"value":"testValue"}} - instance.handleYamlContent(event); - expect(component.state('content')).toEqual("testValue"); - }); -}); \ No newline at end of file + const event = { "target": { "value": "testValue" } } + instance.handleYamlContent(event); + expect(component.state('content')).toEqual("testValue"); + }); +}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js index b45df6502..b6407fbbb 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js +++ b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js @@ -34,104 +34,106 @@ import SvgGenerator from '../../loop_viewer/svg/SvgGenerator'; import LoopCache from '../../../api/LoopCache'; const ModalStyled = styled(Modal)` - background-color: transparent; + background-color: transparent; ` const CheckBoxStyled = styled(FormCheck.Input)` - margin-left:3rem; + margin-left: 3rem; ` export default class OpenLoopModal extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props, context) { + super(props, context); - this.getLoopNames = this.getLoopNames.bind(this); - this.handleOpen = this.handleOpen.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleDropDownListChange = this.handleDropDownListChange.bind(this); - this.renderSvg = this.renderSvg.bind(this); - this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true; - this.state = { - show: true, - chosenLoopName: '', - loopNames: [], - loopCacheOpened: new LoopCache({}) - }; - } + this.getLoopNames = this.getLoopNames.bind(this); + this.handleOpen = this.handleOpen.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleDropDownListChange = this.handleDropDownListChange.bind(this); + this.renderSvg = this.renderSvg.bind(this); + this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true; + this.state = { + show: true, + chosenLoopName: '', + loopNames: [], + loopCacheOpened: new LoopCache({}) + }; + } - componentWillMount() { - this.getLoopNames(); - } + componentWillMount() { + this.getLoopNames(); + } - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } - handleDropDownListChange(e) { - LoopService.getLoop(e.value).then(loop => { - this.setState({ - chosenLoopName: e.value, - loopCacheOpened: new LoopCache(loop) - }); - }); - } + handleDropDownListChange(e) { + LoopService.getLoop(e.value).then(loop => { + this.setState({ + chosenLoopName: e.value, + loopCacheOpened: new LoopCache(loop) + }); + }); + } - getLoopNames() { - LoopService.getLoopNames().then(loopNames => { - if (Object.entries(loopNames).length !== 0) { - const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } }); - this.setState({ loopNames: loopOptions }) - } - }); - } + getLoopNames() { + LoopService.getLoopNames().then(loopNames => { + if (Object.entries(loopNames).length !== 0) { + const loopOptions = loopNames.filter(loopName => loopName !== 'undefined').map((loopName) => { + return { label: loopName, value: loopName } + }); + this.setState({ loopNames: loopOptions }) + } + }); + } - handleOpen() { - console.info("Loop " + this.state.chosenLoopName + " is chosen"); - this.handleClose(); - this.props.loadLoopFunction(this.state.chosenLoopName); - } + handleOpen() { + console.info("Loop " + this.state.chosenLoopName + " is chosen"); + this.handleClose(); + this.props.loadLoopFunction(this.state.chosenLoopName); + } - renderSvg() { - return( - - ); - } + renderSvg() { + return ( + + ); + } - render() { - return ( - - - Open Model - - - - Model Name: - - + + + + Model Preview: + + { this.renderSvg() } + + + { this.showReadOnly === true ? + + + Read Only Mode: + + + + : null } + + + + + + - ); - } + ); + } } diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js index 1865869df..6b2dc4afb 100644 --- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js +++ b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js @@ -28,15 +28,15 @@ import LoopService from '../../../api/LoopService'; describe('Verify OpenLoopModal', () => { beforeEach(() => { - fetch.resetMocks(); - fetch.mockResponse(JSON.stringify([ - "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca", - "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3", - "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2" - ])); + fetch.resetMocks(); + fetch.mockResponse(JSON.stringify([ + "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca", + "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3", + "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2" + ])); }); - it('Test the render method', () => { + it('Test the render method', () => { const component = shallow(); expect(component).toMatchSnapshot(); @@ -45,13 +45,14 @@ describe('Verify OpenLoopModal', () => { it('Onchange event', async () => { const flushPromises = () => new Promise(setImmediate); LoopService.getLoop = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => {} - }); - }); - const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'}; + return Promise.resolve({ + ok: true, + status: 200, + json: () => { + } + }); + }); + const event = { value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3' }; const component = shallow(); component.find('StateManager').simulate('change', event); await flushPromises(); @@ -61,30 +62,30 @@ describe('Verify OpenLoopModal', () => { it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose'); - const component = shallow() + const historyMock = { push: jest.fn() }; + const handleClose = jest.spyOn(OpenLoopModal.prototype, 'handleClose'); + const component = shallow() component.find('[variant="secondary"]').prop('onClick')(); expect(handleClose).toHaveBeenCalledTimes(1); expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - + expect(historyMock.push.mock.calls[0]).toEqual(['/']); + handleClose.mockClear(); }); - it('Test handleSubmit', () => { + it('Test handleSubmit', () => { const historyMock = { push: jest.fn() }; - const loadLoopFunction = jest.fn(); - const handleOpen = jest.spyOn(OpenLoopModal.prototype,'handleOpen'); - const component = shallow() + const loadLoopFunction = jest.fn(); + const handleOpen = jest.spyOn(OpenLoopModal.prototype, 'handleOpen'); + const component = shallow() component.find('[variant="primary"]').prop('onClick')(); expect(handleOpen).toHaveBeenCalledTimes(1); expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual([ '/']); + expect(historyMock.push.mock.calls[0]).toEqual(['/']); handleOpen.mockClear(); }); -- cgit 1.2.3-korg