Merge "Update ODLUX"

18 files changed, 1094 insertions, 975 deletions

diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
index b2a1f1f20..a04ab16af 100644
--- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
+++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
@@ -16,14 +16,18 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
 
-import Modal from '@material-ui/core/Modal';
-import Button from '@material-ui/core/Button';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import Modal from '@mui/material/Modal';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 
 import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions';
 
@@ -113,7 +117,7 @@ class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
                 </Typography>
               </CardContent>
               <CardActions>
-                <Button size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button>
+                <Button color="inherit" size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button>
               </CardActions>
             </Card>
           </div> || <div></div>
diff --git a/sdnr/wt/odlux/framework/src/components/logo.tsx b/sdnr/wt/odlux/framework/src/components/logo.tsx
index 470eb9620..b10cc8ce1 100644
--- a/sdnr/wt/odlux/framework/src/components/logo.tsx
+++ b/sdnr/wt/odlux/framework/src/components/logo.tsx
@@ -34,7 +34,12 @@
 import * as React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; // infra for styling
+import { Theme } from '@mui/material/styles'; // infra for styling
+
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
 
 import defaultLogo from '../assets/images/defaultLogo.svg';
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
index 8124e450d..ce5b2cd1e 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
+++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
@@ -1,55 +1,55 @@
-/**

- * ============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';

-

-export enum ColumnType {

-  text,

-  numeric,

-  boolean,

-  date,

-  custom

-}

-

-type CustomControl<TData> = {

-  className?: string;

-  style?: React.CSSProperties;

-  rowData: TData;

-}

-

-export type ColumnModel<TData> = {

-  title?: string;

-  disablePadding?: boolean;

-  width?: string | number ;

-  className?: string;

-  style?: React.CSSProperties;

-  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';

-  disableSorting?: boolean;

-  disableFilter?: boolean;

-} & ({

-  property: string;

-  type: ColumnType.custom;

-  customControl: React.ComponentType<CustomControl<TData>>;

-} | {

-  property: keyof TData;

-  type: ColumnType.boolean;

-  labels?: { "true": string, "false": string };

-} | {

-    property: keyof TData;

-    type?: ColumnType.numeric | ColumnType.text | ColumnType.date;

+/**
+ * ============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';
+
+export enum ColumnType {
+  text,
+  numeric,
+  boolean,
+  date,
+  custom
+}
+
+type CustomControl<TData> = {
+  className?: string;
+  style?: React.CSSProperties;
+  rowData: TData;
+}
+
+export type ColumnModel<TData> = {
+  title?: string;
+  disablePadding?: boolean;
+  width?: string | number ;
+  className?: string;
+  style?: React.CSSProperties;
+  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  disableSorting?: boolean;
+  disableFilter?: boolean;
+} & ({
+  property: string;
+  type: ColumnType.custom;
+  customControl: React.ComponentType<CustomControl<TData>>;
+} | {
+  property: keyof TData;
+  type: ColumnType.boolean;
+  labels?: { "true": string, "false": string };
+} | {
+    property: keyof TData;
+    type?: ColumnType.numeric | ColumnType.text | ColumnType.date;
 });
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
index cb675218f..aac2a1252 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -16,29 +16,36 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
 
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import Checkbox from '@material-ui/core/Checkbox';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import Checkbox from '@mui/material/Checkbox';
 
 import { TableToolbar } from './tableToolbar';
 import { EnhancedTableHead } from './tableHead';
 import { EnhancedTableFilter } from './tableFilter';
 
 import { ColumnModel, ColumnType } from './columnModel';
-import { Omit, Menu, makeStyles } from '@material-ui/core';
+import { Menu } from '@mui/material';
+import { DistributiveOmit } from '@mui/types';
+
+import makeStyles from '@mui/styles/makeStyles';
 
-import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
 
-import { DividerTypeMap } from '@material-ui/core/Divider';
-import { MenuItemProps } from '@material-ui/core/MenuItem';
-import { flexbox } from '@material-ui/system';
+import { DividerTypeMap } from '@mui/material/Divider';
+import { MenuItemProps } from '@mui/material/MenuItem';
+import { flexbox } from '@mui/system';
 import { RowDisabled } from './utilities';
 import { toAriaLabel } from '../../utilities/yangHelper';
 export { ColumnModel, ColumnType } from './columnModel';
@@ -51,7 +58,7 @@ export type DataCallback<TData = dataType> = (page?: number, rowsPerPage?: numbe
 
 function regExpEscape(s: string) {
   return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
-};
+}
 
 function wildcardCheck(input: string, pattern: string) {
    if (!pattern) return true; 
@@ -61,7 +68,7 @@ function wildcardCheck(input: string, pattern: string) {
      (!pattern.endsWith('*') ? '$' : '')
    );
    return input.match(regex) !== null && input.match(regex)!.length >= 1;
-};
+}
 
 function desc(a: dataType, b: dataType, orderBy: string) {
   if ((b[orderBy] || "") < (a[orderBy] || "")) {
@@ -240,7 +247,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
         <TableContainer className={classes.container}>
           <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv}
             onToggleFilter={toggleFilter} />
-          <Table aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} >
+          <Table padding="normal" aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} >
             <EnhancedTableHead
               columns={columns}
               numSelected={selected && selected.length}
@@ -330,15 +337,15 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
           count={rowCount}
           rowsPerPage={rowsPerPage}
           page={page}
-          aria-label={"table-pagination-footer" }
+          aria-label={this.props.isPopup ? "popup-table-pagination-footer" : "table-pagination-footer" }
           backIconButtonProps={{
             'aria-label': this.props.isPopup ? 'popup-previous-page' : 'previous-page',
           }}
           nextIconButtonProps={{
             'aria-label': this.props.isPopup ? 'popup-next-page': 'next-page',
           }}
-          onChangePage={this.onHandleChangePage}
-          onChangeRowsPerPage={this.onHandleChangeRowsPerPage}
+          onPageChange={this.onHandleChangePage}
+          onRowsPerPageChange={this.onHandleChangeRowsPerPage}
         />
       </Paper>
     );
@@ -371,7 +378,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
 
   private static updateRows(props: MaterialTableComponentPropsWithRows, state: MaterialTableComponentState): { rows: {}[], total: number, page: number } {
 
-    let data = [...props.rows as dataType[] || []];
+    let data = [...(props.rows as dataType[] || [])];
     const columns = props.columns;
 
     const { page, rowsPerPage, order, orderBy, filter } = state;
@@ -661,7 +668,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
   }
 }
 
-export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<Omit<MaterialTableComponentProps<TData>, 'classes'>>;
+export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<DistributiveOmit<MaterialTableComponentProps<TData>, 'classes'>>;
 
 export const MaterialTable = withStyles(styles)(MaterialTableComponent);
 export default MaterialTable;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
index e4cc5ab7c..a46dd18d8 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -18,13 +18,18 @@
 
 import * as React from 'react';
 import { ColumnModel, ColumnType } from './columnModel';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
 
 
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import Input from '@material-ui/core/Input';
-import { Select, FormControl, InputLabel, MenuItem } from '@material-ui/core';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import Input from '@mui/material/Input';
+import { Select, FormControl, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material';
 import { toAriaLabel } from '../../utilities/yangHelper';
 
 
@@ -49,9 +54,13 @@ interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
 }
 
 class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> {
-  createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value);
+  createSelectFilterHandler = (property: string) => (event: SelectChangeEvent<HTMLSelectElement | string>) => {
+    this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value as string);
   };
+  createInputFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    this.props.onFilterChanged && this.props.onFilterChanged(property, event.currentTarget.value);
+  };
+
 
   render() {
     const { columns, filter, classes } = this.props;
@@ -68,20 +77,26 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
             <TableCell
               className={col.type === ColumnType.numeric ? classes.numberInput : ''}
               key={col.property}
-              padding={col.disablePadding ? 'none' : 'default'}
+              padding={col.disablePadding ? 'none' : 'normal'}
               style={style}
             >
               {col.disableFilter || (col.type === ColumnType.custom)
                 ? null
                 : (col.type === ColumnType.boolean)
-                  ? <Select className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
+                  ? <Select variant="standard" className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`}
+                    value={filter[col.property] !== undefined ? filter[col.property] : ''}
+                    onChange={this.createSelectFilterHandler(col.property)}
+                    inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
                     <MenuItem value={undefined} aria-label="none-value" >
                       <em>None</em>
                     </MenuItem>
                     <MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
                     <MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
                   </Select>
-                  : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string)+ '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
+                  : <Input className={classes.input}
+                    inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter` }}
+                    value={filter[col.property] || ''}
+                    onChange={this.createInputFilterHandler(col.property)} />}
             </TableCell>
           );
         }, this)}
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
index 428f4cf3f..c500f44ce 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
@@ -18,16 +18,31 @@
 
 import * as React from 'react';
 import { ColumnModel, ColumnType } from './columnModel';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
 
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Checkbox from '@material-ui/core/Checkbox';
-import Tooltip from '@material-ui/core/Tooltip';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
-interface IEnhancedTableHeadComponentProps {
+import TableSortLabel from '@mui/material/TableSortLabel';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Checkbox from '@mui/material/Checkbox';
+import Tooltip from '@mui/material/Tooltip';
+
+const styles = (theme: Theme) => createStyles({
+  header: {
+    backgroundColor: "#fafafa",
+    position: "sticky",
+    top: 0
+  }
+});
+
+
+type styles_header = WithStyles<typeof styles>;
+
+interface IEnhancedTableHeadComponentProps extends styles_header {
   numSelected: number | null;
   onRequestSort: (event: React.SyntheticEvent, property: string) => void;
   onSelectAllClick: () => void;
@@ -45,12 +60,13 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
 
   render() {
     const { onSelectAllClick, order, orderBy, numSelected, rowCount, columns } = this.props;
+    const {classes} = this.props;
 
     return (
       <TableHead>
         <TableRow>
           { this.props.enableSelection 
-           ? <TableCell padding="checkbox" style={ { width: "50px" } }>
+           ? <TableCell padding="checkbox" style={ { width: "50px" } } className= {classes.header} >
               <Checkbox
                  indeterminate={ numSelected && numSelected > 0 && numSelected < rowCount || undefined }
                  checked={ numSelected === rowCount }
@@ -62,10 +78,10 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
           { columns.map(col => {
             const style = col.width ? { width: col.width } : {};
             return (
-              <TableCell
+              <TableCell className= {classes.header}
                 key={ col.property }
                 align={ col.type === ColumnType.numeric ? 'right' : 'left' } 
-                padding={ col.disablePadding ? 'none' : 'default' }
+                padding={ col.disablePadding ? 'none' : 'normal' }
                 sortDirection={ orderBy === (col.property) ? order : false }
                 style={ style }
               >
@@ -76,7 +92,7 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
                   >
                     { col.title || col.property }
                   </TableSortLabel>
-                  : <Tooltip
+                  : <Tooltip disableInteractive
                     title="Sort"
                     placement={ col.type === ColumnType.numeric ? 'bottom-end' : 'bottom-start' }
                     enterDelay={ 300 }
@@ -98,4 +114,4 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
   }
 }
 
-export const EnhancedTableHead = EnhancedTableHeadComponent;
\ No newline at end of file
+export const EnhancedTableHead = withStyles(styles)(EnhancedTableHeadComponent);
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
index 4ad6422dc..426436d44 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -16,27 +16,30 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme, lighten } from '@mui/material/styles';
 
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import DeleteIcon from '@material-ui/icons/Delete';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
-import { lighten } from '@material-ui/core/styles/colorManipulator';
-import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
-import { Button } from '@material-ui/core';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import DeleteIcon from '@mui/icons-material/Delete';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { Button } from '@mui/material';
 
 const styles = (theme: Theme) => createStyles({
   root: {
     paddingRight: theme.spacing(1),
   },
   highlight:
-    theme.palette.type === 'light'
+    theme.palette.mode === 'light'
       ? {
         color: theme.palette.secondary.main,
         backgroundColor: lighten(theme.palette.secondary.light, 0.85),
@@ -109,32 +112,41 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
         <div className={classes.actions}>
           {this.props.customActionButtons
             ? this.props.customActionButtons.map((action, ind) => (
-              <Tooltip key={`custom-action-${ind}`} title={action.tooltip || ''}>
-                <IconButton disabled={action.disabled} aria-label={`${buttonPrefix}-${action.ariaLabel}-button`} onClick={() => action.onClick()}>
+              <Tooltip disableInteractive key={`custom-action-${ind}`} title={action.tooltip || ''}>
+                <IconButton
+                  disabled={action.disabled}
+                  aria-label={`${buttonPrefix}-${action.ariaLabel}-button`}
+                  onClick={() => action.onClick()}
+                  size="large">
                   <action.icon />
                 </IconButton>
               </Tooltip>
             ))
             : null}
           {numSelected && numSelected > 0 ? (
-            <Tooltip title="Delete">
-              <IconButton aria-label={`${buttonPrefix}-delete-button`}>
+            <Tooltip disableInteractive title="Delete">
+              <IconButton aria-label={`${buttonPrefix}-delete-button`} size="large">
                 <DeleteIcon />
               </IconButton>
             </Tooltip>
           ) : (
-              <Tooltip title="Filter list">
-                <IconButton aria-label={`${buttonPrefix}-filter-list-button`} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
+              <Tooltip disableInteractive title="Filter list">
+                <IconButton
+                  aria-label={`${buttonPrefix}-filter-list-button`}
+                  onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}
+                  size="large">
                   <FilterListIcon />
                 </IconButton>
               </Tooltip>
             )}
-          <Tooltip title="Actions">
-            <IconButton color="inherit"
-            aria-label={`${buttonPrefix}-additional-actions-button`}
+          <Tooltip disableInteractive title="Actions">
+            <IconButton
+              color="inherit"
+              aria-label={`${buttonPrefix}-additional-actions-button`}
               aria-owns={open ? 'menu-appbar' : undefined}
               aria-haspopup="true"
-              onClick={this.handleMenu} >
+              onClick={this.handleMenu}
+              size="large">
               <MoreIcon />
             </IconButton>
           </Tooltip>
@@ -146,6 +158,6 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
       </Toolbar>
     );
   }
-};
+}
 
 export const TableToolbar = withStyles(styles)(TableToolbarComponent);
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
index 49e7be514..744cb0d24 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
@@ -1,72 +1,75 @@
-/**

- * ============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 { NavLink, Link, Route } from 'react-router-dom';

-

-import ListItem from '@material-ui/core/ListItem';

-import ListItemIcon from '@material-ui/core/ListItemIcon';

-import ListItemText from '@material-ui/core/ListItemText';

-

-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';

-import { toAriaLabel } from '../../utilities/yangHelper';

-

-const styles = (theme: Theme) => createStyles({

-  active: {

-    backgroundColor: theme.palette.action.selected

-  }

-});

-

-export interface IListItemLinkProps extends WithStyles<typeof styles> {

-  icon: JSX.Element | null;

-  primary: string | React.ComponentType;

-  secondary?: React.ComponentType;

-  to: string;

-  exact?: boolean;

-  external?: boolean;

-}

-

-export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {

-  const { icon, primary: Primary, secondary: Secondary, classes, to, exact = false, external=false } = props;

-  const renderLink = (itemProps: any): JSX.Element => (

-    props.external ? <a target="_blank" href={to} { ...itemProps }></a> :

-  <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);

-

-  const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);

-  return (

-       <>

-        <ListItem button component={ renderLink } aria-label={ariaLabel}>

-          { icon

-            ? <ListItemIcon>{ icon }</ListItemIcon>

-            : null

-          }

-        { typeof Primary === 'string'

-          ? <ListItemText primary={ Primary } style={{ padding: 0 }} /> 

-          : <Primary />

-          }

-        </ListItem>

-        { Secondary 

-          ? <Route exact={ exact } path={ to } component={ Secondary } />

-          : null

-        }

-      </>

-    );

-  }

-);

-

-export default ListItemLink;

-

+/**
+ * ============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 { NavLink, Link, Route } from 'react-router-dom';
+
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import { toAriaLabel } from '../../utilities/yangHelper';
+
+const styles = (theme: Theme) => createStyles({
+  active: {
+    backgroundColor: theme.palette.action.selected
+  }
+});
+
+export interface IListItemLinkProps extends WithStyles<typeof styles> {
+  icon: JSX.Element | null;
+  primary: string | React.ComponentType;
+  secondary?: React.ComponentType;
+  to: string;
+  exact?: boolean;
+  external?: boolean;
+}
+
+export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
+  const { icon, primary: Primary, secondary: Secondary, classes, to, exact = false, external=false } = props;
+  const renderLink = (itemProps: any): JSX.Element => (
+    props.external ? <a target="_blank" href={to} { ...itemProps }></a> :
+  <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);
+
+  const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);
+  return (
+       <>
+        <ListItem button component={ renderLink } aria-label={ariaLabel}>
+          { icon
+            ? <ListItemIcon>{ icon }</ListItemIcon>
+            : null
+          }
+        { typeof Primary === 'string'
+          ? <ListItemText primary={ Primary } style={{ padding: 0 }} /> 
+          : <Primary />
+          }
+        </ListItem>
+        { Secondary 
+          ? <Route exact={ exact } path={ to } component={ Secondary } />
+          : null
+        }
+      </>
+    );
+  }
+);
+
+export default ListItemLink;
+
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx
index 5ab2fd415..bd523e1f4 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx
@@ -19,7 +19,11 @@
 
 import * as React from "react";
 
-import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
 const styles = (theme: Theme) => createStyles({
   "@keyframes spin": {
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx
index 378d48592..6d192d2f0 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx
@@ -1,73 +1,76 @@
-/**

- * ============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 { withStyles, Theme, WithStyles, createStyles } from '@material-ui/core/styles';

-

-import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography, ExpansionPanelActions } from '@material-ui/core';

-

-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

-import { SvgIconProps } from '@material-ui/core/SvgIcon';

-

-const styles = (theme: Theme) => createStyles({

-  accordion: {

-    // background: theme.palette.secondary.dark,

-    // color: theme.palette.primary.contrastText

-  },

-  detail: {

-    // background: theme.palette.background.paper,

-    // color: theme.palette.text.primary,

-    position: "relative",

-    display: 'flex',

-    flexDirection: 'column'

-  },

-  text: {

-    // color: theme.palette.common.white,

-    // fontSize: "1rem"

-  },

-});

-

-type PanalProps = WithStyles<typeof styles> & {

-  activePanel: string | null,

-  panelId: string,

-  title: string,

-  customActionButtons?: JSX.Element[];

-  onToggle: (panelId: string | null) => void;

-}

-

-const PanelComponent: React.SFC<PanalProps> = (props) => {

-  const { classes, activePanel, onToggle } = props;

-  return (

-    <ExpansionPanel className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >

-      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>

-        <Typography className={classes.text} >{props.title}</Typography>

-      </ExpansionPanelSummary>

-      <ExpansionPanelDetails className={classes.detail}>

-        {props.children}

-      </ExpansionPanelDetails>

-      {props.customActionButtons

-        ? <ExpansionPanelActions>

-          {props.customActionButtons}

-        </ExpansionPanelActions>

-        : null}

-    </ExpansionPanel>

-  );

-};

-

-export const Panel = withStyles(styles)(PanelComponent);

+/**
+ * ============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 { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import { Accordion, AccordionSummary, AccordionDetails, Typography, AccordionActions } from '@mui/material';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+
+const styles = (theme: Theme) => createStyles({
+  accordion: {
+    // background: theme.palette.secondary.dark,
+    // color: theme.palette.primary.contrastText
+  },
+  detail: {
+    // background: theme.palette.background.paper,
+    // color: theme.palette.text.primary,
+    position: "relative",
+    flexDirection: 'column'
+  },
+  text: {
+    // color: theme.palette.common.white,
+    // fontSize: "1rem"
+  },
+});
+
+type PanalProps = WithStyles<typeof styles> & {
+  activePanel: string | null,
+  panelId: string,
+  title: string,
+  customActionButtons?: JSX.Element[];
+  onToggle: (panelId: string | null) => void;
+}
+
+const PanelComponent: React.SFC<PanalProps> = (props) => {
+  const { classes, activePanel, onToggle } = props;
+  return (
+    <Accordion className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography className={classes.text} >{props.title}</Typography>
+      </AccordionSummary>
+      <AccordionDetails className={classes.detail}>
+        {props.children}
+      </AccordionDetails>
+      {props.customActionButtons
+        ? <AccordionActions>
+          {props.customActionButtons}
+        </AccordionActions>
+        : null}
+    </Accordion>
+  );
+};
+
+export const Panel = withStyles(styles)(PanelComponent);
 export default Panel;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx
index 1a29d6970..54f14a7e0 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx
@@ -1,179 +1,181 @@
-/**

- * ============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 classNames from 'classnames';

-import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';

-import { fade } from '@material-ui/core/styles/colorManipulator';

-import ButtonBase from '@material-ui/core/ButtonBase';

-

-

-export const styles = (theme: Theme) => createStyles({

-    /* Styles applied to the root element. */

-    root: {

-        ...theme.typography.button,

-        height: 32,

-        minWidth: 48,

-        margin: 0,

-        padding: `${theme.spacing(1 - 4)}px ${theme.spacing(1.5)}px`,

-        borderRadius: 2,

-        willChange: 'opacity',

-        color: fade(theme.palette.action.active, 0.38),

-        '&:hover': {

-            textDecoration: 'none',

-            // Reset on mouse devices

-            backgroundColor: fade(theme.palette.text.primary, 0.12),

-            '@media (hover: none)': {

-                backgroundColor: 'transparent',

-            },

-            '&$disabled': {

-                backgroundColor: 'transparent',

-            },

-        },

-        '&:not(:first-child)': {

-            borderTopLeftRadius: 0,

-            borderBottomLeftRadius: 0,

-        },

-        '&:not(:last-child)': {

-            borderTopRightRadius: 0,

-            borderBottomRightRadius: 0,

-        },

-    },

-    /* Styles applied to the root element if `disabled={true}`. */

-    disabled: {

-        color: fade(theme.palette.action.disabled, 0.12),

-    },

-    /* Styles applied to the root element if `selected={true}`. */

-    selected: {

-        color: theme.palette.action.active,

-        '&:after': {

-            content: '""',

-            display: 'block',

-            position: 'absolute',

-            overflow: 'hidden',

-            borderRadius: 'inherit',

-            width: '100%',

-            height: '100%',

-            left: 0,

-            top: 0,

-            pointerEvents: 'none',

-            zIndex: 0,

-            backgroundColor: 'currentColor',

-            opacity: 0.38,

-        },

-        '& + &:before': {

-            content: '""',

-            display: 'block',

-            position: 'absolute',

-            overflow: 'hidden',

-            width: 1,

-            height: '100%',

-            left: 0,

-            top: 0,

-            pointerEvents: 'none',

-            zIndex: 0,

-            backgroundColor: 'currentColor',

-            opacity: 0.12,

-        },

-    },

-    /* Styles applied to the `label` wrapper element. */

-    label: {

-        width: '100%',

-        display: 'inherit',

-        alignItems: 'inherit',

-        justifyContent: 'inherit',

-    },

-});

-

-export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';

-

-interface IToggleButtonProps extends WithStyles<typeof styles> {

-    className?: string;

-    component?: React.ReactType<IToggleButtonProps>;

-    disabled?: boolean;

-    disableFocusRipple?: boolean;

-    disableRipple?: boolean;

-    selected?: boolean;

-    type?: string;

-    value?: any;

-    onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;

-    onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;

-}

-

-class ToggleButtonComponent extends React.Component<IToggleButtonProps> {

-    handleChange = (event: React.FormEvent<HTMLElement>) => {

-        const { onChange, onClick, value } = this.props;

-

-        event.stopPropagation();

-        if (onClick) {

-            onClick(event, value);

-            if (event.isDefaultPrevented()) {

-                return;

-            }

-        }

-

-        if (onChange) {

-            onChange(event, value);

-        }

-        event.preventDefault();

-    };

-

-    render() {

-        const {

-            children,

-            className: classNameProp,

-            classes,

-            disableFocusRipple,

-            disabled,

-            selected,

-            ...other

-        } = this.props;

-

-        const className = classNames(

-            classes.root,

-            {

-                [classes.disabled]: disabled,

-                [classes.selected]: selected,

-            },

-            classNameProp,

-        );

-

-        return (

-            <ButtonBase

-                className={className}

-                disabled={disabled}

-                focusRipple={!disableFocusRipple}

-                onClick={this.handleChange}

-                href="#"

-                {...other}

-            >

-                <span className={classes.label}>{children}</span>

-            </ButtonBase>

-        );

-    }

-    public static defaultProps = {

-        disabled: false,

-        disableFocusRipple: false,

-        disableRipple: false,

-    };

-

-    public static muiName = 'ToggleButton';

-}

-

-export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);

+/**
+ * ============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 classNames from 'classnames';
+import { Theme, alpha } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import ButtonBase from '@mui/material/ButtonBase';
+
+
+export const styles = (theme: Theme) => createStyles({
+    /* Styles applied to the root element. */
+    root: {
+        ...theme.typography.button,
+        height: 32,
+        minWidth: 48,
+        margin: 0,
+        padding: `${theme.spacing(1 - 4)} ${theme.spacing(1.5)}`,
+        borderRadius: 2,
+        willChange: 'opacity',
+        color: alpha(theme.palette.action.active, 0.38),
+        '&:hover': {
+            textDecoration: 'none',
+            // Reset on mouse devices
+            backgroundColor: alpha(theme.palette.text.primary, 0.12),
+            '@media (hover: none)': {
+                backgroundColor: 'transparent',
+            },
+            '&.Mui-disabled': {
+                backgroundColor: 'transparent',
+            },
+        },
+        '&:not(:first-child)': {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+        },
+        '&:not(:last-child)': {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+        },
+    },
+    /* Styles applied to the root element if `disabled={true}`. */
+    disabled: {
+        color: alpha(theme.palette.action.disabled, 0.12),
+    },
+    /* Styles applied to the root element if `selected={true}`. */
+    selected: {
+        color: theme.palette.action.active,
+        '&:after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            width: '100%',
+            height: '100%',
+            left: 0,
+            top: 0,
+            pointerEvents: 'none',
+            zIndex: 0,
+            backgroundColor: 'currentColor',
+            opacity: 0.38,
+        },
+        '& + &:before': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            overflow: 'hidden',
+            width: 1,
+            height: '100%',
+            left: 0,
+            top: 0,
+            pointerEvents: 'none',
+            zIndex: 0,
+            backgroundColor: 'currentColor',
+            opacity: 0.12,
+        },
+    },
+    /* Styles applied to the `label` wrapper element. */
+    label: {
+        width: '100%',
+        display: 'inherit',
+        alignItems: 'inherit',
+        justifyContent: 'inherit',
+    },
+});
+
+export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';
+
+interface IToggleButtonProps extends WithStyles<typeof styles> {
+    className?: string;
+    component?: React.ReactType<IToggleButtonProps>;
+    disabled?: boolean;
+    disableFocusRipple?: boolean;
+    disableRipple?: boolean;
+    selected?: boolean;
+    type?: string;
+    value?: any;
+    onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
+    onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
+}
+
+class ToggleButtonComponent extends React.Component<IToggleButtonProps> {
+    handleChange = (event: React.FormEvent<HTMLElement>) => {
+        const { onChange, onClick, value } = this.props;
+
+        event.stopPropagation();
+        if (onClick) {
+            onClick(event, value);
+            if (event.isDefaultPrevented()) {
+                return;
+            }
+        }
+
+        if (onChange) {
+            onChange(event, value);
+        }
+        event.preventDefault();
+    };
+
+    render() {
+        const {
+            children,
+            className: classNameProp,
+            classes,
+            disableFocusRipple,
+            disabled,
+            selected,
+            ...other
+        } = this.props;
+
+        const className = classNames(
+            classes.root,
+            {
+                [classes.disabled]: disabled,
+                [classes.selected]: selected,
+            },
+            classNameProp,
+        );
+
+        return (
+            <ButtonBase
+                className={className}
+                disabled={disabled}
+                focusRipple={!disableFocusRipple}
+                onClick={this.handleChange}
+                href="#"
+                {...other}
+            >
+                <span className={classes.label}>{children}</span>
+            </ButtonBase>
+        );
+    }
+    public static defaultProps = {
+        disabled: false,
+        disableFocusRipple: false,
+        disableRipple: false,
+    };
+
+    public static muiName = 'ToggleButton';
+}
+
+export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);
 export default ToggleButton;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx
index 6460e8a3f..bdabe0d56 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx
@@ -17,7 +17,11 @@
  */
 import * as React from 'react';
 import classNames from 'classnames';
-import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
 export const styles = (theme: Theme) => createStyles({
   /* Styles applied to the root element. */
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
index e62b42472..5c23909c4 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
@@ -16,15 +16,27 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
 
-import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit, Typography } from '@material-ui/core';
+import { makeStyles, WithStyles, WithTheme } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import FileIcon from '@material-ui/icons/InsertDriveFile';
-import CloseIcon from '@material-ui/icons/ExpandLess';
-import OpenIcon from '@material-ui/icons/ExpandMore';
-import FolderIcon from '@material-ui/icons/Folder';
+import { List, ListItem, TextField, ListItemText, ListItemIcon, Typography } from '@mui/material';
+import { DistributiveOmit } from '@mui/types';
+
+import withTheme from '@mui/styles/withTheme';
+
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import FileIcon from '@mui/icons-material/InsertDriveFile';
+import CloseIcon from '@mui/icons-material/ExpandLess';
+import OpenIcon from '@mui/icons-material/ExpandMore';
+import FolderIcon from '@mui/icons-material/Folder';
+
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
+  interface DefaultTheme extends Theme {}
+}
 
 const styles = (theme: Theme) => createStyles({
   root: {
@@ -33,7 +45,7 @@ const styles = (theme: Theme) => createStyles({
     paddingTop: 8,
   },
   search: {
-    padding: `0px ${theme.spacing(1)}px`
+    padding: `0px ${theme.spacing(1)}`
   }
 });
 
@@ -153,7 +165,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
     return (
       <div className={this.props.className ? `${this.props.classes.root} ${this.props.className}` : this.props.classes.root} style={this.props.style}>
         {children}
-        {enableSearchBar && <TextField label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null}
+        {enableSearchBar && <TextField variant="standard" label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null}
         {enableSearchBar && (searchTerm === undefined || searchTerm.length===0 )&& <Typography style={{marginTop:'10px'}}>Please search for an inventory identifier or use *.</Typography>}
         <List>
           {this.renderItems(items, searchTerm && searchTerm.toLowerCase())}
@@ -187,10 +199,10 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
 
     }, [] as JSX.Element[]);
   }
-  private renderItem = (item: ExternalTreeItem<TData>, searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => {
+  private renderItem = (item: ExternalTreeItem<TData> , searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => {  
     const styles = {
       item: {
-        paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing(3)),
+        paddingLeft: (((this.props.depthOffset || 0) + depth) * Number(this.props.theme.spacing(3).replace("px", ''))),
         backgroundColor: this.state.activeItem === item ? this.props.theme.palette.action.selected : undefined,
         height: this.props.itemHeight || undefined,
         cursor: item.disabled ? 'not-allowed' : 'pointer',
@@ -201,8 +213,17 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
     };
 
     const text = item.content || ''; // need to keep track of search
-    const matchIndex = searchTerm ? text.toLowerCase().indexOf(searchTerm) : -1;
-    const searchTermLength = searchTerm && searchTerm.length || 0;
+    const search_array = searchTerm?.split("*");
+    const index = search_array?.findIndex(function (_str: String) {
+      return _str.length > 0;
+    }) || 0;
+    const firstSearchSubString = search_array ? search_array[index] : "";
+    const matchIndex = firstSearchSubString ? text.toLowerCase().indexOf(firstSearchSubString) : -1;
+
+    const hasStarInSearch = search_array ? search_array.length > 1 : false;
+    const isSearchStringWithStar = hasStarInSearch && firstSearchSubString?.length > 0 || false;
+
+    const searchTermLength = firstSearchSubString && firstSearchSubString.length || 0;
 
     const handleClickCreator = (isIcon: boolean) => (event: React.SyntheticEvent) => {
       if (item.disabled) return;
@@ -225,9 +246,8 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
 
 
           { // highlight search result
-            matchIndex > -1
-              ? <ListItemText className={item.contentClass} primary={(<span>
-                {text.substring(0, matchIndex)}
+            isSearchStringWithStar && matchIndex > -1
+              ? <ListItemText className={item.contentClass} primary={(
                 <span
                   style={{
                     display: 'inline-block',
@@ -235,18 +255,29 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
                     padding: '3px',
                   }}
                 >
-                  {text.substring(matchIndex, matchIndex + searchTermLength)}
-                </span>
-                {text.substring(matchIndex + searchTermLength)}
-              </span>)} />
-              : <ListItemText className={item.contentClass} primary={(
-                <span style={item.isMatch ? {
-                  display: 'inline-block',
-                  backgroundColor: 'rgba(255,235,59,0.5)',
-                  padding: '3px',
-                } : undefined}>
-                  {text} </span>
-              )} />
+                  {text}
+                </span>)} />
+              : matchIndex > -1
+                ? <ListItemText className={item.contentClass} primary={(<span>
+                  {text.substring(0, matchIndex)}
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      backgroundColor: 'rgba(255,235,59,0.5)',
+                      padding: '3px',
+                    }}
+                  >
+                    {text.substring(matchIndex, matchIndex + searchTermLength)}
+                  </span>
+                  {text.substring(matchIndex + searchTermLength)}
+                </span>)} />
+                : <ListItemText className={item.contentClass} primary={(
+                  <span style={item.isMatch ? {
+                    display: 'inline-block',
+                    padding: '3px',
+                  } : undefined}>
+                    {text} </span>
+                )} />
           }
 
           { // display the right icon, depending on the state
@@ -343,7 +374,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
   }
 }
 
-export type TreeViewCtorType<TData = { }> = new () => React.Component<Omit<TreeViewComponentProps<TData>, 'theme'|'classes'>>;
+export type TreeViewCtorType<TData = { }> = new () => React.Component<DistributiveOmit<TreeViewComponentProps<TData>, 'theme'|'classes'>>;
 
 export const TreeView = withTheme(withStyles(styles)(TreeViewComponent));
 export default TreeView;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index b50d68081..1134e230b 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -1,214 +1,218 @@
-/**

- * ============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 { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';

-

-import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';

-

-import Drawer from '@material-ui/core/Drawer';

-import List from '@material-ui/core/List';

-

-import Divider from '@material-ui/core/Divider';

-

-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

-import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';

-

-import ListItemLink from '../components/material-ui/listItemLink';

-

-import connect, { Connect } from '../flux/connect';

-import { MenuAction } from '../actions/menuAction';

-import * as classNames from 'classnames';

-import { transportPCEUrl } from '../app';

-

-

-const drawerWidth = 240;

-

-const extraLinks = (window as any)._odluxExtraLinks as [string, string][];

-

-const styles = (theme: Theme) => createStyles({

-  drawerPaper: {

-    position: 'relative',

-    width: drawerWidth,

-  },

-  toolbar: theme.mixins.toolbar as any,

-

-  drawerOpen: {

-    width: drawerWidth,

-    transition: theme.transitions.create('width', {

-      easing: theme.transitions.easing.sharp,

-      duration: theme.transitions.duration.enteringScreen,

-    }),

-  },

-  drawerClose: {

-    transition: theme.transitions.create('width', {

-      easing: theme.transitions.easing.sharp,

-      duration: theme.transitions.duration.leavingScreen,

-    }),

-    overflowX: 'hidden',

-    width: theme.spacing(7) + 1,

-    [theme.breakpoints.up('sm')]: {

-      width: theme.spacing(9) + 1,

-    },

-  },

-  drawer: {

-

-  },

-  menu: {

-    flex: "1 0 0%",

-  },

-  optLinks: {

-    borderTop: "2px solid #cfcfcf",

-    display: "flex",

-    flexDirection: "row",

-    flexWrap: "wrap",

-    justifyContent: "space-around"

-  },

-  link: {

-    margin: theme.spacing(1)+1,

-    fontSize: theme.typography.fontSize-2,

-  },

-});

-

-const tabletWidthBreakpoint = 768;

-

-export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {

-  const { user } = state.framework.authenticationState;

-  const isOpen = state.framework.applicationState.isMenuOpen;

-  const closedByUser = state.framework.applicationState.isMenuClosedByUser;

-  const transportUrl = state.framework.applicationState.transportpceUrl;

-

-  const [responsive, setResponsive] = React.useState(false);

-

-  //collapse menu on mount if necessary

-  React.useEffect(()=>{

-

-    if(isOpen && window.innerWidth < tabletWidthBreakpoint){

-

-      setResponsive(true);

-      dispatch(new MenuAction(false));

-    }

-

-  },[]);

-

-  React.useEffect(() => {

-

-    function handleResize() {

-      if (user && user.isValid) {

-        if (window.innerWidth < tabletWidthBreakpoint && !responsive) {

-          setResponsive(true);

-          if (!closedByUser) {

-            console.log("responsive menu collapsed")

-            dispatch(new MenuAction(false));

-          }

-

-        } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {

-          setResponsive(false);

-          if (!closedByUser) {

-            console.log("responsive menu restored")

-            dispatch(new MenuAction(true));

-          }

-

-        }

-      }

-    }

-    window.addEventListener("resize", handleResize);

-

-

-    return () => {

-      window.removeEventListener("resize", handleResize);

-    }

-  })

-

-  React.useEffect(()=>{

-    // trigger a resize if menu changed in case elements have to re-arrange

-    window.dispatchEvent(new Event('menu-resized'));

-  }, [isOpen])

-

-  let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {

-    const reg = state.framework.applicationRegistraion[key];

-    return reg && (

-      <ListItemLink

-        key={reg.name}

-        to={reg.path || `/${reg.name}`}

-        primary={reg.menuEntry || reg.name}

-        secondary={reg.subMenuEntry}

-        icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />

-    ) || null;

-  }) || null;

-

-  if(transportUrl.length>0){

-

-    const transportPCELink = <ListItemLink

-      key={"transportPCE"}

-      to={transportUrl}

-      primary={"TransportPCE"}

-      icon={<FontAwesomeIcon icon={faProjectDiagram} />}

-      external />;

-

-    const linkFound = menuItems.find(obj => obj.key === "linkCalculation");

-    

-    if (linkFound) {

-      const index = menuItems.indexOf(linkFound);

-      menuItems.splice(index + 1, 0, transportPCELink);

-    } else {

-      menuItems.push(transportPCELink);

-    }

-  }

-  

-

-  return (

-    <Drawer

-      variant="permanent"

-      className={

-        classNames(classes.drawer, {

-          [classes.drawerOpen]: isOpen,

-          [classes.drawerClose]: !isOpen

-        })

-      }

-      classes={{

-        paper: classes.drawerPaper,

-      }}

-    >

-      {user && user.isValid && <>

-        <div className={classes.toolbar} />

-        { /* https://fiffty.github.io/react-treeview-mui/ */}

-        <List className={classes.menu} component="nav">

-          <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />

-          <Divider />

-          {

-          menuItems

-          }

-          <Divider />

-          <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />

-          {(false && process.env.NODE_ENV === "development")

-            ? <>

-              <Divider />

-              <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />

-            </>

-            : null

-          }

-        </List>

-        {isOpen && extraLinks && <div className={classes.optLinks}>

-          {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}

-        </div> || null}

-      </> || null

-      }

-    </Drawer>)

-}));

-

+/**
+ * ============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 { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';
+
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+
+import Divider from '@mui/material/Divider';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+
+import ListItemLink from '../components/material-ui/listItemLink';
+
+import connect, { Connect } from '../flux/connect';
+import { MenuAction } from '../actions/menuAction';
+import * as classNames from 'classnames';
+import { transportPCEUrl } from '../app';
+
+
+const drawerWidth = 240;
+
+const extraLinks = (window as any)._odluxExtraLinks as [string, string][];
+
+const styles = (theme: Theme) => createStyles({
+  drawerPaper: {
+    position: 'relative',
+    width: drawerWidth,
+  },
+  toolbar: theme.mixins.toolbar as any,
+
+  drawerOpen: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerClose: {
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    overflowX: 'hidden',
+    width: theme.spacing(7) + 1,
+    [theme.breakpoints.up('sm')]: {
+      width: theme.spacing(9) + 1,
+    },
+  },
+  drawer: {
+
+  },
+  menu: {
+    flex: "1 0 0%",
+  },
+  optLinks: {
+    borderTop: "2px solid #cfcfcf",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-around"
+  },
+  link: {
+    margin: theme.spacing(1)+1,
+    fontSize: theme.typography.fontSize-2,
+  },
+});
+
+const tabletWidthBreakpoint = 768;
+
+export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {
+  const { user } = state.framework.authenticationState;
+  const isOpen = state.framework.applicationState.isMenuOpen;
+  const closedByUser = state.framework.applicationState.isMenuClosedByUser;
+  const transportUrl = state.framework.applicationState.transportpceUrl;
+
+  const [responsive, setResponsive] = React.useState(false);
+
+  //collapse menu on mount if necessary
+  React.useEffect(()=>{
+
+    if(isOpen && window.innerWidth < tabletWidthBreakpoint){
+
+      setResponsive(true);
+      dispatch(new MenuAction(false));
+    }
+
+  },[]);
+
+  React.useEffect(() => {
+
+    function handleResize() {
+      if (user && user.isValid) {
+        if (window.innerWidth < tabletWidthBreakpoint && !responsive) {
+          setResponsive(true);
+          if (!closedByUser) {
+            console.log("responsive menu collapsed")
+            dispatch(new MenuAction(false));
+          }
+
+        } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {
+          setResponsive(false);
+          if (!closedByUser) {
+            console.log("responsive menu restored")
+            dispatch(new MenuAction(true));
+          }
+
+        }
+      }
+    }
+    window.addEventListener("resize", handleResize);
+
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    }
+  })
+
+  React.useEffect(()=>{
+    // trigger a resize if menu changed in case elements have to re-arrange
+    window.dispatchEvent(new Event('menu-resized'));
+  }, [isOpen])
+
+  let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {
+    const reg = state.framework.applicationRegistraion[key];
+    return reg && (
+      <ListItemLink
+        key={reg.name}
+        to={reg.path || `/${reg.name}`}
+        primary={reg.menuEntry || reg.name}
+        secondary={reg.subMenuEntry}
+        icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />
+    ) || null;
+  }) || null;
+
+  if(transportUrl.length>0){
+
+    const transportPCELink = <ListItemLink
+      key={"transportPCE"}
+      to={transportUrl}
+      primary={"TransportPCE"}
+      icon={<FontAwesomeIcon icon={faProjectDiagram} />}
+      external />;
+
+    const linkFound = menuItems.find(obj => obj.key === "linkCalculation");
+    
+    if (linkFound) {
+      const index = menuItems.indexOf(linkFound);
+      menuItems.splice(index + 1, 0, transportPCELink);
+    } else {
+      menuItems.push(transportPCELink);
+    }
+  }
+  
+
+  return (
+    <Drawer
+      variant="permanent"
+      className={
+        classNames(classes.drawer, {
+          [classes.drawerOpen]: isOpen,
+          [classes.drawerClose]: !isOpen
+        })
+      }
+      classes={{
+        paper: classes.drawerPaper,
+      }}
+    >
+      {user && user.isValid && <>
+        <div className={classes.toolbar} />
+        { /* https://fiffty.github.io/react-treeview-mui/ */}
+        <List className={classes.menu} component="nav">
+          <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />
+          <Divider />
+          {
+          menuItems
+          }
+          <Divider />
+          <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />
+          {(false && process.env.NODE_ENV === "development")
+            ? <>
+              <Divider />
+              <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />
+            </>
+            : null
+          }
+        </List>
+        {isOpen && extraLinks && <div className={classes.optLinks}>
+          {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}
+        </div> || null}
+      </> || null
+      }
+    </Drawer>)
+}));
+
 export default NavigationMenu;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
index d2de7cc02..10a0547be 100644
--- a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
@@ -17,7 +17,7 @@
  */
 
 import * as React from "react";
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 export const getTypeName = (obj: any): string => {
   if (obj == null) {
diff --git a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
index d212257c8..d055b8a87 100644
--- a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
+++ b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
@@ -1,55 +1,55 @@
-/**

- * ============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 connect, { Connect } from '../../flux/connect';

-

-import { SetTitleAction } from '../../actions/titleActions';

-import { AddErrorInfoAction } from '../../actions/errorActions';

-

-import { IconType } from '../../models/iconDefinition';

-

-export interface IAppFrameProps  {

-  title: string;

-  icon?: IconType;

-  appId?: string

-}

-

-/**

- * Represents a component to wich will embed each single app providing the

- * functionality to update the title and implement an exeprion border.

- */

-export class AppFrame extends React.Component<IAppFrameProps & Connect> {

-

-  public render(): JSX.Element {

-    return (

-      <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}>

-        { this.props.children }

-      </div>

-     )

-    }

-

-  public componentDidMount() {

-    this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId));

-  }

-  public componentDidCatch(error: Error | null, info: object) {

-    this.props.dispatch(new AddErrorInfoAction({ error, info }));

-  }

-}

-

+/**
+ * ============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 connect, { Connect } from '../../flux/connect';
+
+import { SetTitleAction } from '../../actions/titleActions';
+import { AddErrorInfoAction } from '../../actions/errorActions';
+
+import { IconType } from '../../models/iconDefinition';
+
+export interface IAppFrameProps  {
+  title: string;
+  icon?: IconType;
+  appId?: string
+}
+
+/**
+ * Represents a component to wich will embed each single app providing the
+ * functionality to update the title and implement an exeprion border.
+ */
+export class AppFrame extends React.Component<IAppFrameProps & Connect> {
+
+  public render(): JSX.Element {
+    return (
+      <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}>
+        { this.props.children }
+      </div>
+     )
+    }
+
+  public componentDidMount() {
+    this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId));
+  }
+  public componentDidCatch(error: Error | null, info: object) {
+    this.props.dispatch(new AddErrorInfoAction({ error, info }));
+  }
+}
+
 export default connect()(AppFrame);
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/settings/general.tsx b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
index ca1849049..90f15c1d2 100644
--- a/sdnr/wt/odlux/framework/src/components/settings/general.tsx
+++ b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
@@ -16,7 +16,8 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { Button, FormControlLabel, makeStyles, Switch, Typography } from '@material-ui/core';
+import { Button, FormControlLabel, Switch, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { SettingsComponentProps } from '../../models/settings';
 import * as React from 'react';
 import connect, { Connect, IDispatcher } from '../../flux/connect';
@@ -94,13 +95,13 @@ const onCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
         </Typography>
         <FormControlLabel style={{ padding:5}}
         value="end"
-        control={<Switch color="secondary" checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />}
+        control={<Switch color="secondary" aria-label="enable-notifications-button" aria-checked={areWebsocketsEnabled} checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />}
         label="Enable Notifications"
         labelPlacement="end"
       />
       <div className={classes.buttonPosition}>
-       <Button className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button>
-       <Button className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button>
+       <Button aria-label="cancel-button" className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button>
+       <Button aria-label="save-button" className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button>
     </div>
     </div>
 }
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