summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-07-06 16:01:10 +0200
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-07-06 16:01:10 +0200
commit7152b77370d1989e4429ce37ec25b1e1baace0da (patch)
tree1c257a260cc85f05faba58c905a39b3a81dc12ed /sdnr/wt/odlux/framework
parent6950b473ff100653cf726ce2c3f8fe54a8076cfa (diff)
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
Diffstat (limited to 'sdnr/wt/odlux/framework')
-rw-r--r--sdnr/wt/odlux/framework/package.json8
-rw-r--r--sdnr/wt/odlux/framework/pom.xml2
-rw-r--r--sdnr/wt/odlux/framework/src/app.css1
-rw-r--r--sdnr/wt/odlux/framework/src/app.tsx10
-rw-r--r--sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gifbin0 -> 5709 bytes
-rw-r--r--sdnr/wt/odlux/framework/src/assets/images/odluxLogo.gif.d.ts20
-rw-r--r--sdnr/wt/odlux/framework/src/assets/images/onapLogo.gifbin0 -> 9249 bytes
-rw-r--r--sdnr/wt/odlux/framework/src/assets/images/onapLogo.gif.d.ts20
-rw-r--r--sdnr/wt/odlux/framework/src/components/errorDisplay.tsx2
-rw-r--r--sdnr/wt/odlux/framework/src/design/default.ts3
-rw-r--r--sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts21
-rw-r--r--sdnr/wt/odlux/framework/src/index.dev.html6
-rw-r--r--sdnr/wt/odlux/framework/src/services/notificationService.ts2
-rw-r--r--sdnr/wt/odlux/framework/src/views/about.tsx9
-rw-r--r--sdnr/wt/odlux/framework/src/views/home.tsx285
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
Binary files differ
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
Binary files differ
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