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 Crouton from 'react-crouton';
28 import ScreenLoader from 'widgets/screen-loader/screenLoader.jsx';
29 import './skyquakeApp.scss';
30 // import 'style/reset.css';
31 import 'style/core.css';
32 export default class skyquakeContainer extends React.Component {
36 this.state = SkyquakeContainerStore.getState();
37 //This will be populated via a store/source
38 this.state.nav = this.props.nav || [];
39 this.state.eventCenterIsOpen = false;
40 this.state.currentPlugin = SkyquakeContainerStore.currentPlugin;
43 componentWillMount() {
46 Utils.bootstrapApplication().then(function() {
47 SkyquakeContainerStore.listen(self.listener);
48 SkyquakeContainerStore.getNav();
49 SkyquakeContainerStore.getEventStreams();
52 // Load multiplex-client
53 const script = document.createElement("script");
55 script.src = "/multiplex-client";
58 document.body.appendChild(script);
60 Utils.setupMultiplexClient();
63 componentWillUnmount() {
64 SkyquakeContainerStore.unlisten(this.listener);
66 listener = (state) => {
70 //console.log("window.location.hash=", window.location.hash);
71 // First element in the results of match will be the part of the string
72 // that matched the expression. this string should be true against
73 // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
74 var re = /#\/login?(\?|\/|$)/i;
75 //console.log("res=", window.location.hash.match(re));
76 return (window.location.hash.match(re)) ? true : false;
78 onToggle = (isOpen) => {
80 eventCenterIsOpen: isOpen
85 const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state;
88 if (this.matchesLoginUrl()) {
91 <div className="skyquakeApp">
97 let tag = this.props.routes[this.props.routes.length-1].name ? ': '
98 + this.props.routes[this.props.routes.length-1].name : '';
99 let routeName = this.props.location.pathname.split('/')[1];
101 <AltContainer flux={Alt}>
102 <div className="skyquakeApp wrap">
105 message={notificationMessage}
106 type={notificationType}
107 hidden={!(displayNotification && notificationMessage)}
108 onDismiss={SkyquakeContainerActions.hideNotification}
110 <ScreenLoader show={displayScreenLoader}/>
111 <SkyquakeNav nav={this.state.nav}
112 currentPlugin={this.state.currentPlugin}
113 store={SkyquakeContainerStore} />
114 <div className="titleBar">
115 <h1>{this.state.currentPlugin + tag}</h1>
117 <div className={"application " + routeName}>
118 {this.props.children}
120 <EventCenter className="eventCenter"
121 notifications={this.state.notifications}
122 newNotificationEvent={this.state.newNotificationEvent}
123 newNotificationMsg={this.state.newNotificationMsg}
124 onToggle={this.onToggle} />
132 skyquakeContainer.contextTypes = {
133 router: React.PropTypes.object
138 routes={this.props.routes}
139 params={this.props.params}