skyquake/plugins/accounts/src/account_sidebar/accountSidebar.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 import React from 'react';
  19 import './accountSidebar.scss';
  20 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
  21 import AccountStore from '../account/accountStore.js';
  22 import { Link } from 'react-router';
  23 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
  24 import Button from 'widgets/button/rw.button'
  25 class AccountSidebar extends React.Component{
  26     constructor(props) {
  27         super(props);
  28         // this.props.store = this.props.flux.props.stores.hasOwnProperty('AccountStore') ? this.props.flux.props.stores.AccountStore : this.props.flux.createStore(AccountStore);
  29         var self = this;
  30         // this.props = this.props.store.getState();
  31     }
  32     listenerHandler = (state) => {
  33         this.setState(state);
  34     }
  35     componentWillMount() {
  36         // this.props.store.listen(this.listenerHandler);
  37         // this.props.store.openAccountsSocket();
  38     }
  39     componentWillUnmount() {
  40         // this.props.store.closeSocket();
  41         // this.props.store.unlisten(this.listenerHandler);
  42     }
  43     render() {
  44         let html;
  45         let self = this;
  46         let {store, ...props} = this.props;
  47         //[this.props.cloud,this.props.sdn,this.props['config-agent']]
  48         let AccountData = [
  49             {
  50                 type: 'cloud',
  51                 data: this.props.cloud
  52             },
  53             {
  54                 type: 'sdn',
  55                 data: this.props.sdn
  56             },
  57             {
  58                 type: 'config-agent',
  59                 data: this.props['config-agent']
  60             },
  61             {
  62                 type: 'resource-orchestrator',
  63                 data: this.props['resource-orchestrator']
  64             }
  65         ];
  66         let refreshStatus = (<div>Check All Connectivity Status</div>)
  67         let resourceOrchestrators = (this.props['resource-orchestrator'].length > 0) ? this.props['resource-orchestrator'].map(function(orchestrator, index) {
  68             let status = null;
  69             if (orchestrator) {
  70                 if (orchestrator['connection-status']) {
  71                     status = orchestrator['connection-status'].status;
  72                 }
  73                 return (
  74                     <DashboardCard  key={index} className='pool-card accountSidebarCard'>
  75                     <header>
  76                     <Link to={'accounts/resource-orchestrator/' + encodeURIComponent(orchestrator.name)}>
  77                             <div className="accountSidebarCard--content">
  78                                 <img className="accountSidebarCard--logo" src={store.getImage(orchestrator['ro-account-type'])} />
  79                                 <h3 title="Edit Resource Orchestrator(RO) Account">
  80                                     <span className="accountSidebarCard--name" title={orchestrator.name}>{orchestrator.name}</span>
  81                                     <AccountConnectivityStatus status={status}/>
  82                                 </h3>
  83                             </div>
  84                     </Link>
  85                     </header>
  86                     </DashboardCard>
  87                 );
  88             }
  89         }) : null;
  90         let cloudAccounts = (this.props.cloud.length > 0) ? this.props.cloud.map(function(account, index) {
  91             let status = null;
  92             if (account) {
  93                 if (account['connection-status']) {
  94                     status = account['connection-status'].status;
  95                 }
  96                 return (
  97                     <DashboardCard  key={index} className='pool-card accountSidebarCard'>
  98                     <header>
  99                     <Link to={'accounts/cloud/' + encodeURIComponent(account.name)} onClick={self.props.actions.handleCancelAccount}>
 100                             <div className="accountSidebarCard--content">
 101                                 <img className="accountSidebarCard--logo" src={store.getImage(account['account-type'])} />
 102                                 <h3 title="Edit Account">
 103                                     <span className="accountSidebarCard--name" title={account.name}>{account.name}</span>
 104                                     <AccountConnectivityStatus status={status}/>
 105                                 </h3>
 106                             </div>
 107                     </Link>
 108                     </header>
 109                     </DashboardCard>
 110                 );
 111             }
 112         }) : null;
 113         let sdnAccounts = (this.props.sdn && this.props.sdn.length > 0) ? this.props.sdn.map(function(account, index) {
 114             let status = null;
 115             if (account['connection-status']) {
 116                 status = account['connection-status'].status;
 117             }
 118             return (
 119                 <DashboardCard key={index} className='pool-card accountSidebarCard'>
 120                      <header>
 121                         <Link to={'accounts/sdn/' + encodeURIComponent(account.name)} title="Edit Account">
 122                          <div className="accountSidebarCard--content">
 123                             <img className="accountSidebarCard--logo" src={store.getImage(account['account-type'])} />
 124                             <h3><span className="accountSidebarCard--name" title={account.name}>{account.name}</span><AccountConnectivityStatus status={status}/></h3>
 125                         </div>
 126                 </Link>
 127                     </header>
 128                 </DashboardCard>
 129             )
 130         }) : null;
 131         let configAgentAccounts = (this.props['config-agent'].length > 0) ? this.props['config-agent'].map(function(account, index) {
 132             let status = null;
 133             if (account['connection-status']) {
 134                 status = account['connection-status'].status;
 135             }
 136             return (
 137                 <DashboardCard key={index} className='pool-card accountSidebarCard'>
 138                 <header>
 139                     <Link to={'accounts/config-agent/' + encodeURIComponent(account.name)} title="Edit Account">
 140                         <div className="accountSidebarCard--content">
 141                             <img className="accountSidebarCard--logo" src={store.getImage(account['account-type'])} />
 142                             <h3 title="Edit Account">
 143                                 <span className="accountSidebarCard--name" title={account.name}>{account.name}</span>
 144                                 <AccountConnectivityStatus status={status}/>
 145                             </h3>
 146                         </div>
 147                     </Link>
 148                 </header>
 149                 </DashboardCard>
 150             )
 151         }) : null;
 152         html = (
 153             <div className='accountSidebar'>
 154                 {
 155                     self.props.readonly ? null :
 156                         <Button className="refreshList light" onClick={this.props.store.refreshAll.bind(this, AccountData)} label={this.props.refreshingAll ? 'Checking Connectivity Status...' : refreshStatus}/>
 157                 }
 158                  <div>
 159                         <h1>RO Accounts</h1>
 160                         {resourceOrchestrators}
 161                         {
 162                             !self.props.readonly ?
 163                                 <DashboardCard className="accountSidebarCard">
 164                                     <Link
 165                                         to={{pathname: '/accounts/resource-orchestrator/create'}}
 166                                         title="Create Resource Orchestrator(RO) Account"
 167                                         className={'accountSidebarCard_create'}
 168                                         onClick={self.props.actions.handleCancelAccount} >
 169                                             Add RO Account
 170                                             <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 171                                     </Link>
 172                                 </DashboardCard>
 173                             :  <div style={{margin:'1rem'}}></div>
 174                         }
 175                     </div>
 176                 {props.showVIM ? (
 177                     <div>
 178                         <h1>VIM Accounts</h1>
 179                         {cloudAccounts}
 180                         {
 181                             !self.props.readonly ?
 182                                 <DashboardCard className="accountSidebarCard">
 183                                     <Link
 184                                         to={{pathname: '/accounts/cloud/create'}}
 185                                         title="Create Cloud Account"
 186                                         className={'accountSidebarCard_create'}
 187                                         onClick={self.props.actions.handleCancelAccount} >
 188                                             Add VIM Account
 189                                             <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 190                                     </Link>
 191                                 </DashboardCard>
 192                             :  <div style={{margin:'1rem'}}></div>
 193                         }
 194                     </div>)
 195                 : null}
 196                 <h1>SDN Accounts</h1>
 197                 {sdnAccounts}
 198                 {
 199                     !self.props.readonly ?
 200                         <DashboardCard className="accountSidebarCard">
 201                             <Link
 202                             to={{pathname: '/accounts/sdn/create'}}
 203                             title="Create Sdn Account"
 204                             className={'accountSidebarCard_create'}
 205                             onClick={self.props.actions.handleCancelAccount}>
 206                                 Add SDN Account
 207                                 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 208                             </Link>
 209
 210                         </DashboardCard>
 211                     : <div style={{margin:'1rem'}}></div>
 212                 }
 213                 <h1>Config Agent Accounts</h1>
 214                 {configAgentAccounts}
 215                 {
 216                     !self.props.readonly ?
 217                         <DashboardCard className="accountSidebarCard">
 218                             <Link
 219                                 to={{pathname: '/accounts/config-agent/create'}}
 220                                 title="Create Config Agent Account"
 221                                 className={'accountSidebarCard_create'}
 222                                 onClick={self.props.actions.handleCancelAccount}
 223                             >
 224                                 Add Config Agent Account
 225                                 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 226                             </Link>
 227                         </DashboardCard>
 228                     :  <div style={{margin:'1rem'}}></div>
 229                 }
 230             </div>
 231                 );
 232         return html;
 233     }
 234 }
 235
 236 AccountSidebar.defaultProps = {
 237     cloud: [],
 238     sdn: [],
 239     'config-agent': [],
 240     ro: []
 241 }
 242
 243
 244 export class AccountConnectivityStatus extends React.Component {
 245     render(){
 246         return <span className={'connectivityStatus ' + 'connectivityStatus--' + this.props.status + ' ' + this.props.className} title={this.props.status}></span>
 247     }
 248 }
 249 AccountConnectivityStatus.defaultProps = {
 250     status: 'failed'
 251 }
 252
 253 export default SkyquakeComponent(AccountSidebar);