sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/receiveLevel.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 { createReceiveLevelActions, createReceiveLevelProperties } from '../handlers/receiveLevelHandler';
  27 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
  28 import { ReceiveLevelDatabaseDataType, ReceiveLevelDataType } from '../models/receiveLevelDataType';
  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   receiveLevelProperties: createReceiveLevelProperties(state),
  35   currentView: state.performanceHistory.subViews.receiveLevel.subView,
  36   isFilterVisible: state.performanceHistory.subViews.receiveLevel.isFilterVisible,
  37   existingFilter: state.performanceHistory.receiveLevel.filter,
  38 });
  39
  40 const mapDisp = (dispatcher: IDispatcher) => ({
  41   receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch),
  42   setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('receiveLevel', value)),
  43   toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('receiveLevel', value)); },
  44 });
  45
  46 type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
  47   selectedTimePeriod: string;
  48 };
  49
  50 const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDataType>;
  51
  52 /**
  53  * The Component which gets the receiveLevel data from the database based on the selected time period.
  54  */
  55 class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps> {
  56   onToggleFilterButton = () => {
  57     this.props.toggleFilterButton(!this.props.isFilterVisible);
  58   };
  59
  60
  61   onChange = (value: 'chart' | 'table') => {
  62     this.props.setSubView(value);
  63   };
  64
  65   onFilterChanged = (property: string, filterTerm: string) => {
  66     this.props.receiveLevelActions.onFilterChanged(property, filterTerm);
  67     if (!this.props.receiveLevelProperties.showFilter)
  68       this.props.receiveLevelActions.onToggleFilter(false);
  69   };
  70
  71   render(): JSX.Element {
  72     const properties = this.props.receiveLevelProperties;
  73     const actions = this.props.receiveLevelActions;
  74
  75     const chartPagedData = this.getChartDataValues(properties.rows);
  76     const receiveLevelColumns: ColumnModel<ReceiveLevelDataType>[] = [
  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       receiveLevelColumns.push(addColumnLabels<ReceiveLevelDataType>(ds.name, ds.columnLabel));
  87     });
  88
  89     return (
  90       <>
  91         <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
  92           {lineChart(chartPagedData)}
  93           <ReceiveLevelTable stickyHeader idProperty={'_id'} tableId="receive-level-table" columns={receiveLevelColumns} {...properties} {...actions} />
  94         </ToggleContainer>
  95       </>
  96     );
  97   }
  98
  99   /**
 100    * This function gets the performance values for ReceiveLevel according on the chartjs dataset structure
 101    * which is to be sent to the chart.
 102    */
 103   private getChartDataValues = (rows: ReceiveLevelDataType[]): IDataSetsObject => {
 104     const data_rows = [...rows];
 105     sortDataByTimeStamp(data_rows);
 106
 107     const datasets: IDataSet[] = [{
 108       name: 'rxLevelMin',
 109       label: 'rx-level-min',
 110       borderColor: '#0e17f3de',
 111       bezierCurve: false,
 112       lineTension: 0,
 113       fill: false,
 114       data: [],
 115       columnLabel: 'Rx min',
 116     }, {
 117       name: 'rxLevelAvg',
 118       label: 'rx-level-avg',
 119       borderColor: '#08edb6de',
 120       bezierCurve: false,
 121       lineTension: 0,
 122       fill: false,
 123       data: [],
 124       columnLabel: 'Rx avg',
 125     }, {
 126       name: 'rxLevelMax',
 127       label: 'rx-level-max',
 128       borderColor: '#b308edde',
 129       bezierCurve: false,
 130       lineTension: 0,
 131       fill: false,
 132       data: [],
 133       columnLabel: 'Rx max',
 134     }];
 135
 136     data_rows.forEach(row => {
 137       row.rxLevelMin = row.performanceData.rxLevelMin;
 138       row.rxLevelAvg = row.performanceData.rxLevelAvg;
 139       row.rxLevelMax = row.performanceData.rxLevelMax;
 140       datasets.forEach(ds => {
 141         ds.data.push({
 142           x: row['timeStamp' as keyof ReceiveLevelDataType] as string,
 143           y: row.performanceData[ds.name as keyof ReceiveLevelDatabaseDataType] as string,
 144         });
 145       });
 146     });
 147     return {
 148       datasets: datasets,
 149     };
 150   };
 151 }
 152
 153 const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent));
 154 export default ReceiveLevel;