update odlux sources

[ccsdk/features.git] / sdnr / wt / odlux / apps / connectApp / src / views / connectView.tsx

diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index f8c0f3a..0828397 100644 (file)
--- 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 '@mui/material';
 
 const mapProps = (state: IApplicationStoreState) => ({
   panelId: state.connect.currentOpenPanel,
@@ -39,10 +40,9 @@ const mapProps = (state: IApplicationStoreState) => ({
 const mapDispatcher = (dispatcher: IDispatcher) => ({
   networkElementsActions: createNetworkElementsActions(dispatcher.dispatch),
   connectionStatusLogActions: createConnectionStatusLogActions(dispatcher.dispatch),
-  onLoadNetworkElements: () => {
-    dispatcher.dispatch(networkElementsReloadAction);
-  },
-  loadWebUris: async (networkElements: NetworkElementConnection[]) => { await dispatcher.dispatch(findWebUrisForGuiCutThroughAsyncAction(networkElements)) },
+  onLoadNetworkElements: () => dispatcher.dispatch(networkElementsReloadAction),
+  loadWebUris: (networkElements: NetworkElementConnection[]) => 
+    dispatcher.dispatch(findWebUrisForGuiCutThroughAsyncAction(networkElements.map((ne) => ne.id!))),
   isBusy: (busy: boolean) => dispatcher.dispatch(new SetWeburiSearchBusy(busy)),
   onLoadConnectionStatusLog: () => {
     dispatcher.dispatch(connectionStatusLogReloadAction);
@@ -56,17 +56,27 @@ type ConnectApplicationComponentProps = Connect<typeof mapProps, typeof mapDispa
 
 class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps>{
 
-  componentDidUpdate = async () => {
-    // search for guicutthroughs after networkelements were found
+  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 = () => {
+    
     const networkElements = this.props.netWorkElements;
 
     if (networkElements.rows.length > 0) {
-      await this.props.loadWebUris(networkElements.rows);
+      // Update all netWorkElements for propper WebUriClient settings in case of table data changes.
+      // e.G: Pagination of the table data (there is no event)
+      this.props.loadWebUris(networkElements.rows);
     }
   }
 
   private onTogglePanel = (panelId: PanelId) => {
-    const nextActivePanel = panelId === this.props.panelId ? null : panelId;
+    const nextActivePanel = panelId;
     this.props.switchActivePanel(nextActivePanel);
 
     switch (nextActivePanel) {
@@ -86,25 +96,31 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
 
   };
 
+  private onHandleTabChange = (event: React.SyntheticEvent, 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 enableColorOnDark position="static">
+          <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
+            <Tab aria-label="network-elements-list-tab" label="NODES" value="NetworkElements" />
+            <Tab aria-label="connection-status-log-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));