UX extensions

UX Maintenance client and further changes

Change-Id: I7643661d17db5fc3d3f94b58cb42ed0be558c64f
Issue-ID: SDNC-583
Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>

10 files changed, 85 insertions, 62 deletions

diff --git a/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts
index e342f6314..1cf528aa7 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts
@@ -21,7 +21,7 @@ export class AllMountedNetworkElementsLoadedAction extends BaseAction {
 }
 
 /** Represents an action causing the store to update all mounted network elements. */
-export class AddMountedNetworkElement extends BaseAction {
+export class AddOrUpdateMountedNetworkElement extends BaseAction {
   constructor(public mountedNetworkElement: MountedNetworkElementType | null, public error?: string) {
     super();
   }
@@ -47,43 +47,58 @@ export class UpdateRequiredMountedNetworkElement extends BaseAction {
 }
 
 /**
- *  An actioncrator for a async thunk action to add an allready mounted element to the state of this app. 
- *  Note: Use this action to add created object notified by the websocket. 
+ *  Represents an action crator for a async thunk action to add an allready mounted element to the state of this app.
+ *  Note: Use this action to add created object notified by the websocket.
 */
 export const addMountedNetworkElementAsyncActionCreator = (mountId: string) => async (dispatch: Dispatch) => {
-  connectService.getMountedNetworkElementByMountId(mountId).then(mountedNetworkElement => {
-    mountedNetworkElement && dispatch(new AddMountedNetworkElement(mountedNetworkElement));
+  return connectService.getMountedNetworkElementByMountId(mountId).then(mountedNetworkElement => {
+    mountedNetworkElement && dispatch(new AddOrUpdateMountedNetworkElement(mountedNetworkElement));
   }).catch(error => {
-    dispatch(new AddMountedNetworkElement(null, error));
+    dispatch(new AddOrUpdateMountedNetworkElement(null, error));
+  });
+};
+
+export const updateMountedNetworkElementAsyncActionCreator = (mountId: string) => async (dispatch: Dispatch) => {
+  return connectService.getMountedNetworkElementByMountId(mountId).then(mountedNetworkElement => {
+    if (mountedNetworkElement) {
+      dispatch(new AddOrUpdateMountedNetworkElement(mountedNetworkElement));
+    } else {
+      dispatch(new RemoveMountedNetworkElement(mountId));
+    }
+  }).catch(error => {
+    dispatch(new AddOrUpdateMountedNetworkElement(null, error));
   });
 };
 
 /** Represents an async thunk action to load all mounted network elements. */
 export const loadAllMountedNetworkElementsAsync = (dispatch: Dispatch) => {
   dispatch(new LoadAllMountedNetworkElementsAction());
-    connectService.getMountedNetworkElementsList().then(mountedNetworkElements => { 
+  return connectService.getMountedNetworkElementsList().then(mountedNetworkElements => {
       mountedNetworkElements && dispatch(new AllMountedNetworkElementsLoadedAction(mountedNetworkElements));
   }).catch(error => {
     dispatch(new AllMountedNetworkElementsLoadedAction(null, error));
   });
 };
 
-/** Represents an async thunk action to load all mounted network elements. */
-export const mountNetworkElementActionCreatorAsync = (networkElement: RequiredNetworkElementType) => (dispatch: Dispatch) => {
-  connectService.mountNetworkElement(networkElement).then((success) => {
-    success && dispatch(new AddSnackbarNotification({ message: `Requesting mount [${ networkElement.mountId }]`, options: { variant: 'info' } }))
-      || dispatch(new AddSnackbarNotification({ message: `Failed to mount [${ networkElement.mountId }]`, options: { variant: 'warning' } }));
+/** Represents an action crator for a async thunk action to mount a network element. */
+export const mountNetworkElementAsyncActionCreator = (networkElement: RequiredNetworkElementType) => (dispatch: Dispatch) => {
+  return connectService.mountNetworkElement(networkElement).then((success) => {
+    success && (
+      dispatch(addMountedNetworkElementAsyncActionCreator(networkElement.mountId)) &&
+      dispatch(new AddSnackbarNotification({ message: `Requesting mount [${networkElement.mountId}]`, options: { variant: 'info' } }))
+     ) || dispatch(new AddSnackbarNotification({ message: `Failed to mount [${ networkElement.mountId }]`, options: { variant: 'warning' } }));
   }).catch(error => {
-    dispatch(new AddMountedNetworkElement(null, error));
+    dispatch(new AddOrUpdateMountedNetworkElement(null, error));
   });
 };
 
-export const unmountNetworkElementActionCreatorAsync = (mountId: string) => (dispatch: Dispatch) => {
-  connectService.unmountNetworkElement(mountId).then((success) => {
+/** Represents an action crator for a async thunk action to unmount a network element. */
+export const unmountNetworkElementAsyncActionCreator = (mountId: string) => (dispatch: Dispatch) => {
+  return connectService.unmountNetworkElement(mountId).then((success) => {
     success && dispatch(new AddSnackbarNotification({ message: `Requesting unmount [${ mountId }]`, options: { variant: 'info' } }))
       || dispatch(new AddSnackbarNotification({ message: `Failed to unmount [${ mountId }]`, options: { variant: 'warning' } }));
   }).catch(error => {
-    dispatch(new AddMountedNetworkElement(null, error));
+    dispatch(new AddOrUpdateMountedNetworkElement(null, error));
   });
 };
 
diff --git a/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts
index 979321957..387ab8f54 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts
@@ -12,7 +12,7 @@ import { connectService } from '../services/connectService';
 export class BaseAction extends Action { }
 
 
-/** Represents an async thunk action that will add an element to the required network elements. */
+/** Represents an async thunk action creator to add an element to the required network elements. */
 export const addToRequiredNetworkElementsAsyncActionCreator = (element: RequiredNetworkElementType) => (dispatch: Dispatch) => {
   connectService.insertRequiredNetworkElement(element).then(_ => {
     window.setTimeout(() => {
@@ -23,7 +23,7 @@ export const addToRequiredNetworkElementsAsyncActionCreator = (element: Required
   });
 };
 
-/** Represents an async thunk action that will delete an element from the required network elements. */
+/** Represents an async thunk action creator to delete an element from the required network elements. */
 export const removeFromRequiredNetworkElementsAsyncActionCreator = (element: RequiredNetworkElementType) => (dispatch: Dispatch) => {
   connectService.deleteRequiredNetworkElement(element).then(_ => {
     window.setTimeout(() => {
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
index ee876e854..c2db266d1 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
@@ -15,8 +15,9 @@ import {
   removeFromRequiredNetworkElementsAsyncActionCreator
 } from '../actions/requiredNetworkElementsActions';
 
+import { unmountNetworkElementAsyncActionCreator, mountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions';
 import { RequiredNetworkElementType } from '../models/requiredNetworkElements';
-import { unmountNetworkElementActionCreatorAsync, mountNetworkElementActionCreatorAsync } from '../actions/mountedNetworkElementsActions';
+
 export enum EditNetworkElementDialogMode {
   None = "none",
   UnknownNetworkElementToRequiredNetworkElements = "unknownNetworkElementToRequiredNetworkElements",
@@ -35,14 +36,14 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
     dispatcher.dispatch(removeFromRequiredNetworkElementsAsyncActionCreator(element));
   },
   mountNetworkElement: (element: RequiredNetworkElementType) => {
-    dispatcher.dispatch(mountNetworkElementActionCreatorAsync(element));
+    dispatcher.dispatch(mountNetworkElementAsyncActionCreator(element));
   },
   mountAndRquireNetworkElement: (element: RequiredNetworkElementType) => {
     dispatcher.dispatch(addToRequiredNetworkElementsAsyncActionCreator(element));
-    dispatcher.dispatch(mountNetworkElementActionCreatorAsync(element));
+    dispatcher.dispatch(mountNetworkElementAsyncActionCreator(element));
   },
   unmountNetworkElement: (element: RequiredNetworkElementType) => {
-    dispatcher.dispatch(unmountNetworkElementActionCreatorAsync(element && element.mountId));
+    dispatcher.dispatch(unmountNetworkElementAsyncActionCreator(element && element.mountId));
   }
 }
 );
@@ -70,7 +71,7 @@ const settings: { [key: string]: DialogSettings } = {
   [EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements] : {
     dialogTitle: "Add to required network elements" ,
     dialogDescription: "Create a new NetworkElement in planning database as clone of existing real NetworkElement." ,
-    applyButtonText: "Add to required network elements" , 
+    applyButtonText: "Add to required network elements" ,
     cancelButtonText: "Cancel",
     enableMountIdEditor: false,
     enableUsernameEditor: true,
@@ -136,7 +137,7 @@ type EditNetworkElementDialogComponentState = RequiredNetworkElementType & {
 class EditNetworkElementDialogComponent extends React.Component<EditNetworkElementDialogComponentProps, EditNetworkElementDialogComponentState> {
   constructor(props: EditNetworkElementDialogComponentProps) {
     super(props);
-    
+
     this.state = {
       mountId: this.props.initialNetworkElement.mountId,
       host: this.props.initialNetworkElement.host,
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx
index 13f5fec20..9cbc368cb 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx
@@ -14,7 +14,6 @@ import { IApplicationStoreState } from '../../../../framework/src/store/applicat
 import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
 
-
 import { RequiredNetworkElementType } from '../models/requiredNetworkElements';
 import { createRequiredNetworkElementsActions, createRequiredNetworkElementsProperties } from '../handlers/requiredNetworkElementsHandler';
 
@@ -27,7 +26,7 @@ const styles = (theme: Theme) => createStyles({
     color: 'darkgreen',
   },
   connectionStatusConnecting: {
-    color: theme.palette.primary.main,
+    color: 'blue',
   },
   connectionStatusDisconnected: {
     color: 'red',
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx
index 432103128..fe2c58ced 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx
@@ -48,7 +48,7 @@ type UnknownNetworkElementDisplayType = NetworkElementBaseType & {
 type UnknownNetworkElementsListProps = WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch> & {}
 
 type UnknownNetworkElementsListState = {
-  
+
   unknownNetworkElements: UnknownNetworkElementDisplayType[];
 
   networkElementToEdit: RequiredNetworkElementType;
@@ -73,7 +73,7 @@ export class UnknownNetworkElementsListComponent extends React.Component<Unknown
   static getDerivedStateFromProps(props: UnknownNetworkElementsListProps, state: UnknownNetworkElementsListState & { _mountedNetworkElements: IMountedNetworkElementsState }) {
     if (props.mountedNetworkElements != state._mountedNetworkElements) {
       state.unknownNetworkElements = props.mountedNetworkElements.elements.filter(element => !element.required).map(element => {
-        
+
         // handle onfCoreModelRevision
         const onfCoreModelRevision = element.capabilities.find((cap) => {
           return cap.module === 'core-model' || cap.module === 'CoreModel-CoreNetworkModule-ObjectClasses' ;
@@ -94,7 +94,7 @@ export class UnknownNetworkElementsListComponent extends React.Component<Unknown
     }
     return state;
   }
-  
+
   render(): JSX.Element {
     const { classes } = this.props;
     const { networkElementToEdit, networkElementEditorMode, unknownNetworkElements } = this.state;
@@ -125,7 +125,6 @@ export class UnknownNetworkElementsListComponent extends React.Component<Unknown
                 <div className={ classes.spacer }>
                   <Tooltip title={ "Info" } ><Button className={ classes.button } >I</Button></Tooltip>
                 </div>
-                <div className={ classes.spacer }>
                   <div className={ classes.spacer }>
                     <Tooltip title={ "Fault" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("faultApp", rowData) } >F</Button></Tooltip>
                     <Tooltip title={ "Configure" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("configureApp", rowData) } >C</Button></Tooltip>
@@ -133,14 +132,13 @@ export class UnknownNetworkElementsListComponent extends React.Component<Unknown
                     <Tooltip title={ "Performance" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("performanceApp", rowData) }>P</Button></Tooltip>
                     <Tooltip title={ "Security" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("securityApp", rowData) }>S</Button></Tooltip>
                   </div>
-                </div>                
               </>
             )
           },
         ] } idProperty="mountId" >
         </UnknownNetworkElementTable>
-        
-        <EditNetworkElementDialog 
+
+        <EditNetworkElementDialog
           mode={ networkElementEditorMode }
           initialNetworkElement={ networkElementToEdit }
           onClose={ this.onCloseEditNetworkElementDialog }
diff --git a/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.tsx b/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.tsx
index 26d02c4e9..dd9e3e1df 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.tsx
@@ -4,7 +4,6 @@ import { IMountedNetworkElementsState, mountedNetworkElementsActionHandler } fro
 import { IConnectionStatusLogState, connectionStatusLogActionHandler } from './connectionStatusLogHandler';
 
 export interface IConnectAppStoreState {
-
   requiredNetworkElements: IRequiredNetworkElementsState;
   mountedNetworkElements: IMountedNetworkElementsState;
   connectionStatusLog: IConnectionStatusLogState;
diff --git a/sdnr/wt/odlux/apps/connectApp/src/handlers/mountedNetworkElementsHandler.tsx b/sdnr/wt/odlux/apps/connectApp/src/handlers/mountedNetworkElementsHandler.tsx
index 70b4d8f2a..db86b99c2 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/handlers/mountedNetworkElementsHandler.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/handlers/mountedNetworkElementsHandler.tsx
@@ -1,7 +1,7 @@
 import { IActionHandler } from '../../../../framework/src/flux/action';
 
 import {
-  AddMountedNetworkElement,
+  AddOrUpdateMountedNetworkElement,
   AllMountedNetworkElementsLoadedAction,
   LoadAllMountedNetworkElementsAction,
   RemoveMountedNetworkElement,
@@ -28,7 +28,7 @@ export const mountedNetworkElementsActionHandler: IActionHandler<IMountedNetwork
       ...state,
       busy: true
     };
-  
+
   } else if (action instanceof AllMountedNetworkElementsLoadedAction) {
     if (!action.error && action.mountedNetworkElements) {
       state = {
@@ -42,11 +42,24 @@ export const mountedNetworkElementsActionHandler: IActionHandler<IMountedNetwork
         busy: false
       };
     }
-  } else if (action instanceof AddMountedNetworkElement) {
-    action.mountedNetworkElement && (state = {
-      ...state,
-      elements: [...state.elements, action.mountedNetworkElement],
-    });
+  } else if (action instanceof AddOrUpdateMountedNetworkElement) {
+    if (!action.mountedNetworkElement) return state; // should handle error here
+    const index = state.elements.findIndex(el => el.mountId === (action.mountedNetworkElement && action.mountedNetworkElement.mountId));
+    if (index > -1) {
+      state = {
+        ...state,
+        elements: [
+          ...state.elements.slice(0, index),
+          action.mountedNetworkElement,
+          ...state.elements.slice(index + 1)
+        ]
+      }
+    } else {
+      state = {
+        ...state,
+        elements: [...state.elements, action.mountedNetworkElement],
+      }
+    };
   } else if (action instanceof RemoveMountedNetworkElement) {
     state = {
       ...state,
diff --git a/sdnr/wt/odlux/apps/connectApp/src/index.html b/sdnr/wt/odlux/apps/connectApp/src/index.html
index c28708a83..0f95005de 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/index.html
+++ b/sdnr/wt/odlux/apps/connectApp/src/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="./vendor.css" >
-  <title>Document</title>
+  <title>connectApp</title>
 </head>
 
 <body>
@@ -18,7 +18,7 @@
     require(["app","connectApp", "faultApp"], function (app, connectApp, faultApp) {
       connectApp.register();
       faultApp.register();
-      app("./app.tsx")
+      app("./app.tsx").runApplication();
     });
   </script>
 </body>
diff --git a/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx b/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx
index 4e61c326b..4a02b9f35 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx
@@ -6,7 +6,12 @@ import { subscribe, IFormatedMessage } from '../../../framework/src/services/not
 
 import connectAppRootHandler from './handlers/connectAppRootHandler';
 import ConnectApplication  from './views/connectView';
-import { RemoveMountedNetworkElement, addMountedNetworkElementAsyncActionCreator } from './actions/mountedNetworkElementsActions' ;
+
+import {
+  addMountedNetworkElementAsyncActionCreator,
+  updateMountedNetworkElementAsyncActionCreator
+} from './actions/mountedNetworkElementsActions';
+
 import { AddSnackbarNotification } from '../../../framework/src/actions/snackbarActions';
 
 type ObjectNotification = {
@@ -32,8 +37,8 @@ export function register() {
       store.dispatch(addMountedNetworkElementAsyncActionCreator(msg.objectId));
       store.dispatch(new AddSnackbarNotification({ message: `Adding network element [${ msg.objectId }]`, options: { variant: 'info' } }));
     } else if (msg && msg.notifType === "ObjectDeletionNotification" && store) {
-      store.dispatch(new AddSnackbarNotification({ message: `Removing network element [${ msg.objectId }]`, options: { variant: 'info' } }));
-      store.dispatch(new RemoveMountedNetworkElement(msg.objectId));
+      store.dispatch(new AddSnackbarNotification({ message: `Updating network element [${ msg.objectId }]`, options: { variant: 'info' } }));
+      store.dispatch(updateMountedNetworkElementAsyncActionCreator(msg.objectId));
     }
   }));
-}                                     
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts b/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts
index 0adcd49c6..91891deb6 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts
@@ -1,6 +1,6 @@
 import { RequiredNetworkElementType } from '../models/requiredNetworkElements';
-import { MountedNetworkElementType } from 'models/mountedNetworkElements';
-import { Topology, TopologyNode } from 'models/topologyNetconf';
+import { MountedNetworkElementType } from '../models/mountedNetworkElements';
+import { Topology, TopologyNode } from '../models/topologyNetconf';
 
 import { requestRest } from '../../../../framework/src/services/restService';
 import { Result, HitEntry } from '../../../../framework/src/models/elasticSearch';
@@ -40,7 +40,6 @@ class ConnectService {
       username: result._source.username,
       password: result._source.password,
     } || null;
-
   }
 
   /**
@@ -61,13 +60,9 @@ class ConnectService {
     return result || null;
   }
 
-  
-
   private static mapTopologyNode = (mountPoint: TopologyNode, required: boolean ) => {
     // handle onfCapabilities
     let onfCapabilities: { module: string, revision: string }[] | undefined = undefined;
-    let onfCoreModelRevision: string[] | undefined = undefined;
-    let onfAirInterfaceRevision: string[] | undefined = undefined;
 
     const capId = 'netconf-node-topology:available-capabilities';
     if (mountPoint[capId] && mountPoint[capId]['available-capability']) {
@@ -161,17 +156,16 @@ class ConnectService {
       '</node>'].join('');
     
     try {
-      const result = await requestRest<{}>(path, {
+      const result = await requestRest<string>(path, {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/xml',
-          'Accept': 'application/xml',
-          'Authorization': 'Basic YWRtaW46YWRtaW4='
+          'Accept': 'application/xml'
         },
         body: mountXml
       }, true);
       // expect an empty answer
-      return result === null; 
+      return result !== null; 
     } catch {
       return false;
     }
@@ -182,16 +176,15 @@ class ConnectService {
     const path = 'restconf/config/network-topology:network-topology/topology/topology-netconf/node/' + mountId;
   
     try {
-      const result = await requestRest<{}>(path, {
+      const result = await requestRest<string>(path, {
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/xml',
-          'Accept': 'application/xml',
-          'Authorization': 'Basic YWRtaW46YWRtaW4='
+          'Accept': 'application/xml'
         },
       }, true);
       // expect an empty answer
-      return result === null; 
+      return result !== null; 
       
     } catch {
       return false;