From 284da45ec47cb85c6547eb3ae06acaf0578be894 Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Mon, 16 Mar 2020 09:15:00 +0100 Subject: 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 Change-Id: I7d1b71f094dfdd7cd16ed6f7fb5c597a7b209b69 --- .../src/actions/reloadAction.ts | 25 ++++++++ .../src/components/adaptiveModulation.tsx | 8 ++- .../src/components/chartFilter.tsx | 28 ++++++++- .../src/components/crossPolarDiscrimination.tsx | 8 ++- .../src/components/performanceData.tsx | 8 ++- .../src/components/receiveLevel.tsx | 8 ++- .../src/components/signalToInterference.tsx | 8 ++- .../src/components/temperature.tsx | 8 ++- .../src/components/toggleContainer.tsx | 12 ---- .../src/components/transmissionPower.tsx | 8 ++- .../src/handlers/performanceHistoryRootHandler.ts | 13 +++- .../src/pluginPerformance.tsx | 71 ++++++++++++++++------ .../src/views/performanceHistoryApplication.tsx | 24 +++----- 13 files changed, 173 insertions(+), 56 deletions(-) create mode 100644 sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/reloadAction.ts (limited to 'sdnr') 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 { + 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 - + {lineChart(chartPagedData)} 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 = (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 = (props) => { Suspect Interval - props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}> None true false 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 { + 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 - + {lineChart(chartPagedData)} 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 { + 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 - 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}> + 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)} 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{ 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{ return ( <> - + {lineChart(chartPagedData)} 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 { + 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 - + {lineChart(chartPagedData)} 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{ 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{ return ( <> - + {lineChart(chartPagedData)} 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 = (props) => { @@ -68,9 +59,6 @@ const ToggleContainer: React.FunctionComponent = (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 ( <>
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 { + 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 - + {lineChart(chartPagedData)} 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 = (state = "", action) => { @@ -66,6 +68,14 @@ const mountIdHandler: IActionHandler = (state = "", action) => { return state; } +const reloadHandler: IActionHandler = (state = false, action) => { + + if (action instanceof ReloadAction) { + state = action.show; + } + return state; +} + const currentOpenPanelHandler: IActionHandler = (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(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) => { +const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect) => { 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 ( ); @@ -73,11 +108,11 @@ const PerformanceHistoryApplicationRouteAdapter = connect(mapProps, mapDisp)((pr const PerformanceHistoryRouterApp = withRouter((props: RouteComponentProps) => { props.history.action = "POP"; return ( - - - - - + + + + + ) }); 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 - { this.handleNetworkElementSelect(rowData.nodeId) }} columns={ [{ property: "nodeId", title: "Node Name" }] } /> @@ -294,17 +297,8 @@ class PerformanceHistoryComponent extends React.Component { - 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