sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import React from 'react';
  19 import { RouteComponentProps, withRouter } from 'react-router-dom';
  20
  21 import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
  22 import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  23 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  24
  25 import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
  26 import { createSignalToInterferenceActions, createSignalToInterferenceProperties } from '../handlers/signalToInterferenceHandler';
  27 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
  28 import { SignalToInterferenceDatabaseDataType, SignalToInterferenceDataType } from '../models/signalToInteferenceDataType';
  29 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
  30 import { addColumnLabels } from '../utils/tableUtils';
  31 import ToggleContainer from './toggleContainer';
  32
  33 const mapProps = (state: IApplicationStoreState) => ({
  34   signalToInterferenceProperties: createSignalToInterferenceProperties(state),
  35   currentView: state.performanceHistory.subViews.SINR.subView,
  36   isFilterVisible: state.performanceHistory.subViews.SINR.isFilterVisible,
  37   existingFilter: state.performanceHistory.signalToInterference.filter,
  38 });
  39
  40 const mapDisp = (dispatcher: IDispatcher) => ({
  41   signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch),
  42   setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('SINR', value)),
  43   toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('SINR', value)); },
  44 });
  45
  46 type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
  47   selectedTimePeriod: string;
  48 };
  49
  50 const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalToInterferenceDataType>;
  51
  52 /**
  53  * The Component which gets the signal to interference data from the database based on the selected time period.
  54  */
  55 class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps> {
  56   onToggleFilterButton = () => {
  57     this.props.toggleFilterButton(!this.props.isFilterVisible);
  58   };
  59
  60   onChange = (value: 'chart' | 'table') => {
  61     this.props.setSubView(value);
  62   };
  63
  64   onFilterChanged = (property: string, filterTerm: string) => {
  65     this.props.signalToInterferenceActions.onFilterChanged(property, filterTerm);
  66     if (!this.props.signalToInterferenceProperties.showFilter)
  67       this.props.signalToInterferenceActions.onToggleFilter(false);
  68   };
  69
  70   render(): JSX.Element {
  71     const properties = this.props.signalToInterferenceProperties;
  72     const actions = this.props.signalToInterferenceActions;
  73
  74     const chartPagedData = this.getChartDataValues(properties.rows);
  75
  76     const sinrColumns: ColumnModel<SignalToInterferenceDataType>[] = [
  77       { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
  78       { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
  79       { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
  80       {
  81         property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
  82       },
  83     ];
  84
  85     chartPagedData.datasets.forEach(ds => {
  86       sinrColumns.push(addColumnLabels<SignalToInterferenceDataType>(ds.name, ds.columnLabel));
  87     });
  88     return (
  89       <>
  90         <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible}
  91           existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
  92           {lineChart(chartPagedData)}
  93           <SignalToInterferenceTable stickyHeader idProperty={'_id'} tableId="signal-to-interference-table" columns={sinrColumns} {...properties} {...actions}
  94           />
  95         </ToggleContainer>
  96       </>
  97     );
  98   }
  99
 100   /**
 101    * This function gets the performance values for SINR according on the chartjs dataset structure
 102    * which is to be sent to the chart.
 103    */
 104
 105   private getChartDataValues = (rows: SignalToInterferenceDataType[]): IDataSetsObject => {
 106     const data_rows = [...rows];
 107     sortDataByTimeStamp(data_rows);
 108
 109     const datasets: IDataSet[] = [{
 110       name: 'snirMin',
 111       label: 'snir-min',
 112       borderColor: '#0e17f3de',
 113       bezierCurve: false,
 114       lineTension: 0,
 115       fill: false,
 116       data: [],
 117       columnLabel: 'SINR (min)[db]',
 118     }, {
 119       name: 'snirAvg',
 120       label: 'snir-avg',
 121       borderColor: '#08edb6de',
 122       bezierCurve: false,
 123       lineTension: 0,
 124       fill: false,
 125       data: [],
 126       columnLabel: 'SINR (avg)[db]',
 127     }, {
 128       name: 'snirMax',
 129       label: 'snir-max',
 130       borderColor: '#b308edde',
 131       bezierCurve: false,
 132       lineTension: 0,
 133       fill: false,
 134       data: [],
 135       columnLabel: 'SINR (max)[db]',
 136     }];
 137
 138     data_rows.forEach(row => {
 139       row.snirMin = row.performanceData.snirMin;
 140       row.snirAvg = row.performanceData.snirAvg;
 141       row.snirMax = row.performanceData.snirMax;
 142       datasets.forEach(ds => {
 143         ds.data.push({
 144           x: row['timeStamp' as keyof SignalToInterferenceDataType] as string,
 145           y: row.performanceData[ds.name as keyof SignalToInterferenceDatabaseDataType] as string,
 146         });
 147       });
 148     });
 149     return {
 150       datasets: datasets,
 151     };
 152   };
 153 }
 154
 155 const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent));
 156 export default SignalToInterference;