Update odlux

Update performance app: fix scrolling bug, reduce loading times, update ui to use tabs instead of panels, change the view to toggle between chart and table to better visualize data, minior bugfixes for other apps

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

1 files changed, 186 insertions, 100 deletions

diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
index ae22f8041..4984e80c3 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -24,7 +24,7 @@ import Select from '@material-ui/core/Select';
 
 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import { Panel } from '../../../../framework/src/components/material-ui';
+import { Panel, Loader } from '../../../../framework/src/components/material-ui';
 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
 import { Dispatch } from '../../../../framework/src/flux/store';
 
@@ -39,7 +39,7 @@ import SignalToInterference from '../components/signalToInterference';
 import CrossPolarDiscrimination from '../components/crossPolarDiscrimination';
 import { loadAllDeviceListAsync } from '../actions/deviceListActions';
 import { TimeChangeAction } from '../actions/timeChangeAction';
-import { loadDistinctLtpsbyNetworkElementAsync } from '../actions/ltpAction';
+import { loadDistinctLtpsbyNetworkElementAsync, SetInitialLoadedAction } from '../actions/ltpAction';
 import { SetPanelAction } from '../actions/panelChangeActions';
 import { createPerformanceDataPreActions, performanceDataReloadAction, createPerformanceDataActions } from '../handlers/performanceDataHandler';
 import { createReceiveLevelPreActions, receiveLevelReloadAction, createReceiveLevelActions } from '../handlers/receiveLevelHandler';
@@ -50,6 +50,9 @@ import { createSignalToInterferencePreActions, signalToInterferenceReloadAction,
 import { createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler';
 
 import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { AppBar, Tabs, Tab } from '@material-ui/core';
+import LtpSelection from '../components/ltpSelection';
+import { ResetAllSubViewsAction } from '../actions/toggleActions';
 
 const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
   root: {
@@ -58,19 +61,6 @@ const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
   },
   margin: {
     margin: theme.spacing(1),
-  },
-  display: {
-    display: "inline-block"
-  },
-  selectDropdown: {
-    borderRadius: 1,
-    position: "relative",
-    backgroundColor: theme.palette.background.paper,
-    border: "1px solid #ced4da",
-    fontSize: 16,
-    width: "auto",
-    padding: "5px 26px 5px 12px",
-    transition: theme.transitions.create(["border-color", "box-shadow"]),
   }
 });
 
@@ -79,6 +69,7 @@ const mapProps = (state: IApplicationStoreState) => ({
   activePanel: state.performanceHistory.currentOpenPanel,
   availableLtps: state.performanceHistory.ltps.distinctLtps,
   networkElements: state.performanceHistory.networkElements.deviceList,
+  initialLoaded: state.performanceHistory.ltps.loadedOnce
 });
 
 const mapDispatcher = (dispatcher: IDispatcher) => ({
@@ -111,7 +102,9 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({
   timeIntervalChange: (time: PmDataInterval) => dispatcher.dispatch(new TimeChangeAction(time)),
   changeNode: (nodeId: string) => dispatcher.dispatch((dispatch: Dispatch) => {
     dispatch(new NavigateToApplication("performanceHistory", nodeId));
-  })
+  }),
+  setInitialLoaded: (isLoaded: boolean) => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new SetInitialLoadedAction(isLoaded)); }),
+  resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction())
 });
 
 export type NetworkElementType = {
@@ -127,7 +120,12 @@ type PerformanceHistoryComponentState = {
   selectedLtp: string,
   showNetworkElementsTable: boolean,
   showLtps: boolean,
-  showPanels: boolean
+  showPanels: boolean,
+  preFilter:
+  {
+    "node-name": string,
+    "uuid-interface": string
+  } | {}
 };
 
 /**
@@ -145,34 +143,70 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
       selectedLtp: "-1",
       showNetworkElementsTable: true,
       showLtps: false,
-      showPanels: false
+      showPanels: false,
+      preFilter: {}
     };
   }
 
-  onTogglePanel = (panelId: PanelId) => {
-    const nextActivePanel = panelId === this.props.activePanel ? null : panelId;
+  onChangeTabs = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+    const nextActivePanel = newValue;
+    this.changeTabs(nextActivePanel);
+  }
+
+  changeTabs = (nextActivePanel: PanelId) => {
     this.props.setCurrentPanel(nextActivePanel);
+    const preFilter = this.state.preFilter;
     switch (nextActivePanel) {
       case "PerformanceData":
-        this.props.reloadPerformanceData();
+        if (this.props.performanceData.preFilter !== {} && this.props.performanceData.preFilter === preFilter) {
+          this.props.reloadPerformanceData();
+        } else {
+          this.props.performanceDataPreActions.onPreFilterChanged(preFilter);
+        }
         break;
       case "ReceiveLevel":
-        this.props.reloadReceiveLevel();
+        if (this.props.receiveLevel.preFilter !== {} && this.props.receiveLevel.preFilter === preFilter) {
+          this.props.reloadReceiveLevel();
+        }
+        else {
+          this.props.receiveLevelPreActions.onPreFilterChanged(preFilter);
+        }
         break;
       case "TransmissionPower":
-        this.props.reloadTransmissionPower();
+        if (this.props.transmissionPower.preFilter !== {} && this.props.transmissionPower.preFilter === preFilter) {
+          this.props.reloadTransmissionPower();
+        }
+        else {
+          this.props.transmissionPowerPreActions.onPreFilterChanged(preFilter);
+        }
         break;
       case "AdaptiveModulation":
-        this.props.reloadAdaptiveModulation();
+        if (this.props.adaptiveModulation.preFilter !== {} && this.props.adaptiveModulation.preFilter === preFilter) {
+          this.props.reloadAdaptiveModulation();
+        } else {
+          this.props.adaptiveModulationPreActions.onPreFilterChanged(preFilter);
+        }
         break;
       case "Temperature":
-        this.props.reloadTemperature();
+        if (this.props.temperature.preFilter !== {} && this.props.temperature.preFilter === preFilter) {
+          this.props.reloadTemperature();
+        } else {
+          this.props.temperaturePreActions.onPreFilterChanged(preFilter);
+        }
         break;
       case "SINR":
-        this.props.reloadSignalToInterference();
+        if (this.props.signalToInterference.preFilter !== {} && this.props.signalToInterference.preFilter === preFilter) {
+          this.props.reloadSignalToInterference();
+        } else {
+          this.props.signalToInterferencePreActions.onPreFilterChanged(preFilter);
+        }
         break;
       case "CPD":
-        this.props.reloadCrossPolarDiscrimination();
+        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
@@ -181,7 +215,6 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
   }
 
   render(): JSX.Element {
-    const { classes } = this.props;
     const { activePanel, nodeId } = this.props;
     if (nodeId === "") {
       return (
@@ -194,59 +227,70 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
       )
     }
     else {
-      3
       this.handleURLChange(nodeId);
       return (
         <>
-          <h3>Selected Network Element: {this.state.selectedNetworkElement} </h3>
-          {this.state.showLtps && (
-            <div>
-              <FormControl className={classes.display}>
-                <span>
-                  Select LTP
-                </span>
-                <Select className={classes.selectDropdown} value={this.state.selectedLtp} onChange={this.handleLtpChange}  >
-                  <MenuItem value={"-1"}><em>--Select--</em></MenuItem>
-                  {this.props.availableLtps.map(ltp =>
-                    (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))}
-                </Select>
-                <span> Time-Period </span>
-                <Select className={classes.selectDropdown} value={this.state.selectedTimePeriod} onChange={this.handleTimePeriodChange} >
-                  <MenuItem value={"15min"}>15min</MenuItem>
-                  <MenuItem value={"24hours"}>24hours</MenuItem>
-                </Select>
-              </FormControl>
-              {this.state.showPanels && (
-                <div>
-                  <Panel activePanel={activePanel} panelId={"PerformanceData"} onToggle={this.onTogglePanel} title={"Performance Data"}>
-                    <PerformanceData selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                  <Panel activePanel={activePanel} panelId={"ReceiveLevel"} onToggle={this.onTogglePanel} title={"Receive Level"}>
-                    <ReceiveLevel selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                  <Panel activePanel={activePanel} panelId={"TransmissionPower"} onToggle={this.onTogglePanel} title={"Transmission Power"}>
-                    <TransmissionPower selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                  <Panel activePanel={activePanel} panelId={"AdaptiveModulation"} onToggle={this.onTogglePanel} title={"Adaptive Modulation"}>
-                    <AdaptiveModulation selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                  <Panel activePanel={activePanel} panelId={"Temperature"} onToggle={this.onTogglePanel} title={"Temperature"}>
-                    <Temperature selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                  <Panel activePanel={activePanel} panelId={"SINR"} onToggle={this.onTogglePanel} title={"Signal-to-interference-plus-noise ratio (SINR)"}>
-                    <SignalToInterference selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                  <Panel activePanel={activePanel} panelId={"CPD"} onToggle={this.onTogglePanel} title={"Cross Polar Discrimination"}>
-                    <CrossPolarDiscrimination selectedTimePeriod={this.state.selectedTimePeriod} />
-                  </Panel>
-                </div>
-              )}
-            </div>
-          )}
+          {this.state.showLtps &&
+
+            <LtpSelection 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 position="static" >
+                <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance data tabs">
+                  <Tab label="Performance Data" value="PerformanceData" />
+                  <Tab label="Receive Level" value="ReceiveLevel" />
+                  <Tab label="Transmission Power" value="TransmissionPower" />
+                  <Tab label="Adaptive Modulation" value="AdaptiveModulation" />
+                  <Tab label="Temperature" value="Temperature" />
+                  <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" />
+                  <Tab label="Cross Polar Discrimination" value="CPD" />
+                </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.getAllDevicesPMdata();
@@ -257,6 +301,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
     this.props.enableFilterAdaptiveModulation.onToggleFilter();
     this.props.enableFilterSinr.onToggleFilter();
     this.props.enableFilterCpd.onToggleFilter();
+    this.props.setInitialLoaded(false);
+    this.props.resetSubViews();
   }
 
   /**
@@ -268,23 +314,53 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
       selectedLtp: firstLtp
     });
     this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, firstLtp);
+    this.changeTabs("PerformanceData");
   }
 
   /**
-  * A function which loads the tables based on prefilters defined by network element and ltp on selected time period.
+  * 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 preFilter = {
+    const newPreFilter = {
       "node-name": networkElement,
       "uuid-interface": ltp
     };
-    this.props.performanceDataPreActions.onPreFilterChanged(preFilter);
-    this.props.receiveLevelPreActions.onPreFilterChanged(preFilter);
-    this.props.transmissionPowerPreActions.onPreFilterChanged(preFilter);
-    this.props.adaptiveModulationPreActions.onPreFilterChanged(preFilter);
-    this.props.temperaturePreActions.onPreFilterChanged(preFilter);
-    this.props.signalToInterferencePreActions.onPreFilterChanged(preFilter);
-    this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(preFilter);
+
+    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 })
 
   }
 
@@ -300,12 +376,19 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
       showPanels: false,
       selectedLtp: "-1"
     });
+
+    this.props.setInitialLoaded(false);
+    this.props.resetSubViews();
+    this.setState({ preFilter: {} });
     this.props.changeNode(selectedNetworkElement);
     this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
   }
 
   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
       this.setState({
         showLtps: true,
         selectedNetworkElement: selectedNetworkElement,
@@ -324,6 +407,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
     if (ltpNotSelected) {
       this.setState({
         selectedLtp: "-1",
+        showPanels: false
       });
     }
   }
@@ -332,21 +416,16 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
   * Function which handles the time period changes.
   */
   private handleTimePeriodChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+
     const selectedTimeInterval = event.target.value === "15min"
       ? PmDataInterval.pmInterval15Min
-      : PmDataInterval.pmInterval24Hours
+      : PmDataInterval.pmInterval24Hours;
 
     this.setState({
       selectedTimePeriod: event.target.value,
     });
+
     this.props.timeIntervalChange(selectedTimeInterval);
-    this.props.reloadPerformanceData();
-    this.props.reloadReceiveLevel();
-    this.props.reloadTransmissionPower();
-    this.props.reloadAdaptiveModulation();
-    this.props.reloadTemperature();
-    this.props.reloadSignalToInterference();
-    this.props.reloadCrossPolarDiscrimination();
     this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
     this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp);
   }
@@ -355,15 +434,22 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
   * Function which handles the ltp changes.
   */
   private handleLtpChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    var showPanels: boolean = true;
+
     if (event.target.value === "-1") {
-      showPanels = false;
+      this.setState({
+        showPanels: false,
+        selectedLtp: event.target.value
+      });
+      this.props.setCurrentPanel(null);
+
+    } else if (event.target.value !== this.state.selectedLtp) {
+      this.setState({
+        showPanels: true,
+        selectedLtp: event.target.value
+      });
+      this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value);
+
     }
-    this.setState({
-      showPanels: showPanels,
-      selectedLtp: event.target.value
-    });
-    this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value);
   }
 }