diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp/src')
3 files changed, 61 insertions, 71 deletions
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)); |