update odlux stage 3

PerformanceApp: Add filter to chart view

add scrolling header to tables, add basic validation to editNetworkElementDialog

bugfixes

Issue-ID: SDNC-1087
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I585bd6cfeb11b867cd630e96e6479170d2f92fe8

3 files changed, 74 insertions, 18 deletions

diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
index ce7f48cc9..e3b640120 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
@@ -24,7 +24,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Typography } from '@material-ui/core';
 
 import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
 
@@ -35,7 +35,7 @@ import {
 } from '../actions/networkElementsActions';
 
 import { unmountNetworkElementAsyncActionCreator, mountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions';
-import { NetworkElementConnection, UpdateNetworkElement } from '../models/networkElementConnection';
+import { NetworkElementConnection, UpdateNetworkElement, propertyOf } from '../models/networkElementConnection';
 import { removeWebUriAction } from '../actions/commonNetworkElementsActions';
 
 export enum EditNetworkElementDialogMode {
@@ -47,6 +47,8 @@ export enum EditNetworkElementDialogMode {
   UnmountNetworkElement = "unmountNetworkElement",
 }
 
+
+
 const mapDispatch = (dispatcher: IDispatcher) => ({
   addNewNetworkElement: async (element: NetworkElementConnection) => {
     await dispatcher.dispatch(addNewNetworkElementAsyncActionCreator(element));
@@ -57,8 +59,21 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
     dispatcher.dispatch(unmountNetworkElementAsyncActionCreator(element && element.nodeId));
   },
   editNetworkElement: async (element: UpdateNetworkElement, mountElement: NetworkElementConnection) => {
-    await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
-    await dispatcher.dispatch(mountNetworkElementAsyncActionCreator(mountElement));
+
+    const values = Object.keys(element);
+
+    //make sure properties are there in case they get renamed
+    const idProperty = propertyOf<UpdateNetworkElement>("id");
+    const isRequiredProperty = propertyOf<UpdateNetworkElement>("isRequired");
+
+    if (values.length === 2 && values.includes(idProperty as string) && values.includes(isRequiredProperty as string)) {
+      // do not mount network element, if only isRequired is changed
+      await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
+
+    } else {
+      await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
+      await dispatcher.dispatch(mountNetworkElementAsyncActionCreator(mountElement));
+    }
   },
   removeNetworkElement: async (element: UpdateNetworkElement) => {
     await dispatcher.dispatch(removeNetworkElementAsyncActionCreator(element));
@@ -140,7 +155,7 @@ type EditNetworkElementDialogComponentProps = Connect<undefined, typeof mapDispa
   onClose: () => void;
 };
 
-type EditNetworkElementDialogComponentState = NetworkElementConnection;
+type EditNetworkElementDialogComponentState = NetworkElementConnection & { isNameValid: boolean, isHostSet: boolean };
 
 class EditNetworkElementDialogComponent extends React.Component<EditNetworkElementDialogComponentProps, EditNetworkElementDialogComponentState> {
   constructor(props: EditNetworkElementDialogComponentProps) {
@@ -151,6 +166,8 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
       isRequired: false,
       host: this.props.initialNetworkElement.host,
       port: this.props.initialNetworkElement.port,
+      isNameValid: true,
+      isHostSet: true
     };
   }
 
@@ -164,7 +181,9 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
             {setting.dialogDescription}
           </DialogContentText>
           <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" aria-label="name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} />
+          {!this.state.isNameValid && <Typography variant="body1" color="error">Name cannot be empty.</Typography>}
           <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="IP address" aria-label="ip adress" type="text" fullWidth value={this.state.host} onChange={(event) => { this.setState({ host: event.target.value }); }} />
+          {!this.state.isHostSet && <Typography variant="body1" color="error">IP Adress cannot be empty.</Typography>}
           <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="netconfport" label="NetConf port" aria-label="netconf port" type="number" fullWidth value={this.state.port.toString()} onChange={(event) => { this.setState({ port: +event.target.value }); }} />
           {setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="username" label="Username" aria-label="username" type="text" fullWidth value={this.state.username} onChange={(event) => { this.setState({ username: event.target.value }); }} /> || null}
           {setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="password" label="Password" aria-label="password" type="password" fullWidth value={this.state.password} onChange={(event) => { this.setState({ password: event.target.value }); }} /> || null}
@@ -180,15 +199,18 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
         </DialogContent>
         <DialogActions>
           <Button aria-label="dialog-confirm-button" onClick={(event) => {
-            this.onApply({
-              isRequired: this.state.isRequired,
-              id: this.state.nodeId,
-              nodeId: this.state.nodeId,
-              host: this.state.host,
-              port: this.state.port,
-              username: this.state.username,
-              password: this.state.password,
-            });
+
+            if (this.areRequieredFieldsValid()) {
+              this.onApply({
+                isRequired: this.state.isRequired,
+                id: this.state.nodeId,
+                nodeId: this.state.nodeId,
+                host: this.state.host,
+                port: this.state.port,
+                username: this.state.username,
+                password: this.state.password,
+              });
+            }
             event.preventDefault();
             event.stopPropagation();
           }} > {setting.applyButtonText} </Button>
@@ -230,10 +252,39 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
         element && this.props.removeNetworkElement(updateElement);
         break;
     }
+
+    this.setState({ password: '', username: '' });
+    this.resetRequieredFields();
   };
 
   private onCancel = () => {
     this.props.onClose && this.props.onClose();
+    this.setState({ password: '', username: '' });
+    this.resetRequieredFields();
+  }
+
+  private resetRequieredFields() {
+    this.setState({ isNameValid: true, isHostSet: true });
+  }
+
+  private areRequieredFieldsValid() {
+    let areFieldsValid = true;
+
+    if (this.state.nodeId == undefined || this.state.nodeId.trim().length === 0) {
+      this.setState({ isNameValid: false });
+      areFieldsValid = false;
+    } else {
+      this.setState({ isNameValid: true });
+    }
+
+    if (this.state.host == undefined || this.state.host.trim().length === 0) {
+      this.setState({ isHostSet: false });
+      areFieldsValid = false;
+    } else {
+      this.setState({ isHostSet: true });
+    }
+
+    return areFieldsValid;
   }
 
   static getDerivedStateFromProps(props: EditNetworkElementDialogComponentProps, state: EditNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection }): EditNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection } {
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
index 45003e741..d50a81ed5 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
@@ -110,9 +110,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       <Divider />,
       <MenuItem aria-label={"info-button"} onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected"} ><Info /><Typography>Info</Typography></MenuItem>,
       <MenuItem aria-label={"edit-button"} onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
-      !rowData.isRequired
-        ? <MenuItem aria-label={"add-button"} onClick={event => this.onOpenAddNetworkElementDialog(event, rowData)} ><AddIcon /><Typography>Add</Typography></MenuItem>
-        : <MenuItem aria-label={"remove-button"} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
+      <MenuItem aria-label={"remove-button"} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
       <Divider />,
       <MenuItem aria-label={"inventory-button"} onClick={event => this.props.navigateToApplication("inventory", rowData.nodeId)}><Typography>Inventory</Typography></MenuItem>,
       <Divider />,
diff --git a/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts b/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts
index f58dc58ab..b3586d693 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts
@@ -51,4 +51,11 @@ export type UpdateNetworkElement = {
 
 export type ConnectionStatus = {
   status: string
-}
\ No newline at end of file
+}
+
+/**
+ * Checks if a object has a given propertyname, if yes, the name is returned as string.
+ * @throws at compile time if property is not available
+ * @param name propertyname
+ */
+export const propertyOf = <TObj>(name: keyof TObj) => name;
\ No newline at end of file