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

15 files changed, 355 insertions, 34 deletions

diff --git a/sdnr/wt/odlux/framework/package.json b/sdnr/wt/odlux/framework/package.json
index 345fc8b4c..c2ad49c79 100644
--- a/sdnr/wt/odlux/framework/package.json
+++ b/sdnr/wt/odlux/framework/package.json
@@ -37,8 +37,8 @@
     "react": "17.0.1",

     "react-dom": "17.0.1",

     "react-router-dom": "5.2.0",

-    "@fortawesome/react-fontawesome": "0.1.3",

-    "@fortawesome/fontawesome-svg-core": "1.2.12",

+    "@fortawesome/react-fontawesome": "0.1.14",

+    "@fortawesome/fontawesome-svg-core": "1.2.35",

     "@fortawesome/free-solid-svg-icons": "5.6.3",

     "jsonwebtoken": "8.3.0",

     "@types/jsonwebtoken": "7.2.8"

@@ -46,6 +46,8 @@
   "dependencies": {

     "@babel/polyfill": "^7.0.0",

     "@types/x2js": "^3.1.0",

-    "http-server": "^0.11.1"

+    "chart.js": "^3.4.0",

+    "http-server": "^0.11.1",

+    "react-chartjs-2": "^3.0.3"

   }

 }

diff --git a/sdnr/wt/odlux/framework/pom.xml b/sdnr/wt/odlux/framework/pom.xml
index 9d648b52d..3e947539f 100644
--- a/sdnr/wt/odlux/framework/pom.xml
+++ b/sdnr/wt/odlux/framework/pom.xml
@@ -46,7 +46,7 @@
     <properties>
         <buildtime>${maven.build.timestamp}</buildtime>
         <distversion>ONAP Frankfurt (Neon, mdsal ${odl.mdsal.version})</distversion>
-        <buildno>96.078ad12(21/03/25)</buildno>
+        <buildno>110.0d5d064(21/07/05)</buildno>
         <odlux.version>ONAP SDN-R | ONF Wireless for ${distversion} - Build: ${buildtime} ${buildno} ${project.version}</odlux.version>
     </properties>
 
diff --git a/sdnr/wt/odlux/framework/src/app.css b/sdnr/wt/odlux/framework/src/app.css
index f70fbc0e4..9b653b3b5 100644
--- a/sdnr/wt/odlux/framework/src/app.css
+++ b/sdnr/wt/odlux/framework/src/app.css
@@ -1,5 +1,6 @@
 html, body, #app {
   height: 100%;
+  min-width: 1000px;
   padding: 0px;
   margin: 0px;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
diff --git a/sdnr/wt/odlux/framework/src/app.tsx b/sdnr/wt/odlux/framework/src/app.tsx
index 2d913be1b..7e162cd51 100644
--- a/sdnr/wt/odlux/framework/src/app.tsx
+++ b/sdnr/wt/odlux/framework/src/app.tsx
@@ -106,13 +106,3 @@ export const runApplication = () => {
 

 };

 

-if (process.env.NODE_ENV === "development") {

-  const addTransportPCEUrl = () =>{

-    const url = window.localStorage.getItem(transportPCEUrl);

-    if(url === null){

-        window.localStorage.setItem(transportPCEUrl, "http://10.20.6.32:18082/");

-        console.log("set transport url :D")

-    }

-  }

-  addTransportPCEUrl();

-}

diff --git a/sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif b/sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif
new file mode 100644
index 000000000..ad188a8d3
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif
diff --git a/sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif.d.ts b/sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif.d.ts
new file mode 100644
index 000000000..36131834c
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif.d.ts
@@ -0,0 +1,20 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+declare const odluxLogo: string;
+export default odluxLogo;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif b/sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif
new file mode 100644
index 000000000..cd7eb8f3c
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif
diff --git a/sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif.d.ts b/sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif.d.ts
new file mode 100644
index 000000000..5bfb37a84
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif.d.ts
@@ -0,0 +1,20 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+ declare const onapLogo: string;
+ export default onapLogo;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
index 4cf63e927..1060d4b6d 100644
--- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
+++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
@@ -72,7 +72,7 @@ type ErrorDisplayProps = WithStyles<typeof styles> & Connect;
 // }
 
 /**
- * Represents a compnent for formaing and displaying errors.
+ * Represents a component for formatting and displaying errors.
  */
 class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
   constructor(props: ErrorDisplayProps) {
diff --git a/sdnr/wt/odlux/framework/src/design/default.ts b/sdnr/wt/odlux/framework/src/design/default.ts
index 542c436f6..59b8c20ef 100644
--- a/sdnr/wt/odlux/framework/src/design/default.ts
+++ b/sdnr/wt/odlux/framework/src/design/default.ts
@@ -32,12 +32,13 @@
  *****************************************************************************/
 
 import { createMuiTheme } from '@material-ui/core/styles';
+import onapLogo from '../assets/images/onapLogo.gif'
 
 const theme = createMuiTheme({
   design: {
     id: "onap",
     name: "Open Networking Automation Plattform (ONAP)",
-    url: "https://www.onap.org/wp-content/uploads/sites/20/2017/02/logo_onap_2017.png",
+    url: onapLogo,
     height: 49,
     width: 229,
     logoHeight: 32,
diff --git a/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts b/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
index 06df6709f..6426066f6 100644
--- a/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
+++ b/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
@@ -29,7 +29,16 @@ import { ErrorInfo } from '../models/errorInfo';
 import { SnackbarItem } from '../models/snackbarItem';
 import { ExternalLoginProvider } from '../models/externalLoginProvider';
 import { ApplicationConfig } from '../models/applicationConfig';
+import { IConnectAppStoreState } from '../../../apps/connectApp/src/handlers/connectAppRootHandler';
+import { IFaultAppStoreState } from '../../../apps/faultApp/src/handlers/faultAppRootHandler';
 
+
+declare module '../store/applicationStore' {
+  interface IApplicationStoreState {
+    connect: IConnectAppStoreState;
+    fault: IFaultAppStoreState
+  }
+}
 export interface IApplicationState {
   title: string;
   appId?: string;
@@ -44,12 +53,12 @@ export interface IApplicationState {
   enablePolicy: boolean             // false 
 }
 
-const applicationStateInit: IApplicationState = { 
-  title: "Loading ...", 
-  errors: [], 
-  snackBars: [], 
-  isMenuOpen: true, 
-  isMenuClosedByUser: false, 
+const applicationStateInit: IApplicationState = {
+  title: "Loading ...",
+  errors: [],
+  snackBars: [],
+  isMenuOpen: true,
+  isMenuClosedByUser: false,
   isWebsocketAvailable: undefined,
   externalLoginProviders: null,
   authentication: "basic",
diff --git a/sdnr/wt/odlux/framework/src/index.dev.html b/sdnr/wt/odlux/framework/src/index.dev.html
index 240da266d..6c956386b 100644
--- a/sdnr/wt/odlux/framework/src/index.dev.html
+++ b/sdnr/wt/odlux/framework/src/index.dev.html
@@ -21,10 +21,10 @@
   </script>
   <script>
     // run the application
-    require(["app" /*,"connectApp","inventoryApp","faultApp","helpApp"*/], function (app,connectApp,inventoryApp,faultApp,helpApp) {
-      // connectApp.register();
+    require(["app" ,"connectApp","faultApp"/*,"inventoryApp","helpApp"*/], function (app,connectApp,faultApp,/*inventoryApp,helpApp*/) {
+      connectApp.register();
+      faultApp.register();
       // inventoryApp.register();
-      // faultApp.register();
       // helpApp.register();
       app("./app.tsx").runApplication();
     });
diff --git a/sdnr/wt/odlux/framework/src/services/notificationService.ts b/sdnr/wt/odlux/framework/src/services/notificationService.ts
index 5625b1f55..99e697e9a 100644
--- a/sdnr/wt/odlux/framework/src/services/notificationService.ts
+++ b/sdnr/wt/odlux/framework/src/services/notificationService.ts
@@ -51,7 +51,7 @@ function setCurrentSubscriptions(notificationSocket: WebSocket) {
       'data': 'scopes',
       'scopes':[{
         "schema":{
-            "namespace":"*",
+            "namespace":"urn:opendaylight:params:xml:ns:yang:devicemanager",
             "revision":"*",
             "notification": scopesToSubscribe 
          }
diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index 5d2257a3f..174444f70 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -97,7 +97,14 @@ class AboutComponent extends React.Component<any, AboutState> {
 
   private loadAboutContent(): void {
     const baseUri = window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/")+1);
-    const p1 = requestRestExt<string>('/about');
+    const init = {
+      'method': 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'text/markdown',
+      }
+    };
+    const p1 = requestRestExt<string>('/about',init);
     const p2 = requestRestExt<odluxVersion>(`${baseUri}version.json`);
     const p3 = requestRestExt<any>(`/topology/info/version`);
 
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