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',
  59                 data: this.props['config-agent']
  60             }
  61         ];
  62         let refreshStatus = (<div>Check All Connectivity Status</div>)
  63         let cloudAccounts = (this.props.cloud.length > 0) ? this.props.cloud.map(function(account, index) {
  64             let status = null;
  65             if (account) {
  66                 if (account['connection-status']) {
  67                     status = account['connection-status'].status;
  68                 }
  69                 return (
  70                     <DashboardCard  key={index} className='pool-card accountSidebarCard'>
  71                     <header>
  72                     <Link to={'accounts/cloud/' + account.name}>
  73                             <div className="accountSidebarCard--content">
  74                                 <img className="accountSidebarCard--logo" src={store.getImage(account['account-type'])} />
  75                                 <h3 title="Edit Account">
  76                                     {account.name}
  77                                     <AccountConnectivityStatus status={status}/>
  78                                 </h3>
  79                             </div>
  80                     </Link>
  81                     </header>
  82                     </DashboardCard>
  83                 );
  84             }
  85         }) : null;
  86         let sdnAccounts = (this.props.sdn && this.props.sdn.length > 0) ? this.props.sdn.map(function(account, index) {
  87             let status = null;
  88             if (account['connection-status']) {
  89                 status = account['connection-status'].status;
  90             }
  91             return (
  92                 <DashboardCard key={index} className='pool-card accountSidebarCard'>
  93                      <header>
  94                         <Link to={'accounts/sdn/' + account.name} title="Edit Account">
  95                          <div className="accountSidebarCard--content">
  96                             <img className="accountSidebarCard--logo" src={store.getImage(account['account-type'])} />
  97                             <h3>{account.name}<AccountConnectivityStatus status={status}/></h3>
  98                         </div>
  99                 </Link>
 100                     </header>
 101                 </DashboardCard>
 102             )
 103         }) : null;
 104         let configAgentAccounts = (this.props['config-agent'].length > 0) ? this.props['config-agent'].map(function(account, index) {
 105             let status = null;
 106             if (account['connection-status']) {
 107                 status = account['connection-status'].status;
 108             }
 109             return (
 110                 <DashboardCard key={index} className='pool-card accountSidebarCard'>
 111                 <header>
 112                     <Link to={'accounts/config-agent/' + account.name} title="Edit Account">
 113                         <div className="accountSidebarCard--content">
 114                             <img className="accountSidebarCard--logo" src={store.getImage(account['account-type'])} />
 115                             <h3 title="Edit Account">
 116                                 {account.name}
 117                                 <AccountConnectivityStatus status={status}/>
 118                             </h3>
 119                         </div>
 120                     </Link>
 121                 </header>
 122                 </DashboardCard>
 123             )
 124         }) : null;
 125         html = (
 126             <div className='accountSidebar'>
 127                  <Button className="refreshList light" onClick={this.props.store.refreshAll.bind(this, AccountData)} label={this.props.refreshingAll ? 'Checking Connectivity Status...' : refreshStatus}></Button>
 128                 {props.showVIM ? (
 129                     <div>
 130                         <h1>VIM Accounts</h1>
 131                         {cloudAccounts}
 132                         {
 133                             !self.props.readonly ?
 134                                 <DashboardCard className="accountSidebarCard">
 135                                     <Link
 136                                         to={{pathname: '/accounts/cloud/create'}}
 137                                         title="Create Cloud Account"
 138                                         className={'accountSidebarCard_create'} >
 139                                             Add VIM Account
 140                                             <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 141                                     </Link>
 142                                 </DashboardCard>
 143                             :  <div style={{margin:'1rem'}}></div>
 144                         }
 145                     </div>)
 146                 : null}
 147                 <h1>SDN Accounts</h1>
 148                 {sdnAccounts}
 149                 {
 150                     !self.props.readonly ?
 151                         <DashboardCard className="accountSidebarCard">
 152                             <Link
 153                             to={{pathname: '/accounts/sdn/create'}}
 154                             title="Create Sdn Account"
 155                             className={'accountSidebarCard_create'}>
 156                                 Add SDN Account
 157                                 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 158                             </Link>
 159
 160                         </DashboardCard>
 161                     : <div style={{margin:'1rem'}}></div>
 162                 }
 163                 <h1>Config Agent Accounts</h1>
 164                 {configAgentAccounts}
 165                 {
 166                     !self.props.readonly ?
 167                         <DashboardCard className="accountSidebarCard">
 168                             <Link
 169                                 to={{pathname: '/accounts/config-agent/create'}}
 170                                 title="Create Config Agent Account"
 171                                 className={'accountSidebarCard_create'}
 172                             >
 173                                 Add Config Agent Account
 174                                 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
 175                             </Link>
 176                         </DashboardCard>
 177                     :  <div style={{margin:'1rem'}}></div>
 178                 }
 179             </div>
 180                 );
 181         return html;
 182     }
 183 }
 184
 185 AccountSidebar.defaultProps = {
 186     cloud: [],
 187     sdn: [],
 188     'config-agent': []
 189 }
 190
 191
 192 export class AccountConnectivityStatus extends React.Component {
 193     render(){
 194         return <span className={'connectivityStatus ' + 'connectivityStatus--' + this.props.status + ' ' + this.props.className} title={this.props.status}></span>
 195     }
 196 }
 197 AccountConnectivityStatus.defaultProps = {
 198     status: 'failed'
 199 }
 200
 201 export default SkyquakeComponent(AccountSidebar);