TypeError fix on get connectedlinkdetails, added Shared.js

src/app/Breadcrumb.js

@@ -4,9 +4,8 @@ import { setSelectedView } from "../features/view/viewSlice";
 import {
   setSelectedOverlayId,
   setRedrawGraph,
-  elementTypes,
 } from "../features/evio/evioSlice";
-
+import {elementTypes} from "./Shared";
 class Breadcrumb extends React.Component {
   componentDidMount() {}
 

src/app/Navbar.js

@@ -4,7 +4,7 @@ import { SiGraphql } from "react-icons/si";
 import { BiNetworkChart } from "react-icons/bi";
 import { GrMapLocation } from "react-icons/gr";
 import { setSelectedView } from "../features/view/viewSlice";
-import {  appViews } from "../features/evio/evioSlice";
+import {  appViews } from "./Shared";
 
 class Navbar extends React.Component {
   constructor(props) {

src/app/OverlaysView.js

@@ -12,8 +12,8 @@ import { connect } from "react-redux";
 import {
   setSelectedOverlayId,
   clearSelectedElement,
-  appViews,
 } from "../features/evio/evioSlice";
+import {appViews} from "./Shared";
 import { setCurrentView } from "../features/view/viewSlice";
 
 class OverlaysView extends React.Component {

src/app/Shared.js

@@ -0,0 +1,16 @@
+export const elementTypes = {
+    eleNode: "ElementTypeNode",
+    eleTunnel: "ElementTypeTunnel",
+    eleNone: "ElementTypeNone",
+  };
+  export const appViews = {
+    TopologyView: "TopologyView",
+    SubgraphView: "SubgraphView",
+    MapView: "MapView",
+    OverlaysView: "OverlaysView",
+  };
+  export const nodeStates = {
+    connected: "Connected",
+    noTunnels: "No Tunnels",
+    notReporting: "Not Reporting",
+  };

src/app/Sidebar.js

@@ -4,7 +4,7 @@ import { slide as Slidebar } from "react-burger-menu";
 import evio_logo from "../images/icons/evio.svg";
 import Navbar from "./Navbar";
 import { Typeahead } from "react-bootstrap-typeahead";
-import { appViews } from "../features/evio/evioSlice";
+import { appViews } from "./Shared";
 import ReactDOM from "react-dom";
 
 class Sidebar extends React.Component {

src/app/TopologyView.js

@@ -10,19 +10,15 @@ import {
   setRedrawGraph,
   setSelectedElement,
   clearSelectedElement,
-  elementTypes,
-  appViews,
 } from "../features/evio/evioSlice";
+import { 
+  elementTypes, 
+  appViews,
+  nodeStates,} from "./Shared";
 import { setCurrentView } from "../features/view/viewSlice";
 import { setZoomValue } from "../features/tools/toolsSlice";
 import CytoscapeComponent from "react-cytoscapejs";
 
-const nodeStates = {
-  connected: "Connected",
-  noTunnels: "No Tunnels",
-  notReporting: "Not Reporting",
-};
-
 class TopologyView extends React.Component {
   constructor(props) {
     super(props);
@@ -260,6 +256,8 @@ class TopologyView extends React.Component {
           <label id="valueLabel">{cyNode.data().id}</label>
           <div className="DetailsLabel">State</div>
           <label id="valueLabel">{cyNode.data().state}</label>
+          <div className="DetailsLabel">Version</div>
+          <label id="valueLabel">{cyNode.data().version}</label>
           <div className="DetailsLabel">Location</div>
           <label id="valueLabel">{cyNode.data().location}</label>
           <hr style={{ backgroundColor: "#486186" }} />
@@ -286,6 +284,8 @@ class TopologyView extends React.Component {
             <label id="valueLabel">{cyNode.data().id}</label>
             <div className="DetailsLabel">State</div>
             <label id="valueLabel">{cyNode.data().state}</label>
+            <div className="DetailsLabel">Version</div>
+            <label id="valueLabel">{cyNode.data().version}</label>
             <div className="DetailsLabel">Location</div>
             <label id="valueLabel">{cyNode.data().location}</label>
             <hr style={{ backgroundColor: "#486186" }} />
@@ -295,7 +295,7 @@ class TopologyView extends React.Component {
       >
         {sidebarNodeslist.map((connectedNode) => {
           try {
-            var [connectedlinkDetail, tunnelId] = this.getConnectedLinkDetails(
+            var {connectedlinkDetail, tunnelId} = this.getConnectedLinkDetails(
               cyNode,
               connectedNode,
               connectedEdges
@@ -348,6 +348,8 @@ class TopologyView extends React.Component {
           <label id="valueLabel">{cyNode.data().id}</label>
           <div className="DetailsLabel">State</div>
           <label id="valueLabel">{cyNode.data().state}</label>
+          <div className="DetailsLabel">Version</div>
+          <label id="valueLabel">{cyNode.data().version}</label>
           <div className="DetailsLabel">Location</div>
           <label id="valueLabel">{cyNode.data().location}</label>
           <hr style={{ backgroundColor: "#486186" }} />
@@ -421,7 +423,9 @@ class TopologyView extends React.Component {
             source.data().id === descriptorItem.Source &&
             tgt.id === descriptorItem.Target
           ) {
-            return [descriptorItem, edge._private.data.id];
+            let connectedlinkDetail = descriptorItem;
+            let tunnelId = edge._private.data.id;
+            return { connectedlinkDetail, tunnelId };
           }
         }
       }
@@ -814,9 +818,9 @@ class TopologyView extends React.Component {
 
   componentWillUnmount() {
     this.autoRefresh = false;
-    //clearTimeout(this.timeoutId);
+    clearTimeout(this.timeoutId);
     //this.props.clearSelectedElement();
-    //this.props.setCyElements([]);
+    this.props.setCyElements([]);
   }
 
   renderTopologyContent() {

src/features/evio/evioSlice.js

@@ -1,16 +1,8 @@
 import { createSlice } from "@reduxjs/toolkit";
-
-export const elementTypes = {
-  eleNode: "ElementTypeNode",
-  eleTunnel: "ElementTypeTunnel",
-  eleNone: "ElementTypeNone",
-};
-export const appViews = {
-  TopologyView: "TopologyView",
-  SubgraphView: "SubgraphView",
-  MapView: "MapView",
-  OverlaysView: "OverlaysView",
-};
+import { 
+  elementTypes, 
+  appViews,
+  nodeStates,} from "../../app/Shared";
 
 const evioSlice = createSlice({
   name: "evio",