skyquake/plugins/launchpad/src/instantiate/instantiateDashboard.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18
  19 import React from 'react';
  20 import AppHeader from 'widgets/header/header.jsx';
  21 import InstantiateStore from './instantiateStore.js';
  22 import NetworkServiceActions from './launchNetworkServiceActions.js';
  23 import InstantiateSelectDescriptorPanel from './instantiateSelectDescriptorPanel.jsx';
  24 import CatalogDescriptorRaw from './catalogDescriptorRaw.jsx'
  25 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
  26 import {Panel, PanelWrapper} from 'widgets/panel/panel';
  27 import Button from 'widgets/button/rw.button.js'
  28 import 'style/layout.scss';
  29 import './instantiateDashboard.scss';
  30
  31 class InstantiateDashboard extends React.Component {
  32     constructor(props) {
  33         super(props);
  34         this.Store = this.props.flux.stores.hasOwnProperty('InstantiateStore') ? this.props.flux.stores.InstantiateStore : this.props.flux.createStore(InstantiateStore                );
  35         this.state = this.Store.getState();
  36     }
  37     componentDidMount() {
  38         let self = this;
  39         let asyncOperations = []
  40         asyncOperations.push(this.Store.getCatalog());
  41         asyncOperations.push(this.Store.getCloudAccount(function() {
  42           asyncOperations.push(self.Store.getDataCenters());
  43           asyncOperations.push(self.Store.getSshKey());
  44           asyncOperations.push(self.Store.getConfigAgent());
  45         }));
  46         Promise.all(asyncOperations).then(function(resolve, reject) {
  47             if(self.props.params.nsd) {
  48                 self.Store.descriptorSelected(self.state.nsdDict[self.props.params.nsd]);
  49             }
  50         })
  51
  52     }
  53     componentWillMount() {
  54         this.Store.listen(this.updateState);
  55     }
  56     componentWillUnmount() {
  57         this.Store.unlisten(this.updateState);
  58     }
  59     handleCancel = (e) => {
  60         e.preventDefault();
  61         this.props.router.push({pathname:''});
  62     }
  63     handleBack = (e) => {
  64         e.preventDefault();
  65         this.props.router.goBack();
  66     }
  67     handleSave = (launch, e) => {
  68         let self = this;
  69         e.preventDefault();
  70         if (this.state.name == "") {
  71             self.props.actions.showNotification('Please name the network service');
  72           return;
  73         }
  74         if (!this.state.name.match(/^[a-zA-Z0-9_]*$/g)) {
  75           self.props.actions.showNotification('Spaces and special characters except underscores are not supported in the network service name at this time');
  76           return;
  77         }
  78         if (this.isOpenMano() && (this.state.dataCenterID == "" || !this.state.dataCenterID)) {
  79              self.props.actions.showNotification("Please enter the Data Center ID");
  80           return;
  81         }
  82         // LaunchNetworkServiceStore.resetView();
  83         this.Store.saveNetworkServiceRecord(this.state.name, launch);
  84     }
  85     isSelectPage = () => {
  86         //If an NSD id is present in the route then this evalauates to false;
  87         return !this.props.location.pathname.split('/')[2];
  88     }
  89     isOpenMano = () => {
  90         return this.state.selectedCloudAccount['account-type'] == 'openmano';
  91     }
  92     openDescriptor = (descriptor) => {
  93         let NSD = descriptor;
  94         if(descriptor.hasOwnProperty('target')) {
  95             NSD = this.state.selectedNSD;
  96         }
  97         this.Store.descriptorSelected(NSD);
  98         this.props.router.push({pathname:'/instantiate/' + NSD.id});
  99     }
 100     updateState = (state) => {
 101         this.setState(state);
 102     }
 103     render() {
 104         let self = this;
 105         let html;
 106         let selectedNSDid = self.state.selectedNSDid;
 107         let isPreviewing = self.state.isPreviewing;
 108         let descriptorPreview = (
 109             <Panel title={(self.state.selectedNSD['short-name'] || self.state.selectedNSD.name ) + ' Descriptor Preview'} className="CatalogDescriptorPreview">
 110             <span className="oi CatalogDescriptorPreview-button" data-glyph={"circle-x"} onClick={self.Store.deselectDescriptor}></span>
 111                 <CatalogDescriptorRaw descriptor={self.state.selectedNSD} />
 112             </Panel>);
 113         html = this.props.children ?
 114                 React.cloneElement(this.props.children, {store: self.Store, nsd: self.state.nsd[0], ...self.Store, ...self.state})
 115                 : (
 116                     <PanelWrapper>
 117                         <InstantiateSelectDescriptorPanel
 118                             catalog={self.state.nsd[0]}
 119                             onSelectDescriptor={self.Store.descriptorSelected}
 120                             onPreviewDescriptor={self.Store.previewDescriptor}
 121                             selectedDescriptorID={selectedNSDid}
 122                             isPreviewing={isPreviewing}
 123                             closeCard={self.Store.deselectDescriptor}
 124                             openDescriptor={this.openDescriptor}
 125                         />
 126                         {isPreviewing ? descriptorPreview : null}
 127                     </PanelWrapper>
 128                 )
 129
 130         return (
 131             <div className="InstantiateDashboard">
 132                 {html}
 133                 <div className="ButtonGroup">
 134
 135                     <Button label="Cancel" onClick={this.handleCancel}/>
 136                     {this.isSelectPage() ?
 137                         <Button label="Next" isLoading={this.state.isSaving} onClick={this.state.selectedNSD && self.openDescriptor} className="dark"  type="submit"/>
 138                         : <div>
 139                             <Button label="Back" onClick={this.handleBack}/>
 140                             <Button label="Launch" isLoading={this.state.isSaving} onClick={self.handleSave.bind(self, true)} className="dark"  type="submit"/>
 141                         </div>
 142                     }
 143                 </div>
 144             </div>
 145         );
 146     }
 147 }
 148 InstantiateDashboard.contextTypes = {
 149     router: React.PropTypes.object
 150 };
 151 export default SkyquakeComponent(InstantiateDashboard);