1 files changed, 102 insertions, 46 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index 81759d628..7168ff496 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -1,20 +1,20 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
 import * as React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
@@ -24,18 +24,23 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
+import Block from '@material-ui/icons/Block';
+import Adjust from '@material-ui/icons/Adjust';
 import MenuIcon from '@material-ui/icons/Menu';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBan } from '@fortawesome/free-solid-svg-icons';
+import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { UpdateAuthentication } from '../actions/authentication';
 import { ReplaceAction } from '../actions/navigationActions';
 
 import connect, { Connect, IDispatcher } from '../flux/connect';
 import Logo from './logo';
+import { MenuAction, MenuClosedByUser } from '../actions/menuAction';
 
 const styles = (theme: Theme) => createStyles({
   appBar: {
@@ -51,6 +56,15 @@ const styles = (theme: Theme) => createStyles({
   icon: {
     marginLeft: 16,
     marginRight: 8
+  },
+  connected: {
+    color: "green"
+  },
+  notConnected: {
+    color: "red"
+  },
+  notificationInfo: {
+    marginLeft: 5
   }
 });
 
@@ -59,6 +73,10 @@ const mapDispatch = (dispatcher: IDispatcher) => {
     logout: () => {
       dispatcher.dispatch(new UpdateAuthentication(null));
       dispatcher.dispatch(new ReplaceAction("/login"));
+    },
+    toggleMainMenu: (value: boolean, value2: boolean) => {
+      dispatcher.dispatch(new MenuAction(value));
+      dispatcher.dispatch(new MenuClosedByUser(value2))
     }
   }
 };
@@ -69,7 +87,6 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE
 
   constructor(props: TitleBarProps) {
     super(props);
-
     this.state = {
       anchorEl: null
     }
@@ -78,64 +95,103 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE
   render(): JSX.Element {
     const { classes, state, history, location } = this.props;
     const open = !!this.state.anchorEl;
+    let toolbarElements: Array<JSX.Element>;
+    toolbarElements = [];
+
+    // create notificationInfo element
+    const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?
+      (state.framework.applicationState.isWebsocketAvailable ?
+        <Typography variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} />  |</Typography> : <Typography variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
+      : <Typography variant="body1" className={classes.notificationInfo}>Notifications N/A |</Typography>;
+
+
+    // add notificationInfo element before help
+    if (state.framework.applicationRegistraion) {
+      let isNotificationInfoAdded = false;
+      Object.keys(state.framework.applicationRegistraion).map(key => {
+        const reg = state.framework.applicationRegistraion[key];
+        if (reg && reg.statusBarElement) {
+          if (key === "help") {
+            isNotificationInfoAdded = true;
+            toolbarElements.push(notificationInfo);
+          }
+          toolbarElements.push(<reg.statusBarElement key={key} />);
+        }
+      });
+
+      // add notificationInfo in case help wasn't found
+      if (!isNotificationInfoAdded) {
+        toolbarElements.push(notificationInfo);
+      }
+    }
 
     return (
-      <AppBar position="absolute" className={ classes.appBar }>
+      <AppBar position="absolute" className={classes.appBar}>
         <Toolbar>
-          <IconButton className={ classes.menuButton } color="inherit" aria-label="Menu">
+          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleMainMenu}>
             <MenuIcon />
           </IconButton>
           <Logo />
-          <Typography variant="title" color="inherit" >
-            { state.framework.applicationState.icon
-              ? (<FontAwesomeIcon className={ classes.icon } icon={ state.framework.applicationState.icon } />)
-              : null }
-            { state.framework.applicationState.title }
+          <Typography variant="h6" color="inherit" >
+            {state.framework.applicationState.icon
+              ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />)
+              : null}
+            {state.framework.applicationState.title}
           </Typography>
           <div className={classes.grow}></div>
-          { state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {
-            const reg = state.framework.applicationRegistraion[key];
-            return reg && reg.statusBarElement && <reg.statusBarElement key={key} /> || null
-          })}
-
-          { state.framework.authenticationState.user
+          {
+            // render toolbar
+            toolbarElements.map((item) => {
+              return item
+            })
+          }
+
+          {state.framework.authenticationState.user
             ? (<div>
-              <Button
-                aria-owns={ open ? 'menu-appbar' : undefined }
+              <Button aria-label="current user menu button"
+                aria-owns={open ? 'menu-appbar' : undefined}
                 aria-haspopup="true"
-                onClick={ this.openMenu }
+                onClick={this.openMenu}
                 color="inherit"
               >
                 <AccountCircle />
-                { state.framework.authenticationState.user.user }
+                {state.framework.authenticationState.user.user}
               </Button>
               <Menu
                 id="menu-appbar"
-                anchorEl={ this.state.anchorEl }
-                anchorOrigin={ {
+                anchorEl={this.state.anchorEl}
+                anchorOrigin={{
                   vertical: 'top',
                   horizontal: 'right',
-                } }
-                transformOrigin={ {
+                }}
+                transformOrigin={{
                   vertical: 'top',
                   horizontal: 'right',
-                } }
-                open={ open }
-                onClose={ this.closeMenu }
+                }}
+                open={open}
+                onClose={this.closeMenu}
               >
-                <MenuItem onClick={ this.closeMenu }>Profile</MenuItem>
-                <MenuItem onClick={ () => {
+                {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
+                <MenuItem onClick={() => {
                   this.props.logout();
                   this.closeMenu();
-                } }>Logout</MenuItem>
+                }}>Logout</MenuItem>
               </Menu>
             </div>)
-            : (<Button onClick={ () => { history.push('/login') } } color="inherit" disabled={ location.pathname == "/login" }>Login</Button>) }
+            : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)}
         </Toolbar>
       </AppBar>
     );
   };
 
+  private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => {
+    console.log(this.props);
+    if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) {
+      const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen
+      const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser
+      this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser);
+    }
+  }
 
   private openMenu = (event: React.MouseEvent<HTMLElement>) => {
     this.setState({ anchorEl: event.currentTarget });