skyquake/plugins/launchpad/src/topologyView/topologyView.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 TopologyStore from './topologyStore.js';
  21 import RecordDetail from '../recordViewer/recordDetails.jsx';
  22 import './topologyView.scss';
  23 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
  24 import AppHeader from 'widgets/header/header.jsx';
  25 import TopologyTree from 'widgets/topology/topologyTree.jsx';
  26 import LaunchpadBreadcrumbs from '../launchpadBreadcrumbs.jsx';
  27 import Button from 'widgets/button/rw.button.js';
  28
  29 export default class Topologyview extends React.Component {
  30     constructor(props) {
  31         super(props);
  32         this.state = TopologyStore.getState();
  33         TopologyStore.listen(this.storeListener);
  34     }
  35     openAbout = () => {
  36         this.componentWillUnmount();
  37         let loc = window.location.hash.split('/');
  38         loc.pop();
  39         loc.pop();
  40         loc.push('lp-about');
  41         window.location.hash = loc.join('/');
  42     }
  43     openDebug = () =>  {
  44         this.componentWillUnmount();
  45         let loc = window.location.hash.split('/');
  46         loc.pop();
  47         loc.pop();
  48         loc.push('lp-debug');
  49         window.location.hash = loc.join('/');
  50     }
  51     storeListener = (state) => {
  52         this.setState(state);
  53     }
  54
  55     componentWillUnmount = () => {
  56         TopologyStore.closeSocket();
  57         TopologyStore.unlisten(this.storeListener);
  58     }
  59     componentDidMount() {
  60         let nsrRegEx = new RegExp("([0-9a-zA-Z-]+)\/compute-topology");
  61         let nsr_id;
  62
  63         try {
  64             nsr_id =  this.props.location.query.id;
  65         } catch (e) {
  66             console.log("TopologyView.componentDidMount exception: ", e);
  67         }
  68         TopologyStore.getTopologyData(nsr_id);
  69     }
  70     selectNode = (node) => {
  71         TopologyStore.selectNode(node);
  72     }
  73
  74     handleReloadData = () => {
  75         this.componentDidMount();
  76     }
  77
  78     render() {
  79         let location = this.props.location;
  80         let html;
  81         let navItems = [{
  82           name: 'Viewport',
  83           onClick: this.context.router.push.bind(this, {pathname:'/viewport', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
  84         },{
  85           name: 'COMPUTE TOPOLOGY'
  86         }];
  87
  88
  89         if (location.query.sdnpresent == 'true') {
  90             navItems.push({
  91              name: 'NETWORK TOPOLOGY',
  92               onClick: this.context.router.push.bind(this, {pathname:'/network-topology', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
  93             });
  94         }
  95         let nav = <AppHeader nav={navItems} />
  96         html = (
  97             <div className="app-body topologyAppBody">
  98             {nav}
  99                 <div className="topologyView">
 100                     <i className="corner-accent top left"></i>
 101                     <i className="corner-accent top right"></i>
 102                     <TopologyTree
 103                         data={this.state.topologyData}
 104                         selectNode={this.selectNode}
 105                         hasSelected={this.state.hasSelected}
 106                     />
 107                     <RecordDetail data={this.state.detailView || {}} isLoading={this.state.detailsLoading} />
 108                     <i className="corner-accent bottom left"></i>
 109                     <i className="corner-accent bottom right"></i>
 110                 </div>
 111             </div>
 112         );
 113         return html;
 114     }
 115 }
 116 Topologyview.contextTypes = {
 117     router: React.PropTypes.object
 118 };