skyquake/plugins/launchpad/src/recordViewer/recordView.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 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 {
  30   constructor(props) {
  31     super(props);
  32     this.state = RecordViewStore.getState();
  33     this.state.showRecordDetails = false;
  34     this.state.jobData = [];
  35     RecordViewStore.listen(this.storeListener);
  36   }
  37   storeListener = (state) => {
  38     this.setState(state);
  39   }
  40   componentWillUnmount = () => {
  41     RecordViewStore.handleCloseSocket();
  42     RecordViewStore.handleCloseJobSocket();
  43     RecordViewStore.unlisten(this.storeListener);
  44   }
  45   componentDidMount() {
  46     let nsrRegEx = new RegExp("([0-9a-zA-Z-]+)\/detail");
  47     let nsr_id;
  48     try {
  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;
  52     } catch (e) {
  53
  54     }
  55     RecordViewStore.getNSR(nsr_id);
  56     RecordViewStore.getRawNSR(nsr_id);
  57     RecordViewStore.getNSRSocket(nsr_id);
  58     RecordViewStore.getConfigJobSocket(nsr_id);
  59   }
  60   loadRecord = (record) => {
  61     RecordViewActions.loadRecord(record);
  62     RecordViewStore['getRaw' + record.type.toUpperCase()](record.id)
  63     RecordViewStore['get' + record.type.toUpperCase() + 'Socket'](record.id)
  64   }
  65   recordDetailsToggle = () => {
  66     this.setState({
  67       showRecordDetails: !this.state.showRecordDetails
  68     })
  69   }
  70   render() {
  71     let {location} = this.props;
  72     let html;
  73     let mgmtDomainName = window.location.hash.split('/')[2];
  74     let recordDetails = this.state.showRecordDetails || null;
  75     let nsrId = 0;
  76     let navItems = [{
  77       name: 'Viewport'
  78     },{
  79       name: 'COMPUTE TOPOLOGY',
  80       onClick: this.context.router.push.bind(this, {pathname:'/compute-topology', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
  81     }];
  82
  83     if (location.query.sdnpresent == 'true') {
  84       navItems.push({
  85          name: 'NETWORK TOPOLOGY',
  86                onClick: this.context.router.push.bind(this, {pathname:'/network-topology', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
  87       });
  88     }
  89
  90     let nav = <AppHeader nav={navItems} />
  91     if (this.state.showRecordDetails) {
  92     recordDetails = <RecordDetails isLoading={this.state.detailLoading} data={this.state.rawData} />
  93     }
  94     html = (
  95       <div className="app-body recordView">
  96       {nav}
  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} />
 103             {recordDetails}
 104           </div>
 105           <i className="corner-accent bottom left"></i>
 106           <i className="corner-accent bottom right"></i>
 107         </div>
 108       </div>
 109     );
 110     return html;
 111   }
 112 }
 113 RecordView.contextTypes = {
 114     router: React.PropTypes.object
 115 };