summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/framework/src')
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx6
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx6
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx36
-rw-r--r--sdnr/wt/odlux/framework/src/components/navigationMenu.tsx5
-rw-r--r--sdnr/wt/odlux/framework/src/components/titleBar.tsx4
-rw-r--r--sdnr/wt/odlux/framework/src/services/notificationService.ts386
-rw-r--r--sdnr/wt/odlux/framework/src/views/about.tsx16
-rw-r--r--sdnr/wt/odlux/framework/src/views/login.tsx1
8 files changed, 239 insertions, 221 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
index 3dfbe0b91..c5be81914 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -234,7 +234,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
}}
role="checkbox"
aria-checked={isSelected}
- aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row-${(index + 1)}`}
+ aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row`}
tabIndex={-1}
key={entryId}
selected={isSelected}
@@ -284,10 +284,10 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
- 'aria-label': 'Previous Page',
+ 'aria-label': 'previous-page',
}}
nextIconButtonProps={{
- 'aria-label': 'Next Page',
+ 'aria-label': 'next-page',
}}
onChangePage={this.onHandleChangePage}
onChangeRowsPerPage={this.onHandleChangeRowsPerPage}
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
index 464350a62..76f778eb4 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -74,11 +74,11 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
? null
: (col.type === ColumnType.boolean)
? <Select className={classes.input} aria-label={col.title ? (col.title as string).toLowerCase() + ' filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
- <MenuItem value={undefined} >
+ <MenuItem value={undefined} aria-label="none-value" >
<em>None</em>
</MenuItem>
- <MenuItem value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
- <MenuItem value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
+ <MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
+ <MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
</Select>
: <Input className={classes.input} inputProps={{ 'aria-label': col.title ? (col.title as string).toLowerCase() + ' filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
</TableCell>
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
index 1a7e58f77..23bad66ea 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
@@ -1,20 +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==========================================================================
- */
+/**
+ * ============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==========================================================================
+ */
import * as React from 'react';
import { NavLink, Link, Route } from 'react-router-dom';
@@ -50,7 +50,7 @@ export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
: null
}
{ typeof Primary === 'string'
- ? <ListItemText primary={ Primary } style={{ padding: 0 }} />
+ ? <ListItemText aria-label={"link-to-"+Primary.toLowerCase()} primary={ Primary } style={{ padding: 0 }} />
: <Primary />
}
</ListItem>
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index 620abd708..790677ae3 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -120,6 +120,11 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di
}
})
+ React.useEffect(()=>{
+ // trigger a resize if menu changed in case elements have to re-arrange
+ window.dispatchEvent(new Event('menu-resized'));
+ }, [isOpen])
+
return (
<Drawer
variant="permanent"
diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index 7168ff496..49c096691 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -101,8 +101,8 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE
// create notificationInfo element
const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?
(state.framework.applicationState.isWebsocketAvailable ?
- <Typography variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
- : <Typography variant="body1" className={classes.notificationInfo}>Notifications N/A |</Typography>;
+ <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
+ : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>;
// add notificationInfo element before help
diff --git a/sdnr/wt/odlux/framework/src/services/notificationService.ts b/sdnr/wt/odlux/framework/src/services/notificationService.ts
index c90da0946..4bcc05cc3 100644
--- a/sdnr/wt/odlux/framework/src/services/notificationService.ts
+++ b/sdnr/wt/odlux/framework/src/services/notificationService.ts
@@ -1,193 +1,193 @@
-/**
- * ============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==========================================================================
- */
-import * as X2JS from 'x2js';
-import { ApplicationStore } from '../store/applicationStore';
-import { SetWebsocketAction } from '../actions/websocketAction';
-
-const socketUrl = [location.protocol === 'https:' ? 'wss://' : 'ws://', 'admin', ':', 'admin', '@', location.hostname, ':', location.port, '/websocket'].join('');
-const subscriptions: { [scope: string]: SubscriptionCallback[] } = {};
-let socketReady: Promise<WebSocket>;
-let userLoggedOut = false;
-let wasWebsocketConnectionEstablished: undefined | boolean;
-let applicationStore: ApplicationStore | null;
-
-
-export interface IFormatedMessage {
- notifType: string | null;
- time: string;
-}
-
-export type SubscriptionCallback<TMessage extends IFormatedMessage = IFormatedMessage> = (msg: TMessage) => void;
-
-function formatData(event: MessageEvent): IFormatedMessage | undefined {
-
- var x2js = new X2JS();
- var jsonObj: { [key: string]: IFormatedMessage } = x2js.xml2js(event.data);
- if (jsonObj && typeof (jsonObj) === 'object') {
-
- const notifType = Object.keys(jsonObj)[0];
- const formated = jsonObj[notifType];
- formated.notifType = notifType;
- formated.time = new Date().toISOString();
- return formated;
- }
- return undefined;
-
-}
-
-export function subscribe<TMessage extends IFormatedMessage = IFormatedMessage>(scope: string | string[], callback: SubscriptionCallback<TMessage>): boolean {
- const scopes = scope instanceof Array ? scope : [scope];
-
- // send all new scopes to subscribe
- const newScopesToSubscribe: string[] = scopes.reduce((acc: string[], cur: string) => {
- const currentCallbacks = subscriptions[cur];
- if (currentCallbacks) {
- if (!currentCallbacks.some(c => c === callback)) {
- currentCallbacks.push(callback);
- }
- } else {
- subscriptions[cur] = [callback];
- acc.push(cur);
- }
- return acc;
- }, []);
-
- if (newScopesToSubscribe.length === 0) {
- return true;
- }
-
- return true;
-}
-
-
-export function unsubscribe<TMessage extends IFormatedMessage = IFormatedMessage>(scope: string | string[], callback: SubscriptionCallback<TMessage>): Promise<boolean> {
- return socketReady.then((notificationSocket) => {
- const scopes = scope instanceof Array ? scope : [scope];
- scopes.forEach(s => {
- const callbacks = subscriptions[s];
- const index = callbacks && callbacks.indexOf(callback);
- if (index > -1) {
- callbacks.splice(index, 1);
- }
- if (callbacks.length === 0) {
- subscriptions[s] === undefined;
- }
- });
-
- // send a subscription to all active scopes
- const scopesToSubscribe = Object.keys(subscriptions);
- if (notificationSocket.readyState === notificationSocket.OPEN) {
- const data = {
- 'data': 'scopes',
- 'scopes': scopesToSubscribe
- };
- notificationSocket.send(JSON.stringify(data));
- return true;
- }
- return false;
- });
-}
-
-export const startNotificationService = (store: ApplicationStore) => {
- applicationStore = store;
-}
-
-const connect = (): Promise<WebSocket> => {
- return new Promise((resolve, reject) => {
- const notificationSocket = new WebSocket(socketUrl);
-
- notificationSocket.onmessage = (event) => {
- // process received event
- if (typeof event.data === 'string') {
- const formated = formatData(event);
- if (formated && formated.notifType) {
- const callbacks = subscriptions[formated.notifType];
- if (callbacks) {
- callbacks.forEach(cb => {
- // ensure all callbacks will be called
- try {
- return cb(formated);
- } catch (reason) {
- console.error(reason);
- }
- });
- }
- }
- }
- };
-
- notificationSocket.onerror = function (error) {
- console.log("Socket error:");
- console.log(error);
- reject("Socket error: " + error);
- if (applicationStore) {
- applicationStore.dispatch(new SetWebsocketAction(false));
- }
- };
-
- notificationSocket.onopen = function (event) {
- if (applicationStore) {
- applicationStore.dispatch(new SetWebsocketAction(true));
- }
- console.log("Socket connection opened.");
- resolve(notificationSocket);
-
- // send a subscription to all active scopes
- const scopesToSubscribe = Object.keys(subscriptions);
- if (notificationSocket.readyState === notificationSocket.OPEN) {
- const data = {
- 'data': 'scopes',
- 'scopes': scopesToSubscribe
- };
- notificationSocket.send(JSON.stringify(data));
- };
- };
-
- notificationSocket.onclose = function (event) {
- console.log("socket connection closed");
- if (applicationStore) {
- applicationStore.dispatch(new SetWebsocketAction(false));
- }
- if (!userLoggedOut) {
- socketReady = connect();
- }
- };
- });
-}
-
-
-
-
-export const startWebsocketSession = () => {
- socketReady = connect();
- userLoggedOut = false;
-}
-
-export const endWebsocketSession = () => {
- if (socketReady) {
- socketReady.then(websocket => {
- websocket.close();
- userLoggedOut = true;
- });
- }
-
-}
-
-
-
-
+/**
+ * ============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==========================================================================
+ */
+import * as X2JS from 'x2js';
+import { ApplicationStore } from '../store/applicationStore';
+import { SetWebsocketAction } from '../actions/websocketAction';
+
+const socketUrl = [location.protocol === 'https:' ? 'wss://' : 'ws://', 'admin', ':', 'admin', '@', location.hostname, ':', location.port, '/websocket'].join('');
+const subscriptions: { [scope: string]: SubscriptionCallback[] } = {};
+let socketReady: Promise<WebSocket>;
+let userLoggedOut = false;
+let wasWebsocketConnectionEstablished: undefined | boolean;
+let applicationStore: ApplicationStore | null;
+
+
+export interface IFormatedMessage {
+ notifType: string | null;
+ time: string;
+}
+
+export type SubscriptionCallback<TMessage extends IFormatedMessage = IFormatedMessage> = (msg: TMessage) => void;
+
+function formatData(event: MessageEvent): IFormatedMessage | undefined {
+
+ var x2js = new X2JS();
+ var jsonObj: { [key: string]: IFormatedMessage } = x2js.xml2js(event.data);
+ if (jsonObj && typeof (jsonObj) === 'object') {
+
+ const notifType = Object.keys(jsonObj)[0];
+ const formated = jsonObj[notifType];
+ formated.notifType = notifType;
+ formated.time = new Date().toISOString();
+ return formated;
+ }
+ return undefined;
+
+}
+
+export function subscribe<TMessage extends IFormatedMessage = IFormatedMessage>(scope: string | string[], callback: SubscriptionCallback<TMessage>): boolean {
+ const scopes = scope instanceof Array ? scope : [scope];
+
+ // send all new scopes to subscribe
+ const newScopesToSubscribe: string[] = scopes.reduce((acc: string[], cur: string) => {
+ const currentCallbacks = subscriptions[cur];
+ if (currentCallbacks) {
+ if (!currentCallbacks.some(c => c === callback)) {
+ currentCallbacks.push(callback);
+ }
+ } else {
+ subscriptions[cur] = [callback];
+ acc.push(cur);
+ }
+ return acc;
+ }, []);
+
+ if (newScopesToSubscribe.length === 0) {
+ return true;
+ }
+
+ return true;
+}
+
+
+export function unsubscribe<TMessage extends IFormatedMessage = IFormatedMessage>(scope: string | string[], callback: SubscriptionCallback<TMessage>): Promise<boolean> {
+ return socketReady.then((notificationSocket) => {
+ const scopes = scope instanceof Array ? scope : [scope];
+ scopes.forEach(s => {
+ const callbacks = subscriptions[s];
+ const index = callbacks && callbacks.indexOf(callback);
+ if (index > -1) {
+ callbacks.splice(index, 1);
+ }
+ if (callbacks.length === 0) {
+ subscriptions[s] === undefined;
+ }
+ });
+
+ // send a subscription to all active scopes
+ const scopesToSubscribe = Object.keys(subscriptions);
+ if (notificationSocket.readyState === notificationSocket.OPEN) {
+ const data = {
+ 'data': 'scopes',
+ 'scopes': scopesToSubscribe
+ };
+ notificationSocket.send(JSON.stringify(data));
+ return true;
+ }
+ return false;
+ });
+}
+
+export const startNotificationService = (store: ApplicationStore) => {
+ applicationStore = store;
+}
+
+const connect = (): Promise<WebSocket> => {
+ return new Promise((resolve, reject) => {
+ const notificationSocket = new WebSocket(socketUrl);
+
+ notificationSocket.onmessage = (event) => {
+ // process received event
+ if (typeof event.data === 'string') {
+ const formated = formatData(event);
+ if (formated && formated.notifType) {
+ const callbacks = subscriptions[formated.notifType];
+ if (callbacks) {
+ callbacks.forEach(cb => {
+ // ensure all callbacks will be called
+ try {
+ return cb(formated);
+ } catch (reason) {
+ console.error(reason);
+ }
+ });
+ }
+ }
+ }
+ };
+
+ notificationSocket.onerror = function (error) {
+ console.log("Socket error:");
+ console.log(error);
+ reject("Socket error: " + error);
+ if (applicationStore) {
+ applicationStore.dispatch(new SetWebsocketAction(false));
+ }
+ };
+
+ notificationSocket.onopen = function (event) {
+ if (applicationStore) {
+ applicationStore.dispatch(new SetWebsocketAction(true));
+ }
+ console.log("Socket connection opened.");
+ resolve(notificationSocket);
+
+ // send a subscription to all active scopes
+ const scopesToSubscribe = Object.keys(subscriptions);
+ if (notificationSocket.readyState === notificationSocket.OPEN) {
+ const data = {
+ 'data': 'scopes',
+ 'scopes': scopesToSubscribe
+ };
+ notificationSocket.send(JSON.stringify(data));
+ };
+ };
+
+ notificationSocket.onclose = function (event) {
+ console.log("socket connection closed");
+ if (applicationStore) {
+ applicationStore.dispatch(new SetWebsocketAction(false));
+ }
+ if (!userLoggedOut) {
+ socketReady = connect();
+ }
+ };
+ });
+}
+
+
+
+
+export const startWebsocketSession = () => {
+ socketReady = connect();
+ userLoggedOut = false;
+}
+
+export const endWebsocketSession = () => {
+ if (socketReady) {
+ socketReady.then(websocket => {
+ websocket.close();
+ userLoggedOut = true;
+ });
+ }
+
+}
+
+
+
+
diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index c4a5488e0..f97d6ffb3 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -40,11 +40,23 @@ class AboutComponent extends React.Component<any, AboutState> {
this.textarea = React.createRef();
this.loadAboutContent();
}
+ private getMarkOdluxVersionMarkdownTable(data:{version:string,build:string}|null|undefined):string{
+ if(!data) {
+ return "";
+ }
+ return `| | |\n| --- | --- |\n| Version | ${data.version} |\n| Build timestamp | ${data.build}|`
+ }
private loadAboutContent(): void {
- requestRestExt<string>('/about').then((response) => {
+ const baseUri = window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/")+1);
+ const p1 = requestRestExt<string>('/about');
+ const p2 = requestRestExt<{version:string,build:string}>(`${baseUri}version.json`);
+ Promise.all([p1,p2]).then((responses) => {
+ const response = responses[0];
+ const response2 = responses[1];
const content = response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error";
+ const content2 = `\n## ODLUX Version Info\n`+(response2.status == 200 ? this.getMarkOdluxVersionMarkdownTable(response2.data) : `${response2.status} ${response2.message}` || "ODLUX Server error");
const loadedSucessfully = response.status == 200 ? true : false;
- this.setState({ content: content || null, isContentLoadedSucessfully: loadedSucessfully });
+ this.setState({ content: (content + content2) || null, isContentLoadedSucessfully: loadedSucessfully });
}).catch((error) => {
this.setState({ content: error })
})
diff --git a/sdnr/wt/odlux/framework/src/views/login.tsx b/sdnr/wt/odlux/framework/src/views/login.tsx
index 30b9c85a2..b06cf7631 100644
--- a/sdnr/wt/odlux/framework/src/views/login.tsx
+++ b/sdnr/wt/odlux/framework/src/views/login.tsx
@@ -142,6 +142,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
label="Remember me"
/>
<Button
+ aria-label="login-button"
type="submit"
fullWidth
variant="contained"