1 files changed, 363 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..12027e499
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -0,0 +1,363 @@
+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 { PanelId } from '../models/panelId';
+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 { loadAllConnectedNetworkElementsAsync } from '../actions/connectedNetworkElementsActions';
+import { loadDistinctLtpsbyNetworkElementAsync } from '../actions/ltpAction';
+import { SetPanelAction } from '../actions/panelChangeActions';
+import { createPerformanceData15minPreActions, performanceData15minReloadAction } from '../handlers/performanceData15minHandler';
+import { createPerformanceData24hoursPreActions, performanceData24hoursReloadAction } from '../handlers/performanceData24hoursHandler';
+import { createReceiveLevel15minPreActions, receiveLevel15minReloadAction } from '../handlers/receiveLevel15minHandler';
+import { createReceiveLevel24hoursPreActions, receiveLevel24hoursReloadAction } from '../handlers/receiveLevel24hoursHandler';
+import { createTransmissionPower15minPreActions, transmissionPower15minReloadAction } from '../handlers/transmissionPower15minHandler';
+import { createTransmissionPower24hoursPreActions, transmissionPower24hoursReloadAction } from '../handlers/transmissionPower24hoursHandler';
+import { createAdaptiveModulation15minPreActions, adaptiveModulation15minReloadAction } from '../handlers/adaptiveModulation15minHandler';
+import { createAdaptiveModulation24hoursPreActions, adaptiveModulation24hoursReloadAction } from '../handlers/adaptiveModulation24hoursHandler';
+import { createTemperature15minPreActions, temperature15minReloadAction } from '../handlers/temperature15minHandler';
+import { createTemperature24hoursPreActions, temperature24hoursReloadAction } from '../handlers/temperature24hoursHandler';
+import { createSignalToInterference15minPreActions, signalToInterference15minReloadAction } from '../handlers/signalToInterference15minHandler';
+import { createSignalToInterference24hoursPreActions, signalToInterference24hoursReloadAction } from '../handlers/signalToInterference24hoursHandler';
+import { createCrossPolarDiscrimination15minPreActions, crossPolarDiscrimination15minReloadAction } from '../handlers/crossPolarDiscrimination15minHandler';
+import { createCrossPolarDiscrimination24hoursPreActions, crossPolarDiscrimination24hoursReloadAction } from '../handlers/crossPolarDiscrimination24hoursHandler';
+
+const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  margin: {
+    margin: theme.spacing.unit,
+  },
+  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) => ({
+  activePanel: state.performanceHistory.currentOpenPanel,
+  availableLtps: state.performanceHistory.ltps.distinctLtps,
+  networkElements: state.performanceHistory.networkElements.connectedNetworkElements
+});
+
+const mapDispatcher = (dispatcher: IDispatcher) => ({
+  reloadPerformanceData15min: () => dispatcher.dispatch(performanceData15minReloadAction),
+  reloadPerformanceData24hours: () => dispatcher.dispatch(performanceData24hoursReloadAction),
+  reloadReceiveLevel15min: () => dispatcher.dispatch(receiveLevel15minReloadAction),
+  reloadReceiveLevel24hours: () => dispatcher.dispatch(receiveLevel24hoursReloadAction),
+  reloadTransmissionPower15min: () => dispatcher.dispatch(transmissionPower15minReloadAction),
+  reloadTransmissionPower24hours: () => dispatcher.dispatch(transmissionPower24hoursReloadAction),
+  reloadAdaptiveModulation15min: () => dispatcher.dispatch(adaptiveModulation15minReloadAction),
+  reloadAdaptiveModulation24hours: () => dispatcher.dispatch(adaptiveModulation24hoursReloadAction),
+  reloadTemperature15min: () => dispatcher.dispatch(temperature15minReloadAction),
+  reloadTemperature24hours: () => dispatcher.dispatch(temperature24hoursReloadAction),
+  reloadSignalToInterference15min: () => dispatcher.dispatch(signalToInterference15minReloadAction),
+  reloadSignalToInterference24hours: () => dispatcher.dispatch(signalToInterference24hoursReloadAction),
+  reloadCrossPolarDiscrimination15min: () => dispatcher.dispatch(crossPolarDiscrimination15minReloadAction),
+  reloadCrossPolarDiscrimination24hours: () => dispatcher.dispatch(crossPolarDiscrimination24hoursReloadAction),
+  performanceData15minPreActions: createPerformanceData15minPreActions(dispatcher.dispatch),
+  performanceData24hoursPreActions: createPerformanceData24hoursPreActions(dispatcher.dispatch),
+  receiveLevel15minPreActions: createReceiveLevel15minPreActions(dispatcher.dispatch),
+  receiveLevel24hoursPreActions: createReceiveLevel24hoursPreActions(dispatcher.dispatch),
+  transmissionPower15minPreActions: createTransmissionPower15minPreActions(dispatcher.dispatch),
+  transmissionPower24hoursPreActions: createTransmissionPower24hoursPreActions(dispatcher.dispatch),
+  adaptiveModulation15minPreActions: createAdaptiveModulation15minPreActions(dispatcher.dispatch),
+  adaptiveModulation24hoursPreActions: createAdaptiveModulation24hoursPreActions(dispatcher.dispatch),
+  temperature15minPreActions: createTemperature15minPreActions(dispatcher.dispatch),
+  temperature24hoursPreActions: createTemperature24hoursPreActions(dispatcher.dispatch),
+  signalToInterference15minPreActions: createSignalToInterference15minPreActions(dispatcher.dispatch),
+  signalToInterference24hoursPreActions: createSignalToInterference24hoursPreActions(dispatcher.dispatch),
+  crossPolarDiscrimination15minPreActions: createCrossPolarDiscrimination15minPreActions(dispatcher.dispatch),
+  crossPolarDiscrimination24hoursPreActions: createCrossPolarDiscrimination24hoursPreActions(dispatcher.dispatch),
+  getConnectedNetworkElements: () => dispatcher.dispatch(loadAllConnectedNetworkElementsAsync),
+  getDistinctLtps: (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))
+});
+
+type PerformanceHistoryComponentProps = Connect<typeof mapProps, typeof mapDispatcher> & WithStyles<typeof PerformanceHistoryComponentStyles>;
+
+type PerformanceHistoryComponentState = {
+  selectedNetworkElement: string,
+  selectedTimePeriod: string,
+  selectedLtp: string,
+  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",
+      showLtps: false,
+      showPanels: false
+    };
+  }
+
+  render(): JSX.Element {
+    const { classes } = this.props;
+    const { activePanel } = this.props;
+
+    const onTogglePanel = (panelId: PanelId) => {
+      const nextActivePanel = panelId === this.props.activePanel ? null : panelId;
+      this.props.setCurrentPanel(nextActivePanel);
+      switch (nextActivePanel) {
+        case "PerformanceData":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadPerformanceData15min();
+          } else {
+
+            this.props.reloadPerformanceData24hours();
+          }
+          break;
+        case "ReceiveLevel":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadReceiveLevel15min();
+          } else {
+            this.props.reloadReceiveLevel24hours();
+          }
+          break;
+        case "TransmissionPower":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadTransmissionPower15min();
+          } else {
+            this.props.reloadTransmissionPower24hours();
+          }
+          break;
+        case "AdaptiveModulation":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadAdaptiveModulation15min();
+          } else {
+            this.props.reloadAdaptiveModulation24hours();
+          }
+          break;
+        case "Temperature":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadTemperature15min();
+          } else {
+            this.props.reloadTemperature24hours();
+          }
+          break;
+        case "SINR":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadSignalToInterference15min();
+          } else {
+            this.props.reloadSignalToInterference24hours();
+          }
+          break;
+        case "CPD":
+          if (this.state.selectedTimePeriod == "15min") {
+            this.props.reloadCrossPolarDiscrimination15min();
+          } else {
+            this.props.reloadCrossPolarDiscrimination24hours();
+          }
+          break;
+        case null:
+          break;
+        default:
+          break;
+      }
+    }
+
+    return (
+      <>
+        <div>
+          <form className={ classes.root } autoComplete="off">
+            <FormControl className={ classes.margin }>
+              <span> Select Network element </span>
+              <Select className={ classes.selectDropdown } value={ this.state.selectedNetworkElement } onChange={ this.handleNetworkElementChange }
+              >
+                <MenuItem value={ "-1" }><em>--Select--</em></MenuItem>
+                { this.props.networkElements.map(ne =>
+                  (<MenuItem value={ ne.mountId } key={ ne.mountId }>{ ne.mountId }</MenuItem>))}
+              </Select>
+            </FormControl>
+          </form>
+        </div>
+        { 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={ onTogglePanel } title={ "Performance Data" }>
+                  <PerformanceData selectedTimePeriod={ this.state.selectedTimePeriod} />
+                </Panel>
+                <Panel activePanel={ activePanel } panelId={ "ReceiveLevel" } onToggle={ onTogglePanel } title={ "Receive Level" }>
+                  <ReceiveLevel selectedTimePeriod={ this.state.selectedTimePeriod} />
+                </Panel>
+                <Panel activePanel={ activePanel } panelId={ "TransmissionPower" } onToggle={ onTogglePanel } title={ "Transmission Power" }>
+                  <TransmissionPower selectedTimePeriod={ this.state.selectedTimePeriod} />
+                </Panel>
+                <Panel activePanel={ activePanel } panelId={ "AdaptiveModulation" } onToggle={ onTogglePanel } title={ "Adaptive Modulation" }>
+                  <AdaptiveModulation selectedTimePeriod={ this.state.selectedTimePeriod} />
+                </Panel>
+                <Panel activePanel={ activePanel } panelId={ "Temperature" } onToggle={ onTogglePanel } title={ "Temperature" }>
+                  <Temperature selectedTimePeriod={ this.state.selectedTimePeriod} />
+                </Panel>
+                <Panel activePanel={ activePanel } panelId={ "SINR" } onToggle={ onTogglePanel } title={ "Signal-to-interference-plus-noise ratio (SINR)" }>
+                  <SignalToInterference selectedTimePeriod={ this.state.selectedTimePeriod} />
+                </Panel>
+                <Panel activePanel={ activePanel } panelId={ "CPD" } onToggle={ onTogglePanel } title={ "Cross Polar Discrimination" }>
+                  <CrossPolarDiscrimination selectedTimePeriod={ this.state.selectedTimePeriod } />
+                </Panel>
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  public componentDidMount() {
+    this.props.getConnectedNetworkElements();
+  }
+
+  /**
+   * 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
+    };
+    if (timePeriod == "15min") {
+      this.props.performanceData15minPreActions.onPreFilterChanged(preFilter);
+      this.props.receiveLevel15minPreActions.onPreFilterChanged(preFilter);
+      this.props.transmissionPower15minPreActions.onPreFilterChanged(preFilter);
+      this.props.adaptiveModulation15minPreActions.onPreFilterChanged(preFilter);
+      this.props.temperature15minPreActions.onPreFilterChanged(preFilter);
+      this.props.signalToInterference15minPreActions.onPreFilterChanged(preFilter);
+      this.props.crossPolarDiscrimination15minPreActions.onPreFilterChanged(preFilter);
+    } else if (timePeriod == "24hours") {
+      this.props.performanceData24hoursPreActions.onPreFilterChanged(preFilter);
+      this.props.receiveLevel24hoursPreActions.onPreFilterChanged(preFilter);
+      this.props.transmissionPower24hoursPreActions.onPreFilterChanged(preFilter);
+      this.props.adaptiveModulation24hoursPreActions.onPreFilterChanged(preFilter);
+      this.props.temperature24hoursPreActions.onPreFilterChanged(preFilter);
+      this.props.signalToInterference24hoursPreActions.onPreFilterChanged(preFilter);
+      this.props.crossPolarDiscrimination24hoursPreActions.onPreFilterChanged(preFilter);
+    }
+  }
+
+  /**
+   * Function which handles network element changes.
+   */
+  private handleNetworkElementChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    var showLtps: boolean = true;
+    if (event.target.value === "-1") {
+      showLtps = false;
+    } else if (event.target.value !== this.state.selectedNetworkElement) {
+      this.setState({
+        showPanels: false
+      });
+    }
+    this.setState({
+      showLtps: showLtps,
+      selectedNetworkElement: event.target.value,
+      selectedLtp: "-1"
+    });
+    this.props.getDistinctLtps(event.target.value, 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>) => {
+    this.setState({
+      selectedTimePeriod: event.target.value,
+    });
+    if (event.target.value == "15min") {
+      this.props.getDistinctLtps(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
+    } else if (event.target.value == "24hours") {
+      this.props.getDistinctLtps(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);
+  }
+}
+
+export const PerformanceHistoryApplication = withStyles(PerformanceHistoryComponentStyles)(connect(mapProps, mapDispatcher)(PerformanceHistoryComponent));
+export default PerformanceHistoryApplication;