updates to show link details on click and consolidate link data creation

webapp/static/core.css

@@ -2,6 +2,10 @@
     height: 100vh;
 }
 
+#info-card-table td {
+    font-size: 12px;
+}
+
 .navbar-text {
     color: #fff !important;
     font-weight: bold;

webapp/static/corenetwork.js

@@ -113,6 +113,16 @@ class CoreNode {
     }
 }
 
+function setEdgeData(edge, linkId, fromNode, toNode, interfaceOne, interfaceTwo) {
+    edge.core = linkId;
+    edge.label = 'from: name\nto: name';
+    edge.title = 'from: name\nto: name';
+    edge.nodeOne = fromNode.name;
+    edge.interfaceOne = interfaceOne;
+    edge.nodeTwo = toNode.name;
+    edge.interfaceTwo = interfaceTwo;
+}
+
 class CoreNetwork {
     constructor(elementId, coreRest) {
         this.coreRest = coreRest;
@@ -250,13 +260,11 @@ class CoreNetwork {
         };
 
         const edge = {
-            id: linkId,
-            from: fromNode.id,
-            to: toNode.id,
             recreated: true,
-            label: 'from: name\nto: name',
-            title: 'from: name\nto: name'
+            from: fromNode.id,
+            to: toNode.id
         };
+        setEdgeData(edge, linkId, fromNode, toNode, interfaceOne, interfaceTwo);
         this.edges.add(edge);
     }
 
@@ -366,9 +374,7 @@ class CoreNetwork {
             interface_two: interfaceTwo
         };
 
-        edge.id = linkId;
-        edge.label = 'from: name\nto: name';
-        edge.title = 'from: name\nto: name';
+        setEdgeData(edge, linkId, fromNode, toNode, interfaceOne, interfaceTwo);
         this.edges.update(edge);
     }
 

webapp/templates/index.html

@@ -60,7 +60,7 @@
     </nav>
 
     <div class="row col">
-        <div class="col-2 col-xl-1">
+        <div class="col-2 col-xl-2">
             <div class="btn-group-vertical w-100" role="group" aria-label="Side Menu">
                 <button id="run-button" type="button" class="btn btn-success">Start</button>
                 <button id="link-button" type="button" class="btn btn-secondary" data-toggle="button">Link Mode</button>
@@ -88,6 +88,16 @@
                     </div>
                 </div>
             </div>
+
+            <div id="info-card" class="card text-white bg-dark mt-3 invisible">
+                <div id="info-card-header" class="card-header">Selected Title</div>
+                <div class="card-body p-0">
+                    <table id="info-card-table" class="table mb-0">
+                        <tbody>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
 
         <div id="core-network" class="col">
@@ -114,6 +124,9 @@
     const $sessionsModel = $('#sessions-modal');
     const $sessionsTable = $('#sessions-table');
     const $runButton = $('#run-button');
+    const $infoCard = $('#info-card');
+    const $infoCardTable = $('#info-card-table');
+    const $infoCardHeader = $('#info-card-header');
 
     // initial core setup
     const coreRest = new CoreRest();
@@ -154,6 +167,62 @@
         }
     }
 
+    function addInfoTable(name, value) {
+        if (value) {
+            let $nameCell = $('<td>', {text: name});
+            let $valueCell = $('<td>', {text: value});
+            const $row = $('<tr>').append([$nameCell, $valueCell]);
+            $infoCardTable.find('tbody').append($row);
+        }
+    }
+
+    // handle network clicks
+    coreNetwork.network.on('click', function(properties) {
+        console.log('click properties: ', properties);
+
+        $infoCard.removeClass('visible invisible');
+        if (properties.nodes.length === 1) {
+            const nodeId = properties.nodes[0];
+            const node = coreNetwork.nodes.get(nodeId).coreNode;
+            $infoCardHeader.text(node.name);
+            $infoCard.addClass('visible');
+            $infoCardTable.find('tbody tr').remove();
+            addInfoTable('Name', node.name);
+            addInfoTable('Model', node.model);
+            addInfoTable('X', node.x);
+            addInfoTable('Y', node.y);
+        } else if (properties.edges.length === 1) {
+            const edgeId = properties.edges[0];
+            const edge = coreNetwork.edges.get(edgeId);
+            console.log('clicked edge: ', edge);
+            $infoCard.addClass('visible');
+            $infoCardHeader.text('Edge');
+            $infoCardTable.find('tbody tr').remove();
+            addInfoTable('Source', edge.nodeOne);
+            const interfaceOne = edge.interfaceOne;
+            if (interfaceOne) {
+                if (interfaceOne.ip4) {
+                    addInfoTable('IP4', `${interfaceOne.ip4}/${interfaceOne.ip4mask}`);
+                }
+                if (interfaceOne.ip6) {
+                    addInfoTable('IP6', `${interfaceOne.ip6}/${interfaceOne.ip6mask}`);
+                }
+            }
+            addInfoTable('Destination', edge.nodeTwo);
+            const interfaceTwo = edge.interfaceTwo;
+            if (interfaceTwo) {
+                if (interfaceTwo.ip4) {
+                    addInfoTable('IP4', `${interfaceTwo.ip4}/${interfaceTwo.ip4mask}`);
+                }
+                if (interfaceTwo.ip6) {
+                    addInfoTable('IP6', `${interfaceTwo.ip6}/${interfaceTwo.ip6mask}`);
+                }
+            }
+        } else {
+            $infoCard.addClass('invisible');
+        }
+    });
+
     // page interactions
     $linkButton.click(function () {
         const linkMode = !$(this).hasClass('active');