Create wt-odlux directory

Include odlux apps, helpserver and readthedocs

Issue-ID: CCSDK-3970
Change-Id: I1aee1327e7da12e8f658185b9a985a5204ad6065
Signed-off-by: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>

5 files changed, 942 insertions, 0 deletions

diff --git a/sdnr/wt-odlux/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx
new file mode 100644
index 000000000..e86b756a7
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx
@@ -0,0 +1,138 @@
+/**
+ * ============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 React from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+
+import { clearStuckAlarmAsyncAction } from '../actions/clearStuckAlarmsAction';
+import { currentAlarmsReloadAction } from '../handlers/currentAlarmsHandler';
+
+export enum ClearStuckAlarmsDialogMode {
+  None = 'none',
+  Show = 'show',
+}
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+  clearStuckAlarmsAsync: clearStuckAlarmAsyncAction(dispatcher.dispatch),
+  reloadCurrentAlarmsAction: () => dispatcher.dispatch(currentAlarmsReloadAction),
+});
+
+type clearStuckAlarmsProps = Connect<typeof undefined, typeof mapDispatch> & {
+  numberDevices: Number;
+  mode: ClearStuckAlarmsDialogMode;
+  stuckAlarms: string[];
+  onClose: () => void;
+};
+
+type ClearStuckAlarmsState = {
+  clearAlarmsSuccessful: boolean;
+  errormessage: string;
+  unclearedAlarms: string[];
+};
+
+class ClearStuckAlarmsDialogComponent extends React.Component<clearStuckAlarmsProps, ClearStuckAlarmsState> {
+  constructor(props: clearStuckAlarmsProps) {
+    super(props);
+    this.state = {
+      clearAlarmsSuccessful: true,
+      errormessage: '',
+      unclearedAlarms: [],
+    };
+  }
+
+  onClose = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    this.props.onClose();
+  };
+
+  onRefresh = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const result = await this.props.clearStuckAlarmsAsync(this.props.stuckAlarms);
+
+    if (result && result['devicemanager:output'].nodenames && result['devicemanager:output'].nodenames.length !== this.props.stuckAlarms.length) { //show errormessage if not all devices were cleared
+      const undeletedAlarm = this.props.stuckAlarms.filter(item => !result['devicemanager:output'].nodenames.includes(item));
+      const error = 'The alarms of the following devices couldn\'t be refreshed: ';
+      this.setState({ clearAlarmsSuccessful: false, errormessage: error, unclearedAlarms: undeletedAlarm });
+      return;
+
+    } else { //show errormessage if no devices were cleared
+      this.setState({ clearAlarmsSuccessful: false, errormessage: 'Alarms couldn\'t be refreshed.', unclearedAlarms: [] });
+    }
+
+    this.props.reloadCurrentAlarmsAction();
+    this.props.onClose();
+  };
+
+  onOk = (event: React.MouseEvent) => {
+
+    event.stopPropagation();
+    event.preventDefault();
+    if (this.state.unclearedAlarms.length > 0)
+      this.props.reloadCurrentAlarmsAction();
+    this.props.onClose();
+  };
+
+  render() {
+    console.log(this.props.stuckAlarms);
+    const device = this.props.numberDevices > 1 ? 'devices' : 'device';
+    const defaultMessage = 'Are you sure you want to refresh all alarms for ' + this.props.numberDevices + ' ' + device + '?';
+    const message = this.state.clearAlarmsSuccessful ? defaultMessage : this.state.errormessage;
+
+    const defaultTitle = 'Refresh Confirmation';
+    const title = this.state.clearAlarmsSuccessful ? defaultTitle : 'Refresh Result';
+
+    return (
+      <Dialog open={this.props.mode !== ClearStuckAlarmsDialogMode.None}>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {message}
+          </DialogContentText>
+          {
+            this.state.unclearedAlarms.map(item =>
+              <DialogContentText>
+                {item}
+              </DialogContentText>,
+            )
+          }
+        </DialogContent>
+        <DialogActions>
+          {
+            this.state.clearAlarmsSuccessful &&
+            <>
+              <Button color="inherit" onClick={this.onRefresh}>Yes</Button>
+              <Button color="inherit" onClick={this.onClose}>No</Button>
+            </>
+          }
+
+          {
+            !this.state.clearAlarmsSuccessful && <Button color="inherit" onClick={this.onOk}>Ok</Button>
+          }
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+const ClearStuckAlarmsDialog = connect(undefined, mapDispatch)(ClearStuckAlarmsDialogComponent);
+export default ClearStuckAlarmsDialog;
diff --git a/sdnr/wt-odlux/odlux/apps/faultApp/src/components/dashboardHome.tsx b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/dashboardHome.tsx
new file mode 100644
index 000000000..a3e32c42c
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/dashboardHome.tsx
@@ -0,0 +1,473 @@
+/**
+ * ============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 React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import { Doughnut } from 'react-chartjs-2';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+const styles = () => 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 {
+
+    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/odlux/apps/faultApp/src/components/faultStatus.tsx b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/faultStatus.tsx
new file mode 100644
index 000000000..57374dd77
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/faultStatus.tsx
@@ -0,0 +1,106 @@
+/**
+ * ============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 React from 'react';
+
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; // select app icon
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Typography from '@mui/material/Typography';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
+
+import { connect, Connect } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+
+const styles = () => createStyles({
+  icon: {
+    marginLeft: 8,
+    marginRight: 8,
+  },
+  critical: {
+    color: 'red',
+  },
+  major: {
+    color: 'orange',
+  },
+  minor: {
+    color: '#f7f700',
+  },
+  warning: {
+    color: '#428bca',
+  },
+});
+
+const mapProps = (state: IApplicationStoreState) => ({
+  faultStatus: state.fault.faultStatus,
+});
+
+
+type FaultStatusComponentProps = & WithStyles<typeof styles> & Connect<typeof mapProps>;
+
+class FaultStatusComponent extends React.Component<FaultStatusComponentProps> {
+  render(): JSX.Element {
+    const { classes, faultStatus } = this.props;
+
+    return (
+      <>
+        <Typography variant="body1" color="inherit">
+          Alarm Status:
+          <Tooltip title="Critical Alarms" arrow>
+            <span aria-label="critical-alarms">
+              <FontAwesomeIcon className={`${classes.icon} ${classes.critical}`} icon={faExclamationTriangle} />
+            </span>
+          </Tooltip>
+          {faultStatus.critical} |
+        </Typography>
+
+        <Typography variant="body1" color="inherit">
+          <Tooltip title="Major Alarms" arrow>
+            <span aria-label="major-alarms">
+              <FontAwesomeIcon className={`${classes.icon} ${classes.major}`} icon={faExclamationTriangle} />
+            </span>
+          </Tooltip>
+          {faultStatus.major} |
+        </Typography>
+
+        <Typography variant="body1" color="inherit">
+          <Tooltip title="Minor Alarms" arrow>
+            <span aria-label="minor-alarms">
+              <FontAwesomeIcon className={`${classes.icon} ${classes.minor}`} icon={faExclamationTriangle} />
+            </span>
+          </Tooltip>
+          {faultStatus.minor} |
+        </Typography>
+
+        <Typography variant="body1" color="inherit">
+          <Tooltip title="Warning Alarms" arrow>
+            <span aria-label="warning-alarms">
+              <FontAwesomeIcon className={`${classes.icon} ${classes.warning}`} icon={faExclamationTriangle} />
+            </span>
+          </Tooltip>
+          {faultStatus.warning} |
+        </Typography>
+      </>
+    );
+  }
+}
+
+export const FaultStatus = withStyles(styles)(connect(mapProps)(FaultStatusComponent));
+export default FaultStatus;
\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx
new file mode 100644
index 000000000..59657d8de
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx
@@ -0,0 +1,112 @@
+/**
+ * ============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 Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+import { alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler';
+import { Fault } from '../models/fault';
+
+export enum RefreshAlarmLogDialogMode {
+  None = 'none',
+  RefreshAlarmLogTable = 'RefreshAlarmLogTable',
+}
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+  refreshAlarmLog: () => dispatcher.dispatch(alarmLogEntriesReloadAction),
+});
+
+type DialogSettings = {
+  dialogTitle: string;
+  dialogDescription: string;
+  applyButtonText: string;
+  cancelButtonText: string;
+  enableMountIdEditor: boolean;
+  enableUsernameEditor: boolean;
+  enableExtendedEditor: boolean;
+};
+
+const settings: { [key: string]: DialogSettings } = {
+  [RefreshAlarmLogDialogMode.None]: {
+    dialogTitle: '',
+    dialogDescription: '',
+    applyButtonText: '',
+    cancelButtonText: '',
+    enableMountIdEditor: false,
+    enableUsernameEditor: false,
+    enableExtendedEditor: false,
+  },
+  [RefreshAlarmLogDialogMode.RefreshAlarmLogTable]: {
+    dialogTitle: 'Do you want to refresh the Alarm Log?',
+    dialogDescription: '',
+    applyButtonText: 'Yes',
+    cancelButtonText: 'Cancel',
+    enableMountIdEditor: true,
+    enableUsernameEditor: true,
+    enableExtendedEditor: true,
+  },
+};
+
+type RefreshAlarmLogDialogComponentProps = Connect<undefined, typeof mapDispatch> & {
+  mode: RefreshAlarmLogDialogMode;
+  onClose: () => void;
+};
+
+type RefreshAlarmLogDialogComponentState = Fault & { isNameValid: boolean; isHostSet: boolean };
+
+class RefreshAlarmLogDialogComponent extends React.Component<RefreshAlarmLogDialogComponentProps, RefreshAlarmLogDialogComponentState> {
+  render(): JSX.Element {
+    const setting = settings[this.props.mode];
+    return (
+      <Dialog open={this.props.mode !== RefreshAlarmLogDialogMode.None}>
+        <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, '-').toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {setting.dialogDescription}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button aria-label="dialog-confirm-button" onClick={() => {
+            this.onRefresh();
+          }} color="inherit" > {setting.applyButtonText} </Button>
+          <Button aria-label="dialog-cancel-button" onClick={() => {
+            this.onCancel();
+          }} color="secondary"> {setting.cancelButtonText} </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+
+  private onRefresh = () => {
+    this.props.refreshAlarmLog();
+    this.props.onClose();
+  };
+
+  private onCancel = () => {
+    this.props.onClose();
+  };
+}
+
+export const RefreshAlarmLogDialog = connect(undefined, mapDispatch)(RefreshAlarmLogDialogComponent);
+export default RefreshAlarmLogDialog;
\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/faultApp/src/components/refreshCurrentAlarmsDialog.tsx b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/refreshCurrentAlarmsDialog.tsx
new file mode 100644
index 000000000..20cd514cd
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/faultApp/src/components/refreshCurrentAlarmsDialog.tsx
@@ -0,0 +1,113 @@
+/**
+ * ============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 Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+
+import { currentAlarmsReloadAction } from '../handlers/currentAlarmsHandler';
+import { Fault } from '../models/fault';
+
+export enum RefreshCurrentAlarmsDialogMode {
+  None = 'none',
+  RefreshCurrentAlarmsTable = 'RefreshCurrentAlarmsTable',
+}
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+  refreshCurrentAlarms: () => dispatcher.dispatch(currentAlarmsReloadAction),
+});
+
+type DialogSettings = {
+  dialogTitle: string;
+  dialogDescription: string;
+  applyButtonText: string;
+  cancelButtonText: string;
+  enableMountIdEditor: boolean;
+  enableUsernameEditor: boolean;
+  enableExtendedEditor: boolean;
+};
+
+const settings: { [key: string]: DialogSettings } = {
+  [RefreshCurrentAlarmsDialogMode.None]: {
+    dialogTitle: '',
+    dialogDescription: '',
+    applyButtonText: '',
+    cancelButtonText: '',
+    enableMountIdEditor: false,
+    enableUsernameEditor: false,
+    enableExtendedEditor: false,
+  },
+  [RefreshCurrentAlarmsDialogMode.RefreshCurrentAlarmsTable]: {
+    dialogTitle: 'Do you want to refresh the Current Alarms List?',
+    dialogDescription: '',
+    applyButtonText: 'Yes',
+    cancelButtonText: 'Cancel',
+    enableMountIdEditor: true,
+    enableUsernameEditor: true,
+    enableExtendedEditor: true,
+  },
+};
+
+type RefreshCurrentAlarmsDialogComponentProps = Connect<undefined, typeof mapDispatch> & {
+  mode: RefreshCurrentAlarmsDialogMode;
+  onClose: () => void;
+};
+
+type RefreshCurrentAlarmsDialogComponentState = Fault & { isNameValid: boolean; isHostSet: boolean };
+
+class RefreshCurrentAlarmsDialogComponent extends React.Component<RefreshCurrentAlarmsDialogComponentProps, RefreshCurrentAlarmsDialogComponentState> {
+  render(): JSX.Element {
+    const setting = settings[this.props.mode];
+    return (
+      <Dialog open={this.props.mode !== RefreshCurrentAlarmsDialogMode.None}>
+        <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, '-').toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {setting.dialogDescription}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button aria-label="dialog-confirm-button" onClick={() => {
+            this.onRefresh();
+          }} color="inherit" > {setting.applyButtonText} </Button>
+          <Button aria-label="dialog-cancel-button" onClick={() => {
+            this.onCancel();
+          }} color="secondary"> {setting.cancelButtonText} </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+
+  private onRefresh = () => {
+    this.props.refreshCurrentAlarms();
+    this.props.onClose();
+  };
+
+  private onCancel = () => {
+    this.props.onClose();
+  };
+}
+
+export const RefreshCurrentAlarmsDialog = connect(undefined, mapDispatch)(RefreshCurrentAlarmsDialogComponent);
+export default RefreshCurrentAlarmsDialog;
\ No newline at end of file