4 * Copyright 2016 RIFT.IO Inc
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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
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';
28 class LaunchpadHeader extends React.Component {
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);
42 componentWillReceiveProps(props) {
44 failed: (props['operational-status'] == 'failed' || props['config-status'] == 'failed')
47 //TODO Do not setState within nested component like this. Find a way to use props.
48 doneLoading = (failed) => {
53 //TODO instead of calling the store method, an action should be emitted and the store should respond.
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);
61 return !((props.nsr['operational-status'] == 'running'))
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();
68 console.log('open console clicked');
72 if(this.props.isActive) {
77 launchpadFleetStore.setNSRStatus(this.props.nsr["id"], status);
79 openInterfacePanel = () => {
82 displayInterfacePanel: !this.state.displayInterfacePanel,
83 displayCloudAccount: false
85 // this.closeHeaderViews();
89 displayInterfacePanel: false,
90 displayStatus: !this.state.displayStatus,
91 displayCloudAccount: false
93 // this.closeHeaderViews();
95 openCloudAccountPanel = () => {
96 let nsrCloudAccount = this.props.nsr['cloud-account'];
99 displayInterfacePanel: false,
100 displayCloudAccount: !this.state.displayCloudAccount
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
110 let isLoading = failed || this.state.isLoading;
111 let toggleStatus = isLoading ? '' :
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">
120 let headerClassName = "launchpadCard_header";
122 headerClassName += (failed ? ' failed' : '');
123 let sdnpresent = this.props.nsr['sdn-account'] ? true: false;
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">
130 <a title={this.props.name} className="title" style={{cursor:'default'}}>
133 : <Link to={{pathname: '/viewport', query: {id: this.props.nsr.id,
134 sdnpresent: sdnpresent}}}
135 title={"Open Viewport Dashboard for " + this.props.name}>
137 <span className="oi" data-glyph="external-link" aria-hidden="true"></span>
141 <div className="launchpadCard_header-actions">
144 this.props.nsr["operational-status"]
145 : this.props.nsr['config-status'] == 'configuring' ?
147 : this.props.nsr['config-status'] == 'configured' ?
149 :'Configuration Failed'}
151 <h3 style={{display: isLoading ? 'none' : 'inherit'}}>
152 <UpTime initialTime={nsrCreateTime} run={true} />
154 <h3 className="launchpadCard_header-link" style={{display: this.props.nsr['cloud-account'] ? 'inherit' : 'none'}}>
155 <a onClick={this.openCloudAccountPanel} title="VIM Account" className={self.state.displayCloudAccount ? 'activeIcon' : 'inActiveIcon'}>
156 <span className="oi" data-glyph="cloud" aria-hidden="true"></span>
159 <h3 className="launchpadCard_header-link" style={{'display': !isLoading ? 'inherit' : 'none'}}>
160 <a onClick={this.openInterfacePanel} title="View Management Interfaces" className={self.state.displayInterfacePanel ? 'activeIcon' : 'inActiveIcon'}>
161 <span className="oi" data-glyph="monitor" aria-hidden="true">
166 <h3 className="launchpadCard_header-link" style={{display: 'inherit'}}>
167 <a onClick={this.deleteLaunchpad} title="Delete">
168 <span className="oi" data-glyph="trash" aria-hidden="true"></span>
173 <div className="launchpadCard_header-status">
174 <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"]} />
175 <LaunchpadCardMgmtInterfaces display={self.state.displayInterfacePanel} interfaces={this.props.nsr["dashboard-urls"]} className="launchpadCard_header-vnfr_management-links" consoleUrls={this.props.nsr['console-urls']}/>
176 <LaunchpadCardCloudAccount display={self.state.displayCloudAccount} nsr={this.props.nsr} className="launchpadCard_header-vnfr_management-links" />
182 LaunchpadHeader.propTypes = {
183 name: React.PropTypes.string
185 LaunchpadHeader.defaultProps = {
186 name: 'Loading...Some Name'
189 export default LaunchpadHeader;