X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=sdnr%2Fwt%2Fodlux%2Fframework%2Fsrc%2Fcomponents%2FtitleBar.tsx;fp=sdnr%2Fwt%2Fodlux%2Fframework%2Fsrc%2Fcomponents%2FtitleBar.tsx;h=7872e51daf65af0f61264052e4ac9f8179093648;hb=1a868116614dd9996c78e69941b537e9da19460b;hp=5d916e8c82d67e0258d6c41b25e91ed10e9c6197;hpb=9912e1626d93afeb4f7148dd5d826ae1caa1ef8a;p=ccsdk%2Ffeatures.git

diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index 5d916e8c8..7872e51da 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -1,218 +1,226 @@
-/**
- * ============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';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-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 { logoutUser } from '../actions/authentication';
-import { PushAction, 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: {
-    zIndex: theme.zIndex.drawer + 1,
-  },
-  grow: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-  icon: {
-    marginLeft: 16,
-    marginRight: 8
-  },
-  connected: {
-    color: "green"
-  },
-  notConnected: {
-    color: "red"
-  },
-  notificationInfo: {
-    marginLeft: 5
-  }
-});
-
-const mapDispatch = (dispatcher: IDispatcher) => {
-  return {
-    logout: () => {
-      dispatcher.dispatch(logoutUser());
-      dispatcher.dispatch(new ReplaceAction("/login"));
-    },
-    openSettings : () =>{
-      dispatcher.dispatch(new PushAction("/settings"));
-    },
-    toggleMainMenu: (value: boolean, value2: boolean) => {
-      dispatcher.dispatch(new MenuAction(value));
-      dispatcher.dispatch(new MenuClosedByUser(value2))
-    }
-  }
-};
-
-type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>
-
-class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {
-
-  constructor(props: TitleBarProps) {
-    super(props);
-    this.state = {
-      anchorEl: null
-    }
-
-  }
-  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 aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} />  |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
-      : <Typography variant="body1" aria-label="notifications-are-not-available" 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}>
-        <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleMainMenu}>
-            <MenuIcon />
-          </IconButton>
-          <Logo />
-          <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>
-          {
-            // render toolbar
-            toolbarElements.map((item) => {
-              return item
-            })
-          }
-
-          {state.framework.authenticationState.user
-            ? (<div>
-              <Button aria-label="current user menu button"
-                aria-owns={open ? 'menu-appbar' : undefined}
-                aria-haspopup="true"
-                onClick={this.openMenu}
-                color="inherit"
-              >
-                <AccountCircle />
-                {state.framework.authenticationState.user.user}
-              </Button>
-              <Menu
-                id="menu-appbar"
-                anchorEl={this.state.anchorEl}
-                anchorOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
-                open={open}
-                onClose={this.closeMenu}
-              >
-                {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
-                <MenuItem 
-                 aria-label="settings-button"
-                 onClick={ () =>{
-                    this.props.openSettings();
-                    this.closeMenu(); }}>Settings</MenuItem>
-                <MenuItem
-                aria-label="logout-button"
-                onClick={() => {
-                  this.props.logout();
-                  this.closeMenu();
-                }}>Logout</MenuItem>
-              </Menu>
-            </div>)
-            : (<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 });
-  };
-
-  private closeMenu = () => {
-    this.setState({ anchorEl: null });
-  };
-}
-
-//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung
-
-export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));
+/**
+ * ============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';
+
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Block from '@mui/icons-material/Block';
+import Adjust from '@mui/icons-material/Adjust';
+import MenuIcon from '@mui/icons-material/Menu';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBan } from '@fortawesome/free-solid-svg-icons';
+import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { logoutUser } from '../actions/authentication';
+import { PushAction, 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: {
+    zIndex: theme.zIndex.drawer + 1,
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  icon: {
+    marginLeft: 16,
+    marginRight: 8
+  },
+  connected: {
+    color: "green"
+  },
+  notConnected: {
+    color: "red"
+  },
+  notificationInfo: {
+    marginLeft: 5
+  }
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => {
+  return {
+    logout: () => {
+      dispatcher.dispatch(logoutUser());
+      dispatcher.dispatch(new ReplaceAction("/login"));
+    },
+    openSettings : () =>{
+      dispatcher.dispatch(new PushAction("/settings"));
+    },
+    toggleMainMenu: (value: boolean, value2: boolean) => {
+      dispatcher.dispatch(new MenuAction(value));
+      dispatcher.dispatch(new MenuClosedByUser(value2))
+    }
+  }
+};
+
+type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>
+
+class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {
+
+  constructor(props: TitleBarProps) {
+    super(props);
+    this.state = {
+      anchorEl: null
+    }
+
+  }
+  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 aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} />  |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
+      : <Typography variant="body1" aria-label="notifications-are-not-available" 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 enableColorOnDark position="absolute" className={classes.appBar}>
+        <Toolbar>
+          <IconButton
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="Menu"
+            onClick={this.toggleMainMenu}
+            size="large">
+            <MenuIcon />
+          </IconButton>
+          <Logo />
+          <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>
+          {
+            // render toolbar
+            toolbarElements.map((item) => {
+              return item
+            })
+          }
+
+          {state.framework.authenticationState.user
+            ? (<div>
+              <Button aria-label="current user menu button"
+                aria-owns={open ? 'menu-appbar' : undefined}
+                aria-haspopup="true"
+                onClick={this.openMenu}
+                color="inherit"
+              >
+                <AccountCircle />
+                {state.framework.authenticationState.user.user}
+              </Button>
+              <Menu
+                id="menu-appbar"
+                anchorEl={this.state.anchorEl}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                open={open}
+                onClose={this.closeMenu}
+              >
+                {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
+                <MenuItem 
+                 aria-label="settings-button"
+                 onClick={ () =>{
+                    this.props.openSettings();
+                    this.closeMenu(); }}>Settings</MenuItem>
+                <MenuItem
+                aria-label="logout-button"
+                onClick={() => {
+                  this.props.logout();
+                  this.closeMenu();
+                }}>Logout</MenuItem>
+              </Menu>
+            </div>)
+            : (<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 });
+  };
+
+  private closeMenu = () => {
+    this.setState({ anchorEl: null });
+  };
+}
+
+//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung
+
+export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));
 export default TitleBar;
\ No newline at end of file