Bugfixes for PerformanceApp

Fix filter in table not always showing

Fix suspectInterval filter not linked between chart and table

Fix data not loaded problem

Issue-ID: SDNC-1118
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I7d1b71f094dfdd7cd16ed6f7fb5c597a7b209b69

13 files changed, 173 insertions, 56 deletions

diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts
new file mode 100644
index 000000000..7d6ecfe84
--- /dev/null
+++ b/sdnr/wt/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/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
index ca00d8214..f0a93f565 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -63,6 +63,12 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
     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;
@@ -82,7 +88,7 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
 
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.props.adaptiveModulationActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
           <AdaptiveModulationTable stickyHeader idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
         </ToggleContainer>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
index 280a1dac8..e5f540e19 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
@@ -1,3 +1,22 @@
+/**
+ * ============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 { makeStyles, TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
 
@@ -11,12 +30,15 @@ const styles = makeStyles({
 });
 
 type filterProps = { isVisible: boolean, onFilterChanged: (property: string, filterTerm: string) => void, filters: any };
-//put chart visibility into redux
+
 const ChartFilter: React.FunctionComponent<filterProps> = (props) => {
 
-    //get filter from redux state (just pass da object?), onfilterchange
+
     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 (
         <>
             {
@@ -34,7 +56,7 @@ const ChartFilter: React.FunctionComponent<filterProps> = (props) => {
                     <FormControl>
                         <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel>
 
-                        <Select labelId="suspect-interval-label" value={props.filters.suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
+                        <Select labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
                             <MenuItem value={undefined}>None</MenuItem>
                             <MenuItem value={"true"}>true</MenuItem>
                             <MenuItem value={"false"}>false</MenuItem>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
index a8c6ed78d..60051d03e 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -65,6 +65,12 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
     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;
@@ -85,7 +91,7 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
     });
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.props.crossPolarDiscriminationActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
           <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} />
         </ToggleContainer>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
index 0a4f03273..28352cd31 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -58,6 +58,12 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
     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;
@@ -77,7 +83,7 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
     });
     return (
       <>
-        <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.props.performanceDataActions.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}>
+        <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}>
           {lineChart(chartPagedData)}
           <PerformanceDataTable stickyHeader idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} />
         </ToggleContainer>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
index ae729306b..720fb946e 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -64,6 +64,12 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
     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;
@@ -84,7 +90,7 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
 
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.props.receiveLevelActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <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"} columns={receiveLevelColumns} {...properties} {...actions} />
         </ToggleContainer>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
index 00eba5fe3..4b34019ae 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -63,6 +63,12 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
     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;
@@ -83,7 +89,7 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
     });
     return (
       <>
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.props.signalToInterferenceActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
           {lineChart(chartPagedData)}
           <SignalToInterferenceTable stickyHeader idProperty={"_id"} columns={sinrColumns} {...properties} {...actions}
           />
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
index c0d12ee47..2484a8cfb 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -65,6 +65,12 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
     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;
@@ -85,7 +91,7 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
     return (
       <>
 
-        <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.props.temperatureActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
+        <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"} columns={temperatureColumns} {...properties} {...actions} />
         </ToggleContainer>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
index 618dddfc8..6014b22e4 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
@@ -41,15 +41,6 @@ const styles = makeStyles({
     }
 });
 
-type filterType = {
-    onRefresh: () => void;
-    onHandleRequestSort: (orderBy: string) => void;
-    onToggleFilter: () => void;
-    onFilterChanged: (property: string, filterTerm: string) => void;
-    onHandleChangePage: (page: number) => void;
-    onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void;
-};
-
 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) => {
@@ -68,9 +59,6 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
 
     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} >
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
index d89aca052..e44ffe077 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -65,6 +65,12 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
     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
@@ -86,7 +92,7 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
 
     return (
       <>
-        <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.props.transmissionPowerActions.onFilterChanged} selectedValue={this.props.currentView} >
+        <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} >
           {lineChart(chartPagedData)}
           <TransmissionPowerTable stickyHeader idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} />
         </ToggleContainer>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
index 6b9081502..a05ff3787 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
@@ -39,6 +39,7 @@ import { TimeChangeAction } from '../actions/timeChangeAction';
 import { UpdateMountId } from '../actions/deviceListActions';
 import { SetSubViewAction, ResetAllSubViewsAction, SetFilterVisibility } from '../actions/toggleActions';
 import { SubTabType, currentViewType } from '../models/toggleDataType';
+import { ReloadAction } from '../actions/reloadAction';
 
 export interface IPerformanceHistoryStoreState {
   nodeId: string;
@@ -54,6 +55,7 @@ export interface IPerformanceHistoryStoreState {
   currentOpenPanel: string | null;
   pmDataIntervalType: PmDataInterval;
   subViews: toggleViewDataType;
+  isReloadSchedueled: boolean;
 }
 
 const mountIdHandler: IActionHandler<string> = (state = "", action) => {
@@ -66,6 +68,14 @@ const mountIdHandler: IActionHandler<string> = (state = "", action) => {
   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) {
@@ -146,7 +156,8 @@ const actionHandlers = {
   crossPolarDiscrimination: crossPolarDiscriminationActionHandler,
   currentOpenPanel: currentOpenPanelHandler,
   pmDataIntervalType: currentPMDataIntervalHandler,
-  subViews: toogleViewDataHandler
+  subViews: toogleViewDataHandler,
+  isReloadSchedueled: reloadHandler
 };
 
 const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx
index df3ffd90a..a8aaca22f 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx
@@ -30,6 +30,9 @@ import { ApplicationStore } from '../../../framework/src/store/applicationStore'
 import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect';
 import { IApplicationStoreState } from "../../../framework/src/store/applicationStore";
 import { updateMountIdActionCreator } from "./actions/deviceListActions";
+import { ResetAllSubViewsAction } from "./actions/toggleActions";
+import { ResetLtpsAction } from "./actions/ltpAction";
+import { ReloadAction } from "./actions/reloadAction";
 
 let api: {
   readonly applicationStore: ApplicationStore | null;
@@ -40,31 +43,63 @@ const mapProps = (state: IApplicationStoreState) => ({
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
-  updateMountId: (mountId: string) => dispatcher.dispatch(updateMountIdActionCreator(mountId))
+  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>) => {
+const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDisp>) => {
   let mountId: string = "";
-  if (props.location.pathname !== lastUrl) {
-    // ensure the asynchronus update will only be called once per path
+
+  // called when component finshed mounting
+  React.useEffect(() => {
+
+    lastUrl = props.location.pathname;
+    mountId = getMountId(lastUrl);
+
+    if (currentMountId !== mountId) { // new element is loaded
+      currentMountId = mountId;
+      schedueleReload(currentMountId);
+    } else
+      if (currentMountId !== "") { // same element is loaded again
+        schedueleReload(currentMountId);
+      }
+  }, []);
+
+  // called when component gets updated
+  React.useEffect(() => {
+
     lastUrl = props.location.pathname;
+    mountId = getMountId(lastUrl);
+
+    if (currentMountId !== mountId) {
+      currentMountId = mountId;
+      schedueleReload(currentMountId);
+    }
+
+  });
+
+  const getMountId = (lastUrl: string) => {
     let index = lastUrl.lastIndexOf("performanceHistory/");
-    if(index >= 0) {
-      mountId = lastUrl.substr(index+19);
+    if (index >= 0) {
+      mountId = lastUrl.substr(index + 19);
     } else {
       mountId = "";
     }
 
-    window.setTimeout(async () => {
-      // check if the mountId has changed
-      if (currentMountId !== mountId) {
-        currentMountId = mountId;
-        await props.updateMountId(currentMountId);
-      }
-    });
+    return mountId;
+  }
+
+  const schedueleReload = (currentMountId: string) => {
+    props.updateMountId(currentMountId);
+    props.resetLtps();
+    props.resetSubViews();
+    props.setScheduleReload(true);
   }
+
   return (
     <PerformanceHistoryApplication />
   );
@@ -73,11 +108,11 @@ const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((pr
 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>
+    <Switch>
+      <Route path={`${props.match.path}/:mountId`} component={PerformanceHistoryApplicationRouteAdapter} />
+      <Route path={`${props.match.path}`} component={PerformanceHistoryApplicationRouteAdapter} />
+      <Redirect to={`${props.match.path}`} />
+    </Switch>
   )
 });
 
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
index 4a1c654fb..f19058cf2 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -53,6 +53,7 @@ import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/
 import { AppBar, Tabs, Tab } from '@material-ui/core';
 import LtpSelection from '../components/ltpSelection';
 import { ResetAllSubViewsAction } from '../actions/toggleActions';
+import { ReloadAction } from '../actions/reloadAction';
 
 const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
   root: {
@@ -70,7 +71,8 @@ const mapProps = (state: IApplicationStoreState) => ({
   availableLtps: state.performanceHistory.ltps.distinctLtps,
   networkElements: state.performanceHistory.networkElements.deviceList,
   initialLoaded: state.performanceHistory.ltps.loadedOnce,
-  error: state.performanceHistory.ltps.error
+  error: state.performanceHistory.ltps.error,
+  shouldReload: state.performanceHistory.isReloadSchedueled
 });
 
 const mapDispatcher = (dispatcher: IDispatcher) => ({
@@ -105,7 +107,8 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({
     dispatch(new NavigateToApplication("performanceHistory", nodeId));
   }),
   resetLtps: () => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new ResetLtpsAction()); }),
-  resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction())
+  resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()),
+  setShouldReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show))
 });
 
 export type NetworkElementType = {
@@ -220,7 +223,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
     if (nodeId === "") {
       return (
         <>
-          <NetworkElementTable stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus
+          <NetworkElementTable 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" }]
             } />
@@ -294,17 +297,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
 
 
   public componentDidMount() {
-    this.props.resetSubViews();
-    this.props.resetLtps();
     this.props.setCurrentPanel(null);
     this.props.getAllDevicesPMdata();
-    this.props.enableFilterPerformanceData.onToggleFilter();
-    this.props.enableFilterReceiveLevel.onToggleFilter();
-    this.props.enableFilterTransmissionPower.onToggleFilter();
-    this.props.enableFilterTemperature.onToggleFilter();
-    this.props.enableFilterAdaptiveModulation.onToggleFilter();
-    this.props.enableFilterSinr.onToggleFilter();
-    this.props.enableFilterCpd.onToggleFilter();
   }
 
   /**
@@ -388,9 +382,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
 
   private handleURLChange = (selectedNetworkElement: string) => {
 
-    if (selectedNetworkElement !== this.state.selectedNetworkElement) {
-      // gets called if page is reloaded / opened with a networkname in the url, 
-      // not if the selected networkelement is changed
+    if (this.props.shouldReload) {
+
       this.setState({
         showLtps: true,
         selectedNetworkElement: selectedNetworkElement,
@@ -398,6 +391,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
         selectedLtp: "-1"
       });
       this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
+      this.props.setShouldReload(false);
     }
   }