diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp')
16 files changed, 330 insertions, 106 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts index 375617593..a678ed78c 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts @@ -50,6 +50,18 @@ export class SetInitialLoadedAction extends BaseAction { } } +export class NoLtpsFoundAction extends BaseAction { + constructor() { + super(); + } +} + +export class ResetLtpsAction extends BaseAction { + constructor() { + super(); + } +} + /** * Represents an asynchronous thunk action to load available distinctLtps by networkElement from the database and set the returned first Ltp as default. @@ -65,6 +77,10 @@ export const loadDistinctLtpsbyNetworkElementAsync = (networkElement: string, se if (distinctLtps) { const ltps = getDistinctLtps(distinctLtps, selectedLtp, selectFirstLtp, resetLtp); dispatch(new AllAvailableLtpsLoadedAction(ltps)); + } else { + if (resetLtp) + resetLtp(); + dispatch(new NoLtpsFoundAction()); } }).catch(error => { dispatch(new AllAvailableLtpsLoadedAction(null, error)); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts index 1f53a5806..0efaaae92 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts @@ -1,3 +1,21 @@ +/** + * ============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 { Action } from "../../../../framework/src/flux/action"; import { currentViewType } from "../models/toggleDataType"; @@ -12,4 +30,10 @@ export class ResetAllSubViewsAction extends Action { constructor() { super(); } +} + +export class SetFilterVisibility extends Action { + constructor(public currentView: currentViewType, public isVisible: boolean) { + 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 c62698630..ca00d8214 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -29,17 +29,19 @@ import { createAdaptiveModulationProperties, createAdaptiveModulationActions } f import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ adaptiveModulationProperties: createAdaptiveModulationProperties(state), - currentView: state.performanceHistory.subViews.adaptiveModulation, - + currentView: state.performanceHistory.subViews.adaptiveModulation.subView, + isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible, + existingFilter: state.performanceHistory.adaptiveModulation.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("adaptiveModulation", value)) }, }); type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +54,11 @@ 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>{ + + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -66,10 +73,7 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean }]; chartPagedData.datasets.forEach(ds => { @@ -78,9 +82,9 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.props.adaptiveModulationActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> + <AdaptiveModulationTable stickyHeader idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx new file mode 100644 index 000000000..280a1dac8 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { makeStyles, TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core'; + +const styles = makeStyles({ + filterInput: { + marginRight: "15px" + }, + filterContainer: { + marginLeft: "90px" + } +}); + +type filterProps = { isVisible: boolean, onFilterChanged: (property: string, filterTerm: string) => void, filters: any }; +//put chart visibility into redux +const ChartFilter: React.FunctionComponent<filterProps> = (props) => { + + //get filter from redux state (just pass da object?), onfilterchange + const classes = styles(); + + return ( + <> + { + props.isVisible && + <div className={classes.filterContainer}> + <TextField className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + <TextField className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + <TextField className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + <FormControl> + <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel> + + <Select labelId="suspect-interval-label" value={props.filters.suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}> + <MenuItem value={undefined}>None</MenuItem> + <MenuItem value={"true"}>true</MenuItem> + <MenuItem value={"false"}>false</MenuItem> + </Select> + </FormControl> + </ div> + } + </> + ) + +} + +export default ChartFilter;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx index 7489757f5..a8c6ed78d 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -28,19 +28,22 @@ 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 { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state), - currentView: state.performanceHistory.subViews.CPD, + currentView: state.performanceHistory.subViews.CPD.subView, + isFilterVisible: state.performanceHistory.subViews.CPD.isFilterVisible, + existingFilter: state.performanceHistory.crossPolarDiscrimination.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("CPD", value)) }, }); type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -54,6 +57,10 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro */ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -69,10 +76,7 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -81,9 +85,9 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri }); return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.props.crossPolarDiscriminationActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> + <CrossPolarDiscriminationTable stickyHeader 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 index 8327ec4ed..b0aebd208 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx @@ -17,7 +17,7 @@ */ import * as React from 'react'; -import { MenuItem, Select, FormControl } from '@material-ui/core'; +import { MenuItem, Select, FormControl, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { LtpIds } from 'models/availableLtps'; import { Loader } from '../../../../framework/src/components/material-ui'; @@ -43,10 +43,11 @@ const useStyles = makeStyles(theme => ({ "display": "flex", "alignItems": "center", "justifyContent": "center", + flexDirection: "column" } })); -type LtpSelectionProps = { selectedNE: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void }; +type LtpSelectionProps = { selectedNE: string, error?: 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(); @@ -69,18 +70,29 @@ export const LtpSelection = (props: LtpSelectionProps) => { </Select> </FormControl> { - !props.finishedLoading && + !props.finishedLoading && !props.error && <div className={classes.center}> <Loader /> <h3>Collecting Data ...</h3> </div> } { - props.selectedLtp === "-1" && props.finishedLoading && + props.finishedLoading && props.error && <div className={classes.center}> - <h3>Please select a LTP</h3> + <h3>Data couldn't be loaded</h3> + <Typography variant="body1">{props.error}</Typography> </div> } + { + props.selectedLtp === "-1" && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ? + <div className={classes.center}> + <h3>Please select a LTP</h3> + </div> + : + <div className={classes.center}> + <h3>No performance data found</h3> + </div>) + } </>) } diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx index d0caa6fd6..0a4f03273 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -28,16 +28,19 @@ import { createPerformanceDataProperties, createPerformanceDataActions } from '. import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ performanceDataProperties: createPerformanceDataProperties(state), - currentView: state.performanceHistory.subViews.performanceDataSelection, + currentView: state.performanceHistory.subViews.performanceData.subView, + isFilterVisible: state.performanceHistory.subViews.performanceData.isFilterVisible, + existingFilter: state.performanceHistory.performanceData.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ performanceDataActions: createPerformanceDataActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("performanceData", value)) } }); type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -51,8 +54,8 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD */ class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{ - onChange = (value: "chart" | "table") => { - this.props.setSubView(value); + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); } render(): JSX.Element { @@ -65,10 +68,7 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -77,9 +77,9 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP }); return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.props.performanceDataActions.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> {lineChart(chartPagedData)} - <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> + <PerformanceDataTable stickyHeader 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 4b0a835d4..ae729306b 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -28,19 +28,20 @@ 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 { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ receiveLevelProperties: createReceiveLevelProperties(state), - currentView: state.performanceHistory.subViews.receiveLevelDataSelection, - + currentView: state.performanceHistory.subViews.receiveLevel.subView, + isFilterVisible: state.performanceHistory.subViews.receiveLevel.isFilterVisible, + existingFilter: state.performanceHistory.receiveLevel.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)), - + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("receiveLevel", value)) }, }); type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -54,6 +55,11 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat */ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -68,10 +74,7 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -81,9 +84,9 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.props.receiveLevelActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> + <ReceiveLevelTable stickyHeader 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 ba480d57d..00eba5fe3 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -28,17 +28,20 @@ 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 { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ signalToInterferenceProperties: createSignalToInterferenceProperties(state), - currentView: state.performanceHistory.subViews.SINR, + currentView: state.performanceHistory.subViews.SINR.subView, + isFilterVisible: state.performanceHistory.subViews.SINR.isFilterVisible, + existingFilter: state.performanceHistory.signalToInterference.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("SINR", value)) }, }); type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +55,10 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT */ class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -67,10 +74,7 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -79,9 +83,9 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference }); return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.props.signalToInterferenceActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} + <SignalToInterferenceTable stickyHeader 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 28f75d84c..c0d12ee47 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -29,16 +29,20 @@ import { createTemperatureProperties, createTemperatureActions } from '../handle import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ temperatureProperties: createTemperatureProperties(state), - currentView: state.performanceHistory.subViews.temperatur, + currentView: state.performanceHistory.subViews.temperatur.subView, + isFilterVisible: state.performanceHistory.subViews.temperatur.isFilterVisible, + existingFilter: state.performanceHistory.temperature.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ temperatureActions: createTemperatureActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("Temp", value)) }, + }); type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +56,11 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT */ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -66,10 +75,7 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -79,9 +85,9 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.props.temperatureActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> + <TemperatureTable stickyHeader 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 index 97a2006f7..618dddfc8 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -23,16 +23,34 @@ 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'; +import ChartFilter from './chartFilter' +import FilterListIcon from '@material-ui/icons/FilterList'; const styles = makeStyles({ - toggleButton: { + toggleButtonContainer: { + display: "flex", alignItems: "center", justifyContent: "center", padding: "10px", + }, + subViewGroup: { + padding: "10px" + }, + filterGroup: { + marginLeft: "10px" } }); -type toggleProps = { selectedValue: string, onChange(value: string): void }; +type filterType = { + onRefresh: () => void; + onHandleRequestSort: (orderBy: string) => void; + onToggleFilter: () => void; + onFilterChanged: (property: string, filterTerm: string) => void; + onHandleChangePage: (page: number) => void; + onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void; +}; + +type toggleProps = { selectedValue: string, onChange(value: string): void, showFilter: boolean, onToggleFilterButton(): void, onFilterChanged: (property: string, filterTerm: string) => void, existingFilter: any }; const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { @@ -44,22 +62,46 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { } }; + const handleFilterChange = (event: React.MouseEvent<HTMLElement>, newView: string) => { + props.onToggleFilterButton(); + }; + const children = React.Children.toArray(props.children); + //hide filter if visible + table + //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name + 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> + <div className={classes.toggleButtonContainer} > + <ToggleButtonGroup className={classes.subViewGroup} 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> + + <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} > + <ToggleButton aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}> + <Tooltip title={props.showFilter ? 'Hide filter' : 'Show available filter'}> + <FilterListIcon /> + </Tooltip> + </ToggleButton> + </ToggleButtonGroup> + + + </div> + { + props.selectedValue === "chart" && + <ChartFilter filters={props.existingFilter} onFilterChanged={props.onFilterChanged} isVisible={props.showFilter} /> + + } {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]} </>); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx index 6fe66d2b5..d89aca052 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -28,17 +28,22 @@ 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 { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ transmissionPowerProperties: createTransmissionPowerProperties(state), - currentView: state.performanceHistory.subViews.transmissionPower, + currentView: state.performanceHistory.subViews.transmissionPower.subView, + isFilterVisible: state.performanceHistory.subViews.transmissionPower.isFilterVisible, + existingFilter: state.performanceHistory.transmissionPower.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("transmissionPower", value)) }, + + }); type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +57,10 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<Transmissi */ class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -67,10 +76,7 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -80,9 +86,9 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.props.transmissionPowerActions.onFilterChanged} selectedValue={this.props.currentView} > {lineChart(chartPagedData)} - <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> + <TransmissionPowerTable stickyHeader 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 fd137fe37..4605efdb0 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts @@ -21,6 +21,8 @@ import { AllAvailableLtpsLoadedAction, LoadAllAvailableLtpsAction, SetInitialLoadedAction, + NoLtpsFoundAction, + ResetLtpsAction, } from '../actions/ltpAction'; import { LtpIds } from '../models/availableLtps'; @@ -29,12 +31,14 @@ export interface IAvailableLtpsState { distinctLtps: LtpIds[]; busy: boolean; loadedOnce: boolean; + error: string | undefined; } const ltpListStateInit: IAvailableLtpsState = { distinctLtps: [], busy: false, - loadedOnce: false + loadedOnce: false, + error: undefined }; export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = (state = ltpListStateInit, action) => { @@ -51,8 +55,16 @@ export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = ( ...state, distinctLtps: action.availableLtps, busy: false, + error: undefined, loadedOnce: true }; + } else if (action.error) { + state = { + ...state, + busy: false, + loadedOnce: true, + error: action.error + } } } else if (action instanceof SetInitialLoadedAction) { @@ -60,7 +72,25 @@ export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = ( ...state, loadedOnce: action.initialLoaded }; - } else { + } else if (action instanceof NoLtpsFoundAction) { + state = { + ...state, + busy: false, + error: undefined, + loadedOnce: true, + distinctLtps: [] + } + } else if (action instanceof ResetLtpsAction) { + state = { + ...state, + busy: false, + error: undefined, + loadedOnce: false, + distinctLtps: [] + } + } + + else { state = { ...state, busy: false diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts index e57f3860c..6b9081502 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts @@ -37,8 +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'; +import { SetSubViewAction, ResetAllSubViewsAction, SetFilterVisibility } from '../actions/toggleActions'; +import { SubTabType, currentViewType } from '../models/toggleDataType'; export interface IPerformanceHistoryStoreState { nodeId: string; @@ -81,24 +81,46 @@ const currentPMDataIntervalHandler: IActionHandler<PmDataInterval> = (state = Pm return state; } +type filterableSubview = { subView: SubTabType, isFilterVisible: boolean }; +type toggleViewDataType = { currentSubView: currentViewType, performanceData: filterableSubview, receiveLevel: filterableSubview, transmissionPower: filterableSubview, adaptiveModulation: filterableSubview, temperatur: filterableSubview, SINR: filterableSubview, CPD: filterableSubview }; -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) => { +const toogleViewDataHandler: IActionHandler<toggleViewDataType> = (state = { currentSubView: "performanceData", performanceData: { subView: "chart", isFilterVisible: true }, receiveLevel: { subView: "chart", isFilterVisible: true }, adaptiveModulation: { subView: "chart", isFilterVisible: true }, transmissionPower: { subView: "chart", isFilterVisible: true }, temperatur: { subView: "chart", isFilterVisible: true }, SINR: { subView: "chart", isFilterVisible: true }, CPD: { subView: "chart", isFilterVisible: true } }, 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; + case "performanceData": state = { ...state, performanceData: { ...state.performanceData, subView: action.selectedTab } }; break; + case "adaptiveModulation": state = { ...state, adaptiveModulation: { ...state.adaptiveModulation, subView: action.selectedTab } }; break; + case "receiveLevel": state = { ...state, receiveLevel: { ...state.receiveLevel, subView: action.selectedTab } }; break; + case "transmissionPower": state = { ...state, transmissionPower: { ...state.transmissionPower, subView: action.selectedTab } }; break; + case "Temp": state = { ...state, temperatur: { ...state.temperatur, subView: action.selectedTab } }; break; + case "SINR": state = { ...state, SINR: { ...state.SINR, subView: action.selectedTab } }; break; + case "CPD": state = { ...state, CPD: { ...state.CPD, subView: action.selectedTab } }; break; + } + } + else if (action instanceof SetFilterVisibility) { + switch (action.currentView) { + case "performanceData": state = { + ...state, performanceData: { ...state.performanceData, isFilterVisible: action.isVisible } + }; break; + case "adaptiveModulation": state = { ...state, adaptiveModulation: { ...state.performanceData, isFilterVisible: action.isVisible } }; break; + case "receiveLevel": state = { ...state, receiveLevel: { ...state.receiveLevel, isFilterVisible: action.isVisible } }; break; + case "transmissionPower": state = { ...state, transmissionPower: { ...state.transmissionPower, isFilterVisible: action.isVisible } }; break; + case "Temp": state = { ...state, temperatur: { ...state.temperatur, isFilterVisible: action.isVisible } }; break; + case "SINR": state = { ...state, SINR: { ...state.SINR, isFilterVisible: action.isVisible } }; break; + case "CPD": state = { ...state, CPD: { ...state.CPD, isFilterVisible: action.isVisible } }; break; } + } else if (action instanceof ResetAllSubViewsAction) { - state = { performanceDataSelection: "chart", adaptiveModulation: "chart", receiveLevelDataSelection: "chart", transmissionPower: "chart", temperatur: "chart", SINR: "chart", CPD: "chart" } + state = { + ...state, performanceData: { ...state.performanceData, subView: "chart" }, + adaptiveModulation: { ...state.adaptiveModulation, subView: "chart" }, + receiveLevel: { ...state.receiveLevel, subView: "chart" }, + transmissionPower: { ...state.transmissionPower, subView: "chart" }, + temperatur: { ...state.temperatur, subView: "chart" }, + SINR: { ...state.SINR, subView: "chart" }, + CPD: { ...state.CPD, subView: "chart" } + } } return state; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts index 2b03d1c2e..685859850 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts @@ -53,7 +53,7 @@ class PerformanceService { } const result = await requestRest<Result<string>>(path, { method: "POST", body: JSON.stringify(convertPropertyNames({ input: query }, replaceUpperCase)) }); - return result && result.output && result.output.data.map(ne => ({ key: ne })) || null; + return result && result.output && result.output.data && result.output.data.map(ne => ({ key: ne })) || null; } diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx index 4984e80c3..4a1c654fb 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx @@ -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, SetInitialLoadedAction } from '../actions/ltpAction'; +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'; @@ -69,7 +69,8 @@ const mapProps = (state: IApplicationStoreState) => ({ activePanel: state.performanceHistory.currentOpenPanel, availableLtps: state.performanceHistory.ltps.distinctLtps, networkElements: state.performanceHistory.networkElements.deviceList, - initialLoaded: state.performanceHistory.ltps.loadedOnce + initialLoaded: state.performanceHistory.ltps.loadedOnce, + error: state.performanceHistory.ltps.error }); const mapDispatcher = (dispatcher: IDispatcher) => ({ @@ -103,7 +104,7 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({ changeNode: (nodeId: string) => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new NavigateToApplication("performanceHistory", nodeId)); }), - setInitialLoaded: (isLoaded: boolean) => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new SetInitialLoadedAction(isLoaded)); }), + resetLtps: () => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new ResetLtpsAction()); }), resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()) }); @@ -138,7 +139,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp constructor(props: PerformanceHistoryComponentProps) { super(props); this.state = { - selectedNetworkElement: "-1", + selectedNetworkElement: props.nodeId !== "" ? props.nodeId : "-1", selectedTimePeriod: "15min", selectedLtp: "-1", showNetworkElementsTable: true, @@ -219,7 +220,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp if (nodeId === "") { return ( <> - <NetworkElementTable title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus + <NetworkElementTable 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" }] } /> @@ -232,7 +233,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp <> {this.state.showLtps && - <LtpSelection selectedNE={this.state.selectedNetworkElement} selectedLtp={this.state.selectedLtp} selectedTimePeriod={this.state.selectedTimePeriod} + <LtpSelection error={this.props.error} 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} /> @@ -293,6 +294,9 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp public componentDidMount() { + this.props.resetSubViews(); + this.props.resetLtps(); + this.props.setCurrentPanel(null); this.props.getAllDevicesPMdata(); this.props.enableFilterPerformanceData.onToggleFilter(); this.props.enableFilterReceiveLevel.onToggleFilter(); @@ -301,8 +305,6 @@ 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(); } /** @@ -377,8 +379,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp selectedLtp: "-1" }); - this.props.setInitialLoaded(false); this.props.resetSubViews(); + this.props.resetLtps(); this.setState({ preFilter: {} }); this.props.changeNode(selectedNetworkElement); this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); @@ -440,7 +442,6 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp showPanels: false, selectedLtp: event.target.value }); - this.props.setCurrentPanel(null); } else if (event.target.value !== this.state.selectedLtp) { this.setState({ |