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 SkyquakeNotification from '../skyquake_notification/skyquakeNotification.jsx';
30 import ScreenLoader from 'widgets/screen-loader/screenLoader.jsx';
31 import {SkyquakeRBAC, isRBACValid} from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
32 import ROLES from 'utils/roleConstants.js';
33 import './skyquakeApp.scss';
34 // import 'style/reset.css';
35 import 'style/core.css';
36 const PROJECT_ROLES = ROLES.PROJECT;
37 const PLATFORM = ROLES.PLATFORM;
38 export default class skyquakeContainer extends React.Component {
42 this.state = SkyquakeContainerStore.getState();
43 //This will be populated via a store/source
44 this.state.nav = this.props.nav || [];
45 this.state.eventCenterIsOpen = false;
46 this.state.currentPlugin = SkyquakeContainerStore.currentPlugin;
50 userProfile: this.state.user
54 return this.state.user;
56 componentWillMount() {
59 Utils.bootstrapApplication().then(function() {
60 SkyquakeContainerStore.listen(self.listener);
61 SkyquakeContainerStore.getNav();
62 SkyquakeContainerStore.getUserProfile();
63 SkyquakeContainerStore.getEventStreams();
66 // Load multiplex-client
67 const script = document.createElement("script");
69 script.src = "/multiplex-client";
72 document.body.appendChild(script);
74 Utils.setupMultiplexClient();
77 componentWillUnmount() {
78 SkyquakeContainerStore.unlisten(this.listener);
80 listener = (state) => {
84 //console.log("window.location.hash=", window.location.hash);
85 // First element in the results of match will be the part of the string
86 // that matched the expression. this string should be true against
87 // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
88 var re = /#\/login?(\?|\/|$)/i;
89 //console.log("res=", window.location.hash.match(re));
90 return (window.location.hash.match(re)) ? true : false;
92 onToggle = (isOpen) => {
94 eventCenterIsOpen: isOpen
99 const {displayNotification, notificationData, displayScreenLoader,...state} = this.state;
100 const User = this.state.user || {};
101 const rbacValid = isRBACValid(User, [PLATFORM.SUPER, PLATFORM.ADMIN, PLATFORM.OPER]);
103 let nav = _cloneDeep(this.state.nav);
104 if (this.matchesLoginUrl()) {
106 <AltContainer flux={Alt}>
107 <div className="skyquakeApp">
108 {this.props.children}
113 let tag = this.props.routes[this.props.routes.length-1].name ? ': '
114 + this.props.routes[this.props.routes.length-1].name : '';
115 let routeName = this.props.location.pathname.split('/')[1];
117 <AltContainer flux={Alt}>
118 <div className="skyquakeApp wrap">
119 <SkyquakeNotification
120 data={this.state.notificationData}
121 visible={displayNotification}
122 onDismiss={SkyquakeContainerActions.hideNotification}
124 <ScreenLoader show={displayScreenLoader}/>
125 <SkyquakeNav nav={nav}
126 currentPlugin={this.state.currentPlugin}
127 currentUser={this.state.user.userId}
128 currentProject={this.state.user.projectId}
129 store={SkyquakeContainerStore}
130 projects={this.state.projects} />
131 <div className="titleBar">
132 <h1>{(this.state.nav.name ? this.state.nav.name.replace('_', ' ').replace('-', ' ') : this.state.currentPlugin && this.state.currentPlugin.replace('_', ' ').replace('-', ' ')) + tag}</h1>
134 <div className={"application " + routeName}>
135 {this.props.children}
139 <EventCenter className="eventCenter"
140 notifications={this.state.notifications}
141 newNotificationEvent={this.state.newNotificationEvent}
142 newNotificationMsg={this.state.newNotificationMsg}
143 onToggle={this.onToggle} />
153 skyquakeContainer.childContextTypes = {
154 userProfile: React.PropTypes.object
156 skyquakeContainer.contextTypes = {
157 router: React.PropTypes.object
162 routes={this.props.routes}
163 params={this.props.params}