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