diff options
Diffstat (limited to 'sdnr/wt/odlux/framework')
-rw-r--r-- | sdnr/wt/odlux/framework/package.json | 10 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/pom.xml | 2 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/material-table/index.tsx | 67 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/navigationMenu.tsx | 2 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx | 36 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/services/forceLogoutService.ts | 9 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/services/notificationService.ts | 11 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/views/frame.tsx | 2 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/webpack.config.js | 22 |
9 files changed, 108 insertions, 53 deletions
diff --git a/sdnr/wt/odlux/framework/package.json b/sdnr/wt/odlux/framework/package.json index d0fe49b57..c94568857 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 6d80421b8..39856c5c0 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 520674441..b85319b40 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 { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/s 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 { EnhancedTableHead } from './tableHead'; 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 @@ function getSorting(order: 'asc' | 'desc' | null, orderBy: string) { 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, - }, - tableWrapper: { - overflowX: 'auto', + container: { + flex: "1 1 100%" }, + pagination: { + overflow: "hidden" + } }); export type MaterialTableComponentState<TData = {}> = { @@ -100,11 +109,13 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & { 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 @@ function isMaterialTableComponentPropsWithRowsAndRequestData(props: MaterialTabl 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 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate 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 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate 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 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate .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 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate } ) } + {<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 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate )} </TableBody> </Table> - </div> - <TablePagination + </TableContainer> + <TablePagination className={classes.pagination} rowsPerPageOptions={[5, 10, 20, 50]} component="div" count={rowCount} @@ -489,7 +522,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate 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 00d43d99c..fee51621e 100644 --- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx +++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx @@ -40,7 +40,7 @@ const styles = (theme: Theme) => createStyles({ 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 e6af2eb5d..d212257c8 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 @@ export class AppFrame extends React.Component<IAppFrameProps & Connect> { 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 ce4faab6b..0c7c38dff 100644 --- a/sdnr/wt/odlux/framework/src/services/forceLogoutService.ts +++ b/sdnr/wt/odlux/framework/src/services/forceLogoutService.ts @@ -27,11 +27,16 @@ let tickTimer = 15; 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 85d3f716b..c90da0946 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 startWebsocketSession = () => { }
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 b93b7ee01..f2f6f66cc 100644 --- a/sdnr/wt/odlux/framework/src/views/frame.tsx +++ b/sdnr/wt/odlux/framework/src/views/frame.tsx @@ -52,7 +52,7 @@ const styles = (theme: Theme) => createStyles({ 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 93b748d73..e43539dc7 100644 --- a/sdnr/wt/odlux/framework/webpack.config.js +++ b/sdnr/wt/odlux/framework/webpack.config.js @@ -190,12 +190,26 @@ module.exports = (env) => { 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
}
}
|