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 RecordNavigator from './recordNavigator.jsx';
21 import RecordCard from './recordCard.jsx';
22 import RecordDetails from './recordDetails.jsx';
23 import RecordViewStore from './recordViewStore.js';
24 import RecordViewActions from './recordViewActions.js';
25 import LaunchpadBreadcrumbs from '../launchpadBreadcrumbs.jsx';
26 import Utils from 'utils/utils.js';
27 import AppHeader from 'widgets/header/header.jsx';
28 import './recordViewer.scss';
29 export default class RecordView extends React.Component {
32 this.state = RecordViewStore.getState();
33 this.state.showRecordDetails = false;
34 this.state.jobData = [];
35 RecordViewStore.listen(this.storeListener);
37 storeListener = (state) => {
40 componentWillUnmount = () => {
41 RecordViewStore.handleCloseSocket();
42 RecordViewStore.handleCloseJobSocket();
43 RecordViewStore.unlisten(this.storeListener);
46 let nsrRegEx = new RegExp("([0-9a-zA-Z-]+)\/detail");
49 console.log('NSR ID in url is', this.props.location.query);
50 console.log(this.props)
51 nsr_id = this.props.location.query.id;
55 RecordViewStore.getNSR(nsr_id);
56 RecordViewStore.getRawNSR(nsr_id);
57 RecordViewStore.getNSRSocket(nsr_id);
58 RecordViewStore.getConfigJobSocket(nsr_id);
60 loadRecord = (record) => {
61 RecordViewActions.loadRecord(record);
62 RecordViewStore['getRaw' + record.type.toUpperCase()](record.id)
63 RecordViewStore['get' + record.type.toUpperCase() + 'Socket'](record.id)
65 recordDetailsToggle = () => {
67 showRecordDetails: !this.state.showRecordDetails
71 let {location} = this.props;
73 let mgmtDomainName = window.location.hash.split('/')[2];
74 let recordDetails = this.state.showRecordDetails || null;
79 name: 'COMPUTE TOPOLOGY',
80 onClick: this.context.router.push.bind(this, {pathname:'/compute-topology', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
83 if (location.query.sdnpresent == 'true') {
85 name: 'NETWORK TOPOLOGY',
86 onClick: this.context.router.push.bind(this, {pathname:'/network-topology', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
90 let nav = <AppHeader nav={navItems} />
91 if (this.state.showRecordDetails) {
92 recordDetails = <RecordDetails isLoading={this.state.detailLoading} data={this.state.rawData} />
95 <div className="app-body recordView">
97 <div className="recordViewer">
98 <i className="corner-accent top left"></i>
99 <i className="corner-accent top right"></i>
100 <div className="dashboardCard_wrapper recordPanels">
101 <RecordNavigator activeNavID={this.state.recordID} nav={this.state.nav} loadRecord={this.loadRecord} isLoading={this.state.isLoading} />
102 <RecordCard jobData={this.state.jobData} isLoading={this.state.cardLoading} type={this.state.recordType} data={this.state.recordData} recordDetailsToggleValue={this.state.showRecordDetails} vnfrs={this.state.vnfrs} navRef={this.state.nav} recordDetailsToggleFn={this.recordDetailsToggle} />
105 <i className="corner-accent bottom left"></i>
106 <i className="corner-accent bottom right"></i>
113 RecordView.contextTypes = {
114 router: React.PropTypes.object