sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.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 * as React from 'react';
  19
  20 import { withRouter, RouteComponentProps } from 'react-router-dom';
  21
  22 import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
  23 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  24 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  25
  26 import { AdaptiveModulationDataType, AdaptiveModulationDatabaseDataType } from '../models/adaptiveModulationDataType';
  27 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
  28 import { createAdaptiveModulationProperties, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler';
  29 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
  30 import { addColumnLabels } from '../utils/tableUtils';
  31 import ToggleContainer from './toggleContainer';
  32 import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions';
  33
  34 const mapProps = (state: IApplicationStoreState) => ({
  35   adaptiveModulationProperties: createAdaptiveModulationProperties(state),
  36   currentView: state.performanceHistory.subViews.adaptiveModulation.subView,
  37   isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible,
  38   existingFilter: state.performanceHistory.adaptiveModulation.filter
  39 });
  40
  41 const mapDisp = (dispatcher: IDispatcher) => ({
  42   adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch),
  43   setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)),
  44   toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("adaptiveModulation", value)) },
  45 });
  46
  47 type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
  48   selectedTimePeriod: string
  49 };
  50
  51 const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveModulationDataType>;
  52
  53 /**
  54  * The Component which gets the adaptiveModulation data from the database based on the selected time period.
  55  */
  56 class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{
  57
  58   onToggleFilterButton = () => {
  59     this.props.toggleFilterButton(!this.props.isFilterVisible);
  60   }
  61
  62   onChange = (value: "chart" | "table") => {
  63     this.props.setSubView(value);
  64   }
  65
  66   onFilterChanged = (property: string, filterTerm: string) => {
  67     this.props.adaptiveModulationActions.onFilterChanged(property, filterTerm);
  68     if (!this.props.adaptiveModulationProperties.showFilter)
  69       this.props.adaptiveModulationActions.onToggleFilter(false);
  70   }
  71
  72   render(): JSX.Element {
  73     const properties = this.props.adaptiveModulationProperties;
  74     const actions = this.props.adaptiveModulationActions;
  75
  76     const chartPagedData = this.getChartDataValues(properties.rows);
  77     const adaptiveModulationColumns: ColumnModel<AdaptiveModulationDataType>[] = [
  78       { property: "radioSignalId", title: "Radio signal", type: ColumnType.text },
  79       { property: "scannerId", title: "Scanner ID", type: ColumnType.text },
  80       { property: "timeStamp", title: "End Time", type: ColumnType.text },
  81       {
  82         property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean
  83       }];
  84
  85     chartPagedData.datasets.forEach(ds => {
  86       adaptiveModulationColumns.push(addColumnLabels<AdaptiveModulationDataType>(ds.name, ds.columnLabel));
  87     });
  88
  89     return (
  90       <>
  91         <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
  92           {lineChart(chartPagedData)}
  93           <AdaptiveModulationTable stickyHeader idProperty={"_id"} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} />
  94         </ToggleContainer>
  95       </>
  96     );
  97   };
  98
  99   /**
 100    * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure
 101    * which is to be sent to the chart.
 102    */
 103
 104   private getChartDataValues = (rows: AdaptiveModulationDataType[]): IDataSetsObject => {
 105     const _rows = [...rows];
 106     sortDataByTimeStamp(_rows);
 107
 108     const datasets: IDataSet[] = [{
 109       name: "time2StatesS",
 110       label: "QAM2S",
 111       borderColor: '#62a309fc',
 112       bezierCurve: false,
 113       lineTension: 0,
 114       fill: false,
 115       data: [],
 116       columnLabel: "QAM2S",
 117     }, {
 118       name: "time2States",
 119       label: "QAM2",
 120       borderColor: '#62a309fc',
 121       bezierCurve: false,
 122       lineTension: 0,
 123       fill: false,
 124       data: [],
 125       columnLabel: "QAM2",
 126     }, {
 127       name: "time2StatesL",
 128       label: "QAM2L",
 129       borderColor: '#62a309fc',
 130       bezierCurve: false,
 131       lineTension: 0,
 132       fill: false,
 133       data: [],
 134       columnLabel: "QAM2L",
 135     }, {
 136       name: "time4StatesS",
 137       label: "QAM4S",
 138       borderColor: '#b308edde',
 139       bezierCurve: false,
 140       lineTension: 0,
 141       fill: false,
 142       data: [],
 143       columnLabel: "QAM4S",
 144     }, {
 145       name: "time4States",
 146       label: "QAM4",
 147       borderColor: '#b308edde',
 148       bezierCurve: false,
 149       lineTension: 0,
 150       fill: false,
 151       data: [],
 152       columnLabel: "QAM4",
 153     }, {
 154       name: "time4StatesL",
 155       label: "QAM4L",
 156       borderColor: '#b308edde',
 157       bezierCurve: false,
 158       lineTension: 0,
 159       fill: false,
 160       data: [],
 161       columnLabel: "QAM4L",
 162     }, {
 163       name: "time16StatesS",
 164       label: "QAM16S",
 165       borderColor: '#9b15e2',
 166       bezierCurve: false,
 167       lineTension: 0,
 168       fill: false,
 169       data: [],
 170       columnLabel: "QAM16S",
 171     }, {
 172       name: "time16States",
 173       label: "QAM16",
 174       borderColor: '#9b15e2',
 175       bezierCurve: false,
 176       lineTension: 0,
 177       fill: false,
 178       data: [],
 179       columnLabel: "QAM16",
 180     }, {
 181       name: "time16StatesL",
 182       label: "QAM16L",
 183       borderColor: '#9b15e2',
 184       bezierCurve: false,
 185       lineTension: 0,
 186       fill: false,
 187       data: [],
 188       columnLabel: "QAM16L",
 189     }, {
 190       name: "time32StatesS",
 191       label: "QAM32S",
 192       borderColor: '#2704f5f0',
 193       bezierCurve: false,
 194       lineTension: 0,
 195       fill: false,
 196       data: [],
 197       columnLabel: "QAM32S",
 198     }, {
 199       name: "time32States",
 200       label: "QAM32",
 201       borderColor: '#2704f5f0',
 202       bezierCurve: false,
 203       lineTension: 0,
 204       fill: false,
 205       data: [],
 206       columnLabel: "QAM32",
 207     }, {
 208       name: "time32StatesL",
 209       label: "QAM32L",
 210       borderColor: '#2704f5f0',
 211       bezierCurve: false,
 212       lineTension: 0,
 213       fill: false,
 214       data: [],
 215       columnLabel: "QAM32L",
 216     }, {
 217       name: "time64StatesS",
 218       label: "QAM64S",
 219       borderColor: '#347692',
 220       bezierCurve: false,
 221       lineTension: 0,
 222       fill: false,
 223       data: [],
 224       columnLabel: "QAM64S",
 225     }, {
 226       name: "time64States",
 227       label: "QAM64",
 228       borderColor: '#347692',
 229       bezierCurve: false,
 230       lineTension: 0,
 231       fill: false,
 232       data: [],
 233       columnLabel: "QAM64",
 234     }, {
 235       name: "time64StatesL",
 236       label: "QAM64L",
 237       borderColor: '#347692',
 238       bezierCurve: false,
 239       lineTension: 0,
 240       fill: false,
 241       data: [],
 242       columnLabel: "QAM64L",
 243     }, {
 244       name: "time128StatesS",
 245       label: "QAM128S",
 246       borderColor: '#885e22',
 247       bezierCurve: false,
 248       lineTension: 0,
 249       fill: false,
 250       data: [],
 251       columnLabel: "QAM128S",
 252     }, {
 253       name: "time128States",
 254       label: "QAM128",
 255       borderColor: '#885e22',
 256       bezierCurve: false,
 257       lineTension: 0,
 258       fill: false,
 259       data: [],
 260       columnLabel: "QAM128",
 261     }, {
 262       name: "time128StatesL",
 263       label: "QAM128L",
 264       borderColor: '#885e22',
 265       bezierCurve: false,
 266       lineTension: 0,
 267       fill: false,
 268       data: [],
 269       columnLabel: "QAM128L",
 270     }, {
 271       name: "time256StatesS",
 272       label: "QAM256S",
 273       borderColor: '#de07807a',
 274       bezierCurve: false,
 275       lineTension: 0,
 276       fill: false,
 277       data: [],
 278       columnLabel: "QAM256S",
 279     }, {
 280       name: "time256States",
 281       label: "QAM256",
 282       borderColor: '#de07807a',
 283       bezierCurve: false,
 284       lineTension: 0,
 285       fill: false,
 286       data: [],
 287       columnLabel: "QAM256",
 288     }, {
 289       name: "time256StatesL",
 290       label: "QAM256L",
 291       borderColor: '#de07807a',
 292       bezierCurve: false,
 293       lineTension: 0,
 294       fill: false,
 295       data: [],
 296       columnLabel: "QAM256L",
 297     }, {
 298       name: "time512StatesS",
 299       label: "QAM512S",
 300       borderColor: '#8fdaacde',
 301       bezierCurve: false,
 302       lineTension: 0,
 303       fill: false,
 304       data: [],
 305       columnLabel: "QAM512S",
 306     }, {
 307       name: "time512States",
 308       label: "QAM512",
 309       borderColor: '#8fdaacde',
 310       bezierCurve: false,
 311       lineTension: 0,
 312       fill: false,
 313       data: [],
 314       columnLabel: "QAM512",
 315     }, {
 316
 317       name: "time512StatesL",
 318       label: "QAM512L",
 319       borderColor: '#8fdaacde',
 320       bezierCurve: false,
 321       lineTension: 0,
 322       fill: false,
 323       data: [],
 324       columnLabel: "QAM512L",
 325     }, {
 326
 327       name: "time1024StatesS",
 328       label: "QAM1024S",
 329       borderColor: '#435b22',
 330       bezierCurve: false,
 331       lineTension: 0,
 332       fill: false,
 333       data: [],
 334       columnLabel: "QAM1024S",
 335     }, {
 336
 337       name: "time1024States",
 338       label: "QAM1024",
 339       borderColor: '#435b22',
 340       bezierCurve: false,
 341       lineTension: 0,
 342       fill: false,
 343       data: [],
 344       columnLabel: "QAM1024",
 345     }, {
 346
 347       name: "time1024StatesL",
 348       label: "QAM1024L",
 349       borderColor: '#435b22',
 350       bezierCurve: false,
 351       lineTension: 0,
 352       fill: false,
 353       data: [],
 354       columnLabel: "QAM1024L",
 355     }, {
 356       name: "time2048StatesS",
 357       label: "QAM2048S",
 358       borderColor: '#e87a5b',
 359       bezierCurve: false,
 360       lineTension: 0,
 361       fill: false,
 362       data: [],
 363       columnLabel: "QAM2048S",
 364     }, {
 365       name: "time2048States",
 366       label: "QAM2048",
 367       borderColor: '#e87a5b',
 368       bezierCurve: false,
 369       lineTension: 0,
 370       fill: false,
 371       data: [],
 372       columnLabel: "QAM2048",
 373     }, {
 374       name: "time2048StatesL",
 375       label: "QAM2048L",
 376       borderColor: '#e87a5b',
 377       bezierCurve: false,
 378       lineTension: 0,
 379       fill: false,
 380       data: [],
 381       columnLabel: "QAM2048L",
 382     }, {
 383       name: "time4096StatesS",
 384       label: "QAM4096S",
 385       borderColor: '#5be878',
 386       bezierCurve: false,
 387       lineTension: 0,
 388       fill: false,
 389       data: [],
 390       columnLabel: "QAM4096S",
 391     }, {
 392       name: "time4096States",
 393       label: "QAM4096",
 394       borderColor: '#5be878',
 395       bezierCurve: false,
 396       lineTension: 0,
 397       fill: false,
 398       data: [],
 399       columnLabel: "QAM4096",
 400     }, {
 401       name: "time4096StatesL",
 402       label: "QAM4096L",
 403       borderColor: '#5be878',
 404       bezierCurve: false,
 405       lineTension: 0,
 406       fill: false,
 407       data: [],
 408       columnLabel: "QAM4096L",
 409     }, {
 410       name: "time8192StatesS",
 411       label: "QAM8192s",
 412       borderColor: '#cb5be8',
 413       bezierCurve: false,
 414       lineTension: 0,
 415       fill: false,
 416       data: [],
 417       columnLabel: "QAM8192S",
 418     }, {
 419       name: "time8192States",
 420       label: "QAM8192",
 421       borderColor: '#cb5be8',
 422       bezierCurve: false,
 423       lineTension: 0,
 424       fill: false,
 425       data: [],
 426       columnLabel: "QAM8192",
 427     }, {
 428       name: "time8192StatesL",
 429       label: "QAM8192L",
 430       borderColor: '#cb5be8',
 431       bezierCurve: false,
 432       lineTension: 0,
 433       fill: false,
 434       data: [],
 435       columnLabel: "QAM8192L",
 436     }
 437     ];
 438
 439     _rows.forEach(row => {
 440       row.time2StatesS = row.performanceData.time2StatesS
 441       row.time2States = row.performanceData.time2States;
 442       row.time2StatesL = row.performanceData.time2StatesL;
 443       row.time4StatesS = row.performanceData.time4StatesS
 444       row.time4States = row.performanceData.time4States;
 445       row.time4StatesL = row.performanceData.time4StatesL;
 446       row.time16StatesS = row.performanceData.time16StatesS;
 447       row.time16States = row.performanceData.time16States;
 448       row.time16StatesL = row.performanceData.time16StatesL;
 449       row.time32StatesS = row.performanceData.time32StatesS;
 450       row.time32States = row.performanceData.time32States;
 451       row.time32StatesL = row.performanceData.time32StatesL;
 452       row.time64StatesS = row.performanceData.time64StatesS;
 453       row.time64States = row.performanceData.time64States;
 454       row.time64StatesL = row.performanceData.time64StatesL;
 455       row.time128StatesS = row.performanceData.time128StatesS;
 456       row.time128States = row.performanceData.time128States;
 457       row.time128StatesL = row.performanceData.time128StatesL;
 458       row.time256StatesS = row.performanceData.time256StatesS;
 459       row.time256States = row.performanceData.time256States;
 460       row.time256StatesL = row.performanceData.time256StatesL;
 461       row.time512StatesS = row.performanceData.time512StatesS;
 462       row.time512States = row.performanceData.time512States;
 463       row.time512StatesL = row.performanceData.time512StatesL;
 464       row.time1024StatesS = row.performanceData.time1024StatesS;
 465       row.time1024States = row.performanceData.time1024States;
 466       row.time1024StatesL = row.performanceData.time1024StatesL;
 467       row.time2048StatesS = row.performanceData.time2048StatesS;
 468       row.time2048States = row.performanceData.time2048States;
 469       row.time2048StatesL = row.performanceData.time2048StatesL;
 470       row.time4096StatesS = row.performanceData.time4096StatesS;
 471       row.time4096States = row.performanceData.time4096States;
 472       row.time4096StatesL = row.performanceData.time4096StatesL;
 473       row.time8192StatesS = row.performanceData.time8192StatesS;
 474       row.time8192States = row.performanceData.time8192States;
 475       row.time8192StatesL = row.performanceData.time8192StatesL;
 476       datasets.forEach(ds => {
 477         ds.data.push({
 478           x: row["timeStamp" as keyof AdaptiveModulationDataType] as string,
 479           y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string
 480         });
 481       });
 482     });
 483
 484     return {
 485       datasets: datasets
 486     };
 487   }
 488 }
 489 const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent));
 490 export default AdaptiveModulation;