remove clab name hardcode

srl-labs · Jan 29, 2025 · 5367480 · 5367480
1 parent 5444664
commit 5367480
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 202 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ out
 dist
 node_modules
 .vscode-test/
+topoViewerData
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "displayName": "Containerlab",
   "icon": "resources/containerlab.png",
   "description": "Manages containerlab topologies in VS Code",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "topoViewer": {
     "version": "nightly-26.01.25"
   },

diff --git a/src/topoViewer/backend/topoViewerAdaptorClab.ts b/src/topoViewer/backend/topoViewerAdaptorClab.ts
@@ -152,6 +152,8 @@ export class TopoViewerAdaptorClab {
             log.warn("Parsed YAML does not contain 'topology' object.");
             return elements;
         }
+
+        var clabName = parsed.name
 
         // Convert each Containerlab node into a Cytoscape node element
         let nodeIndex = 0;
@@ -164,22 +166,22 @@ export class TopoViewerAdaptorClab {
                         weight: '30',   // Placeholder
                         name: nodeName,
                         parent: this.buildParent(nodeObj),  // e.g., "Data Center Leaf:2"
-                        topoViewerRole: nodeObj.labels?.['topoViewer-role'] ?? '',
-                        sourceEndpoint: '',
-                        targetEndpoint: '',
+                        topoViewerRole: nodeObj.labels?.['topoViewer-role'] || 'router', // 'pe' is default role
+                        // sourceEndpoint: '',
+                        // targetEndpoint: '',
                         lat: nodeObj.labels?.['topoViewer-geoCoordinateLat'] ?? '',
                         lng: nodeObj.labels?.['topoViewer-geoCoordinateLng'] ?? '',
                         extraData: {
                             clabServerUsername: 'asad', // Placeholder
-                            fqdn: `${nodeName}.demo.io`,
+                            fqdn: `${nodeName}.${clabName}.io`,
                             group: nodeObj.group ?? '',
                             id: nodeName,
                             image: nodeObj.image ?? '',
                             index: nodeIndex.toString(),
                             kind: nodeObj.kind ?? '',
-                            labdir: `/var/asad/topoViewer/clab-demo/${nodeName}`,
+                            labdir: `/var/asad/topoViewer/clab-${clabName}/${nodeName}`,
                             labels: nodeObj.labels ?? {},
-                            longname: `clab-demo-${nodeName}`,
+                            longname: `clab-${clabName}-${nodeName}`,
                             macAddress: '',
                             mgmtIntf: '',
                             mgmtIpv4AddressLength: 0,

diff --git a/src/topoViewer/backend/topoViewerWebUiFacade.ts b/src/topoViewer/backend/topoViewerWebUiFacade.ts
@@ -1283,21 +1283,17 @@ export class TopoViewer {
                         <ul>
                           <li>Visualize your network topology with ease.</li>
                           <li>View detailed attributes of nodes and links by clicking on them.</li>
-                          <li>Analyze network traffic using Wireshark integration.</li>
-                          <li>Apply network impairments to simulate real-world conditions.</li>
                         </ul>
                         <p>
                           Getting Started: 
                         </p>
                         <ul>
                           <li>Click on nodes and links to explore your network.</li>
                           <li>Use the settings menu to show/hide link endpoint labels.</li>
-                          <li>Analyze network traffic using Wireshark integration.</li>
-                          <li>For advanced Wireshark integration, download EdgeShark client package.</li>
                           <li>Visit GitHub repository for more details <a href="https/github.com/asadarafat/topoViewer">https/github.com/asadarafat/topoViewer</a>.</li>
                         </ul>
                         <p>
-                          I hope you find TopoViewer a valuable tool for your network management needs. If you have any questions or feedback, please don't hesitate to reach out to me.
+                          I hope you find TopoViewer a valuable tool for your network needs. If you have any questions or feedback, please don't hesitate to reach out to me.
                         </p>
                       </div>
                     </div>
@@ -1423,6 +1419,7 @@ export class TopoViewer {
             
             <script src="${jsUri}/dev.js?ver=1"></script>
             <script src="${jsUri}/common.js?ver=1"></script>
+            <script src="${jsUri}/managerSvg.js?ver=1"></script>
             <script src="${jsUri}/managerLayoutAlgo.js?ver=1"></script>
             
          

diff --git a/src/topoViewer/backend/types/topoViewerType.ts b/src/topoViewer/backend/types/topoViewerType.ts
@@ -21,6 +21,7 @@ export interface ClabLink {
  * Represents the main Containerlab topology structure as defined in the YAML configuration.
  */
 export interface ClabTopology {
+    name?: string
     topology?: {
         nodes?: Record<string, ClabNode>;
         links?: ClabLink[];

diff --git a/src/topoViewer/webview-ui b/src/topoViewer/webview-ui
diff --git a/topoViewerData/clab-demo/dataCytoMarshall.json b/topoViewerData/clab-demo/dataCytoMarshall.json
@@ -5,28 +5,20 @@
       "id": "Spine-01",
       "weight": "30",
       "name": "Spine-01",
-      "parent": "Data Center Spine:1",
-      "topoViewerRole": "spine",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": -7.670799192884443,
-      "lng": 109.66040155645494,
+      "parent": "",
+      "topoViewerRole": "pe",
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "Spine-01.demo.io",
-        "group": "Data Center Spine",
+        "group": "",
         "id": "Spine-01",
         "image": "ghcr.io/nokia/srlinux:24.10.1",
         "index": "0",
         "kind": "srl",
         "labdir": "/var/asad/topoViewer/clab-demo/Spine-01",
-        "labels": {
-          "topoViewer-role": "spine",
-          "topoViewer-group": "Data Center Spine",
-          "topoViewer-groupLevel": 1,
-          "topoViewer-geoCoordinateLat": -7.670799192884443,
-          "topoViewer-geoCoordinateLng": 109.66040155645494
-        },
+        "labels": {},
         "longname": "clab-demo-Spine-01",
         "macAddress": "",
         "mgmtIntf": "",
@@ -60,10 +52,8 @@
       "name": "Spine-02",
       "parent": "Data Center Spine:1",
       "topoViewerRole": "spine",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 52.532161628640615,
-      "lng": 13.420430194846846,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "Spine-02.demo.io",
@@ -76,9 +66,7 @@
         "labels": {
           "topoViewer-role": "spine",
           "topoViewer-group": "Data Center Spine",
-          "topoViewer-groupLevel": 1,
-          "topoViewer-geoCoordinateLat": 52.532161628640615,
-          "topoViewer-geoCoordinateLng": 13.420430194846846
+          "topoViewer-groupLevel": 1
         },
         "longname": "clab-demo-Spine-02",
         "macAddress": "",
@@ -113,10 +101,8 @@
       "name": "Leaf-01",
       "parent": "Data Center Leaf:2",
       "topoViewerRole": "leaf",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 51.45664108633426,
-      "lng": 7.00441511803141,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "Leaf-01.demo.io",
@@ -129,9 +115,7 @@
         "labels": {
           "topoViewer-role": "leaf",
           "topoViewer-group": "Data Center Leaf",
-          "topoViewer-groupLevel": 2,
-          "topoViewer-geoCoordinateLat": 51.45664108633426,
-          "topoViewer-geoCoordinateLng": 7.00441511803141
+          "topoViewer-groupLevel": 2
         },
         "longname": "clab-demo-Leaf-01",
         "macAddress": "",
@@ -166,10 +150,8 @@
       "name": "Leaf-02",
       "parent": "Data Center Leaf:2",
       "topoViewerRole": "leaf",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 51.53871503745607,
-      "lng": 7.564717804534128,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "Leaf-02.demo.io",
@@ -182,9 +164,7 @@
         "labels": {
           "topoViewer-role": "leaf",
           "topoViewer-group": "Data Center Leaf",
-          "topoViewer-groupLevel": 2,
-          "topoViewer-geoCoordinateLat": 51.53871503745607,
-          "topoViewer-geoCoordinateLng": 7.564717804534128
+          "topoViewer-groupLevel": 2
         },
         "longname": "clab-demo-Leaf-02",
         "macAddress": "",
@@ -219,10 +199,8 @@
       "name": "Leaf-03",
       "parent": "Data Center Leaf:2",
       "topoViewerRole": "leaf",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 51.326388273344435,
-      "lng": 9.49831138932782,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "Leaf-03.demo.io",
@@ -235,9 +213,7 @@
         "labels": {
           "topoViewer-role": "leaf",
           "topoViewer-group": "Data Center Leaf",
-          "topoViewer-groupLevel": 2,
-          "topoViewer-geoCoordinateLat": 51.326388273344435,
-          "topoViewer-geoCoordinateLng": 9.49831138932782
+          "topoViewer-groupLevel": 2
         },
         "longname": "clab-demo-Leaf-03",
         "macAddress": "",
@@ -272,10 +248,8 @@
       "name": "Leaf-04",
       "parent": "Data Center Leaf:2",
       "topoViewerRole": "leaf",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 51.09927769956055,
-      "lng": 13.980732881349564,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "Leaf-04.demo.io",
@@ -288,9 +262,7 @@
         "labels": {
           "topoViewer-role": "leaf",
           "topoViewer-group": "Data Center Leaf",
-          "topoViewer-groupLevel": 2,
-          "topoViewer-geoCoordinateLat": 51.09927769956055,
-          "topoViewer-geoCoordinateLng": 13.980732881349564
+          "topoViewer-groupLevel": 2
         },
         "longname": "clab-demo-Leaf-04",
         "macAddress": "",
@@ -325,10 +297,8 @@
       "name": "BorderLeaf-01",
       "parent": "Data Center Leaf:2",
       "topoViewerRole": "leaf",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 54.318988964885484,
-      "lng": 10.190450002066472,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "BorderLeaf-01.demo.io",
@@ -341,9 +311,7 @@
         "labels": {
           "topoViewer-role": "leaf",
           "topoViewer-group": "Data Center Leaf",
-          "topoViewer-groupLevel": 2,
-          "topoViewer-geoCoordinateLat": 54.318988964885484,
-          "topoViewer-geoCoordinateLng": 10.190450002066472
+          "topoViewer-groupLevel": 2
         },
         "longname": "clab-demo-BorderLeaf-01",
         "macAddress": "",
@@ -378,10 +346,8 @@
       "name": "BorderLeaf-02",
       "parent": "Data Center Leaf:2",
       "topoViewerRole": "leaf",
-      "sourceEndpoint": "",
-      "targetEndpoint": "",
-      "lat": 54.168316500414996,
-      "lng": 12.311934204350786,
+      "lat": "",
+      "lng": "",
       "extraData": {
         "clabServerUsername": "asad",
         "fqdn": "BorderLeaf-02.demo.io",
@@ -394,9 +360,7 @@
         "labels": {
           "topoViewer-role": "leaf",
           "topoViewer-group": "Data Center Leaf",
-          "topoViewer-groupLevel": 2,
-          "topoViewer-geoCoordinateLat": 54.168316500414996,
-          "topoViewer-geoCoordinateLng": 12.311934204350786
+          "topoViewer-groupLevel": 2
         },
         "longname": "clab-demo-BorderLeaf-02",
         "macAddress": "",
+208 −72		html-static/js/dev.js
+415 −0		html-static/js/managerSvg.js