Update ODLUX

Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes

Issue-ID: CCSDK-3580
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c

6 files changed, 216 insertions, 559 deletions

diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index 400ee35bb..1b6135e5f 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -19,8 +19,7 @@ import * as React from 'react';
 import * as marked from 'marked';
 import * as hljs from 'highlight.js';
 import { requestRestExt } from '../services/restService';
-import { Button, Typography } from '@material-ui/core';
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
+import { Button, Typography } from '@mui/material';
 const defaultRenderer = new marked.Renderer();
 defaultRenderer.link = (href, title, text) => (
   `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
@@ -168,7 +167,7 @@ class AboutComponent extends React.Component<any, AboutState> {
       <div style={containerStyle}>
         { this.state.isContentLoadedSucessfully &&
         <div style={{float: "right", marginRight: "10px"}}>
-        <Button variant="contained" onClick={e => this.copyToClipboard(e)}>
+        <Button color="inherit" variant="contained" onClick={e => this.copyToClipboard(e)}>
            Copy to clipboard
         </Button>
           {
diff --git a/sdnr/wt/odlux/framework/src/views/frame.tsx b/sdnr/wt/odlux/framework/src/views/frame.tsx
index 1c78dd297..278fbe1db 100644
--- a/sdnr/wt/odlux/framework/src/views/frame.tsx
+++ b/sdnr/wt/odlux/framework/src/views/frame.tsx
@@ -1,130 +1,133 @@
-/**

- * ============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 { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

-

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

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

-

-import { SnackbarProvider } from 'notistack';

-import { ConfirmProvider } from 'material-ui-confirm';

-

-import AppFrame from '../components/routing/appFrame';

-import TitleBar from '../components/titleBar';

-import Menu from '../components/navigationMenu';

-import ErrorDisplay from '../components/errorDisplay';

-import SnackDisplay from '../components/material-ui/snackDisplay';

-

-import Home from '../views/home';

-import Login from '../views/login';

-import About from '../views/about';

-import Test from '../views/test';

-import UserSettings from '../views/settings';

-

-import applicationService from '../services/applicationManager';

-

-

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

-  root: {

-    flexGrow: 1,

-    height: '100%',

-    zIndex: 1,

-    overflow: 'hidden',

-    position: 'relative',

-    display: 'flex',

-  },

-  content: {

-    flexGrow: 1,

-    display: "flex",

-    flexDirection: "column",

-    backgroundColor: theme.palette.background.default,

-    padding: theme.spacing(3),

-    minWidth: 0, // So the Typography noWrap works

-  },

-  toolbar: theme.mixins.toolbar as any

-});

-

-

-

-type FrameProps = WithStyles<typeof styles>;

-

-class FrameComponent extends React.Component<FrameProps>{

-

-  render() {

-    const registrations = applicationService.applications;

-    const { classes } = this.props;

-    return (

-      <ConfirmProvider>

-        <SnackbarProvider maxSnack={3}>

-            <Router>

-            <div className={classes.root}>

-                <SnackDisplay />

-                <ErrorDisplay />

-                <TitleBar />

-                <Menu />

-                <main className={classes.content}>

-                {

-                    <div className={classes.toolbar} /> //needed for margins, don't remove!

-                }

-                <Switch>

-                    <Route exact path="/" component={() => (

-                      <AppFrame title={"Home"} icon={faHome} >

-                          <Home />

-                      </AppFrame>

-                    )} />

-                    <Route path="/about" component={() => (

-                      <AppFrame title={"About"} icon={faAddressBook} >

-                          <About />

-                      </AppFrame>

-                    )} />

-                    <Route path="/settings" component={() => (

-                      <AppFrame title={"Settings"} icon={faCog} >

-                          <UserSettings />

-                      </AppFrame>

-                    )} />

-                    {process.env.NODE_ENV === "development" ? <Route path="/test" component={() => (

-                      <AppFrame title={"Test"} icon={faAddressBook} >

-                          <Test />

-                      </AppFrame>

-                    )} /> : null}

-                    <Route path="/login" component={() => (

-                      <AppFrame title={"Login"} icon={faSignInAlt} >

-                          <Login />

-                      </AppFrame>

-                      )} />

-                    { Object.keys(registrations).map(p => {

-                      const application = registrations[p];

-                      return (<Route key={application.name} path={application.path || `/${application.name}`} component={() => (

-                          <AppFrame title={application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name} icon={application.icon} appId={application.name} >

-                          <application.rootComponent />

-                          </AppFrame>

-                      )} />)

-                    })}

-                    <Redirect to="/" />

-                </Switch>

-                </main>

-            </div>

-            </Router>

-        </SnackbarProvider>

-      </ConfirmProvider>  

-    );

-  }

-}

-

-export const Frame = withStyles(styles)(FrameComponent);

-export default Frame;

+/**
+ * ============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 { HashRouter as Router, Route, Redirect, Switch } 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 { faHome, faAddressBook, faSignInAlt, faCog } from '@fortawesome/free-solid-svg-icons';
+
+import { SnackbarProvider } from 'notistack';
+import { ConfirmProvider } from 'material-ui-confirm';
+
+import AppFrame from '../components/routing/appFrame';
+import TitleBar from '../components/titleBar';
+import Menu from '../components/navigationMenu';
+import ErrorDisplay from '../components/errorDisplay';
+import SnackDisplay from '../components/material-ui/snackDisplay';
+
+import Home from '../views/home';
+import Login from '../views/login';
+import About from '../views/about';
+import Test from '../views/test';
+import UserSettings from '../views/settings';
+
+import applicationService from '../services/applicationManager';
+
+
+const styles = (theme: Theme) => createStyles({
+  root: {
+    flexGrow: 1,
+    height: '100%',
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  content: {
+    flexGrow: 1,
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: '#fafafa',
+    padding: theme.spacing(3),
+    minWidth: 0, // So the Typography noWrap works
+  },
+  toolbar: theme.mixins.toolbar as any
+});
+
+
+
+type FrameProps = WithStyles<typeof styles>;
+
+class FrameComponent extends React.Component<FrameProps>{
+
+  render() {
+    const registrations = applicationService.applications;
+    const { classes } = this.props;
+    return (
+      <ConfirmProvider>
+        <SnackbarProvider maxSnack={3}>
+            <Router>
+            <div className={classes.root}>
+                <SnackDisplay />
+                <ErrorDisplay />
+                <TitleBar />
+                <Menu />
+                <main className={classes.content}>
+                {
+                    <div className={classes.toolbar} /> //needed for margins, don't remove!
+                }
+                <Switch>
+                    <Route exact path="/" component={() => (
+                      <AppFrame title={"Home"} icon={faHome} >
+                          <Home />
+                      </AppFrame>
+                    )} />
+                    <Route path="/about" component={() => (
+                      <AppFrame title={"About"} icon={faAddressBook} >
+                          <About />
+                      </AppFrame>
+                    )} />
+                    <Route path="/settings" component={() => (
+                      <AppFrame title={"Settings"} icon={faCog} >
+                          <UserSettings />
+                      </AppFrame>
+                    )} />
+                    {process.env.NODE_ENV === "development" ? <Route path="/test" component={() => (
+                      <AppFrame title={"Test"} icon={faAddressBook} >
+                          <Test />
+                      </AppFrame>
+                    )} /> : null}
+                    <Route path="/login" component={() => (
+                      <AppFrame title={"Login"} icon={faSignInAlt} >
+                          <Login />
+                      </AppFrame>
+                      )} />
+                    { Object.keys(registrations).map(p => {
+                      const application = registrations[p];
+                      return (<Route key={application.name} path={application.path || `/${application.name}`} component={() => (
+                          <AppFrame title={application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name} icon={application.icon} appId={application.name} >
+                          <application.rootComponent />
+                          </AppFrame>
+                      )} />)
+                    })}
+                    <Redirect to="/" />
+                </Switch>
+                </main>
+            </div>
+            </Router>
+        </SnackbarProvider>
+      </ConfirmProvider>  
+    );
+  }
+}
+
+export const Frame = withStyles(styles)(FrameComponent);
+export default Frame;
diff --git a/sdnr/wt/odlux/framework/src/views/home.tsx b/sdnr/wt/odlux/framework/src/views/home.tsx
index 176de02ab..92fd0b262 100644
--- a/sdnr/wt/odlux/framework/src/views/home.tsx
+++ b/sdnr/wt/odlux/framework/src/views/home.tsx
@@ -2,7 +2,7 @@
  * ============LICENSE_START========================================================================
  * ONAP : ccsdk feature sdnr wt odlux
  * =================================================================================================
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * Copyright (C) 2021 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
@@ -15,409 +15,56 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
-
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import connect, { Connect, IDispatcher } from '..//flux/connect';
-import { IApplicationState } from '../handlers/applicationStateHandler';
-import { IApplicationStoreState } from '../store/applicationStore';
-import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { Doughnut } from 'react-chartjs-2';
-import { NavigateToApplication } from '../actions/navigationActions';
 
-const styles = (theme: Theme) => createStyles({
-  pageWidthSettings: {
-    width: '50%',
-    float: 'left'
-  },
-})
+import * as React from 'react';
+import { IApplicationStoreState } from "../store/applicationStore";
+import connect, { Connect, IDispatcher } from "../flux/connect";
+import applicationService from '../services/applicationManager';
 
-const scrollbar = { overflow: "auto", paddingRight: "20px" }
+type props = Connect<typeof mapProps, typeof mapDispatch>;
 
-let connectionStatusinitialLoad = true;
-let connectionStatusinitialStateChanged = false;
-let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
-let connectionTotalCount = 0;
+type SettingsEntry = { name: string, element: JSX.Element }
 
-let alarmStatusinitialLoad = true;
-let alarmStatusinitialStateChanged = false;
-let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
-let alarmTotalCount = 0;
 
 const mapProps = (state: IApplicationStoreState) => ({
-  connectionStatusCount: state.connect.connectionStatusCount,
-  alarmStatus: state.fault.faultStatus
 });
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
 });
 
-type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
-
-class Home extends React.Component<HomeComponentProps>  {
-  constructor(props: HomeComponentProps) {
-    super(props);
-    this.state = {
-    }
-  }
-
-  render(): JSX.Element {
-    const { classes } = this.props;
-
-    if (!this.props.connectionStatusCount.isLoadingConnectionStatusChart) {
-      connectionStatusDataLoad = [
-        this.props.connectionStatusCount.Connected,
-        this.props.connectionStatusCount.Connecting,
-        this.props.connectionStatusCount.Disconnected,
-        this.props.connectionStatusCount.UnableToConnect
-      ];
-      connectionTotalCount = this.props.connectionStatusCount.Connected + this.props.connectionStatusCount.Connecting
-        + this.props.connectionStatusCount.Disconnected + this.props.connectionStatusCount.UnableToConnect;
+const DashboardView: React.FunctionComponent<props> = (props) => {
 
-    }
-
-    if (!this.props.alarmStatus.isLoadingAlarmStatusChart) {
-      alarmStatusDataLoad = [
-        this.props.alarmStatus.critical,
-        this.props.alarmStatus.major,
-        this.props.alarmStatus.minor,
-        this.props.alarmStatus.warning
-      ];
-      alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major
-        + this.props.alarmStatus.minor + this.props.alarmStatus.warning;
-    }
+  const registrations = applicationService.applications;
 
-    /** Available Network Connection Status chart data */
-    const connectionStatusData = {
-      labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'],
-      datasets: [{
-        data: connectionStatusDataLoad,
-        backgroundColor: [
-          'rgb(0, 153, 51)',
-          'rgb(255, 102, 0)',
-          'rgb(191, 191, 191)',
-          'rgb(191, 191, 191)'
-        ]
-      }]
-    };
+  const [selectedIndex] = React.useState(0);
 
+  let settingsArray: SettingsEntry[] = [];
 
-    /** No Devices available */
-    const connectionStatusUnavailableData = {
-      labels: ['No Devices available'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(255, 255, 255)'
-        ]
-      }]
-    };
-
-    /** Loading Connection Status chart */
-    const connectionStatusisLoading = {
-      labels: ['Loading chart...'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(255, 255, 255)'
-        ]
-      }]
-    };
-
-    /** Loading Alarm Status chart */
-    const alarmStatusisLoading = {
-      labels: ['Loading chart...'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(255, 255, 255)'
-        ]
-      }]
-    };
-
-    /** Connection status options */
-    let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'];
-    const connectionStatusOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      },
-      onClick: (event: MouseEvent, item: any) => {
-        if (item[0]) {
-          let connectionStatus = labels[item[0].index] + '';
-          this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus);
-        }
-      }
-    }
-
-    /** Connection status unavailable options */
-    const connectionStatusUnavailableOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        tooltip: {
-          enabled: false
-        }
-      }
-    }
+  let settingsElements: (SettingsEntry)[] = Object.keys(registrations).map(p => {
+    const application = registrations[p];
 
-    /** Add text inside the doughnut chart for Connection Status */
-    const connectionStatusPlugins = [{
-      beforeDraw: function (chart: any) {
-        var width = chart.width,
-          height = chart.height,
-          ctx = chart.ctx;
-        ctx.restore();
-        var fontSize = (height / 480).toFixed(2);
-        ctx.font = fontSize + "em sans-serif";
-        ctx.textBaseline = "top";
-        var text = "Network Connection Status",
-          textX = Math.round((width - ctx.measureText(text).width) / 2),
-          textY = height / 2;
-        ctx.fillText(text, textX, textY);
-        ctx.save();
-      }
-    }]
+    if (application.dashbaordElement) {
+      const value: SettingsEntry = { name: application.menuEntry?.toString()!, element: <application.dashbaordElement /> };
+      return value;
 
-    /** Alarm status Data */
-    const alarmStatusData = {
-      labels: [
-        'Critical',
-        'Major',
-        'Minor',
-        'Warning'
-      ],
-      datasets: [{
-        data: alarmStatusDataLoad,
-        backgroundColor: [
-          'rgb(240, 25, 10)',
-          'rgb(240, 133, 10)',
-          'rgb(240, 240, 10)',
-          'rgb(46, 115, 176)'
-        ],
-      }]
-    }
-
-    /** No Alarm status available */
-    const alarmStatusUnavailableData = {
-      labels: ['No Alarms available'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(0, 153, 51)'
-        ]
-      }]
-    };
-
-    /** Alarm status Options */
-    let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
-    const alarmStatusOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      },
-      onClick: (event: MouseEvent, item: any) => {
-        if (item[0]) {
-          let severity = alarmLabels[item[0].index] + '';
-          this.props.navigateToApplication("fault", '/alarmStatus/' + severity);
-        }
-      },
-    };
-
-    /** Alarm status unavailable options */
-    const alarmStatusUnavailableOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        tooltip: {
-          enabled: false
-        }
-      }
-    }
-    /** Add text inside the doughnut chart for Alarm Status */
-    const alarmStatusPlugins = [{
-      beforeDraw: function (chart: any) {
-        var width = chart.width,
-          height = chart.height,
-          ctx = chart.ctx;
-        ctx.restore();
-        var fontSize = (height / 480).toFixed(2);
-        ctx.font = fontSize + "em sans-serif";
-        ctx.textBaseline = "top";
-        var text = "Network Alarm Status",
-          textX = Math.round((width - ctx.measureText(text).width) / 2),
-          textY = height / 2;
-        ctx.fillText(text, textX, textY);
-        ctx.save();
-      }
-    }]
-
-    return (
-      <>
-        <div style={scrollbar} >
-          <h1>Welcome to ODLUX</h1>
-          <div className={classes.pageWidthSettings}>
-            {this.checkElementsAreLoaded() ?
-              this.checkConnectionStatus() && connectionTotalCount != 0 ?
-                <Doughnut
-                  data={connectionStatusData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={connectionStatusOptions}
-                  plugins={connectionStatusPlugins}
-                />
-                : <Doughnut
-                  data={connectionStatusUnavailableData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={connectionStatusUnavailableOptions}
-                  plugins={connectionStatusPlugins} />
-              : <Doughnut
-                data={connectionStatusisLoading}
-                type={Doughnut}
-                width={500}
-                height={500}
-                options={connectionStatusUnavailableOptions}
-                plugins={connectionStatusPlugins}
-              />
-            }
-          </div>
-          <div className={classes.pageWidthSettings}>
-            {this.checkAlarmsAreLoaded() ?
-              this.checkAlarmStatus() && alarmTotalCount != 0 ?
-                <Doughnut
-                  data={alarmStatusData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={alarmStatusOptions}
-                  plugins={alarmStatusPlugins}
-                />
-                : <Doughnut
-                  data={alarmStatusUnavailableData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={alarmStatusUnavailableOptions}
-                  plugins={alarmStatusPlugins}
-                />
-              : <Doughnut
-                data={alarmStatusisLoading}
-                type={Doughnut}
-                width={500}
-                height={500}
-                options={alarmStatusUnavailableOptions}
-                plugins={alarmStatusPlugins}
-              />
-            }
-          </div>
-        </div>
-      </>
-    )
-  }
-
-  /** Check if connection status data available */
-  public checkConnectionStatus = () => {
-    let statusCount = this.props.connectionStatusCount;
-    if (statusCount.isLoadingConnectionStatusChart) {
-      return true;
-    }
-    if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
-      && statusCount.UnableToConnect == 0) {
-      return false;
     } else {
-      return true;
+      return null;
     }
-  }
+  }).filter((x): x is SettingsEntry => x !== null);
 
-  /** Check if connection status chart data is loaded */
-  public checkElementsAreLoaded = () => {
-    let isLoadingCheck = this.props.connectionStatusCount;
-    if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) {
-      if (this.checkConnectionStatus()) {
-        connectionStatusinitialLoad = false;
-        return true;
-      }
-      return false;
-    } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) {
-      connectionStatusinitialLoad = false;
-      connectionStatusinitialStateChanged = true;
-      return !isLoadingCheck.isLoadingConnectionStatusChart;
-    } else if (connectionStatusinitialStateChanged) {
-      if (!isLoadingCheck.isLoadingConnectionStatusChart) {
-        connectionStatusinitialStateChanged = false;
-      }
-      return !isLoadingCheck.isLoadingConnectionStatusChart;
-    }
-    return true;
-  }
 
-  /** Check if alarms data available */
-  public checkAlarmStatus = () => {
-    let alarmCount = this.props.alarmStatus;
-    if (alarmCount.isLoadingAlarmStatusChart) {
-      return true;
-    }
-    if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
-      return false;
-    }
-    else {
-      return true;
-    }
-  }
+  settingsArray.push(...settingsElements);
 
-  /** Check if alarm status chart data is loaded */
-  public checkAlarmsAreLoaded = () => {
-    let isLoadingCheck = this.props.alarmStatus;
-    if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) {
-      if (this.checkAlarmStatus()) {
-        alarmStatusinitialLoad = false;
-        return true;
-      }
-      return false;
-    } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) {
-      alarmStatusinitialLoad = false;
-      alarmStatusinitialStateChanged = true;
-      return !isLoadingCheck.isLoadingAlarmStatusChart;
-    } else if (alarmStatusinitialStateChanged) {
-      if (!isLoadingCheck.isLoadingAlarmStatusChart) {
-        alarmStatusinitialStateChanged = false;
-      }
-      return !isLoadingCheck.isLoadingAlarmStatusChart;
-    }
-    return true;
-  }
+  return <div>
+    <div>
+      <div>
+        {
+          settingsArray[selectedIndex]?.element
+        }
+      </div>
+    </div>
+  </div>
 }
 
-export default withStyles(styles)(withRouter(connect(mapProps, mapDispatch)(Home)));
\ No newline at end of file
+
+export default connect(mapProps, mapDispatch)(DashboardView);
diff --git a/sdnr/wt/odlux/framework/src/views/login.tsx b/sdnr/wt/odlux/framework/src/views/login.tsx
index 53219facd..8eb7a6c0f 100644
--- a/sdnr/wt/odlux/framework/src/views/login.tsx
+++ b/sdnr/wt/odlux/framework/src/views/login.tsx
@@ -18,19 +18,23 @@
 import * as React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import Alert from '@material-ui/lab/Alert';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import LockIcon from '@material-ui/icons/LockOutlined';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Alert from '@mui/material/Alert';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
+import LockIcon from '@mui/icons-material/LockOutlined';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
 import connect, { Connect, IDispatcher } from '../flux/connect';
 import authenticationService from '../services/authenticationService';
@@ -40,8 +44,8 @@ import { loginUserAction, UpdatePolicies } from '../actions/authentication';
 
 import { IApplicationStoreState } from '../store/applicationStore';
 import { AuthPolicy, AuthToken, User } from '../models/authentication';
-import Menu from '@material-ui/core/Menu';
-import { MenuItem } from '@material-ui/core';
+import Menu from '@mui/material/Menu';
+import { MenuItem } from '@mui/material';
 
 const styles = (theme: Theme) => createStyles({
   layout: {
@@ -49,7 +53,7 @@ const styles = (theme: Theme) => createStyles({
     display: 'block', // Fix IE11 issue.
     marginLeft: theme.spacing(3),
     marginRight: theme.spacing(3),
-    [theme.breakpoints.up(400 + theme.spacing(3) * 2)]: {
+    [theme.breakpoints.up(400 + Number(theme.spacing(3).replace('px','')) * 2)]: {
       width: 400,
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -60,7 +64,7 @@ const styles = (theme: Theme) => createStyles({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
+    padding: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`,
   },
   avatar: {
     margin: theme.spacing(1),
@@ -175,7 +179,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
                         aria-haspopup="true"
                         fullWidth
                         variant="contained"
-                        color="primary"
+                        color="inherit"
                         className={classes.submit} onClick={() => { window.location = provider.loginUrl as any; }}>
                         {provider.title}
                       </Button>))
@@ -189,14 +193,14 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
                 </>
               }
 
-              <FormControl margin="normal" required fullWidth>
+              <FormControl variant="standard" margin="normal" required fullWidth>
                 <InputLabel htmlFor="username">Username</InputLabel>
                 <Input id="username" name="username" autoComplete="username" autoFocus
                   disabled={this.state.busy}
                   value={this.state.username}
                   onChange={event => { this.setState({ username: event.target.value }) }} />
               </FormControl>
-              <FormControl margin="normal" required fullWidth>
+              <FormControl variant="standard" margin="normal" required fullWidth>
                 <InputLabel htmlFor="password">Password</InputLabel>
                 <Input
                   name="password"
@@ -208,7 +212,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
                   onChange={event => { this.setState({ password: event.target.value }) }}
                 />
               </FormControl>
-              <FormControl margin="normal" required fullWidth>
+              <FormControl variant="standard" margin="normal" required fullWidth>
                 <InputLabel htmlFor="password">Domain</InputLabel>
                 <Input
                   name="scope"
@@ -224,7 +228,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
                 type="submit"
                 fullWidth
                 variant="contained"
-                color="primary"
+                color="inherit"
                 disabled={this.state.busy}
                 className={classes.submit}
                 onClick={this.onSignIn}
diff --git a/sdnr/wt/odlux/framework/src/views/settings.tsx b/sdnr/wt/odlux/framework/src/views/settings.tsx
index f1a8ab35a..a6b940bfa 100644
--- a/sdnr/wt/odlux/framework/src/views/settings.tsx
+++ b/sdnr/wt/odlux/framework/src/views/settings.tsx
@@ -21,8 +21,8 @@ import { IApplicationStoreState } from "../store/applicationStore";
 import connect, { Connect, IDispatcher } from "../flux/connect";
 
 import applicationService from '../services/applicationManager';
-import { makeStyles } from '@material-ui/styles';
-import { Divider, List, ListItem, ListItemText, Paper } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Divider, List, ListItem, ListItemText, Paper } from '@mui/material';
 
 import { GeneralUserSettings } from '../components/settings/general'
 import { GoBackAction } from '../actions/navigationActions';
diff --git a/sdnr/wt/odlux/framework/src/views/test.tsx b/sdnr/wt/odlux/framework/src/views/test.tsx
index 763b79a1f..84c4094c3 100644
--- a/sdnr/wt/odlux/framework/src/views/test.tsx
+++ b/sdnr/wt/odlux/framework/src/views/test.tsx
@@ -18,17 +18,21 @@
 import * as React from 'react';
 
 import { withComponents, WithComponents } from '../utilities/withComponents';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
 
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { MaterialTable, MaterialTableCtorType, ColumnType } from '../components/material-table';
 import { TreeView, TreeItem, TreeViewCtorType } from '../components/material-ui/treeView';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
 
 const styles = (theme: Theme) => createStyles({
   root: {
@@ -839,11 +843,11 @@ const TestComponent = (props: WithComponents<typeof components> & WithStyles<typ
   return (
     <div>
       <h2>About</h2>
-      <ExpansionPanel>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={props.classes.heading}>Client Side Table Demo</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
+        </AccordionSummary>
+        <AccordionDetails>
           <SampleDataMaterialTable rows={tableData} columns={
             [
               { property: "index", type: ColumnType.text, title: "Index", width: "80px", disableFilter: true, disableSorting: true },
@@ -855,16 +859,16 @@ const TestComponent = (props: WithComponents<typeof components> & WithStyles<typ
             ]
           } idProperty={"_id"} title={"Customers 2018"} >
           </SampleDataMaterialTable>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-      <ExpansionPanel>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={props.classes.heading}>Tree Demo</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
+        </AccordionSummary>
+        <AccordionDetails>
           <SampleTree items={treeData} useFolderIcons enableSearchBar />
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
+        </AccordionDetails>
+      </Accordion>
     </div>
   );
 };