diff options
author | 2019-03-31 12:40:19 +0000 | |
---|---|---|
committer | 2019-03-31 12:40:19 +0000 | |
commit | 6ec75490615fc3238926531b1fe555ee0adb9b27 (patch) | |
tree | 6c7ff74b6683e14b9f08e6d582c49388f7b0f0b0 /sdnr/wt/odlux/apps/performanceHistoryApp/src/views | |
parent | d693378eaecbe21675c89688ef89353949254350 (diff) | |
parent | 62e834802dae0bd15504785503060d7875c7b4ad (diff) |
Merge "Add SDN-R odlux performance"
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/views')
-rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx | 363 |
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; |