From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001 From: sai-neetha Date: Mon, 20 Mar 2023 08:05:47 +0100 Subject: Odlux Update Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert --- .../src/components/adaptiveModulation.tsx | 285 ++++++++++----------- .../src/components/chartFilter.tsx | 79 +++--- .../src/components/crossPolarDiscrimination.tsx | 83 +++--- .../src/components/ltpSelection.tsx | 153 +++++------ .../src/components/performanceData.tsx | 80 +++--- .../src/components/receiveLevel.tsx | 80 +++--- .../src/components/signalToInterference.tsx | 83 +++--- .../src/components/temperature.tsx | 80 +++--- .../src/components/toggleContainer.tsx | 73 +++--- .../src/components/transmissionPower.tsx | 89 ++++--- 10 files changed, 540 insertions(+), 545 deletions(-) (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components') diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx index 17b1374b8..5dac0bc14 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -15,37 +15,36 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { AdaptiveModulationDataType, AdaptiveModulationDatabaseDataType } from '../models/adaptiveModulationDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createAdaptiveModulationActions, createAdaptiveModulationProperties } from '../handlers/adaptiveModulationHandler'; +import { AdaptiveModulationDatabaseDataType, AdaptiveModulationDataType } from '../models/adaptiveModulationDataType'; 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, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ adaptiveModulationProperties: createAdaptiveModulationProperties(state), currentView: state.performanceHistory.subViews.adaptiveModulation.subView, isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible, - existingFilter: state.performanceHistory.adaptiveModulation.filter + existingFilter: state.performanceHistory.adaptiveModulation.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("adaptiveModulation", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('adaptiveModulation', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('adaptiveModulation', value)); }, }); type AdaptiveModulationComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType; @@ -53,21 +52,20 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType{ - +class AdaptiveModulationComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.adaptiveModulationActions.onFilterChanged(property, filterTerm); if (!this.props.adaptiveModulationProperties.showFilter) this.props.adaptiveModulationActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.adaptiveModulationProperties; @@ -75,11 +73,11 @@ class AdaptiveModulationComponent extends React.Component[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, }]; chartPagedData.datasets.forEach(ds => { @@ -88,13 +86,14 @@ class AdaptiveModulationComponent extends React.Component - + {lineChart(chartPagedData)} - + ); - }; + } /** * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure @@ -102,345 +101,345 @@ class AdaptiveModulationComponent extends React.Component { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "time2StatesS", - label: "QAM2S", + name: 'time2StatesS', + label: 'QAM2S', borderColor: '#62a309fc', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2S", + columnLabel: 'QAM2S', }, { - name: "time2States", - label: "QAM2", + name: 'time2States', + label: 'QAM2', borderColor: '#62a309fc', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2", + columnLabel: 'QAM2', }, { - name: "time2StatesL", - label: "QAM2L", + name: 'time2StatesL', + label: 'QAM2L', borderColor: '#62a309fc', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2L", + columnLabel: 'QAM2L', }, { - name: "time4StatesS", - label: "QAM4S", + name: 'time4StatesS', + label: 'QAM4S', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4S", + columnLabel: 'QAM4S', }, { - name: "time4States", - label: "QAM4", + name: 'time4States', + label: 'QAM4', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4", + columnLabel: 'QAM4', }, { - name: "time4StatesL", - label: "QAM4L", + name: 'time4StatesL', + label: 'QAM4L', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4L", + columnLabel: 'QAM4L', }, { - name: "time16StatesS", - label: "QAM16S", + name: 'time16StatesS', + label: 'QAM16S', borderColor: '#9b15e2', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM16S", + columnLabel: 'QAM16S', }, { - name: "time16States", - label: "QAM16", + name: 'time16States', + label: 'QAM16', borderColor: '#9b15e2', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM16", + columnLabel: 'QAM16', }, { - name: "time16StatesL", - label: "QAM16L", + name: 'time16StatesL', + label: 'QAM16L', borderColor: '#9b15e2', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM16L", + columnLabel: 'QAM16L', }, { - name: "time32StatesS", - label: "QAM32S", + name: 'time32StatesS', + label: 'QAM32S', borderColor: '#2704f5f0', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM32S", + columnLabel: 'QAM32S', }, { - name: "time32States", - label: "QAM32", + name: 'time32States', + label: 'QAM32', borderColor: '#2704f5f0', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM32", + columnLabel: 'QAM32', }, { - name: "time32StatesL", - label: "QAM32L", + name: 'time32StatesL', + label: 'QAM32L', borderColor: '#2704f5f0', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM32L", + columnLabel: 'QAM32L', }, { - name: "time64StatesS", - label: "QAM64S", + name: 'time64StatesS', + label: 'QAM64S', borderColor: '#347692', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM64S", + columnLabel: 'QAM64S', }, { - name: "time64States", - label: "QAM64", + name: 'time64States', + label: 'QAM64', borderColor: '#347692', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM64", + columnLabel: 'QAM64', }, { - name: "time64StatesL", - label: "QAM64L", + name: 'time64StatesL', + label: 'QAM64L', borderColor: '#347692', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM64L", + columnLabel: 'QAM64L', }, { - name: "time128StatesS", - label: "QAM128S", + name: 'time128StatesS', + label: 'QAM128S', borderColor: '#885e22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM128S", + columnLabel: 'QAM128S', }, { - name: "time128States", - label: "QAM128", + name: 'time128States', + label: 'QAM128', borderColor: '#885e22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM128", + columnLabel: 'QAM128', }, { - name: "time128StatesL", - label: "QAM128L", + name: 'time128StatesL', + label: 'QAM128L', borderColor: '#885e22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM128L", + columnLabel: 'QAM128L', }, { - name: "time256StatesS", - label: "QAM256S", + name: 'time256StatesS', + label: 'QAM256S', borderColor: '#de07807a', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM256S", + columnLabel: 'QAM256S', }, { - name: "time256States", - label: "QAM256", + name: 'time256States', + label: 'QAM256', borderColor: '#de07807a', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM256", + columnLabel: 'QAM256', }, { - name: "time256StatesL", - label: "QAM256L", + name: 'time256StatesL', + label: 'QAM256L', borderColor: '#de07807a', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM256L", + columnLabel: 'QAM256L', }, { - name: "time512StatesS", - label: "QAM512S", + name: 'time512StatesS', + label: 'QAM512S', borderColor: '#8fdaacde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM512S", + columnLabel: 'QAM512S', }, { - name: "time512States", - label: "QAM512", + name: 'time512States', + label: 'QAM512', borderColor: '#8fdaacde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM512", + columnLabel: 'QAM512', }, { - name: "time512StatesL", - label: "QAM512L", + name: 'time512StatesL', + label: 'QAM512L', borderColor: '#8fdaacde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM512L", + columnLabel: 'QAM512L', }, { - name: "time1024StatesS", - label: "QAM1024S", + name: 'time1024StatesS', + label: 'QAM1024S', borderColor: '#435b22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM1024S", + columnLabel: 'QAM1024S', }, { - name: "time1024States", - label: "QAM1024", + name: 'time1024States', + label: 'QAM1024', borderColor: '#435b22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM1024", + columnLabel: 'QAM1024', }, { - name: "time1024StatesL", - label: "QAM1024L", + name: 'time1024StatesL', + label: 'QAM1024L', borderColor: '#435b22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM1024L", + columnLabel: 'QAM1024L', }, { - name: "time2048StatesS", - label: "QAM2048S", + name: 'time2048StatesS', + label: 'QAM2048S', borderColor: '#e87a5b', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2048S", + columnLabel: 'QAM2048S', }, { - name: "time2048States", - label: "QAM2048", + name: 'time2048States', + label: 'QAM2048', borderColor: '#e87a5b', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2048", + columnLabel: 'QAM2048', }, { - name: "time2048StatesL", - label: "QAM2048L", + name: 'time2048StatesL', + label: 'QAM2048L', borderColor: '#e87a5b', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2048L", + columnLabel: 'QAM2048L', }, { - name: "time4096StatesS", - label: "QAM4096S", + name: 'time4096StatesS', + label: 'QAM4096S', borderColor: '#5be878', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4096S", + columnLabel: 'QAM4096S', }, { - name: "time4096States", - label: "QAM4096", + name: 'time4096States', + label: 'QAM4096', borderColor: '#5be878', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4096", + columnLabel: 'QAM4096', }, { - name: "time4096StatesL", - label: "QAM4096L", + name: 'time4096StatesL', + label: 'QAM4096L', borderColor: '#5be878', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4096L", + columnLabel: 'QAM4096L', }, { - name: "time8192StatesS", - label: "QAM8192s", + name: 'time8192StatesS', + label: 'QAM8192s', borderColor: '#cb5be8', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM8192S", + columnLabel: 'QAM8192S', }, { - name: "time8192States", - label: "QAM8192", + name: 'time8192States', + label: 'QAM8192', borderColor: '#cb5be8', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM8192", + columnLabel: 'QAM8192', }, { - name: "time8192StatesL", - label: "QAM8192L", + name: 'time8192StatesL', + label: 'QAM8192L', borderColor: '#cb5be8', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM8192L", - } + columnLabel: 'QAM8192L', + }, ]; - _rows.forEach(row => { - row.time2StatesS = row.performanceData.time2StatesS + data_rows.forEach(row => { + row.time2StatesS = row.performanceData.time2StatesS; row.time2States = row.performanceData.time2States; row.time2StatesL = row.performanceData.time2StatesL; - row.time4StatesS = row.performanceData.time4StatesS + row.time4StatesS = row.performanceData.time4StatesS; row.time4States = row.performanceData.time4States; row.time4StatesL = row.performanceData.time4StatesL; row.time16StatesS = row.performanceData.time16StatesS; @@ -475,16 +474,16 @@ class AdaptiveModulationComponent extends React.Component { ds.data.push({ - x: row["timeStamp" as keyof AdaptiveModulationDataType] as string, - y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string + x: row['timeStamp' as keyof AdaptiveModulationDataType] as string, + y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent)); export default AdaptiveModulation; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx index e66e6c1e6..021f74a4f 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx @@ -18,57 +18,58 @@ import * as React from 'react'; -import { TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@mui/material'; + +import { TextField, Select, MenuItem, FormControl, InputLabel } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; const styles = makeStyles({ - filterInput: { - marginRight: "15px" - }, - filterContainer: { - marginLeft: "90px" - } + filterInput: { + marginRight: '15px', + }, + filterContainer: { + marginLeft: '90px', + }, }); -type filterProps = { isVisible: boolean, onFilterChanged: (property: string, filterTerm: string) => void, filters: any }; +type filterProps = { isVisible: boolean; onFilterChanged: (property: string, filterTerm: string) => void; filters: any }; const ChartFilter: React.FunctionComponent = (props) => { - const classes = styles(); - - // make sure suspectIntervalFlag is a string to show the correct value in the select element + const classes = styles(); - const suspectIntervalFlag = props.filters.suspectIntervalFlag === undefined ? undefined : props.filters.suspectIntervalFlag.toString(); - return ( - <> - { - props.isVisible && -
- props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ - shrink: true, - }} /> - props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ - shrink: true, - }} /> - props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ - shrink: true, - }} /> - - Suspect Interval + // make sure suspectIntervalFlag is a string to show the correct value in the select element - - - - } - - ) + const suspectIntervalFlag = props.filters.suspectIntervalFlag === undefined ? undefined : props.filters.suspectIntervalFlag.toString(); + return ( + <> + { + props.isVisible && +
+ props.onFilterChanged('radioSignalId', event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + props.onFilterChanged('scannerId', event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + props.onFilterChanged('timeStamp', event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + + Suspect Interval -} + + + + } + + ); +}; export default ChartFilter; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx index 14cc02d6d..5f925a9ad 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -15,20 +15,19 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, MaterialTableCtorType, ColumnModel } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { CrossPolarDiscriminationDataType, CrossPolarDiscriminationDatabaseDataType } from '../models/crossPolarDiscriminationDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createCrossPolarDiscriminationActions, createCrossPolarDiscriminationProperties } from '../handlers/crossPolarDiscriminationHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createCrossPolarDiscriminationProperties, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler'; +import { CrossPolarDiscriminationDatabaseDataType, CrossPolarDiscriminationDataType } from '../models/crossPolarDiscriminationDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; @@ -36,18 +35,18 @@ const mapProps = (state: IApplicationStoreState) => ({ crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state), currentView: state.performanceHistory.subViews.CPD.subView, isFilterVisible: state.performanceHistory.subViews.CPD.isFilterVisible, - existingFilter: state.performanceHistory.crossPolarDiscrimination.filter + existingFilter: state.performanceHistory.crossPolarDiscrimination.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("CPD", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('CPD', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('CPD', value));}, }); type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType; @@ -55,21 +54,20 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType{ - +class CrossPolarDiscriminationComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.crossPolarDiscriminationActions.onFilterChanged(property, filterTerm); if (!this.props.crossPolarDiscriminationProperties.showFilter) this.props.crossPolarDiscriminationActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.crossPolarDiscriminationProperties; @@ -78,12 +76,12 @@ class CrossPolarDiscriminationComponent extends React.Component[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -91,66 +89,67 @@ class CrossPolarDiscriminationComponent extends React.Component - + {lineChart(chartPagedData)} - + ); - }; + } /** * This function gets the performance values for CPD according on the chartjs dataset structure * which is to be sent to the chart. */ private getChartDataValues = (rows: CrossPolarDiscriminationDataType[]): IDataSetsObject => { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "xpdMin", - label: "xpd-min", + name: 'xpdMin', + label: 'xpd-min', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "CPD (min)[db]" + columnLabel: 'CPD (min)[db]', }, { - name: "xpdAvg", - label: "xpd-avg", + name: 'xpdAvg', + label: 'xpd-avg', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "CPD (avg)[db]" + columnLabel: 'CPD (avg)[db]', }, { - name: "xpdMax", - label: "xpd-max", + name: 'xpdMax', + label: 'xpd-max', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "CPD (max)[db]" + columnLabel: 'CPD (max)[db]', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.xpdMin = row.performanceData.xpdMin; row.xpdAvg = row.performanceData.xpdAvg; row.xpdMax = row.performanceData.xpdMax; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof CrossPolarDiscriminationDataType] as string, - y: row.performanceData[ds.name as keyof CrossPolarDiscriminationDatabaseDataType] as string + x: row['timeStamp' as keyof CrossPolarDiscriminationDataType] as string, + y: row.performanceData[ds.name as keyof CrossPolarDiscriminationDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent)); export default CrossPolarDiscrimination; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx index ef6cfc712..bd6333be7 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx @@ -15,90 +15,91 @@ * the License. * ============LICENSE_END========================================================================== */ +import React from 'react'; -import * as React from 'react'; -import { MenuItem, Select, FormControl, Typography, SelectChangeEvent } from '@mui/material'; +import { FormControl, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material'; +import { Theme } from '@mui/material/styles'; import makeStyles from '@mui/styles/makeStyles'; -import { LtpIds } from 'models/availableLtps'; import { Loader } from '../../../../framework/src/components/material-ui'; - -import { Theme } from '@mui/material/styles'; +import { LtpIds } from '../models/availableLtps'; const useStyles = makeStyles((theme: 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 5px 5px 5px", - transition: theme.transitions.create(["border-color", "box-shadow"]), - }, - center: { - "flex": "1", - "height": "100%", - "display": "flex", - "alignItems": "center", - "justifyContent": "center", - flexDirection: "column" - } + display: { + display: 'inline-block', + }, + selectDropdown: { + borderRadius: 1, + position: 'relative', + backgroundColor: theme.palette.background.paper, + border: '1px solid #ced4da', + fontSize: 16, + width: 'auto', + padding: '5px 5px 5px 5px', + transition: theme.transitions.create(['border-color', 'box-shadow']), + }, + center: { + 'flex': '1', + 'height': '100%', + 'display': 'flex', + 'alignItems': 'center', + 'justifyContent': 'center', + flexDirection: 'column', + }, })); -type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, - availableLtps: LtpIds[], - onChangeLtp(event: SelectChangeEvent ): void, - selectedTimePeriod: string, - onChangeTimePeriod(event: SelectChangeEvent ): void }; +type LtpSelectionProps = { + selectedNE: string; error?: string; finishedLoading: boolean; selectedLtp: string; + availableLtps: LtpIds[]; + onChangeLtp(event: SelectChangeEvent): void; + selectedTimePeriod: string; + onChangeTimePeriod(event: SelectChangeEvent): void; +}; export const LtpSelection = (props: LtpSelectionProps) => { - const classes = useStyles(); - return ( - <> -

Selected Network Element: {props.selectedNE}

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

Collecting Data ...

-
- } - { - props.finishedLoading && props.error && -
-

Data couldn't be loaded

- {props.error} -
- } - { - props.selectedLtp === "-1" && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ? -
-

Please select a LTP

-
- : -
-

No performance data found

-
) - } - ) -} + const classes = useStyles(); + return ( + <> +

Selected Network Element: {props.selectedNE}

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

Collecting Data ...

+
+ } + { + props.finishedLoading && props.error && +
+

Data couldn't be loaded

+ {props.error} +
+ } + { + props.selectedLtp === '-1' && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ? +
+

Please select a LTP

+
+ : +
+

No performance data found

+
) + } + ); +}; 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 6a06ea351..fb608aac6 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -15,36 +15,36 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { PerformanceDataType, PerformanceDatabaseDataType } from '../models/performanceDataType'; + +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createPerformanceDataActions, createPerformanceDataProperties } from '../handlers/performanceDataHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler'; +import { PerformanceDatabaseDataType, PerformanceDataType } from '../models/performanceDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ performanceDataProperties: createPerformanceDataProperties(state), currentView: state.performanceHistory.subViews.performanceData.subView, isFilterVisible: state.performanceHistory.subViews.performanceData.isFilterVisible, - existingFilter: state.performanceHistory.performanceData.filter + existingFilter: state.performanceHistory.performanceData.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ performanceDataActions: createPerformanceDataActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("performanceData", value)) } + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('performanceData', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('performanceData', value)); }, }); type PerformanceDataComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const PerformanceDataTable = MaterialTable as MaterialTableCtorType; @@ -52,17 +52,16 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType{ - +class PerformanceDataComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.performanceDataActions.onFilterChanged(property, filterTerm); if (!this.props.performanceDataProperties.showFilter) this.props.performanceDataActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.performanceDataProperties; @@ -70,12 +69,12 @@ class PerformanceDataComponent extends React.Component[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -83,67 +82,68 @@ class PerformanceDataComponent extends React.Component - this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> + this.props.toggleFilterButton(!this.props.isFilterVisible)} + existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> {lineChart(chartPagedData)} - + ); - }; + } /** * This function gets the performance values for PerformanceData according on the chartjs dataset structure * which is to be sent to the chart. */ private getChartDataValues = (rows: PerformanceDataType[]): IDataSetsObject => { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "es", - label: "es", + name: 'es', + label: 'es', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "ES" + columnLabel: 'ES', }, { - name: "ses", - label: "ses", + name: 'ses', + label: 'ses', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "SES" + columnLabel: 'SES', }, { - name: "unavailability", - label: "unavailability", + name: 'unavailability', + label: 'unavailability', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Unavailability" + columnLabel: 'Unavailability', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.es = row.performanceData.es; row.ses = row.performanceData.ses; row.unavailability = row.performanceData.unavailability; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof PerformanceDataType] as string, - y: row.performanceData[ds.name as keyof PerformanceDatabaseDataType] as string + x: row['timeStamp' as keyof PerformanceDataType] as string, + y: row.performanceData[ds.name as keyof PerformanceDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent)); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx index 8dc92b8ac..125cc6ee6 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -15,37 +15,36 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { ReceiveLevelDataType, ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createReceiveLevelActions, createReceiveLevelProperties } from '../handlers/receiveLevelHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createReceiveLevelProperties, createReceiveLevelActions } from '../handlers/receiveLevelHandler'; +import { ReceiveLevelDatabaseDataType, ReceiveLevelDataType } from '../models/receiveLevelDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ receiveLevelProperties: createReceiveLevelProperties(state), currentView: state.performanceHistory.subViews.receiveLevel.subView, isFilterVisible: state.performanceHistory.subViews.receiveLevel.isFilterVisible, - existingFilter: state.performanceHistory.receiveLevel.filter + existingFilter: state.performanceHistory.receiveLevel.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("receiveLevel", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('receiveLevel', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('receiveLevel', value)); }, }); type ReceiveLevelComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const ReceiveLevelTable = MaterialTable as MaterialTableCtorType; @@ -53,22 +52,21 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType{ - +class ReceiveLevelComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.receiveLevelActions.onFilterChanged(property, filterTerm); if (!this.props.receiveLevelProperties.showFilter) this.props.receiveLevelActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.receiveLevelProperties; @@ -76,12 +74,12 @@ class ReceiveLevelComponent extends React.Component{ const chartPagedData = this.getChartDataValues(properties.rows); const receiveLevelColumns: ColumnModel[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -92,64 +90,64 @@ class ReceiveLevelComponent extends React.Component{ <> {lineChart(chartPagedData)} - + ); - }; + } /** * This function gets the performance values for ReceiveLevel according on the chartjs dataset structure * which is to be sent to the chart. */ private getChartDataValues = (rows: ReceiveLevelDataType[]): IDataSetsObject => { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "rxLevelMin", - label: "rx-level-min", + name: 'rxLevelMin', + label: 'rx-level-min', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Rx min" + columnLabel: 'Rx min', }, { - name: "rxLevelAvg", - label: "rx-level-avg", + name: 'rxLevelAvg', + label: 'rx-level-avg', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Rx avg" + columnLabel: 'Rx avg', }, { - name: "rxLevelMax", - label: "rx-level-max", + name: 'rxLevelMax', + label: 'rx-level-max', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Rx max" + columnLabel: 'Rx max', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.rxLevelMin = row.performanceData.rxLevelMin; row.rxLevelAvg = row.performanceData.rxLevelAvg; row.rxLevelMax = row.performanceData.rxLevelMax; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof ReceiveLevelDataType] as string, - y: row.performanceData[ds.name as keyof ReceiveLevelDatabaseDataType] as string + x: row['timeStamp' as keyof ReceiveLevelDataType] as string, + y: row.performanceData[ds.name as keyof ReceiveLevelDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent)); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx index ee7fe34aa..85241fbb1 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -15,37 +15,36 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { SignalToInterferenceDataType, SignalToInterferenceDatabaseDataType } from '../models/signalToInteferenceDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createSignalToInterferenceActions, createSignalToInterferenceProperties } from '../handlers/signalToInterferenceHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createSignalToInterferenceProperties, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler'; +import { SignalToInterferenceDatabaseDataType, SignalToInterferenceDataType } from '../models/signalToInteferenceDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ signalToInterferenceProperties: createSignalToInterferenceProperties(state), currentView: state.performanceHistory.subViews.SINR.subView, isFilterVisible: state.performanceHistory.subViews.SINR.isFilterVisible, - existingFilter: state.performanceHistory.signalToInterference.filter + existingFilter: state.performanceHistory.signalToInterference.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("SINR", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('SINR', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('SINR', value)); }, }); type SignalToInterferenceComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType; @@ -53,21 +52,20 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType{ - +class SignalToInterferenceComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.signalToInterferenceActions.onFilterChanged(property, filterTerm); if (!this.props.signalToInterferenceProperties.showFilter) this.props.signalToInterferenceActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.signalToInterferenceProperties; @@ -76,12 +74,12 @@ class SignalToInterferenceComponent extends React.Component[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -89,14 +87,15 @@ class SignalToInterferenceComponent extends React.Component - + {lineChart(chartPagedData)} - ); - }; + } /** * This function gets the performance values for SINR according on the chartjs dataset structure @@ -104,53 +103,53 @@ class SignalToInterferenceComponent extends React.Component { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "snirMin", - label: "snir-min", + name: 'snirMin', + label: 'snir-min', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "SINR (min)[db]" + columnLabel: 'SINR (min)[db]', }, { - name: "snirAvg", - label: "snir-avg", + name: 'snirAvg', + label: 'snir-avg', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "SINR (avg)[db]" + columnLabel: 'SINR (avg)[db]', }, { - name: "snirMax", - label: "snir-max", + name: 'snirMax', + label: 'snir-max', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "SINR (max)[db]" + columnLabel: 'SINR (max)[db]', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.snirMin = row.performanceData.snirMin; row.snirAvg = row.performanceData.snirAvg; row.snirMax = row.performanceData.snirMax; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof SignalToInterferenceDataType] as string, - y: row.performanceData[ds.name as keyof SignalToInterferenceDatabaseDataType] as string + x: row['timeStamp' as keyof SignalToInterferenceDataType] as string, + y: row.performanceData[ds.name as keyof SignalToInterferenceDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent)); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx index 31e1d363f..d4b823387 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -15,38 +15,37 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { TemperatureDataType, TemperatureDatabaseDataType } from '../models/temperatureDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createTemperatureActions, createTemperatureProperties } from '../handlers/temperatureHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createTemperatureProperties, createTemperatureActions } from '../handlers/temperatureHandler'; +import { TemperatureDatabaseDataType, TemperatureDataType } from '../models/temperatureDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ temperatureProperties: createTemperatureProperties(state), currentView: state.performanceHistory.subViews.temperatur.subView, isFilterVisible: state.performanceHistory.subViews.temperatur.isFilterVisible, - existingFilter: state.performanceHistory.temperature.filter + existingFilter: state.performanceHistory.temperature.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ temperatureActions: createTemperatureActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("Temp", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('Temp', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('Temp', value)); }, }); type TemperatureComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const TemperatureTable = MaterialTable as MaterialTableCtorType; @@ -54,22 +53,21 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType{ - +class TemperatureComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.temperatureActions.onFilterChanged(property, filterTerm); if (!this.props.temperatureProperties.showFilter) this.props.temperatureActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.temperatureProperties; @@ -77,12 +75,12 @@ class TemperatureComponent extends React.Component{ const chartPagedData = this.getChartDataValues(properties.rows); const temperatureColumns: ColumnModel[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -93,11 +91,11 @@ class TemperatureComponent extends React.Component{ {lineChart(chartPagedData)} - + ); - }; + } /** * This function gets the performance values for Temperature according on the chartjs dataset structure @@ -105,53 +103,53 @@ class TemperatureComponent extends React.Component{ */ private getChartDataValues = (rows: TemperatureDataType[]): IDataSetsObject => { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "rfTempMin", - label: "rf-temp-min", + name: 'rfTempMin', + label: 'rf-temp-min', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Rf Temp Min[deg C]" + columnLabel: 'Rf Temp Min[deg C]', }, { - name: "rfTempAvg", - label: "rf-temp-avg", + name: 'rfTempAvg', + label: 'rf-temp-avg', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Rf Temp Avg[deg C]" + columnLabel: 'Rf Temp Avg[deg C]', }, { - name: "rfTempMax", - label: "rf-temp-max", + name: 'rfTempMax', + label: 'rf-temp-max', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Rf Temp Max[deg C]" + columnLabel: 'Rf Temp Max[deg C]', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.rfTempMin = row.performanceData.rfTempMin; row.rfTempAvg = row.performanceData.rfTempAvg; row.rfTempMax = row.performanceData.rfTempMax; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof TemperatureDataType] as string, - y: row.performanceData[ds.name as keyof TemperatureDatabaseDataType] as string + x: row['timeStamp' as keyof TemperatureDataType] as string, + y: row.performanceData[ds.name as keyof TemperatureDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const Temperature = withRouter(connect(mapProps, mapDisp)(TemperatureComponent)); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx index 8696fe4d6..e883aef7f 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -17,52 +17,54 @@ */ import * as React from 'react'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; + import BarChartIcon from '@mui/icons-material/BarChart'; +import FilterListIcon from '@mui/icons-material/FilterList'; import TableChartIcon from '@mui/icons-material/TableChart'; -import makeStyles from '@mui/styles/makeStyles'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Tooltip from '@mui/material/Tooltip'; -import ChartFilter from './chartFilter' -import FilterListIcon from '@mui/icons-material/FilterList'; +import makeStyles from '@mui/styles/makeStyles'; + +import ChartFilter from './chartFilter'; const styles = makeStyles({ - toggleButtonContainer: { - display: "flex", - alignItems: "center", - justifyContent: "center", - padding: "10px", - }, - subViewGroup: { - padding: "10px" - }, - filterGroup: { - marginLeft: "10px" - } + toggleButtonContainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + padding: '10px', + }, + subViewGroup: { + padding: '10px', + }, + filterGroup: { + marginLeft: '10px', + }, }); -type toggleProps = { selectedValue: string, onChange(value: string): void, showFilter: boolean, onToggleFilterButton(): void, onFilterChanged: (property: string, filterTerm: string) => void, existingFilter: any }; +type toggleProps = { selectedValue: string; onChange(value: string): void; showFilter: boolean; onToggleFilterButton(): void; onFilterChanged: (property: string, filterTerm: string) => void; existingFilter: any }; const ToggleContainer: React.FunctionComponent = (props) => { - const classes = styles(); + const classes = styles(); - const handleChange = (event: React.MouseEvent, newView: string) => { - if (newView !== null) { - props.onChange(newView) - } - }; + const handleChange = (event: React.MouseEvent, newView: string) => { + if (newView !== null) { + props.onChange(newView); + } + }; - const handleFilterChange = (event: React.MouseEvent, newView: string) => { - props.onToggleFilterButton(); - }; + const handleFilterChange = (_event: React.MouseEvent) => { + props.onToggleFilterButton(); + }; - const children = React.Children.toArray(props.children); + const children = React.Children.toArray(props.children); - //hide filter if visible + table - //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name + //hide filter if visible + table + //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name - return ( + return ( <>
@@ -79,7 +81,7 @@ const ToggleContainer: React.FunctionComponent = (props) => { - + @@ -89,13 +91,12 @@ const ToggleContainer: React.FunctionComponent = (props) => {
{ - props.selectedValue === "chart" && + props.selectedValue === 'chart' && } - {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]} + {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 97a35da0a..db9a7c077 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -15,75 +15,73 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { TransmissionPowerDataType, TransmissionPowerDatabaseDataType } from '../models/transmissionPowerDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createTransmissionPowerActions, createTransmissionPowerProperties } from '../handlers/transmissionPowerHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createTransmissionPowerProperties, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler'; +import { TransmissionPowerDatabaseDataType, TransmissionPowerDataType } from '../models/transmissionPowerDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ transmissionPowerProperties: createTransmissionPowerProperties(state), currentView: state.performanceHistory.subViews.transmissionPower.subView, isFilterVisible: state.performanceHistory.subViews.transmissionPower.isFilterVisible, - existingFilter: state.performanceHistory.transmissionPower.filter + existingFilter: state.performanceHistory.transmissionPower.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("transmissionPower", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('transmissionPower', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('transmissionPower', value)); }, }); type TransmissionPowerComponentProps = RouteComponentProps & Connect & { - selectedTimePeriod: string -} + selectedTimePeriod: string; +}; const TransmissionPowerTable = MaterialTable as MaterialTableCtorType; /** * The Component which gets the transmission power data from the database based on the selected time period. */ -class TransmissionPowerComponent extends React.Component{ - +class TransmissionPowerComponent extends React.Component { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.transmissionPowerActions.onFilterChanged(property, filterTerm); if (!this.props.transmissionPowerProperties.showFilter) this.props.transmissionPowerActions.onToggleFilter(false); - } + }; render(): JSX.Element { - const properties = this.props.transmissionPowerProperties - const actions = this.props.transmissionPowerActions + const properties = this.props.transmissionPowerProperties; + const actions = this.props.transmissionPowerActions; const chartPagedData = this.getChartDataValues(properties.rows); const transmissionColumns: ColumnModel[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -92,13 +90,14 @@ class TransmissionPowerComponent extends React.Component - + {lineChart(chartPagedData)} - + ); - }; + } /** * This function gets the performance values for TransmissionPower according on the chartjs dataset structure @@ -106,53 +105,53 @@ class TransmissionPowerComponent extends React.Component { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "txLevelMin", - label: "tx-level-min", + name: 'txLevelMin', + label: 'tx-level-min', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Tx min" + columnLabel: 'Tx min', }, { - name: "txLevelAvg", - label: "tx-level-avg", + name: 'txLevelAvg', + label: 'tx-level-avg', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Tx avg" + columnLabel: 'Tx avg', }, { - name: "txLevelMax", - label: "tx-level-max", + name: 'txLevelMax', + label: 'tx-level-max', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Tx max" + columnLabel: 'Tx max', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.txLevelMin = row.performanceData.txLevelMin; row.txLevelAvg = row.performanceData.txLevelAvg; row.txLevelMax = row.performanceData.txLevelMax; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof TransmissionPowerDataType] as string, - y: row.performanceData[ds.name as keyof TransmissionPowerDatabaseDataType] as string + x: row['timeStamp' as keyof TransmissionPowerDataType] as string, + y: row.performanceData[ds.name as keyof TransmissionPowerDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const TransmissionPower = withRouter(connect(mapProps, mapDisp)(TransmissionPowerComponent)); -- cgit 1.2.3-korg