summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/connectApp/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp/src/views')
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx43
1 files changed, 29 insertions, 14 deletions
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));