skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   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
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  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.
  16  *
  17  */
  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 {
  33     constructor(props) {
  34         super(props);
  35         let self = this;
  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;
  41     }
  42     getChildContext() {
  43         return {
  44           userProfile: this.state.user
  45         };
  46     }
  47     getUserProfile() {
  48         return this.state.user;
  49     }
  50     componentWillMount() {
  51         let self = this;
  52
  53         Utils.bootstrapApplication().then(function() {
  54             SkyquakeContainerStore.listen(self.listener);
  55             SkyquakeContainerStore.getNav();
  56             SkyquakeContainerStore.getUserProfile();
  57             SkyquakeContainerStore.getEventStreams();
  58         });
  59
  60         // Load multiplex-client
  61         const script = document.createElement("script");
  62
  63         script.src = "/multiplex-client";
  64         script.async = true;
  65
  66         document.body.appendChild(script);
  67
  68         Utils.setupMultiplexClient();
  69     }
  70
  71     componentWillUnmount() {
  72         SkyquakeContainerStore.unlisten(this.listener);
  73     }
  74     listener = (state) => {
  75         this.setState(state);
  76     }
  77     matchesLoginUrl() {
  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;
  85     }
  86     onToggle = (isOpen) => {
  87         this.setState({
  88             eventCenterIsOpen: isOpen
  89         });
  90     }
  91
  92     render() {
  93         const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state;
  94         var html;
  95         let nav = _.cloneDeep(this.state.nav);
  96         if (this.matchesLoginUrl()) {
  97             html = (
  98                 <AltContainer>
  99                     <div className="skyquakeApp">
 100                         {this.props.children}
 101                     </div>
 102                 </AltContainer>
 103             );
 104         } else {
 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];
 108             html = (
 109                 <AltContainer flux={Alt}>
 110                     <div className="skyquakeApp wrap">
 111                         <Crouton
 112                             id={Date.now()}
 113                             message={notificationMessage}
 114                             type={notificationType}
 115                             hidden={!(displayNotification && notificationMessage)}
 116                             onDismiss={SkyquakeContainerActions.hideNotification}
 117                             timeout= {5000}
 118                         />
 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>
 128                         </div>
 129                         <div className={"application " + routeName}>
 130                             {this.props.children}
 131                         </div>
 132                         <EventCenter className="eventCenter"
 133                             notifications={this.state.notifications}
 134                             newNotificationEvent={this.state.newNotificationEvent}
 135                             newNotificationMsg={this.state.newNotificationMsg}
 136                             onToggle={this.onToggle} />
 137                     </div>
 138                 </AltContainer>
 139             );
 140         }
 141         return html;
 142     }
 143 }
 144 skyquakeContainer.childContextTypes = {
 145   userProfile: React.PropTypes.object
 146 };
 147 skyquakeContainer.contextTypes = {
 148     router: React.PropTypes.object
 149   };
 150
 151 /*
 152 <Breadcrumbs
 153                             routes={this.props.routes}
 154                             params={this.props.params}
 155                             separator=" | "
 156                         />
 157  */