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>
author: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com> 2023-12-07 22:45:28 +0530
committer: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com> 2023-12-07 22:46:39 +0530
commit: dfd91573b7567e1dab482f17111ab8f809553d99 (patch)
tree: 8368580d1b1add9cfef5e8354ccf1080f27109b0 /sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src
parent: bf8d701f85d02a140a1290d288adc7f437c1cc90 (diff)
46 files changed, 4047 insertions, 0 deletions
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts
new file mode 100644
index 000000000..fbbf2c5f2
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts
@@ -0,0 +1,79 @@
+/**
+ * ============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 { Action } from '../../../../framework/src/flux/action';
+import { Dispatch } from '../../../../framework/src/flux/store';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { DeviceListType } from '../models/deviceListType';
+import { PerformanceHistoryService } from '../services/performanceHistoryService';
+
+/** 
+ * Represents the base action. 
+ */
+export class BaseAction extends Action { }
+
+/** 
+ * Represents an action causing the store to load all devices. 
+ */
+export class LoadAllDeviceListAction extends BaseAction { }
+
+/** 
+ * Represents an action causing the store to update all devices. 
+ */
+export class AllDeviceListLoadedAction extends BaseAction {
+  /**
+   * Initialize this instance.
+   * 
+   * @param deviceList All the distinct devices from the performance history database.
+   */
+  constructor(public deviceList: DeviceListType[] | null, public error?: string) {
+    super();
+  }
+}
+
+/** 
+ * Represents an asynchronous thunk  action to load all devices. 
+ */
+export const loadAllDeviceListAsync = async (dispatch: Dispatch) => {
+  dispatch(new LoadAllDeviceListAction());
+  const deviceListFromPerfHistory: DeviceListType[] = (await PerformanceHistoryService.getDeviceListfromPerf15minHistory().then(ne => (ne))) || [];
+  const deviceListFromPerf24History: DeviceListType[] = (await PerformanceHistoryService.getDeviceListfromPerf24hHistory().then(ne => (ne))) || [];
+  deviceListFromPerf24History.forEach(deviceList24h => {
+    if (deviceListFromPerfHistory.findIndex(deviceList15min => deviceList15min.nodeId === deviceList24h.nodeId) < 0) {
+      deviceListFromPerfHistory.push(deviceList24h);
+    }
+  });
+  return deviceListFromPerfHistory && dispatch(new AllDeviceListLoadedAction(deviceListFromPerfHistory));
+};
+
+/** 
+ * Represents an action causing the store to update mountId. 
+ */
+export class UpdateMountId extends BaseAction {
+  constructor(public nodeId?: string) {
+    super();
+  }
+}
+
+/** 
+ * Represents an asynchronous thunk  action to load updated mountId. 
+ */
+export const updateMountIdActionCreator = (nodeId: string) => async (dispatch: Dispatch) => {
+  return dispatch(new UpdateMountId(nodeId));
+};
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
new file mode 100644
index 000000000..1c333ab50
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
@@ -0,0 +1,94 @@
+/**
+ * ============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 { Action } from '../../../../framework/src/flux/action';
+import { Dispatch } from '../../../../framework/src/flux/store';
+
+import { LtpIds } from '../models/availableLtps';
+import { PerformanceHistoryService } from '../services/performanceHistoryService';
+
+/** 
+ * Represents the base action. 
+ */
+export class BaseAction extends Action { }
+
+/** 
+ * Represents an action causing the store to load available ltps. 
+ */
+export class LoadAllAvailableLtpsAction extends BaseAction { }
+
+/** 
+ * Represents an action causing the store to update available ltps. 
+ */
+export class AllAvailableLtpsLoadedAction extends BaseAction {
+  /**
+   * Initialize this instance.
+   * @param availableLtps The available ltps which are returned from the database.
+   */
+  constructor(public availableLtps: LtpIds[] | null, public error?: string) {
+    super();
+  }
+}
+
+export class SetInitialLoadedAction extends BaseAction {
+  constructor(public initialLoaded: boolean) {
+    super();
+  }
+}
+
+export class NoLtpsFoundAction extends BaseAction { }
+
+export class ResetLtpsAction extends BaseAction { }
+
+const getDistinctLtps = (distinctLtps: LtpIds[], selectedLtp: string, selectFirstLtp?: Function, resetLtp?: Function) => {
+  let ltpNotSelected: boolean = true;
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  selectFirstLtp && selectFirstLtp(distinctLtps[0].key);
+  distinctLtps.forEach((value: LtpIds) => {
+    if (value.key === selectedLtp) {
+      ltpNotSelected = false;
+    }
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  resetLtp && resetLtp(ltpNotSelected);
+  return distinctLtps;
+};
+
+/** 
+ * Represents an asynchronous thunk action to load available distinctLtps by networkElement from the database and set the returned first Ltp as default. 
+ * @param networkElement The network element sent to database to get its available distinct Ltps.
+ * @param selectedTimePeriod The time period selected sent to database to get the distinct Ltps of the selected network element.
+ * @param selectedLtp The Ltp which is selected in the dropdown.
+ * @param selectFirstLtp The function to get the first ltp returned from the database to be selected as default on selection upon network element.
+ * @param resetLtp The function to verify if the selected ltp is also available in the selected time period database else reset the Ltp dropdown to select.
+ */
+export const loadDistinctLtpsbyNetworkElementAsync = (networkElement: string, selectedTimePeriod: string, selectedLtp: string, selectFirstLtp?: Function, resetLtp?: Function) => (dispatch: Dispatch) => {
+  dispatch(new LoadAllAvailableLtpsAction());
+  PerformanceHistoryService.getDistinctLtpsFromDatabase(networkElement, selectedTimePeriod).then(distinctLtps => {
+    if (distinctLtps) {
+      const ltps = getDistinctLtps(distinctLtps, selectedLtp, selectFirstLtp, resetLtp);
+      dispatch(new AllAvailableLtpsLoadedAction(ltps));
+    } else {
+      if (resetLtp)
+        resetLtp();
+      dispatch(new NoLtpsFoundAction());
+    }
+  }).catch(error => {
+    dispatch(new AllAvailableLtpsLoadedAction(null, error));
+  });
+};
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/panelChangeActions.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/panelChangeActions.ts
new file mode 100644
index 000000000..8b77cb3b0
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/panelChangeActions.ts
@@ -0,0 +1,32 @@
+/**
+ * ============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 { Action } from '../../../../framework/src/flux/action';
+import { PanelId } from '../models/panelId';
+
+/** 
+ * Represents an action causing the store to update the panel. 
+ */
+export class SetPanelAction extends Action {
+  /**
+   * Initialize this instance.
+   * @param panelId Action to set the current panel by its Id.
+   */
+  constructor(public panelId: PanelId) {
+    super();
+  }
+}
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts
new file mode 100644
index 000000000..6bd54ce96
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts
@@ -0,0 +1,25 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import { Action } from '../../../../framework/src/flux/action';
+
+export class ReloadAction extends Action {
+  constructor(public show: boolean) {
+    super();
+  }
+}
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/timeChangeAction.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/timeChangeAction.ts
new file mode 100644
index 000000000..13214b24b
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/timeChangeAction.ts
@@ -0,0 +1,30 @@
+/**
+ * ============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 { Action } from '../../../../framework/src/flux/action';
+
+import { PmDataInterval } from '../models/performanceDataType';
+
+export class TimeChangeAction extends Action {
+  /**
+   * Initialize this instance.
+   * @param time Action to set the time interval in dropdown.
+   */
+  constructor(public time: PmDataInterval) {
+    super();
+  }
+}
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts
new file mode 100644
index 000000000..7921ea541
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts
@@ -0,0 +1,36 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import { Action } from '../../../../framework/src/flux/action';
+
+import { currentViewType } from '../models/toggleDataType';
+
+
+export class SetSubViewAction extends Action {
+  constructor(public currentView: currentViewType, public selectedTab: 'chart' | 'table') {
+    super();
+  }
+}
+
+export class ResetAllSubViewsAction extends Action { }
+
+export class SetFilterVisibility extends Action {
+  constructor(public currentView: currentViewType, public isVisible: boolean) {
+    super();
+  }
+}
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/assets/icons/performanceHistoryAppIcon.svg b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/assets/icons/performanceHistoryAppIcon.svg
new file mode 100644
index 000000000..982f1eec3
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/assets/icons/performanceHistoryAppIcon.svg
@@ -0,0 +1,50 @@
+<!-- highstreet technologies GmbH colour scheme 
+	Grey	#565656
+	LBlue #36A9E1
+	DBlue #246DA2
+	Green #003F2C / #006C4B
+	Yellw #C8D400
+	Red 	#D81036
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
+<g>
+	<g>
+		<path fill="#006C4B" d="M 0 447.672 C 0 460.238 4.471 470.99 13.417 479.936 C 22.368 488.882 33.119 493.355 45.681 493.355 H 429.405 C 441.965 493.355 452.717 488.882 461.663 479.936 C 470.608 470.991 475.085 460.239 475.085 447.672 L 0 447.672 Z"/>
+		<rect fill="#565656" x="73.092" y="310.635" width="73.089" height="109.632"/>
+		<rect fill="#565656" x="182.728" y="164.452" width="73.085" height="255.814"/>
+		<rect fill="#565656" x="292.362" y="237.541" width="73.083" height="182.726"/>
+		<rect fill="#565656" x="401.994" y="127.907" width="73.091" height="292.36"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
new file mode 100644
index 000000000..5dac0bc14
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -0,0 +1,489 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createAdaptiveModulationActions, createAdaptiveModulationProperties } from '../handlers/adaptiveModulationHandler';
+import { AdaptiveModulationDatabaseDataType, AdaptiveModulationDataType } from '../models/adaptiveModulationDataType';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+
+const mapProps = (state: IApplicationStoreState) => ({
+  adaptiveModulationProperties: createAdaptiveModulationProperties(state),
+  currentView: state.performanceHistory.subViews.adaptiveModulation.subView,
+  isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible,
+  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)); },
+});
+
+type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  selectedTimePeriod: string;
+};
+
+const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveModulationDataType>;
+
+/**
+ * The Component which gets the adaptiveModulation data from the database based on the selected time period.
+ */
+class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps> {
+  onToggleFilterButton = () => {
+    this.props.toggleFilterButton(!this.props.isFilterVisible);
+  };
+
+  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;
+    const actions = this.props.adaptiveModulationActions;
+
+    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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      }];
+
+    chartPagedData.datasets.forEach(ds => {
+      adaptiveModulationColumns.push(addColumnLabels<AdaptiveModulationDataType>(ds.name, ds.columnLabel));
+    });
+
+    return (
+      <>
+        <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} />
+        </ToggleContainer>
+      </>
+    );
+  }
+
+  /**
+   * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure 
+   * which is to be sent to the chart.
+   */
+
+  private getChartDataValues = (rows: AdaptiveModulationDataType[]): IDataSetsObject => {
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'time2StatesS',
+      label: 'QAM2S',
+      borderColor: '#62a309fc',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM2S',
+    }, {
+      name: 'time2States',
+      label: 'QAM2',
+      borderColor: '#62a309fc',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM2',
+    }, {
+      name: 'time2StatesL',
+      label: 'QAM2L',
+      borderColor: '#62a309fc',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM2L',
+    }, {
+      name: 'time4StatesS',
+      label: 'QAM4S',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM4S',
+    }, {
+      name: 'time4States',
+      label: 'QAM4',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM4',
+    }, {
+      name: 'time4StatesL',
+      label: 'QAM4L',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM4L',
+    }, {
+      name: 'time16StatesS',
+      label: 'QAM16S',
+      borderColor: '#9b15e2',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM16S',
+    }, {
+      name: 'time16States',
+      label: 'QAM16',
+      borderColor: '#9b15e2',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM16',
+    }, {
+      name: 'time16StatesL',
+      label: 'QAM16L',
+      borderColor: '#9b15e2',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM16L',
+    }, {
+      name: 'time32StatesS',
+      label: 'QAM32S',
+      borderColor: '#2704f5f0',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM32S',
+    }, {
+      name: 'time32States',
+      label: 'QAM32',
+      borderColor: '#2704f5f0',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM32',
+    }, {
+      name: 'time32StatesL',
+      label: 'QAM32L',
+      borderColor: '#2704f5f0',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM32L',
+    }, {
+      name: 'time64StatesS',
+      label: 'QAM64S',
+      borderColor: '#347692',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM64S',
+    }, {
+      name: 'time64States',
+      label: 'QAM64',
+      borderColor: '#347692',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM64',
+    }, {
+      name: 'time64StatesL',
+      label: 'QAM64L',
+      borderColor: '#347692',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM64L',
+    }, {
+      name: 'time128StatesS',
+      label: 'QAM128S',
+      borderColor: '#885e22',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM128S',
+    }, {
+      name: 'time128States',
+      label: 'QAM128',
+      borderColor: '#885e22',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM128',
+    }, {
+      name: 'time128StatesL',
+      label: 'QAM128L',
+      borderColor: '#885e22',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM128L',
+    }, {
+      name: 'time256StatesS',
+      label: 'QAM256S',
+      borderColor: '#de07807a',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM256S',
+    }, {
+      name: 'time256States',
+      label: 'QAM256',
+      borderColor: '#de07807a',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM256',
+    }, {
+      name: 'time256StatesL',
+      label: 'QAM256L',
+      borderColor: '#de07807a',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM256L',
+    }, {
+      name: 'time512StatesS',
+      label: 'QAM512S',
+      borderColor: '#8fdaacde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM512S',
+    }, {
+      name: 'time512States',
+      label: 'QAM512',
+      borderColor: '#8fdaacde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM512',
+    }, {
+
+      name: 'time512StatesL',
+      label: 'QAM512L',
+      borderColor: '#8fdaacde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM512L',
+    }, {
+
+      name: 'time1024StatesS',
+      label: 'QAM1024S',
+      borderColor: '#435b22',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM1024S',
+    }, {
+
+      name: 'time1024States',
+      label: 'QAM1024',
+      borderColor: '#435b22',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM1024',
+    }, {
+
+      name: 'time1024StatesL',
+      label: 'QAM1024L',
+      borderColor: '#435b22',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM1024L',
+    }, {
+      name: 'time2048StatesS',
+      label: 'QAM2048S',
+      borderColor: '#e87a5b',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM2048S',
+    }, {
+      name: 'time2048States',
+      label: 'QAM2048',
+      borderColor: '#e87a5b',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM2048',
+    }, {
+      name: 'time2048StatesL',
+      label: 'QAM2048L',
+      borderColor: '#e87a5b',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM2048L',
+    }, {
+      name: 'time4096StatesS',
+      label: 'QAM4096S',
+      borderColor: '#5be878',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM4096S',
+    }, {
+      name: 'time4096States',
+      label: 'QAM4096',
+      borderColor: '#5be878',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM4096',
+    }, {
+      name: 'time4096StatesL',
+      label: 'QAM4096L',
+      borderColor: '#5be878',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM4096L',
+    }, {
+      name: 'time8192StatesS',
+      label: 'QAM8192s',
+      borderColor: '#cb5be8',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM8192S',
+    }, {
+      name: 'time8192States',
+      label: 'QAM8192',
+      borderColor: '#cb5be8',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM8192',
+    }, {
+      name: 'time8192StatesL',
+      label: 'QAM8192L',
+      borderColor: '#cb5be8',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'QAM8192L',
+    },
+    ];
+
+    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.time4States = row.performanceData.time4States;
+      row.time4StatesL = row.performanceData.time4StatesL;
+      row.time16StatesS = row.performanceData.time16StatesS;
+      row.time16States = row.performanceData.time16States;
+      row.time16StatesL = row.performanceData.time16StatesL;
+      row.time32StatesS = row.performanceData.time32StatesS;
+      row.time32States = row.performanceData.time32States;
+      row.time32StatesL = row.performanceData.time32StatesL;
+      row.time64StatesS = row.performanceData.time64StatesS;
+      row.time64States = row.performanceData.time64States;
+      row.time64StatesL = row.performanceData.time64StatesL;
+      row.time128StatesS = row.performanceData.time128StatesS;
+      row.time128States = row.performanceData.time128States;
+      row.time128StatesL = row.performanceData.time128StatesL;
+      row.time256StatesS = row.performanceData.time256StatesS;
+      row.time256States = row.performanceData.time256States;
+      row.time256StatesL = row.performanceData.time256StatesL;
+      row.time512StatesS = row.performanceData.time512StatesS;
+      row.time512States = row.performanceData.time512States;
+      row.time512StatesL = row.performanceData.time512StatesL;
+      row.time1024StatesS = row.performanceData.time1024StatesS;
+      row.time1024States = row.performanceData.time1024States;
+      row.time1024StatesL = row.performanceData.time1024StatesL;
+      row.time2048StatesS = row.performanceData.time2048StatesS;
+      row.time2048States = row.performanceData.time2048States;
+      row.time2048StatesL = row.performanceData.time2048StatesL;
+      row.time4096StatesS = row.performanceData.time4096StatesS;
+      row.time4096States = row.performanceData.time4096States;
+      row.time4096StatesL = row.performanceData.time4096StatesL;
+      row.time8192StatesS = row.performanceData.time8192StatesS;
+      row.time8192States = row.performanceData.time8192States;
+      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,
+        });
+      });
+    });
+
+    return {
+      datasets: datasets,
+    };
+  };
+}
+const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent));
+export default AdaptiveModulation;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
new file mode 100644
index 000000000..021f74a4f
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
@@ -0,0 +1,75 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+
+import * as React from 'react';
+
+import { TextField, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+
+import makeStyles from '@mui/styles/makeStyles';
+
+const styles = makeStyles({
+  filterInput: {
+    marginRight: '15px',
+  },
+  filterContainer: {
+    marginLeft: '90px',
+  },
+});
+
+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 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/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
new file mode 100644
index 000000000..5f925a9ad
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -0,0 +1,155 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createCrossPolarDiscriminationActions, createCrossPolarDiscriminationProperties } from '../handlers/crossPolarDiscriminationHandler';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { CrossPolarDiscriminationDatabaseDataType, CrossPolarDiscriminationDataType } from '../models/crossPolarDiscriminationDataType';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+
+
+const mapProps = (state: IApplicationStoreState) => ({
+  crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state),
+  currentView: state.performanceHistory.subViews.CPD.subView,
+  isFilterVisible: state.performanceHistory.subViews.CPD.isFilterVisible,
+  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));},
+});
+
+type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  selectedTimePeriod: string;
+};
+
+const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<CrossPolarDiscriminationDataType>;
+
+/**
+ * The Component which gets the crossPolarDiscrimination data from the database based on the selected time period.
+ */
+class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps> {
+  onToggleFilterButton = () => {
+    this.props.toggleFilterButton(!this.props.isFilterVisible);
+  };
+
+  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;
+    const actions = this.props.crossPolarDiscriminationActions;
+
+    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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
+    ];
+
+    chartPagedData.datasets.forEach(ds => {
+      cpdColumns.push(addColumnLabels<CrossPolarDiscriminationDataType>(ds.name, ds.columnLabel));
+    });
+    return (
+      <>
+        <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} />
+        </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 data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'xpdMin',
+      label: 'xpd-min',
+      borderColor: '#0e17f3de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'CPD (min)[db]',
+    }, {
+      name: 'xpdAvg',
+      label: 'xpd-avg',
+      borderColor: '#08edb6de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'CPD (avg)[db]',
+    }, {
+      name: 'xpdMax',
+      label: 'xpd-max',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'CPD (max)[db]',
+    }];
+
+    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,
+        });
+      });
+    });
+    return {
+      datasets: datasets,
+    };
+  };
+}
+const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent));
+export default CrossPolarDiscrimination;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
new file mode 100644
index 000000000..bd6333be7
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -0,0 +1,105 @@
+/**
+ * ============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 { FormControl, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import { Loader } from '../../../../framework/src/components/material-ui';
+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',
+  },
+}));
+
+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>)
+      }
+    </>);
+};
+
+export default LtpSelection;
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
new file mode 100644
index 000000000..fb608aac6
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -0,0 +1,150 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createPerformanceDataActions, createPerformanceDataProperties } from '../handlers/performanceDataHandler';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { PerformanceDatabaseDataType, PerformanceDataType } from '../models/performanceDataType';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+
+const mapProps = (state: IApplicationStoreState) => ({
+  performanceDataProperties: createPerformanceDataProperties(state),
+  currentView: state.performanceHistory.subViews.performanceData.subView,
+  isFilterVisible: state.performanceHistory.subViews.performanceData.isFilterVisible,
+  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)); },
+});
+
+type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  selectedTimePeriod: string;
+};
+
+const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceDataType>;
+
+/**
+ * The Component which gets the performance data from the database based on the selected time period.
+ */
+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;
+    const actions = this.props.performanceDataActions;
+
+    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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
+    ];
+
+    chartPagedData.datasets.forEach(ds => {
+      performanceColumns.push(addColumnLabels<PerformanceDataType>(ds.name, ds.columnLabel));
+    });
+    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}>
+          {lineChart(chartPagedData)}
+          <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 data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'es',
+      label: 'es',
+      borderColor: '#0e17f3de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'ES',
+    }, {
+      name: 'ses',
+      label: 'ses',
+      borderColor: '#08edb6de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'SES',
+    }, {
+      name: 'unavailability',
+      label: 'unavailability',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Unavailability',
+    }];
+
+    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,
+        });
+      });
+    });
+
+    return {
+      datasets: datasets,
+    };
+  };
+}
+
+const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent));
+export default PerformanceData;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
new file mode 100644
index 000000000..125cc6ee6
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -0,0 +1,154 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createReceiveLevelActions, createReceiveLevelProperties } from '../handlers/receiveLevelHandler';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { ReceiveLevelDatabaseDataType, ReceiveLevelDataType } from '../models/receiveLevelDataType';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+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,
+});
+
+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)); },
+});
+
+type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  selectedTimePeriod: string;
+};
+
+const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDataType>;
+
+/**
+ * The Component which gets the receiveLevel data from the database based on the selected time period.
+ */
+class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps> {
+  onToggleFilterButton = () => {
+    this.props.toggleFilterButton(!this.props.isFilterVisible);
+  };
+
+
+  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;
+    const actions = this.props.receiveLevelActions;
+
+    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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
+    ];
+
+    chartPagedData.datasets.forEach(ds => {
+      receiveLevelColumns.push(addColumnLabels<ReceiveLevelDataType>(ds.name, ds.columnLabel));
+    });
+
+    return (
+      <>
+        <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} />
+        </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 data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'rxLevelMin',
+      label: 'rx-level-min',
+      borderColor: '#0e17f3de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Rx min',
+    }, {
+      name: 'rxLevelAvg',
+      label: 'rx-level-avg',
+      borderColor: '#08edb6de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Rx avg',
+    }, {
+      name: 'rxLevelMax',
+      label: 'rx-level-max',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Rx max',
+    }];
+
+    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,
+        });
+      });
+    });
+    return {
+      datasets: datasets,
+    };
+  };
+}
+
+const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent));
+export default ReceiveLevel;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
new file mode 100644
index 000000000..85241fbb1
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -0,0 +1,156 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createSignalToInterferenceActions, createSignalToInterferenceProperties } from '../handlers/signalToInterferenceHandler';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { SignalToInterferenceDatabaseDataType, SignalToInterferenceDataType } from '../models/signalToInteferenceDataType';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+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,
+});
+
+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)); },
+});
+
+type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  selectedTimePeriod: string;
+};
+
+const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalToInterferenceDataType>;
+
+/**
+ * The Component which gets the signal to interference data from the database based on the selected time period.
+ */
+class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps> {
+  onToggleFilterButton = () => {
+    this.props.toggleFilterButton(!this.props.isFilterVisible);
+  };
+
+  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;
+    const actions = this.props.signalToInterferenceActions;
+
+    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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
+    ];
+
+    chartPagedData.datasets.forEach(ds => {
+      sinrColumns.push(addColumnLabels<SignalToInterferenceDataType>(ds.name, ds.columnLabel));
+    });
+    return (
+      <>
+        <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}
+          />
+        </ToggleContainer>
+      </>
+    );
+  }
+
+  /**
+   * This function gets the performance values for SINR according on the chartjs dataset structure 
+   * which is to be sent to the chart.
+   */
+
+  private getChartDataValues = (rows: SignalToInterferenceDataType[]): IDataSetsObject => {
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'snirMin',
+      label: 'snir-min',
+      borderColor: '#0e17f3de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'SINR (min)[db]',
+    }, {
+      name: 'snirAvg',
+      label: 'snir-avg',
+      borderColor: '#08edb6de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'SINR (avg)[db]',
+    }, {
+      name: 'snirMax',
+      label: 'snir-max',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'SINR (max)[db]',
+    }];
+
+    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,
+        });
+      });
+    });
+    return {
+      datasets: datasets,
+    };
+  };
+}
+
+const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent));
+export default SignalToInterference;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
new file mode 100644
index 000000000..d4b823387
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -0,0 +1,156 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createTemperatureActions, createTemperatureProperties } from '../handlers/temperatureHandler';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { TemperatureDatabaseDataType, TemperatureDataType } from '../models/temperatureDataType';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+
+const mapProps = (state: IApplicationStoreState) => ({
+  temperatureProperties: createTemperatureProperties(state),
+  currentView: state.performanceHistory.subViews.temperatur.subView,
+  isFilterVisible: state.performanceHistory.subViews.temperatur.isFilterVisible,
+  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)); },
+
+});
+
+type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  selectedTimePeriod: string;
+};
+
+const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataType>;
+
+/**
+ * The Component which gets the temperature data from the database based on the selected time period.
+ */
+class TemperatureComponent extends React.Component<TemperatureComponentProps> {
+  onToggleFilterButton = () => {
+    this.props.toggleFilterButton(!this.props.isFilterVisible);
+  };
+
+
+  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;
+    const actions = this.props.temperatureActions;
+
+    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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
+    ];
+
+    chartPagedData.datasets.forEach(ds => {
+      temperatureColumns.push(addColumnLabels<TemperatureDataType>(ds.name, ds.columnLabel));
+    });
+    return (
+      <>
+
+        <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} />
+        </ToggleContainer>
+      </>
+    );
+  }
+
+  /**
+   * This function gets the performance values for Temperature according on the chartjs dataset structure 
+   * which is to be sent to the chart.
+   */
+
+  private getChartDataValues = (rows: TemperatureDataType[]): IDataSetsObject => {
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'rfTempMin',
+      label: 'rf-temp-min',
+      borderColor: '#0e17f3de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Rf Temp Min[deg C]',
+    }, {
+      name: 'rfTempAvg',
+      label: 'rf-temp-avg',
+      borderColor: '#08edb6de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Rf Temp Avg[deg C]',
+    }, {
+      name: 'rfTempMax',
+      label: 'rf-temp-max',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Rf Temp Max[deg C]',
+    }];
+
+    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,
+        });
+      });
+    });
+    return {
+      datasets: datasets,
+    };
+  };
+}
+
+const Temperature = withRouter(connect(mapProps, mapDisp)(TemperatureComponent));
+export default Temperature;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
new file mode 100644
index 000000000..e883aef7f
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
@@ -0,0 +1,102 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as React from 'react';
+
+import BarChartIcon from '@mui/icons-material/BarChart';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Tooltip from '@mui/material/Tooltip';
+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',
+  },
+});
+
+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 handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
+    if (newView !== null) {
+      props.onChange(newView);
+    }
+  };
+
+  const handleFilterChange = (_event: React.MouseEvent<HTMLElement>) => {
+    props.onToggleFilterButton();
+  };
+
+  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
+
+  return (
+        <>
+            <div className={classes.toggleButtonContainer} >
+                <ToggleButtonGroup className={classes.subViewGroup} size="medium" value={props.selectedValue} exclusive onChange={handleChange}>
+                    <ToggleButton aria-label="display-chart" key={1} value="chart">
+                        <Tooltip disableInteractive title="Chart">
+                            <BarChartIcon />
+                        </Tooltip>
+                    </ToggleButton>
+                    <ToggleButton aria-label="display-table" key={2} value="table">
+                        <Tooltip disableInteractive title="Table">
+                            <TableChartIcon />
+                        </Tooltip>
+                    </ToggleButton>
+                </ToggleButtonGroup>
+
+                <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} >
+                    <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>
+                    </ToggleButton>
+                </ToggleButtonGroup>
+
+
+            </div>
+            {
+                props.selectedValue === 'chart' &&
+                <ChartFilter filters={props.existingFilter} onFilterChanged={props.onFilterChanged} isVisible={props.showFilter} />
+
+            }
+            {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/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
new file mode 100644
index 000000000..db9a7c077
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -0,0 +1,158 @@
+/**
+ * ============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 { 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 { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { createTransmissionPowerActions, createTransmissionPowerProperties } from '../handlers/transmissionPowerHandler';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { TransmissionPowerDatabaseDataType, TransmissionPowerDataType } from '../models/transmissionPowerDataType';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
+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,
+});
+
+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)); },
+
+
+});
+
+type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
+  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> {
+  onToggleFilterButton = () => {
+    this.props.toggleFilterButton(!this.props.isFilterVisible);
+  };
+
+  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 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: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
+      },
+    ];
+
+    chartPagedData.datasets.forEach(ds => {
+      transmissionColumns.push(addColumnLabels<TransmissionPowerDataType>(ds.name, ds.columnLabel));
+    });
+
+    return (
+      <>
+        <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} />
+        </ToggleContainer>
+      </>
+    );
+  }
+
+  /**
+   * This function gets the performance values for TransmissionPower according on the chartjs dataset structure 
+   * which is to be sent to the chart.
+   */
+
+  private getChartDataValues = (rows: TransmissionPowerDataType[]): IDataSetsObject => {
+    const data_rows = [...rows];
+    sortDataByTimeStamp(data_rows);
+
+    const datasets: IDataSet[] = [{
+      name: 'txLevelMin',
+      label: 'tx-level-min',
+      borderColor: '#0e17f3de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Tx min',
+    }, {
+      name: 'txLevelAvg',
+      label: 'tx-level-avg',
+      borderColor: '#08edb6de',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Tx avg',
+    }, {
+      name: 'txLevelMax',
+      label: 'tx-level-max',
+      borderColor: '#b308edde',
+      bezierCurve: false,
+      lineTension: 0,
+      fill: false,
+      data: [],
+      columnLabel: 'Tx max',
+    }];
+
+    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,
+        });
+      });
+    });
+    return {
+      datasets: datasets,
+    };
+  };
+}
+
+const TransmissionPower = withRouter(connect(mapProps, mapDisp)(TransmissionPowerComponent));
+export default TransmissionPower;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/adaptiveModulationHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/adaptiveModulationHandler.ts
new file mode 100644
index 000000000..9baf54529
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/adaptiveModulationHandler.ts
@@ -0,0 +1,37 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { AdaptiveModulationDataType } from '../models/adaptiveModulationDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface IAdaptiveModulationState extends IExternalTableState<AdaptiveModulationDataType> { }
+
+/**
+ * Creates elastic search material data fetch handler for Adaptive modulation from historicalperformance database.
+ */
+const adaptiveModulationSearchHandler = createSearchDataHandler<AdaptiveModulationDataType>(getFilter, false, null);
+export const {
+  actionHandler: adaptiveModulationActionHandler,
+  createActions: createAdaptiveModulationActions,
+  createProperties: createAdaptiveModulationProperties,
+  createPreActions: createAdaptiveModulationPreActions,
+  reloadAction: adaptiveModulationReloadAction,
+} = createExternal<AdaptiveModulationDataType>(adaptiveModulationSearchHandler, appState => appState.performanceHistory.adaptiveModulation);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
new file mode 100644
index 000000000..f943ef44c
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
@@ -0,0 +1,99 @@
+/**
+ * ============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 { IActionHandler } from '../../../../framework/src/flux/action';
+
+import {
+  AllAvailableLtpsLoadedAction,
+  LoadAllAvailableLtpsAction,
+  SetInitialLoadedAction,
+  NoLtpsFoundAction,
+  ResetLtpsAction,
+} from '../actions/ltpAction';
+
+import { LtpIds } from '../models/availableLtps';
+
+export interface IAvailableLtpsState {
+  distinctLtps: LtpIds[];
+  busy: boolean;
+  loadedOnce: boolean;
+  error: string | undefined;
+}
+
+const ltpListStateInit: IAvailableLtpsState = {
+  distinctLtps: [],
+  busy: false,
+  loadedOnce: false,
+  error: undefined,
+};
+
+export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = (state = ltpListStateInit, action) => {
+  if (action instanceof LoadAllAvailableLtpsAction) {
+
+    state = {
+      ...state,
+      busy: true,
+    };
+
+  } else if (action instanceof AllAvailableLtpsLoadedAction) {
+    if (!action.error && action.availableLtps) {
+      state = {
+        ...state,
+        distinctLtps: action.availableLtps,
+        busy: false,
+        error: undefined,
+        loadedOnce: true,
+      };
+    } else if (action.error) {
+      state = {
+        ...state,
+        busy: false,
+        loadedOnce: true,
+        error: action.error,
+      };
+    }
+  } else if (action instanceof SetInitialLoadedAction) {
+
+    state = {
+      ...state,
+      loadedOnce: action.initialLoaded,
+    };
+  } else if (action instanceof NoLtpsFoundAction) {
+    state = {
+      ...state,
+      busy: false,
+      error: undefined,
+      loadedOnce: true,
+      distinctLtps: [],
+    };
+  } else if (action instanceof ResetLtpsAction) {
+    state = {
+      ...state,
+      busy: false,
+      error: undefined,
+      loadedOnce: false,
+      distinctLtps: [],
+    };
+  } else {
+    state = {
+      ...state,
+      busy: false,
+    };
+  }
+
+  return state;
+};
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/crossPolarDiscriminationHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/crossPolarDiscriminationHandler.ts
new file mode 100644
index 000000000..96cabfa83
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/crossPolarDiscriminationHandler.ts
@@ -0,0 +1,38 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { CrossPolarDiscriminationDataType } from '../models/crossPolarDiscriminationDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface ICrossPolarDiscriminationState extends IExternalTableState<CrossPolarDiscriminationDataType> { }
+
+/**
+ * Creates elastic search material data fetch handler for CPD from historicalperformance database.
+ */
+const crossPolarDiscriminationSearchHandler = createSearchDataHandler<CrossPolarDiscriminationDataType>(getFilter, false, null);
+
+export const {
+  actionHandler: crossPolarDiscriminationActionHandler,
+  createActions: createCrossPolarDiscriminationActions,
+  createProperties: createCrossPolarDiscriminationProperties,
+  createPreActions: createCrossPolarDiscriminationPreActions,
+  reloadAction: crossPolarDiscriminationReloadAction,
+} = createExternal<CrossPolarDiscriminationDataType>(crossPolarDiscriminationSearchHandler, appState => appState.performanceHistory.crossPolarDiscrimination);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/deviceListActionHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/deviceListActionHandler.ts
new file mode 100644
index 000000000..11e380ad5
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/deviceListActionHandler.ts
@@ -0,0 +1,56 @@
+/**
+ * ============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 { IActionHandler } from '../../../../framework/src/flux/action';
+
+import { AllDeviceListLoadedAction, LoadAllDeviceListAction } from '../actions/deviceListActions';
+import { DeviceListType } from '../models/deviceListType';
+
+export interface IDeviceListState {
+  deviceList: DeviceListType[];
+  busy: boolean;
+}
+
+const deviceListStateInit: IDeviceListState = {
+  deviceList: [],
+  busy: false,
+};
+
+export const deviceListActionHandler: IActionHandler<IDeviceListState> = (state = deviceListStateInit, action) => {
+  if (action instanceof LoadAllDeviceListAction) {
+
+    state = {
+      ...state,
+      busy: true,
+    };
+
+  } else if (action instanceof AllDeviceListLoadedAction) {
+    if (!action.error && action.deviceList) {
+      state = {
+        ...state,
+        deviceList: action.deviceList,
+        busy: false,
+      };
+    } else {
+      state = {
+        ...state,
+        busy: false,
+      };
+    }
+  }
+  return state;
+};
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/performanceDataHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/performanceDataHandler.ts
new file mode 100644
index 000000000..664c7cd6c
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/performanceDataHandler.ts
@@ -0,0 +1,39 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { PerformanceDataType } from '../models/performanceDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface IPerformanceDataState extends IExternalTableState<PerformanceDataType> { }
+
+/**
+* Creates elastic search material data fetch handler for performance data from historicalperformance15min database.
+*/
+const performanceDataSearchHandler = createSearchDataHandler<PerformanceDataType>(getFilter, false, null);
+
+export const {
+  actionHandler: performanceDataActionHandler,
+  createActions: createPerformanceDataActions,
+  createProperties: createPerformanceDataProperties,
+  createPreActions: createPerformanceDataPreActions,
+  reloadAction: performanceDataReloadAction,
+} = createExternal<PerformanceDataType>(performanceDataSearchHandler, appState => appState.performanceHistory.performanceData);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
new file mode 100644
index 000000000..c0cee46ba
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
@@ -0,0 +1,181 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+// main state handler
+
+import { IActionHandler } from '../../../../framework/src/flux/action';
+import { combineActionHandler } from '../../../../framework/src/flux/middleware';
+// ** do not remove **
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { IConnectAppStoreState } from '../../../connectApp/src/handlers/connectAppRootHandler';
+import { UpdateMountId } from '../actions/deviceListActions';
+import { SetPanelAction } from '../actions/panelChangeActions';
+import { ReloadAction } from '../actions/reloadAction';
+import { TimeChangeAction } from '../actions/timeChangeAction';
+import { ResetAllSubViewsAction, SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
+import { PmDataInterval } from '../models/performanceDataType';
+import { currentViewType, SubTabType } from '../models/toggleDataType';
+import { adaptiveModulationActionHandler, IAdaptiveModulationState } from './adaptiveModulationHandler';
+import { availableLtpsActionHandler, IAvailableLtpsState } from './availableLtpsActionHandler';
+import { crossPolarDiscriminationActionHandler, ICrossPolarDiscriminationState } from './crossPolarDiscriminationHandler';
+import { deviceListActionHandler, IDeviceListState } from './deviceListActionHandler';
+import { IPerformanceDataState, performanceDataActionHandler } from './performanceDataHandler';
+import { IReceiveLevelState, receiveLevelActionHandler } from './receiveLevelHandler';
+import { ISignalToInterferenceState, signalToInterferenceActionHandler } from './signalToInterferenceHandler';
+import { ITemperatureState, temperatureActionHandler } from './temperatureHandler';
+import { ITransmissionPowerState, transmissionPowerActionHandler } from './transmissionPowerHandler';
+
+export interface IPerformanceHistoryStoreState {
+  nodeId: string;
+  networkElements: IDeviceListState;
+  ltps: IAvailableLtpsState;
+  performanceData: IPerformanceDataState;
+  receiveLevel: IReceiveLevelState;
+  transmissionPower: ITransmissionPowerState;
+  adaptiveModulation: IAdaptiveModulationState;
+  temperature: ITemperatureState;
+  signalToInterference: ISignalToInterferenceState;
+  crossPolarDiscrimination: ICrossPolarDiscriminationState;
+  currentOpenPanel: string | null;
+  pmDataIntervalType: PmDataInterval;
+  subViews: toggleViewDataType;
+  isReloadSchedueled: boolean;
+}
+
+const mountIdHandler: IActionHandler<string> = (state = '', action) => {
+  if (action instanceof UpdateMountId) {
+    state = '';
+    if (action.nodeId) {
+      state = action.nodeId;
+    }
+  }
+  return state;
+};
+
+const reloadHandler: IActionHandler<boolean> = (state = false, action) => {
+
+  if (action instanceof ReloadAction) {
+    state = action.show;
+  }
+  return state;
+};
+
+
+const currentOpenPanelHandler: IActionHandler<string | null> = (state = null, action) => {
+  if (action instanceof SetPanelAction) {
+    state = action.panelId;
+  }
+  return state;
+};
+
+const currentPMDataIntervalHandler: IActionHandler<PmDataInterval> = (state = PmDataInterval.pmInterval15Min, action) => {
+  if (action instanceof TimeChangeAction) {
+    state = action.time;
+  }
+  return state;
+};
+
+type filterableSubview = { subView: SubTabType; isFilterVisible: boolean };
+type toggleViewDataType = {
+  currentSubView: currentViewType;
+  performanceData: filterableSubview;
+  receiveLevel: filterableSubview;
+  transmissionPower: filterableSubview;
+  adaptiveModulation: filterableSubview;
+  temperatur: filterableSubview;
+  SINR: filterableSubview;
+  CPD: filterableSubview;
+};
+
+
+const toogleViewDataHandler: IActionHandler<toggleViewDataType> = (
+  state = {
+    currentSubView: 'performanceData',
+    performanceData: { subView: 'chart', isFilterVisible: true },
+    receiveLevel: { subView: 'chart', isFilterVisible: true },
+    adaptiveModulation: { subView: 'chart', isFilterVisible: true },
+    transmissionPower: { subView: 'chart', isFilterVisible: true },
+    temperatur: { subView: 'chart', isFilterVisible: true },
+    SINR: { subView: 'chart', isFilterVisible: true },
+    CPD: { subView: 'chart', isFilterVisible: true },
+  }, action) => {
+
+  if (action instanceof SetSubViewAction) {
+    switch (action.currentView) {
+      case 'performanceData': state = { ...state, performanceData: { ...state.performanceData, subView: action.selectedTab } }; break;
+      case 'adaptiveModulation': state = { ...state, adaptiveModulation: { ...state.adaptiveModulation, subView: action.selectedTab } }; break;
+      case 'receiveLevel': state = { ...state, receiveLevel: { ...state.receiveLevel, subView: action.selectedTab } }; break;
+      case 'transmissionPower': state = { ...state, transmissionPower: { ...state.transmissionPower, subView: action.selectedTab } }; break;
+      case 'Temp': state = { ...state, temperatur: { ...state.temperatur, subView: action.selectedTab } }; break;
+      case 'SINR': state = { ...state, SINR: { ...state.SINR, subView: action.selectedTab } }; break;
+      case 'CPD': state = { ...state, CPD: { ...state.CPD, subView: action.selectedTab } }; break;
+    }
+  } else if (action instanceof SetFilterVisibility) {
+    switch (action.currentView) {
+      case 'performanceData': state = {
+        ...state, performanceData: { ...state.performanceData, isFilterVisible: action.isVisible },
+      }; break;
+      case 'adaptiveModulation': state = { ...state, adaptiveModulation: { ...state.performanceData, isFilterVisible: action.isVisible } }; break;
+      case 'receiveLevel': state = { ...state, receiveLevel: { ...state.receiveLevel, isFilterVisible: action.isVisible } }; break;
+      case 'transmissionPower': state = { ...state, transmissionPower: { ...state.transmissionPower, isFilterVisible: action.isVisible } }; break;
+      case 'Temp': state = { ...state, temperatur: { ...state.temperatur, isFilterVisible: action.isVisible } }; break;
+      case 'SINR': state = { ...state, SINR: { ...state.SINR, isFilterVisible: action.isVisible } }; break;
+      case 'CPD': state = { ...state, CPD: { ...state.CPD, isFilterVisible: action.isVisible } }; break;
+    }
+  } else if (action instanceof ResetAllSubViewsAction) {
+    state = {
+      ...state, performanceData: { ...state.performanceData, subView: 'chart' },
+      adaptiveModulation: { ...state.adaptiveModulation, subView: 'chart' },
+      receiveLevel: { ...state.receiveLevel, subView: 'chart' },
+      transmissionPower: { ...state.transmissionPower, subView: 'chart' },
+      temperatur: { ...state.temperatur, subView: 'chart' },
+      SINR: { ...state.SINR, subView: 'chart' },
+      CPD: { ...state.CPD, subView: 'chart' },
+    };
+  }
+  return state;
+};
+
+declare module '../../../../framework/src/store/applicationStore' {
+  interface IApplicationStoreState {
+    performanceHistory: IPerformanceHistoryStoreState;
+    connect: IConnectAppStoreState;
+  }
+}
+
+const actionHandlers = {
+  nodeId: mountIdHandler,
+  networkElements: deviceListActionHandler,
+  ltps: availableLtpsActionHandler,
+  performanceData: performanceDataActionHandler,
+  receiveLevel: receiveLevelActionHandler,
+  transmissionPower: transmissionPowerActionHandler,
+  adaptiveModulation: adaptiveModulationActionHandler,
+  temperature: temperatureActionHandler,
+  signalToInterference: signalToInterferenceActionHandler,
+  crossPolarDiscrimination: crossPolarDiscriminationActionHandler,
+  currentOpenPanel: currentOpenPanelHandler,
+  pmDataIntervalType: currentPMDataIntervalHandler,
+  subViews: toogleViewDataHandler,
+  isReloadSchedueled: reloadHandler,
+};
+
+const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers);
+export default performanceHistoryRootHandler;
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/receiveLevelHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/receiveLevelHandler.ts
new file mode 100644
index 000000000..78626ebec
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/receiveLevelHandler.ts
@@ -0,0 +1,38 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { ReceiveLevelDataType } from '../models/receiveLevelDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface IReceiveLevelState extends IExternalTableState<ReceiveLevelDataType> { }
+
+/**
+ * Creates elastic search material data fetch handler for receiveLevel from historicalperformance database.
+ */
+const receiveLevelSearchHandler = createSearchDataHandler<ReceiveLevelDataType>(getFilter, false, null);
+
+export const {
+  actionHandler: receiveLevelActionHandler,
+  createActions: createReceiveLevelActions,
+  createProperties: createReceiveLevelProperties,
+  createPreActions: createReceiveLevelPreActions,
+  reloadAction: receiveLevelReloadAction,
+} = createExternal<ReceiveLevelDataType>(receiveLevelSearchHandler, appState => appState.performanceHistory.receiveLevel);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/signalToInterferenceHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/signalToInterferenceHandler.ts
new file mode 100644
index 000000000..ab6efabae
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/signalToInterferenceHandler.ts
@@ -0,0 +1,38 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { SignalToInterferenceDataType } from '../models/signalToInteferenceDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface ISignalToInterferenceState extends IExternalTableState<SignalToInterferenceDataType> { }
+
+/**
+ * Creates elastic search material data fetch handler for SINR from historicalperformance database.
+ */
+const signalToInterferenceSearchHandler = createSearchDataHandler<SignalToInterferenceDataType>(getFilter, false, null);
+
+export const {
+  actionHandler: signalToInterferenceActionHandler,
+  createActions: createSignalToInterferenceActions,
+  createProperties: createSignalToInterferenceProperties,
+  createPreActions: createSignalToInterferencePreActions,
+  reloadAction: signalToInterferenceReloadAction,
+} = createExternal<SignalToInterferenceDataType>(signalToInterferenceSearchHandler, appState => appState.performanceHistory.signalToInterference);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/temperatureHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/temperatureHandler.ts
new file mode 100644
index 000000000..02bf69be7
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/temperatureHandler.ts
@@ -0,0 +1,38 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { TemperatureDataType } from '../models/temperatureDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface ITemperatureState extends IExternalTableState<TemperatureDataType> { }
+
+/**
+ * Creates elastic search material data fetch handler for Temperature from historicalperformance database.
+ */
+const temperatureSearchHandler = createSearchDataHandler<TemperatureDataType>(getFilter, false, null);
+
+export const {
+  actionHandler: temperatureActionHandler,
+  createActions: createTemperatureActions,
+  createProperties: createTemperatureProperties,
+  createPreActions: createTemperaturePreActions,
+  reloadAction: temperatureReloadAction,
+} = createExternal<TemperatureDataType>(temperatureSearchHandler, appState => appState.performanceHistory.temperature);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/transmissionPowerHandler.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/transmissionPowerHandler.ts
new file mode 100644
index 000000000..9cf70dc87
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/handlers/transmissionPowerHandler.ts
@@ -0,0 +1,38 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { TransmissionPowerDataType } from '../models/transmissionPowerDataType';
+import { getFilter } from '../utils/tableUtils';
+
+export interface ITransmissionPowerState extends IExternalTableState<TransmissionPowerDataType> { }
+
+/**
+ * Creates elastic search material data fetch handler for Transmission power from historicalperformance database.
+ */
+const transmissionPowerSearchHandler = createSearchDataHandler<TransmissionPowerDataType>(getFilter, false, null);
+
+export const {
+  actionHandler: transmissionPowerActionHandler,
+  createActions: createTransmissionPowerActions,
+  createProperties: createTransmissionPowerProperties,
+  createPreActions: createTransmissionPowerPreActions,
+  reloadAction: transmissionPowerReloadAction,
+} = createExternal<TransmissionPowerDataType>(transmissionPowerSearchHandler, appState => appState.performanceHistory.transmissionPower);
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/index.html b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/index.html
new file mode 100644
index 000000000..8cb775be2
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <!-- <link rel="stylesheet" href="./vendor.css" > -->
+  <title>PM History Application</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="text/javascript" src="./require.js"></script>
+  <script type="text/javascript" src="./config.js"></script>
+  <script>
+    // run the application
+    require(["app", "connectApp", "performanceHistoryApp"], function (app, connectApp, performanceHistoryApp) {
+      connectApp.register();
+      performanceHistoryApp.register();
+      app("./app.tsx").runApplication();
+    });
+  </script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts
new file mode 100644
index 000000000..adb0bcd6f
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts
@@ -0,0 +1,109 @@
+/**
+ * ============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==========================================================================
+ */
+export { HitEntry, Result } from '../../../../framework/src/models';
+
+/**
+ * Represents Adaptive Modulation data fields of the performance history table.
+ */
+export type AdaptiveModulationDatabaseDataType = {
+  _id: string ;
+  time2StatesS: number;
+  time2States: number;
+  time2StatesL: number;
+  time4StatesS: number;
+  time4States: number;
+  time4StatesL: number;
+  time16StatesS: number;
+  time16States: number;
+  time16StatesL: number;
+  time32StatesS: number;
+  time32States: number;
+  time32StatesL: number;
+  time64StatesS: number;
+  time64States: number;
+  time64StatesL: number;
+  time128StatesS: number;
+  time128States: number;
+  time128StatesL: number;
+  time256StatesS: number;
+  time256States: number;
+  time256StatesL: number;
+  time512StatesS: number;
+  time512States: number;
+  time512StatesL: number;
+  time1024StatesS: number;
+  time1024States: number;
+  time1024StatesL: number;
+  time2048StatesS: number;
+  time2048States: number;
+  time2048StatesL: number;
+  time4096StatesS: number;
+  time4096States: number;
+  time4096StatesL: number;
+  time8192StatesS: number;
+  time8192States: number;
+  time8192StatesL: number;
+};
+
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type AdaptiveModulationDataType = {
+  performanceData: AdaptiveModulationDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  time2StatesS: number;
+  time2States: number;
+  time2StatesL: number;
+  time4StatesS: number;
+  time4States: number;
+  time4StatesL: number;
+  time16StatesS: number;
+  time16States: number;
+  time16StatesL: number;
+  time32StatesS: number;
+  time32States: number;
+  time32StatesL: number;
+  time64StatesS: number;
+  time64States: number;
+  time64StatesL: number;
+  time128StatesS: number;
+  time128States: number;
+  time128StatesL: number;
+  time256StatesS: number;
+  time256States: number;
+  time256StatesL: number;
+  time512StatesS: number;
+  time512States: number;
+  time512StatesL: number;
+  time1024StatesS: number;
+  time1024States: number;
+  time1024StatesL: number;
+  time2048StatesS: number;
+  time2048States: number;
+  time2048StatesL: number;
+  time4096StatesS: number;
+  time4096States: number;
+  time4096StatesL: number;
+  time8192StatesS: number;
+  time8192States: number;
+  time8192StatesL: number;
+} & { _id: string };
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts
new file mode 100644
index 000000000..60061571c
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts
@@ -0,0 +1,21 @@
+/**
+ * ============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==========================================================================
+ */
+export type LtpIds = {
+  key: string;
+};
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts
new file mode 100644
index 000000000..969c0b399
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts
@@ -0,0 +1,49 @@
+/**
+ * ============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==========================================================================
+ */
+export interface IData {
+  x: string;
+  y: string;
+}
+
+/**
+ * Structure of chartjs dataset with the chart properties.
+ */
+export interface IDataSet {
+  name: string;
+  label: string;
+  lineTension: 0;
+  bezierCurve: boolean;
+  fill: boolean;
+  borderColor: string;
+  data: IData[];
+  columnLabel: string;
+}
+
+/**
+ * Structure of chartjs dataset which is sent to the chart.
+ */
+export interface IDataSetsObject {
+  datasets: IDataSet[];
+}
+
+/**
+ * Interface used by chart for sorting on time-stamp
+ */
+export interface ITimeStamp {
+  timeStamp: string;
+}
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts
new file mode 100644
index 000000000..749624b9a
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts
@@ -0,0 +1,44 @@
+/**
+ * ============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==========================================================================
+ */
+export { HitEntry, Result } from '../../../../framework/src/models';
+
+
+/**
+ * Represents Receive level data fields of the performance history table.
+ */
+export type CrossPolarDiscriminationDatabaseDataType = {
+  _id: string;
+  xpdMin: number;
+  xpdAvg: number;
+  xpdMax: number;
+};
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type CrossPolarDiscriminationDataType = {
+  performanceData: CrossPolarDiscriminationDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  xpdMin: number;
+  xpdAvg: number;
+  xpdMax: number;
+} & { _id: string };
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/deviceListType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/deviceListType.ts
new file mode 100644
index 000000000..fbe314162
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/deviceListType.ts
@@ -0,0 +1,25 @@
+/**
+ * ============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==========================================================================
+ */
+
+/**
+ * Represents all the distinct devices from the performance history data.
+ */
+
+export type DeviceListType = {
+  nodeId: string;
+};
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/panelId.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/panelId.ts
new file mode 100644
index 000000000..08bf7f815
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/panelId.ts
@@ -0,0 +1,22 @@
+/**
+ * ============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==========================================================================
+ */
+
+/**
+ * Represents PanelIds for the available Expansional panels.
+ */
+export type PanelId = null | 'PerformanceData' | 'ReceiveLevel' | 'TransmissionPower' | 'AdaptiveModulation' | 'Temperature' | 'SINR' | 'CPD';
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts
new file mode 100644
index 000000000..f71e09de9
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts
@@ -0,0 +1,53 @@
+/**
+ * ============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==========================================================================
+ */
+
+//export { HitEntry, Result } from '../../../../framework/src/models';
+
+/**
+ * Represents performance data fields of the performance history table as used in the database
+ */
+export type PerformanceDatabaseDataType = {
+  _id: string;
+  es: number;
+  ses: number;
+  unavailability: number;
+};
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type PerformanceDataType = {
+
+  performanceData: PerformanceDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  es: number;
+  ses: number;
+  unavailability: number;
+} & { _id: string };
+
+
+/**
+ * Represents performance data time interval.
+ */
+export const enum PmDataInterval {
+  pmInterval15Min,
+  pmInterval24Hours,
+}
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts
new file mode 100644
index 000000000..2748a3d5d
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts
@@ -0,0 +1,43 @@
+/**
+ * ============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==========================================================================
+ */
+export { HitEntry, Result } from '../../../../framework/src/models';
+
+/**
+ * Represents Receive level data fields of the performance history table.
+ */
+export type ReceiveLevelDatabaseDataType = {
+  _id: string;
+  rxLevelMin: number;
+  rxLevelAvg: number;
+  rxLevelMax: number;
+};
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type ReceiveLevelDataType = {
+  performanceData: ReceiveLevelDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  rxLevelMin: number;
+  rxLevelAvg: number;
+  rxLevelMax: number;
+} & { _id: string };
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts
new file mode 100644
index 000000000..5c675feb8
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts
@@ -0,0 +1,44 @@
+/**
+ * ============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==========================================================================
+ */
+export { HitEntry, Result } from '../../../../framework/src/models';
+
+
+/**
+ * Represents Receive level data fields of the performance history table.
+ */
+export type SignalToInterferenceDatabaseDataType = {
+  _id: string; 
+  snirMin: number;
+  snirAvg: number;
+  snirMax: number;
+};
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type SignalToInterferenceDataType = {
+  performanceData: SignalToInterferenceDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  snirMin: number;
+  snirAvg: number;
+  snirMax: number;
+} & { _id: string };
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts
new file mode 100644
index 000000000..5798d5c5d
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts
@@ -0,0 +1,45 @@
+/**
+ * ============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==========================================================================
+ */
+export { HitEntry, Result } from '../../../../framework/src/models';
+
+
+/**
+ * Represents Receive level data fields of the performance history table.
+ */
+export type TemperatureDatabaseDataType = {
+  _id: string;
+  rfTempMin: number;
+  rfTempAvg: number;
+  rfTempMax: number;
+};
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type TemperatureDataType = {
+  performanceData: TemperatureDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  rfTempMin: number;
+  rfTempAvg: number;
+  rfTempMax: number;
+} & { _id: string };
+
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts
new file mode 100644
index 000000000..0e71c9474
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts
@@ -0,0 +1,25 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+/**
+ * Specifies possible sub views
+ */
+export type SubTabType = 'chart' | 'table';
+
+export type currentViewType = 'performanceData' | 'receiveLevel' | 'transmissionPower' | 'adaptiveModulation' | 'Temp' | 'SINR' | 'CPD';
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/topologyNetconf.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/topologyNetconf.ts
new file mode 100644
index 000000000..f52af9784
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/topologyNetconf.ts
@@ -0,0 +1,26 @@
+/**
+ * ============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==========================================================================
+ */
+
+export interface TopologyNode {
+  'node-id': string;
+}
+
+export interface Topology {
+  'topology-id': string;
+  node: TopologyNode[];
+}
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts
new file mode 100644
index 000000000..62c00bfe4
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts
@@ -0,0 +1,44 @@
+/**
+ * ============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==========================================================================
+ */
+export { HitEntry, Result } from '../../../../framework/src/models';
+
+
+/**
+ * Represents Receive level data fields of the performance history table.
+ */
+export type TransmissionPowerDatabaseDataType = {
+  _id: string;
+  txLevelMin: number;
+  txLevelAvg: number;
+  txLevelMax: number;
+};
+
+/**
+ * Internally used type to provide table and chart data
+ */
+export type TransmissionPowerDataType = {
+  performanceData: TransmissionPowerDatabaseDataType;
+  radioSignalId: string;
+  scannerId: string;
+  timeStamp: string;
+  suspectIntervalFlag: boolean;
+  txLevelMin: number;
+  txLevelAvg: number;
+  txLevelMax: number;
+} & { _id: string };
+
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx
new file mode 100644
index 000000000..ef939fdba
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx
@@ -0,0 +1,147 @@
+/**
+ * ============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 { Redirect, Route, RouteComponentProps, Switch, withRouter } from 'react-router-dom';
+
+import { connect, Connect, IDispatcher } from '../../../framework/src/flux/connect';
+import applicationManager from '../../../framework/src/services/applicationManager';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IApplicationStoreState } from '../../../framework/src/store/applicationStore';
+import { ApplicationStore } from '../../../framework/src/store/applicationStore';
+
+import { updateMountIdActionCreator } from './actions/deviceListActions';
+import { ResetLtpsAction } from './actions/ltpAction';
+import { ReloadAction } from './actions/reloadAction';
+import { ResetAllSubViewsAction } from './actions/toggleActions';
+import performanceHistoryRootHandler from './handlers/performanceHistoryRootHandler';
+import { PmDataInterval } from './models/performanceDataType';
+import PerformanceHistoryApplication from './views/performanceHistoryApplication';
+
+const appIcon = require('./assets/icons/performanceHistoryAppIcon.svg');  // select app icon
+
+let api: {
+  readonly applicationStore: ApplicationStore | null;
+  readonly applicationStoreInitialized: Promise<ApplicationStore>;
+};
+
+const mapProps = () => ({
+});
+
+const mapDisp = (dispatcher: IDispatcher) => ({
+  updateMountId: (mountId: string) => dispatcher.dispatch(updateMountIdActionCreator(mountId)),
+  resetLtps: () => dispatcher.dispatch(new ResetLtpsAction()),
+  resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()),
+  setScheduleReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show)),
+});
+
+let currentMountId: string | null = null;
+let lastUrl: string = '/performanceHistory';
+const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDisp>) => {
+  let mountId: string = '';
+
+  const getMountId = (last_url: string) => {
+    let index = last_url.lastIndexOf('performanceHistory/');
+    if (index >= 0) {
+      mountId = last_url.substring(index + 19);
+    } else {
+      mountId = '';
+    }
+
+    return mountId;
+  };
+
+  const scheduleReload = (current_mount_id: string) => {
+    props.updateMountId(current_mount_id);
+    props.resetLtps();
+    props.resetSubViews();
+    props.setScheduleReload(true);
+  };
+  
+  // called when component finished mounting
+  React.useEffect(() => {
+
+    lastUrl = props.location.pathname;
+    mountId = getMountId(lastUrl);
+
+    if (currentMountId !== mountId) { // new element is loaded
+      currentMountId = mountId;
+      scheduleReload(currentMountId);
+    } else
+    if (currentMountId !== '') { // same element is loaded again
+      scheduleReload(currentMountId);
+    }
+  }, []);
+
+  // called when component gets updated
+  React.useEffect(() => {
+
+    lastUrl = props.location.pathname;
+    mountId = getMountId(lastUrl);
+
+    if (currentMountId !== mountId) {
+      currentMountId = mountId;
+      scheduleReload(currentMountId);
+    }
+
+  });
+
+  return (
+    <PerformanceHistoryApplication />
+  );
+});
+
+const PerformanceHistoryRouterApp = withRouter((props: RouteComponentProps) => {
+  props.history.action = 'POP';
+  return (
+    <Switch>
+      <Route path={`${props.match.path}/:mountId`} component={PerformanceHistoryApplicationRouteAdapter} />
+      <Route path={`${props.match.path}`} component={PerformanceHistoryApplicationRouteAdapter} />
+      <Redirect to={`${props.match.path}`} />
+    </Switch>
+  );
+});
+
+export function register() {
+  api = applicationManager.registerApplication({
+    name: 'performanceHistory',
+    icon: appIcon,
+    rootComponent: PerformanceHistoryRouterApp,
+    rootActionHandler: performanceHistoryRootHandler,
+    menuEntry: 'Performance',
+  });
+}
+
+export function setPmDataInterval(pmDataInterval: PmDataInterval): boolean {
+  let reload: boolean = true;
+  if (api && api.applicationStore) {
+    if (api.applicationStore.state.performanceHistory.pmDataIntervalType !== pmDataInterval) {
+      reload = true;
+    }
+    api.applicationStore.state.performanceHistory.pmDataIntervalType = pmDataInterval;
+  }
+  return reload;
+}
+
+
+export function getPmDataInterval(): PmDataInterval {
+  let result = api && api.applicationStore
+    ? api.applicationStore.state.performanceHistory.pmDataIntervalType
+    : PmDataInterval.pmInterval15Min;
+  return result ? result : PmDataInterval.pmInterval15Min;
+}
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts
new file mode 100644
index 000000000..ef013f1cb
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts
@@ -0,0 +1,107 @@
+/**
+ * ============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 { Result } from '../../../../framework/src/models/elasticSearch';
+import { requestRest } from '../../../../framework/src/services/restService';
+
+import { convertPropertyNames, replaceUpperCase } from '../../../../framework/src/utilities/yangHelper';
+import { LtpIds } from '../models/availableLtps';
+import { DeviceListType } from '../models/deviceListType';
+
+/** 
+ * Represents a web api accessor service for Network elements actions.
+ */
+class PerformanceService {
+
+  /**
+   * Get distinct ltps based on the selected network element and time period from the historicalperformance15min database table.
+   */
+  public async getDistinctLtpsFromDatabase(networkElement: string, selectedTimePeriod: string): Promise<LtpIds[] | null> {
+    let path;
+    const query = {
+      'filter': [{
+        'property': 'node-name',
+        'filtervalue': networkElement,
+      }],
+      'sortorder': [],
+      'pagination': {
+        'size': 20,
+        'page': 1,
+      },
+    };
+
+
+    if (selectedTimePeriod === '15min') {
+      path = '/rests/operations/data-provider:read-pmdata-15m-ltp-list';
+    } else {
+      path = '/rests/operations/data-provider:read-pmdata-24h-ltp-list';
+    }
+
+    const result = await requestRest<Result<string>>(path, { method: 'POST', body: JSON.stringify(convertPropertyNames({ input: query }, replaceUpperCase)) });
+    return result && result['data-provider:output'] && result['data-provider:output'].data && result['data-provider:output'].data.map(ne => ({ key: ne })) || null;
+  }
+
+
+
+  /**
+  * Gets all devices from the performanceHistory 15min backend.
+  */
+  public async getDeviceListfromPerf15minHistory(): Promise<(DeviceListType)[] | null> {
+    const path = '/rests/operations/data-provider:read-pmdata-15m-device-list';
+    const query = {
+      'data-provider:input': {
+        'filter': [],
+        'sortorder': [],
+        'pagination': {
+          'size': 20,
+          'page': 1,
+        },
+      },
+    };
+
+    const result = await requestRest<Result<string>>(path, { method: 'POST', body: JSON.stringify(query) });
+    return result && result['data-provider:output'] && result['data-provider:output'].data && result['data-provider:output'].data.map(ne => ({
+      nodeId: ne,
+    })) || null;
+  }
+
+  /**
+   * Gets all devices from the performanceHistory 24h backend.
+   */
+  public async getDeviceListfromPerf24hHistory(): Promise<(DeviceListType)[] | null> {
+    const path = '/rests/operations/data-provider:read-pmdata-24h-device-list';
+    const query = {
+      'data-provider:input': {
+        'filter': [],
+        'sortorder': [],
+        'pagination': {
+          'size': 20,
+          'page': 1,
+        },
+      },
+    };
+
+    const result = await requestRest<Result<string>>(path, { method: 'POST', body: JSON.stringify(query) });
+    return result && result['data-provider:output'] && result['data-provider:output'].data && result['data-provider:output'].data.map(ne => ({
+      nodeId: ne,
+    })) || null;
+  }
+}
+
+
+export const PerformanceHistoryService = new PerformanceService();
+export default PerformanceHistoryService;
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
new file mode 100644
index 000000000..38abb3e79
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
@@ -0,0 +1,77 @@
+/**
+ * ============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 moment from 'moment';
+import { Line } from 'react-chartjs-2';
+
+import { IDataSetsObject } from '../models/chartTypes';
+import { ITimeStamp } from '../models/chartTypes';
+
+const style: React.CSSProperties = {
+  height: '80%',
+};
+
+export const lineChart = (chartPagedData: IDataSetsObject) => {
+  return (
+    <div style={style}>
+      <Line ref="chart" data={chartPagedData} options={{
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [{
+            type: 'time',
+            time: {
+              displayFormats: {
+                'second': 'DD MMM YYYY HH:mm:ss',
+                'minute': 'DD MMM YYYY HH:mm:ss',
+                'hour': 'DD MMM YYYY HH:mm:ss',
+                'year': 'DD MMM YYYY HH:mm:ss',
+              },
+              parser: function (date: string) {
+                let offsetValue = new Date().getTimezoneOffset();
+                var utcDate = moment(date, 'YYYY-MM-DDTHH:mm:ss').utcOffset(offsetValue).utc(false);
+                return utcDate;
+              },
+            },
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: 'Timestamp',
+            },
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+            },
+            scaleLabel: {
+              display: true,
+              labelString: 'Value',
+            },
+          }],
+        },
+      }} />
+    </div>
+  );
+};
+
+export const sortDataByTimeStamp = <T extends ITimeStamp>(_rows: T[]): T[] => {
+  return (_rows.sort((a, b) => {
+    const result = Date.parse(a.timeStamp) - Date.parse(b.timeStamp);
+    return isNaN(result) ? 0 : result;
+  }));
+};
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts
new file mode 100644
index 000000000..37fe962dc
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts
@@ -0,0 +1,36 @@
+/**
+ * ============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 { ColumnModel, ColumnType } from '../../../../framework/src/components/material-table';
+
+import { PmDataInterval } from '../models/performanceDataType';
+import { getPmDataInterval } from '../pluginPerformance';
+
+export const addColumnLabels = <T>(name: string, title: string, disableFilter = true, disableSorting = true): ColumnModel<T> => {
+  return { property: name as keyof T, title: title, type: ColumnType.text, disableFilter: disableFilter, disableSorting: disableSorting };
+};
+
+export function getFilter(): string {
+  switch (getPmDataInterval()) {
+    case PmDataInterval.pmInterval15Min:
+      return 'pmdata-15m';
+    case PmDataInterval.pmInterval24Hours:
+      return 'pmdata-24h';
+    default:
+      throw new Error('Unknown time intervall');
+  }
+}
+\ No newline at end of file
diff --git a/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
new file mode 100644
index 000000000..a4b968622
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -0,0 +1,456 @@
+/**
+ * ============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 { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+
+
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+import { Dispatch } from '../../../../framework/src/flux/store';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { loadAllDeviceListAsync } from '../actions/deviceListActions';
+import { loadDistinctLtpsbyNetworkElementAsync, ResetLtpsAction } from '../actions/ltpAction';
+import { SetPanelAction } from '../actions/panelChangeActions';
+import { TimeChangeAction } from '../actions/timeChangeAction';
+import AdaptiveModulation from '../components/adaptiveModulation';
+import CrossPolarDiscrimination from '../components/crossPolarDiscrimination';
+import PerformanceData from '../components/performanceData';
+import ReceiveLevel from '../components/receiveLevel';
+import SignalToInterference from '../components/signalToInterference';
+import Temperature from '../components/temperature';
+import TransmissionPower from '../components/transmissionPower';
+import { adaptiveModulationReloadAction, createAdaptiveModulationActions, createAdaptiveModulationPreActions } from '../handlers/adaptiveModulationHandler';
+import { createCrossPolarDiscriminationActions, createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction } from '../handlers/crossPolarDiscriminationHandler';
+import { createPerformanceDataActions, createPerformanceDataPreActions, performanceDataReloadAction } from '../handlers/performanceDataHandler';
+import { createReceiveLevelActions, createReceiveLevelPreActions, receiveLevelReloadAction } from '../handlers/receiveLevelHandler';
+import { createSignalToInterferenceActions, createSignalToInterferencePreActions, signalToInterferenceReloadAction } from '../handlers/signalToInterferenceHandler';
+import { createTemperatureActions, createTemperaturePreActions, temperatureReloadAction } from '../handlers/temperatureHandler';
+import { createTransmissionPowerActions, createTransmissionPowerPreActions, transmissionPowerReloadAction } from '../handlers/transmissionPowerHandler';
+import { PanelId } from '../models/panelId';
+import { PmDataInterval } from '../models/performanceDataType';
+
+import { AppBar, SelectChangeEvent, Tab, Tabs } from '@mui/material';
+import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { ReloadAction } from '../actions/reloadAction';
+import { ResetAllSubViewsAction } from '../actions/toggleActions';
+import LtpSelection from '../components/ltpSelection';
+
+const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing(1),
+  },
+});
+
+const mapProps = (state: IApplicationStoreState) => ({
+  ...state.performanceHistory,
+  activePanel: state.performanceHistory.currentOpenPanel,
+  availableLtps: state.performanceHistory.ltps.distinctLtps,
+  networkElements: state.performanceHistory.networkElements.deviceList,
+  initialLoaded: state.performanceHistory.ltps.loadedOnce,
+  error: state.performanceHistory.ltps.error,
+  shouldReload: state.performanceHistory.isReloadSchedueled,
+});
+
+const mapDispatcher = (dispatcher: IDispatcher) => ({
+  enableFilterPerformanceData: createPerformanceDataActions(dispatcher.dispatch),
+  enableFilterReceiveLevel: createReceiveLevelActions(dispatcher.dispatch),
+  enableFilterTransmissionPower: createTransmissionPowerActions(dispatcher.dispatch),
+  enableFilterAdaptiveModulation: createAdaptiveModulationActions(dispatcher.dispatch),
+  enableFilterTemperature: createTemperatureActions(dispatcher.dispatch),
+  enableFilterSinr: createSignalToInterferenceActions(dispatcher.dispatch),
+  enableFilterCpd: createCrossPolarDiscriminationActions(dispatcher.dispatch),
+  reloadPerformanceData: () => dispatcher.dispatch(performanceDataReloadAction),
+  reloadReceiveLevel: () => dispatcher.dispatch(receiveLevelReloadAction),
+  reloadTransmissionPower: () => dispatcher.dispatch(transmissionPowerReloadAction),
+  reloadAdaptiveModulation: () => dispatcher.dispatch(adaptiveModulationReloadAction),
+  reloadTemperature: () => dispatcher.dispatch(temperatureReloadAction),
+  reloadSignalToInterference: () => dispatcher.dispatch(signalToInterferenceReloadAction),
+  reloadCrossPolarDiscrimination: () => dispatcher.dispatch(crossPolarDiscriminationReloadAction),
+  performanceDataPreActions: createPerformanceDataPreActions(dispatcher.dispatch),
+  receiveLevelPreActions: createReceiveLevelPreActions(dispatcher.dispatch),
+  transmissionPowerPreActions: createTransmissionPowerPreActions(dispatcher.dispatch),
+  adaptiveModulationPreActions: createAdaptiveModulationPreActions(dispatcher.dispatch),
+  temperaturePreActions: createTemperaturePreActions(dispatcher.dispatch),
+  signalToInterferencePreActions: createSignalToInterferencePreActions(dispatcher.dispatch),
+  crossPolarDiscriminationPreActions: createCrossPolarDiscriminationPreActions(dispatcher.dispatch),
+  getAllDevicesPMdata: async () => {
+    await dispatcher.dispatch(loadAllDeviceListAsync);
+  },
+  getDistinctLtpsIds: (
+    selectedNetworkElement: string, 
+    selectedTimePeriod: string, 
+    selectedLtp: string, 
+    selectFirstLtp?: Function, 
+    resetLTP?: Function,
+  ) => dispatcher.dispatch(loadDistinctLtpsbyNetworkElementAsync(selectedNetworkElement, selectedTimePeriod, selectedLtp, selectFirstLtp, resetLTP)),
+  setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
+  timeIntervalChange: (time: PmDataInterval) => dispatcher.dispatch(new TimeChangeAction(time)),
+  changeNode: (nodeId: string) => dispatcher.dispatch((dispatch: Dispatch) => {
+    dispatch(new NavigateToApplication('performanceHistory', nodeId));
+  }),
+  resetLtps: () => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new ResetLtpsAction()); }),
+  resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()),
+  setShouldReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show)),
+});
+
+export type NetworkElementType = {
+  nodeId: string;
+};
+
+const NetworkElementTable = MaterialTable as MaterialTableCtorType<NetworkElementType>;
+
+type PerformanceHistoryComponentProps = Connect<typeof mapProps, typeof mapDispatcher> & WithStyles<typeof PerformanceHistoryComponentStyles>;
+
+type PerformanceHistoryComponentState = {
+  selectedNetworkElement: string;
+  selectedTimePeriod: string;
+  selectedLtp: string;
+  showNetworkElementsTable: boolean;
+  showLtps: boolean;
+  showPanels: boolean;
+  preFilter:
+  {
+    'node-name': string;
+    'uuid-interface': string;
+  } | {};
+};
+
+/**
+* Represents the component for Performance history application.
+*/
+class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComponentProps, PerformanceHistoryComponentState> {
+  /**
+  * Initialises this instance
+  */
+  constructor(props: PerformanceHistoryComponentProps) {
+    super(props);
+    this.state = {
+      selectedNetworkElement: props.nodeId !== '' ? props.nodeId : '-1',
+      selectedTimePeriod: '15min',
+      selectedLtp: '-1',
+      showNetworkElementsTable: true,
+      showLtps: false,
+      showPanels: false,
+      preFilter: {},
+    };
+  }
+
+  onChangeTabs = (event: React.SyntheticEvent, newValue: PanelId) => {
+    const nextActivePanel = newValue;
+    this.changeTabs(nextActivePanel);
+  };
+
+  changeTabs = (nextActivePanel: PanelId) => {
+    this.props.setCurrentPanel(nextActivePanel);
+    const preFilter = this.state.preFilter;
+    switch (nextActivePanel) {
+      case 'PerformanceData':
+        if (this.props.performanceData.preFilter !== {} && this.props.performanceData.preFilter === preFilter) {
+          this.props.reloadPerformanceData();
+        } else {
+          this.props.performanceDataPreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      case 'ReceiveLevel':
+        if (this.props.receiveLevel.preFilter !== {} && this.props.receiveLevel.preFilter === preFilter) {
+          this.props.reloadReceiveLevel();
+        } else {
+          this.props.receiveLevelPreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      case 'TransmissionPower':
+        if (this.props.transmissionPower.preFilter !== {} && this.props.transmissionPower.preFilter === preFilter) {
+          this.props.reloadTransmissionPower();
+        } else {
+          this.props.transmissionPowerPreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      case 'AdaptiveModulation':
+        if (this.props.adaptiveModulation.preFilter !== {} && this.props.adaptiveModulation.preFilter === preFilter) {
+          this.props.reloadAdaptiveModulation();
+        } else {
+          this.props.adaptiveModulationPreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      case 'Temperature':
+        if (this.props.temperature.preFilter !== {} && this.props.temperature.preFilter === preFilter) {
+          this.props.reloadTemperature();
+        } else {
+          this.props.temperaturePreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      case 'SINR':
+        if (this.props.signalToInterference.preFilter !== {} && this.props.signalToInterference.preFilter === preFilter) {
+          this.props.reloadSignalToInterference();
+        } else {
+          this.props.signalToInterferencePreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      case 'CPD':
+        if (this.props.crossPolarDiscrimination.preFilter !== {} && this.props.crossPolarDiscrimination.preFilter === preFilter) {
+          this.props.reloadCrossPolarDiscrimination();
+        } else {
+          this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(preFilter);
+        }
+        break;
+      default:
+        // do nothing if all panels are closed
+        break;
+    }
+  };
+
+  render(): JSX.Element {
+    const { activePanel, nodeId } = this.props;
+    if (nodeId === '') {
+      return (
+        <>
+          <NetworkElementTable tableId="performance-data-element-selection-table" defaultSortColumn={'nodeId'} defaultSortOrder="asc" stickyHeader title={'Please select the network element!'} idProperty={'nodeId'} rows={this.props.networkElements} asynchronus
+            onHandleClick={(event, rowData) => { this.handleNetworkElementSelect(rowData.nodeId); }} columns={
+              [{ property: 'nodeId', title: 'Node Name' }]
+            } />
+        </>
+      );
+    } else {
+      this.handleURLChange(nodeId);
+      return (
+        <>
+          {this.state.showLtps &&
+
+            <LtpSelection error={this.props.error} selectedNE={this.state.selectedNetworkElement} selectedLtp={this.state.selectedLtp} selectedTimePeriod={this.state.selectedTimePeriod}
+              availableLtps={this.props.availableLtps} finishedLoading={this.props.initialLoaded} onChangeTimePeriod={this.handleTimePeriodChange}
+              onChangeLtp={this.handleLtpChange}
+            />
+          }
+          {this.state.showPanels &&
+            <>
+
+              <AppBar enableColorOnDark position="static" >
+                <Tabs indicatorColor="secondary" textColor="inherit" value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance-data-tabs">
+                  <Tab label="Performance Data" value="PerformanceData" aria-label="performance-data" />
+                  <Tab label="Receive Level" value="ReceiveLevel" aria-label="receive-level" />
+                  <Tab label="Transmission Power" value="TransmissionPower" aria-label="transmission-power" />
+                  <Tab label="Adaptive Modulation" value="AdaptiveModulation" aria-label="adaptive-modulation" />
+                  <Tab label="Temperature" value="Temperature" aria-label="temperature"  />
+                  <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" aria-label="sinr" />
+                  <Tab label="Cross Polar Discrimination" value="CPD" aria-label="cross-polar-discrimination" />
+                </Tabs>
+              </AppBar>
+              {
+                activePanel === 'PerformanceData' &&
+                <PerformanceData selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+
+              {
+                activePanel === 'ReceiveLevel' &&
+                <ReceiveLevel selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+
+              {
+                activePanel === 'TransmissionPower' &&
+                <TransmissionPower selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+
+              {
+                activePanel === 'AdaptiveModulation' &&
+                <AdaptiveModulation selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+              {
+                activePanel === 'Temperature' &&
+                <Temperature selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+
+              {
+                activePanel === 'SINR' &&
+                <SignalToInterference selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+
+              {
+                activePanel === 'CPD' &&
+                <CrossPolarDiscrimination selectedTimePeriod={this.state.selectedTimePeriod} />
+              }
+            </>
+          }
+        </>
+      );
+    }
+  }
+
+
+  public componentDidMount() {
+    this.props.setCurrentPanel(null);
+    this.props.getAllDevicesPMdata();
+  }
+
+  /**
+  * Function which selects the first ltp returned from the database on selection of network element.
+  */
+  private selectFirstLtp = (firstLtp: string) => {
+    this.setState({
+      showPanels: true,
+      selectedLtp: firstLtp,
+    });
+    this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, firstLtp);
+    this.changeTabs('PerformanceData');
+  };
+
+  /**
+  * A function which reloads the visible table, if available, based on prefilters defined by network element and ltp on selected time period.
+  */
+  private preFilterChangeAndReload = (networkElement: string, timePeriod: string, ltp: string) => {
+    const newPreFilter = {
+      'node-name': networkElement,
+      'uuid-interface': ltp,
+    };
+
+    const activePanel = this.props.activePanel;
+
+    if (this.props.activePanel !== null) {
+      // set prefilter and reload data if panel is open
+
+      switch (activePanel) {
+        case 'PerformanceData':
+          this.props.performanceDataPreActions.onPreFilterChanged(newPreFilter);
+          break;
+        case 'ReceiveLevel':
+          this.props.receiveLevelPreActions.onPreFilterChanged(newPreFilter);
+          break;
+        case 'TransmissionPower':
+          this.props.transmissionPowerPreActions.onPreFilterChanged(newPreFilter);
+          break;
+        case 'AdaptiveModulation':
+          this.props.adaptiveModulationPreActions.onPreFilterChanged(newPreFilter);
+          break;
+        case 'Temperature':
+          this.props.temperaturePreActions.onPreFilterChanged(newPreFilter);
+          break;
+        case 'SINR':
+          this.props.signalToInterferencePreActions.onPreFilterChanged(newPreFilter);
+          break;
+        case 'CPD':
+          this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(newPreFilter);
+          break;
+        default:
+          // do nothing if all panels are closed
+          break;
+      }
+    }
+
+    // set prefilter
+    this.setState({ preFilter: newPreFilter });
+
+  };
+
+  /**
+   * Function which handles network element changes.
+   */
+  private handleNetworkElementSelect = (selectedNetworkElement: string) => {
+
+    this.setState({
+      showLtps: true,
+      selectedNetworkElement: selectedNetworkElement,
+      showNetworkElementsTable: false,
+      showPanels: false,
+      selectedLtp: '-1',
+    });
+
+    this.props.resetSubViews();
+    this.props.resetLtps();
+    this.setState({ preFilter: {} });
+    this.props.changeNode(selectedNetworkElement);
+    this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, '-1', this.selectFirstLtp);
+  };
+
+  private handleURLChange = (selectedNetworkElement: string) => {
+
+    if (this.props.shouldReload) {
+
+      this.setState({
+        showLtps: true,
+        selectedNetworkElement: selectedNetworkElement,
+        showPanels: false,
+        selectedLtp: '-1',
+      });
+      this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, '-1', this.selectFirstLtp);
+      this.props.setShouldReload(false);
+    }
+  };
+
+  /**
+    * Function which resets the ltps to "--select--" in the state if the passed parameter @ltpNotSelected is true.
+    * @param ltpNotSelected: true, if existing selected is not available in the given time period, else false
+    */
+  private resetLtpDropdown = (ltpNotSelected: boolean) => {
+    if (ltpNotSelected) {
+      this.setState({
+        selectedLtp: '-1',
+        showPanels: false,
+      });
+    }
+  };
+
+  /**
+  * Function which handles the time period changes.
+  */
+  private handleTimePeriodChange = (event: SelectChangeEvent<HTMLSelectElement>) => {
+
+    const selectedTimeInterval = event.target.value === '15min'
+      ? PmDataInterval.pmInterval15Min
+      : PmDataInterval.pmInterval24Hours;
+
+    this.setState({
+      selectedTimePeriod: event.target.value as string,
+    });
+
+    this.props.timeIntervalChange(selectedTimeInterval);
+    this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp, undefined, this.resetLtpDropdown);
+    this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp);
+  };
+
+  /**
+  * Function which handles the ltp changes.
+  */
+  private handleLtpChange = (event:SelectChangeEvent<HTMLSelectElement> ) => {
+
+    if (event.target.value === '-1') {
+      this.setState({
+        showPanels: false,
+        selectedLtp: event.target.value,
+      });
+
+    } else if (event.target.value !== this.state.selectedLtp) {
+      this.setState({
+        showPanels: true,
+        selectedLtp: event.target.value as string,
+      });
+      this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value as string);
+
+    }
+  };
+}
+
+const PerformanceHistoryApplication = withStyles(PerformanceHistoryComponentStyles)(connect(mapProps, mapDispatcher)(PerformanceHistoryComponent));
+export default PerformanceHistoryApplication;
author	Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>	2023-12-07 22:45:28 +0530
committer	Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>	2023-12-07 22:46:39 +0530
commit	dfd91573b7567e1dab482f17111ab8f809553d99 (patch)
tree	8368580d1b1add9cfef5e8354ccf1080f27109b0 /sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src
parent	bf8d701f85d02a140a1290d288adc7f437c1cc90 (diff)