skyquake/plugins/accounts/src/account/account.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 Button from 'widgets/button/rw.button.js';
  21 import _ from 'lodash';
  22 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
  23 import Crouton from 'react-crouton';
  24 import TextInput from 'widgets/form_controls/textInput.jsx';
  25 import {AccountConnectivityStatus} from '../account_sidebar/accountSidebar.jsx';
  26 import 'style/common.scss';
  27 import './account.scss';
  28 class Account extends React.Component {
  29     constructor(props) {
  30         super(props);
  31         this.state = {};
  32         this.state.account = {};
  33     }
  34     storeListener = (state) => {
  35         if(!state.account) {
  36             this.setUp(this.props)
  37         }
  38         state.account && this.setState({account: state.account,accountType: state.accountType, types: state.types, sdnOptions: state.sdnOptions})
  39     }
  40     componentWillMount() {
  41         this.props.store.listen(this.storeListener);
  42         this.setUp(this.props);
  43     }
  44     componentWillReceiveProps(nextProps) {
  45         if(JSON.stringify(nextProps.params) != JSON.stringify(this.props.params)){
  46               this.setUp(nextProps);
  47         }
  48     }
  49     componentWillUnmount() {
  50         this.props.store.closeSocket();
  51         this.props.store.unlisten(this.storeListener);
  52     }
  53     setUp(props){
  54         if(props.params.name != 'create') {
  55             this.props.store.viewAccount({type: props.params.type, name: props.params.name});
  56         } else {
  57             this.props.store.setAccountTemplate(props.params.type);
  58         }
  59     }
  60     create(e) {
  61         e.preventDefault();
  62         var self = this;
  63         var Account = this.state.account;
  64         let AccountType = this.state.accountType;
  65         if (Account.name == "") {
  66             self.props.flux.actions.global.showNotification("Please give the account a name");
  67             return;
  68         } else {
  69             var type = Account['account-type'];
  70             var params = Account.params;
  71
  72             if(params) {
  73                 for (var i = 0; i < params.length; i++) {
  74                     var param = params[i].ref;
  75                     if (typeof(Account[type]) == 'undefined' || typeof(Account[type][param]) == 'undefined' || Account[type][param] == "") {
  76                         if (!params[i].optional) {
  77                             self.props.flux.actions.global.showNotification("Please fill all account details");
  78                             return;
  79                         }
  80                     }
  81                 }
  82             }
  83
  84             let nestedParams = Account.nestedParams && Account.nestedParams;
  85             if (nestedParams && nestedParams.params) {
  86                 for (let i = 0; i < nestedParams.params.length; i++) {
  87                     let nestedParam = nestedParams.params[i].ref;
  88                     if (typeof(Account[type]) == 'undefined' || typeof(Account[type][nestedParams['container-name']][nestedParam]) == 'undefined' || Account[type][nestedParams['container-name']][nestedParam] == "") {
  89                         if (!nestedParams.params[i].optional) {
  90                             self.props.flux.actions.global.showNotification("Please fill all account details");
  91                             return;
  92                         }
  93                     }
  94                 }
  95             }
  96         }
  97
  98         let newAccount = _.cloneDeep(removeTrailingWhitespace(Account));
  99         delete newAccount.params;
 100         newAccount.nestedParams &&
 101             newAccount.nestedParams['container-name'] &&
 102             delete newAccount[newAccount.nestedParams['container-name']];
 103         delete newAccount.nestedParams;
 104
 105         this.props.flux.actions.global.showScreenLoader();
 106         this.props.store.create(newAccount, AccountType).then(function() {
 107             self.props.router.push({pathname:'accounts'});
 108             self.props.flux.actions.global.hideScreenLoader.defer();
 109         },
 110          function() {
 111             self.props.flux.actions.global.showNotification("There was an error creating your account. Please contact your system administrator.");
 112             self.props.flux.actions.global.hideScreenLoader.defer();
 113          });
 114     }
 115     update(e) {
 116         e.preventDefault();
 117         var self = this;
 118         var Account = this.state.account;
 119         let AccountType = this.state.accountType;
 120         this.props.flux.actions.global.showScreenLoader();
 121         this.props.store.update(Account, AccountType).then(function() {
 122             self.props.router.push({pathname:'accounts'});
 123              self.props.flux.actions.global.hideScreenLoader();
 124         },
 125         function() {
 126
 127         });
 128     }
 129     cancel = (e) => {
 130         e.preventDefault();
 131         e.stopPropagation();
 132         this.props.router.push({pathname:'accounts'});
 133     }
 134     handleDelete = () => {
 135         let self = this;
 136         let msg = 'Preparing to delete "' + self.state.account.name + '"' +
 137         ' Are you sure you want to delete this ' + self.state.accountType + ' account?"';
 138         if (window.confirm(msg)) {
 139             this.props.store.delete(self.state.accountType, self.state.account.name).then(function() {
 140                 self.props.flux.actions.global.hideScreenLoader();
 141                 self.props.router.push({pathname:'accounts'});
 142             }, function(){
 143                 // self.props.flux.actions.global.hideScreenLoader.defer();
 144                 // console.log('Delete Account Fail');
 145             });
 146         } else {
 147            self.props.flux.actions.global.hideScreenLoader();
 148         }
 149     }
 150     handleNameChange(event) {
 151        this.props.store.handleNameChange(event);
 152     }
 153     handleAccountTypeChange(node, event) {
 154         this.props.store.handleAccountTypeChange(node, event);
 155     }
 156     handleSelectSdnAccount = (e) => {
 157         var tmp = this.state.account;
 158         if(e) {
 159             tmp['sdn-account'] = e;
 160         } else {
 161             if(tmp['sdn-account']) {
 162                 delete tmp['sdn-account'];
 163             }
 164         }
 165         console.log(e, tmp)
 166     }
 167     preventDefault = (e) => {
 168         e.preventDefault();
 169         e.stopPropagation();
 170     }
 171     evaluateSubmit = (e) => {
 172         if (e.keyCode == 13) {
 173             if (this.props.edit) {
 174                 this.update(e);
 175             } else {
 176                 this.create(e);
 177             }
 178             e.preventDefault();
 179             e.stopPropagation();
 180         }
 181     }
 182
 183     render() {
 184         let self = this;
 185         let {store, ...props} = this.props;
 186         // This section builds elements that only show up on the create page.
 187         // var name = <label>Name <input type="text" onChange={this.handleNameChange.bind(this)} style={{'textAlign':'left'}} /></label>;
 188         var name = <TextInput label="Name"  onChange={this.handleNameChange.bind(this)} required={true} />;
 189         let params = null;
 190         let selectAccount = null;
 191         let resfreshStatus = null;
 192         let Account = this.state.account;
 193         // AccountType is for the view, not the data account-type value;
 194         let AccountType = this.state.accountType;
 195         let Types = this.state.types;
 196         let isEdit = this.props.params.name != 'create';
 197         var buttons;
 198         let cloudResources = Account['cloud-resources-state'] && Account['cloud-resources-state'][Account['account-type']];
 199         let cloudResourcesStateHTML = null;
 200
 201         // Account Type Radio
 202         var selectAccountStack = [];
 203         if (!isEdit) {
 204             buttons = [
 205                 <Button key="0" onClick={this.cancel} className="cancel light" label="Cancel"></Button>,
 206                 <Button key="1" role="button" onClick={this.create.bind(this)} className="save dark" label="Save" />
 207             ]
 208             for (var i = 0; i < Types.length; i++) {
 209                 var node = Types[i];
 210                 var isSelected = (Account['account-type'] == node['account-type']);
 211                 selectAccountStack.push(
 212                   <label key={i} className={"accountSelection " + (isSelected ? "accountSelection--isSelected" : "")}>
 213                     <div className={"accountSelection-overlay" + (isSelected ? "accountSelection-overlay--isSelected" : "")}></div>
 214                     <div className="accountSelection-imageWrapper">
 215                         <img src={store.getImage(node['account-type'])}/>
 216                     </div>
 217                     <input type="radio" name="account" onChange={this.handleAccountTypeChange.bind(this, node)} defaultChecked={node.name == Types[0].name} value={node['account-type']} />{node.name}
 218                   </label>
 219                 )
 220             }
 221             selectAccount = (
 222                 <div className="accountForm">
 223                     <h3 className="accountForm-title">Select Account Type</h3>
 224                     <div className="select-type accountForm-content" >
 225                         {selectAccountStack}
 226                     </div>
 227                 </div>
 228             );
 229         } else {
 230             selectAccount = null
 231         }
 232
 233         //Cloud Account: SDN Account Option
 234         let sdnAccounts = null;
 235         if( (AccountType == 'cloud') ) {
 236             if ( !isEdit && (this.state.sdnOptions.length > 1 )) {
 237                 sdnAccounts = (
 238                     <div className="associateSdnAccount accountForm">
 239                         <h3 className="accountForm-title">Associate SDN Account</h3>
 240                         <div className="accountForm-content">
 241                             <SelectOption  options={this.state.sdnOptions} onChange={this.handleSelectSdnAccount} />
 242                         </div>
 243
 244                     </div>
 245                 );
 246             }
 247             if(isEdit && Account['sdn-account']) {
 248                 sdnAccounts = ( <div className="associateSdnAccount">SDN Account: {Account['sdn-account']} </div>)
 249             }
 250         }
 251          //END Cloud Account: SDN Account Option
 252          //
 253         // This sections builds the parameters for the account details.
 254         if (Account.params) {
 255             var paramsStack = [];
 256             var optionalField = '';
 257             for (var i = 0; i < Account.params.length; i++) {
 258                 var node = Account.params[i];
 259                 var value = ""
 260                 if (Account[Account['account-type']]) {
 261                     value = Account[Account['account-type']][node.ref]
 262                 }
 263                 if (this.props.edit && Account.params) {
 264                     value = Account.params[node.ref];
 265                 }
 266                 paramsStack.push(
 267                     <TextInput key={node.label} className="accountForm-input" label={node.label} required={!node.optional}  onChange={this.props.store.handleParamChange(node)} value={value} />
 268                 );
 269             }
 270
 271             let nestedParamsStack = null;
 272             if (Account.nestedParams) {
 273                 nestedParamsStack = [];
 274                 var optionalField = '';
 275                 for (var i = 0; i < Account.nestedParams.params.length; i++) {
 276                     var node = Account.nestedParams.params[i];
 277                     var value = ""
 278                     if (Account[Account['account-type']] && Account.nestedParams && Account[Account['account-type']][Account.nestedParams['container-name']] && Account[Account['account-type']][Account.nestedParams['container-name']][node.ref]) {
 279                         value = Account[Account['account-type']][Account.nestedParams['container-name']][node.ref];
 280                     }
 281                     if (node.optional) {
 282                         optionalField = <span className="optional">Optional</span>;
 283                     }
 284                     // nestedParamsStack.push(
 285                     //     <label key={node.label}>
 286                     //       <label className="create-fleet-pool-params">{node.label} {optionalField}</label>
 287                     //       <input className="create-fleet-pool-input" type="text" onChange={this.props.store.handleNestedParamChange(Account.nestedParams['container-name'], node)} value={value}/>
 288                     //     </label>
 289                     // );
 290                     nestedParamsStack.push(
 291                           <TextInput key={node.label} label={node.label} required={!node.optional} className="create-fleet-pool-input" type="text" onChange={this.props.store.handleNestedParamChange(Account.nestedParams['container-name'], node)} value={value}/>
 292                     );
 293                 }
 294             }
 295
 296             params = (
 297                 <li className="create-fleet-pool accountForm">
 298                     <h3  className="accountForm-title"> {isEdit ? 'Update' : 'Enter'} Account Details</h3>
 299                     <div className="accountForm-content">
 300                         {paramsStack}
 301                         <div className="accountForm-nestedParams">
 302                         {nestedParamsStack}
 303                         </div>
 304                     </div>
 305                 </li>
 306             )
 307         } else {
 308             params = (
 309                 <li className="create-fleet-pool accountForm">
 310                     <h3 className="accountForm-title"> {isEdit ? 'Update' : 'Enter'}</h3>
 311                     <label style={{'marginLeft':'17px', color:'#888'}}>No Details Required</label>
 312                 </li>
 313             )
 314         }
 315
 316         // This section builds elements that only show up in the edit page.
 317         if (isEdit) {
 318             name = <label>{Account.name}</label>;
 319             buttons = [
 320                 <Button key="2" onClick={this.handleDelete} className="light" label="Remove Account" />,
 321                 <Button key="3" onClick={this.cancel} className="light" label="Cancel" />,
 322                 <Button key="4" role="button" onClick={this.update.bind(this)} className="update dark" label="Update" />
 323             ];
 324             resfreshStatus = Account['connection-status'] ? (
 325                 <div className="accountForm">
 326                     <div className="accountForm-title accountForm-title--edit">
 327                         Connection Status
 328                     </div>
 329                     <div className="accountForm-content" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
 330                         <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
 331                             <AccountConnectivityStatus status={Account['connection-status'].status} />
 332                             {Account['connection-status'] && Account['connection-status'].status &&  Account['connection-status'].status.toUpperCase()}
 333                         </div>
 334                             <Button className="refreshList light" onClick={this.props.store.refreshAccount.bind(this, Account.name, AccountType)} label="REFRESH STATUS"></Button>
 335                     </div>
 336                     {
 337                         (Account['connection-status'] && Account['connection-status'].status && Account['connection-status'].status.toUpperCase()) === 'FAILURE' ?
 338                         displayFailureMessage(Account['connection-status'].details) : null
 339                     }
 340                 </div>
 341             ) : null;
 342             // cloudResourcesStateHTML = (
 343             //     <div className="accountForm">
 344             //         <h3 className="accountForm-title">Resources Status</h3>
 345             //         <div className="accountForm-content" >
 346             //         <ul>
 347             //             {
 348             //                 cloudResources && props.AccountMeta.resources[Account['account-type']].map(function(r, i) {
 349
 350             //                     return (
 351             //                         <li key={i}>
 352             //                             {r}: {cloudResources[r]}
 353             //                         </li>
 354             //                     )
 355             //                 }) || 'No Additional Resources'
 356             //             }
 357             //         </ul>
 358             //         </div>
 359             //     </div>
 360             // )
 361         }
 362
 363         var html = (
 364
 365               <form className="app-body create Accounts"  onSubmit={this.preventDefault} onKeyDown={this.evaluateSubmit}>
 366                 <div className="noticeSubText noticeSubText_right">
 367                     * required
 368                 </div>
 369                 <div className="associateSdnAccount accountForm">
 370                     <h3 className="accountForm-title">Account</h3>
 371                     <div className="accountForm-content" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
 372                         <h4 style={{flex: '1'}}>{name}</h4>
 373                         { isEdit ?
 374                             (
 375                                 <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
 376                                     <img src={store.getImage(Account['account-type'])}/> {props.AccountMeta.labelByType[Account['account-type']]}
 377                                 </div>)
 378                             : null
 379                         }
 380                     </div>
 381                 </div>
 382
 383                   {selectAccount}
 384                   {sdnAccounts}
 385                   {resfreshStatus}
 386                   {cloudResourcesStateHTML}
 387                   <ol className="flex-row">
 388                       {params}
 389                   </ol>
 390                   <div className="form-actions">
 391                       {buttons}
 392                   </div>
 393               </form>
 394         )
 395         return html;
 396     }
 397 }
 398
 399 function displayFailureMessage(msg) {
 400     return (
 401         <div className="accountForm-content" style={{maxWidth: '600px'}}>
 402             <div style={{paddingBottom: '1rem'}}>Details:</div>
 403             <div>
 404                 {msg}
 405             </div>
 406
 407         </div>
 408     )
 409 }
 410
 411 class SelectOption extends React.Component {
 412   constructor(props){
 413     super(props);
 414   }
 415   handleOnChange = (e) => {
 416     this.props.onChange(JSON.parse(e.target.value));
 417   }
 418   render() {
 419     let html;
 420     html = (
 421       <select className={this.props.className} onChange={this.handleOnChange}>
 422         {
 423           this.props.options.map(function(op, i) {
 424             return <option key={i} value={JSON.stringify(op.value)}>{op.label}</option>
 425           })
 426         }
 427       </select>
 428     );
 429     return html;
 430   }
 431 }
 432 SelectOption.defaultProps = {
 433   options: [],
 434   onChange: function(e) {
 435     console.dir(e)
 436   }
 437 }
 438
 439 function removeTrailingWhitespace(Account) {
 440              var type = Account['account-type'];
 441             var params = Account.params;
 442
 443             if(params) {
 444                 for (var i = 0; i < params.length; i++) {
 445                     var param = params[i].ref;
 446                     if(typeof(Account[type][param]) == 'string') {
 447                         Account[type][param] = Account[type][param].trim();
 448                     }
 449                 }
 450             }
 451
 452             let nestedParams = Account.nestedParams;
 453             if (nestedParams && nestedParams.params) {
 454                 for (let i = 0; i < nestedParams.params.length; i++) {
 455                     let nestedParam = nestedParams.params[i].ref;
 456                     let nestedParamValue = Account[type][nestedParams['container-name']][nestedParam];
 457                     if (typeof(nestedParamValue) == 'string') {
 458                         Account[type][nestedParams['container-name']][nestedParam] = nestedParamValue.trim();
 459                     }
 460                 }
 461             }
 462             return Account;
 463 }
 464
 465 export default SkyquakeComponent(Account)