aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/connectApp
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-02-12 09:08:39 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-02-12 09:08:39 +0100
commitd0fc4329aa47fa3fdcc3a9f3af31e977ad21b979 (patch)
treee3083ab63c06a3bd228f4264e8c21ffdbdb205d7 /sdnr/wt/odlux/apps/connectApp
parent06fb529a84d4e7d70b3aca68c33b2980049d5973 (diff)
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
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp')
-rw-r--r--sdnr/wt/odlux/apps/connectApp/package.json6
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx2
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx87
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx43
-rw-r--r--sdnr/wt/odlux/apps/connectApp/webpack.config.js10
5 files changed, 69 insertions, 79 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/package.json b/sdnr/wt/odlux/apps/connectApp/package.json
index 04653d520..774daba6b 100644
--- a/sdnr/wt/odlux/apps/connectApp/package.json
+++ b/sdnr/wt/odlux/apps/connectApp/package.json
@@ -27,14 +27,14 @@
"@types/react": "16.9.11",
"@types/react-dom": "16.9.4",
"@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"
}
} \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
index 4e5ca65e1..ad7b247b0 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
@@ -38,7 +38,7 @@ type ConnectionStatusLogComponentProps = Connect<typeof mapProps, typeof mapDisp
class ConnectionStatusLogComponent extends React.Component<ConnectionStatusLogComponentProps> {
render(): JSX.Element {
return (
- <ConnectionStatusTable tableId="connection-status-table" columns={[
+ <ConnectionStatusTable stickyHeader tableId="connection-status-table" columns={[
{ property: "timestamp", title: "Time", type: ColumnType.text },
{ property: "nodeId", title: "Node Name", type: ColumnType.text },
{ property: "status", title: "Connection status", type: ColumnType.text },
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
index 0f4b0e8ff..0370df7cb 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
@@ -24,11 +24,6 @@ import LinkOffIcon from '@material-ui/icons/LinkOff';
import RemoveIcon from '@material-ui/icons/RemoveCircleOutline';
import EditIcon from '@material-ui/icons/Edit';
import Info from '@material-ui/icons/Info';
-import ComputerIcon from '@material-ui/icons/Computer';
-
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
@@ -43,6 +38,7 @@ import EditNetworkElementDialog, { EditNetworkElementDialogMode } from './editNe
import InfoNetworkElementDialog, { InfoNetworkElementDialogMode } from './infoNetworkElementDialog';
import { loadAllInfoElementAsync } from '../actions/infoNetworkElementActions';
import { TopologyNode } from '../models/topologyNetconf';
+import { MenuItem, Divider, Typography } from '@material-ui/core';
const styles = (theme: Theme) => createStyles({
connectionStatusConnected: {
@@ -68,6 +64,7 @@ const styles = (theme: Theme) => createStyles({
const mapProps = (state: IApplicationStoreState) => ({
networkElementsProperties: createNetworkElementsProperties(state),
+ applicationState: state,
});
const mapDispatch = (dispatcher: IDispatcher) => ({
@@ -105,6 +102,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
render(): JSX.Element {
const { classes } = this.props;
+ const { framework, connect, configuration, fault, help, inventory, maintenance, mediator } = this.props.applicationState as any;
const { networkElementToEdit } = this.state;
const addRequireNetworkElementAction = {
icon: AddIcon, tooltip: 'Add', onClick: () => {
@@ -117,7 +115,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
let counter = 0;
return (
<>
- <NetworkElementTable tableId="network-element-table" customActionButtons={[addRequireNetworkElementAction]} columns={[
+ <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[addRequireNetworkElementAction]} columns={[
{ property: "nodeId", title: "Node Name", type: ColumnType.text },
{ property: "isRequired", title: "Required", type: ColumnType.boolean },
{ property: "status", title: "Connection Status", type: ColumnType.text },
@@ -125,44 +123,26 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
{ property: "port", title: "Port", type: ColumnType.numeric },
{ property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
{ property: "deviceType", title: "Type", type: ColumnType.text },
- {
- property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => {
- counter++;
- return (
- <>
- <div className={classes.spacer}>
- {
- rowData.webUri && <Tooltip title={"Web Client"} ><IconButton aria-label={"web-client-button-" + counter} className={classes.button} onClick={event => { console.log(rowData); window.open(rowData.webUri, "_blank") }}><ComputerIcon /></IconButton></Tooltip>
- }
- <Tooltip title={"Mount"} >
- <IconButton aria-label={"mount-button-" + counter} className={classes.button} onClick={event => this.onOpenMountdNetworkElementsDialog(event, rowData)} >
- <LinkIcon /></IconButton>
- </Tooltip>
- <Tooltip title={"Unmount"} >
- <IconButton aria-label={"unmount-button-" + counter} className={classes.button} onClick={event => this.onOpenUnmountdNetworkElementsDialog(event, rowData)} >
- <LinkOffIcon /></IconButton>
- </Tooltip>
- <Tooltip title={"Info"} ><IconButton aria-label={"info-button-" + counter} className={classes.button} onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected"} >
- <Info /></IconButton>
- </Tooltip>
- <Tooltip title={"Edit"} ><IconButton aria-label={"edit-button-" + counter} className={classes.button} onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)} ><EditIcon /></IconButton></Tooltip>
- <Tooltip title={"Remove"} ><IconButton aria-label={"remove-button-" + counter} className={classes.button} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /></IconButton></Tooltip>
- </div>
- <div className={classes.spacer}>
- <Tooltip title={"Inventory"} ><Button aria-label={"inventory-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("inventory", rowData)} >I</Button></Tooltip>
- </div>
- <div className={classes.spacer}>
- <Tooltip title={"Fault"} ><Button aria-label={"fault-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("fault", rowData)} >F</Button></Tooltip>
- <Tooltip title={"Configure"} ><Button aria-label={"configure-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("configuration", rowData)} >C</Button></Tooltip>
- <Tooltip title={"Accounting "} ><Button className={classes.button} onClick={this.navigateToApplicationHandlerCreator("accounting", rowData)} disabled={true} >A</Button></Tooltip>
- <Tooltip title={"Performance"} ><Button aria-label={"performance-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("performanceHistory", rowData)}>P</Button></Tooltip>
- <Tooltip title={"Security"} ><Button className={classes.button} onClick={this.navigateToApplicationHandlerCreator("security", rowData)} disabled={true} >S</Button></Tooltip>
- </div>
- </>
- )
- }
- },
- ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus >
+ ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => {
+ return [
+ <MenuItem onClick={event => this.onOpenMountdNetworkElementsDialog(event, rowData)} ><LinkIcon /><Typography>Mount</Typography></MenuItem>,
+ <MenuItem onClick={event => this.onOpenUnmountdNetworkElementsDialog(event, rowData)}><LinkOffIcon /><Typography>Unmount</Typography></MenuItem>,
+ <Divider />,
+ <MenuItem onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected"} ><Info /><Typography>Info</Typography></MenuItem>,
+ <MenuItem onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
+ !rowData.isRequired
+ ? <MenuItem onClick={event => this.onOpenAddNetworkElementDialog(event, rowData)} ><AddIcon /><Typography>Add</Typography></MenuItem>
+ : <MenuItem onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
+ <Divider />,
+ <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("inventory", rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !inventory}><Typography>Inventory</Typography></MenuItem>,
+ <Divider />,
+ <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("fault", rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !fault}><Typography>Fault</Typography></MenuItem>,
+ <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("configuration", rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !configuration}><Typography>Configure</Typography></MenuItem>,
+ <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("accounting", rowData)} disabled={true}><Typography>Accounting</Typography></MenuItem>,
+ <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("performanceHistory", rowData)} disabled={true}><Typography>Performance</Typography></MenuItem>,
+ <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("security", rowData)} disabled={true} ><Typography>Security</Typography></MenuItem>,
+ ];
+ }} >
</NetworkElementTable>
<EditNetworkElementDialog
initialNetworkElement={networkElementToEdit}
@@ -182,13 +162,18 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
this.props.networkElementsActions.onRefresh();
}
+ private onOpenAddNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
+ this.setState({
+ networkElementToEdit: element,
+ networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement
+ });
+ }
+
private onOpenRemoveNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
this.setState({
networkElementToEdit: element,
networkElementEditorMode: EditNetworkElementDialogMode.RemoveNetworkElement
});
- event.preventDefault();
- event.stopPropagation();
}
private onOpenEditNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -203,8 +188,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
},
networkElementEditorMode: EditNetworkElementDialogMode.EditNetworkElement
});
- event.preventDefault();
- event.stopPropagation();
}
private onOpenUnmountdNetworkElementsDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -212,8 +195,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
networkElementToEdit: element,
networkElementEditorMode: EditNetworkElementDialogMode.UnmountNetworkElement
});
- event.preventDefault();
- event.stopPropagation();
}
private onOpenMountdNetworkElementsDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -221,8 +202,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
networkElementToEdit: element,
networkElementEditorMode: EditNetworkElementDialogMode.MountNetworkElement
});
- event.preventDefault();
- event.stopPropagation();
}
private onOpenInfoNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -231,8 +210,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
networkElementToEdit: element,
infoNetworkElementEditorMode: InfoNetworkElementDialogMode.InfoNetworkElement,
});
- event.preventDefault();
- event.stopPropagation();
}
private onCloseEditNetworkElementDialog = () => {
@@ -250,8 +227,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
private navigateToApplicationHandlerCreator = (applicationName: string, element: NetworkElementConnection) => (event: React.MouseEvent<HTMLElement>) => {
this.props.navigateToApplication(applicationName, element.nodeId);
- event.preventDefault();
- event.stopPropagation();
}
}
diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index f8c0f3a82..a96d3d635 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
@@ -28,6 +28,7 @@ import { ConnectionStatusLog } from '../components/connectionStatusLog';
import { setPanelAction, findWebUrisForGuiCutThroughAsyncAction, SetWeburiSearchBusy } from '../actions/commonNetworkElementsActions';
import { PanelId } from '../models/panelId';
import { NetworkElementConnection } from 'models/networkElementConnection';
+import { AppBar, Tabs, Tab } from '@material-ui/core';
const mapProps = (state: IApplicationStoreState) => ({
panelId: state.connect.currentOpenPanel,
@@ -56,7 +57,15 @@ type ConnectApplicationComponentProps = Connect<typeof mapProps, typeof mapDispa
class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps>{
- componentDidUpdate = async () => {
+ public componentDidMount() {
+ if (this.props.panelId === null) { //don't change tabs, if one is selected already
+ this.onTogglePanel("NetworkElements");
+ }
+ this.props.networkElementsActions.onToggleFilter();
+ this.props.connectionStatusLogActions.onToggleFilter();
+ }
+
+ public componentDidUpdate = async () => {
// search for guicutthroughs after networkelements were found
const networkElements = this.props.netWorkElements;
@@ -66,7 +75,7 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
}
private onTogglePanel = (panelId: PanelId) => {
- const nextActivePanel = panelId === this.props.panelId ? null : panelId;
+ const nextActivePanel = panelId;
this.props.switchActivePanel(nextActivePanel);
switch (nextActivePanel) {
@@ -86,25 +95,31 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
};
+ private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+ this.props.switchActivePanel(newValue);
+ }
+
render(): JSX.Element {
- const { panelId } = this.props;
+ const { panelId: activePanelId } = this.props;
return (
<>
- <Panel activePanel={panelId} panelId={'NetworkElements'} onToggle={this.onTogglePanel} title={"Network Elements"}>
- <NetworkElementsList />
- </Panel>
- <Panel activePanel={panelId} panelId={'ConnectionStatusLog'} onToggle={this.onTogglePanel} title={"Connection Status Log"}>
- <ConnectionStatusLog />
- </Panel>
+ <AppBar position="static">
+ <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example">
+ <Tab label="Network Elements" value="NetworkElements" />
+ <Tab label="Connection Status Log" value="ConnectionStatusLog" />
+ </Tabs>
+ </AppBar>
+ {activePanelId === 'NetworkElements'
+ ? <NetworkElementsList />
+ : activePanelId === 'ConnectionStatusLog'
+ ? <ConnectionStatusLog />
+ : null}
</>
);
};
- public componentDidMount() {
- this.onTogglePanel("NetworkElements");
- this.props.networkElementsActions.onToggleFilter();
- this.props.connectionStatusLogActions.onToggleFilter();
- }
+
+
}
export const ConnectApplication = (connect(mapProps, mapDispatcher)(ConnectApplicationComponent));
diff --git a/sdnr/wt/odlux/apps/connectApp/webpack.config.js b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
index aa3acf00c..b72f5da76 100644
--- a/sdnr/wt/odlux/apps/connectApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
@@ -126,23 +126,23 @@ module.exports = (env) => {
},
proxy: {
"/oauth2/": {
- target: "http://10.20.6.29:48181",
+ target: "http://localhost:48181",
secure: false
},
"/database/": {
- target: "http://10.20.6.29:48181",
+ target: "http://localhost:48181",
secure: false
},
"/restconf/": {
- target: "http://10.20.6.29:48181",
+ target: "http://localhost:48181",
secure: false
},
"/help/": {
- target: "http://10.20.6.29:48181",
+ target: "http://localhost:48181",
secure: false
},
"/websocket": {
- target: "http://10.20.6.29:48181",
+ target: "http://localhost:48181",
ws: true,
changeOrigin: true,
secure: false