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 _ from 'lodash';
  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
  44     componentWillMount() {
  45         let self = this;
  46
  47         Utils.bootstrapApplication().then(function() {
  48             SkyquakeContainerStore.listen(self.listener);
  49             SkyquakeContainerStore.getNav();
  50             SkyquakeContainerStore.getEventStreams();
  51         });
  52
  53         // Load multiplex-client
  54         const script = document.createElement("script");
  55
  56         script.src = "/multiplex-client";
  57         script.async = true;
  58
  59         document.body.appendChild(script);
  60
  61         Utils.setupMultiplexClient();
  62     }
  63
  64     componentWillUnmount() {
  65         SkyquakeContainerStore.unlisten(this.listener);
  66     }
  67     listener = (state) => {
  68         this.setState(state);
  69     }
  70     matchesLoginUrl() {
  71         //console.log("window.location.hash=", window.location.hash);
  72         // First element in the results of match will be the part of the string
  73         // that matched the expression. this string should be true against
  74         // (window.location.hash.match(re)[0]).startsWith(Utils.loginHash)
  75         var re = /#\/login?(\?|\/|$)/i;
  76         //console.log("res=", window.location.hash.match(re));
  77         return (window.location.hash.match(re)) ? true : false;
  78     }
  79     onToggle = (isOpen) => {
  80         this.setState({
  81             eventCenterIsOpen: isOpen
  82         });
  83     }
  84
  85     render() {
  86         const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state;
  87         var html;
  88
  89         if (this.matchesLoginUrl()) {
  90             html = (
  91                 <AltContainer>
  92                     <div className="skyquakeApp">
  93                         {this.props.children}
  94                     </div>
  95                 </AltContainer>
  96             );
  97         } else {
  98             let tag = this.props.routes[this.props.routes.length-1].name ? ': '
  99                 + this.props.routes[this.props.routes.length-1].name : '';
 100             let routeName = this.props.location.pathname.split('/')[1];
 101             html = (
 102                 <AltContainer flux={Alt}>
 103                     <div className="skyquakeApp wrap">
 104                         <Crouton
 105                             id={Date.now()}
 106                             message={notificationMessage}
 107                             type={notificationType}
 108                             hidden={!(displayNotification && notificationMessage)}
 109                             onDismiss={SkyquakeContainerActions.hideNotification}
 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  */