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 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 {
  39     constructor(props) {
  40         super(props);
  41         let self = this;
  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;
  47     }
  48     getChildContext() {
  49         return {
  50           userProfile: this.state.user
  51         };
  52     }
  53     getUserProfile() {
  54         return this.state.user;
  55     }
  56     componentWillMount() {
  57         let self = this;
  58
  59         Utils.bootstrapApplication().then(function() {
  60             SkyquakeContainerStore.listen(self.listener);
  61             SkyquakeContainerStore.getNav();
  62             SkyquakeContainerStore.getUserProfile();
  63             SkyquakeContainerStore.getEventStreams();
  64         });
  65
  66         // Load multiplex-client
  67         const script = document.createElement("script");
  68
  69         script.src = "/multiplex-client";
  70         script.async = true;
  71
  72         document.body.appendChild(script);
  73
  74         Utils.setupMultiplexClient();
  75     }
  76
  77     componentWillUnmount() {
  78         SkyquakeContainerStore.unlisten(this.listener);
  79     }
  80     listener = (state) => {
  81         this.setState(state);
  82     }
  83     matchesLoginUrl() {
  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;
  91     }
  92     onToggle = (isOpen) => {
  93         this.setState({
  94             eventCenterIsOpen: isOpen
  95         });
  96     }
  97
  98     render() {
  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]);
 102         var html;
 103         let nav = _cloneDeep(this.state.nav);
 104         if (this.matchesLoginUrl()) {
 105             html = (
 106                 <AltContainer flux={Alt}>
 107                     <div className="skyquakeApp">
 108                         {this.props.children}
 109                     </div>
 110                 </AltContainer>
 111             );
 112         } else {
 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];
 116             html = (
 117                 <AltContainer flux={Alt}>
 118                     <div className="skyquakeApp wrap">
 119                         <SkyquakeNotification
 120                             data={this.state.notificationData}
 121                             visible={displayNotification}
 122                             onDismiss={SkyquakeContainerActions.hideNotification}
 123                         />
 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>
 133                         </div>
 134                         <div className={"application " + routeName}>
 135                             {this.props.children}
 136                         </div>
 137                         {
 138                             rbacValid ?
 139                                 <EventCenter className="eventCenter"
 140                                     notifications={this.state.notifications}
 141                                     newNotificationEvent={this.state.newNotificationEvent}
 142                                     newNotificationMsg={this.state.newNotificationMsg}
 143                                     onToggle={this.onToggle} />
 144                             : null
 145                         }
 146                     </div>
 147                 </AltContainer>
 148             );
 149         }
 150         return html;
 151     }
 152 }
 153 skyquakeContainer.childContextTypes = {
 154   userProfile: React.PropTypes.object
 155 };
 156 skyquakeContainer.contextTypes = {
 157     router: React.PropTypes.object
 158   };
 159
 160 /*
 161 <Breadcrumbs
 162                             routes={this.props.routes}
 163                             params={this.props.params}
 164                             separator=" | "
 165                         />
 166  */