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, '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.getResourceOrchestrator());
  44           asyncOperations.push(self.Store.getSshKey());
  45           asyncOperations.push(self.Store.getConfigAgent());
  46           asyncOperations.push(self.Store.getResourceOrchestrator());
  47         }));
  48         Promise.all(asyncOperations).then(function(resolve, reject) {
  49             if(self.props.params.nsd) {
  50                 self.Store.descriptorSelected(self.state.nsdDict[self.props.params.nsd]);
  51             }
  52         })
  53
  54     }
  55     componentWillMount() {
  56         this.Store.listen(this.updateState);
  57     }
  58     componentWillUnmount() {
  59         this.Store.unlisten(this.updateState);
  60     }
  61     handleCancel = (e) => {
  62         e.preventDefault();
  63         this.props.router.push({pathname:''});
  64     }
  65     handleBack = (e) => {
  66         e.preventDefault();
  67         this.props.router.goBack();
  68     }
  69     handleSave = (launch, e) => {
  70         let self = this;
  71         e.preventDefault();
  72         if (this.state.name == "") {
  73             self.props.actions.showNotification('Please name the network service');
  74           return;
  75         }
  76         if (!this.state.name.match(/^[a-zA-Z0-9_]*$/g)) {
  77           self.props.actions.showNotification('Spaces and special characters except underscores are not supported in the network service name at this time');
  78           return;
  79         }
  80         if (this.state.isOpenMano && (this.state.dataCenterID == "" || !this.state.dataCenterID)) {
  81              self.props.actions.showNotification("Please enter the Data Center ID");
  82           return;
  83         }
  84         // LaunchNetworkServiceStore.resetView();
  85         this.Store.saveNetworkServiceRecord(this.state.name, launch);
  86     }
  87     isSelectPage = () => {
  88         //If an NSD id is present in the route then this evalauates to false;
  89         return !this.props.location.pathname.split('/')[2];
  90     }
  91     isOpenMano = () => {
  92         return this.state.ro['account-type'] == 'openmano';
  93     }
  94     openDescriptor = (descriptor) => {
  95         let NSD = descriptor;
  96         if(descriptor.hasOwnProperty('target')) {
  97             NSD = this.state.selectedNSD;
  98         }
  99         this.Store.descriptorSelected(NSD);
 100         this.props.router.push({pathname:'/instantiate/' + NSD.id});
 101     }
 102     updateState = (state) => {
 103         this.setState(state);
 104     }
 105     render() {
 106         let self = this;
 107         let html;
 108         let selectedNSDid = self.state.selectedNSDid;
 109         let isPreviewing = self.state.isPreviewing;
 110         let descriptorPreview = (
 111             <Panel title={(self.state.selectedNSD['short-name'] || self.state.selectedNSD.name ) + ' Descriptor Preview'} className="CatalogDescriptorPreview">
 112             <span className="oi CatalogDescriptorPreview-button" data-glyph={"circle-x"} onClick={self.Store.deselectDescriptor}></span>
 113                 <CatalogDescriptorRaw descriptor={self.state.selectedNSD} />
 114             </Panel>);
 115         html = this.props.children ?
 116                 React.cloneElement(this.props.children, {store: self.Store, nsd: self.state.nsd[0], ...self.Store, ...self.state})
 117                 : (
 118                     <PanelWrapper>
 119                         <InstantiateSelectDescriptorPanel
 120                             catalog={self.state.nsd[0]}
 121                             onSelectDescriptor={self.Store.descriptorSelected}
 122                             onPreviewDescriptor={self.Store.previewDescriptor}
 123                             selectedDescriptorID={selectedNSDid}
 124                             isPreviewing={isPreviewing}
 125                             closeCard={self.Store.deselectDescriptor}
 126                             openDescriptor={this.openDescriptor}
 127                         />
 128                         {isPreviewing ? descriptorPreview : null}
 129                     </PanelWrapper>
 130                 )
 131
 132         return (
 133             <div className="InstantiateDashboard">
 134                 {html}
 135                 <div className="ButtonGroup">
 136
 137                     <Button label="Cancel" onClick={this.handleCancel}/>
 138                     {this.isSelectPage() ?
 139                         <Button label="Next" isLoading={this.state.isSaving} onClick={this.state.selectedNSD && self.openDescriptor} className="dark"  type="submit"/>
 140                         : <div>
 141                             <Button label="Back" onClick={this.handleBack}/>
 142                             <Button label="Launch" isLoading={this.state.isSaving} onClick={self.handleSave.bind(self, true)} className="dark"  type="submit"/>
 143                         </div>
 144                     }
 145                 </div>
 146             </div>
 147         );
 148     }
 149 }
 150 InstantiateDashboard.contextTypes = {
 151     router: React.PropTypes.object
 152 };
 153 export default SkyquakeComponent(InstantiateDashboard);