aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/performanceHistoryApp/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/views')
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx286
1 files changed, 186 insertions, 100 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
index ae22f8041..4984e80c3 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -24,7 +24,7 @@ import Select from '@material-ui/core/Select';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import { Panel } from '../../../../framework/src/components/material-ui';
+import { Panel, Loader } from '../../../../framework/src/components/material-ui';
import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
import { Dispatch } from '../../../../framework/src/flux/store';
@@ -39,7 +39,7 @@ import SignalToInterference from '../components/signalToInterference';
import CrossPolarDiscrimination from '../components/crossPolarDiscrimination';
import { loadAllDeviceListAsync } from '../actions/deviceListActions';
import { TimeChangeAction } from '../actions/timeChangeAction';
-import { loadDistinctLtpsbyNetworkElementAsync } from '../actions/ltpAction';
+import { loadDistinctLtpsbyNetworkElementAsync, SetInitialLoadedAction } from '../actions/ltpAction';
import { SetPanelAction } from '../actions/panelChangeActions';
import { createPerformanceDataPreActions, performanceDataReloadAction, createPerformanceDataActions } from '../handlers/performanceDataHandler';
import { createReceiveLevelPreActions, receiveLevelReloadAction, createReceiveLevelActions } from '../handlers/receiveLevelHandler';
@@ -50,6 +50,9 @@ import { createSignalToInterferencePreActions, signalToInterferenceReloadAction,
import { createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler';
import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { AppBar, Tabs, Tab } from '@material-ui/core';
+import LtpSelection from '../components/ltpSelection';
+import { ResetAllSubViewsAction } from '../actions/toggleActions';
const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
root: {
@@ -58,19 +61,6 @@ const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
},
margin: {
margin: theme.spacing(1),
- },
- display: {
- display: "inline-block"
- },
- selectDropdown: {
- borderRadius: 1,
- position: "relative",
- backgroundColor: theme.palette.background.paper,
- border: "1px solid #ced4da",
- fontSize: 16,
- width: "auto",
- padding: "5px 26px 5px 12px",
- transition: theme.transitions.create(["border-color", "box-shadow"]),
}
});
@@ -79,6 +69,7 @@ const mapProps = (state: IApplicationStoreState) => ({
activePanel: state.performanceHistory.currentOpenPanel,
availableLtps: state.performanceHistory.ltps.distinctLtps,
networkElements: state.performanceHistory.networkElements.deviceList,
+ initialLoaded: state.performanceHistory.ltps.loadedOnce
});
const mapDispatcher = (dispatcher: IDispatcher) => ({
@@ -111,7 +102,9 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({
timeIntervalChange: (time: PmDataInterval) => dispatcher.dispatch(new TimeChangeAction(time)),
changeNode: (nodeId: string) => dispatcher.dispatch((dispatch: Dispatch) => {
dispatch(new NavigateToApplication("performanceHistory", nodeId));
- })
+ }),
+ setInitialLoaded: (isLoaded: boolean) => dispatcher.dispatch((dispatch: Dispatch) => { dispatch(new SetInitialLoadedAction(isLoaded)); }),
+ resetSubViews: () => dispatcher.dispatch(new ResetAllSubViewsAction())
});
export type NetworkElementType = {
@@ -127,7 +120,12 @@ type PerformanceHistoryComponentState = {
selectedLtp: string,
showNetworkElementsTable: boolean,
showLtps: boolean,
- showPanels: boolean
+ showPanels: boolean,
+ preFilter:
+ {
+ "node-name": string,
+ "uuid-interface": string
+ } | {}
};
/**
@@ -145,34 +143,70 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
selectedLtp: "-1",
showNetworkElementsTable: true,
showLtps: false,
- showPanels: false
+ showPanels: false,
+ preFilter: {}
};
}
- onTogglePanel = (panelId: PanelId) => {
- const nextActivePanel = panelId === this.props.activePanel ? null : panelId;
+ onChangeTabs = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+ const nextActivePanel = newValue;
+ this.changeTabs(nextActivePanel);
+ }
+
+ changeTabs = (nextActivePanel: PanelId) => {
this.props.setCurrentPanel(nextActivePanel);
+ const preFilter = this.state.preFilter;
switch (nextActivePanel) {
case "PerformanceData":
- this.props.reloadPerformanceData();
+ if (this.props.performanceData.preFilter !== {} && this.props.performanceData.preFilter === preFilter) {
+ this.props.reloadPerformanceData();
+ } else {
+ this.props.performanceDataPreActions.onPreFilterChanged(preFilter);
+ }
break;
case "ReceiveLevel":
- this.props.reloadReceiveLevel();
+ if (this.props.receiveLevel.preFilter !== {} && this.props.receiveLevel.preFilter === preFilter) {
+ this.props.reloadReceiveLevel();
+ }
+ else {
+ this.props.receiveLevelPreActions.onPreFilterChanged(preFilter);
+ }
break;
case "TransmissionPower":
- this.props.reloadTransmissionPower();
+ if (this.props.transmissionPower.preFilter !== {} && this.props.transmissionPower.preFilter === preFilter) {
+ this.props.reloadTransmissionPower();
+ }
+ else {
+ this.props.transmissionPowerPreActions.onPreFilterChanged(preFilter);
+ }
break;
case "AdaptiveModulation":
- this.props.reloadAdaptiveModulation();
+ if (this.props.adaptiveModulation.preFilter !== {} && this.props.adaptiveModulation.preFilter === preFilter) {
+ this.props.reloadAdaptiveModulation();
+ } else {
+ this.props.adaptiveModulationPreActions.onPreFilterChanged(preFilter);
+ }
break;
case "Temperature":
- this.props.reloadTemperature();
+ if (this.props.temperature.preFilter !== {} && this.props.temperature.preFilter === preFilter) {
+ this.props.reloadTemperature();
+ } else {
+ this.props.temperaturePreActions.onPreFilterChanged(preFilter);
+ }
break;
case "SINR":
- this.props.reloadSignalToInterference();
+ if (this.props.signalToInterference.preFilter !== {} && this.props.signalToInterference.preFilter === preFilter) {
+ this.props.reloadSignalToInterference();
+ } else {
+ this.props.signalToInterferencePreActions.onPreFilterChanged(preFilter);
+ }
break;
case "CPD":
- this.props.reloadCrossPolarDiscrimination();
+ if (this.props.crossPolarDiscrimination.preFilter !== {} && this.props.crossPolarDiscrimination.preFilter === preFilter) {
+ this.props.reloadCrossPolarDiscrimination();
+ } else {
+ this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(preFilter);
+ }
break;
default:
// do nothing if all panels are closed
@@ -181,7 +215,6 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
}
render(): JSX.Element {
- const { classes } = this.props;
const { activePanel, nodeId } = this.props;
if (nodeId === "") {
return (
@@ -194,59 +227,70 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
)
}
else {
- 3
this.handleURLChange(nodeId);
return (
<>
- <h3>Selected Network Element: {this.state.selectedNetworkElement} </h3>
- {this.state.showLtps && (
- <div>
- <FormControl className={classes.display}>
- <span>
- Select LTP
- </span>
- <Select className={classes.selectDropdown} value={this.state.selectedLtp} onChange={this.handleLtpChange} >
- <MenuItem value={"-1"}><em>--Select--</em></MenuItem>
- {this.props.availableLtps.map(ltp =>
- (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))}
- </Select>
- <span> Time-Period </span>
- <Select className={classes.selectDropdown} value={this.state.selectedTimePeriod} onChange={this.handleTimePeriodChange} >
- <MenuItem value={"15min"}>15min</MenuItem>
- <MenuItem value={"24hours"}>24hours</MenuItem>
- </Select>
- </FormControl>
- {this.state.showPanels && (
- <div>
- <Panel activePanel={activePanel} panelId={"PerformanceData"} onToggle={this.onTogglePanel} title={"Performance Data"}>
- <PerformanceData selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- <Panel activePanel={activePanel} panelId={"ReceiveLevel"} onToggle={this.onTogglePanel} title={"Receive Level"}>
- <ReceiveLevel selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- <Panel activePanel={activePanel} panelId={"TransmissionPower"} onToggle={this.onTogglePanel} title={"Transmission Power"}>
- <TransmissionPower selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- <Panel activePanel={activePanel} panelId={"AdaptiveModulation"} onToggle={this.onTogglePanel} title={"Adaptive Modulation"}>
- <AdaptiveModulation selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- <Panel activePanel={activePanel} panelId={"Temperature"} onToggle={this.onTogglePanel} title={"Temperature"}>
- <Temperature selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- <Panel activePanel={activePanel} panelId={"SINR"} onToggle={this.onTogglePanel} title={"Signal-to-interference-plus-noise ratio (SINR)"}>
- <SignalToInterference selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- <Panel activePanel={activePanel} panelId={"CPD"} onToggle={this.onTogglePanel} title={"Cross Polar Discrimination"}>
- <CrossPolarDiscrimination selectedTimePeriod={this.state.selectedTimePeriod} />
- </Panel>
- </div>
- )}
- </div>
- )}
+ {this.state.showLtps &&
+
+ <LtpSelection selectedNE={this.state.selectedNetworkElement} selectedLtp={this.state.selectedLtp} selectedTimePeriod={this.state.selectedTimePeriod}
+ availableLtps={this.props.availableLtps} finishedLoading={this.props.initialLoaded} onChangeTimePeriod={this.handleTimePeriodChange}
+ onChangeLtp={this.handleLtpChange}
+ />
+ }
+ {this.state.showPanels &&
+ <>
+
+ <AppBar position="static" >
+ <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance data tabs">
+ <Tab label="Performance Data" value="PerformanceData" />
+ <Tab label="Receive Level" value="ReceiveLevel" />
+ <Tab label="Transmission Power" value="TransmissionPower" />
+ <Tab label="Adaptive Modulation" value="AdaptiveModulation" />
+ <Tab label="Temperature" value="Temperature" />
+ <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" />
+ <Tab label="Cross Polar Discrimination" value="CPD" />
+ </Tabs>
+ </AppBar>
+ {
+ activePanel === "PerformanceData" &&
+ <PerformanceData selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+
+ {
+ activePanel === "ReceiveLevel" &&
+ <ReceiveLevel selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+
+ {
+ activePanel === "TransmissionPower" &&
+ <TransmissionPower selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+
+ {
+ activePanel === "AdaptiveModulation" &&
+ <AdaptiveModulation selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+ {
+ activePanel === "Temperature" &&
+ <Temperature selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+
+ {
+ activePanel === "SINR" &&
+ <SignalToInterference selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+
+ {
+ activePanel === "CPD" &&
+ <CrossPolarDiscrimination selectedTimePeriod={this.state.selectedTimePeriod} />
+ }
+ </>
+ }
</>
- );
+ )
}
- };
+ }
+
public componentDidMount() {
this.props.getAllDevicesPMdata();
@@ -257,6 +301,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
this.props.enableFilterAdaptiveModulation.onToggleFilter();
this.props.enableFilterSinr.onToggleFilter();
this.props.enableFilterCpd.onToggleFilter();
+ this.props.setInitialLoaded(false);
+ this.props.resetSubViews();
}
/**
@@ -268,23 +314,53 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
selectedLtp: firstLtp
});
this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, firstLtp);
+ this.changeTabs("PerformanceData");
}
/**
- * A function which loads the tables based on prefilters defined by network element and ltp on selected time period.
+ * A function which reloads the visible table, if available, based on prefilters defined by network element and ltp on selected time period.
*/
private preFilterChangeAndReload = (networkElement: string, timePeriod: string, ltp: string) => {
- const preFilter = {
+ const newPreFilter = {
"node-name": networkElement,
"uuid-interface": ltp
};
- this.props.performanceDataPreActions.onPreFilterChanged(preFilter);
- this.props.receiveLevelPreActions.onPreFilterChanged(preFilter);
- this.props.transmissionPowerPreActions.onPreFilterChanged(preFilter);
- this.props.adaptiveModulationPreActions.onPreFilterChanged(preFilter);
- this.props.temperaturePreActions.onPreFilterChanged(preFilter);
- this.props.signalToInterferencePreActions.onPreFilterChanged(preFilter);
- this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(preFilter);
+
+ const activePanel = this.props.activePanel;
+
+ if (this.props.activePanel !== null) {
+ // set prefilter and reload data if panel is open
+
+ switch (activePanel) {
+ case "PerformanceData":
+ this.props.performanceDataPreActions.onPreFilterChanged(newPreFilter);
+ break;
+ case "ReceiveLevel":
+ this.props.receiveLevelPreActions.onPreFilterChanged(newPreFilter);
+ break;
+ case "TransmissionPower":
+ this.props.transmissionPowerPreActions.onPreFilterChanged(newPreFilter);
+ break;
+ case "AdaptiveModulation":
+ this.props.adaptiveModulationPreActions.onPreFilterChanged(newPreFilter);
+ break;
+ case "Temperature":
+ this.props.temperaturePreActions.onPreFilterChanged(newPreFilter);
+ break;
+ case "SINR":
+ this.props.signalToInterferencePreActions.onPreFilterChanged(newPreFilter);
+ break;
+ case "CPD":
+ this.props.crossPolarDiscriminationPreActions.onPreFilterChanged(newPreFilter);
+ break;
+ default:
+ // do nothing if all panels are closed
+ break;
+ }
+ }
+
+ // set prefilter
+ this.setState({ preFilter: newPreFilter })
}
@@ -300,12 +376,19 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
showPanels: false,
selectedLtp: "-1"
});
+
+ this.props.setInitialLoaded(false);
+ this.props.resetSubViews();
+ this.setState({ preFilter: {} });
this.props.changeNode(selectedNetworkElement);
this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
}
private handleURLChange = (selectedNetworkElement: string) => {
+
if (selectedNetworkElement !== this.state.selectedNetworkElement) {
+ // gets called if page is reloaded / opened with a networkname in the url,
+ // not if the selected networkelement is changed
this.setState({
showLtps: true,
selectedNetworkElement: selectedNetworkElement,
@@ -324,6 +407,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
if (ltpNotSelected) {
this.setState({
selectedLtp: "-1",
+ showPanels: false
});
}
}
@@ -332,21 +416,16 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
* Function which handles the time period changes.
*/
private handleTimePeriodChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+
const selectedTimeInterval = event.target.value === "15min"
? PmDataInterval.pmInterval15Min
- : PmDataInterval.pmInterval24Hours
+ : PmDataInterval.pmInterval24Hours;
this.setState({
selectedTimePeriod: event.target.value,
});
+
this.props.timeIntervalChange(selectedTimeInterval);
- this.props.reloadPerformanceData();
- this.props.reloadReceiveLevel();
- this.props.reloadTransmissionPower();
- this.props.reloadAdaptiveModulation();
- this.props.reloadTemperature();
- this.props.reloadSignalToInterference();
- this.props.reloadCrossPolarDiscrimination();
this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp);
}
@@ -355,15 +434,22 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
* Function which handles the ltp changes.
*/
private handleLtpChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
- var showPanels: boolean = true;
+
if (event.target.value === "-1") {
- showPanels = false;
+ this.setState({
+ showPanels: false,
+ selectedLtp: event.target.value
+ });
+ this.props.setCurrentPanel(null);
+
+ } else if (event.target.value !== this.state.selectedLtp) {
+ this.setState({
+ showPanels: true,
+ selectedLtp: event.target.value
+ });
+ this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value);
+
}
- this.setState({
- showPanels: showPanels,
- selectedLtp: event.target.value
- });
- this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value);
}
}