change -1 to No Limit in View All Templates for # Instances Allowed

[clamp.git] / ui-react / src / components / dialogs / Tosca / ViewLoopTemplatesModal.js

diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 89e5697..eb6e70f 100644 (file)
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -34,29 +34,24 @@ import FirstPage from '@material-ui/icons/FirstPage';
 import LastPage from '@material-ui/icons/LastPage';
 import Search from '@material-ui/icons/Search';
 import MaterialTable from "material-table";
+import LoopCache from '../../../api/LoopCache';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 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 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: [],
+               loopTemplatesData: [],
+               fakeLoopCacheWithTemplate: new LoopCache({}),
                loopTemplateColumnsDefinition: [
                        { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
                                cellStyle: cellStyle,
@@ -97,54 +92,71 @@ 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.getBlueprintMicroServiceTemplates();
+               this.renderSvg = this.renderSvg.bind(this);
+               this.getLoopTemplate = this.getLoopTemplate.bind(this);
+               this.getAllLoopTemplates();
        }
 
-       getBlueprintMicroServiceTemplates() {
-               TemplateService.getBlueprintMicroServiceTemplates().then(loopTemplateData => {
-               this.setState({ loopTemplateData: loopTemplateData })
+       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 })
                });
        }
 
-       handleYamlContent = event => {
-               this.setState({
-                       content: event.target.value
-               });
-       }
+       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('/')
        }
 
+       renderSvg() {
+               return(
+                       <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
+               )
+       }
+
        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} 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.setState({content: rowData.name, selectedRow: rowData.tableData.id})}}
+                             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'
-            })
-          }}
-          />
-          <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'
+                          })
+                      }}
+                />
+                   {this.renderSvg()}
+                </Modal.Body>
+                <Modal.Footer>
+                       <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+               </Modal.Footer>
       </ModalStyled>
       );
     }