update odlux sources

update basic odlux functionality for kohn

Issue-ID: CCSDK-3765
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>
Change-Id: I3723c9c2f35b9012ba537920b294a54bb556cbc6
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>

8 files changed, 571 insertions, 45 deletions

diff --git a/sdnr/wt/odlux/apps/faultApp/src/actions/partialUpdatesAction.ts b/sdnr/wt/odlux/apps/faultApp/src/actions/partialUpdatesAction.ts
deleted file mode 100644
index 198976796..000000000
--- a/sdnr/wt/odlux/apps/faultApp/src/actions/partialUpdatesAction.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2020 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 { Action } from "../../../../framework/src/flux/action";
-
-export class SetPartialUpdatesAction extends Action {
-    constructor(public isActive: boolean) {
-        super();
-    }
-}
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/faultApp/src/actions/statusActions.ts b/sdnr/wt/odlux/apps/faultApp/src/actions/statusActions.ts
index c50c08ef2..54fea6a5f 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/actions/statusActions.ts
+++ b/sdnr/wt/odlux/apps/faultApp/src/actions/statusActions.ts
@@ -21,15 +21,18 @@ import { Dispatch } from '../../../../framework/src/flux/store';
 
 
 export class SetFaultStatusAction extends FaultApplicationBaseAction {
-  constructor (public criticalFaults: number, public majorFaults: number, public minorFaults: number, public warnings: number, public isLoadingAlarmStatusChart: boolean) {
+  constructor(public criticalFaults: number, public majorFaults: number, public minorFaults: number, public warnings: number,
+    public isLoadingAlarmStatusChart: boolean, public ConnectedCount: number, public ConnectingCount: number, public DisconnectedCount: number,
+    public MountedCount: number, public UnableToConnectCount: number, public UndefinedCount: number, public UnmountedCount: number,
+    public totalCount: number, public isLoadingConnectionStatusChart: boolean) {
     super();
   }
 }
 
 
 export const refreshFaultStatusAsyncAction = async (dispatch: Dispatch) => {
-  
-  dispatch(new SetFaultStatusAction(0, 0, 0, 0, true));
+
+  dispatch(new SetFaultStatusAction(0, 0, 0, 0, true, 0, 0, 0, 0, 0, 0, 0, 0, true));
   const result = await getFaultStateFromDatabase().catch(_ => null);
   if (result) {
     const statusAction = new SetFaultStatusAction(
@@ -37,12 +40,21 @@ export const refreshFaultStatusAsyncAction = async (dispatch: Dispatch) => {
       result["Major"] || 0,
       result["Minor"] || 0,
       result["Warning"] || 0,
+      false,
+      result["Connected"] || 0,
+      result["Connecting"] || 0,
+      result["Disconnected"] || 0,
+      result["Mounted"] || 0,
+      result["UnableToConnect"] || 0,
+      result["Undefined"] || 0,
+      result["Unmounted"] || 0,
+      result["total"] || 0,
       false
     );
     dispatch(statusAction);
     return;
   }
   else {
-    dispatch(new SetFaultStatusAction(0, 0, 0, 0, false));
+    dispatch(new SetFaultStatusAction(0, 0, 0, 0, false, 0, 0, 0, 0, 0, 0, 0, 0, false));
   }
 }
diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx
new file mode 100644
index 000000000..a81705965
--- /dev/null
+++ b/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx
@@ -0,0 +1,476 @@
+/**
+ * ============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 connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';;
+import { Theme } from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import { Doughnut } from 'react-chartjs-2';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+
+const styles = (theme: Theme) => createStyles({
+  pageWidthSettings: {
+    width: '50%',
+    float: 'left'
+  },
+})
+
+const scrollbar = { overflow: "auto", paddingRight: "20px" }
+
+let connectionStatusinitialLoad = true;
+let connectionStatusinitialStateChanged = false;
+let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
+let connectionTotalCount = 0;
+
+let alarmStatusinitialLoad = true;
+let alarmStatusinitialStateChanged = false;
+let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
+let alarmTotalCount = 0;
+
+const mapProps = (state: IApplicationStoreState) => ({
+  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 DashboardHome extends React.Component<HomeComponentProps>  {
+  constructor(props: HomeComponentProps) {
+    super(props);
+    this.state = {
+    }
+  }
+
+  render(): JSX.Element {
+    const { classes } = this.props;
+
+    if (!this.props.alarmStatus.isLoadingConnectionStatusChart) {
+      connectionStatusDataLoad = [
+        this.props.alarmStatus.Connected,
+        this.props.alarmStatus.Connecting,
+        this.props.alarmStatus.Disconnected,
+        this.props.alarmStatus.UnableToConnect,
+        this.props.alarmStatus.Undefined
+      ];
+      connectionTotalCount = this.props.alarmStatus.Connected + this.props.alarmStatus.Connecting
+        + this.props.alarmStatus.Disconnected + this.props.alarmStatus.UnableToConnect + this.props.alarmStatus.Undefined;
+
+    }
+
+    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;
+    }
+
+    /** Available Network Connection Status chart data */
+    const connectionStatusData = {
+      labels: [
+        'Connected: ' + this.props.alarmStatus.Connected,
+        'Connecting: ' + this.props.alarmStatus.Connecting,
+        'Disconnected: ' + this.props.alarmStatus.Disconnected,
+        'UnableToConnect: ' + this.props.alarmStatus.UnableToConnect,
+        'Undefined: ' + this.props.alarmStatus.Undefined
+      ],
+      datasets: [{
+        labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect', 'Undefined'],
+        data: connectionStatusDataLoad,
+        backgroundColor: [
+          'rgb(0, 153, 51)',
+          'rgb(255, 102, 0)',
+          'rgb(191, 191, 191)',
+          'rgb(191, 191, 191)',
+          'rgb(242, 240, 240)'
+        ]
+      }]
+    };
+
+
+    /** 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', 'Undefined'];
+    const connectionStatusOptions = {
+      tooltips: {
+        callbacks: {
+          label: (tooltipItem: any, data: any) => {
+            let label =
+              (data.datasets[tooltipItem.datasetIndex].labels &&
+                data.datasets[tooltipItem.datasetIndex].labels[
+                tooltipItem.index
+                ]) ||
+              data.labels[tooltipItem.index] ||
+              "";
+            if (label) {
+              label += ": ";
+            }
+            label +=
+              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
+              (data.datasets[tooltipItem.datasetIndex].labelSuffix || "");
+
+            return label;
+          }
+        }
+      },
+      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
+        }
+      }
+    }
+
+    /** 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();
+      }
+    }]
+
+    /** Alarm status Data */
+    const alarmStatusData = {
+      labels: [
+        'Critical : ' + this.props.alarmStatus.critical,
+        'Major : ' + this.props.alarmStatus.major,
+        'Minor : ' + this.props.alarmStatus.minor,
+        'Warning : ' + this.props.alarmStatus.warning
+      ],
+      datasets: [{
+        labels: ['Critical', 'Major', 'Minor', 'Warning'],
+        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 = {
+      tooltips: {
+        callbacks: {
+          label: (tooltipItem: any, data: any) => {
+            let label =
+              (data.datasets[tooltipItem.datasetIndex].labels &&
+                data.datasets[tooltipItem.datasetIndex].labels[
+                tooltipItem.index
+                ]) ||
+              data.labels[tooltipItem.index] ||
+              "";
+            if (label) {
+              label += ": ";
+            }
+            label +=
+              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
+              (data.datasets[tooltipItem.datasetIndex].labelSuffix || "");
+
+            return label;
+          }
+        }
+      },
+      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 aria-label="welcome-to-odlux">Welcome to ODLUX</h1>
+          <div style={{ width: '50%', float: 'left' }}>
+            {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 style={{ width: '50%', float: 'left' }}>
+            {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.alarmStatus;
+    if (statusCount.isLoadingConnectionStatusChart) {
+      return true;
+    }
+    if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
+      && statusCount.UnableToConnect == 0 && statusCount.Undefined == 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  /** Check if connection status chart data is loaded */
+  public checkElementsAreLoaded = () => {
+    let isLoadingCheck = this.props.alarmStatus;
+    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;
+    }
+  }
+
+  /** 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;
+  }
+}
+
+export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/faultApp/src/handlers/faultStatusHandler.ts b/sdnr/wt/odlux/apps/faultApp/src/handlers/faultStatusHandler.ts
index e1fceb4be..6fa95b685 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/handlers/faultStatusHandler.ts
+++ b/sdnr/wt/odlux/apps/faultApp/src/handlers/faultStatusHandler.ts
@@ -23,7 +23,16 @@ export interface IFaultStatus {
   major: number,
   minor: number,
   warning: number,
-  isLoadingAlarmStatusChart: boolean
+  isLoadingAlarmStatusChart: boolean,
+  Connected: number,
+  Connecting: number,
+  Disconnected: number,
+  Mounted: number,
+  UnableToConnect: number,
+  Undefined: number,
+  Unmounted: number,
+  total: number,
+  isLoadingConnectionStatusChart: boolean
 }
 
 const faultStatusInit: IFaultStatus = {
@@ -31,7 +40,16 @@ const faultStatusInit: IFaultStatus = {
   major: 0,
   minor: 0,
   warning: 0,
-  isLoadingAlarmStatusChart: false
+  isLoadingAlarmStatusChart: false,
+  Connected: 0,
+  Connecting: 0,
+  Disconnected: 0,
+  Mounted: 0,
+  UnableToConnect: 0,
+  Undefined: 0,
+  Unmounted: 0,
+  total: 0,
+  isLoadingConnectionStatusChart: false
 };
 
 export const faultStatusHandler: IActionHandler<IFaultStatus> = (state = faultStatusInit, action) => {
@@ -41,7 +59,16 @@ export const faultStatusHandler: IActionHandler<IFaultStatus> = (state = faultSt
       major: action.majorFaults,
       minor: action.minorFaults,
       warning: action.warnings,
-      isLoadingAlarmStatusChart: action.isLoadingAlarmStatusChart
+      isLoadingAlarmStatusChart: action.isLoadingAlarmStatusChart,
+      Connected: action.ConnectedCount,
+      Connecting: action.ConnectingCount,
+      Disconnected: action.DisconnectedCount,
+      Mounted: action.MountedCount,
+      UnableToConnect: action.UnableToConnectCount,
+      Undefined: action.UndefinedCount,
+      Unmounted: action.UnmountedCount,
+      total: action.totalCount,
+      isLoadingConnectionStatusChart: action.isLoadingConnectionStatusChart
     }
   }
 
diff --git a/sdnr/wt/odlux/apps/faultApp/src/models/fault.ts b/sdnr/wt/odlux/apps/faultApp/src/models/fault.ts
index 2ba8da01d..5f38e5fe9 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/models/fault.ts
+++ b/sdnr/wt/odlux/apps/faultApp/src/models/fault.ts
@@ -61,18 +61,35 @@ export type FaultsReturnType = {
   criticals: number,
   majors: number,
   minors: number,
-  warnings: number
+  warnings: number,
+  Connected: number,
+  Connecting: number,
+  Disconnected: number,
+  Mounted: number,
+  UnableToConnect: number,
+  Undefined: number,
+  Unmounted: number,
+  total: number
 };
 
 export type FaultType = {
   Critical: number,
   Major: number,
   Minor: number,
-  Warning: number
+  Warning: number,
+  Connected: number,
+  Connecting: number,
+  Disconnected: number,
+  Mounted: number,
+  UnableToConnect: number,
+  Undefined: number,
+  Unmounted: number,
+  total: number
 };
 
 export type Faults = {
-  faults: FaultsReturnType
+  faults: FaultsReturnType,
+  'network-element-connections': FaultsReturnType
 };
 
 export type DeletedStuckAlarms = {
diff --git a/sdnr/wt/odlux/apps/faultApp/src/pluginFault.tsx b/sdnr/wt/odlux/apps/faultApp/src/pluginFault.tsx
index 0c5fdde27..ff901b097 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/pluginFault.tsx
+++ b/sdnr/wt/odlux/apps/faultApp/src/pluginFault.tsx
@@ -41,6 +41,8 @@ import { createCurrentProblemsProperties, createCurrentProblemsActions, currentP
 import { FaultStatus } from "./components/faultStatus";
 import { refreshFaultStatusAsyncAction, SetFaultStatusAction } from "./actions/statusActions";
 
+import DashboardHome from "./components/dashboardHome";
+
 let currentMountId: string | undefined = undefined;
 let currentSeverity: string | undefined = undefined;
 let refreshInterval: ReturnType<typeof window.setInterval> | null = null;
@@ -113,6 +115,7 @@ export function register() {
     rootComponent: App,
     rootActionHandler: faultAppRootHandler,
     statusBarElement: FaultStatus,
+    dashbaordElement: DashboardHome,
     menuEntry: "Fault"
   });
 
@@ -149,14 +152,14 @@ export function register() {
   applicationApi.logoutEvent.addHandler(e=>{
 
     applicationApi.applicationStoreInitialized.then(store => {
-      store.dispatch(new SetFaultStatusAction(0, 0, 0, 0, false));
+      store.dispatch(new SetFaultStatusAction(0, 0, 0, 0, false, 0, 0, 0, 0, 0, 0, 0, 0, false));
       clearInterval(refreshInterval!);
     });
   })
   
  
 
-  function startRefreshInterval(){
+  function startRefreshInterval()  {
     const refreshFaultStatus = window.setInterval(() => {
       applicationApi.applicationStoreInitialized.then(store => {
   
diff --git a/sdnr/wt/odlux/apps/faultApp/src/services/faultStatusService.ts b/sdnr/wt/odlux/apps/faultApp/src/services/faultStatusService.ts
index 663def086..880ed7715 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/services/faultStatusService.ts
+++ b/sdnr/wt/odlux/apps/faultApp/src/services/faultStatusService.ts
@@ -28,7 +28,15 @@ export const getFaultStateFromDatabase = async (): Promise<FaultType | null> =>
     Critical: 0,
     Major: 0,
     Minor: 0,
-    Warning: 0
+    Warning: 0,
+    Connected: 0,
+    Connecting: 0,
+    Disconnected: 0,
+    Mounted: 0,
+    UnableToConnect: 0,
+    Undefined: 0,
+    Unmounted: 0,
+    total: 0
   }
   let faults: Faults[] | null = null;
 
@@ -38,7 +46,15 @@ export const getFaultStateFromDatabase = async (): Promise<FaultType | null> =>
       Critical: faults[0].faults.criticals,
       Major: faults[0].faults.majors,
       Minor: faults[0].faults.minors,
-      Warning: faults[0].faults.warnings
+      Warning: faults[0].faults.warnings,
+      Connected: faults[0]["network-element-connections"].Connected,
+      Connecting: faults[0]["network-element-connections"].Connecting,
+      Disconnected: faults[0]["network-element-connections"].Disconnected,
+      Mounted: faults[0]["network-element-connections"].Mounted,
+      UnableToConnect: faults[0]["network-element-connections"].UnableToConnect,
+      Undefined: faults[0]["network-element-connections"].Undefined,
+      Unmounted: faults[0]["network-element-connections"].Unmounted,
+      total: faults[0]["network-element-connections"].total,
     }
   }
 
diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
index 456e05e84..b9cd5e4da 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
+++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
@@ -173,13 +173,13 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
           activePanelId === 'CurrentProblem' &&
           <>
             <FaultTable stickyHeader tableId="current-problems-table" idProperty="id" customActionButtons={customActions} columns={[
-              { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+              // { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+              { property: "severity", title: "Severity", type: ColumnType.text, width: "140px" },
               { property: "timestamp", type: ColumnType.text, title: "Timestamp" },
               { property: "nodeId", title: "Node Name", type: ColumnType.text },
               { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
               { property: "objectId", title: "Object Id", type: ColumnType.text },
               { property: "problem", title: "Alarm Type", type: ColumnType.text },
-              { property: "severity", title: "Severity", type: ColumnType.text, width: "140px" },
             ]} {...this.props.currentProblemsProperties} {...this.props.currentProblemsActions} />
             <RefreshCurrentProblemsDialog
               mode={this.state.refreshCurrentProblemsEditorMode}
@@ -190,13 +190,13 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
         {activePanelId === 'AlarmNotifications' &&
 
           <FaultAlarmNotificationTable stickyHeader tableId="alarm-notifications-table" idProperty="id" defaultSortColumn='timeStamp' defaultSortOrder='desc' rows={this.props.faultNotifications.faults} asynchronus columns={[
-            { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+            // { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+            { property: "severity", title: "Severity", width: "140px" },
             { property: "timeStamp", title: "Timestamp" },
             { property: "nodeName", title: "Node Name" },
             { property: "counter", title: "Count", width: "100px", type: ColumnType.numeric },
             { property: "objectId", title: "Object Id" },
             { property: "problem", title: "Alarm Type" },
-            { property: "severity", title: "Severity", width: "140px" },
           ]} />
         }
 
@@ -204,13 +204,13 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
           <>
             <FaultTable stickyHeader idProperty={'id'} tableId="alarm-log-table" customActionButtons={[refreshAlarmLogAction]}
               columns={[
-                { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+                // { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+                { property: "severity", title: "Severity", width: "140px" },
                 { property: "timestamp", title: "Timestamp" },
                 { property: "nodeId", title: "Node Name" },
                 { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
                 { property: "objectId", title: "Object Id" },
                 { property: "problem", title: "Alarm Type" },
-                { property: "severity", title: "Severity", width: "140px" },
                 { property: "sourceType", title: "Source", width: "140px" },
               ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} />
             <RefreshAlarmLogDialog