ui-react/src/components/dialogs/Loop/ModifyLoopModal.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2020 AT&T Intellectual Property. All rights
   6  *                             reserved.
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END============================================
  20  * ===================================================================
  21  *
  22  */
  23
  24 import React, { forwardRef } from 'react'
  25 import MaterialTable from "material-table";
  26 import Button from 'react-bootstrap/Button';
  27 import Modal from 'react-bootstrap/Modal';
  28 import styled from 'styled-components';
  29 import PolicyToscaService from '../../../api/PolicyToscaService';
  30 import ArrowUpward from '@material-ui/icons/ArrowUpward';
  31 import ChevronLeft from '@material-ui/icons/ChevronLeft';
  32 import ChevronRight from '@material-ui/icons/ChevronRight';
  33 import Clear from '@material-ui/icons/Clear';
  34 import FirstPage from '@material-ui/icons/FirstPage';
  35 import LastPage from '@material-ui/icons/LastPage';
  36 import Search from '@material-ui/icons/Search';
  37 import LoopService from '../../../api/LoopService';
  38
  39
  40 const ModalStyled = styled(Modal)`
  41         background-color: transparent;
  42 `
  43 const TextModal = styled.textarea`
  44         margin-top: 20px;
  45         white-space:pre;
  46         background-color: ${props => props.theme.toscaTextareaBackgroundColor};
  47         text-align: justify;
  48         font-size: ${props => props.theme.toscaTextareaFontSize};
  49         width: 100%;
  50         height: 300px;
  51 `
  52 const cellStyle = { border: '1px solid black' };
  53 const headerStyle = { backgroundColor: '#ddd',  border: '2px solid black'       };
  54 const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
  55
  56 export default class ModifyLoopModal extends React.Component {
  57
  58         state = {
  59                 show: true,
  60                 loopCache: this.props.loopCache,
  61                 content: 'Please select Tosca model to view the details',
  62                 selectedRowData: {},
  63                 toscaPolicyModelsData: [],
  64                 toscaColumns: [
  65                         { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
  66                                 cellStyle: cellStyle,
  67                                 headerStyle: headerStyle
  68                         },
  69                         { title: "Policy Model Type", field: "policyModelType",
  70                                 cellStyle: cellStyle,
  71                                 headerStyle: headerStyle
  72                         },
  73                         { title: "Policy Acronym", field: "policyAcronym",
  74                                 cellStyle: cellStyle,
  75                                 headerStyle: headerStyle
  76                         },
  77                         { title: "Version", field: "version",
  78                                 cellStyle: cellStyle,
  79                                 headerStyle: headerStyle
  80                         },
  81                         { title: "Uploaded By", field: "updatedBy",
  82                                 cellStyle: cellStyle,
  83                                 headerStyle: headerStyle
  84                         },
  85                         { title: "Uploaded Date", field: "updatedDate", editable: 'never',
  86                                 cellStyle: cellStyle,
  87                                 headerStyle: headerStyle
  88                         },
  89              { title: "Add", field: "updatedDate", editable: 'never',
  90                 cellStyle: cellStyle,
  91                 headerStyle: headerStyle
  92              }
  93                 ],
  94                 tableIcons: {
  95                     FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  96                     LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  97                     NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  98                     PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  99                     ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
 100                     Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
 101                     SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
 102                 }
 103         };
 104
 105         constructor(props, context) {
 106                 super(props, context);
 107                 this.handleClose = this.handleClose.bind(this);
 108                 this.getPolicyToscaModels = this.getToscaPolicyModels.bind(this);
 109                 this.handleYamlContent = this.handleYamlContent.bind(this);
 110                 this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
 111                 this.handleAdd = this.handleAdd.bind(this);
 112                 this.getToscaPolicyModels();
 113         }
 114
 115         componentWillReceiveProps(newProps) {
 116                 this.setState({
 117                         loopCache: newProps.loopCache,
 118                         temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
 119                 });
 120         }
 121
 122         getToscaPolicyModels() {
 123             PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
 124                         this.setState({ toscaPolicyModelsData: allToscaModels});
 125                 });
 126         }
 127
 128         getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
 129                 if (typeof policyModelType !== "undefined") {
 130                         PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
 131                                 if (toscaYaml.length !== 0) {
 132                                         this.setState({content: toscaYaml})
 133                                 } else {
 134                                         this.setState({ content: 'No Tosca model Yaml available' })
 135                                 }
 136                         });
 137                 } else {
 138                         this.setState({ content: 'Please select Tosca model to view the details' })
 139                 }
 140         }
 141
 142         handleYamlContent(event) {
 143                 this.setState({ content: event.target.value });
 144         }
 145
 146         handleClose() {
 147                 this.setState({ show: false });
 148                 this.props.history.push('/');
 149         }
 150
 151         handleAdd() {
 152         LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version);
 153         this.handleClose();
 154         this.props.loadLoopFunction(this.state.loopCache.getLoopName());
 155         }
 156
 157         render() {
 158                 return (
 159                         <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
 160                                 <Modal.Header closeButton>
 161                                 </Modal.Header>
 162                                 <Modal.Body>
 163                                         <MaterialTable
 164                                         title={"View Tosca Policy Models"}
 165                                         data={this.state.toscaPolicyModelsData}
 166                                         columns={this.state.toscaColumns}
 167                                         icons={this.state.tableIcons}
 168                                         onRowClick={(event, rowData) => {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}}
 169                                         options={{
 170                                                 headerStyle: rowHeaderStyle,
 171                                                 rowStyle: rowData => ({
 172                                                         backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
 173                                                 })
 174                                         }}
 175                                         />
 176                                         <div>
 177                                                 <TextModal value={this.state.content} onChange={this.handleYamlContent}/>
 178                                         </div>
 179                                 </Modal.Body>
 180                                 <Modal.Footer>
 181                                         <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
 182                                         <Button variant="primary"  type="submit" onClick={this.handleAdd}>Add</Button>
 183                                 </Modal.Footer>
 184                         </ModalStyled>
 185                 );
 186         }
 187 }