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 './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
  43     componentWillMount() {
  44         let self = this;
  45
  46         Utils.bootstrapApplication().then(function() {
  47             SkyquakeContainerStore.listen(self.listener);
  48             SkyquakeContainerStore.getNav();
  49             SkyquakeContainerStore.getEventStreams();
  50         });
  51
  52         // Load multiplex-client
  53         const script = document.createElement("script");
  54
  55         script.src = "/multiplex-client";
  56         script.async = true;
  57
  58         document.body.appendChild(script);
  59
  60         Utils.setupMultiplexClient();
  61     }
  62
  63     componentWillUnmount() {
  64         SkyquakeContainerStore.unlisten(this.listener);
  65     }
  66     listener = (state) => {
  67         this.setState(state);
  68     }
  69     matchesLoginUrl() {
  70         //console.log("window.location.hash=", window.location.hash);
  71         // First element in the results of match will be the part of the string
  72         // that matched the expression. this string should be true against
  73         // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
  74         var re = /#\/login?(\?|\/|$)/i;
  75         //console.log("res=", window.location.hash.match(re));
  76         return (window.location.hash.match(re)) ? true : false;
  77     }
  78     onToggle = (isOpen) => {
  79         this.setState({
  80             eventCenterIsOpen: isOpen
  81         });
  82     }
  83
  84     render() {
  85         const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state;
  86         var html;
  87
  88         if (this.matchesLoginUrl()) {
  89             html = (
  90                 <AltContainer>
  91                     <div className="skyquakeApp">
  92                         {this.props.children}
  93                     </div>
  94                 </AltContainer>
  95             );
  96         } else {
  97             let tag = this.props.routes[this.props.routes.length-1].name ? ': '
  98                 + this.props.routes[this.props.routes.length-1].name : '';
  99             let routeName = this.props.location.pathname.split('/')[1];
 100             html = (
 101                 <AltContainer flux={Alt}>
 102                     <div className="skyquakeApp wrap">
 103                         <Crouton
 104                             id={Date.now()}
 105                             message={notificationMessage}
 106                             type={notificationType}
 107                             hidden={!(displayNotification && notificationMessage)}
 108                             onDismiss={SkyquakeContainerActions.hideNotification}
 109                             timeout= {5000}
 110                         />
 111                         <ScreenLoader show={displayScreenLoader}/>
 112                         <SkyquakeNav nav={this.state.nav}
 113                             currentPlugin={this.state.currentPlugin}
 114                             store={SkyquakeContainerStore} />
 115                         <div className="titleBar">
 116                             <h1>{this.state.currentPlugin + tag}</h1>
 117                         </div>
 118                         <div className={"application " + routeName}>
 119                             {this.props.children}
 120                         </div>
 121                         <EventCenter className="eventCenter"
 122                             notifications={this.state.notifications}
 123                             newNotificationEvent={this.state.newNotificationEvent}
 124                             newNotificationMsg={this.state.newNotificationMsg}
 125                             onToggle={this.onToggle} />
 126                     </div>
 127                 </AltContainer>
 128             );
 129         }
 130         return html;
 131     }
 132 }
 133 skyquakeContainer.contextTypes = {
 134     router: React.PropTypes.object
 135   };
 136
 137 /*
 138 <Breadcrumbs
 139                             routes={this.props.routes}
 140                             params={this.props.params}
 141                             separator=" | "
 142                         />
 143  */