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