1 files changed, 371 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
new file mode 100644
index 000000000..ae22f8041
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -0,0 +1,371 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+import * as React from 'react';
+
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
+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 { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+import { Dispatch } from '../../../../framework/src/flux/store';
+
+import { PanelId } from '../models/panelId';
+import { PmDataInterval } from '../models/performanceDataType';
+import PerformanceData from '../components/performanceData';
+import ReceiveLevel from '../components/receiveLevel';
+import TransmissionPower from '../components/transmissionPower';
+import AdaptiveModulation from '../components/adaptiveModulation';
+import Temperature from '../components/temperature';
+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 { SetPanelAction } from '../actions/panelChangeActions';
+import { createPerformanceDataPreActions, performanceDataReloadAction, createPerformanceDataActions } from '../handlers/performanceDataHandler';
+import { createReceiveLevelPreActions, receiveLevelReloadAction, createReceiveLevelActions } from '../handlers/receiveLevelHandler';
+import { createTransmissionPowerPreActions, transmissionPowerReloadAction, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler';
+import { createAdaptiveModulationPreActions, adaptiveModulationReloadAction, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler';
+import { createTemperaturePreActions, temperatureReloadAction, createTemperatureActions } from '../handlers/temperatureHandler';
+import { createSignalToInterferencePreActions, signalToInterferenceReloadAction, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler';
+import { createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler';
+
+import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+
+const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  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"]),
+  }
+});
+
+const mapProps = (state: IApplicationStoreState) => ({
+  ...state.performanceHistory,
+  activePanel: state.performanceHistory.currentOpenPanel,
+  availableLtps: state.performanceHistory.ltps.distinctLtps,
+  networkElements: state.performanceHistory.networkElements.deviceList,
+});
+
+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));
+  })
+});
+
+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
+};
+
+/**
+* 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: "-1",
+      selectedTimePeriod: "15min",
+      selectedLtp: "-1",
+      showNetworkElementsTable: true,
+      showLtps: false,
+      showPanels: false
+    };
+  }
+
+  onTogglePanel = (panelId: PanelId) => {
+    const nextActivePanel = panelId === this.props.activePanel ? null : panelId;
+    this.props.setCurrentPanel(nextActivePanel);
+    switch (nextActivePanel) {
+      case "PerformanceData":
+        this.props.reloadPerformanceData();
+        break;
+      case "ReceiveLevel":
+        this.props.reloadReceiveLevel();
+        break;
+      case "TransmissionPower":
+        this.props.reloadTransmissionPower();
+        break;
+      case "AdaptiveModulation":
+        this.props.reloadAdaptiveModulation();
+        break;
+      case "Temperature":
+        this.props.reloadTemperature();
+        break;
+      case "SINR":
+        this.props.reloadSignalToInterference();
+        break;
+      case "CPD":
+        this.props.reloadCrossPolarDiscrimination();
+        break;
+      default:
+        // do nothing if all panels are closed
+        break;
+    }
+  }
+
+  render(): JSX.Element {
+    const { classes } = this.props;
+    const { activePanel, nodeId } = this.props;
+    if (nodeId === "") {
+      return (
+        <>
+          <NetworkElementTable 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 {
+      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>
+          )}
+        </>
+      );
+    }
+  };
+
+  public componentDidMount() {
+    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();
+  }
+
+  /**
+  * 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);
+  }
+
+  /**
+  * A function which loads the tables based on prefilters defined by network element and ltp on selected time period.
+  */
+  private preFilterChangeAndReload = (networkElement: string, timePeriod: string, ltp: string) => {
+    const preFilter = {
+      "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);
+
+  }
+
+  /**
+   * Function which handles network element changes.
+   */
+  private handleNetworkElementSelect = (selectedNetworkElement: string) => {
+
+    this.setState({
+      showLtps: true,
+      selectedNetworkElement: selectedNetworkElement,
+      showNetworkElementsTable: false,
+      showPanels: false,
+      selectedLtp: "-1"
+    });
+    this.props.changeNode(selectedNetworkElement);
+    this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
+  }
+
+  private handleURLChange = (selectedNetworkElement: string) => {
+    if (selectedNetworkElement !== this.state.selectedNetworkElement) {
+      this.setState({
+        showLtps: true,
+        selectedNetworkElement: selectedNetworkElement,
+        showPanels: false,
+        selectedLtp: "-1"
+      });
+      this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
+    }
+  }
+
+  /**
+    * 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",
+      });
+    }
+  }
+
+  /**
+  * Function which handles the time period changes.
+  */
+  private handleTimePeriodChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedTimeInterval = event.target.value === "15min"
+      ? PmDataInterval.pmInterval15Min
+      : 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);
+  }
+
+  /**
+  * 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: showPanels,
+      selectedLtp: event.target.value
+    });
+    this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value);
+  }
+}
+
+const PerformanceHistoryApplication = withStyles(PerformanceHistoryComponentStyles)(connect(mapProps, mapDispatcher)(PerformanceHistoryComponent));
+export default PerformanceHistoryApplication;