3 * Copyright 2016 RIFT.IO Inc
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
9 * http://www.apache.org/licenses/LICENSE-2.0
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.
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{
28 // this.props.store = this.props.flux.props.stores.hasOwnProperty('AccountStore') ? this.props.flux.props.stores.AccountStore : this.props.flux.createStore(AccountStore);
30 // this.props = this.props.store.getState();
32 listenerHandler = (state) => {
35 componentWillMount() {
36 // this.props.store.listen(this.listenerHandler);
37 // this.props.store.openAccountsSocket();
39 componentWillUnmount() {
40 // this.props.store.closeSocket();
41 // this.props.store.unlisten(this.listenerHandler);
46 let {store, ...props} = this.props;
47 //[this.props.cloud,this.props.sdn,this.props['config-agent']]
51 data: this.props.cloud
59 data: this.props['config-agent']
62 type: 'resource-orchestrator',
63 data: this.props['resource-orchestrator']
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) {
70 if (orchestrator['connection-status']) {
71 status = orchestrator['connection-status'].status;
74 <DashboardCard key={index} className='pool-card accountSidebarCard'>
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}/>
90 let cloudAccounts = (this.props.cloud.length > 0) ? this.props.cloud.map(function(account, index) {
93 if (account['connection-status']) {
94 status = account['connection-status'].status;
97 <DashboardCard key={index} className='pool-card accountSidebarCard'>
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}/>
113 let sdnAccounts = (this.props.sdn && this.props.sdn.length > 0) ? this.props.sdn.map(function(account, index) {
115 if (account['connection-status']) {
116 status = account['connection-status'].status;
119 <DashboardCard key={index} className='pool-card accountSidebarCard'>
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>
131 let configAgentAccounts = (this.props['config-agent'].length > 0) ? this.props['config-agent'].map(function(account, index) {
133 if (account['connection-status']) {
134 status = account['connection-status'].status;
137 <DashboardCard key={index} className='pool-card accountSidebarCard'>
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}/>
153 <div className='accountSidebar'>
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}/>
160 {resourceOrchestrators}
162 !self.props.readonly ?
163 <DashboardCard className="accountSidebarCard">
165 to={{pathname: '/accounts/resource-orchestrator/create'}}
166 title="Create Resource Orchestrator(RO) Account"
167 className={'accountSidebarCard_create'}
168 onClick={self.props.actions.handleCancelAccount} >
170 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
173 : <div style={{margin:'1rem'}}></div>
178 <h1>VIM Accounts</h1>
181 !self.props.readonly ?
182 <DashboardCard className="accountSidebarCard">
184 to={{pathname: '/accounts/cloud/create'}}
185 title="Create Cloud Account"
186 className={'accountSidebarCard_create'}
187 onClick={self.props.actions.handleCancelAccount} >
189 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
192 : <div style={{margin:'1rem'}}></div>
196 <h1>SDN Accounts</h1>
199 !self.props.readonly ?
200 <DashboardCard className="accountSidebarCard">
202 to={{pathname: '/accounts/sdn/create'}}
203 title="Create Sdn Account"
204 className={'accountSidebarCard_create'}
205 onClick={self.props.actions.handleCancelAccount}>
207 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
211 : <div style={{margin:'1rem'}}></div>
213 <h1>Config Agent Accounts</h1>
214 {configAgentAccounts}
216 !self.props.readonly ?
217 <DashboardCard className="accountSidebarCard">
219 to={{pathname: '/accounts/config-agent/create'}}
220 title="Create Config Agent Account"
221 className={'accountSidebarCard_create'}
222 onClick={self.props.actions.handleCancelAccount}
224 Add Config Agent Account
225 <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
228 : <div style={{margin:'1rem'}}></div>
236 AccountSidebar.defaultProps = {
244 export class AccountConnectivityStatus extends React.Component {
246 return <span className={'connectivityStatus ' + 'connectivityStatus--' + this.props.status + ' ' + this.props.className} title={this.props.status}></span>
249 AccountConnectivityStatus.defaultProps = {
253 export default SkyquakeComponent(AccountSidebar);