diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp')
16 files changed, 532 insertions, 125 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts index 2741d889a..375617593 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts @@ -44,6 +44,12 @@ export class AllAvailableLtpsLoadedAction extends BaseAction { } } +export class SetInitialLoadedAction extends BaseAction { + constructor(public initialLoaded: boolean) { + super(); + } +} + /** * Represents an asynchronous thunk action to load available distinctLtps by networkElement from the database and set the returned first Ltp as default. diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts new file mode 100644 index 000000000..1f53a5806 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts @@ -0,0 +1,15 @@ +import { Action } from "../../../../framework/src/flux/action"; +import { currentViewType } from "../models/toggleDataType"; + + +export class SetSubViewAction extends Action { + constructor(public currentView: currentViewType, public selectedTab: "chart" | "table") { + super(); + } +} + +export class ResetAllSubViewsAction extends Action { + constructor() { + super(); + } +}
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx index 09d3accd4..c62698630 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -28,13 +28,18 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createAdaptiveModulationProperties, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import ToggleContainer from './toggleContainer'; +import { SetSubViewAction } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ adaptiveModulationProperties: createAdaptiveModulationProperties(state), + currentView: state.performanceHistory.subViews.adaptiveModulation, + }); const mapDisp = (dispatcher: IDispatcher) => ({ adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)), }); type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -47,6 +52,10 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveM * The Component which gets the adaptiveModulation data from the database based on the selected time period. */ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{ + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.adaptiveModulationProperties; const actions = this.props.adaptiveModulationActions; @@ -69,8 +78,10 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp return ( <> - {lineChart(chartPagedData)} - <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx index 267e00bbe..7489757f5 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -28,13 +28,19 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createCrossPolarDiscriminationProperties, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import { SetSubViewAction } from '../actions/toggleActions'; +import ToggleContainer from './toggleContainer'; + const mapProps = (state: IApplicationStoreState) => ({ crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state), + currentView: state.performanceHistory.subViews.CPD, + }); const mapDisp = (dispatcher: IDispatcher) => ({ crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)), }); type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -47,6 +53,11 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro * The Component which gets the crossPolarDiscrimination data from the database based on the selected time period. */ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{ + + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.crossPolarDiscriminationProperties; const actions = this.props.crossPolarDiscriminationActions; @@ -70,8 +81,10 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri }); return ( <> - {lineChart(chartPagedData)} - <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx new file mode 100644 index 000000000..8327ec4ed --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx @@ -0,0 +1,87 @@ +/** + * ============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 { MenuItem, Select, FormControl } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { LtpIds } from 'models/availableLtps'; +import { Loader } from '../../../../framework/src/components/material-ui'; + + +const useStyles = makeStyles(theme => ({ + 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"]), + }, + center: { + "flex": "1", + "height": "100%", + "display": "flex", + "alignItems": "center", + "justifyContent": "center", + } +})); + +type LtpSelectionProps = { selectedNE: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void }; + +export const LtpSelection = (props: LtpSelectionProps) => { + const classes = useStyles(); + return ( + <> + <h3>Selected Network Element: {props.selectedNE} </h3> + <FormControl className={classes.display}> + <span> + Select LTP + </span> + <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} > + <MenuItem value={"-1"}><em>--Select--</em></MenuItem> + {props.availableLtps.map(ltp => + (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))} + </Select> + <span> Time-Period </span> + <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} > + <MenuItem value={"15min"}>15min</MenuItem> + <MenuItem value={"24hours"}>24hours</MenuItem> + </Select> + </FormControl> + { + !props.finishedLoading && + <div className={classes.center}> + <Loader /> + <h3>Collecting Data ...</h3> + </div> + } + { + props.selectedLtp === "-1" && props.finishedLoading && + <div className={classes.center}> + <h3>Please select a LTP</h3> + </div> + } + </>) +} + +export default LtpSelection;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx index c58c49c9e..d0caa6fd6 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -27,13 +27,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import ToggleContainer from './toggleContainer'; +import { SetSubViewAction } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ performanceDataProperties: createPerformanceDataProperties(state), + currentView: state.performanceHistory.subViews.performanceDataSelection, }); const mapDisp = (dispatcher: IDispatcher) => ({ performanceDataActions: createPerformanceDataActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)), }); type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -46,6 +50,11 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD * The Component which gets the performance data from the database based on the selected time period. */ class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{ + + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.performanceDataProperties; const actions = this.props.performanceDataActions; @@ -68,8 +77,10 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP }); return ( <> - {lineChart(chartPagedData)} - <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx index 55bc39860..4b0a835d4 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -23,18 +23,24 @@ import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '. import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { ReceiveLevelDataType,ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType'; +import { ReceiveLevelDataType, ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createReceiveLevelProperties, createReceiveLevelActions } from '../handlers/receiveLevelHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import { SetSubViewAction } from '../actions/toggleActions'; +import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ receiveLevelProperties: createReceiveLevelProperties(state), + currentView: state.performanceHistory.subViews.receiveLevelDataSelection, + }); const mapDisp = (dispatcher: IDispatcher) => ({ receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)), + }); type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -47,6 +53,11 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat * The Component which gets the receiveLevel data from the database based on the selected time period. */ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ + + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.receiveLevelProperties; const actions = this.props.receiveLevelActions; @@ -70,8 +81,10 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ return ( <> - {lineChart(chartPagedData)} - <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx index 42aa007a9..ba480d57d 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createSignalToInterferenceProperties, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import { SetSubViewAction } from '../actions/toggleActions'; +import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ signalToInterferenceProperties: createSignalToInterferenceProperties(state), + currentView: state.performanceHistory.subViews.SINR, }); const mapDisp = (dispatcher: IDispatcher) => ({ signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)), }); type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -47,6 +51,11 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT * The Component which gets the signal to interference data from the database based on the selected time period. */ class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{ + + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.signalToInterferenceProperties; const actions = this.props.signalToInterferenceActions; @@ -70,9 +79,11 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference }); return ( <> - {lineChart(chartPagedData)} - <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} - /> + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} + /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx index 256911c2d..28f75d84c 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createTemperatureProperties, createTemperatureActions } from '../handlers/temperatureHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import ToggleContainer from './toggleContainer'; +import { SetSubViewAction } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ temperatureProperties: createTemperatureProperties(state), + currentView: state.performanceHistory.subViews.temperatur, }); const mapDisp = (dispatcher: IDispatcher) => ({ temperatureActions: createTemperatureActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)), }); type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -47,6 +51,11 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT * The Component which gets the temperature data from the database based on the selected time period. */ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ + + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.temperatureProperties; const actions = this.props.temperatureActions; @@ -69,8 +78,11 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ }); return ( <> - {lineChart(chartPagedData)} - <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> + + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx new file mode 100644 index 000000000..97a2006f7 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -0,0 +1,68 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2020 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 ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import BarChartIcon from '@material-ui/icons/BarChart'; +import TableChartIcon from '@material-ui/icons/TableChart'; +import { makeStyles } from '@material-ui/core'; +import Tooltip from '@material-ui/core/Tooltip'; + +const styles = makeStyles({ + toggleButton: { + alignItems: "center", + justifyContent: "center", + padding: "10px", + } +}); + +type toggleProps = { selectedValue: string, onChange(value: string): void }; + +const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { + + const classes = styles(); + + const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => { + if (newView !== null) { + props.onChange(newView) + } + }; + + const children = React.Children.toArray(props.children); + + return ( + <> + <ToggleButtonGroup className={classes.toggleButton} size="medium" value={props.selectedValue} exclusive onChange={handleChange}> + <ToggleButton aria-label="display-chart" key={1} value="chart"> + <Tooltip title="Chart"> + <BarChartIcon /> + </Tooltip> + </ToggleButton> + <ToggleButton aria-label="display-table" key={2} value="table"> + <Tooltip title="Table"> + <TableChartIcon /> + </Tooltip> + </ToggleButton> + </ToggleButtonGroup> + {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]} + </>); + +} + +export default ToggleContainer;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx index 635cbf103..6fe66d2b5 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createTransmissionPowerProperties, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; +import { SetSubViewAction } from '../actions/toggleActions'; +import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ transmissionPowerProperties: createTransmissionPowerProperties(state), + currentView: state.performanceHistory.subViews.transmissionPower, }); const mapDisp = (dispatcher: IDispatcher) => ({ transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch), + setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)), }); type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -47,6 +51,11 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<Transmissi * The Component which gets the transmission power data from the database based on the selected time period. */ class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{ + + onChange = (value: "chart" | "table") => { + this.props.setSubView(value); + } + render(): JSX.Element { const properties = this.props.transmissionPowerProperties const actions = this.props.transmissionPowerActions @@ -71,8 +80,10 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon return ( <> - {lineChart(chartPagedData)} - <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> + <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + {lineChart(chartPagedData)} + <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> + </ToggleContainer> </> ); }; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts index b3b284b42..fd137fe37 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts @@ -20,6 +20,7 @@ import { IActionHandler } from '../../../../framework/src/flux/action'; import { AllAvailableLtpsLoadedAction, LoadAllAvailableLtpsAction, + SetInitialLoadedAction, } from '../actions/ltpAction'; import { LtpIds } from '../models/availableLtps'; @@ -27,11 +28,13 @@ import { LtpIds } from '../models/availableLtps'; export interface IAvailableLtpsState { distinctLtps: LtpIds[]; busy: boolean; + loadedOnce: boolean; } const ltpListStateInit: IAvailableLtpsState = { distinctLtps: [], - busy: false + busy: false, + loadedOnce: false }; export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = (state = ltpListStateInit, action) => { @@ -47,14 +50,22 @@ export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = ( state = { ...state, distinctLtps: action.availableLtps, - busy: false - }; - } else { - state = { - ...state, - busy: false + busy: false, + loadedOnce: true }; } + } else if (action instanceof SetInitialLoadedAction) { + + state = { + ...state, + loadedOnce: action.initialLoaded + }; + } else { + state = { + ...state, + busy: false + }; } + return state; };
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts index c33f10a7e..e57f3860c 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts @@ -37,6 +37,8 @@ import { IAvailableLtpsState, availableLtpsActionHandler } from './availableLtps import { PmDataInterval } from '../models/performanceDataType'; import { TimeChangeAction } from '../actions/timeChangeAction'; import { UpdateMountId } from '../actions/deviceListActions'; +import { SetSubViewAction, ResetAllSubViewsAction } from '../actions/toggleActions'; +import { SubTabType } from '../models/toggleDataType'; export interface IPerformanceHistoryStoreState { nodeId: string; @@ -51,6 +53,7 @@ export interface IPerformanceHistoryStoreState { crossPolarDiscrimination: ICrossPolarDiscriminationState; currentOpenPanel: string | null; pmDataIntervalType: PmDataInterval; + subViews: toggleViewDataType; } const mountIdHandler: IActionHandler<string> = (state = "", action) => { @@ -78,6 +81,29 @@ const currentPMDataIntervalHandler: IActionHandler<PmDataInterval> = (state = Pm return state; } + +type toggleViewDataType = { performanceDataSelection: SubTabType, receiveLevelDataSelection: SubTabType, transmissionPower: SubTabType, adaptiveModulation: SubTabType, temperatur: SubTabType, SINR: SubTabType, CPD: SubTabType }; + + +const toogleViewDataHandler: IActionHandler<toggleViewDataType> = (state = { performanceDataSelection: "chart", receiveLevelDataSelection: "chart", adaptiveModulation: "chart", transmissionPower: "chart", temperatur: "chart", SINR: "chart", CPD: "chart" }, action) => { + + if (action instanceof SetSubViewAction) { + switch (action.currentView) { + case "performanceData": state = { ...state, performanceDataSelection: action.selectedTab }; break; + case "adaptiveModulation": state = { ...state, adaptiveModulation: action.selectedTab }; break; + case "receiveLevel": state = { ...state, receiveLevelDataSelection: action.selectedTab }; break; + case "transmissionPower": state = { ...state, transmissionPower: action.selectedTab }; break; + case "Temp": state = { ...state, temperatur: action.selectedTab }; break; + case "SINR": state = { ...state, SINR: action.selectedTab }; break; + case "CPD": state = { ...state, CPD: action.selectedTab }; break; + } + } else if (action instanceof ResetAllSubViewsAction) { + state = { performanceDataSelection: "chart", adaptiveModulation: "chart", receiveLevelDataSelection: "chart", transmissionPower: "chart", temperatur: "chart", SINR: "chart", CPD: "chart" } + } + + return state; +} + declare module '../../../../framework/src/store/applicationStore' { interface IApplicationStoreState { performanceHistory: IPerformanceHistoryStoreState; @@ -97,7 +123,8 @@ const actionHandlers = { signalToInterference: signalToInterferenceActionHandler, crossPolarDiscrimination: crossPolarDiscriminationActionHandler, currentOpenPanel: currentOpenPanelHandler, - pmDataIntervalType: currentPMDataIntervalHandler + pmDataIntervalType: currentPMDataIntervalHandler, + subViews: toogleViewDataHandler }; const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts new file mode 100644 index 000000000..f705e10b2 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts @@ -0,0 +1,25 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2020 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========================================================================== + */ + +/** + * Specifies possible sub views + */ +export type SubTabType = "chart" | "table"; + +export type currentViewType = "performanceData" | "receiveLevel" | "transmissionPower" | "adaptiveModulation" | "Temp" | "SINR" | "CPD"; + diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx index 3240f73f1..f58638e30 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx @@ -22,7 +22,7 @@ import * as moment from 'moment'; import { ITimeStamp } from 'models/chartTypes'; const style: React.CSSProperties = { - height: "350px" + height: "80%" } export const lineChart = (chartPagedData: IDataSetsObject) => { return ( 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); } } |