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 TopologyL2Store from './topologyL2Store.js';
21 import TopologyL2Actions from './topologyL2Actions.js';
22 import RecordDetail from '../recordViewer/recordDetails.jsx';
23 import './topologyL2View.scss';
24 import TopologyDetail from './detailView.jsx';
25 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
26 import AppHeader from 'widgets/header/header.jsx';
27 import TopologyL2Graph from 'widgets/topology/topologyL2Graph.jsx';
28 import Button from 'widgets/button/rw.button.js';
30 export default class TopologyL2view extends React.Component {
33 this.state = TopologyL2Store.getState();
34 TopologyL2Store.listen(this.storeListener);
37 this.componentWillUnmount();
38 let loc = window.location.hash.split('/');
42 window.location.hash = loc.join('/');
45 this.compoentWillUnmount();
46 let loc = window.location.hash.split('/');
50 window.location.hash = loc.join('/');
52 storeListener = (state) => {
56 componentWillUnmount() {
57 TopologyL2Store.closeSocket();
58 TopologyL2Store.unlisten(this.storeListener);
61 TopologyL2Store.getTopologyData('dummy-id');
64 onNodeEvent = (node_id) => {
65 TopologyL2Actions.nodeClicked(node_id);
68 handleReloadData = () => {
69 console.log("TopologyView.handleReloadData");
70 this.componentDidMount();
75 let location = this.props.location;
78 onClick: this.context.router.push.bind(this, {pathname:'/viewport', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
80 name: 'COMPUTE TOPOLOGY',
81 onClick: this.context.router.push.bind(this, {pathname:'/compute-topology', query: {id: location.query.id, sdnpresent: location.query.sdnpresent}})
83 name: 'NETWORK TOPOLOGY'
87 let nav = <AppHeader title="Launchpad: Viewport: Network Topology" nav={navItems} />
88 let reloadButton = null;
89 if (this.state.ajax_mode) {
90 reloadButton = <Button label="Reload data" className="reloadButton"
91 onClick={this.handleReloadData} />
95 <div className="app-body topologyL2ViewAppBody">
98 <div className="topologyL2View">
99 <i className="corner-accent top left"></i>
100 <i className="corner-accent top right"></i>
101 <TopologyL2Graph data={this.state.topologyData}
102 nodeEvent={this.onNodeEvent}
103 debugMode={this.props.debugMode}
104 headerExtras={reloadButton}
106 <TopologyDetail data={this.state.detailData || {}}
107 isLoading={this.state.isLoading}
108 debugMode={this.props.debugMode}
110 <i className="corner-accent bottom left"></i>
111 <i className="corner-accent bottom right"></i>
120 TopologyL2view.contextTypes = {
121 router: React.PropTypes.object
123 TopologyL2view.propTypes = {
124 debugMode: React.PropTypes.bool
126 TopologyL2view.defaultProps = {