Update odlux
Fix scrolling and resizing bug in all tables, update the ui, minior bugfixes
Issue-ID: SDNC-1067
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I6322d5f612dcbc0c044b4b67ef3c73d6d2c90949
diff --git a/sdnr/wt/odlux/framework/package.json b/sdnr/wt/odlux/framework/package.json
index d0fe49b..c945688 100644
--- a/sdnr/wt/odlux/framework/package.json
+++ b/sdnr/wt/odlux/framework/package.json
@@ -25,17 +25,17 @@
"license": "Apache-2.0",
"peerDependencies": {
"@types/node": "11.9.5",
- "@types/react": "16.9.11",
- "@types/react-dom": "16.9.4",
+ "@types/react": "16.9.19",
+ "@types/react-dom": "16.9.5",
"@types/react-router-dom": "4.3.1",
- "@material-ui/core": "4.6.1",
+ "@material-ui/core": "4.9.0",
"@material-ui/icons": "4.5.1",
"@types/classnames": "2.2.6",
"@types/flux": "3.1.8",
"@types/jquery": "3.3.10",
"jquery": "3.3.1",
- "react": "16.11.0",
- "react-dom": "16.11.0",
+ "react": "16.12.0",
+ "react-dom": "16.12.0",
"react-router-dom": "4.3.1",
"@fortawesome/react-fontawesome": "0.1.3",
"@fortawesome/fontawesome-svg-core": "1.2.12",
diff --git a/sdnr/wt/odlux/framework/pom.xml b/sdnr/wt/odlux/framework/pom.xml
index 6d80421..39856c5 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>39.0e1988b(20/01/12)</buildno>
+ <buildno>40.4a1f067(20/02/11)</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/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
index 5206744..b85319b 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -21,6 +21,7 @@
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
@@ -31,10 +32,13 @@
import { EnhancedTableFilter } from './tableFilter';
import { ColumnModel, ColumnType } from './columnModel';
-import { Omit } from '@material-ui/core';
+import { Omit, Menu } from '@material-ui/core';
+
import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
-import { replaceHyphen } from '../../utilities/yangHelper';
-import { string } from 'prop-types';
+
+import { DividerTypeMap } from '@material-ui/core/Divider';
+import { MenuItemProps } from '@material-ui/core/MenuItem';
+import { flexbox } from '@material-ui/system';
export { ColumnModel, ColumnType } from './columnModel';
type propType = string | number | null | undefined | (string | number)[];
@@ -70,14 +74,19 @@
const styles = (theme: Theme) => createStyles({
root: {
width: '100%',
+ overflow: "hidden",
marginTop: theme.spacing(3),
+ position: "relative",
+ boxSizing: "border-box",
+ display: "flex",
+ flexDirection: "column",
},
- table: {
- minWidth: 1020,
+ container: {
+ flex: "1 1 100%"
},
- tableWrapper: {
- overflowX: 'auto',
- },
+ pagination: {
+ overflow: "hidden"
+ }
});
export type MaterialTableComponentState<TData = {}> = {
@@ -100,11 +109,13 @@
idProperty: keyof TData | ((data: TData) => React.Key);
tableId?: string;
title?: string;
+ stickyHeader?: boolean;
enableSelection?: boolean;
disableSorting?: boolean;
disableFilter?: boolean;
customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
+ createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr" >>>[];
};
type MaterialTableComponentPropsWithRows<TData = {}> = MaterialTableComponentBaseProps<TData> & { rows: TData[]; asynchronus?: boolean; };
@@ -139,7 +150,7 @@
propsWithExternalState.onHandleRequestSort instanceof Function
}
-class MaterialTableComponent<TData extends {} = {}> extends React.Component<MaterialTableComponentProps, MaterialTableComponentState> {
+class MaterialTableComponent<TData extends {} = {}> extends React.Component<MaterialTableComponentProps, MaterialTableComponentState & { contextMenuInfo: { index: number; mouseX?: number; mouseY?: number }; }> {
constructor(props: MaterialTableComponentProps) {
super(props);
@@ -148,6 +159,7 @@
const rowsPerPage = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.rowsPerPage || 10 : 10;
this.state = {
+ contextMenuInfo: {index : -1 },
filter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.filter || {} : {},
showFilter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.showFilter : false,
loading: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.loading : false,
@@ -176,10 +188,10 @@
const toggleFilter = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.onToggleFilter : () => { !this.props.disableFilter && this.setState({ showFilter: !showFilter }, this.update) }
return (
<Paper className={classes.root}>
- <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv}
- onToggleFilter={toggleFilter} />
- <div className={classes.tableWrapper}>
- <Table className={classes.table} aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'}>
+ <TableContainer className={classes.container}>
+ <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv}
+ onToggleFilter={toggleFilter} />
+ <Table aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} >
<EnhancedTableHead
columns={columns}
numSelected={selected && selected.length}
@@ -196,10 +208,27 @@
.map((entry: TData & { [key: string]: any }, index) => {
const entryId = getId(entry);
const isSelected = this.isSelected(entryId);
+ const contextMenu = (this.props.createContextMenu && this.state.contextMenuInfo.index === index && this.props.createContextMenu(entry)) || null;
return (
<TableRow
hover
- onClick={event => this.handleClick(event, entry, entryId)}
+ onClick={event => {
+ if (this.props.createContextMenu) {
+ this.setState({
+ contextMenuInfo: {
+ index: -1
+ }
+ });
+ }
+ this.handleClick(event, entry, entryId);
+ }}
+ onContextMenu={event => {
+ if (this.props.createContextMenu) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.setState({ contextMenuInfo: { index, mouseX: event.clientX - 2, mouseY: event.clientY - 4 } });
+ }
+ }}
role="checkbox"
aria-checked={isSelected}
aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row-${(index + 1)}`}
@@ -230,6 +259,10 @@
}
)
}
+ {<Menu open={!!contextMenu} onClose={() => this.setState({ contextMenuInfo: { index: -1 } })} anchorReference="anchorPosition" keepMounted
+ anchorPosition={this.state.contextMenuInfo.mouseY != null && this.state.contextMenuInfo.mouseX != null ? { top: this.state.contextMenuInfo.mouseY, left: this.state.contextMenuInfo.mouseX } : undefined}>
+ {contextMenu}
+ </Menu> || null}
</TableRow>
);
})}
@@ -240,8 +273,8 @@
)}
</TableBody>
</Table>
- </div>
- <TablePagination
+ </TableContainer>
+ <TablePagination className={classes.pagination}
rowsPerPageOptions={[5, 10, 20, 50]}
component="div"
count={rowCount}
@@ -489,7 +522,7 @@
let csv: string[] = [];
if (isMaterialTableComponentPropsWithRequestData(this.props)) {
- // table with extra request handler
+ // table with extra request handler
this.setState({ loading: true });
const result = await Promise.resolve(
this.props.onRequestData(0, 1000, this.state.orderBy, this.state.order, this.state.showFilter && this.state.filter || {})
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index 00d43d9..fee5162 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -40,7 +40,7 @@
position: 'relative',
width: drawerWidth,
},
- toolbar: theme.mixins.toolbar,
+ toolbar: theme.mixins.toolbar as any,
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
diff --git a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
index e6af2eb..d212257 100644
--- a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
+++ b/sdnr/wt/odlux/framework/src/components/routing/appFrame.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 connect, { Connect } from '../../flux/connect';
@@ -38,7 +38,7 @@
public render(): JSX.Element {
return (
- <div style={{ flex: "1", overflow: "auto", display: "flex", flexDirection: "column" }}>
+ <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}>
{ this.props.children }
</div>
)
diff --git a/sdnr/wt/odlux/framework/src/services/forceLogoutService.ts b/sdnr/wt/odlux/framework/src/services/forceLogoutService.ts
index ce4faab..0c7c38d 100644
--- a/sdnr/wt/odlux/framework/src/services/forceLogoutService.ts
+++ b/sdnr/wt/odlux/framework/src/services/forceLogoutService.ts
@@ -27,11 +27,16 @@
export const startForceLogoutService = (store: ApplicationStore) => {
applicationStore = store;
- createForceLogoutInterval();
+ if (process.env.NODE_ENV === "development") {
+ console.warn("logout timer not started in development mode");
+ } else {
+ createForceLogoutInterval();
+ }
+
};
const createForceLogoutInterval = () => {
- console.log("logout timer running...")
+ console.log("logout timer running...");
return setInterval(function () {
if (applicationStore && applicationStore.state.framework.authenticationState.user) {
diff --git a/sdnr/wt/odlux/framework/src/services/notificationService.ts b/sdnr/wt/odlux/framework/src/services/notificationService.ts
index 85d3f71..c90da09 100644
--- a/sdnr/wt/odlux/framework/src/services/notificationService.ts
+++ b/sdnr/wt/odlux/framework/src/services/notificationService.ts
@@ -179,10 +179,13 @@
}
export const endWebsocketSession = () => {
- socketReady.then(websocket => {
- websocket.close();
- userLoggedOut = true;
- })
+ if (socketReady) {
+ socketReady.then(websocket => {
+ websocket.close();
+ userLoggedOut = true;
+ });
+ }
+
}
diff --git a/sdnr/wt/odlux/framework/src/views/frame.tsx b/sdnr/wt/odlux/framework/src/views/frame.tsx
index b93b7ee..f2f6f66 100644
--- a/sdnr/wt/odlux/framework/src/views/frame.tsx
+++ b/sdnr/wt/odlux/framework/src/views/frame.tsx
@@ -52,7 +52,7 @@
padding: theme.spacing(3),
minWidth: 0, // So the Typography noWrap works
},
- toolbar: theme.mixins.toolbar
+ toolbar: theme.mixins.toolbar as any
});
type FrameProps = WithStyles<typeof styles>;
diff --git a/sdnr/wt/odlux/framework/webpack.config.js b/sdnr/wt/odlux/framework/webpack.config.js
index 93b748d..e43539d 100644
--- a/sdnr/wt/odlux/framework/webpack.config.js
+++ b/sdnr/wt/odlux/framework/webpack.config.js
@@ -190,12 +190,26 @@
colors: true
},
proxy: {
- "/oauth2/**/*": {
- target: "http://172.18.0.3:8181",
+ "/oauth2/": {
+ target: "http://localhost:48181",
secure: false
},
- "/about": {
- target: "http://172.18.0.3:8181",
+ "/database/": {
+ target: "http://localhost:48181",
+ secure: false
+ },
+ "/restconf/": {
+ target: "http://localhost:48181",
+ secure: false
+ },
+ "/help/": {
+ target: "http://localhost:48181",
+ secure: false
+ },
+ "/websocket": {
+ target: "http://localhost:48181",
+ ws: true,
+ changeOrigin: true,
secure: false
}
}