diff options
Diffstat (limited to 'sdnr/wt/odlux/apps')
25 files changed, 205 insertions, 202 deletions
diff --git a/sdnr/wt/odlux/apps/apiDemo/package.json b/sdnr/wt/odlux/apps/apiDemo/package.json index d6f74278b..44dae6854 100644 --- a/sdnr/wt/odlux/apps/apiDemo/package.json +++ b/sdnr/wt/odlux/apps/apiDemo/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/configurationApp/package.json b/sdnr/wt/odlux/apps/configurationApp/package.json index 2985ba4fb..b18d1ce10 100644 --- a/sdnr/wt/odlux/apps/configurationApp/package.json +++ b/sdnr/wt/odlux/apps/configurationApp/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/configurationApp/src/components/uiElementUnion.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx index dc158c05a..25378d767 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx @@ -35,7 +35,6 @@ export const UIElementUnion = (props: UiElementUnionProps) => { const verifyValues = (data: string) => { - debugger; let foundObjectElements = 0; let errorMessage = ""; let isPatternCorrect = null; diff --git a/sdnr/wt/odlux/apps/configurationApp/webpack.config.js b/sdnr/wt/odlux/apps/configurationApp/webpack.config.js index 6a5c5d55e..dccf34919 100644 --- a/sdnr/wt/odlux/apps/configurationApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/configurationApp/webpack.config.js @@ -127,27 +127,27 @@ module.exports = (env) => { }, proxy: { "/oauth2/": { - target: "http://10.20.6.29:48181", + target: "http://localhost:48181", secure: false }, "/yang-schema/": { - 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: false, secure: false 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 diff --git a/sdnr/wt/odlux/apps/demoApp/package.json b/sdnr/wt/odlux/apps/demoApp/package.json index f692d69ed..b5857099b 100644 --- a/sdnr/wt/odlux/apps/demoApp/package.json +++ b/sdnr/wt/odlux/apps/demoApp/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/eventLogApp/package.json b/sdnr/wt/odlux/apps/eventLogApp/package.json index 2594debc1..ce8b8859d 100644 --- a/sdnr/wt/odlux/apps/eventLogApp/package.json +++ b/sdnr/wt/odlux/apps/eventLogApp/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/faultApp/package.json b/sdnr/wt/odlux/apps/faultApp/package.json index 909626303..b922df351 100644 --- a/sdnr/wt/odlux/apps/faultApp/package.json +++ b/sdnr/wt/odlux/apps/faultApp/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/faultApp/src/actions/panelChangeActions.ts b/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts index f032c139a..58da19d46 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts +++ b/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts @@ -24,3 +24,7 @@ export class SetPanelAction extends Action { } } +export const setPanelAction = (panelId: PanelId) => { + return new SetPanelAction(panelId); +} + diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx index fd1c48ac5..5adc9d49c 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx @@ -33,13 +33,13 @@ import { PanelId } from '../models/panelId'; import { createCurrentProblemsProperties, createCurrentProblemsActions, currentProblemsReloadAction } from '../handlers/currentProblemsHandler'; import { createAlarmLogEntriesProperties, createAlarmLogEntriesActions, alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler'; -import { SetPanelAction } from '../actions/panelChangeActions'; -import { Tooltip, IconButton } from '@material-ui/core'; +import { setPanelAction } from '../actions/panelChangeActions'; +import { Tooltip, IconButton, AppBar, Tabs, Tab } from '@material-ui/core'; import RefreshIcon from '@material-ui/icons/Refresh'; import ClearStuckAlarmsDialog, { ClearStuckAlarmsDialogMode } from '../components/clearStuckAlarmsDialog'; const mapProps = (state: IApplicationStoreState) => ({ - activePanel: state.fault.currentOpenPanel, + panelId: state.fault.currentOpenPanel, currentProblemsProperties: createCurrentProblemsProperties(state), faultNotifications: state.fault.faultNotifications, alarmLogEntriesProperties: createAlarmLogEntriesProperties(state) @@ -50,7 +50,9 @@ const mapDisp = (dispatcher: IDispatcher) => ({ alarmLogEntriesActions: createAlarmLogEntriesActions(dispatcher.dispatch), reloadCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction), reloadAlarmLogEntries: () => dispatcher.dispatch(alarmLogEntriesReloadAction), - setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)), + switchActivePanel: (panelId: PanelId) => { + dispatcher.dispatch(setPanelAction(panelId)); + } }); type FaultApplicationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp>; @@ -84,6 +86,29 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.Show, stuckAlarms: stuckAlarms }) } + private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => { + this.props.switchActivePanel(newValue); + //this.onToggleTabs(newValue); + } + + private onToggleTabs = (panelId: PanelId) => { + const nextActivePanel = panelId; + this.props.switchActivePanel(nextActivePanel); + switch (nextActivePanel) { + case 'CurrentProblem': + this.props.reloadCurrentProblems(); + break; + case 'AlarmLog': + this.props.reloadAlarmLogEntries(); + break; + case 'AlarmNotifications': + case null: + default: + // nothing to do + break; + } + }; + render(): JSX.Element { @@ -94,31 +119,19 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen const areFaultsAvailable = this.props.currentProblemsProperties.rows && this.props.currentProblemsProperties.rows.length > 0 const customAction = areFaultsAvailable ? [refreshButton] : []; - const { activePanel } = this.props; - - const onTogglePanel = (panelId: PanelId) => { - const nextActivePanel = panelId === this.props.activePanel ? null : panelId; - this.props.setCurrentPanel(nextActivePanel); - - switch (nextActivePanel) { - case 'CurrentProblem': - this.props.reloadCurrentProblems(); - break; - case 'AlarmLog': - this.props.reloadAlarmLogEntries(); - break; - case 'AlarmNotifications': - case null: - default: - // nothing to do - break; - } - }; + const { panelId: activePanelId } = this.props; return ( <> - <Panel activePanel={activePanel} panelId={'CurrentProblem'} onToggle={onTogglePanel} title={'Current Problem List'}> - <FaultTable idProperty={'id'} customActionButtons={customAction} columns={[ + <AppBar position="static" > + <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="fault tabs"> + <Tab label="Current Problem List" value="CurrentProblem" /> + <Tab label={`Alarm Notifications (${this.props.faultNotifications.faults.length})`} value="AlarmNotifications" /> + <Tab label="Alarm Log" value="AlarmLog" /> + </Tabs> + </AppBar> + { + activePanelId === 'CurrentProblem' && <FaultTable stickyHeader idProperty={'id'} customActionButtons={customAction} columns={[ { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, { property: "timestamp", type: ColumnType.text, title: "Time Stamp" }, { property: "nodeId", title: "Node Name", type: ColumnType.text }, @@ -127,9 +140,10 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen { property: "problem", title: "Alarm Type", type: ColumnType.text }, { property: "severity", title: "Severity", type: ColumnType.text, width: "140px" }, ]} {...this.props.currentProblemsProperties} {...this.props.currentProblemsActions} /> - </Panel> - <Panel activePanel={activePanel} panelId={'AlarmNotifications'} onToggle={onTogglePanel} title={`Alarm Notifications ${this.props.faultNotifications.faults.length} since ${this.props.faultNotifications.since}`}> - <FaultAlarmNotificationTable rows={this.props.faultNotifications.faults} asynchronus columns={[ + } + {activePanelId === 'AlarmNotifications' && + + <FaultAlarmNotificationTable stickyHeader rows={this.props.faultNotifications.faults} asynchronus columns={[ { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, { property: "timeStamp", title: "Time Stamp" }, { property: "nodeName", title: "Node Name" }, @@ -138,29 +152,35 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen { property: "problem", title: "Alarm Type" }, { property: "severity", title: "Severity", width: "140px" }, ]} idProperty={'id'} /> - </Panel> - <Panel activePanel={activePanel} panelId={'AlarmLog'} onToggle={onTogglePanel} title={'Alarm Log'}> - <FaultTable idProperty={'id'} columns={[ - { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, - { property: "timestamp", title: "Time Stamp" }, - { property: "nodeId", title: "Node Name" }, - { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" }, - { property: "objectId", title: "Object Id" }, - { property: "problem", title: "Alarm Type" }, - { property: "severity", title: "Severity", width: "140px" }, - { property: "sourceType", title: "Source", width: "140px" }, - ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} /> - </Panel> - { - this.state.clearAlarmDialogMode !== ClearStuckAlarmsDialogMode.None && <ClearStuckAlarmsDialog mode={this.state.clearAlarmDialogMode} numberDevices={this.state.stuckAlarms.length} stuckAlarms={this.state.stuckAlarms} onClose={this.onDialogClose} /> } + {activePanelId === 'AlarmLog' && <FaultTable stickyHeader idProperty={'id'} columns={[ + { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, + { property: "timestamp", title: "Time Stamp" }, + { property: "nodeId", title: "Node Name" }, + { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" }, + { property: "objectId", title: "Object Id" }, + { property: "problem", title: "Alarm Type" }, + { property: "severity", title: "Severity", width: "140px" }, + { property: "sourceType", title: "Source", width: "140px" }, + ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} /> + + } + { + this.state.clearAlarmDialogMode !== ClearStuckAlarmsDialogMode.None && <ClearStuckAlarmsDialog mode={this.state.clearAlarmDialogMode} numberDevices={this.state.stuckAlarms.length} stuckAlarms={this.state.stuckAlarms} onClose={this.onDialogClose} /> + } </> - ); + ) + }; public componentDidMount() { + + if (this.props.panelId === null) { //don't change tabs, if one is selected already + this.onToggleTabs("CurrentProblem"); + } + this.props.alarmLogEntriesActions.onToggleFilter(); this.props.currentProblemsActions.onToggleFilter(); } diff --git a/sdnr/wt/odlux/apps/faultApp/webpack.config.js b/sdnr/wt/odlux/apps/faultApp/webpack.config.js index 66926edfb..c91b1f4cc 100644 --- a/sdnr/wt/odlux/apps/faultApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/faultApp/webpack.config.js @@ -125,23 +125,23 @@ module.exports = (env) => { }, proxy: { "/oauth2/": { - target: "http://10.20.6.29:28181/", + target: "http://localhost:48181", secure: false }, "/database/": { - target: "http://10.20.6.29:28181/", + target: "http://localhost:48181", secure: false }, "/restconf/": { - target: "http://10.20.6.29:28181/", + target: "http://localhost:48181", secure: false }, "/help/": { - target: "http://10.20.6.29:28181/", + target: "http://localhost:48181", secure: false }, "/websocket/": { - target: "http://10.20.6.29:28181/", + target: "http://localhost:48181", ws: true, changeOrigin: true, secure: false diff --git a/sdnr/wt/odlux/apps/helpApp/package.json b/sdnr/wt/odlux/apps/helpApp/package.json index 1f106ab65..2a331f68a 100644 --- a/sdnr/wt/odlux/apps/helpApp/package.json +++ b/sdnr/wt/odlux/apps/helpApp/package.json @@ -32,14 +32,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/inventoryApp/package.json b/sdnr/wt/odlux/apps/inventoryApp/package.json index 9e004c112..929ca0fb4 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/package.json +++ b/sdnr/wt/odlux/apps/inventoryApp/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/maintenanceApp/package.json b/sdnr/wt/odlux/apps/maintenanceApp/package.json index 96f9f7d2b..edd582744 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/package.json +++ b/sdnr/wt/odlux/apps/maintenanceApp/package.json @@ -28,14 +28,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/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx index 3b7879351..f557e5399 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx +++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx @@ -37,7 +37,7 @@ import { MaintenenceEntry, spoofSymbol } from '../models/maintenenceEntryType'; import EditMaintenenceEntryDialog, { EditMaintenenceEntryDialogMode } from '../components/editMaintenenceEntryDialog'; import { convertToLocaleString } from '../utils/timeUtils'; -import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties, maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler'; +import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties,maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler'; const styles = (theme: Theme) => createStyles({ button: { @@ -60,7 +60,7 @@ const mapProps = (state: IApplicationStoreState) => ({ const mapDispatcher = (dispatcher: IDispatcher) => ({ maintenanceEntriesActions: createmaintenanceEntriesActions(dispatcher.dispatch), - onLoadMaintenanceEntries: async () => { + onLoadMaintenanceEntries: async() => { await dispatcher.dispatch(maintenanceEntriesReloadAction) } }); @@ -104,8 +104,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP this.setState({ maintenenceEntryToEdit: { ...emptyMaintenenceEntry, - start: convertToLocaleString(startTime), - end: convertToLocaleString(endTime), + start: convertToLocaleString(startTime), + end: convertToLocaleString(endTime), }, maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.AddMaintenenceEntry }); @@ -120,7 +120,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP { property: "notifications", title: "Notification", width: 50, align: "center", type: ColumnType.custom, customControl: ({ rowData }) => ( rowData.active && (Date.parse(rowData.start).valueOf() <= now) && (Date.parse(rowData.end).valueOf() >= now) && <FontAwesomeIcon icon={faBan} /> || null - ) + ) }, { property: "active", title: "Activation State", type: ColumnType.boolean, labels: { "true": "active", "false": "not active" }, }, { property: "start", title: "Start Date (UTC)", type: ColumnType.text }, @@ -140,7 +140,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP ) }, ] - } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus > </MaintenenceEntriesTable> + } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus > </MaintenenceEntriesTable> <EditMaintenenceEntryDialog initialMaintenenceEntry={this.state.maintenenceEntryToEdit} mode={this.state.maintenenceEntryEditorMode} onClose={this.onCloseEditMaintenenceEntryDialog} /> </> @@ -160,8 +160,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP this.setState({ maintenenceEntryToEdit: { ...entry, - start: convertToLocaleString(startTime), - end: convertToLocaleString(endTime), + start: convertToLocaleString(startTime), + end: convertToLocaleString(endTime), }, maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry }); @@ -175,8 +175,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP this.setState({ maintenenceEntryToEdit: { ...entry, - start: convertToLocaleString(startTime), - end: convertToLocaleString(endTime), + start: convertToLocaleString(startTime), + end: convertToLocaleString(endTime), }, maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry }); @@ -190,7 +190,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP this.setState({ maintenenceEntryToEdit: { ...entry, - ...(entry.start && endTime) + ...(entry.start && endTime) ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) } : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) } }, diff --git a/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js b/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js index e6d968564..33a3bed73 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js @@ -127,23 +127,23 @@ module.exports = (env) => { }, proxy: { "/oauth2/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:48181", secure: false }, "/database/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:48181", secure: false }, "/restconf/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:48181", secure: false }, "/help/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:48181", secure: false }, "/websocket/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:48181", ws: true, changeOrigin: true, secure: false diff --git a/sdnr/wt/odlux/apps/mediatorApp/package.json b/sdnr/wt/odlux/apps/mediatorApp/package.json index 718d2fd03..cfd4bd9e9 100644 --- a/sdnr/wt/odlux/apps/mediatorApp/package.json +++ b/sdnr/wt/odlux/apps/mediatorApp/package.json @@ -28,14 +28,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/mediatorApp/webpack.config.js b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js index 3efe2d015..94943ecd5 100644 --- a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js @@ -127,29 +127,19 @@ module.exports = (env) => { }, proxy: { "/oauth2/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:3000", secure: false }, "/database/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:3000", secure: false }, "/restconf/": { - target: "http://10.20.6.29:28181", + target: "http://localhost:3000", secure: false }, "/help/": { - target: "http://10.20.6.29:28181", - secure: false - }, - "/ms/": { - target: "http://10.20.6.29:28181", - secure: false - }, - "/websocket": { - target: "http://10.20.6.29:28181", - ws: true, - changeOrigin: true, + target: "http://localhost:3000", secure: false } } diff --git a/sdnr/wt/odlux/apps/minimumApp/package.json b/sdnr/wt/odlux/apps/minimumApp/package.json index d9b18a3ce..5a8352e4b 100644 --- a/sdnr/wt/odlux/apps/minimumApp/package.json +++ b/sdnr/wt/odlux/apps/minimumApp/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/performanceHistoryApp/package.json b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json index 1e6adf7c3..e1ca8013b 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json @@ -30,14 +30,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/performanceHistoryApp/webpack.config.js b/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js index 9c2414864..bbbc3e43e 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js @@ -126,15 +126,15 @@ module.exports = (env) => { }, proxy: { "/oauth2/": { - 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 }, "/database": { - target: "http://10.20.6.29:48181", + target: "http://localhost:48181", secure: false } } |