Odlux Update

Add eslint and custom icons update

Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>

10 files changed, 540 insertions, 545 deletions

diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
index 17b1374b8..5dac0bc14 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -15,37 +15,36 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { AdaptiveModulationDataType, AdaptiveModulationDatabaseDataType } from '../models/adaptiveModulationDataType';
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createAdaptiveModulationActions, createAdaptiveModulationProperties } from '../handlers/adaptiveModulationHandler';
+import { AdaptiveModulationDatabaseDataType, AdaptiveModulationDataType } from '../models/adaptiveModulationDataType';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createAdaptiveModulationProperties, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
 import ToggleContainer from './toggleContainer';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 
 const mapProps = (state: IApplicationStoreState) => ({
   adaptiveModulationProperties: createAdaptiveModulationProperties(state),
   currentView: state.performanceHistory.subViews.adaptiveModulation.subView,
   isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible,
-  existingFilter: state.performanceHistory.adaptiveModulation.filter
+  existingFilter: state.performanceHistory.adaptiveModulation.filter,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("adaptiveModulation", value)) },
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('adaptiveModulation', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('adaptiveModulation', value)); },
 });
 
 type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
+  selectedTimePeriod: string;
 };
 
 const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveModulationDataType>;
@@ -53,21 +52,20 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveM
 /**
  * The Component which gets the adaptiveModulation data from the database based on the selected time period.
  */
-class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{
-
+class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
-  onChange = (value: "chart" | "table") => {
+  onChange = (value: 'chart' | 'table') => {
     this.props.setSubView(value);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.adaptiveModulationActions.onFilterChanged(property, filterTerm);
     if (!this.props.adaptiveModulationProperties.showFilter)
       this.props.adaptiveModulationActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
     const properties = this.props.adaptiveModulationProperties;
@@ -75,11 +73,11 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
 
     const chartPagedData = this.getChartDataValues(properties.rows);
     const adaptiveModulationColumns: ColumnModel<AdaptiveModulationDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
       }];
 
     chartPagedData.datasets.forEach(ds => {
@@ -88,13 +86,14 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
 
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible}
+          existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
-          <AdaptiveModulationTable stickyHeader idProperty={"_id"} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} />
+          <AdaptiveModulationTable stickyHeader idProperty={'_id'} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure 
@@ -102,345 +101,345 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
    */
 
   private getChartDataValues = (rows: AdaptiveModulationDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "time2StatesS",
-      label: "QAM2S",
+      name: 'time2StatesS',
+      label: 'QAM2S',
       borderColor: '#62a309fc',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM2S",
+      columnLabel: 'QAM2S',
     }, {
-      name: "time2States",
-      label: "QAM2",
+      name: 'time2States',
+      label: 'QAM2',
       borderColor: '#62a309fc',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM2",
+      columnLabel: 'QAM2',
     }, {
-      name: "time2StatesL",
-      label: "QAM2L",
+      name: 'time2StatesL',
+      label: 'QAM2L',
       borderColor: '#62a309fc',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM2L",
+      columnLabel: 'QAM2L',
     }, {
-      name: "time4StatesS",
-      label: "QAM4S",
+      name: 'time4StatesS',
+      label: 'QAM4S',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM4S",
+      columnLabel: 'QAM4S',
     }, {
-      name: "time4States",
-      label: "QAM4",
+      name: 'time4States',
+      label: 'QAM4',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM4",
+      columnLabel: 'QAM4',
     }, {
-      name: "time4StatesL",
-      label: "QAM4L",
+      name: 'time4StatesL',
+      label: 'QAM4L',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM4L",
+      columnLabel: 'QAM4L',
     }, {
-      name: "time16StatesS",
-      label: "QAM16S",
+      name: 'time16StatesS',
+      label: 'QAM16S',
       borderColor: '#9b15e2',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM16S",
+      columnLabel: 'QAM16S',
     }, {
-      name: "time16States",
-      label: "QAM16",
+      name: 'time16States',
+      label: 'QAM16',
       borderColor: '#9b15e2',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM16",
+      columnLabel: 'QAM16',
     }, {
-      name: "time16StatesL",
-      label: "QAM16L",
+      name: 'time16StatesL',
+      label: 'QAM16L',
       borderColor: '#9b15e2',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM16L",
+      columnLabel: 'QAM16L',
     }, {
-      name: "time32StatesS",
-      label: "QAM32S",
+      name: 'time32StatesS',
+      label: 'QAM32S',
       borderColor: '#2704f5f0',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM32S",
+      columnLabel: 'QAM32S',
     }, {
-      name: "time32States",
-      label: "QAM32",
+      name: 'time32States',
+      label: 'QAM32',
       borderColor: '#2704f5f0',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM32",
+      columnLabel: 'QAM32',
     }, {
-      name: "time32StatesL",
-      label: "QAM32L",
+      name: 'time32StatesL',
+      label: 'QAM32L',
       borderColor: '#2704f5f0',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM32L",
+      columnLabel: 'QAM32L',
     }, {
-      name: "time64StatesS",
-      label: "QAM64S",
+      name: 'time64StatesS',
+      label: 'QAM64S',
       borderColor: '#347692',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM64S",
+      columnLabel: 'QAM64S',
     }, {
-      name: "time64States",
-      label: "QAM64",
+      name: 'time64States',
+      label: 'QAM64',
       borderColor: '#347692',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM64",
+      columnLabel: 'QAM64',
     }, {
-      name: "time64StatesL",
-      label: "QAM64L",
+      name: 'time64StatesL',
+      label: 'QAM64L',
       borderColor: '#347692',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM64L",
+      columnLabel: 'QAM64L',
     }, {
-      name: "time128StatesS",
-      label: "QAM128S",
+      name: 'time128StatesS',
+      label: 'QAM128S',
       borderColor: '#885e22',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM128S",
+      columnLabel: 'QAM128S',
     }, {
-      name: "time128States",
-      label: "QAM128",
+      name: 'time128States',
+      label: 'QAM128',
       borderColor: '#885e22',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM128",
+      columnLabel: 'QAM128',
     }, {
-      name: "time128StatesL",
-      label: "QAM128L",
+      name: 'time128StatesL',
+      label: 'QAM128L',
       borderColor: '#885e22',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM128L",
+      columnLabel: 'QAM128L',
     }, {
-      name: "time256StatesS",
-      label: "QAM256S",
+      name: 'time256StatesS',
+      label: 'QAM256S',
       borderColor: '#de07807a',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM256S",
+      columnLabel: 'QAM256S',
     }, {
-      name: "time256States",
-      label: "QAM256",
+      name: 'time256States',
+      label: 'QAM256',
       borderColor: '#de07807a',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM256",
+      columnLabel: 'QAM256',
     }, {
-      name: "time256StatesL",
-      label: "QAM256L",
+      name: 'time256StatesL',
+      label: 'QAM256L',
       borderColor: '#de07807a',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM256L",
+      columnLabel: 'QAM256L',
     }, {
-      name: "time512StatesS",
-      label: "QAM512S",
+      name: 'time512StatesS',
+      label: 'QAM512S',
       borderColor: '#8fdaacde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM512S",
+      columnLabel: 'QAM512S',
     }, {
-      name: "time512States",
-      label: "QAM512",
+      name: 'time512States',
+      label: 'QAM512',
       borderColor: '#8fdaacde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM512",
+      columnLabel: 'QAM512',
     }, {
 
-      name: "time512StatesL",
-      label: "QAM512L",
+      name: 'time512StatesL',
+      label: 'QAM512L',
       borderColor: '#8fdaacde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM512L",
+      columnLabel: 'QAM512L',
     }, {
 
-      name: "time1024StatesS",
-      label: "QAM1024S",
+      name: 'time1024StatesS',
+      label: 'QAM1024S',
       borderColor: '#435b22',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM1024S",
+      columnLabel: 'QAM1024S',
     }, {
 
-      name: "time1024States",
-      label: "QAM1024",
+      name: 'time1024States',
+      label: 'QAM1024',
       borderColor: '#435b22',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM1024",
+      columnLabel: 'QAM1024',
     }, {
 
-      name: "time1024StatesL",
-      label: "QAM1024L",
+      name: 'time1024StatesL',
+      label: 'QAM1024L',
       borderColor: '#435b22',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM1024L",
+      columnLabel: 'QAM1024L',
     }, {
-      name: "time2048StatesS",
-      label: "QAM2048S",
+      name: 'time2048StatesS',
+      label: 'QAM2048S',
       borderColor: '#e87a5b',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM2048S",
+      columnLabel: 'QAM2048S',
     }, {
-      name: "time2048States",
-      label: "QAM2048",
+      name: 'time2048States',
+      label: 'QAM2048',
       borderColor: '#e87a5b',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM2048",
+      columnLabel: 'QAM2048',
     }, {
-      name: "time2048StatesL",
-      label: "QAM2048L",
+      name: 'time2048StatesL',
+      label: 'QAM2048L',
       borderColor: '#e87a5b',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM2048L",
+      columnLabel: 'QAM2048L',
     }, {
-      name: "time4096StatesS",
-      label: "QAM4096S",
+      name: 'time4096StatesS',
+      label: 'QAM4096S',
       borderColor: '#5be878',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM4096S",
+      columnLabel: 'QAM4096S',
     }, {
-      name: "time4096States",
-      label: "QAM4096",
+      name: 'time4096States',
+      label: 'QAM4096',
       borderColor: '#5be878',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM4096",
+      columnLabel: 'QAM4096',
     }, {
-      name: "time4096StatesL",
-      label: "QAM4096L",
+      name: 'time4096StatesL',
+      label: 'QAM4096L',
       borderColor: '#5be878',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM4096L",
+      columnLabel: 'QAM4096L',
     }, {
-      name: "time8192StatesS",
-      label: "QAM8192s",
+      name: 'time8192StatesS',
+      label: 'QAM8192s',
       borderColor: '#cb5be8',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM8192S",
+      columnLabel: 'QAM8192S',
     }, {
-      name: "time8192States",
-      label: "QAM8192",
+      name: 'time8192States',
+      label: 'QAM8192',
       borderColor: '#cb5be8',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM8192",
+      columnLabel: 'QAM8192',
     }, {
-      name: "time8192StatesL",
-      label: "QAM8192L",
+      name: 'time8192StatesL',
+      label: 'QAM8192L',
       borderColor: '#cb5be8',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "QAM8192L",
-    }
+      columnLabel: 'QAM8192L',
+    },
     ];
 
-    _rows.forEach(row => {
-      row.time2StatesS = row.performanceData.time2StatesS
+    data_rows.forEach(row => {
+      row.time2StatesS = row.performanceData.time2StatesS;
       row.time2States = row.performanceData.time2States;
       row.time2StatesL = row.performanceData.time2StatesL;
-      row.time4StatesS = row.performanceData.time4StatesS
+      row.time4StatesS = row.performanceData.time4StatesS;
       row.time4States = row.performanceData.time4States;
       row.time4StatesL = row.performanceData.time4StatesL;
       row.time16StatesS = row.performanceData.time16StatesS;
@@ -475,16 +474,16 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
       row.time8192StatesL = row.performanceData.time8192StatesL;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof AdaptiveModulationDataType] as string,
-          y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string
+          x: row['timeStamp' as keyof AdaptiveModulationDataType] as string,
+          y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string,
         });
       });
     });
 
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent));
 export default AdaptiveModulation;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
index e66e6c1e6..021f74a4f 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
@@ -18,57 +18,58 @@
 
 
 import * as React from 'react';
-import { TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+
+import { TextField, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
 
 import makeStyles from '@mui/styles/makeStyles';
 
 const styles = makeStyles({
-    filterInput: {
-        marginRight: "15px"
-    },
-    filterContainer: {
-        marginLeft: "90px"
-    }
+  filterInput: {
+    marginRight: '15px',
+  },
+  filterContainer: {
+    marginLeft: '90px',
+  },
 });
 
-type filterProps = { isVisible: boolean, onFilterChanged: (property: string, filterTerm: string) => void, filters: any };
+type filterProps = { isVisible: boolean; onFilterChanged: (property: string, filterTerm: string) => void; filters: any };
 
 const ChartFilter: React.FunctionComponent<filterProps> = (props) => {
 
 
-    const classes = styles();
-
-    // make sure suspectIntervalFlag is a string to show the correct value in the select element
+  const classes = styles();
 
-    const suspectIntervalFlag = props.filters.suspectIntervalFlag === undefined ? undefined : props.filters.suspectIntervalFlag.toString();
-    return (
-        <>
-            {
-                props.isVisible &&
-                <div className={classes.filterContainer}>
-                    <TextField variant="standard" inputProps={{'aria-label': 'radio-signal-filter'}} className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{
-                        shrink: true,
-                    }} />
-                    <TextField variant="standard" inputProps={{'aria-label': 'scanner-id-filter'}} className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{
-                        shrink: true,
-                    }} />
-                    <TextField variant="standard" inputProps={{'aria-label': 'end-time-filter'}} className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{
-                        shrink: true,
-                    }} />
-                    <FormControl variant="standard">
-                        <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel>
+  // make sure suspectIntervalFlag is a string to show the correct value in the select element
 
-                        <Select variant="standard" aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
-                            <MenuItem value={undefined} aria-label="none">None</MenuItem>
-                            <MenuItem value={"true"} aria-label="true">true</MenuItem>
-                            <MenuItem value={"false"} aria-label="false">false</MenuItem>
-                        </Select>
-                    </FormControl>
-                </ div>
-            }
-        </>
-    )
+  const suspectIntervalFlag = props.filters.suspectIntervalFlag === undefined ? undefined : props.filters.suspectIntervalFlag.toString();
+  return (
+    <>
+      {
+        props.isVisible &&
+        <div className={classes.filterContainer}>
+          <TextField variant="standard" inputProps={{ 'aria-label': 'radio-signal-filter' }} className={classes.filterInput}
+            label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged('radioSignalId', event.target.value)} InputLabelProps={{
+              shrink: true,
+            }} />
+          <TextField variant="standard" inputProps={{ 'aria-label': 'scanner-id-filter' }} className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged('scannerId', event.target.value)} InputLabelProps={{
+            shrink: true,
+          }} />
+          <TextField variant="standard" inputProps={{ 'aria-label': 'end-time-filter' }} className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged('timeStamp', event.target.value)} InputLabelProps={{
+            shrink: true,
+          }} />
+          <FormControl variant="standard">
+            <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel>
 
-}
+            <Select variant="standard" aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged('suspectIntervalFlag', event.target.value as string)}>
+              <MenuItem value={undefined} aria-label="none">None</MenuItem>
+              <MenuItem value={'true'} aria-label="true">true</MenuItem>
+              <MenuItem value={'false'} aria-label="false">false</MenuItem>
+            </Select>
+          </FormControl>
+        </ div>
+      }
+    </>
+  );
+};
 
 export default ChartFilter;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
index 14cc02d6d..5f925a9ad 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -15,20 +15,19 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, MaterialTableCtorType, ColumnModel } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { CrossPolarDiscriminationDataType, CrossPolarDiscriminationDatabaseDataType } from '../models/crossPolarDiscriminationDataType';
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createCrossPolarDiscriminationActions, createCrossPolarDiscriminationProperties } from '../handlers/crossPolarDiscriminationHandler';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createCrossPolarDiscriminationProperties, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler';
+import { CrossPolarDiscriminationDatabaseDataType, CrossPolarDiscriminationDataType } from '../models/crossPolarDiscriminationDataType';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 import ToggleContainer from './toggleContainer';
 
 
@@ -36,18 +35,18 @@ const mapProps = (state: IApplicationStoreState) => ({
   crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state),
   currentView: state.performanceHistory.subViews.CPD.subView,
   isFilterVisible: state.performanceHistory.subViews.CPD.isFilterVisible,
-  existingFilter: state.performanceHistory.crossPolarDiscrimination.filter
+  existingFilter: state.performanceHistory.crossPolarDiscrimination.filter,
 
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("CPD", value)) },
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('CPD', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('CPD', value));},
 });
 
 type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
+  selectedTimePeriod: string;
 };
 
 const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<CrossPolarDiscriminationDataType>;
@@ -55,21 +54,20 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro
 /**
  * The Component which gets the crossPolarDiscrimination data from the database based on the selected time period.
  */
-class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{
-
+class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
-  onChange = (value: "chart" | "table") => {
+  onChange = (value: 'chart' | 'table') => {
     this.props.setSubView(value);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.crossPolarDiscriminationActions.onFilterChanged(property, filterTerm);
     if (!this.props.crossPolarDiscriminationProperties.showFilter)
       this.props.crossPolarDiscriminationActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
     const properties = this.props.crossPolarDiscriminationProperties;
@@ -78,12 +76,12 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
     const chartPagedData = this.getChartDataValues(properties.rows);
 
     const cpdColumns: ColumnModel<CrossPolarDiscriminationDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
-      }
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
     ];
 
     chartPagedData.datasets.forEach(ds => {
@@ -91,66 +89,67 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
     });
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible}
+          existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
-          <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} tableId="cross-polar-discrimination-table" columns={cpdColumns} {...properties} {...actions} />
+          <CrossPolarDiscriminationTable stickyHeader idProperty={'_id'} tableId="cross-polar-discrimination-table" columns={cpdColumns} {...properties} {...actions} />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for CPD according on the chartjs dataset structure 
    * which is to be sent to the chart.
    */
   private getChartDataValues = (rows: CrossPolarDiscriminationDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "xpdMin",
-      label: "xpd-min",
+      name: 'xpdMin',
+      label: 'xpd-min',
       borderColor: '#0e17f3de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "CPD (min)[db]"
+      columnLabel: 'CPD (min)[db]',
     }, {
-      name: "xpdAvg",
-      label: "xpd-avg",
+      name: 'xpdAvg',
+      label: 'xpd-avg',
       borderColor: '#08edb6de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "CPD (avg)[db]"
+      columnLabel: 'CPD (avg)[db]',
     }, {
-      name: "xpdMax",
-      label: "xpd-max",
+      name: 'xpdMax',
+      label: 'xpd-max',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "CPD (max)[db]"
+      columnLabel: 'CPD (max)[db]',
     }];
 
-    _rows.forEach(row => {
+    data_rows.forEach(row => {
       row.xpdMin = row.performanceData.xpdMin;
       row.xpdAvg = row.performanceData.xpdAvg;
       row.xpdMax = row.performanceData.xpdMax;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof CrossPolarDiscriminationDataType] as string,
-          y: row.performanceData[ds.name as keyof CrossPolarDiscriminationDatabaseDataType] as string
+          x: row['timeStamp' as keyof CrossPolarDiscriminationDataType] as string,
+          y: row.performanceData[ds.name as keyof CrossPolarDiscriminationDatabaseDataType] as string,
         });
       });
     });
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent));
 export default CrossPolarDiscrimination;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
index ef6cfc712..bd6333be7 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -15,90 +15,91 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
+import React from 'react';
 
-import * as React from 'react';
-import { MenuItem, Select, FormControl, Typography, SelectChangeEvent } from '@mui/material';
+import { FormControl, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material';
+import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
-import { LtpIds } from 'models/availableLtps';
 import { Loader } from '../../../../framework/src/components/material-ui';
-
-import { Theme } from '@mui/material/styles';
+import { LtpIds } from '../models/availableLtps';
 
 const useStyles = makeStyles((theme: Theme) => ({
-    display: {
-        display: "inline-block"
-    },
-    selectDropdown: {
-        borderRadius: 1,
-        position: "relative",
-        backgroundColor: theme.palette.background.paper,
-        border: "1px solid #ced4da",
-        fontSize: 16,
-        width: "auto",
-        padding: "5px 5px 5px 5px",
-        transition: theme.transitions.create(["border-color", "box-shadow"]),
-    },
-    center: {
-        "flex": "1",
-        "height": "100%",
-        "display": "flex",
-        "alignItems": "center",
-        "justifyContent": "center",
-        flexDirection: "column"
-    }
+  display: {
+    display: 'inline-block',
+  },
+  selectDropdown: {
+    borderRadius: 1,
+    position: 'relative',
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    width: 'auto',
+    padding: '5px 5px 5px 5px',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+  },
+  center: {
+    'flex': '1',
+    'height': '100%',
+    'display': 'flex',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    flexDirection: 'column',
+  },
 }));
 
-type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, 
-    availableLtps: LtpIds[], 
-    onChangeLtp(event: SelectChangeEvent<HTMLSelectElement | string> ): void, 
-    selectedTimePeriod: string, 
-    onChangeTimePeriod(event: SelectChangeEvent<HTMLSelectElement | string> ): void };
+type LtpSelectionProps = {
+  selectedNE: string; error?: string; finishedLoading: boolean; selectedLtp: string;
+  availableLtps: LtpIds[];
+  onChangeLtp(event: SelectChangeEvent<HTMLSelectElement | string>): void;
+  selectedTimePeriod: string;
+  onChangeTimePeriod(event: SelectChangeEvent<HTMLSelectElement | string>): void;
+};
 
 export const LtpSelection = (props: LtpSelectionProps) => {
-    const classes = useStyles();
-    return (
-        <>
-            <h3>Selected Network Element: {props.selectedNE} </h3>
-            <FormControl variant="standard" className={classes.display}>
-                <span>
-                    Select LTP
-                </span>
-                <Select variant="standard" className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" >
-                    <MenuItem value={"-1"} aria-label="none"><em>--Select--</em></MenuItem>
-                    {props.availableLtps.map(ltp =>
-                        (<MenuItem value={ltp.key} key={ltp.key} aria-label={ltp.key}>{ltp.key}</MenuItem>))}
-                </Select>
-                <span> Time-Period </span>
-                <Select variant="standard" className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection">
-                    <MenuItem value={"15min"} aria-label="15minutes">15min</MenuItem>
-                    <MenuItem value={"24hours"} aria-label="24hours">24hours</MenuItem>
-                </Select>
-            </FormControl>
-            {
-                !props.finishedLoading && !props.error &&
-                <div className={classes.center}>
-                    <Loader />
-                    <h3>Collecting Data ...</h3>
-                </div>
-            }
-            {
-                props.finishedLoading && props.error &&
-                <div className={classes.center}>
-                    <h3>Data couldn't be loaded</h3>
-                    <Typography variant="body1">{props.error}</Typography>
-                </div>
-            }
-            {
-                props.selectedLtp === "-1" && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ?
-                    <div className={classes.center}>
-                        <h3>Please select a LTP</h3>
-                    </div>
-                    :
-                    <div className={classes.center}>
-                        <h3>No performance data found</h3>
-                    </div>)
-            }
-        </>)
-}
+  const classes = useStyles();
+  return (
+    <>
+      <h3>Selected Network Element: {props.selectedNE} </h3>
+      <FormControl variant="standard" className={classes.display}>
+        <span>
+          Select LTP
+        </span>
+        <Select variant="standard" className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" >
+          <MenuItem value={'-1'} aria-label="none"><em>--Select--</em></MenuItem>
+          {props.availableLtps.map(ltp =>
+            (<MenuItem value={ltp.key} key={ltp.key} aria-label={ltp.key}>{ltp.key}</MenuItem>))}
+        </Select>
+        <span> Time-Period </span>
+        <Select variant="standard" className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection">
+          <MenuItem value={'15min'} aria-label="15minutes">15min</MenuItem>
+          <MenuItem value={'24hours'} aria-label="24hours">24hours</MenuItem>
+        </Select>
+      </FormControl>
+      {
+        !props.finishedLoading && !props.error &&
+        <div className={classes.center}>
+          <Loader />
+          <h3>Collecting Data ...</h3>
+        </div>
+      }
+      {
+        props.finishedLoading && props.error &&
+        <div className={classes.center}>
+          <h3>Data couldn't be loaded</h3>
+          <Typography variant="body1">{props.error}</Typography>
+        </div>
+      }
+      {
+        props.selectedLtp === '-1' && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ?
+          <div className={classes.center}>
+            <h3>Please select a LTP</h3>
+          </div>
+          :
+          <div className={classes.center}>
+            <h3>No performance data found</h3>
+          </div>)
+      }
+    </>);
+};
 
 export default LtpSelection;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
index 6a06ea351..fb608aac6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -15,36 +15,36 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
-import { PerformanceDataType, PerformanceDatabaseDataType } from '../models/performanceDataType';
+
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createPerformanceDataActions, createPerformanceDataProperties } from '../handlers/performanceDataHandler';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler';
+import { PerformanceDatabaseDataType, PerformanceDataType } from '../models/performanceDataType';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
 import ToggleContainer from './toggleContainer';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 
 const mapProps = (state: IApplicationStoreState) => ({
   performanceDataProperties: createPerformanceDataProperties(state),
   currentView: state.performanceHistory.subViews.performanceData.subView,
   isFilterVisible: state.performanceHistory.subViews.performanceData.isFilterVisible,
-  existingFilter: state.performanceHistory.performanceData.filter
+  existingFilter: state.performanceHistory.performanceData.filter,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   performanceDataActions: createPerformanceDataActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("performanceData", value)) }
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('performanceData', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('performanceData', value)); },
 });
 
 type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
+  selectedTimePeriod: string;
 };
 
 const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceDataType>;
@@ -52,17 +52,16 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD
 /**
  * The Component which gets the performance data from the database based on the selected time period.
  */
-class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{
-
+class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.performanceDataActions.onFilterChanged(property, filterTerm);
     if (!this.props.performanceDataProperties.showFilter)
       this.props.performanceDataActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
     const properties = this.props.performanceDataProperties;
@@ -70,12 +69,12 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
 
     const chartPagedData = this.getChartDataValues(properties.rows);
     const performanceColumns: ColumnModel<PerformanceDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
-      }
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
     ];
 
     chartPagedData.datasets.forEach(ds => {
@@ -83,67 +82,68 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
     });
     return (
       <>
-        <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}>
+        <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)}
+          existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}>
           {lineChart(chartPagedData)}
-          <PerformanceDataTable stickyHeader idProperty={"_id"} tableId="performance-data-table" columns={performanceColumns} {...properties} {...actions} />
+          <PerformanceDataTable stickyHeader idProperty={'_id'} tableId="performance-data-table" columns={performanceColumns} {...properties} {...actions} />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for PerformanceData according on the chartjs dataset structure 
    * which is to be sent to the chart.
    */
   private getChartDataValues = (rows: PerformanceDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "es",
-      label: "es",
+      name: 'es',
+      label: 'es',
       borderColor: '#0e17f3de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "ES"
+      columnLabel: 'ES',
     }, {
-      name: "ses",
-      label: "ses",
+      name: 'ses',
+      label: 'ses',
       borderColor: '#08edb6de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "SES"
+      columnLabel: 'SES',
     }, {
-      name: "unavailability",
-      label: "unavailability",
+      name: 'unavailability',
+      label: 'unavailability',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Unavailability"
+      columnLabel: 'Unavailability',
     }];
 
-    _rows.forEach(row => {
+    data_rows.forEach(row => {
       row.es = row.performanceData.es;
       row.ses = row.performanceData.ses;
       row.unavailability = row.performanceData.unavailability;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof PerformanceDataType] as string,
-          y: row.performanceData[ds.name as keyof PerformanceDatabaseDataType] as string
+          x: row['timeStamp' as keyof PerformanceDataType] as string,
+          y: row.performanceData[ds.name as keyof PerformanceDatabaseDataType] as string,
         });
       });
     });
 
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 
 const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent));
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
index 8dc92b8ac..125cc6ee6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -15,37 +15,36 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { ReceiveLevelDataType, ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType';
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createReceiveLevelActions, createReceiveLevelProperties } from '../handlers/receiveLevelHandler';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createReceiveLevelProperties, createReceiveLevelActions } from '../handlers/receiveLevelHandler';
+import { ReceiveLevelDatabaseDataType, ReceiveLevelDataType } from '../models/receiveLevelDataType';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 import ToggleContainer from './toggleContainer';
 
 const mapProps = (state: IApplicationStoreState) => ({
   receiveLevelProperties: createReceiveLevelProperties(state),
   currentView: state.performanceHistory.subViews.receiveLevel.subView,
   isFilterVisible: state.performanceHistory.subViews.receiveLevel.isFilterVisible,
-  existingFilter: state.performanceHistory.receiveLevel.filter
+  existingFilter: state.performanceHistory.receiveLevel.filter,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("receiveLevel", value)) },
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('receiveLevel', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('receiveLevel', value)); },
 });
 
 type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
+  selectedTimePeriod: string;
 };
 
 const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDataType>;
@@ -53,22 +52,21 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat
 /**
  * The Component which gets the receiveLevel data from the database based on the selected time period.
  */
-class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
-
+class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
 
-  onChange = (value: "chart" | "table") => {
+  onChange = (value: 'chart' | 'table') => {
     this.props.setSubView(value);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.receiveLevelActions.onFilterChanged(property, filterTerm);
     if (!this.props.receiveLevelProperties.showFilter)
       this.props.receiveLevelActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
     const properties = this.props.receiveLevelProperties;
@@ -76,12 +74,12 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
 
     const chartPagedData = this.getChartDataValues(properties.rows);
     const receiveLevelColumns: ColumnModel<ReceiveLevelDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
-      }
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
     ];
 
     chartPagedData.datasets.forEach(ds => {
@@ -92,64 +90,64 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
       <>
         <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
-          <ReceiveLevelTable stickyHeader idProperty={"_id"} tableId="receive-level-table" columns={receiveLevelColumns} {...properties} {...actions} />
+          <ReceiveLevelTable stickyHeader idProperty={'_id'} tableId="receive-level-table" columns={receiveLevelColumns} {...properties} {...actions} />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for ReceiveLevel according on the chartjs dataset structure 
    * which is to be sent to the chart.
    */
   private getChartDataValues = (rows: ReceiveLevelDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "rxLevelMin",
-      label: "rx-level-min",
+      name: 'rxLevelMin',
+      label: 'rx-level-min',
       borderColor: '#0e17f3de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Rx min"
+      columnLabel: 'Rx min',
     }, {
-      name: "rxLevelAvg",
-      label: "rx-level-avg",
+      name: 'rxLevelAvg',
+      label: 'rx-level-avg',
       borderColor: '#08edb6de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Rx avg"
+      columnLabel: 'Rx avg',
     }, {
-      name: "rxLevelMax",
-      label: "rx-level-max",
+      name: 'rxLevelMax',
+      label: 'rx-level-max',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Rx max"
+      columnLabel: 'Rx max',
     }];
 
-    _rows.forEach(row => {
+    data_rows.forEach(row => {
       row.rxLevelMin = row.performanceData.rxLevelMin;
       row.rxLevelAvg = row.performanceData.rxLevelAvg;
       row.rxLevelMax = row.performanceData.rxLevelMax;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof ReceiveLevelDataType] as string,
-          y: row.performanceData[ds.name as keyof ReceiveLevelDatabaseDataType] as string
+          x: row['timeStamp' as keyof ReceiveLevelDataType] as string,
+          y: row.performanceData[ds.name as keyof ReceiveLevelDatabaseDataType] as string,
         });
       });
     });
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 
 const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent));
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
index ee7fe34aa..85241fbb1 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -15,37 +15,36 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { SignalToInterferenceDataType, SignalToInterferenceDatabaseDataType } from '../models/signalToInteferenceDataType';
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createSignalToInterferenceActions, createSignalToInterferenceProperties } from '../handlers/signalToInterferenceHandler';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createSignalToInterferenceProperties, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler';
+import { SignalToInterferenceDatabaseDataType, SignalToInterferenceDataType } from '../models/signalToInteferenceDataType';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 import ToggleContainer from './toggleContainer';
 
 const mapProps = (state: IApplicationStoreState) => ({
   signalToInterferenceProperties: createSignalToInterferenceProperties(state),
   currentView: state.performanceHistory.subViews.SINR.subView,
   isFilterVisible: state.performanceHistory.subViews.SINR.isFilterVisible,
-  existingFilter: state.performanceHistory.signalToInterference.filter
+  existingFilter: state.performanceHistory.signalToInterference.filter,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("SINR", value)) },
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('SINR', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('SINR', value)); },
 });
 
 type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
+  selectedTimePeriod: string;
 };
 
 const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalToInterferenceDataType>;
@@ -53,21 +52,20 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT
 /**
  * The Component which gets the signal to interference data from the database based on the selected time period.
  */
-class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{
-
+class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
-  onChange = (value: "chart" | "table") => {
+  onChange = (value: 'chart' | 'table') => {
     this.props.setSubView(value);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.signalToInterferenceActions.onFilterChanged(property, filterTerm);
     if (!this.props.signalToInterferenceProperties.showFilter)
       this.props.signalToInterferenceActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
     const properties = this.props.signalToInterferenceProperties;
@@ -76,12 +74,12 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
     const chartPagedData = this.getChartDataValues(properties.rows);
 
     const sinrColumns: ColumnModel<SignalToInterferenceDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
-      }
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
     ];
 
     chartPagedData.datasets.forEach(ds => {
@@ -89,14 +87,15 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
     });
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible}
+          existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
-          <SignalToInterferenceTable stickyHeader idProperty={"_id"} tableId="signal-to-interference-table" columns={sinrColumns} {...properties} {...actions}
+          <SignalToInterferenceTable stickyHeader idProperty={'_id'} tableId="signal-to-interference-table" columns={sinrColumns} {...properties} {...actions}
           />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for SINR according on the chartjs dataset structure 
@@ -104,53 +103,53 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
    */
 
   private getChartDataValues = (rows: SignalToInterferenceDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "snirMin",
-      label: "snir-min",
+      name: 'snirMin',
+      label: 'snir-min',
       borderColor: '#0e17f3de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "SINR (min)[db]"
+      columnLabel: 'SINR (min)[db]',
     }, {
-      name: "snirAvg",
-      label: "snir-avg",
+      name: 'snirAvg',
+      label: 'snir-avg',
       borderColor: '#08edb6de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "SINR (avg)[db]"
+      columnLabel: 'SINR (avg)[db]',
     }, {
-      name: "snirMax",
-      label: "snir-max",
+      name: 'snirMax',
+      label: 'snir-max',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "SINR (max)[db]"
+      columnLabel: 'SINR (max)[db]',
     }];
 
-    _rows.forEach(row => {
+    data_rows.forEach(row => {
       row.snirMin = row.performanceData.snirMin;
       row.snirAvg = row.performanceData.snirAvg;
       row.snirMax = row.performanceData.snirMax;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof SignalToInterferenceDataType] as string,
-          y: row.performanceData[ds.name as keyof SignalToInterferenceDatabaseDataType] as string
+          x: row['timeStamp' as keyof SignalToInterferenceDataType] as string,
+          y: row.performanceData[ds.name as keyof SignalToInterferenceDatabaseDataType] as string,
         });
       });
     });
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 
 const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent));
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
index 31e1d363f..d4b823387 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -15,38 +15,37 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { TemperatureDataType, TemperatureDatabaseDataType } from '../models/temperatureDataType';
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createTemperatureActions, createTemperatureProperties } from '../handlers/temperatureHandler';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createTemperatureProperties, createTemperatureActions } from '../handlers/temperatureHandler';
+import { TemperatureDatabaseDataType, TemperatureDataType } from '../models/temperatureDataType';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
 import ToggleContainer from './toggleContainer';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 
 const mapProps = (state: IApplicationStoreState) => ({
   temperatureProperties: createTemperatureProperties(state),
   currentView: state.performanceHistory.subViews.temperatur.subView,
   isFilterVisible: state.performanceHistory.subViews.temperatur.isFilterVisible,
-  existingFilter: state.performanceHistory.temperature.filter
+  existingFilter: state.performanceHistory.temperature.filter,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   temperatureActions: createTemperatureActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("Temp", value)) },
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('Temp', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('Temp', value)); },
 
 });
 
 type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
+  selectedTimePeriod: string;
 };
 
 const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataType>;
@@ -54,22 +53,21 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT
 /**
  * The Component which gets the temperature data from the database based on the selected time period.
  */
-class TemperatureComponent extends React.Component<TemperatureComponentProps>{
-
+class TemperatureComponent extends React.Component<TemperatureComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
 
-  onChange = (value: "chart" | "table") => {
+  onChange = (value: 'chart' | 'table') => {
     this.props.setSubView(value);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.temperatureActions.onFilterChanged(property, filterTerm);
     if (!this.props.temperatureProperties.showFilter)
       this.props.temperatureActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
     const properties = this.props.temperatureProperties;
@@ -77,12 +75,12 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
 
     const chartPagedData = this.getChartDataValues(properties.rows);
     const temperatureColumns: ColumnModel<TemperatureDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
-      }
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
     ];
 
     chartPagedData.datasets.forEach(ds => {
@@ -93,11 +91,11 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
 
         <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
-          <TemperatureTable stickyHeader idProperty={"_id"} tableId="temperature-table" columns={temperatureColumns} {...properties} {...actions} />
+          <TemperatureTable stickyHeader idProperty={'_id'} tableId="temperature-table" columns={temperatureColumns} {...properties} {...actions} />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for Temperature according on the chartjs dataset structure 
@@ -105,53 +103,53 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
    */
 
   private getChartDataValues = (rows: TemperatureDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "rfTempMin",
-      label: "rf-temp-min",
+      name: 'rfTempMin',
+      label: 'rf-temp-min',
       borderColor: '#0e17f3de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Rf Temp Min[deg C]"
+      columnLabel: 'Rf Temp Min[deg C]',
     }, {
-      name: "rfTempAvg",
-      label: "rf-temp-avg",
+      name: 'rfTempAvg',
+      label: 'rf-temp-avg',
       borderColor: '#08edb6de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Rf Temp Avg[deg C]"
+      columnLabel: 'Rf Temp Avg[deg C]',
     }, {
-      name: "rfTempMax",
-      label: "rf-temp-max",
+      name: 'rfTempMax',
+      label: 'rf-temp-max',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Rf Temp Max[deg C]"
+      columnLabel: 'Rf Temp Max[deg C]',
     }];
 
-    _rows.forEach(row => {
+    data_rows.forEach(row => {
       row.rfTempMin = row.performanceData.rfTempMin;
       row.rfTempAvg = row.performanceData.rfTempAvg;
       row.rfTempMax = row.performanceData.rfTempMax;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof TemperatureDataType] as string,
-          y: row.performanceData[ds.name as keyof TemperatureDatabaseDataType] as string
+          x: row['timeStamp' as keyof TemperatureDataType] as string,
+          y: row.performanceData[ds.name as keyof TemperatureDatabaseDataType] as string,
         });
       });
     });
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 
 const Temperature = withRouter(connect(mapProps, mapDisp)(TemperatureComponent));
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
index 8696fe4d6..e883aef7f 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
@@ -17,52 +17,54 @@
  */
 
 import * as React from 'react';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
 import BarChartIcon from '@mui/icons-material/BarChart';
+import FilterListIcon from '@mui/icons-material/FilterList';
 import TableChartIcon from '@mui/icons-material/TableChart';
-import makeStyles from '@mui/styles/makeStyles';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Tooltip from '@mui/material/Tooltip';
-import ChartFilter from './chartFilter'
-import FilterListIcon from '@mui/icons-material/FilterList';
+import makeStyles from '@mui/styles/makeStyles';
+
+import ChartFilter from './chartFilter';
 
 const styles = makeStyles({
-    toggleButtonContainer: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "10px",
-    },
-    subViewGroup: {
-        padding: "10px"
-    },
-    filterGroup: {
-        marginLeft: "10px"
-    }
+  toggleButtonContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px',
+  },
+  subViewGroup: {
+    padding: '10px',
+  },
+  filterGroup: {
+    marginLeft: '10px',
+  },
 });
 
-type toggleProps = { selectedValue: string, onChange(value: string): void, showFilter: boolean, onToggleFilterButton(): void, onFilterChanged: (property: string, filterTerm: string) => void, existingFilter: any };
+type toggleProps = { selectedValue: string; onChange(value: string): void; showFilter: boolean; onToggleFilterButton(): void; onFilterChanged: (property: string, filterTerm: string) => void; existingFilter: any };
 
 const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
 
-    const classes = styles();
+  const classes = styles();
 
-    const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
-        if (newView !== null) {
-            props.onChange(newView)
-        }
-    };
+  const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
+    if (newView !== null) {
+      props.onChange(newView);
+    }
+  };
 
-    const handleFilterChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
-        props.onToggleFilterButton();
-    };
+  const handleFilterChange = (_event: React.MouseEvent<HTMLElement>) => {
+    props.onToggleFilterButton();
+  };
 
-    const children = React.Children.toArray(props.children);
+  const children = React.Children.toArray(props.children);
 
-    //hide filter if visible + table
-    //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name
+  //hide filter if visible + table
+  //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name
 
-    return (
+  return (
         <>
             <div className={classes.toggleButtonContainer} >
                 <ToggleButtonGroup className={classes.subViewGroup} size="medium" value={props.selectedValue} exclusive onChange={handleChange}>
@@ -79,7 +81,7 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
                 </ToggleButtonGroup>
 
                 <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} >
-                    <ToggleButton value="" aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}>
+                    <ToggleButton value="" aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== 'chart'}>
                         <Tooltip disableInteractive title={props.showFilter ? 'Hide filter' : 'Show available filter'}>
                             <FilterListIcon />
                         </Tooltip>
@@ -89,13 +91,12 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
 
             </div>
             {
-                props.selectedValue === "chart" &&
+                props.selectedValue === 'chart' &&
                 <ChartFilter filters={props.existingFilter} onFilterChanged={props.onFilterChanged} isVisible={props.showFilter} />
 
             }
-            {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]}
+            {props.selectedValue === 'chart' ? children[0] : props.selectedValue === 'table' && children[1]}
         </>);
-
-}
+};
 
 export default ToggleContainer;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
index 97a35da0a..db9a7c077 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -15,75 +15,73 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { TransmissionPowerDataType, TransmissionPowerDatabaseDataType } from '../models/transmissionPowerDataType';
+import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createTransmissionPowerActions, createTransmissionPowerProperties } from '../handlers/transmissionPowerHandler';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
-import { createTransmissionPowerProperties, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler';
+import { TransmissionPowerDatabaseDataType, TransmissionPowerDataType } from '../models/transmissionPowerDataType';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
-import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
 import ToggleContainer from './toggleContainer';
 
 const mapProps = (state: IApplicationStoreState) => ({
   transmissionPowerProperties: createTransmissionPowerProperties(state),
   currentView: state.performanceHistory.subViews.transmissionPower.subView,
   isFilterVisible: state.performanceHistory.subViews.transmissionPower.isFilterVisible,
-  existingFilter: state.performanceHistory.transmissionPower.filter
+  existingFilter: state.performanceHistory.transmissionPower.filter,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch),
-  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)),
-  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("transmissionPower", value)) },
+  setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('transmissionPower', value)),
+  toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('transmissionPower', value)); },
 
 
 });
 
 type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
-  selectedTimePeriod: string
-}
+  selectedTimePeriod: string;
+};
 
 const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<TransmissionPowerDataType>;
 
 /**
  * The Component which gets the transmission power data from the database based on the selected time period.
  */
-class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{
-
+class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps> {
   onToggleFilterButton = () => {
     this.props.toggleFilterButton(!this.props.isFilterVisible);
-  }
+  };
 
-  onChange = (value: "chart" | "table") => {
+  onChange = (value: 'chart' | 'table') => {
     this.props.setSubView(value);
-  }
+  };
 
   onFilterChanged = (property: string, filterTerm: string) => {
     this.props.transmissionPowerActions.onFilterChanged(property, filterTerm);
     if (!this.props.transmissionPowerProperties.showFilter)
       this.props.transmissionPowerActions.onToggleFilter(false);
-  }
+  };
 
   render(): JSX.Element {
-    const properties = this.props.transmissionPowerProperties
-    const actions = this.props.transmissionPowerActions
+    const properties = this.props.transmissionPowerProperties;
+    const actions = this.props.transmissionPowerActions;
 
     const chartPagedData = this.getChartDataValues(properties.rows);
 
     const transmissionColumns: ColumnModel<TransmissionPowerDataType>[] = [
-      { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
-      { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
-      { property: "timeStamp", title: "End Time", type: ColumnType.text },
+      { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
+      { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
+      { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
       {
-        property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
-      }
+        property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
     ];
 
     chartPagedData.datasets.forEach(ds => {
@@ -92,13 +90,14 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
 
     return (
       <>
-        <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} >
+        <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible}
+          existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} >
           {lineChart(chartPagedData)}
-          <TransmissionPowerTable stickyHeader idProperty={"_id"} tableId="transmission-power-table" columns={transmissionColumns} {...properties} {...actions} />
+          <TransmissionPowerTable stickyHeader idProperty={'_id'} tableId="transmission-power-table" columns={transmissionColumns} {...properties} {...actions} />
         </ToggleContainer>
       </>
     );
-  };
+  }
 
   /**
    * This function gets the performance values for TransmissionPower according on the chartjs dataset structure 
@@ -106,53 +105,53 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
    */
 
   private getChartDataValues = (rows: TransmissionPowerDataType[]): IDataSetsObject => {
-    const _rows = [...rows];
-    sortDataByTimeStamp(_rows);
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
 
     const datasets: IDataSet[] = [{
-      name: "txLevelMin",
-      label: "tx-level-min",
+      name: 'txLevelMin',
+      label: 'tx-level-min',
       borderColor: '#0e17f3de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Tx min"
+      columnLabel: 'Tx min',
     }, {
-      name: "txLevelAvg",
-      label: "tx-level-avg",
+      name: 'txLevelAvg',
+      label: 'tx-level-avg',
       borderColor: '#08edb6de',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Tx avg"
+      columnLabel: 'Tx avg',
     }, {
-      name: "txLevelMax",
-      label: "tx-level-max",
+      name: 'txLevelMax',
+      label: 'tx-level-max',
       borderColor: '#b308edde',
       bezierCurve: false,
       lineTension: 0,
       fill: false,
       data: [],
-      columnLabel: "Tx max"
+      columnLabel: 'Tx max',
     }];
 
-    _rows.forEach(row => {
+    data_rows.forEach(row => {
       row.txLevelMin = row.performanceData.txLevelMin;
       row.txLevelAvg = row.performanceData.txLevelAvg;
       row.txLevelMax = row.performanceData.txLevelMax;
       datasets.forEach(ds => {
         ds.data.push({
-          x: row["timeStamp" as keyof TransmissionPowerDataType] as string,
-          y: row.performanceData[ds.name as keyof TransmissionPowerDatabaseDataType] as string
+          x: row['timeStamp' as keyof TransmissionPowerDataType] as string,
+          y: row.performanceData[ds.name as keyof TransmissionPowerDatabaseDataType] as string,
         });
       });
     });
     return {
-      datasets: datasets
+      datasets: datasets,
     };
-  }
+  };
 }
 
 const TransmissionPower = withRouter(connect(mapProps, mapDisp)(TransmissionPowerComponent));