Add dashboard to odlux

Add connected element and fault info to home page

Issue-ID: CCSDK-3238
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Ia47442fd0877b721d25d9f97e3a19088df193439

1 files changed, 278 insertions, 7 deletions

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<any>) => {
-  return (
-    <div>
-      <h1>Welcome to ODLUX.</h1>
-    </div>
-  )
+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<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
+
+class Home extends React.Component<HomeComponentProps>  {
+  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 (
+      <>
+        <div style={scrollbar} >
+          <h1>Welcome to ODLUX</h1>
+          <div className={classes.pageWidthSettings}>
+            {this.checkConnectionStatus() ?
+              <Doughnut
+                data={connectionStatusData}
+                type={Doughnut}
+                width={500}
+                height={500}
+                options={connectionStatusOptions}
+                plugins={connectionStatusPlugins}
+              />
+              : <Doughnut
+                data={connectionStatusUnavailableData}
+                type={Doughnut}
+                width={500}
+                height={500}
+                options={connectionStatusUnavailableOptions}
+                plugins={connectionStatusPlugins}
+              />
+            }
+          </div>
+          <div className={classes.pageWidthSettings}>
+            {this.checkAlarmStatus() ?
+              <Doughnut
+                data={alarmStatusData}
+                type={Doughnut}
+                width={500}
+                height={500}
+                options={alarmStatusOptions}
+                plugins={alarmStatusPlugins}
+              />
+              : <Doughnut
+                data={alarmStatusUnavailableData}
+                type={Doughnut}
+                width={500}
+                height={500}
+                options={alarmStatusUnavailableOptions}
+                plugins={alarmStatusPlugins}
+              />
+            }
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  /** 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