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