update odlux sources

update basic odlux functionality for kohn

Issue-ID: CCSDK-3765
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>
Change-Id: I3723c9c2f35b9012ba537920b294a54bb556cbc6
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>

6 files changed, 42 insertions, 465 deletions

diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
index a7d96d072..b240b2419 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
@@ -65,7 +65,7 @@ class ConnectionStatusLogComponent extends React.Component<ConnectionStatusLogCo
     <>
       <ConnectionStatusTable stickyHeader tableId="connection-status-table" customActionButtons={[refreshConnectionStatusLogAction]}  columns={[
         { property: "timestamp", title: "Timestamp", type: ColumnType.text },
-        { property: "nodeId", title: "Node Name", type: ColumnType.text },
+        { property: "nodeId", title: "Node ID", type: ColumnType.text },
         { property: "status", title: "Connection Status", type: ColumnType.text },
       ]} idProperty="id" {...this.props.connectionStatusLogActions} {...this.props.connectionStatusLogProperties} >
       </ConnectionStatusTable>
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx
deleted file mode 100644
index 683c59623..000000000
--- a/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx
+++ /dev/null
@@ -1,425 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-import * as React from 'react';
-
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';;
-import { Theme } from '@mui/material';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
-import { Doughnut } from 'react-chartjs-2';
-import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
-
-const styles = (theme: Theme) => createStyles({
-  pageWidthSettings: {
-    width: '50%',
-    float: 'left'
-  },
-})
-
-const scrollbar = { overflow: "auto", paddingRight: "20px" }
-
-let connectionStatusinitialLoad = true;
-let connectionStatusinitialStateChanged = false;
-let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
-let connectionTotalCount = 0;
-
-let alarmStatusinitialLoad = true;
-let alarmStatusinitialStateChanged = false;
-let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
-let alarmTotalCount = 0;
-
-const mapProps = (state: IApplicationStoreState) => ({
-  connectionStatusCount: state.connect.connectionStatusCount,
-  alarmStatus: state.fault.faultStatus
-});
-
-const mapDispatch = (dispatcher: IDispatcher) => ({
-  navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
-});
-
-type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
-
-class DashboardHome extends React.Component<HomeComponentProps>  {
-  constructor(props: HomeComponentProps) {
-    super(props);
-    this.state = {
-    }
-  }
-
-  render(): JSX.Element {
-    const { classes } = this.props;
-
-    if (!this.props.connectionStatusCount.isLoadingConnectionStatusChart) {
-      connectionStatusDataLoad = [
-        this.props.connectionStatusCount.Connected,
-        this.props.connectionStatusCount.Connecting,
-        this.props.connectionStatusCount.Disconnected,
-        this.props.connectionStatusCount.UnableToConnect
-      ];
-      connectionTotalCount = this.props.connectionStatusCount.Connected + this.props.connectionStatusCount.Connecting
-        + this.props.connectionStatusCount.Disconnected + this.props.connectionStatusCount.UnableToConnect;
-
-    }
-
-    if (!this.props.alarmStatus.isLoadingAlarmStatusChart) {
-      alarmStatusDataLoad = [
-        this.props.alarmStatus.critical,
-        this.props.alarmStatus.major,
-        this.props.alarmStatus.minor,
-        this.props.alarmStatus.warning
-      ];
-      alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major
-        + this.props.alarmStatus.minor + this.props.alarmStatus.warning;
-    }
-
-    /** Available Network Connection Status chart data */
-    const connectionStatusData = {
-      labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'],
-      datasets: [{
-        data: connectionStatusDataLoad,
-        backgroundColor: [
-          'rgb(0, 153, 51)',
-          'rgb(255, 102, 0)',
-          'rgb(191, 191, 191)',
-          'rgb(191, 191, 191)'
-        ]
-      }]
-    };
-
-
-    /** No Devices available */
-    const connectionStatusUnavailableData = {
-      labels: ['No Devices available'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(255, 255, 255)'
-        ]
-      }]
-    };
-
-    /** Loading Connection Status chart */
-    const connectionStatusisLoading = {
-      labels: ['Loading chart...'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(255, 255, 255)'
-        ]
-      }]
-    };
-
-    /** Loading Alarm Status chart */
-    const alarmStatusisLoading = {
-      labels: ['Loading chart...'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(255, 255, 255)'
-        ]
-      }]
-    };
-
-    /** Connection status options */
-    let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'];
-    const connectionStatusOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      },
-      onClick: (event: MouseEvent, item: any) => {
-        if (item[0]) {
-          let connectionStatus = labels[item[0]._index] + '';
-          this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus);
-        }
-      }
-    }
-
-    /** Connection status unavailable options */
-    const connectionStatusUnavailableOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        tooltip: {
-          enabled: false
-        }
-      }
-    }
-
-    /** Add text inside the doughnut chart for Connection Status */
-    const connectionStatusPlugins = [{
-      beforeDraw: function (chart: any) {
-        var width = chart.width,
-          height = chart.height,
-          ctx = chart.ctx;
-        ctx.restore();
-        var fontSize = (height / 480).toFixed(2);
-        ctx.font = fontSize + "em sans-serif";
-        ctx.textBaseline = "top";
-        var text = "Network Connection Status",
-          textX = Math.round((width - ctx.measureText(text).width) / 2),
-          textY = height / 2;
-        ctx.fillText(text, textX, textY);
-        ctx.save();
-      }
-    }]
-
-    /** Alarm status Data */
-    const alarmStatusData = {
-      labels: [
-        'Critical',
-        'Major',
-        'Minor',
-        'Warning'
-      ],
-      datasets: [{
-        data: alarmStatusDataLoad,
-        backgroundColor: [
-          'rgb(240, 25, 10)',
-          'rgb(240, 133, 10)',
-          'rgb(240, 240, 10)',
-          'rgb(46, 115, 176)'
-        ],
-      }]
-    }
-
-    /** No Alarm status available */
-    const alarmStatusUnavailableData = {
-      labels: ['No Alarms available'],
-      datasets: [{
-        data: [1],
-        backgroundColor: [
-          'rgb(0, 153, 51)'
-        ]
-      }]
-    };
-
-    /** Alarm status Options */
-    let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
-    const alarmStatusOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      },
-      onClick: (event: MouseEvent, item: any) => {
-        if (item[0]) {
-          let severity = alarmLabels[item[0].index] + '';
-          this.props.navigateToApplication("fault", '/alarmStatus/' + severity);
-        }
-      },
-    };
-
-    /** Alarm status unavailable options */
-    const alarmStatusUnavailableOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        tooltip: {
-          enabled: false
-        }
-      }
-    }
-    /** Add text inside the doughnut chart for Alarm Status */
-    const alarmStatusPlugins = [{
-      beforeDraw: function (chart: any) {
-        var width = chart.width,
-          height = chart.height,
-          ctx = chart.ctx;
-        ctx.restore();
-        var fontSize = (height / 480).toFixed(2);
-        ctx.font = fontSize + "em sans-serif";
-        ctx.textBaseline = "top";
-        var text = "Network Alarm Status",
-          textX = Math.round((width - ctx.measureText(text).width) / 2),
-          textY = height / 2;
-        ctx.fillText(text, textX, textY);
-        ctx.save();
-      }
-    }]
-
-    return (
-      <>
-        <div style={scrollbar} >
-          <h1>Welcome to ODLUX</h1>
-          <div style={{ width: '50%', float: 'left' }}>
-            {this.checkElementsAreLoaded() ?
-              this.checkConnectionStatus() && connectionTotalCount != 0 ?
-                <Doughnut
-                  data={connectionStatusData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={connectionStatusOptions}
-                  plugins={connectionStatusPlugins}
-                />
-                : <Doughnut
-                  data={connectionStatusUnavailableData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={connectionStatusUnavailableOptions}
-                  plugins={connectionStatusPlugins} />
-              : <Doughnut
-                data={connectionStatusisLoading}
-                type={Doughnut}
-                width={500}
-                height={500}
-                options={connectionStatusUnavailableOptions}
-                plugins={connectionStatusPlugins}
-              />
-            }
-          </div>
-          <div style={{ width: '50%', float: 'left' }}>
-            {this.checkAlarmsAreLoaded() ?
-              this.checkAlarmStatus() && alarmTotalCount != 0 ?
-                <Doughnut
-                  data={alarmStatusData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={alarmStatusOptions}
-                  plugins={alarmStatusPlugins}
-                />
-                : <Doughnut
-                  data={alarmStatusUnavailableData}
-                  type={Doughnut}
-                  width={500}
-                  height={500}
-                  options={alarmStatusUnavailableOptions}
-                  plugins={alarmStatusPlugins}
-                />
-              : <Doughnut
-                data={alarmStatusisLoading}
-                type={Doughnut}
-                width={500}
-                height={500}
-                options={alarmStatusUnavailableOptions}
-                plugins={alarmStatusPlugins}
-              />
-            }
-          </div>
-        </div>
-      </>
-    )
-  }
-
-  /** Check if connection status data available */
-  public checkConnectionStatus = () => {
-    let statusCount = this.props.connectionStatusCount;
-    if (statusCount.isLoadingConnectionStatusChart) {
-      return true;
-    }
-    if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
-      && statusCount.UnableToConnect == 0) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  /** Check if connection status chart data is loaded */
-  public checkElementsAreLoaded = () => {
-    let isLoadingCheck = this.props.connectionStatusCount;
-    if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) {
-      if (this.checkConnectionStatus()) {
-        connectionStatusinitialLoad = false;
-        return true;
-      }
-      return false;
-    } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) {
-      connectionStatusinitialLoad = false;
-      connectionStatusinitialStateChanged = true;
-      return !isLoadingCheck.isLoadingConnectionStatusChart;
-    } else if (connectionStatusinitialStateChanged) {
-      if (!isLoadingCheck.isLoadingConnectionStatusChart) {
-        connectionStatusinitialStateChanged = false;
-      }
-      return !isLoadingCheck.isLoadingConnectionStatusChart;
-    }
-    return true;
-  }
-
-  /** Check if alarms data available */
-  public checkAlarmStatus = () => {
-    let alarmCount = this.props.alarmStatus;
-    if (alarmCount.isLoadingAlarmStatusChart) {
-      return true;
-    }
-    if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
-      return false;
-    }
-    else {
-      return true;
-    }
-  }
-
-  /** Check if alarm status chart data is loaded */
-  public checkAlarmsAreLoaded = () => {
-    let isLoadingCheck = this.props.alarmStatus;
-    if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) {
-      if (this.checkAlarmStatus()) {
-        alarmStatusinitialLoad = false;
-        return true;
-      }
-      return false;
-    } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) {
-      alarmStatusinitialLoad = false;
-      alarmStatusinitialStateChanged = true;
-      return !isLoadingCheck.isLoadingAlarmStatusChart;
-    } else if (alarmStatusinitialStateChanged) {
-      if (!isLoadingCheck.isLoadingAlarmStatusChart) {
-        alarmStatusinitialStateChanged = false;
-      }
-      return !isLoadingCheck.isLoadingAlarmStatusChart;
-    }
-    return true;
-  }
-}
-
-export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
index 7324ffab8..5740ebda0 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
@@ -72,10 +72,10 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
 
 
     if (values.length === 2 && values.includes(idProperty as string) && values.includes(isRequiredProperty as string)) {
-      // do not mount network element, if only isRequired is changed
+      // do not mount network element/node, if only isRequired is changed
       await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
 
-    } else if (!(values.length === 1 && values.includes(idProperty as string))) { //do not edit or mount element, if only id was saved into object (no changes made!)
+    } else if (!(values.length === 1 && values.includes(idProperty as string))) { //do not edit or mount network element/node , if only id was saved into object (no changes made!)
       await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
       await dispatcher.dispatch(mountNetworkElementAsyncActionCreator(mountElement));
     }
@@ -109,35 +109,35 @@ const settings: { [key: string]: DialogSettings } = {
   },
 
   [EditNetworkElementDialogMode.AddNewNetworkElement]: {
-    dialogTitle: "Add new network element",
-    dialogDescription: "Add this new network element:",
-    applyButtonText: "Add network element",
+    dialogTitle: "Add New Node",
+    dialogDescription: "Add this new node:",
+    applyButtonText: "Add node",
     cancelButtonText: "Cancel",
     enableMountIdEditor: true,
     enableUsernameEditor: true,
     enableExtendedEditor: true,
   },
   [EditNetworkElementDialogMode.MountNetworkElement]: {
-    dialogTitle: "Mount network element",
-    dialogDescription: "mount this network element:",
-    applyButtonText: "mount network element",
+    dialogTitle: "Mount Node",
+    dialogDescription: "Mount this node:",
+    applyButtonText: "Mount node",
     cancelButtonText: "Cancel",
     enableMountIdEditor: false,
     enableUsernameEditor: false,
     enableExtendedEditor: false,
   },
   [EditNetworkElementDialogMode.UnmountNetworkElement]: {
-    dialogTitle: "Unmount network element",
-    dialogDescription: "unmount this network element:",
-    applyButtonText: "Unmount network element",
+    dialogTitle: "Unmount Node",
+    dialogDescription: "Unmount this node:",
+    applyButtonText: "Unmount node",
     cancelButtonText: "Cancel",
     enableMountIdEditor: false,
     enableUsernameEditor: false,
     enableExtendedEditor: false,
   },
   [EditNetworkElementDialogMode.EditNetworkElement]: {
-    dialogTitle: "Modify the network elements",
-    dialogDescription: "Modify this network element",
+    dialogTitle: "Modify Node",
+    dialogDescription: "Modify this node",
     applyButtonText: "Modify",
     cancelButtonText: "Cancel",
     enableMountIdEditor: false,
@@ -145,9 +145,9 @@ const settings: { [key: string]: DialogSettings } = {
     enableExtendedEditor: false,
   },
   [EditNetworkElementDialogMode.RemoveNetworkElement]: {
-    dialogTitle: "Remove network element",
-    dialogDescription: "Do you really want to remove this network element:",
-    applyButtonText: "Remove network element",
+    dialogTitle: "Remove Node",
+    dialogDescription: "Do you really want to remove this node?",
+    applyButtonText: "Remove node",
     cancelButtonText: "Cancel",
     enableMountIdEditor: false,
     enableUsernameEditor: false,
@@ -176,9 +176,11 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
   constructor(props: EditNetworkElementDialogComponentProps) {
     super(props);
     this.handleRadioChange = this.handleRadioChange.bind(this);
+    // Initialization of state is partly overwritten by update via react getDerivedStateFromProps() below.
+    // Change initialization values in parent "networkElements.tsx" in "const emptyRequireNetworkElement"
     this.state = {
       nodeId: this.props.initialNetworkElement.nodeId,
-      isRequired: false,
+      isRequired: this.props.initialNetworkElement.isRequired,
       host: this.props.initialNetworkElement.host,
       port: this.props.initialNetworkElement.port,
       isNameValid: true,
@@ -222,12 +224,12 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
           <DialogContentText>
             {setting.dialogDescription}
           </DialogContentText>
-          <TextField variant="standard" 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 variant="standard" 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 variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Node ID" 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">Node ID cannot be empty.</Typography>}
+          <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="Host/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">Host/IP address cannot be empty.</Typography>}
 
-          <TextField variant="standard" 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 }); }} />
+          <TextField variant="standard" 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 variant="standard" 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 &&
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
index 5514fa5f8..b0c7840be 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
@@ -51,7 +51,7 @@
      cancelButtonText: "",
    },
    [InfoNetworkElementDialogMode.InfoNetworkElement]: {
-     dialogTitle: "Yang capabilities of the network element",
+     dialogTitle: "YANG Capabilities of the Node",
      dialogDescription: "",
      cancelButtonText: "OK",
    }
@@ -88,7 +88,7 @@
        const indexRevision = capabilty.indexOf("revision=");
        const indexModule = capabilty.indexOf(")", indexRevision);
        if (indexRevision > 0 && indexModule > 0) {
-         let moduleName = capabilty.substr(indexModule + 1);
+         let moduleName = capabilty.substring(indexModule + 1);
          let ModuleFeaturesList;
          for(let index = 0; index < yangFeatures.length; index++) {
            if(yangFeatures[index].name == moduleName) {
@@ -101,7 +101,7 @@
  
          yangCapabilities.push({
            module: moduleName,
-           revision: capabilty.substr(indexRevision + 9, 10),
+           revision: capabilty.substring(indexRevision + 9, indexRevision + 19),
            features: featuresList 
           });
        }
@@ -112,14 +112,14 @@
      return (
        <>
          <Dialog open={this.props.mode !== InfoNetworkElementDialogMode.None}  >
-           <DialogTitle id="form-dialog-title">{setting.dialogTitle + ' - ' + this.state.nodeId}</DialogTitle>
+           <DialogTitle id="form-dialog-title">{`${setting.dialogTitle}: "${this.state.nodeId}"`}</DialogTitle>
            <InfoElementTable stickyHeader isPopup tableId="info-element-table" asynchronus columns={[
-             { property: "module", title: "Module", type: ColumnType.text, width:900 },
+             { property: "module", title: "YANG Capability", type: ColumnType.text, width:900 },
              {
                property: "revision", title: "Revision", type: ColumnType.custom, customControl: ({ rowData }) => {
                  return (
                    <div>
-                     <a href={'/yang-schema/' + rowData.module + '/' + rowData.revision} target="_blank"  > {rowData.revision} </a>
+                     <a href={`/yang-schema/${rowData.module}/${rowData.revision}`} target="_blank"  > {rowData.revision} </a>
                    </div>
                  )
                }
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
index a17a247d2..67fdef69d 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
@@ -109,7 +109,7 @@ type NetworkElementsListComponentState = {
   elementInfoFeature: ModuleSet | null
 }
 
-const emptyRequireNetworkElement: NetworkElementConnection = { id: "", nodeId: "", host: "", port: 0, status: "Disconnected", isRequired: false };
+const emptyRequireNetworkElement: NetworkElementConnection = { id: "", nodeId: "", host: "", port: 830, status: "Disconnected", isRequired: true };
 let initialSorted = false;
 const NetworkElementTable = MaterialTable as MaterialTableCtorType<NetworkElementConnection>;
 
@@ -138,7 +138,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       <MenuItemExt aria-label={"mount-button"} onClick={event => this.onOpenMountdNetworkElementsDialog(event, rowData)} disabled={!canMount} ><LinkIcon /><Typography>Mount</Typography></MenuItemExt>,
       <MenuItemExt aria-label={"unmount-button"} onClick={event => this.onOpenUnmountdNetworkElementsDialog(event, rowData)} disabled={!canMount} ><LinkOffIcon /><Typography>Unmount</Typography></MenuItemExt>,
       <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={"info-button"} onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status !== "Connected"} ><Info /><Typography>Info</Typography></MenuItem>,
       <MenuItem aria-label={"edit-button"} onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
       <MenuItem aria-label={"remove-button"} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
       <Divider />,
@@ -177,7 +177,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
     const canAdd = true;
 
     const addRequireNetworkElementAction = {
-      icon: AddIcon, tooltip: 'Add', ariaLabel: "add-element", onClick: () => {
+      icon: AddIcon, tooltip: 'Add node', ariaLabel: "add-element", onClick: () => {
         this.setState({
           networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement,
           networkElementToEdit: emptyRequireNetworkElement,
@@ -186,7 +186,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
     };
 
     const refreshNetworkElementsAction = {
-      icon: Refresh, tooltip: 'Refresh Network Elements table', ariaLabel: 'refresh', onClick: () => {
+      icon: Refresh, tooltip: 'Refresh table', ariaLabel: 'refresh', onClick: () => {
         this.setState({
           refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable
         });
@@ -195,20 +195,20 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
 
     return <>
       <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...(canAdd ? [addRequireNetworkElementAction] : [])]} columns={[
-        { property: "nodeId", title: "Node Name", type: ColumnType.text },
-        { property: "isRequired", title: "Required", type: ColumnType.boolean },
+        { property: "nodeId", title: "Node ID", type: ColumnType.text },
         { property: "status", title: "Connection Status", type: ColumnType.text, width:'15%' },
         { property: "host", title: "Host", type: ColumnType.text },
         { property: "port", title: "Port", type: ColumnType.numeric },
-        { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
-        { property: "deviceType", title: "Device Type", type: ColumnType.text },
-        { property: "deviceFunction", title: "Device Function", type: ColumnType.text, width: '15%' }
+        { property: "isRequired", title: "Required", type: ColumnType.boolean },
+        { property: "deviceType", title: "Type", type: ColumnType.text },
+      //  { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
+        { property: "deviceFunction", title: "Function", type: ColumnType.text, width: '25%' }
       ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => {
 
         return this.getContextMenu(rowData);
       }} >
       </NetworkElementTable>
-      <EditNetworkElementDialog
+      <EditNetworkElementDialog 
         initialNetworkElement={networkElementToEdit}
         mode={this.state.networkElementEditorMode}
         onClose={this.onCloseEditNetworkElementDialog}
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx
index 27288faa6..abf593882 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx
@@ -59,7 +59,7 @@ const settings: { [key: string]: DialogSettings } = {
     enableExtendedEditor: false,
   },
   [RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable]: {
-    dialogTitle: "Do you want to refresh the Network Elements table?",
+    dialogTitle: "Do you want to refresh the nodes table?",
     dialogDescription: "",
     applyButtonText: "Yes",
     cancelButtonText: "Cancel",