From a2041a822f0406742edbd7a1074a73f9c838c0bf Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Fri, 21 Feb 2020 12:45:38 +0100 Subject: Update odlux Update performance app: fix scrolling bug, reduce loading times, update ui to use tabs instead of panels, change the view to toggle between chart and table to better visualize data, minior bugfixes for other apps Issue-ID: SDNC-1080 Signed-off-by: Aijana Schumann Change-Id: I2b5cf3a5f580f4193421bc047e5256d8e9497e6b Signed-off-by: Aijana Schumann --- .../performanceHistoryApp/src/actions/ltpAction.ts | 6 + .../src/actions/toggleActions.ts | 15 ++ .../src/components/adaptiveModulation.tsx | 15 +- .../src/components/crossPolarDiscrimination.tsx | 17 +- .../src/components/ltpSelection.tsx | 87 +++++++ .../src/components/performanceData.tsx | 15 +- .../src/components/receiveLevel.tsx | 19 +- .../src/components/signalToInterference.tsx | 17 +- .../src/components/temperature.tsx | 16 +- .../src/components/toggleContainer.tsx | 68 +++++ .../src/components/transmissionPower.tsx | 15 +- .../src/handlers/availableLtpsActionHandler.ts | 25 +- .../src/handlers/performanceHistoryRootHandler.ts | 29 ++- .../src/models/toggleDataType.ts | 25 ++ .../performanceHistoryApp/src/utils/chartUtils.tsx | 2 +- .../src/views/performanceHistoryApplication.tsx | 286 ++++++++++++++------- 16 files changed, 532 insertions(+), 125 deletions(-) create mode 100644 sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/toggleActions.ts create mode 100644 sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx create mode 100644 sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx create mode 100644 sdnr/wt/odlux/apps/performanceHistoryApp/src/models/toggleDataType.ts (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp') 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 & { @@ -47,6 +52,10 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType{ + 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 - {lineChart(chartPagedData)} - + + {lineChart(chartPagedData)} + + ); }; 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 & { @@ -47,6 +53,11 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType{ + + 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 - {lineChart(chartPagedData)} - + + {lineChart(chartPagedData)} + + ); }; 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): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent): void }; + +export const LtpSelection = (props: LtpSelectionProps) => { + const classes = useStyles(); + return ( + <> +

Selected Network Element: {props.selectedNE}

+ + + Select LTP + + + Time-Period + + + { + !props.finishedLoading && +
+ +

Collecting Data ...

+
+ } + { + props.selectedLtp === "-1" && props.finishedLoading && +
+

Please select a LTP

+
+ } + ) +} + +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 & { @@ -46,6 +50,11 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType{ + + 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 - {lineChart(chartPagedData)} - + + {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 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 & { @@ -47,6 +53,11 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType{ + + 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{ return ( <> - {lineChart(chartPagedData)} - + + {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 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 & { @@ -47,6 +51,11 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType{ + + 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 - {lineChart(chartPagedData)} - + + {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 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 & { @@ -47,6 +51,11 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType{ + + 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{ }); return ( <> - {lineChart(chartPagedData)} - + + + {lineChart(chartPagedData)} + + ); }; 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 = (props) => { + + const classes = styles(); + + const handleChange = (event: React.MouseEvent, newView: string) => { + if (newView !== null) { + props.onChange(newView) + } + }; + + const children = React.Children.toArray(props.children); + + return ( + <> + + + + + + + + + + + + + {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 & { @@ -47,6 +51,11 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType{ + + 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 - {lineChart(chartPagedData)} - + + {lineChart(chartPagedData)} + + ); }; 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 = (state = ltpListStateInit, action) => { @@ -47,14 +50,22 @@ export const availableLtpsActionHandler: IActionHandler = ( 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 = (state = "", action) => { @@ -78,6 +81,29 @@ const currentPMDataIntervalHandler: IActionHandler = (state = Pm return state; } + +type toggleViewDataType = { performanceDataSelection: SubTabType, receiveLevelDataSelection: SubTabType, transmissionPower: SubTabType, adaptiveModulation: SubTabType, temperatur: SubTabType, SINR: SubTabType, CPD: SubTabType }; + + +const toogleViewDataHandler: IActionHandler = (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(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 { - 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 -

Selected Network Element: {this.state.selectedNetworkElement}

- {this.state.showLtps && ( -
- - - Select LTP - - - Time-Period - - - {this.state.showPanels && ( -
- - - - - - - - - - - - - - - - - - - - - -
- )} -
- )} + {this.state.showLtps && + + + } + {this.state.showPanels && + <> + + + + + + + + + + + + + { + activePanel === "PerformanceData" && + + } + + { + activePanel === "ReceiveLevel" && + + } + + { + activePanel === "TransmissionPower" && + + } + + { + activePanel === "AdaptiveModulation" && + + } + { + activePanel === "Temperature" && + + } + + { + activePanel === "SINR" && + + } + + { + activePanel === "CPD" && + + } + + } - ); + ) } - }; + } + public componentDidMount() { this.props.getAllDevicesPMdata(); @@ -257,6 +301,8 @@ class PerformanceHistoryComponent extends React.Component { - 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 { + 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) => { + 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) => { - 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); } } -- cgit 1.2.3-korg