summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/performanceHistoryApp
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp')
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts6
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts15
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx15
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx17
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx87
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx15
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx19
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx17
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx16
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx68
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx15
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts25
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts29
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts25
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx286
16 files changed, 532 insertions, 125 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
index 2741d889a..375617593 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
@@ -44,6 +44,12 @@ export class AllAvailableLtpsLoadedAction extends BaseAction {
}
}
+export class SetInitialLoadedAction extends BaseAction {
+ constructor(public initialLoaded: boolean) {
+ super();
+ }
+}
+
/**
* Represents an asynchronous thunk action to load available distinctLtps by networkElement from the database and set the returned first Ltp as default.
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts
new file mode 100644
index 000000000..1f53a5806
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts
@@ -0,0 +1,15 @@
+import { Action } from "../../../../framework/src/flux/action";
+import { currentViewType } from "../models/toggleDataType";
+
+
+export class SetSubViewAction extends Action {
+ constructor(public currentView: currentViewType, public selectedTab: "chart" | "table") {
+ super();
+ }
+}
+
+export class ResetAllSubViewsAction extends Action {
+ constructor() {
+ 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 09d3accd4..c62698630 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -28,13 +28,18 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
import { createAdaptiveModulationProperties, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler';
import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+import { SetSubViewAction } from '../actions/toggleActions';
const mapProps = (state: IApplicationStoreState) => ({
adaptiveModulationProperties: createAdaptiveModulationProperties(state),
+ currentView: state.performanceHistory.subViews.adaptiveModulation,
+
});
const mapDisp = (dispatcher: IDispatcher) => ({
adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)),
});
type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +52,10 @@ 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>{
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.adaptiveModulationProperties;
const actions = this.props.adaptiveModulationActions;
@@ -69,8 +78,10 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
return (
<>
- {lineChart(chartPagedData)}
- <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
+ </ToggleContainer>
</>
);
};
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
index 267e00bbe..7489757f5 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -28,13 +28,19 @@ 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 ToggleContainer from './toggleContainer';
+
const mapProps = (state: IApplicationStoreState) => ({
crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state),
+ currentView: state.performanceHistory.subViews.CPD,
+
});
const mapDisp = (dispatcher: IDispatcher) => ({
crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)),
});
type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +53,11 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro
* The Component which gets the crossPolarDiscrimination data from the database based on the selected time period.
*/
class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{
+
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.crossPolarDiscriminationProperties;
const actions = this.props.crossPolarDiscriminationActions;
@@ -70,8 +81,10 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
});
return (
<>
- {lineChart(chartPagedData)}
- <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} />
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <CrossPolarDiscriminationTable 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
new file mode 100644
index 000000000..8327ec4ed
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -0,0 +1,87 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 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 { MenuItem, Select, FormControl } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { LtpIds } from 'models/availableLtps';
+import { Loader } from '../../../../framework/src/components/material-ui';
+
+
+const useStyles = makeStyles(theme => ({
+ 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"]),
+ },
+ center: {
+ "flex": "1",
+ "height": "100%",
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ }
+}));
+
+type LtpSelectionProps = { selectedNE: 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();
+ return (
+ <>
+ <h3>Selected Network Element: {props.selectedNE} </h3>
+ <FormControl className={classes.display}>
+ <span>
+ Select LTP
+ </span>
+ <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} >
+ <MenuItem value={"-1"}><em>--Select--</em></MenuItem>
+ {props.availableLtps.map(ltp =>
+ (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))}
+ </Select>
+ <span> Time-Period </span>
+ <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} >
+ <MenuItem value={"15min"}>15min</MenuItem>
+ <MenuItem value={"24hours"}>24hours</MenuItem>
+ </Select>
+ </FormControl>
+ {
+ !props.finishedLoading &&
+ <div className={classes.center}>
+ <Loader />
+ <h3>Collecting Data ...</h3>
+ </div>
+ }
+ {
+ props.selectedLtp === "-1" && props.finishedLoading &&
+ <div className={classes.center}>
+ <h3>Please select a LTP</h3>
+ </div>
+ }
+ </>)
+}
+
+export default LtpSelection; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
index c58c49c9e..d0caa6fd6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -27,13 +27,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler';
import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+import { SetSubViewAction } from '../actions/toggleActions';
const mapProps = (state: IApplicationStoreState) => ({
performanceDataProperties: createPerformanceDataProperties(state),
+ currentView: state.performanceHistory.subViews.performanceDataSelection,
});
const mapDisp = (dispatcher: IDispatcher) => ({
performanceDataActions: createPerformanceDataActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)),
});
type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -46,6 +50,11 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD
* The Component which gets the performance data from the database based on the selected time period.
*/
class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{
+
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.performanceDataProperties;
const actions = this.props.performanceDataActions;
@@ -68,8 +77,10 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
});
return (
<>
- {lineChart(chartPagedData)}
- <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} />
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <PerformanceDataTable 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 55bc39860..4b0a835d4 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -23,18 +23,24 @@ import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '.
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
-import { ReceiveLevelDataType,ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType';
+import { ReceiveLevelDataType, ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType';
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 ToggleContainer from './toggleContainer';
const mapProps = (state: IApplicationStoreState) => ({
receiveLevelProperties: createReceiveLevelProperties(state),
+ currentView: state.performanceHistory.subViews.receiveLevelDataSelection,
+
});
const mapDisp = (dispatcher: IDispatcher) => ({
receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)),
+
});
type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +53,11 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat
* The Component which gets the receiveLevel data from the database based on the selected time period.
*/
class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
+
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.receiveLevelProperties;
const actions = this.props.receiveLevelActions;
@@ -70,8 +81,10 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
return (
<>
- {lineChart(chartPagedData)}
- <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} />
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <ReceiveLevelTable 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 42aa007a9..ba480d57d 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -28,13 +28,17 @@ 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 ToggleContainer from './toggleContainer';
const mapProps = (state: IApplicationStoreState) => ({
signalToInterferenceProperties: createSignalToInterferenceProperties(state),
+ currentView: state.performanceHistory.subViews.SINR,
});
const mapDisp = (dispatcher: IDispatcher) => ({
signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)),
});
type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +51,11 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT
* The Component which gets the signal to interference data from the database based on the selected time period.
*/
class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{
+
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.signalToInterferenceProperties;
const actions = this.props.signalToInterferenceActions;
@@ -70,9 +79,11 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
});
return (
<>
- {lineChart(chartPagedData)}
- <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions}
- />
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <SignalToInterferenceTable 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 256911c2d..28f75d84c 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
import { createTemperatureProperties, createTemperatureActions } from '../handlers/temperatureHandler';
import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+import { SetSubViewAction } from '../actions/toggleActions';
const mapProps = (state: IApplicationStoreState) => ({
temperatureProperties: createTemperatureProperties(state),
+ currentView: state.performanceHistory.subViews.temperatur,
});
const mapDisp = (dispatcher: IDispatcher) => ({
temperatureActions: createTemperatureActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)),
});
type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +51,11 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT
* The Component which gets the temperature data from the database based on the selected time period.
*/
class TemperatureComponent extends React.Component<TemperatureComponentProps>{
+
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.temperatureProperties;
const actions = this.props.temperatureActions;
@@ -69,8 +78,11 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
});
return (
<>
- {lineChart(chartPagedData)}
- <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} />
+
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <TemperatureTable 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
new file mode 100644
index 000000000..97a2006f7
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
@@ -0,0 +1,68 @@
+/**
+ * ============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 ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+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';
+
+const styles = makeStyles({
+ toggleButton: {
+ alignItems: "center",
+ justifyContent: "center",
+ padding: "10px",
+ }
+});
+
+type toggleProps = { selectedValue: string, onChange(value: string): void };
+
+const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
+
+ const classes = styles();
+
+ const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
+ if (newView !== null) {
+ props.onChange(newView)
+ }
+ };
+
+ const children = React.Children.toArray(props.children);
+
+ 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>
+ {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]}
+ </>);
+
+}
+
+export default ToggleContainer; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
index 635cbf103..6fe66d2b5 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -28,13 +28,17 @@ 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 ToggleContainer from './toggleContainer';
const mapProps = (state: IApplicationStoreState) => ({
transmissionPowerProperties: createTransmissionPowerProperties(state),
+ currentView: state.performanceHistory.subViews.transmissionPower,
});
const mapDisp = (dispatcher: IDispatcher) => ({
transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch),
+ setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)),
});
type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +51,11 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<Transmissi
* The Component which gets the transmission power data from the database based on the selected time period.
*/
class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{
+
+ onChange = (value: "chart" | "table") => {
+ this.props.setSubView(value);
+ }
+
render(): JSX.Element {
const properties = this.props.transmissionPowerProperties
const actions = this.props.transmissionPowerActions
@@ -71,8 +80,10 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
return (
<>
- {lineChart(chartPagedData)}
- <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} />
+ <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+ {lineChart(chartPagedData)}
+ <TransmissionPowerTable 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 b3b284b42..fd137fe37 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
@@ -20,6 +20,7 @@ import { IActionHandler } from '../../../../framework/src/flux/action';
import {
AllAvailableLtpsLoadedAction,
LoadAllAvailableLtpsAction,
+ SetInitialLoadedAction,
} from '../actions/ltpAction';
import { LtpIds } from '../models/availableLtps';
@@ -27,11 +28,13 @@ import { LtpIds } from '../models/availableLtps';
export interface IAvailableLtpsState {
distinctLtps: LtpIds[];
busy: boolean;
+ loadedOnce: boolean;
}
const ltpListStateInit: IAvailableLtpsState = {
distinctLtps: [],
- busy: false
+ busy: false,
+ loadedOnce: false
};
export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = (state = ltpListStateInit, action) => {
@@ -47,14 +50,22 @@ export const availableLtpsActionHandler: IActionHandler<IAvailableLtpsState> = (
state = {
...state,
distinctLtps: action.availableLtps,
- busy: false
- };
- } else {
- state = {
- ...state,
- busy: false
+ busy: false,
+ loadedOnce: true
};
}
+ } else if (action instanceof SetInitialLoadedAction) {
+
+ state = {
+ ...state,
+ loadedOnce: action.initialLoaded
+ };
+ } else {
+ state = {
+ ...state,
+ busy: false
+ };
}
+
return state;
}; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
index c33f10a7e..e57f3860c 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
@@ -37,6 +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';
export interface IPerformanceHistoryStoreState {
nodeId: string;
@@ -51,6 +53,7 @@ export interface IPerformanceHistoryStoreState {
crossPolarDiscrimination: ICrossPolarDiscriminationState;
currentOpenPanel: string | null;
pmDataIntervalType: PmDataInterval;
+ subViews: toggleViewDataType;
}
const mountIdHandler: IActionHandler<string> = (state = "", action) => {
@@ -78,6 +81,29 @@ const currentPMDataIntervalHandler: IActionHandler<PmDataInterval> = (state = Pm
return state;
}
+
+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) => {
+
+ 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;
+ }
+ } else if (action instanceof ResetAllSubViewsAction) {
+ state = { performanceDataSelection: "chart", adaptiveModulation: "chart", receiveLevelDataSelection: "chart", transmissionPower: "chart", temperatur: "chart", SINR: "chart", CPD: "chart" }
+ }
+
+ return state;
+}
+
declare module '../../../../framework/src/store/applicationStore' {
interface IApplicationStoreState {
performanceHistory: IPerformanceHistoryStoreState;
@@ -97,7 +123,8 @@ const actionHandlers = {
signalToInterference: signalToInterferenceActionHandler,
crossPolarDiscrimination: crossPolarDiscriminationActionHandler,
currentOpenPanel: currentOpenPanelHandler,
- pmDataIntervalType: currentPMDataIntervalHandler
+ pmDataIntervalType: currentPMDataIntervalHandler,
+ subViews: toogleViewDataHandler
};
const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts
new file mode 100644
index 000000000..f705e10b2
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.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==========================================================================
+ */
+
+/**
+ * Specifies possible sub views
+ */
+export type SubTabType = "chart" | "table";
+
+export type currentViewType = "performanceData" | "receiveLevel" | "transmissionPower" | "adaptiveModulation" | "Temp" | "SINR" | "CPD";
+
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
index 3240f73f1..f58638e30 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
@@ -22,7 +22,7 @@ import * as moment from 'moment';
import { ITimeStamp } from 'models/chartTypes';
const style: React.CSSProperties = {
- height: "350px"
+ height: "80%"
}
export const lineChart = (chartPagedData: IDataSetsObject) => {
return (
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);
}
}