diff options
author | 2020-03-16 09:15:00 +0100 | |
---|---|---|
committer | 2020-03-18 15:19:40 +0000 | |
commit | 284da45ec47cb85c6547eb3ae06acaf0578be894 (patch) | |
tree | 8d96cadcd21a0bb3ebfbd5fede6ece86a8d9569e /sdnr/wt/odlux | |
parent | ce78a6683ab8648ed90e944cd23ed7c01205fce6 (diff) |
Bugfixes for PerformanceApp
Fix filter in table not always showing
Fix suspectInterval filter not linked between chart and table
Fix data not loaded problem
Issue-ID: SDNC-1118
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I7d1b71f094dfdd7cd16ed6f7fb5c597a7b209b69
Diffstat (limited to 'sdnr/wt/odlux')
13 files changed, 173 insertions, 56 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts new file mode 100644 index 000000000..7d6ecfe84 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/reloadAction.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========================================================================== + */ + +import { Action } from "../../../../framework/src/flux/action"; + +export class ReloadAction extends Action { + constructor(public show: 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 ca00d8214..f0a93f565 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -63,6 +63,12 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp this.props.setSubView(value); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.adaptiveModulationActions.onFilterChanged(property, filterTerm); + if (!this.props.adaptiveModulationProperties.showFilter) + this.props.adaptiveModulationActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.adaptiveModulationProperties; const actions = this.props.adaptiveModulationActions; @@ -82,7 +88,7 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp return ( <> - <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}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} <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 index 280a1dac8..e5f540e19 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx @@ -1,3 +1,22 @@ +/** + * ============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 { makeStyles, TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core'; @@ -11,12 +30,15 @@ const styles = makeStyles({ }); 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(); + // make sure suspectIntervalFlag is a string to show the correct value in the select element + + const suspectIntervalFlag = props.filters.suspectIntervalFlag === undefined ? undefined : props.filters.suspectIntervalFlag.toString(); return ( <> { @@ -34,7 +56,7 @@ const ChartFilter: React.FunctionComponent<filterProps> = (props) => { <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)}> + <Select labelId="suspect-interval-label" value={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> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx index a8c6ed78d..60051d03e 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -65,6 +65,12 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri this.props.setSubView(value); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.crossPolarDiscriminationActions.onFilterChanged(property, filterTerm); + if (!this.props.crossPolarDiscriminationProperties.showFilter) + this.props.crossPolarDiscriminationActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.crossPolarDiscriminationProperties; const actions = this.props.crossPolarDiscriminationActions; @@ -85,7 +91,7 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri }); return ( <> - <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}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> </ToggleContainer> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx index 0a4f03273..28352cd31 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -58,6 +58,12 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP this.props.toggleFilterButton(!this.props.isFilterVisible); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.performanceDataActions.onFilterChanged(property, filterTerm); + if (!this.props.performanceDataProperties.showFilter) + this.props.performanceDataActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.performanceDataProperties; const actions = this.props.performanceDataActions; @@ -77,7 +83,7 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP }); return ( <> - <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}> + <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> {lineChart(chartPagedData)} <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 ae729306b..720fb946e 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -64,6 +64,12 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ this.props.setSubView(value); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.receiveLevelActions.onFilterChanged(property, filterTerm); + if (!this.props.receiveLevelProperties.showFilter) + this.props.receiveLevelActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.receiveLevelProperties; const actions = this.props.receiveLevelActions; @@ -84,7 +90,7 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ return ( <> - <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}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} <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 00eba5fe3..4b34019ae 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -63,6 +63,12 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference this.props.setSubView(value); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.signalToInterferenceActions.onFilterChanged(property, filterTerm); + if (!this.props.signalToInterferenceProperties.showFilter) + this.props.signalToInterferenceActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.signalToInterferenceProperties; const actions = this.props.signalToInterferenceActions; @@ -83,7 +89,7 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference }); return ( <> - <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}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} <SignalToInterferenceTable stickyHeader idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} /> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx index c0d12ee47..2484a8cfb 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -65,6 +65,12 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ this.props.setSubView(value); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.temperatureActions.onFilterChanged(property, filterTerm); + if (!this.props.temperatureProperties.showFilter) + this.props.temperatureActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.temperatureProperties; const actions = this.props.temperatureActions; @@ -85,7 +91,7 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ return ( <> - <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}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} <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 618dddfc8..6014b22e4 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -41,15 +41,6 @@ const styles = makeStyles({ } }); -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) => { @@ -68,9 +59,6 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { 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 ( <> <div className={classes.toggleButtonContainer} > diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx index d89aca052..e44ffe077 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -65,6 +65,12 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon this.props.setSubView(value); } + onFilterChanged = (property: string, filterTerm: string) => { + this.props.transmissionPowerActions.onFilterChanged(property, filterTerm); + if (!this.props.transmissionPowerProperties.showFilter) + this.props.transmissionPowerActions.onToggleFilter(false); + } + render(): JSX.Element { const properties = this.props.transmissionPowerProperties const actions = this.props.transmissionPowerActions @@ -86,7 +92,7 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon return ( <> - <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} > + <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} > {lineChart(chartPagedData)} <TransmissionPowerTable stickyHeader idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> </ToggleContainer> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts index 6b9081502..a05ff3787 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts @@ -39,6 +39,7 @@ import { TimeChangeAction } from '../actions/timeChangeAction'; import { UpdateMountId } from '../actions/deviceListActions'; import { SetSubViewAction, ResetAllSubViewsAction, SetFilterVisibility } from '../actions/toggleActions'; import { SubTabType, currentViewType } from '../models/toggleDataType'; +import { ReloadAction } from '../actions/reloadAction'; export interface IPerformanceHistoryStoreState { nodeId: string; @@ -54,6 +55,7 @@ export interface IPerformanceHistoryStoreState { currentOpenPanel: string | null; pmDataIntervalType: PmDataInterval; subViews: toggleViewDataType; + isReloadSchedueled: boolean; } const mountIdHandler: IActionHandler<string> = (state = "", action) => { @@ -66,6 +68,14 @@ const mountIdHandler: IActionHandler<string> = (state = "", action) => { return state; } +const reloadHandler: IActionHandler<boolean> = (state = false, action) => { + + if (action instanceof ReloadAction) { + state = action.show; + } + return state; +} + const currentOpenPanelHandler: IActionHandler<string | null> = (state = null, action) => { if (action instanceof SetPanelAction) { @@ -146,7 +156,8 @@ const actionHandlers = { crossPolarDiscrimination: crossPolarDiscriminationActionHandler, currentOpenPanel: currentOpenPanelHandler, pmDataIntervalType: currentPMDataIntervalHandler, - subViews: toogleViewDataHandler + subViews: toogleViewDataHandler, + isReloadSchedueled: reloadHandler }; const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx index df3ffd90a..a8aaca22f 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/pluginPerformance.tsx @@ -30,6 +30,9 @@ import { ApplicationStore } from '../../../framework/src/store/applicationStore' import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect'; import { IApplicationStoreState } from "../../../framework/src/store/applicationStore"; import { updateMountIdActionCreator } from "./actions/deviceListActions"; +import { ResetAllSubViewsAction } from "./actions/toggleActions"; +import { ResetLtpsAction } from "./actions/ltpAction"; +import { ReloadAction } from "./actions/reloadAction"; let api: { readonly applicationStore: ApplicationStore | null; @@ -40,31 +43,63 @@ const mapProps = (state: IApplicationStoreState) => ({ }); const mapDisp = (dispatcher: IDispatcher) => ({ - updateMountId: (mountId: string) => dispatcher.dispatch(updateMountIdActionCreator(mountId)) + updateMountId: (mountId: string) => dispatcher.dispatch(updateMountIdActionCreator(mountId)), + resetLtps: () => dispatcher.dispatch(new ResetLtpsAction()), + resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()), + setScheduleReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show)) }); let currentMountId: string | null = null; let lastUrl: string = "/performanceHistory"; -const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string}> & Connect<typeof mapProps, typeof mapDisp>) => { +const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDisp>) => { let mountId: string = ""; - if (props.location.pathname !== lastUrl) { - // ensure the asynchronus update will only be called once per path + + // called when component finshed mounting + React.useEffect(() => { + + lastUrl = props.location.pathname; + mountId = getMountId(lastUrl); + + if (currentMountId !== mountId) { // new element is loaded + currentMountId = mountId; + schedueleReload(currentMountId); + } else + if (currentMountId !== "") { // same element is loaded again + schedueleReload(currentMountId); + } + }, []); + + // called when component gets updated + React.useEffect(() => { + lastUrl = props.location.pathname; + mountId = getMountId(lastUrl); + + if (currentMountId !== mountId) { + currentMountId = mountId; + schedueleReload(currentMountId); + } + + }); + + const getMountId = (lastUrl: string) => { let index = lastUrl.lastIndexOf("performanceHistory/"); - if(index >= 0) { - mountId = lastUrl.substr(index+19); + if (index >= 0) { + mountId = lastUrl.substr(index + 19); } else { mountId = ""; } - window.setTimeout(async () => { - // check if the mountId has changed - if (currentMountId !== mountId) { - currentMountId = mountId; - await props.updateMountId(currentMountId); - } - }); + return mountId; + } + + const schedueleReload = (currentMountId: string) => { + props.updateMountId(currentMountId); + props.resetLtps(); + props.resetSubViews(); + props.setScheduleReload(true); } + return ( <PerformanceHistoryApplication /> ); @@ -73,11 +108,11 @@ const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((pr const PerformanceHistoryRouterApp = withRouter((props: RouteComponentProps) => { props.history.action = "POP"; return ( - <Switch> - <Route path={`${props.match.path}/:mountId`} component={PerformanceHistoryApplicationRouteAdapter} /> - <Route path={`${props.match.path}`} component={PerformanceHistoryApplicationRouteAdapter} /> - <Redirect to={`${props.match.path}`} /> - </Switch> + <Switch> + <Route path={`${props.match.path}/:mountId`} component={PerformanceHistoryApplicationRouteAdapter} /> + <Route path={`${props.match.path}`} component={PerformanceHistoryApplicationRouteAdapter} /> + <Redirect to={`${props.match.path}`} /> + </Switch> ) }); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx index 4a1c654fb..f19058cf2 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx @@ -53,6 +53,7 @@ import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/ import { AppBar, Tabs, Tab } from '@material-ui/core'; import LtpSelection from '../components/ltpSelection'; import { ResetAllSubViewsAction } from '../actions/toggleActions'; +import { ReloadAction } from '../actions/reloadAction'; const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({ root: { @@ -70,7 +71,8 @@ const mapProps = (state: IApplicationStoreState) => ({ availableLtps: state.performanceHistory.ltps.distinctLtps, networkElements: state.performanceHistory.networkElements.deviceList, initialLoaded: state.performanceHistory.ltps.loadedOnce, - error: state.performanceHistory.ltps.error + error: state.performanceHistory.ltps.error, + shouldReload: state.performanceHistory.isReloadSchedueled }); const mapDispatcher = (dispatcher: IDispatcher) => ({ @@ -105,7 +107,8 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({ dispatch(new NavigateToApplication("performanceHistory", nodeId)); }), resetLtps: () => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new ResetLtpsAction()); }), - resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()) + resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction()), + setShouldReload: (show: boolean) => dispatcher.dispatch(new ReloadAction(show)) }); export type NetworkElementType = { @@ -220,7 +223,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp if (nodeId === "") { return ( <> - <NetworkElementTable stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus + <NetworkElementTable defaultSortColumn={"nodeId"} defaultSortOrder="asc" stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus onHandleClick={(event, rowData) => { this.handleNetworkElementSelect(rowData.nodeId) }} columns={ [{ property: "nodeId", title: "Node Name" }] } /> @@ -294,17 +297,8 @@ 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(); - this.props.enableFilterTransmissionPower.onToggleFilter(); - this.props.enableFilterTemperature.onToggleFilter(); - this.props.enableFilterAdaptiveModulation.onToggleFilter(); - this.props.enableFilterSinr.onToggleFilter(); - this.props.enableFilterCpd.onToggleFilter(); } /** @@ -388,9 +382,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp 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 + if (this.props.shouldReload) { + this.setState({ showLtps: true, selectedNetworkElement: selectedNetworkElement, @@ -398,6 +391,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp selectedLtp: "-1" }); this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); + this.props.setShouldReload(false); } } |