diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx')
| -rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx | 215 |
1 files changed, 108 insertions, 107 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx index b33b442d3..a4b968622 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx @@ -15,57 +15,54 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { Theme } from '@mui/material/styles'; import { WithStyles } from '@mui/styles'; import createStyles from '@mui/styles/createStyles'; import withStyles from '@mui/styles/withStyles'; -import FormControl from '@mui/material/FormControl'; -import MenuItem from '@mui/material/MenuItem'; -import Select from '@mui/material/Select'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { Panel, Loader } from '../../../../framework/src/components/material-ui'; + import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; import { Dispatch } from '../../../../framework/src/flux/store'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -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, ResetLtpsAction } 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 { TimeChangeAction } from '../actions/timeChangeAction'; +import AdaptiveModulation from '../components/adaptiveModulation'; +import CrossPolarDiscrimination from '../components/crossPolarDiscrimination'; +import PerformanceData from '../components/performanceData'; +import ReceiveLevel from '../components/receiveLevel'; +import SignalToInterference from '../components/signalToInterference'; +import Temperature from '../components/temperature'; +import TransmissionPower from '../components/transmissionPower'; +import { adaptiveModulationReloadAction, createAdaptiveModulationActions, createAdaptiveModulationPreActions } from '../handlers/adaptiveModulationHandler'; +import { createCrossPolarDiscriminationActions, createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction } from '../handlers/crossPolarDiscriminationHandler'; +import { createPerformanceDataActions, createPerformanceDataPreActions, performanceDataReloadAction } from '../handlers/performanceDataHandler'; +import { createReceiveLevelActions, createReceiveLevelPreActions, receiveLevelReloadAction } from '../handlers/receiveLevelHandler'; +import { createSignalToInterferenceActions, createSignalToInterferencePreActions, signalToInterferenceReloadAction } from '../handlers/signalToInterferenceHandler'; +import { createTemperatureActions, createTemperaturePreActions, temperatureReloadAction } from '../handlers/temperatureHandler'; +import { createTransmissionPowerActions, createTransmissionPowerPreActions, transmissionPowerReloadAction } from '../handlers/transmissionPowerHandler'; +import { PanelId } from '../models/panelId'; +import { PmDataInterval } from '../models/performanceDataType'; +import { AppBar, SelectChangeEvent, Tab, Tabs } from '@mui/material'; import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; -import { AppBar, Tabs, Tab, SelectChangeEvent } from '@mui/material'; -import LtpSelection from '../components/ltpSelection'; -import { ResetAllSubViewsAction } from '../actions/toggleActions'; import { ReloadAction } from '../actions/reloadAction'; +import { ResetAllSubViewsAction } from '../actions/toggleActions'; +import LtpSelection from '../components/ltpSelection'; const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({ root: { - display: "flex", - flexWrap: "wrap", + display: 'flex', + flexWrap: 'wrap', }, margin: { margin: theme.spacing(1), - } + }, }); const mapProps = (state: IApplicationStoreState) => ({ @@ -75,7 +72,7 @@ const mapProps = (state: IApplicationStoreState) => ({ networkElements: state.performanceHistory.networkElements.deviceList, initialLoaded: state.performanceHistory.ltps.loadedOnce, error: state.performanceHistory.ltps.error, - shouldReload: state.performanceHistory.isReloadSchedueled + shouldReload: state.performanceHistory.isReloadSchedueled, }); const mapDispatcher = (dispatcher: IDispatcher) => ({ @@ -103,112 +100,117 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({ 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)), + 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)); + dispatch(new NavigateToApplication('performanceHistory', nodeId)); }), resetLtps: () => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new ResetLtpsAction()); }), resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()), - setShouldReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show)) + setShouldReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show)), }); export type NetworkElementType = { - nodeId: string, -} + 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, + selectedNetworkElement: string; + selectedTimePeriod: string; + selectedLtp: string; + showNetworkElementsTable: boolean; + showLtps: boolean; + showPanels: boolean; preFilter: { - "node-name": string, - "uuid-interface": string - } | {} + 'node-name': string; + 'uuid-interface': string; + } | {}; }; /** * Represents the component for Performance history application. */ -class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComponentProps, PerformanceHistoryComponentState>{ +class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComponentProps, PerformanceHistoryComponentState> { /** * Initialises this instance */ constructor(props: PerformanceHistoryComponentProps) { super(props); this.state = { - selectedNetworkElement: props.nodeId !== "" ? props.nodeId : "-1", - selectedTimePeriod: "15min", - selectedLtp: "-1", + selectedNetworkElement: props.nodeId !== '' ? props.nodeId : '-1', + selectedTimePeriod: '15min', + selectedLtp: '-1', showNetworkElementsTable: true, showLtps: false, showPanels: false, - preFilter: {} + preFilter: {}, }; } onChangeTabs = (event: React.SyntheticEvent, newValue: PanelId) => { const nextActivePanel = newValue; this.changeTabs(nextActivePanel); - } + }; changeTabs = (nextActivePanel: PanelId) => { this.props.setCurrentPanel(nextActivePanel); const preFilter = this.state.preFilter; switch (nextActivePanel) { - case "PerformanceData": + case 'PerformanceData': if (this.props.performanceData.preFilter !== {} && this.props.performanceData.preFilter === preFilter) { this.props.reloadPerformanceData(); } else { this.props.performanceDataPreActions.onPreFilterChanged(preFilter); } break; - case "ReceiveLevel": + case 'ReceiveLevel': if (this.props.receiveLevel.preFilter !== {} && this.props.receiveLevel.preFilter === preFilter) { this.props.reloadReceiveLevel(); - } - else { + } else { this.props.receiveLevelPreActions.onPreFilterChanged(preFilter); } break; - case "TransmissionPower": + case 'TransmissionPower': if (this.props.transmissionPower.preFilter !== {} && this.props.transmissionPower.preFilter === preFilter) { this.props.reloadTransmissionPower(); - } - else { + } else { this.props.transmissionPowerPreActions.onPreFilterChanged(preFilter); } break; - case "AdaptiveModulation": + case 'AdaptiveModulation': if (this.props.adaptiveModulation.preFilter !== {} && this.props.adaptiveModulation.preFilter === preFilter) { this.props.reloadAdaptiveModulation(); } else { this.props.adaptiveModulationPreActions.onPreFilterChanged(preFilter); } break; - case "Temperature": + case 'Temperature': if (this.props.temperature.preFilter !== {} && this.props.temperature.preFilter === preFilter) { this.props.reloadTemperature(); } else { this.props.temperaturePreActions.onPreFilterChanged(preFilter); } break; - case "SINR": + case 'SINR': if (this.props.signalToInterference.preFilter !== {} && this.props.signalToInterference.preFilter === preFilter) { this.props.reloadSignalToInterference(); } else { this.props.signalToInterferencePreActions.onPreFilterChanged(preFilter); } break; - case "CPD": + case 'CPD': if (this.props.crossPolarDiscrimination.preFilter !== {} && this.props.crossPolarDiscrimination.preFilter === preFilter) { this.props.reloadCrossPolarDiscrimination(); } else { @@ -219,21 +221,20 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp // do nothing if all panels are closed break; } - } + }; render(): JSX.Element { const { activePanel, nodeId } = this.props; - if (nodeId === "") { + if (nodeId === '') { return ( <> - <NetworkElementTable tableId="performance-data-element-selection-table" 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" }] + <NetworkElementTable tableId="performance-data-element-selection-table" 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' }] } /> </> - ) - } - else { + ); + } else { this.handleURLChange(nodeId); return ( <> @@ -259,42 +260,42 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp </Tabs> </AppBar> { - activePanel === "PerformanceData" && + activePanel === 'PerformanceData' && <PerformanceData selectedTimePeriod={this.state.selectedTimePeriod} /> } { - activePanel === "ReceiveLevel" && + activePanel === 'ReceiveLevel' && <ReceiveLevel selectedTimePeriod={this.state.selectedTimePeriod} /> } { - activePanel === "TransmissionPower" && + activePanel === 'TransmissionPower' && <TransmissionPower selectedTimePeriod={this.state.selectedTimePeriod} /> } { - activePanel === "AdaptiveModulation" && + activePanel === 'AdaptiveModulation' && <AdaptiveModulation selectedTimePeriod={this.state.selectedTimePeriod} /> } { - activePanel === "Temperature" && + activePanel === 'Temperature' && <Temperature selectedTimePeriod={this.state.selectedTimePeriod} /> } { - activePanel === "SINR" && + activePanel === 'SINR' && <SignalToInterference selectedTimePeriod={this.state.selectedTimePeriod} /> } { - activePanel === "CPD" && + activePanel === 'CPD' && <CrossPolarDiscrimination selectedTimePeriod={this.state.selectedTimePeriod} /> } </> } </> - ) + ); } } @@ -310,19 +311,19 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp private selectFirstLtp = (firstLtp: string) => { this.setState({ showPanels: true, - selectedLtp: firstLtp + selectedLtp: firstLtp, }); this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, firstLtp); - this.changeTabs("PerformanceData"); - } + this.changeTabs('PerformanceData'); + }; /** * 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 newPreFilter = { - "node-name": networkElement, - "uuid-interface": ltp + 'node-name': networkElement, + 'uuid-interface': ltp, }; const activePanel = this.props.activePanel; @@ -331,25 +332,25 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp // set prefilter and reload data if panel is open switch (activePanel) { - case "PerformanceData": + case 'PerformanceData': this.props.performanceDataPreActions.onPreFilterChanged(newPreFilter); break; - case "ReceiveLevel": + case 'ReceiveLevel': this.props.receiveLevelPreActions.onPreFilterChanged(newPreFilter); break; - case "TransmissionPower": + case 'TransmissionPower': this.props.transmissionPowerPreActions.onPreFilterChanged(newPreFilter); break; - case "AdaptiveModulation": + case 'AdaptiveModulation': this.props.adaptiveModulationPreActions.onPreFilterChanged(newPreFilter); break; - case "Temperature": + case 'Temperature': this.props.temperaturePreActions.onPreFilterChanged(newPreFilter); break; - case "SINR": + case 'SINR': this.props.signalToInterferencePreActions.onPreFilterChanged(newPreFilter); break; - case "CPD": + case 'CPD': this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(newPreFilter); break; default: @@ -359,9 +360,9 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp } // set prefilter - this.setState({ preFilter: newPreFilter }) + this.setState({ preFilter: newPreFilter }); - } + }; /** * Function which handles network element changes. @@ -373,15 +374,15 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp selectedNetworkElement: selectedNetworkElement, showNetworkElementsTable: false, showPanels: false, - selectedLtp: "-1" + selectedLtp: '-1', }); this.props.resetSubViews(); this.props.resetLtps(); this.setState({ preFilter: {} }); this.props.changeNode(selectedNetworkElement); - this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); - } + this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, '-1', this.selectFirstLtp); + }; private handleURLChange = (selectedNetworkElement: string) => { @@ -391,12 +392,12 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp showLtps: true, selectedNetworkElement: selectedNetworkElement, showPanels: false, - selectedLtp: "-1" + selectedLtp: '-1', }); - this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); + this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, '-1', this.selectFirstLtp); this.props.setShouldReload(false); } - } + }; /** * Function which resets the ltps to "--select--" in the state if the passed parameter @ltpNotSelected is true. @@ -405,18 +406,18 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp private resetLtpDropdown = (ltpNotSelected: boolean) => { if (ltpNotSelected) { this.setState({ - selectedLtp: "-1", - showPanels: false + selectedLtp: '-1', + showPanels: false, }); } - } + }; /** * Function which handles the time period changes. */ private handleTimePeriodChange = (event: SelectChangeEvent<HTMLSelectElement>) => { - const selectedTimeInterval = event.target.value === "15min" + const selectedTimeInterval = event.target.value === '15min' ? PmDataInterval.pmInterval15Min : PmDataInterval.pmInterval24Hours; @@ -427,28 +428,28 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp this.props.timeIntervalChange(selectedTimeInterval); this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp, undefined, this.resetLtpDropdown); this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp); - } + }; /** * Function which handles the ltp changes. */ private handleLtpChange = (event:SelectChangeEvent<HTMLSelectElement> ) => { - if (event.target.value === "-1") { + if (event.target.value === '-1') { this.setState({ showPanels: false, - selectedLtp: event.target.value + selectedLtp: event.target.value, }); } else if (event.target.value !== this.state.selectedLtp) { this.setState({ showPanels: true, - selectedLtp: event.target.value as string + selectedLtp: event.target.value as string, }); this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value as string); } - } + }; } const PerformanceHistoryApplication = withStyles(PerformanceHistoryComponentStyles)(connect(mapProps, mapDispatcher)(PerformanceHistoryComponent)); |