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         if (item[0]) {
 184           let connectionStatus = labels[item[0]._index] + '';
 185           this.props.navigateToApplication('connect', '/connectionStatus/' + connectionStatus);
 186         }
 187       },
 188     };
 189
 190     /** Connection status unavailable options */
 191     const connectionStatusUnavailableOptions = {
 192       responsive: true,
 193       maintainAspectRatio: false,
 194       animation: {
 195         duration: 0,
 196       },
 197       plugins: {
 198         legend: {
 199           display: true,
 200           position: 'top',
 201         },
 202         tooltip: {
 203           enabled: false,
 204         },
 205       },
 206     };
 207
 208     /** Add text inside the doughnut chart for Connection Status */
 209     const connectionStatusPlugins = [{
 210       beforeDraw: function (chart: any) {
 211         var width = chart.width,
 212           height = chart.height,
 213           ctx = chart.ctx;
 214         ctx.restore();
 215         var fontSize = (height / 480).toFixed(2);
 216         ctx.font = fontSize + 'em sans-serif';
 217         ctx.textBaseline = 'top';
 218         var text = 'Network Connection Status',
 219           textX = Math.round((width - ctx.measureText(text).width) / 2),
 220           textY = height / 2;
 221         ctx.fillText(text, textX, textY);
 222         ctx.save();
 223       },
 224     }];
 225
 226     /** Alarm status Data */
 227     const alarmStatusData = {
 228       labels: [
 229         'Critical : ' + this.props.alarmStatus.critical,
 230         'Major : ' + this.props.alarmStatus.major,
 231         'Minor : ' + this.props.alarmStatus.minor,
 232         'Warning : ' + this.props.alarmStatus.warning,
 233       ],
 234       datasets: [{
 235         labels: ['Critical', 'Major', 'Minor', 'Warning'],
 236         data: alarmStatusDataLoad,
 237         backgroundColor: [
 238           'rgb(240, 25, 10)',
 239           'rgb(240, 133, 10)',
 240           'rgb(240, 240, 10)',
 241           'rgb(46, 115, 176)',
 242         ],
 243       }],
 244     };
 245
 246     /** No Alarm status available */
 247     const alarmStatusUnavailableData = {
 248       labels: ['No Alarms available'],
 249       datasets: [{
 250         data: [1],
 251         backgroundColor: [
 252           'rgb(0, 153, 51)',
 253         ],
 254       }],
 255     };
 256
 257     /** Alarm status Options */
 258     let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
 259     const alarmStatusOptions = {
 260       tooltips: {
 261         callbacks: {
 262           label: (tooltipItem: any, data: any) => {
 263             let label =
 264               (data.datasets[tooltipItem.datasetIndex].labels &&
 265                 data.datasets[tooltipItem.datasetIndex].labels[
 266                   tooltipItem.index
 267                 ]) ||
 268               data.labels[tooltipItem.index] ||
 269               '';
 270             if (label) {
 271               label += ': ';
 272             }
 273             label +=
 274               data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
 275               (data.datasets[tooltipItem.datasetIndex].labelSuffix || '');
 276
 277             return label;
 278           },
 279         },
 280       },
 281       responsive: true,
 282       maintainAspectRatio: false,
 283       animation: {
 284         duration: 0,
 285       },
 286       plugins: {
 287         legend: {
 288           display: true,
 289           position: 'top',
 290         },
 291       },
 292       onClick: (event: MouseEvent, item: any) => {
 293         if (item[0]) {
 294           let severity = alarmLabels[item[0]._index] + '';
 295           this.props.navigateToApplication('fault', '/alarmStatus/' + severity);
 296         }
 297       },
 298     };
 299
 300     /** Alarm status unavailable options */
 301     const alarmStatusUnavailableOptions = {
 302       responsive: true,
 303       maintainAspectRatio: false,
 304       animation: {
 305         duration: 0,
 306       },
 307       plugins: {
 308         legend: {
 309           display: true,
 310           position: 'top',
 311         },
 312         tooltip: {
 313           enabled: false,
 314         },
 315       },
 316     };
 317     /** Add text inside the doughnut chart for Alarm Status */
 318     const alarmStatusPlugins = [{
 319       beforeDraw: function (chart: any) {
 320         var width = chart.width,
 321           height = chart.height,
 322           ctx = chart.ctx;
 323         ctx.restore();
 324         var fontSize = (height / 480).toFixed(2);
 325         ctx.font = fontSize + 'em sans-serif';
 326         ctx.textBaseline = 'top';
 327         var text = 'Network Alarm Status',
 328           textX = Math.round((width - ctx.measureText(text).width) / 2),
 329           textY = height / 2;
 330         ctx.fillText(text, textX, textY);
 331         ctx.save();
 332       },
 333     }];
 334
 335     return (
 336       <>
 337         <div style={scrollbar} >
 338           <h1 aria-label="welcome-to-odlux">Welcome to ODLUX</h1>
 339           <div style={{ width: '50%', float: 'left' }}>
 340             {this.checkElementsAreLoaded() ?
 341               this.checkConnectionStatus() && connectionTotalCount != 0 ?
 342                 <Doughnut
 343                   data={connectionStatusData}
 344                   type={Doughnut}
 345                   width={500}
 346                   height={500}
 347                   options={connectionStatusOptions}
 348                   plugins={connectionStatusPlugins}
 349                 />
 350                 : <Doughnut
 351                   data={connectionStatusUnavailableData}
 352                   type={Doughnut}
 353                   width={500}
 354                   height={500}
 355                   options={connectionStatusUnavailableOptions}
 356                   plugins={connectionStatusPlugins} />
 357               : <Doughnut
 358                 data={connectionStatusisLoading}
 359                 type={Doughnut}
 360                 width={500}
 361                 height={500}
 362                 options={connectionStatusUnavailableOptions}
 363                 plugins={connectionStatusPlugins}
 364               />
 365             }
 366           </div>
 367           <div style={{ width: '50%', float: 'left' }}>
 368             {this.checkAlarmsAreLoaded() ?
 369               this.checkAlarmStatus() && alarmTotalCount != 0 ?
 370                 <Doughnut
 371                   data={alarmStatusData}
 372                   type={Doughnut}
 373                   width={500}
 374                   height={500}
 375                   options={alarmStatusOptions}
 376                   plugins={alarmStatusPlugins}
 377                 />
 378                 : <Doughnut
 379                   data={alarmStatusUnavailableData}
 380                   type={Doughnut}
 381                   width={500}
 382                   height={500}
 383                   options={alarmStatusUnavailableOptions}
 384                   plugins={alarmStatusPlugins}
 385                 />
 386               : <Doughnut
 387                 data={alarmStatusisLoading}
 388                 type={Doughnut}
 389                 width={500}
 390                 height={500}
 391                 options={alarmStatusUnavailableOptions}
 392                 plugins={alarmStatusPlugins}
 393               />
 394             }
 395           </div>
 396         </div>
 397       </>
 398     );
 399   }
 400
 401   /** Check if connection status data available */
 402   public checkConnectionStatus = () => {
 403     let statusCount = this.props.alarmStatus;
 404     if (statusCount.isLoadingConnectionStatusChart) {
 405       return true;
 406     }
 407     if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
 408       && statusCount.UnableToConnect == 0 && statusCount.Undefined == 0) {
 409       return false;
 410     } else {
 411       return true;
 412     }
 413   };
 414
 415   /** Check if connection status chart data is loaded */
 416   public checkElementsAreLoaded = () => {
 417     let isLoadingCheck = this.props.alarmStatus;
 418     if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) {
 419       if (this.checkConnectionStatus()) {
 420         connectionStatusinitialLoad = false;
 421         return true;
 422       }
 423       return false;
 424     } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) {
 425       connectionStatusinitialLoad = false;
 426       connectionStatusinitialStateChanged = true;
 427       return !isLoadingCheck.isLoadingConnectionStatusChart;
 428     } else if (connectionStatusinitialStateChanged) {
 429       if (!isLoadingCheck.isLoadingConnectionStatusChart) {
 430         connectionStatusinitialStateChanged = false;
 431       }
 432       return !isLoadingCheck.isLoadingConnectionStatusChart;
 433     }
 434     return true;
 435   };
 436
 437   /** Check if alarms data available */
 438   public checkAlarmStatus = () => {
 439     let alarmCount = this.props.alarmStatus;
 440     if (alarmCount.isLoadingAlarmStatusChart) {
 441       return true;
 442     }
 443     if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
 444       return false;
 445     } else {
 446       return true;
 447     }
 448   };
 449
 450   /** Check if alarm status chart data is loaded */
 451   public checkAlarmsAreLoaded = () => {
 452     let isLoadingCheck = this.props.alarmStatus;
 453     if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) {
 454       if (this.checkAlarmStatus()) {
 455         alarmStatusinitialLoad = false;
 456         return true;
 457       }
 458       return false;
 459     } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) {
 460       alarmStatusinitialLoad = false;
 461       alarmStatusinitialStateChanged = true;
 462       return !isLoadingCheck.isLoadingAlarmStatusChart;
 463     } else if (alarmStatusinitialStateChanged) {
 464       if (!isLoadingCheck.isLoadingAlarmStatusChart) {
 465         alarmStatusinitialStateChanged = false;
 466       }
 467       return !isLoadingCheck.isLoadingAlarmStatusChart;
 468     }
 469     return true;
 470   };
 471 }
 472
 473 export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));