From 7152b77370d1989e4429ce37ec25b1e1baace0da Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 6 Jul 2021 16:01:10 +0200 Subject: Add dashboard to odlux Add connected element and fault info to home page Issue-ID: CCSDK-3238 Signed-off-by: Aijana Schumann Change-Id: Ia47442fd0877b721d25d9f97e3a19088df193439 --- sdnr/wt/odlux/framework/src/views/home.tsx | 285 ++++++++++++++++++++++++++++- 1 file changed, 278 insertions(+), 7 deletions(-) (limited to 'sdnr/wt/odlux/framework/src/views/home.tsx') diff --git a/sdnr/wt/odlux/framework/src/views/home.tsx b/sdnr/wt/odlux/framework/src/views/home.tsx index 4a4084e88..b5df0526f 100644 --- a/sdnr/wt/odlux/framework/src/views/home.tsx +++ b/sdnr/wt/odlux/framework/src/views/home.tsx @@ -17,11 +17,282 @@ */ import * as React from 'react'; -export const Home = (props: React.Props) => { - return ( -
-

Welcome to ODLUX.

-
- ) +import { withRouter, RouteComponentProps } from 'react-router-dom'; +import connect, { Connect, IDispatcher } from '..//flux/connect'; +import { IApplicationState } from '../handlers/applicationStateHandler'; +import { IApplicationStoreState } from '../store/applicationStore'; +import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Doughnut } from 'react-chartjs-2'; +import { NavigateToApplication } from '../actions/navigationActions'; + +const styles = (theme: Theme) => createStyles({ + pageWidthSettings: { + width: '50%', + float: 'left' + }, +}) + +const scrollbar = { overflow: "auto", paddingRight: "20px" } + +const mapProps = (state: IApplicationStoreState) => ({ + connectionStatusCount: state.connect.connectionStatusCount, + alarmStatus: state.fault.faultStatus +}); + +const mapDispatch = (dispatcher: IDispatcher) => ({ + navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), +}); + +type HomeComponentProps = RouteComponentProps & Connect & WithStyles; + +class Home extends React.Component { + constructor(props: HomeComponentProps) { + super(props); + this.state = { + } + } + + render(): JSX.Element { + const { classes } = this.props; + + /** Available Network Connection Status chart data */ + const connectionStatusData = { + labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'], + datasets: [{ + data: [ + this.props.connectionStatusCount.Connected, + this.props.connectionStatusCount.Connecting, + this.props.connectionStatusCount.Disconnected, + this.props.connectionStatusCount.UnableToConnect + ], + backgroundColor: [ + 'rgb(0, 153, 51)', + 'rgb(255, 102, 0)', + 'rgb(191, 191, 191)', + 'rgb(191, 191, 191)' + ] + }] + }; + + + /** No Devices available */ + const connectionStatusUnavailableData = { + labels: ['No Devices available'], + datasets: [{ + data: [1], + backgroundColor: [ + 'rgb(255, 255, 255)' + ] + }] + }; + + /** Connection status options */ + let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect']; + const connectionStatusOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: true, + position: 'top' + } + }, + onClick: (event: MouseEvent, item: any) => { + if (item[0]) { + let connectionStatus = labels[item[0].index] + ''; + this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus); + } + } + } + + /** Connection status unavailable options */ + const connectionStatusUnavailableOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: true, + position: 'top' + }, + tooltip: { + enabled: false + } + } + } + + /** Add text inside the doughnut chart for Connection Status */ + const connectionStatusPlugins = [{ + beforeDraw: function (chart: any) { + var width = chart.width, + height = chart.height, + ctx = chart.ctx; + ctx.restore(); + var fontSize = (height / 480).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.textBaseline = "top"; + var text = "Network Connection Status", + textX = Math.round((width - ctx.measureText(text).width) / 2), + textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); + } + }] + + /** Alarm status Data */ + const alarmStatusData = { + labels: [ + 'Critical', + 'Major', + 'Minor', + 'Warning' + ], + datasets: [{ + data: [ + this.props.alarmStatus.critical, + this.props.alarmStatus.major, + this.props.alarmStatus.minor, + this.props.alarmStatus.warning + ], + backgroundColor: [ + 'rgb(240, 25, 10)', + 'rgb(240, 133, 10)', + 'rgb(240, 240, 10)', + 'rgb(46, 115, 176)' + ], + }] + } + + /** No Alarm status available */ + const alarmStatusUnavailableData = { + labels: ['No Alarms available'], + datasets: [{ + data: [1], + backgroundColor: [ + 'rgb(0, 153, 51)' + ] + }] + }; + + /** Alarm status Options */ + let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning']; + const alarmStatusOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: true, + position: 'top' + } + }, + onClick: (event: MouseEvent, item: any) => { + if (item[0]) { + let severity = alarmLabels[item[0].index] + ''; + this.props.navigateToApplication("fault", '/alarmStatus/' + severity); + } + }, + }; + + /** Alarm status unavailable options */ + const alarmStatusUnavailableOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: true, + position: 'top' + }, + tooltip: { + enabled: false + } + } + } + /** Add text inside the doughnut chart for Alarm Status */ + const alarmStatusPlugins = [{ + beforeDraw: function (chart: any) { + var width = chart.width, + height = chart.height, + ctx = chart.ctx; + ctx.restore(); + var fontSize = (height / 480).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.textBaseline = "top"; + var text = "Network Alarm Status", + textX = Math.round((width - ctx.measureText(text).width) / 2), + textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); + } + }] + + return ( + <> +
+

Welcome to ODLUX

+
+ {this.checkConnectionStatus() ? + + : + } +
+
+ {this.checkAlarmStatus() ? + + : + } +
+
+ + ) + } + + /** Check if connection status data available */ + public checkConnectionStatus = () => { + let statusCount = this.props.connectionStatusCount; + if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0 && statusCount.UnableToConnect == 0) { + return false; + } + else + return true; + } + + /** Check if alarms data available */ + public checkAlarmStatus = () => { + let alarmCount = this.props.alarmStatus; + if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) { + return false; + } + else + return true; + } + } -export default Home; \ No newline at end of file + +export default withStyles(styles)(withRouter(connect(mapProps, mapDispatch)(Home))); \ No newline at end of file -- cgit 1.2.3-korg