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 '../skyquake_nav/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;
44 userProfile: this.state.user
48 return this.state.user;
50 componentWillMount() {
53 Utils.bootstrapApplication().then(function() {
54 SkyquakeContainerStore.listen(self.listener);
55 SkyquakeContainerStore.getNav();
56 SkyquakeContainerStore.getUserProfile();
57 SkyquakeContainerStore.getEventStreams();
60 // Load multiplex-client
61 const script = document.createElement("script");
63 script.src = "/multiplex-client";
66 document.body.appendChild(script);
68 Utils.setupMultiplexClient();
71 componentWillUnmount() {
72 SkyquakeContainerStore.unlisten(this.listener);
74 listener = (state) => {
78 //console.log("window.location.hash=", window.location.hash);
79 // First element in the results of match will be the part of the string
80 // that matched the expression. this string should be true against
81 // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
82 var re = /#\/login?(\?|\/|$)/i;
83 //console.log("res=", window.location.hash.match(re));
84 return (window.location.hash.match(re)) ? true : false;
86 onToggle = (isOpen) => {
88 eventCenterIsOpen: isOpen
93 const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state;
95 let nav = _.cloneDeep(this.state.nav);
96 if (this.matchesLoginUrl()) {
99 <div className="skyquakeApp">
100 {this.props.children}
105 let tag = this.props.routes[this.props.routes.length-1].name ? ': '
106 + this.props.routes[this.props.routes.length-1].name : '';
107 let routeName = this.props.location.pathname.split('/')[1];
109 <AltContainer flux={Alt}>
110 <div className="skyquakeApp wrap">
113 message={notificationMessage}
114 type={notificationType}
115 hidden={!(displayNotification && notificationMessage)}
116 onDismiss={SkyquakeContainerActions.hideNotification}
119 <ScreenLoader show={displayScreenLoader}/>
120 <SkyquakeNav nav={nav}
121 currentPlugin={this.state.user.currentPlugin}
122 currentUser={this.state.user.userId}
123 currentProject={this.state.user.projectId}
124 store={SkyquakeContainerStore}
125 projects={this.state.projects} />
126 <div className="titleBar">
127 <h1>{(this.state.nav.name ? this.state.nav.name.replace('_', ' ').replace('-', ' ') : this.state.currentPlugin && this.state.currentPlugin.replace('_', ' ').replace('-', ' ')) + tag}</h1>
129 <div className={"application " + routeName}>
130 {this.props.children}
132 <EventCenter className="eventCenter"
133 notifications={this.state.notifications}
134 newNotificationEvent={this.state.newNotificationEvent}
135 newNotificationMsg={this.state.newNotificationMsg}
136 onToggle={this.onToggle} />
144 skyquakeContainer.childContextTypes = {
145 userProfile: React.PropTypes.object
147 skyquakeContainer.contextTypes = {
148 router: React.PropTypes.object
153 routes={this.props.routes}
154 params={this.props.params}