sdnr/wt-odlux/odlux/apps/faultApp/src/components/dashboardHome.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 { WithStyles } from '@mui/styles';
  22 import createStyles from '@mui/styles/createStyles';
  23 import { Doughnut } from 'react-chartjs-2';
  24 import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  25
  26 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
  27 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  28
  29 const styles = () => createStyles({
  30   pageWidthSettings: {
  31     width: '50%',
  32     float: 'left',
  33   },
  34 });
  35
  36 const scrollbar = { overflow: 'auto', paddingRight: '20px' };
  37
  38 let connectionStatusinitialLoad = true;
  39 let connectionStatusinitialStateChanged = false;
  40 let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
  41 let connectionTotalCount = 0;
  42
  43 let alarmStatusinitialLoad = true;
  44 let alarmStatusinitialStateChanged = false;
  45 let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
  46 let alarmTotalCount = 0;
  47
  48 const mapProps = (state: IApplicationStoreState) => ({
  49   alarmStatus: state.fault.faultStatus,
  50 });
  51
  52 const mapDispatch = (dispatcher: IDispatcher) => ({
  53   navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
  54 });
  55
  56 type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
  57
  58 class DashboardHome extends React.Component<HomeComponentProps>  {
  59   constructor(props: HomeComponentProps) {
  60     super(props);
  61     this.state = {
  62     };
  63   }
  64
  65   render(): JSX.Element {
  66
  67     if (!this.props.alarmStatus.isLoadingConnectionStatusChart) {
  68       connectionStatusDataLoad = [
  69         this.props.alarmStatus.Connected,
  70         this.props.alarmStatus.Connecting,
  71         this.props.alarmStatus.Disconnected,
  72         this.props.alarmStatus.UnableToConnect,
  73         this.props.alarmStatus.Undefined,
  74       ];
  75       connectionTotalCount = this.props.alarmStatus.Connected + this.props.alarmStatus.Connecting
  76         + this.props.alarmStatus.Disconnected + this.props.alarmStatus.UnableToConnect + this.props.alarmStatus.Undefined;
  77
  78     }
  79
  80     if (!this.props.alarmStatus.isLoadingAlarmStatusChart) {
  81       alarmStatusDataLoad = [
  82         this.props.alarmStatus.critical,
  83         this.props.alarmStatus.major,
  84         this.props.alarmStatus.minor,
  85         this.props.alarmStatus.warning,
  86       ];
  87       alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major
  88         + this.props.alarmStatus.minor + this.props.alarmStatus.warning;
  89     }
  90
  91     /** Available Network Connection Status chart data */
  92     const connectionStatusData = {
  93       labels: [
  94         'Connected: ' + this.props.alarmStatus.Connected,
  95         'Connecting: ' + this.props.alarmStatus.Connecting,
  96         'Disconnected: ' + this.props.alarmStatus.Disconnected,
  97         'UnableToConnect: ' + this.props.alarmStatus.UnableToConnect,
  98         'Undefined: ' + this.props.alarmStatus.Undefined,
  99       ],
 100       datasets: [{
 101         labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect', 'Undefined'],
 102         data: connectionStatusDataLoad,
 103         backgroundColor: [
 104           'rgb(0, 153, 51)',
 105           'rgb(255, 102, 0)',
 106           'rgb(191, 191, 191)',
 107           'rgb(191, 191, 191)',
 108           'rgb(242, 240, 240)',
 109         ],
 110       }],
 111     };
 112
 113
 114     /** No Devices available */
 115     const connectionStatusUnavailableData = {
 116       labels: ['No Devices available'],
 117       datasets: [{
 118         data: [1],
 119         backgroundColor: [
 120           'rgb(255, 255, 255)',
 121         ],
 122       }],
 123     };
 124
 125     /** Loading Connection Status chart */
 126     const connectionStatusisLoading = {
 127       labels: ['Loading chart...'],
 128       datasets: [{
 129         data: [1],
 130         backgroundColor: [
 131           'rgb(255, 255, 255)',
 132         ],
 133       }],
 134     };
 135
 136     /** Loading Alarm Status chart */
 137     const alarmStatusisLoading = {
 138       labels: ['Loading chart...'],
 139       datasets: [{
 140         data: [1],
 141         backgroundColor: [
 142           'rgb(255, 255, 255)',
 143         ],
 144       }],
 145     };
 146
 147     /** Connection status options */
 148     let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect', 'Undefined'];
 149     const connectionStatusOptions = {
 150       tooltips: {
 151         callbacks: {
 152           label: (tooltipItem: any, data: any) => {
 153             let label =
 154               (data.datasets[tooltipItem.datasetIndex].labels &&
 155                 data.datasets[tooltipItem.datasetIndex].labels[
 156                 tooltipItem.index
 157                 ]) ||
 158               data.labels[tooltipItem.index] ||
 159               '';
 160             if (label) {
 161               label += ': ';
 162             }
 163             label +=
 164               data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
 165               (data.datasets[tooltipItem.datasetIndex].labelSuffix || '');
 166
 167             return label;
 168           },
 169         },
 170       },
 171       responsive: true,
 172       maintainAspectRatio: false,
 173       animation: {
 174         duration: 0,
 175       },
 176       plugins: {
 177         legend: {
 178           display: true,
 179           position: 'top',
 180         },
 181       },
 182       onClick: (event: MouseEvent, item: any) => {
 183         setTimeout(() => {
 184           if (item[0]) {
 185             let connectionStatus = labels[item[0]._index] + '';
 186             this.props.navigateToApplication('connect', '/connectionStatus/' + connectionStatus);
 187           }
 188         }, 0);
 189       },
 190     };
 191
 192     /** Connection status unavailable options */
 193     const connectionStatusUnavailableOptions = {
 194       responsive: true,
 195       maintainAspectRatio: false,
 196       animation: {
 197         duration: 0,
 198       },
 199       plugins: {
 200         legend: {
 201           display: true,
 202           position: 'top',
 203         },
 204         tooltip: {
 205           enabled: false,
 206         },
 207       },
 208     };
 209
 210     /** Add text inside the doughnut chart for Connection Status */
 211     const connectionStatusPlugins = [{
 212       beforeDraw: function (chart: any) {
 213         var width = chart.width,
 214           height = chart.height,
 215           ctx = chart.ctx;
 216         ctx.restore();
 217         var fontSize = (height / 480).toFixed(2);
 218         ctx.font = fontSize + 'em sans-serif';
 219         ctx.textBaseline = 'top';
 220         var text = 'Network Connection Status',
 221           textX = Math.round((width - ctx.measureText(text).width) / 2),
 222           textY = height / 2;
 223         ctx.fillText(text, textX, textY);
 224         ctx.save();
 225       },
 226     }];
 227
 228     /** Alarm status Data */
 229     const alarmStatusData = {
 230       labels: [
 231         'Critical : ' + this.props.alarmStatus.critical,
 232         'Major : ' + this.props.alarmStatus.major,
 233         'Minor : ' + this.props.alarmStatus.minor,
 234         'Warning : ' + this.props.alarmStatus.warning,
 235       ],
 236       datasets: [{
 237         labels: ['Critical', 'Major', 'Minor', 'Warning'],
 238         data: alarmStatusDataLoad,
 239         backgroundColor: [
 240           'rgb(240, 25, 10)',
 241           'rgb(240, 133, 10)',
 242           'rgb(240, 240, 10)',
 243           'rgb(46, 115, 176)',
 244         ],
 245       }],
 246     };
 247
 248     /** No Alarm status available */
 249     const alarmStatusUnavailableData = {
 250       labels: ['No Alarms available'],
 251       datasets: [{
 252         data: [1],
 253         backgroundColor: [
 254           'rgb(0, 153, 51)',
 255         ],
 256       }],
 257     };
 258
 259     /** Alarm status Options */
 260     let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
 261     const alarmStatusOptions = {
 262       tooltips: {
 263         callbacks: {
 264           label: (tooltipItem: any, data: any) => {
 265             let label =
 266               (data.datasets[tooltipItem.datasetIndex].labels &&
 267                 data.datasets[tooltipItem.datasetIndex].labels[
 268                 tooltipItem.index
 269                 ]) ||
 270               data.labels[tooltipItem.index] ||
 271               '';
 272             if (label) {
 273               label += ': ';
 274             }
 275             label +=
 276               data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
 277               (data.datasets[tooltipItem.datasetIndex].labelSuffix || '');
 278
 279             return label;
 280           },
 281         },
 282       },
 283       responsive: true,
 284       maintainAspectRatio: false,
 285       animation: {
 286         duration: 0,
 287       },
 288       plugins: {
 289         legend: {
 290           display: true,
 291           position: 'top',
 292         },
 293       },
 294       onClick: (event: MouseEvent, item: any) => {
 295         setTimeout(() => {
 296           if (item[0]) {
 297             let severity = alarmLabels[item[0]._index] + '';
 298             this.props.navigateToApplication('fault', '/alarmStatus/' + severity);
 299           }
 300         }, 0);
 301       },
 302     };
 303
 304     /** Alarm status unavailable options */
 305     const alarmStatusUnavailableOptions = {
 306       responsive: true,
 307       maintainAspectRatio: false,
 308       animation: {
 309         duration: 0,
 310       },
 311       plugins: {
 312         legend: {
 313           display: true,
 314           position: 'top',
 315         },
 316         tooltip: {
 317           enabled: false,
 318         },
 319       },
 320     };
 321     /** Add text inside the doughnut chart for Alarm Status */
 322     const alarmStatusPlugins = [{
 323       beforeDraw: function (chart: any) {
 324         var width = chart.width,
 325           height = chart.height,
 326           ctx = chart.ctx;
 327         ctx.restore();
 328         var fontSize = (height / 480).toFixed(2);
 329         ctx.font = fontSize + 'em sans-serif';
 330         ctx.textBaseline = 'top';
 331         var text = 'Network Alarm Status',
 332           textX = Math.round((width - ctx.measureText(text).width) / 2),
 333           textY = height / 2;
 334         ctx.fillText(text, textX, textY);
 335         ctx.save();
 336       },
 337     }];
 338
 339     return (
 340       <>
 341         <div style={scrollbar} >
 342           <h1 aria-label="welcome-to-odlux">Welcome to ODLUX</h1>
 343           <div style={{ width: '50%', float: 'left' }}>
 344             {this.checkElementsAreLoaded() ?
 345               this.checkConnectionStatus() && connectionTotalCount != 0 ?
 346                 <Doughnut
 347                   data={connectionStatusData}
 348                   type={Doughnut}
 349                   width={500}
 350                   height={500}
 351                   options={connectionStatusOptions}
 352                   plugins={connectionStatusPlugins}
 353                 />
 354                 : <Doughnut
 355                   data={connectionStatusUnavailableData}
 356                   type={Doughnut}
 357                   width={500}
 358                   height={500}
 359                   options={connectionStatusUnavailableOptions}
 360                   plugins={connectionStatusPlugins} />
 361               : <Doughnut
 362                 data={connectionStatusisLoading}
 363                 type={Doughnut}
 364                 width={500}
 365                 height={500}
 366                 options={connectionStatusUnavailableOptions}
 367                 plugins={connectionStatusPlugins}
 368               />
 369             }
 370           </div>
 371           <div style={{ width: '50%', float: 'left' }}>
 372             {this.checkAlarmsAreLoaded() ?
 373               this.checkAlarmStatus() && alarmTotalCount != 0 ?
 374                 <Doughnut
 375                   data={alarmStatusData}
 376                   type={Doughnut}
 377                   width={500}
 378                   height={500}
 379                   options={alarmStatusOptions}
 380                   plugins={alarmStatusPlugins}
 381                 />
 382                 : <Doughnut
 383                   data={alarmStatusUnavailableData}
 384                   type={Doughnut}
 385                   width={500}
 386                   height={500}
 387                   options={alarmStatusUnavailableOptions}
 388                   plugins={alarmStatusPlugins}
 389                 />
 390               : <Doughnut
 391                 data={alarmStatusisLoading}
 392                 type={Doughnut}
 393                 width={500}
 394                 height={500}
 395                 options={alarmStatusUnavailableOptions}
 396                 plugins={alarmStatusPlugins}
 397               />
 398             }
 399           </div>
 400         </div>
 401       </>
 402     );
 403   }
 404
 405   /** Check if connection status data available */
 406   public checkConnectionStatus = () => {
 407     let statusCount = this.props.alarmStatus;
 408     if (statusCount.isLoadingConnectionStatusChart) {
 409       return true;
 410     }
 411     if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
 412       && statusCount.UnableToConnect == 0 && statusCount.Undefined == 0) {
 413       return false;
 414     } else {
 415       return true;
 416     }
 417   };
 418
 419   /** Check if connection status chart data is loaded */
 420   public checkElementsAreLoaded = () => {
 421     let isLoadingCheck = this.props.alarmStatus;
 422     if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) {
 423       if (this.checkConnectionStatus()) {
 424         connectionStatusinitialLoad = false;
 425         return true;
 426       }
 427       return false;
 428     } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) {
 429       connectionStatusinitialLoad = false;
 430       connectionStatusinitialStateChanged = true;
 431       return !isLoadingCheck.isLoadingConnectionStatusChart;
 432     } else if (connectionStatusinitialStateChanged) {
 433       if (!isLoadingCheck.isLoadingConnectionStatusChart) {
 434         connectionStatusinitialStateChanged = false;
 435       }
 436       return !isLoadingCheck.isLoadingConnectionStatusChart;
 437     }
 438     return true;
 439   };
 440
 441   /** Check if alarms data available */
 442   public checkAlarmStatus = () => {
 443     let alarmCount = this.props.alarmStatus;
 444     if (alarmCount.isLoadingAlarmStatusChart) {
 445       return true;
 446     }
 447     if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
 448       return false;
 449     } else {
 450       return true;
 451     }
 452   };
 453
 454   /** Check if alarm status chart data is loaded */
 455   public checkAlarmsAreLoaded = () => {
 456     let isLoadingCheck = this.props.alarmStatus;
 457     if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) {
 458       if (this.checkAlarmStatus()) {
 459         alarmStatusinitialLoad = false;
 460         return true;
 461       }
 462       return false;
 463     } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) {
 464       alarmStatusinitialLoad = false;
 465       alarmStatusinitialStateChanged = true;
 466       return !isLoadingCheck.isLoadingAlarmStatusChart;
 467     } else if (alarmStatusinitialStateChanged) {
 468       if (!isLoadingCheck.isLoadingAlarmStatusChart) {
 469         alarmStatusinitialStateChanged = false;
 470       }
 471       return !isLoadingCheck.isLoadingAlarmStatusChart;
 472     }
 473     return true;
 474   };
 475 }
 476
 477 export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));