From 083e5a2aefd76bb1fc25bcb5528b7288b059c1c2 Mon Sep 17 00:00:00 2001 From: Ted Humphrey Date: Wed, 8 Jul 2020 16:48:40 -0400 Subject: [PATCH] block re-use of existing loop name; support derivation of SvgGenerator added changes to LoopUI for global style and support of "delete" CL case Issue-ID: CLAMP-896 Change-Id: I97f603f38c277011835b8e206e5e05226a296606 Signed-off-by: Ted Humphrey --- ui-react/src/LoopUI.js | 34 ++++++++++++-- ui-react/src/api/TemplateService.js | 17 +++++++ .../src/components/dialogs/Loop/CreateLoopModal.js | 54 ++++++++++++++++++---- .../dialogs/Loop/CreateLoopModal.test.js | 31 ++++++++----- .../src/components/dialogs/Loop/OpenLoopModal.js | 11 ++++- .../__snapshots__/CreateLoopModal.test.js.snap | 25 ++++++++++ .../dialogs/Tosca/ViewLoopTemplatesModal.js | 9 +++- .../src/components/loop_viewer/svg/SvgGenerator.js | 10 ++-- 8 files changed, 160 insertions(+), 31 deletions(-) diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 0ee6e6e2..5491ab18 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -130,6 +130,8 @@ export default class LoopUI extends React.Component { this.setBusyLoading = this.setBusyLoading.bind(this); this.clearBusyLoading = this.clearBusyLoading.bind(this); this.isBusyLoading = this.isBusyLoading.bind(this); + this.renderGlobalStyle = this.renderGlobalStyle.bind(this); + this.renderSvg = this.renderSvg.bind(this); } componentWillMount() { @@ -198,10 +200,15 @@ export default class LoopUI extends React.Component { ); } + renderSvg() { + return ( + + ) + } renderLoopViewBody() { return ( - + {this.renderSvg()} @@ -223,10 +230,20 @@ export default class LoopUI extends React.Component { } updateLoopCache(loopJson) { - this.setState({ loopCache: new LoopCache(loopJson) }); - this.setState({ loopName: this.state.loopCache.getLoopName() }); + + // If call with an empty object for loopJson, this is a reset to empty + // from someplace like PerformActions for the case where we are "deleting" + // a Control Loop model. Set the loopName to the default. + + if (loopJson === null) { + this.setState({ loopName: OnapConstants.defaultLoopName }); + this.setState({ loopCache: new LoopCache({}) }); + } else { + this.setState({ loopCache: new LoopCache(loopJson) }); + this.setState({ loopName: this.state.loopCache.getLoopName() }); + } console.info(this.state.loopName+" loop loaded successfully"); - } + } showSucAlert(message) { this.setState ({ showSucAlert: true, showMessage:message }); @@ -369,6 +386,13 @@ export default class LoopUI extends React.Component { ); } + renderGlobalStyle() { + return ( + + ); + }; + + renderSpinner() { if (this.isBusyLoading()) { return ( @@ -386,7 +410,7 @@ export default class LoopUI extends React.Component { render() { return ( - + {this.renderGlobalStyle()} {this.renderRoutes()} {this.renderSpinner()} {this.renderAlertBar()} diff --git a/ui-react/src/api/TemplateService.js b/ui-react/src/api/TemplateService.js index 3a780dd6..7d8a3400 100644 --- a/ui-react/src/api/TemplateService.js +++ b/ui-react/src/api/TemplateService.js @@ -22,6 +22,23 @@ export default class TemplateService { + static getLoopNames() { + return fetch('/restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' }) + .then(function (response) { + console.debug("getLoopNames response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getLoopNames query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getLoopNames error received", error); + return {}; + }); + } + static getAllLoopTemplates() { return fetch('restservices/clds/v2/templates', { method: 'GET', credentials: 'same-origin', }) .then(function (response) { diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index a8e8dee1..5663360a 100644 --- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js @@ -37,6 +37,10 @@ const ModalStyled = styled(Modal)` background-color: transparent; ` +const ErrMsgStyled = styled.div` + color: red; +` + export default class CreateLoopModal extends React.Component { constructor(props, context) { super(props, context); @@ -46,17 +50,20 @@ export default class CreateLoopModal extends React.Component { 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({}) }; } - componentWillMount() { - this.getAllLoopTemplates(); + async componentDidMount() { + await this.getAllLoopTemplates(); + await this.getModelNames(); } handleClose() { @@ -87,6 +94,17 @@ export default class CreateLoopModal extends React.Component { }); } + 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"); @@ -109,10 +127,25 @@ export default class CreateLoopModal extends React.Component { }); } - handleModelName = event => { - this.setState({ - 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 ( + + ); } render() { @@ -131,15 +164,20 @@ export default class CreateLoopModal extends React.Component { Model Preview: - + {this.renderSvg()} Model Name: - + + + + + {this.state.modelInputErrMsg} diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js index 5b6ea9e6..1caa22dc 100644 --- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js +++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js @@ -29,16 +29,18 @@ import TemplateService from '../../../api/TemplateService'; describe('Verify CreateLoopModal', () => { it('Test the render method', async () => { - const flushPromises = () => new Promise(setImmediate); + const flushPromises = () => new Promise(setImmediate); TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { - return Promise.resolve([{"name":"template1"},{"name":"template2"}]); - }); - - const component = shallow(); + return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + }); + TemplateService.getLoopNames = jest.fn().mockImplementation(() => { + return Promise.resolve([]); + }); + + const component = shallow(); expect(component).toMatchSnapshot(); - await flushPromises(); - component.update(); - + await flushPromises(); + component.update(); expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]); }); @@ -61,17 +63,22 @@ describe('Verify CreateLoopModal', () => { expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop"); }); - - - it('handleModelName event', () => { + it('handleModelName event', async () => { + const flushPromises = () => new Promise(setImmediate); + TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { + return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + }); + TemplateService.getLoopNames = jest.fn().mockImplementation(() => { + return Promise.resolve([]); + }); const event = {target: {value : "model1"} }; const component = shallow(); + await flushPromises(); component.find('input').simulate('change', event); component.update(); expect(component.state('modelName')).toEqual("model1"); }); - it('Test handleClose', () => { const historyMock = { push: jest.fn() }; const handleClose = jest.spyOn(CreateLoopModal.prototype,'handleClose'); diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js index 7ca90b49..b45df650 100644 --- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js @@ -48,7 +48,8 @@ export default class OpenLoopModal extends React.Component { this.handleOpen = this.handleOpen.bind(this); this.handleClose = this.handleClose.bind(this); this.handleDropDownListChange = this.handleDropDownListChange.bind(this); - this.showReadOnly = props.showReadOnly ? props.showReadOnly : true; + this.renderSvg = this.renderSvg.bind(this); + this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true; this.state = { show: true, chosenLoopName: '', @@ -90,6 +91,12 @@ export default class OpenLoopModal extends React.Component { this.props.loadLoopFunction(this.state.chosenLoopName); } + renderSvg() { + return( + + ); + } + render() { return ( @@ -107,7 +114,7 @@ export default class OpenLoopModal extends React.Component { Model Preview: - + {this.renderSvg()} {this.showReadOnly === true ? diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap index e69b809c..b0578164 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap @@ -107,6 +107,7 @@ exports[`Verify CreateLoopModal Test the render method 1`] = ` + + + + + + + diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js index 962ab4bd..10473944 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js @@ -92,6 +92,7 @@ export default class ViewLoopTemplatesModal extends React.Component { 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(); } @@ -120,6 +121,12 @@ export default class ViewLoopTemplatesModal extends React.Component { this.props.history.push('/') } + renderSvg() { + return( + + ) + } + render() { return ( @@ -139,7 +146,7 @@ export default class ViewLoopTemplatesModal extends React.Component { }) }} /> - + {this.renderSvg()} diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js index 7070455e..f5f5047b 100644 --- a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js +++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js @@ -28,11 +28,12 @@ import OnapConstant from '../../../utils/OnapConstants'; const DivStyled = styled.div` overflow-x: scroll; + display: flex; width: 100%; height: 100%; ` -const emptySvg = ( No LOOP (SVG) ); +const emptySvg = ( No LOOP (SVG) ); class SvgGenerator extends React.Component { boxWidth = 200; @@ -228,11 +229,14 @@ class SvgGenerator extends React.Component { render() { var allTheElements = this.renderSvg(); var svgWidth = this.boxWidth*allTheElements.length; - var svgHeight = this.boxHeight+100; + var svgHeight = this.boxHeight+50; return ( + - + + {allTheElements} + ); -- 2.16.6