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
10 * http://www.apache.org/licenses/LICENSE-2.0
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
16 * ============LICENSE_END==========================================================================
18 import React from 'react';
19 import { RouteComponentProps, withRouter } from 'react-router-dom';
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';
26 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
27 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
29 const styles = () => createStyles({
36 const scrollbar = { overflow: 'auto', paddingRight: '20px' };
38 let connectionStatusinitialLoad = true;
39 let connectionStatusinitialStateChanged = false;
40 let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
41 let connectionTotalCount = 0;
43 let alarmStatusinitialLoad = true;
44 let alarmStatusinitialStateChanged = false;
45 let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
46 let alarmTotalCount = 0;
48 const mapProps = (state: IApplicationStoreState) => ({
49 alarmStatus: state.fault.faultStatus,
52 const mapDispatch = (dispatcher: IDispatcher) => ({
53 navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
56 type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
58 class DashboardHome extends React.Component<HomeComponentProps> {
59 constructor(props: HomeComponentProps) {
65 render(): JSX.Element {
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,
75 connectionTotalCount = this.props.alarmStatus.Connected + this.props.alarmStatus.Connecting
76 + this.props.alarmStatus.Disconnected + this.props.alarmStatus.UnableToConnect + this.props.alarmStatus.Undefined;
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,
87 alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major
88 + this.props.alarmStatus.minor + this.props.alarmStatus.warning;
91 /** Available Network Connection Status chart data */
92 const connectionStatusData = {
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,
101 labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect', 'Undefined'],
102 data: connectionStatusDataLoad,
106 'rgb(191, 191, 191)',
107 'rgb(191, 191, 191)',
108 'rgb(242, 240, 240)',
114 /** No Devices available */
115 const connectionStatusUnavailableData = {
116 labels: ['No Devices available'],
120 'rgb(255, 255, 255)',
125 /** Loading Connection Status chart */
126 const connectionStatusisLoading = {
127 labels: ['Loading chart...'],
131 'rgb(255, 255, 255)',
136 /** Loading Alarm Status chart */
137 const alarmStatusisLoading = {
138 labels: ['Loading chart...'],
142 'rgb(255, 255, 255)',
147 /** Connection status options */
148 let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect', 'Undefined'];
149 const connectionStatusOptions = {
152 label: (tooltipItem: any, data: any) => {
154 (data.datasets[tooltipItem.datasetIndex].labels &&
155 data.datasets[tooltipItem.datasetIndex].labels[
158 data.labels[tooltipItem.index] ||
164 data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
165 (data.datasets[tooltipItem.datasetIndex].labelSuffix || '');
172 maintainAspectRatio: false,
182 onClick: (event: MouseEvent, item: any) => {
184 let connectionStatus = labels[item[0]._index] + '';
185 this.props.navigateToApplication('connect', '/connectionStatus/' + connectionStatus);
190 /** Connection status unavailable options */
191 const connectionStatusUnavailableOptions = {
193 maintainAspectRatio: false,
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,
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),
221 ctx.fillText(text, textX, textY);
226 /** Alarm status Data */
227 const alarmStatusData = {
229 'Critical : ' + this.props.alarmStatus.critical,
230 'Major : ' + this.props.alarmStatus.major,
231 'Minor : ' + this.props.alarmStatus.minor,
232 'Warning : ' + this.props.alarmStatus.warning,
235 labels: ['Critical', 'Major', 'Minor', 'Warning'],
236 data: alarmStatusDataLoad,
246 /** No Alarm status available */
247 const alarmStatusUnavailableData = {
248 labels: ['No Alarms available'],
257 /** Alarm status Options */
258 let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
259 const alarmStatusOptions = {
262 label: (tooltipItem: any, data: any) => {
264 (data.datasets[tooltipItem.datasetIndex].labels &&
265 data.datasets[tooltipItem.datasetIndex].labels[
268 data.labels[tooltipItem.index] ||
274 data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] +
275 (data.datasets[tooltipItem.datasetIndex].labelSuffix || '');
282 maintainAspectRatio: false,
292 onClick: (event: MouseEvent, item: any) => {
294 let severity = alarmLabels[item[0]._index] + '';
295 this.props.navigateToApplication('fault', '/alarmStatus/' + severity);
300 /** Alarm status unavailable options */
301 const alarmStatusUnavailableOptions = {
303 maintainAspectRatio: false,
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,
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),
330 ctx.fillText(text, textX, textY);
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 ?
343 data={connectionStatusData}
347 options={connectionStatusOptions}
348 plugins={connectionStatusPlugins}
351 data={connectionStatusUnavailableData}
355 options={connectionStatusUnavailableOptions}
356 plugins={connectionStatusPlugins} />
358 data={connectionStatusisLoading}
362 options={connectionStatusUnavailableOptions}
363 plugins={connectionStatusPlugins}
367 <div style={{ width: '50%', float: 'left' }}>
368 {this.checkAlarmsAreLoaded() ?
369 this.checkAlarmStatus() && alarmTotalCount != 0 ?
371 data={alarmStatusData}
375 options={alarmStatusOptions}
376 plugins={alarmStatusPlugins}
379 data={alarmStatusUnavailableData}
383 options={alarmStatusUnavailableOptions}
384 plugins={alarmStatusPlugins}
387 data={alarmStatusisLoading}
391 options={alarmStatusUnavailableOptions}
392 plugins={alarmStatusPlugins}
401 /** Check if connection status data available */
402 public checkConnectionStatus = () => {
403 let statusCount = this.props.alarmStatus;
404 if (statusCount.isLoadingConnectionStatusChart) {
407 if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
408 && statusCount.UnableToConnect == 0 && statusCount.Undefined == 0) {
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;
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;
432 return !isLoadingCheck.isLoadingConnectionStatusChart;
437 /** Check if alarms data available */
438 public checkAlarmStatus = () => {
439 let alarmCount = this.props.alarmStatus;
440 if (alarmCount.isLoadingAlarmStatusChart) {
443 if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
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;
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;
467 return !isLoadingCheck.isLoadingAlarmStatusChart;
473 export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));