--- /dev/null
+/**
+ * ============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
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;
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>
+/**
+ * ============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';
});
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 (
<>
{
<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>
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;
});
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>
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;
});
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>
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;
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>
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;
});
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}
/>
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;
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>
}
});
-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) => {
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} >
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
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>
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;
currentOpenPanel: string | null;
pmDataIntervalType: PmDataInterval;
subViews: toggleViewDataType;
+ isReloadSchedueled: boolean;
}
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) {
crossPolarDiscrimination: crossPolarDiscriminationActionHandler,
currentOpenPanel: currentOpenPanelHandler,
pmDataIntervalType: currentPMDataIntervalHandler,
- subViews: toogleViewDataHandler
+ subViews: toogleViewDataHandler,
+ isReloadSchedueled: reloadHandler
};
const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers);
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;
});
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 />
);
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>
)
});
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: {
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) => ({
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 = {
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" }]
} />
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();
}
/**
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,
selectedLtp: "-1"
});
this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
+ this.props.setShouldReload(false);
}
}
Code Review / ccsdk / features.git / commitdiff