skyquake/plugins/launchpad/src/launchpad_card/launchpadHeader.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 import UpTime from 'widgets/uptime/uptime.jsx';
  21 import launchpadFleetStore from '../launchpadFleetStore.js';
  22 import launchpadFleetActions from '../launchpadFleetActions';
  23 import LaunchpadOperationalStatus from 'widgets/operational-status/launchpadOperationalStatus.jsx';
  24 import LaunchpadCardMgmtInterfaces from './launchpadCardMgmtInterfaces.jsx';
  25 import LaunchpadCardCloudAccount from './launchpadCardCloudAccount.jsx';
  26 import { Link } from 'react-router';
  27
  28 class LaunchpadHeader extends React.Component {
  29   constructor(props) {
  30     super(props);
  31     this.state = {};
  32     this.state.displayStatus = false;
  33     this.state.isLoading = this.isLoading(props);
  34     this.state.displayInterfacePanel = false;
  35     this.state.displayCloudAccount = false;
  36     this.state.failed = false;
  37     this.deleteLaunchpad = this.deleteLaunchpad.bind(this);
  38     this.openDashboard = this.openDashboard.bind(this);
  39     this.openConsole = this.openConsole.bind(this);
  40     this.setStatus = this.setStatus.bind(this);
  41   }
  42   componentWillReceiveProps(props) {
  43     this.setState({
  44       failed: (props['operational-status'] == 'failed' || props['config-status'] == 'failed')
  45     })
  46   }
  47   //TODO Do not setState within nested component like this. Find a way to use props.
  48   doneLoading = (failed) => {
  49   this.setState({
  50       isLoading: false
  51     });
  52   }
  53   //TODO instead of calling the store method, an action should be emitted and the store should respond.
  54   deleteLaunchpad(e) {
  55     if (window.confirm("Preparing to delete "+ this.props.name + ".  Are you sure you want to delete this NSR?")) {
  56       launchpadFleetStore.deleteNsrInstance(this.props.id);
  57       launchpadFleetActions.deletingNSR(this.props.id);
  58     }
  59   }
  60   isLoading(props) {
  61       return !((props.nsr['operational-status'] == 'running'))
  62   }
  63   openDashboard(nsr_id) {
  64     window.location.href = '//' + window.location.hostname + ':' + window.location.port + '/index.html' + window.location.search + window.location.hash + '/' + nsr_id + '/detail';
  65     launchpadFleetStore.closeSocket();
  66   }
  67   openConsole() {
  68     console.log('open console clicked');
  69   }
  70   setStatus() {
  71     var status;
  72     if(this.props.isActive) {
  73       status = "DISABLED"
  74     } else {
  75       status = "ENABLED"
  76     }
  77     launchpadFleetStore.setNSRStatus(this.props.nsr["id"], status);
  78   }
  79   openInterfacePanel = () => {
  80     this.setState({
  81       displayStatus: false,
  82       displayInterfacePanel: !this.state.displayInterfacePanel,
  83       displayCloudAccount: false
  84     })
  85      // this.closeHeaderViews();
  86   }
  87   openStatus = () => {
  88     this.setState({
  89       displayInterfacePanel: false,
  90       displayStatus: !this.state.displayStatus,
  91       displayCloudAccount: false
  92     });
  93     // this.closeHeaderViews();
  94   }
  95   openCloudAccountPanel = () => {
  96     let nsrCloudAccount = this.props.nsr['cloud-account'];
  97     this.setState({
  98       displayStatus: false,
  99       displayInterfacePanel: false,
 100       displayCloudAccount: !this.state.displayCloudAccount
 101     })
 102   }
 103   render() {
 104     let self = this;
 105     let failed = this.state.failed || (this.props.nsr['operational-status'] == 'failed');
 106     let nsrCreateTime = this.props.nsr['create-time'];
 107     //let nsrUpDuration = (nsrCreateTime)
 108     //  ? Math.floor((new Date() / 1000)) - nsrCreateTime
 109     //  : null;
 110     let isLoading =  failed || this.state.isLoading;
 111     let toggleStatus = isLoading ? '' :
 112       (
 113         <h3 className="launchpadCard_header-link">
 114           <a onClick={this.openStatus} title="Open History" className={self.state.displayStatus ? 'activeIcon' : 'inActiveIcon'}>
 115             <span className="oi" data-glyph="clock" aria-hidden="true">
 116             </span>
 117           </a>
 118         </h3>
 119       );
 120     let headerClassName = "launchpadCard_header";
 121     // debugger;
 122     headerClassName += (failed ? ' failed' : '');
 123     let sdnpresent = this.props.nsr['sdn-account'] ? true: false;
 124     return (
 125       <header className={headerClassName}>
 126         <div className={"launchpadCard_header-title " + (this.props.isActive ? '' : 'launchpadCard_header-title-off') + (failed ? ' failed' : '')} >
 127             <h3 className="launchpadCard_header-link">
 128               {
 129                 isLoading ?
 130                             <a title={this.props.name} className="title" style={{cursor:'default'}}>
 131                               {this.props.name}
 132                             </a>
 133                           : <Link to={{pathname: '/viewport', query: {id: this.props.nsr.id,
 134                               sdnpresent: sdnpresent}}}
 135                               title={"Open Viewport Dashboard for " + this.props.name}>
 136                               {this.props.name}
 137                               <span className="oi" data-glyph="external-link" aria-hidden="true"></span>
 138                             </Link>
 139               }
 140             </h3>
 141           <div className="launchpadCard_header-actions">
 142             <h3>
 143               {isLoading ?
 144                 this.props.nsr["operational-status"]
 145                 : this.props.nsr['config-status'] == 'configuring' ?
 146                   'Configuring'
 147                   : this.props.nsr['config-status'] == 'configured' ?
 148                     'Active'
 149                     :'Configuration Failed'}
 150             </h3>
 151             <h3 style={{display: isLoading ? 'none' : 'inherit'}}>
 152                 <UpTime initialTime={nsrCreateTime} run={true} />
 153             </h3>
 154             <h3 style={{display: isLoading ? this.props.nsr["operational-status"] == 'vl-init-phase' ? 'inherit' : 'none' : 'none'}}>
 155                 {this.props.nsr["rw-nsr:orchestration-progress"]["networks"]["active"]} / {this.props.nsr["rw-nsr:orchestration-progress"]["networks"]["total"]}
 156             </h3>
 157             <h3 style={{display: isLoading ? this.props.nsr["operational-status"] == 'vnf-init-phase' ? 'inherit' : 'none' : 'none'}}>
 158                 {this.props.nsr["rw-nsr:orchestration-progress"]["vms"]["active"]} / {this.props.nsr["rw-nsr:orchestration-progress"]["vms"]["total"]}
 159             </h3>
 160             <h3 className="launchpadCard_header-link" style={{display: this.props.nsr['datacenter'] ? 'inherit' : 'none'}}>
 161               <a onClick={this.openCloudAccountPanel} title="Datacenters" className={self.state.displayCloudAccount ? 'activeIcon' : 'inActiveIcon'}>
 162                 <span className="oi" data-glyph="cloud" aria-hidden="true"></span>
 163               </a>
 164             </h3>
 165             <h3 className="launchpadCard_header-link" style={{'display': !isLoading ? 'inherit' : 'none'}}>
 166                 <a onClick={this.openInterfacePanel} title="View Management Interfaces" className={self.state.displayInterfacePanel ? 'activeIcon' : 'inActiveIcon'}>
 167                   <span className="oi" data-glyph="monitor" aria-hidden="true">
 168                   </span>
 169                 </a>
 170             </h3>
 171             {toggleStatus}
 172             {this.props.hasAccess ?
 173                 (
 174                   <h3 className="launchpadCard_header-link" style={{display: 'inherit'}}>
 175                     <a onClick={this.deleteLaunchpad} title="Delete">
 176                       <span className="oi" data-glyph="trash" aria-hidden="true"></span>
 177                     </a>
 178                   </h3>
 179                 )
 180               : null}
 181           </div>
 182         </div>
 183         <div className="launchpadCard_header-status">
 184         <LaunchpadOperationalStatus className="launchpadCard_header-operational-status" loading={isLoading} doneLoading={this.doneLoading} display={this.state.displayStatus} currentStatus={this.props.nsr["operational-status"]} status={this.props.nsr["rw-nsr:operational-events"]} />
 185         <LaunchpadCardMgmtInterfaces display={self.state.displayInterfacePanel} interfaces={this.props.nsr["dashboard-urls"]} className="launchpadCard_header-vnfr_management-links"  consoleUrls={this.props.nsr['console-urls']}/>
 186         <LaunchpadCardCloudAccount display={self.state.displayCloudAccount} nsr={this.props.nsr} className="launchpadCard_header-vnfr_management-links" />
 187         </div>
 188       </header>
 189     )
 190   }
 191 };
 192 LaunchpadHeader.propTypes = {
 193   name: React.PropTypes.string
 194  };
 195 LaunchpadHeader.defaultProps = {
 196   name: 'Loading...Some Name'
 197 };
 198
 199 export default LaunchpadHeader;