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 _cloneDeep from 'lodash/cloneDeep';
22 import SkyquakeNav from '../skyquake_nav/skyquakeNav.jsx';
23 import EventCenter from './eventCenter.jsx';
24 import SkyquakeContainerActions from './skyquakeContainerActions.js'
25 import SkyquakeContainerStore from './skyquakeContainerStore.js';
26 // import Breadcrumbs from 'react-breadcrumbs';
27 import Utils from 'utils/utils.js';
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;
45 userProfile: this.state.user
49 return this.state.user;
51 componentWillMount() {
54 Utils.bootstrapApplication().then(function() {
55 SkyquakeContainerStore.listen(self.listener);
56 SkyquakeContainerStore.getNav();
57 SkyquakeContainerStore.getUserProfile();
58 SkyquakeContainerStore.getEventStreams();
61 // Load multiplex-client
62 const script = document.createElement("script");
64 script.src = "/multiplex-client";
67 document.body.appendChild(script);
69 Utils.setupMultiplexClient();
72 componentWillUnmount() {
73 SkyquakeContainerStore.unlisten(this.listener);
75 listener = (state) => {
79 //console.log("window.location.hash=", window.location.hash);
80 // First element in the results of match will be the part of the string
81 // that matched the expression. this string should be true against
82 // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
83 var re = /#\/login?(\?|\/|$)/i;
84 //console.log("res=", window.location.hash.match(re));
85 return (window.location.hash.match(re)) ? true : false;
87 onToggle = (isOpen) => {
89 eventCenterIsOpen: isOpen
94 const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state;
96 let nav = _cloneDeep(this.state.nav);
97 if (this.matchesLoginUrl()) {
100 <div className="skyquakeApp">
101 {this.props.children}
106 let tag = this.props.routes[this.props.routes.length-1].name ? ': '
107 + this.props.routes[this.props.routes.length-1].name : '';
108 let routeName = this.props.location.pathname.split('/')[1];
110 <AltContainer flux={Alt}>
111 <div className="skyquakeApp wrap">
114 message={notificationMessage}
115 type={notificationType}
116 hidden={!(displayNotification && notificationMessage)}
117 onDismiss={SkyquakeContainerActions.hideNotification}
120 <ScreenLoader show={displayScreenLoader}/>
121 <SkyquakeNav nav={nav}
122 currentPlugin={this.state.user.currentPlugin}
123 currentUser={this.state.user.userId}
124 currentProject={this.state.user.projectId}
125 store={SkyquakeContainerStore}
126 projects={this.state.projects} />
127 <div className="titleBar">
128 <h1>{(this.state.nav.name ? this.state.nav.name.replace('_', ' ').replace('-', ' ') : this.state.currentPlugin && this.state.currentPlugin.replace('_', ' ').replace('-', ' ')) + tag}</h1>
130 <div className={"application " + routeName}>
131 {this.props.children}
133 <EventCenter className="eventCenter"
134 notifications={this.state.notifications}
135 newNotificationEvent={this.state.newNotificationEvent}
136 newNotificationMsg={this.state.newNotificationMsg}
137 onToggle={this.onToggle} />
145 skyquakeContainer.childContextTypes = {
146 userProfile: React.PropTypes.object
148 skyquakeContainer.contextTypes = {
149 router: React.PropTypes.object
154 routes={this.props.routes}
155 params={this.props.params}