update odlux and featureaggregator

v2 update odlux and featureaggregator bundles

Issue-ID: SDNC-1008
Signed-off-by: herbert <herbert.eiselt@highstreet-technologies.com>
Change-Id: I0018d7bfa3a0e6896c1b210b539a574af9808e22
Signed-off-by: herbert <herbert.eiselt@highstreet-technologies.com>

1 files changed, 208 insertions, 0 deletions

diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
new file mode 100644
index 000000000..7168ff496
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -0,0 +1,208 @@
+/**

+ * ============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 { 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: {

+    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(new UpdateAuthentication(null));

+      dispatcher.dispatch(new ReplaceAction("/login"));

+    },

+    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 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}>

+        <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 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