3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
18 import React from 'react';
19 import AltContainer from 'alt-container';
20 import Alt from './skyquakeAltInstance.js';
21 import SkyquakeNav from './skyquakeNav.jsx';
22 import EventCenter from './eventCenter.jsx';
23 import SkyquakeContainerActions from './skyquakeContainerActions.js'
24 import SkyquakeContainerStore from './skyquakeContainerStore.js';
25 import Breadcrumbs from 'react-breadcrumbs';
26 import Utils from 'utils/utils.js';
27 import _ from 'lodash';
28 import Crouton from 'react-crouton';
29 import ScreenLoader from 'widgets/screen-loader/screenLoader.jsx';
30 import './skyquakeApp.scss';
31 // import 'style/reset.css';
32 import 'style/core.css';
33 export default class skyquakeContainer extends React.Component {
37 this.state = SkyquakeContainerStore.getState();
38 //This will be populated via a store/source
39 this.state.nav = this.props.nav || [];
40 this.state.eventCenterIsOpen = false;
41 this.state.currentPlugin = SkyquakeContainerStore.currentPlugin;
44 componentWillMount() {
47 Utils.bootstrapApplication().then(function() {
48 SkyquakeContainerStore.listen(self.listener);
49 SkyquakeContainerStore.getNav();
50 SkyquakeContainerStore.getEventStreams();
53 // Load multiplex-client
54 const script = document.createElement("script");
56 script.src = "/multiplex-client";
59 document.body.appendChild(script);
61 Utils.setupMultiplexClient();
64 componentWillUnmount() {
65 SkyquakeContainerStore.unlisten(this.listener);
67 listener = (state) => {
71 //console.log("window.location.hash=", window.location.hash);
72 // First element in the results of match will be the part of the string
73 // that matched the expression. this string should be true against
74 // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
75 var re = /#\/login?(\?|\/|$)/i;
76 //console.log("res=", window.location.hash.match(re));
77 return (window.location.hash.match(re)) ? true : false;
79 onToggle = (isOpen) => {
81 eventCenterIsOpen: isOpen
86 const {displayNotification, notificationMessage, displayScreenLoader, ...state} = this.state;
89 if (this.matchesLoginUrl()) {
92 <div className="skyquakeApp">
98 let tag = this.props.routes[this.props.routes.length-1].name ? ': '
99 + this.props.routes[this.props.routes.length-1].name : '';
100 let routeName = this.props.location.pathname.split('/')[1];
102 <AltContainer flux={Alt}>
103 <div className="skyquakeApp wrap">
106 message={notificationMessage}
108 hidden={!(displayNotification && notificationMessage)}
109 onDismiss={SkyquakeContainerActions.hideNotification}
111 <ScreenLoader show={displayScreenLoader}/>
112 <SkyquakeNav nav={this.state.nav}
113 currentPlugin={this.state.currentPlugin}
114 store={SkyquakeContainerStore} />
115 <div className="titleBar">
116 <h1>{this.state.currentPlugin + tag}</h1>
118 <div className={"application " + routeName}>
119 {this.props.children}
121 <EventCenter className="eventCenter"
122 notifications={this.state.notifications}
123 newNotificationEvent={this.state.newNotificationEvent}
124 newNotificationMsg={this.state.newNotificationMsg}
125 onToggle={this.onToggle} />
133 skyquakeContainer.contextTypes = {
134 router: React.PropTypes.object
139 routes={this.props.routes}
140 params={this.props.params}