1 files changed, 54 insertions, 59 deletions

diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index c86b384e1..aa3391c47 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
@@ -18,99 +18,94 @@
 import * as React from 'react';
 
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import { Panel } from '../../../../framework/src/components/material-ui';
-
-import { requiredNetworkElementsReloadAction, createRequiredNetworkElementsActions } from '../handlers/requiredNetworkElementsHandler';
-import { loadAllMountedNetworkElementsAsync } from '../actions/mountedNetworkElementsActions';
+import { networkElementsReloadAction, createNetworkElementsActions } from '../handlers/networkElementsHandler';
 import { connectionStatusLogReloadAction, createConnectionStatusLogActions } from '../handlers/connectionStatusLogHandler';
 
-import { RequiredNetworkElementsList } from '../components/requiredNetworkElements';
+import { NetworkElementsList } from '../components/networkElements';
 import { ConnectionStatusLog } from '../components/connectionStatusLog';
-import { UnknownNetworkElementsList } from '../components/unknownNetworkElements';
+import { setPanelAction, findWebUrisForGuiCutThroughAsyncAction } from '../actions/commonNetworkElementsActions';
+import { PanelId } from '../models/panelId';
+import { NetworkElementConnection } from 'models/networkElementConnection';
+
+const mapProps = (state: IApplicationStoreState) => ({
+  panelId: state.connect.currentOpenPanel,
+  user: state.framework.authenticationState.user,
+  netWorkElements: state.connect.networkElements,
+  availableGuiCutroughs: state.connect.guiCutThrough
+});
 
 const mapDispatcher = (dispatcher: IDispatcher) => ({
-  requiredNetworkElementsActions: createRequiredNetworkElementsActions(dispatcher.dispatch),
+  networkElementsActions: createNetworkElementsActions(dispatcher.dispatch),
   connectionStatusLogActions: createConnectionStatusLogActions(dispatcher.dispatch),
-  onLoadUnknownNetworkElements: () => {
-    dispatcher.dispatch(loadAllMountedNetworkElementsAsync);
-  },
-  onLoadRequiredNetworkElements: () => {
-    dispatcher.dispatch(requiredNetworkElementsReloadAction);
+  onLoadNetworkElements: () => {
+    dispatcher.dispatch(networkElementsReloadAction);
   },
+  loadWebUris: findWebUrisForGuiCutThroughAsyncAction(dispatcher.dispatch),
   onLoadConnectionStatusLog: () => {
     dispatcher.dispatch(connectionStatusLogReloadAction);
+  },
+  switchActivePanel: (panelId: PanelId) => {
+    dispatcher.dispatch(setPanelAction(panelId));
   }
 });
 
-type PanelId = null | "RequiredNetworkElements" | "UnknownNetworkElements" | "ConnectionStatusLog";
+type ConnectApplicationComponentProps = Connect<typeof mapProps, typeof mapDispatcher>;
 
-type ConnectApplicationComponentProps = Connect<undefined, typeof mapDispatcher> ;
+class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps>{
 
-type ConnectApplicationComponentState = {
-  activePanel: PanelId;
-};
+  componentDidUpdate = () => {
+    // search for guicutthroughs after networkelements were found
+    const networkElements = this.props.netWorkElements;
+    const guiCuttrough = this.props.availableGuiCutroughs;
 
-class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps, ConnectApplicationComponentState>{
-  /**
-   * Initialises this instance
-   */
-  constructor(props: ConnectApplicationComponentProps) {
-    super(props);
-
-    this.state = {
-      activePanel: null
-    };
+    if (networkElements.rows.length > 0 && networkElements.total !== guiCuttrough.knownElements.length) {
+      this.props.loadWebUris(networkElements.rows, guiCuttrough.knownElements);
+    }
   }
 
   private onTogglePanel = (panelId: PanelId) => {
-    const nextActivePanel = panelId === this.state.activePanel ? null : panelId;
-    this.setState({
-      activePanel: nextActivePanel
-    }, () => {
-      switch (nextActivePanel) {
-        case 'RequiredNetworkElements':
-          this.props.onLoadRequiredNetworkElements();
-          break;
-        case 'UnknownNetworkElements':
-          // todo: should we update the application state ?
-          break;
-        case 'ConnectionStatusLog':
-          this.props.onLoadConnectionStatusLog();
-          break;
-        case null:
-          // do nothing if all panels are closed
-          break;
-        default:
-          console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView");
-          break;
-      }
-    });
+    const nextActivePanel = panelId === this.props.panelId ? null : panelId;
+    this.props.switchActivePanel(nextActivePanel);
+
+    switch (nextActivePanel) {
+      case 'NetworkElements':
+        this.props.onLoadNetworkElements();
+        break;
+      case 'ConnectionStatusLog':
+        this.props.onLoadConnectionStatusLog();
+        break;
+      case null:
+        // do nothing if all panels are closed
+        break;
+      default:
+        console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView");
+        break;
+    }
+
   };
 
   render(): JSX.Element {
-    const { activePanel } = this.state;
+    const { panelId } = this.props;
 
     return (
       <>
-        <Panel activePanel={ activePanel } panelId={ 'RequiredNetworkElements' } onToggle={ this.onTogglePanel } title={ "Required Network Elements" }>
-          <RequiredNetworkElementsList />
-        </Panel>
-        <Panel activePanel={ activePanel } panelId={ 'UnknownNetworkElements' } onToggle={ this.onTogglePanel } title={ "Unknown Network Elements" }>
-          <UnknownNetworkElementsList />
+        <Panel activePanel={panelId} panelId={'NetworkElements'} onToggle={this.onTogglePanel} title={"Network Elements"}>
+          <NetworkElementsList />
         </Panel>
-        <Panel activePanel={ activePanel } panelId={ 'ConnectionStatusLog' } onToggle={ this.onTogglePanel } title={ "Connection Status Log" }>
+        <Panel activePanel={panelId} panelId={'ConnectionStatusLog'} onToggle={this.onTogglePanel} title={"Connection Status Log"}>
           <ConnectionStatusLog />
         </Panel>
       </>
     );
   };
   public componentDidMount() {
-    this.onTogglePanel("RequiredNetworkElements");
-    this.props.onLoadUnknownNetworkElements();
-    this.props.requiredNetworkElementsActions.onToggleFilter();
+    this.onTogglePanel("NetworkElements");
+    this.props.networkElementsActions.onToggleFilter();
     this.props.connectionStatusLogActions.onToggleFilter();
   }
 }
 
-export const ConnectApplication = (connect(undefined, mapDispatcher)(ConnectApplicationComponent));
+export const ConnectApplication = (connect(mapProps, mapDispatcher)(ConnectApplicationComponent));
 export default ConnectApplication;
\ No newline at end of file