diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components')
7 files changed, 1275 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx new file mode 100644 index 000000000..09d3accd4 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -0,0 +1,469 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +import { AdaptiveModulationDataType, AdaptiveModulationDatabaseDataType } 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'; + +const mapProps = (state: IApplicationStoreState) => ({ + adaptiveModulationProperties: createAdaptiveModulationProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch), +}); + +type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +}; + +const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveModulationDataType>; + +/** + * The Component which gets the adaptiveModulation data from the database based on the selected time period. + */ +class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{ + render(): JSX.Element { + const properties = this.props.adaptiveModulationProperties; + const actions = this.props.adaptiveModulationActions; + + const chartPagedData = this.getChartDataValues(properties.rows); + const adaptiveModulationColumns: ColumnModel<AdaptiveModulationDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + }]; + + chartPagedData.datasets.forEach(ds => { + adaptiveModulationColumns.push(addColumnLabels<AdaptiveModulationDataType>(ds.name, ds.columnLabel)); + }); + + return ( + <> + {lineChart(chartPagedData)} + <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> + </> + ); + }; + + /** + * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure + * which is to be sent to the chart. + */ + + private getChartDataValues = (rows: AdaptiveModulationDataType[]): IDataSetsObject => { + const _rows = [...rows]; + sortDataByTimeStamp(_rows); + + const datasets: IDataSet[] = [{ + name: "time2StatesS", + label: "QAM2S", + borderColor: '#62a309fc', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM2S", + }, { + name: "time2States", + label: "QAM2", + borderColor: '#62a309fc', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM2", + }, { + name: "time2StatesL", + label: "QAM2L", + borderColor: '#62a309fc', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM2L", + }, { + name: "time4StatesS", + label: "QAM4S", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM4S", + }, { + name: "time4States", + label: "QAM4", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM4", + }, { + name: "time4StatesL", + label: "QAM4L", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM4L", + }, { + name: "time16StatesS", + label: "QAM16S", + borderColor: '#9b15e2', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM16S", + }, { + name: "time16States", + label: "QAM16", + borderColor: '#9b15e2', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM16", + }, { + name: "time16StatesL", + label: "QAM16L", + borderColor: '#9b15e2', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM16L", + }, { + name: "time32StatesS", + label: "QAM32S", + borderColor: '#2704f5f0', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM32S", + }, { + name: "time32States", + label: "QAM32", + borderColor: '#2704f5f0', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM32", + }, { + name: "time32StatesL", + label: "QAM32L", + borderColor: '#2704f5f0', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM32L", + }, { + name: "time64StatesS", + label: "QAM64S", + borderColor: '#347692', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM64S", + }, { + name: "time64States", + label: "QAM64", + borderColor: '#347692', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM64", + }, { + name: "time64StatesL", + label: "QAM64L", + borderColor: '#347692', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM64L", + }, { + name: "time128StatesS", + label: "QAM128S", + borderColor: '#885e22', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM128S", + }, { + name: "time128States", + label: "QAM128", + borderColor: '#885e22', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM128", + }, { + name: "time128StatesL", + label: "QAM128L", + borderColor: '#885e22', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM128L", + }, { + name: "time256StatesS", + label: "QAM256S", + borderColor: '#de07807a', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM256S", + }, { + name: "time256States", + label: "QAM256", + borderColor: '#de07807a', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM256", + }, { + name: "time256StatesL", + label: "QAM256L", + borderColor: '#de07807a', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM256L", + }, { + name: "time512StatesS", + label: "QAM512S", + borderColor: '#8fdaacde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM512S", + }, { + name: "time512States", + label: "QAM512", + borderColor: '#8fdaacde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM512", + }, { + + name: "time512StatesL", + label: "QAM512L", + borderColor: '#8fdaacde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM512L", + }, { + + name: "time1024StatesS", + label: "QAM1024S", + borderColor: '#435b22', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM1024S", + }, { + + name: "time1024States", + label: "QAM1024", + borderColor: '#435b22', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM1024", + }, { + + name: "time1024StatesL", + label: "QAM1024L", + borderColor: '#435b22', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM1024L", + }, { + name: "time2048StatesS", + label: "QAM2048S", + borderColor: '#e87a5b', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM2048S", + }, { + name: "time2048States", + label: "QAM2048", + borderColor: '#e87a5b', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM2048", + }, { + name: "time2048StatesL", + label: "QAM2048L", + borderColor: '#e87a5b', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM2048L", + }, { + name: "time4096StatesS", + label: "QAM4096S", + borderColor: '#5be878', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM4096S", + }, { + name: "time4096States", + label: "QAM4096", + borderColor: '#5be878', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM4096", + }, { + name: "time4096StatesL", + label: "QAM4096L", + borderColor: '#5be878', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM4096L", + }, { + name: "time8192StatesS", + label: "QAM8192s", + borderColor: '#cb5be8', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM8192S", + }, { + name: "time8192States", + label: "QAM8192", + borderColor: '#cb5be8', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM8192", + }, { + name: "time8192StatesL", + label: "QAM8192L", + borderColor: '#cb5be8', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "QAM8192L", + } + ]; + + _rows.forEach(row => { + row.time2StatesS = row.performanceData.time2StatesS + row.time2States = row.performanceData.time2States; + row.time2StatesL = row.performanceData.time2StatesL; + row.time4StatesS = row.performanceData.time4StatesS + row.time4States = row.performanceData.time4States; + row.time4StatesL = row.performanceData.time4StatesL; + row.time16StatesS = row.performanceData.time16StatesS; + row.time16States = row.performanceData.time16States; + row.time16StatesL = row.performanceData.time16StatesL; + row.time32StatesS = row.performanceData.time32StatesS; + row.time32States = row.performanceData.time32States; + row.time32StatesL = row.performanceData.time32StatesL; + row.time64StatesS = row.performanceData.time64StatesS; + row.time64States = row.performanceData.time64States; + row.time64StatesL = row.performanceData.time64StatesL; + row.time128StatesS = row.performanceData.time128StatesS; + row.time128States = row.performanceData.time128States; + row.time128StatesL = row.performanceData.time128StatesL; + row.time256StatesS = row.performanceData.time256StatesS; + row.time256States = row.performanceData.time256States; + row.time256StatesL = row.performanceData.time256StatesL; + row.time512StatesS = row.performanceData.time512StatesS; + row.time512States = row.performanceData.time512States; + row.time512StatesL = row.performanceData.time512StatesL; + row.time1024StatesS = row.performanceData.time1024StatesS; + row.time1024States = row.performanceData.time1024States; + row.time1024StatesL = row.performanceData.time1024StatesL; + row.time2048StatesS = row.performanceData.time2048StatesS; + row.time2048States = row.performanceData.time2048States; + row.time2048StatesL = row.performanceData.time2048StatesL; + row.time4096StatesS = row.performanceData.time4096StatesS; + row.time4096States = row.performanceData.time4096States; + row.time4096StatesL = row.performanceData.time4096StatesL; + row.time8192StatesS = row.performanceData.time8192StatesS; + row.time8192States = row.performanceData.time8192States; + row.time8192StatesL = row.performanceData.time8192StatesL; + datasets.forEach(ds => { + ds.data.push({ + x: row["timeStamp" as keyof AdaptiveModulationDataType] as string, + y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string + }); + }); + }); + + return { + datasets: datasets + }; + } +} +const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent)); +export default AdaptiveModulation; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx new file mode 100644 index 000000000..267e00bbe --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -0,0 +1,133 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, MaterialTableCtorType, ColumnModel } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +import { CrossPolarDiscriminationDataType, CrossPolarDiscriminationDatabaseDataType } from '../models/crossPolarDiscriminationDataType'; +import { IDataSet, IDataSetsObject } from '../models/chartTypes'; +import { createCrossPolarDiscriminationProperties, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler'; +import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; +import { addColumnLabels } from '../utils/tableUtils'; + +const mapProps = (state: IApplicationStoreState) => ({ + crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch), +}); + +type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +}; + +const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<CrossPolarDiscriminationDataType>; + +/** + * The Component which gets the crossPolarDiscrimination data from the database based on the selected time period. + */ +class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{ + render(): JSX.Element { + const properties = this.props.crossPolarDiscriminationProperties; + const actions = this.props.crossPolarDiscriminationActions; + + const chartPagedData = this.getChartDataValues(properties.rows); + + const cpdColumns: ColumnModel<CrossPolarDiscriminationDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + } + ]; + + chartPagedData.datasets.forEach(ds => { + cpdColumns.push(addColumnLabels<CrossPolarDiscriminationDataType>(ds.name, ds.columnLabel)); + }); + return ( + <> + {lineChart(chartPagedData)} + <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> + </> + ); + }; + + /** + * 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 datasets: IDataSet[] = [{ + name: "xpdMin", + label: "xpd-min", + borderColor: '#0e17f3de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "CPD (min)[db]" + }, { + name: "xpdAvg", + label: "xpd-avg", + borderColor: '#08edb6de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "CPD (avg)[db]" + }, { + name: "xpdMax", + label: "xpd-max", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "CPD (max)[db]" + }]; + + _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 + }); + }); + }); + return { + datasets: datasets + }; + } +} +const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent)); +export default CrossPolarDiscrimination; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx new file mode 100644 index 000000000..c58c49c9e --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -0,0 +1,133 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { PerformanceDataType, PerformanceDatabaseDataType } from '../models/performanceDataType'; +import { IDataSet, IDataSetsObject } from '../models/chartTypes'; +import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler'; +import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; +import { addColumnLabels } from '../utils/tableUtils'; + +const mapProps = (state: IApplicationStoreState) => ({ + performanceDataProperties: createPerformanceDataProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + performanceDataActions: createPerformanceDataActions(dispatcher.dispatch), +}); + +type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +}; + +const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceDataType>; + +/** + * The Component which gets the performance data from the database based on the selected time period. + */ +class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{ + render(): JSX.Element { + const properties = this.props.performanceDataProperties; + const actions = this.props.performanceDataActions; + + const chartPagedData = this.getChartDataValues(properties.rows); + const performanceColumns: ColumnModel<PerformanceDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + } + ]; + + chartPagedData.datasets.forEach(ds => { + performanceColumns.push(addColumnLabels<PerformanceDataType>(ds.name, ds.columnLabel)); + }); + return ( + <> + {lineChart(chartPagedData)} + <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> + </> + ); + }; + + /** + * 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 datasets: IDataSet[] = [{ + name: "es", + label: "es", + borderColor: '#0e17f3de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "ES" + }, { + name: "ses", + label: "ses", + borderColor: '#08edb6de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "SES" + }, { + name: "unavailability", + label: "unavailability", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Unavailability" + }]; + + _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 + }); + }); + }); + + return { + datasets: datasets + }; + } +} + +const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent)); +export default PerformanceData; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx new file mode 100644 index 000000000..55bc39860 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -0,0 +1,134 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +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'; + +const mapProps = (state: IApplicationStoreState) => ({ + receiveLevelProperties: createReceiveLevelProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch), +}); + +type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +}; + +const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDataType>; + +/** + * The Component which gets the receiveLevel data from the database based on the selected time period. + */ +class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ + render(): JSX.Element { + const properties = this.props.receiveLevelProperties; + const actions = this.props.receiveLevelActions; + + const chartPagedData = this.getChartDataValues(properties.rows); + const receiveLevelColumns: ColumnModel<ReceiveLevelDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + } + ]; + + chartPagedData.datasets.forEach(ds => { + receiveLevelColumns.push(addColumnLabels<ReceiveLevelDataType>(ds.name, ds.columnLabel)); + }); + + return ( + <> + {lineChart(chartPagedData)} + <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> + </> + ); + }; + + /** + * 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 datasets: IDataSet[] = [{ + name: "rxLevelMin", + label: "rx-level-min", + borderColor: '#0e17f3de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Rx min" + }, { + name: "rxLevelAvg", + label: "rx-level-avg", + borderColor: '#08edb6de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Rx avg" + }, { + name: "rxLevelMax", + label: "rx-level-max", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Rx max" + }]; + + _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 + }); + }); + }); + return { + datasets: datasets + }; + } +} + +const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent)); +export default ReceiveLevel; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx new file mode 100644 index 000000000..42aa007a9 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -0,0 +1,136 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +import { SignalToInterferenceDataType, SignalToInterferenceDatabaseDataType } from '../models/signalToInteferenceDataType'; +import { IDataSet, IDataSetsObject } from '../models/chartTypes'; +import { createSignalToInterferenceProperties, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler'; +import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; +import { addColumnLabels } from '../utils/tableUtils'; + +const mapProps = (state: IApplicationStoreState) => ({ + signalToInterferenceProperties: createSignalToInterferenceProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch), +}); + +type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +}; + +const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalToInterferenceDataType>; + +/** + * The Component which gets the signal to interference data from the database based on the selected time period. + */ +class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{ + render(): JSX.Element { + const properties = this.props.signalToInterferenceProperties; + const actions = this.props.signalToInterferenceActions; + + const chartPagedData = this.getChartDataValues(properties.rows); + + const sinrColumns: ColumnModel<SignalToInterferenceDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + } + ]; + + chartPagedData.datasets.forEach(ds => { + sinrColumns.push(addColumnLabels<SignalToInterferenceDataType>(ds.name, ds.columnLabel)); + }); + return ( + <> + {lineChart(chartPagedData)} + <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} + /> + </> + ); + }; + + /** + * This function gets the performance values for SINR according on the chartjs dataset structure + * which is to be sent to the chart. + */ + + private getChartDataValues = (rows: SignalToInterferenceDataType[]): IDataSetsObject => { + const _rows = [...rows]; + sortDataByTimeStamp(_rows); + + const datasets: IDataSet[] = [{ + name: "snirMin", + label: "snir-min", + borderColor: '#0e17f3de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "SINR (min)[db]" + }, { + name: "snirAvg", + label: "snir-avg", + borderColor: '#08edb6de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "SINR (avg)[db]" + }, { + name: "snirMax", + label: "snir-max", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "SINR (max)[db]" + }]; + + _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 + }); + }); + }); + return { + datasets: datasets + }; + } +} + +const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent)); +export default SignalToInterference; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx new file mode 100644 index 000000000..256911c2d --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -0,0 +1,134 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +import { TemperatureDataType, TemperatureDatabaseDataType } from '../models/temperatureDataType'; +import { IDataSet, IDataSetsObject } from '../models/chartTypes'; +import { createTemperatureProperties, createTemperatureActions } from '../handlers/temperatureHandler'; +import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; +import { addColumnLabels } from '../utils/tableUtils'; + +const mapProps = (state: IApplicationStoreState) => ({ + temperatureProperties: createTemperatureProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + temperatureActions: createTemperatureActions(dispatcher.dispatch), +}); + +type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +}; + +const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataType>; + +/** + * The Component which gets the temperature data from the database based on the selected time period. + */ +class TemperatureComponent extends React.Component<TemperatureComponentProps>{ + render(): JSX.Element { + const properties = this.props.temperatureProperties; + const actions = this.props.temperatureActions; + + const chartPagedData = this.getChartDataValues(properties.rows); + const temperatureColumns: ColumnModel<TemperatureDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + } + ]; + + chartPagedData.datasets.forEach(ds => { + temperatureColumns.push(addColumnLabels<TemperatureDataType>(ds.name, ds.columnLabel)); + }); + return ( + <> + {lineChart(chartPagedData)} + <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> + </> + ); + }; + + /** + * This function gets the performance values for Temperature according on the chartjs dataset structure + * which is to be sent to the chart. + */ + + private getChartDataValues = (rows: TemperatureDataType[]): IDataSetsObject => { + const _rows = [...rows]; + sortDataByTimeStamp(_rows); + + const datasets: IDataSet[] = [{ + name: "rfTempMin", + label: "rf-temp-min", + borderColor: '#0e17f3de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Rf Temp Min[deg C]" + }, { + name: "rfTempAvg", + label: "rf-temp-avg", + borderColor: '#08edb6de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Rf Temp Avg[deg C]" + }, { + name: "rfTempMax", + label: "rf-temp-max", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Rf Temp Max[deg C]" + }]; + + _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 + }); + }); + }); + return { + datasets: datasets + }; + } +} + +const Temperature = withRouter(connect(mapProps, mapDisp)(TemperatureComponent)); +export default Temperature; diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx new file mode 100644 index 000000000..635cbf103 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -0,0 +1,136 @@ +/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +import { TransmissionPowerDataType, TransmissionPowerDatabaseDataType } from '../models/transmissionPowerDataType'; +import { IDataSet, IDataSetsObject } from '../models/chartTypes'; +import { createTransmissionPowerProperties, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler'; +import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; +import { addColumnLabels } from '../utils/tableUtils'; + +const mapProps = (state: IApplicationStoreState) => ({ + transmissionPowerProperties: createTransmissionPowerProperties(state), +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch), +}); + +type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { + selectedTimePeriod: string +} + +const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<TransmissionPowerDataType>; + +/** + * The Component which gets the transmission power data from the database based on the selected time period. + */ +class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{ + render(): JSX.Element { + const properties = this.props.transmissionPowerProperties + const actions = this.props.transmissionPowerActions + + const chartPagedData = this.getChartDataValues(properties.rows); + + const transmissionColumns: ColumnModel<TransmissionPowerDataType>[] = [ + { 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", customControl: ({ rowData }) => { + const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); + return <div >{suspectIntervalFlag} </div> + } + } + ]; + + chartPagedData.datasets.forEach(ds => { + transmissionColumns.push(addColumnLabels<TransmissionPowerDataType>(ds.name, ds.columnLabel)); + }); + + return ( + <> + {lineChart(chartPagedData)} + <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> + </> + ); + }; + + /** + * This function gets the performance values for TransmissionPower according on the chartjs dataset structure + * which is to be sent to the chart. + */ + + private getChartDataValues = (rows: TransmissionPowerDataType[]): IDataSetsObject => { + const _rows = [...rows]; + sortDataByTimeStamp(_rows); + + const datasets: IDataSet[] = [{ + name: "txLevelMin", + label: "tx-level-min", + borderColor: '#0e17f3de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Tx min" + }, { + name: "txLevelAvg", + label: "tx-level-avg", + borderColor: '#08edb6de', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Tx avg" + }, { + name: "txLevelMax", + label: "tx-level-max", + borderColor: '#b308edde', + bezierCurve: false, + lineTension: 0, + fill: false, + data: [], + columnLabel: "Tx max" + }]; + + _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 + }); + }); + }); + return { + datasets: datasets + }; + } +} + +const TransmissionPower = withRouter(connect(mapProps, mapDisp)(TransmissionPowerComponent)); +export default TransmissionPower; |