aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src
diff options
context:
space:
mode:
authorjingjincs <jinjingcs@gmail.com>2020-03-04 09:11:10 +0100
committerxuegao <xg353y@intl.att.com>2020-04-01 09:47:58 +0200
commit3173d554371bae1eefafc69b2bc9da5543510dd5 (patch)
tree94c862eb0e3b19d884d31c8824c7544bc75322ac /ui-react/src
parentfe947238182cc1f0c962dc21938325a50a741c10 (diff)
Update template menu UI
Modify View Templates Menu to adopt changes from get template CL API Issue-ID: CLAMP-589 Change-Id: I54d059620e91d0da70e85c62dbb932ee58dd99ab Signed-off-by: xuegao <xg353y@intl.att.com>
Diffstat (limited to 'ui-react/src')
-rw-r--r--ui-react/src/api/TemplateService.js17
-rw-r--r--ui-react/src/components/dialogs/Loop/CreateLoopModal.js32
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.js29
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js6
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap14
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js87
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js26
-rw-r--r--ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap12
8 files changed, 143 insertions, 80 deletions
diff --git a/ui-react/src/api/TemplateService.js b/ui-react/src/api/TemplateService.js
index 124d29c27..615a87e96 100644
--- a/ui-react/src/api/TemplateService.js
+++ b/ui-react/src/api/TemplateService.js
@@ -54,6 +54,23 @@ export default class TemplateService {
return {};
});
}
+
+ static getBlueprintMicroServiceTemplate(templateName) {
+ return fetch('/restservices/clds/v2/templates/' + templateName + ' /svgRepresentation', { method: 'GET', credentials: 'same-origin', })
+ .then(function (response) {
+ console.debug("getBlueprintMicroServiceTemplate response received: ", response.status);
+ if (response.ok) {
+ return response.text();
+ } else {
+ console.error("getBlueprintMicroServiceTemplates query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("getBlueprintMicroServiceTemplate error received", error);
+ return {};
+ });
+ }
static getDictionary() {
return fetch('restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', })
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index d6c5e3579..e38207792 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -34,6 +34,14 @@ import TemplateService from '../../../api/TemplateService';
const ModalStyled = styled(Modal)`
background-color: transparent;
`
+const LoopViewSvgDivStyled = styled.div`
+ overflow: hidden;
+ background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+ border-color: ${props => (props.theme.loopViewerHeaderColor)};
+ margin-left: auto;
+ margin-right:auto;
+ text-align: center;
+`
export default class CreateLoopModal extends React.Component {
constructor(props, context) {
@@ -46,6 +54,7 @@ export default class CreateLoopModal extends React.Component {
this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
this.state = {
show: true,
+ content: '',
chosenTemplateName: '',
modelName: '',
templateNames: []
@@ -63,6 +72,13 @@ export default class CreateLoopModal extends React.Component {
handleDropdownListChange(e) {
this.setState({ chosenTemplateName: e.value });
+ TemplateService.getBlueprintMicroServiceTemplates(e.value).then(svgXml => {
+ if (svgXml.length !== 0) {
+ this.setState({ content: svgXml })
+ } else {
+ this.setState({ content: 'Error1' })
+ }
+ })
}
getTemplateNames() {
@@ -77,7 +93,7 @@ export default class CreateLoopModal extends React.Component {
alert("A model name is required");
return;
}
- console.info("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
+ 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);
@@ -92,18 +108,17 @@ export default class CreateLoopModal extends React.Component {
.catch(error => {
console.debug("Create Loop failed");
});
-
}
handleModelName = event => {
- this.setState({
- modelName: event.target.value
- })
+ this.setState({
+ modelName: event.target.value
+ })
}
render() {
return (
- <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Create Model</Modal.Title>
</Modal.Header>
@@ -115,6 +130,10 @@ export default class CreateLoopModal extends React.Component {
</Col>
</Form.Group>
<Form.Group controlId="formPlaintextEmail">
+ <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
+ </LoopViewSvgDivStyled>
+ </Form.Group>
+ <Form.Group controlId="formPlaintextEmail">
<Form.Label column sm="2">Model Name:</Form.Label>
<input type="text" style={{width: '50%'}}
value={this.state.modelName}
@@ -127,7 +146,6 @@ export default class CreateLoopModal extends React.Component {
<Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button>
</Modal.Footer>
</ModalStyled>
-
);
}
} \ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index 4e8d97820..7c98fab4d 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -37,6 +37,14 @@ const ModalStyled = styled(Modal)`
const CheckBoxStyled = styled(FormCheck.Input)`
margin-left:3rem;
`
+const LoopViewSvgDivStyled = styled.div`
+ overflow: hidden;
+ background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+ border-color: ${props => (props.theme.loopViewerHeaderColor)};
+ margin-left: auto;
+ margin-right:auto;
+ text-align: center;
+`
export default class OpenLoopModal extends React.Component {
constructor(props, context) {
@@ -49,7 +57,8 @@ export default class OpenLoopModal extends React.Component {
this.state = {
show: true,
chosenLoopName: '',
- loopNames: []
+ loopNames: [],
+ content:''
};
}
@@ -64,6 +73,13 @@ export default class OpenLoopModal extends React.Component {
handleDropdownListChange(e) {
this.setState({ chosenLoopName: e.value });
+ LoopService.getSvg(e.value).then(svgXml => {
+ if (svgXml.length !== 0) {
+ this.setState({ content: svgXml })
+ } else {
+ this.setState({ content: 'Error1' })
+ }
+ });
}
getLoopNames() {
@@ -71,7 +87,9 @@ export default class OpenLoopModal extends React.Component {
if (Object.entries(loopNames).length !== 0) {
const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
this.setState({ loopNames: loopOptions })
+
}
+
});
}
@@ -83,7 +101,7 @@ export default class OpenLoopModal extends React.Component {
render() {
return (
- <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Open Model</Modal.Title>
</Modal.Header>
@@ -91,9 +109,14 @@ export default class OpenLoopModal extends React.Component {
<Form.Group as={Row} controlId="formPlaintextEmail">
<Form.Label column sm="2">Model Name</Form.Label>
<Col sm="10">
- <Select onChange={this.handleDropdownListChange} options={this.state.loopNames} />
+ <Select onChange={this.handleDropdownListChange}
+ options={this.state.loopNames} />
</Col>
</Form.Group>
+ <Form.Group controlId="formPlaintextEmail">
+ <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
+ </LoopViewSvgDivStyled>
+ </Form.Group>
<Form.Group controlId="formBasicChecbox">
<Form.Check>
<FormCheck.Label>Read Only</FormCheck.Label>
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
index 208c947c3..f362cfaa6 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -28,12 +28,12 @@ describe('Verify OpenLoopModal', () => {
beforeEach(() => {
fetch.resetMocks();
- fetch.mockResponseOnce(JSON.stringify([
+ 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', () => {
@@ -44,12 +44,12 @@ describe('Verify OpenLoopModal', () => {
it('Onchange event', () => {
const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'};
const component = shallow(<OpenLoopModal/>);
-
component.find('StateManager').simulate('change', event);
component.update();
expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3");
});
+
it('Test handleClose', () => {
const historyMock = { push: jest.fn() };
const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose');
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 9e7222415..1aa0b5ae9 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -4,7 +4,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
<Styled(Bootstrap(Modal))
onHide={[Function]}
show={true}
- size="lg"
+ size="xl"
>
<ModalHeader
closeButton={true}
@@ -47,6 +47,18 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
</Col>
</FormGroup>
<FormGroup
+ controlId="formPlaintextEmail"
+ >
+ <styled.div
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "",
+ }
+ }
+ value=""
+ />
+ </FormGroup>
+ <FormGroup
controlId="formBasicChecbox"
>
<FormCheck
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 89e5697c9..18c444046 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -38,22 +38,26 @@ import MaterialTable from "material-table";
const ModalStyled = styled(Modal)`
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;
+const LoopViewSvgDivStyled = styled.div`
+ overflow: hidden;
+ background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+ border-color: ${props => (props.theme.loopViewerHeaderColor)};
+ margin-left: auto;
+ margin-right:auto;
+ text-align: center;
+ margin-top: 20px;
`
+const SvgContainerDivStyled = styled.div`
+ border: 1px solid;
+`
+
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'};
export default class ViewLoopTemplatesModal extends React.Component {
state = {
- show: true,
+ show: true,
content: 'Please select a loop template to display it',
selectedRow: -1,
loopTemplateData: [],
@@ -97,8 +101,7 @@ export default class ViewLoopTemplatesModal extends React.Component {
constructor(props, context) {
super(props, context);
this.handleClose = this.handleClose.bind(this);
- this.getBlueprintMicroServiceTemplates = this.getBlueprintMicroServiceTemplates.bind(this);
- this.handleYamlContent = this.handleYamlContent.bind(this);
+ this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this);
this.getBlueprintMicroServiceTemplates();
}
@@ -108,11 +111,20 @@ export default class ViewLoopTemplatesModal extends React.Component {
});
}
- handleYamlContent = event => {
- this.setState({
- content: event.target.value
- });
- }
+ getBlueprintMicroServiceTemplate(templateName) {
+ if (typeof templateName !== "undefined") {
+ TemplateService.getBlueprintMicroServiceTemplate(templateName).then(svgXml => {
+ if (svgXml.length !== 0) {
+ this.setState({ content: svgXml })
+ } else {
+ this.setState({ content: 'Please select a loop template to view the details' })
+
+ }
+ });
+ } else {
+ this.setState({ content: 'Please select a loop template to view the details' })
+ }
+ }
handleClose() {
this.setState({ show: false });
@@ -121,30 +133,31 @@ export default class ViewLoopTemplatesModal extends React.Component {
render() {
return (
- <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
- <Modal.Header closeButton>
- </Modal.Header>
- <Modal.Body>
- <MaterialTable
- title={"View Blueprint MicroService Templates"}
- data={this.state.loopTemplateData}
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+ <Modal.Header closeButton>
+ </Modal.Header>
+ <Modal.Body>
+ <MaterialTable
+ title={"View Blueprint MicroService Templates"}
+ data={this.state.loopTemplateData}
columns={this.state.loopTemplateColumnsDefinition}
icons={this.state.tableIcons}
- onRowClick={(event, rowData) => {this.setState({content: rowData.name, selectedRow: rowData.tableData.id})}}
+ onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}}
options={{
- headerStyle:rowHeaderStyle,
- rowStyle: rowData => ({
- backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
- })
- }}
- />
- <div>
- <TextModal value={this.state.content} onChange={this.handleYamlContent} />
- </div>
- </Modal.Body>
- <Modal.Footer>
- <Button variant="secondary" onClick={this.handleClose}>Close</Button>
- </Modal.Footer>
+ headerStyle:rowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ })
+ }}
+ />
+ <SvgContainerDivStyled>
+ <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
+ </LoopViewSvgDivStyled>
+ </SvgContainerDivStyled>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+ </Modal.Footer>
</ModalStyled>
);
}
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 94d4acdc8..ddfb2a70c 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -28,8 +28,7 @@ import { mount } from 'enzyme';
describe('Verify ViewLoopTemplatesModal', () => {
beforeEach(() => {
fetch.resetMocks();
- }
- );
+ });
it('Test API Successful', () => {
fetch.mockImplementationOnce(() => {
@@ -133,29 +132,6 @@ describe('Verify ViewLoopTemplatesModal', () => {
const component = mount(<ViewLoopTemplatesModal/>);
expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
});
-
- it('Test handleYamlContent', () => {
- 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 yamlContent = 'MTCA version 1';
- const component = shallow(<ViewLoopTemplatesModal/>);
- component.find('[value="Please select a loop template to display it"]').prop('onChange')({ target: { value: yamlContent }});
- expect(component.state('content')).toEqual(yamlContent);
- });
it('Test handleClose', () => {
fetch.mockImplementationOnce(() => {
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index efec96e94..253820f86 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -140,12 +140,16 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
}
title="View Blueprint MicroService Templates"
/>
- <div>
- <styled.textarea
- onChange={[Function]}
+ <styled.div>
+ <styled.div
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "Please select a loop template to display it",
+ }
+ }
value="Please select a loop template to display it"
/>
- </div>
+ </styled.div>
</ModalBody>
<ModalFooter>
<Button