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