intial integration of TopoViewer via git-submodule

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/topoViewer/webview-ui"]
+	path = src/topoViewer/webview-ui
+	url = https://github.com/asadarafat/topoViewer.git

package.json

@@ -5,6 +5,9 @@
   "icon": "resources/containerlab.png",
   "description": "Manages containerlab topologies in VS Code",
   "version": "0.3.1",
+  "topoViewer": {
+    "version": "nightly-26.01.25"
+  },
   "engines": {
     "vscode": "^1.70.0"
   },
@@ -138,6 +141,11 @@
         "title": "Graph Lab (draw.io, Interactive)",
         "category": "Containerlab"
       },
+      {
+        "command": "containerlab.topoViewer",
+        "title": "Graph Lab (TopoViewer)",
+        "category": "Containerlab"
+      },
       {
         "command": "containerlab.lab.addToWorkspace",
         "title": "Add Lab to Workspace",
@@ -346,6 +354,11 @@
           "when": "viewItem =~ /containerlabLab/",
           "group": "graph@2"
         },
+        {
+          "command": "containerlab.topoViewer",
+          "when": "viewItem == containerlabLabDeployed",
+          "group": "graph@3"
+        },
         {
           "command": "containerlab.node.start",
           "when": "viewItem == containerlabContainer",
@@ -513,6 +526,7 @@
     "watch": "tsc -w -p ."
   },
   "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^18.0.0",
     "@types/vscode": "^1.70.0",
     "typescript": "^5.7.3"

src/extension.ts

@@ -1,6 +1,7 @@
 import * as vscode from 'vscode';
 import { promisify } from 'util';
 import { exec } from 'child_process';
+import { TopoViewer } from './topoViewer/backend/topoViewerWebUiFacade';
 import {
   deploy,
   deployCleanup,
@@ -119,6 +120,40 @@ export async function activate(context: vscode.ExtensionContext) {
   }, refreshInterval);
   context.subscriptions.push({ dispose: () => clearInterval(intervalId) });
 
+
+  // Create an instance of TopoViewer
+  const viewer = new TopoViewer(context);
+  const cmd = vscode.commands.registerCommand('containerlab.topoViewer', async (node) => {
+    if (!node) {
+      vscode.window.showErrorMessage('No lab node selected.');
+      return;
+    }
+
+    const labPath = node.labPath.absolute;
+
+    // const labPath = node.details?.labPath;
+    const labLabel = node.label || "Lab";
+    if (!labPath) {
+      vscode.window.showErrorMessage('No labPath to redeploy.');
+      return;
+    }
+
+    // const yamlFilePath = path.join(__dirname, '..', 'clab-demo.yaml');
+    try {
+      // await viewer.openViewer(yamlFilePath);
+
+      await viewer.openViewer(labPath);
+
+    } catch (err) {
+      vscode.window.showErrorMessage(`Failed to open Topology Viewer: ${err}`);
+      console.error(`[ERROR] Failed to open topology viewer`, err);
+    }
+  });
+  context.subscriptions.push(cmd);
+
+  // End of Create an instance of TopoViewer
+
 }
 
-export function deactivate() {}
+
+export function deactivate() {}

src/topoViewer/backend/logger.ts

@@ -0,0 +1,73 @@
+// file: src/logger.ts
+
+
+// aarafat-tag: 
+// This is custom logger to provide the following log entry:
+// time=2024-12-29T09:37:21Z level=info msg=Hello file=topoViewer.ts:108
+// the objective is to provide quick code tracing during debugging. Im open to suggestion if there is better way to do the objective as long as not using heavy library.
+
+import * as vscode from 'vscode';
+
+/**
+ * Create a single OutputChannel for logs.
+ */
+const outputChannel = vscode.window.createOutputChannel("TopoViewer Logs");
+
+/**
+ * Extract file name + line number from the call stack.
+ * We'll parse compiled `.js` stack frames, 
+ * which may differ slightly from your TypeScript lines.
+ */
+function getCallerFileLine(): string {
+    const obj = {};
+    Error.captureStackTrace(obj, getCallerFileLine);
+
+    const stack = (obj as any).stack as string;
+    if (!stack) return 'unknown:0';
+
+    const lines = stack.split('\n');
+    // Typically, index 3 or 4 is the real caller
+    const callSite = lines[3] || lines[4] || '';
+
+    const match = callSite.match(/\((.*?):(\d+):\d+\)/)
+        || callSite.match(/at (.*?):(\d+):\d+/);
+    if (!match) return 'unknown:0';
+
+    const filePath = match[1]; // e.g. /path/to/out/topoViewer.js
+    const lineNum = match[2];  // e.g. 108
+
+    // Extract just the file name from the path
+    const fileName = filePath.split(/[\\/]/).pop() ?? 'unknown';
+    return `${fileName}:${lineNum}`;
+}
+
+/**
+ * Logs a formatted message to the OutputChannel.
+ *
+ * @param level "info", "debug", "warn", "error", etc.
+ * @param message The log message to display
+ */
+function logMessage(level: string, message: string): void {
+    const now = new Date().toISOString(); // e.g. 2024-12-29T09:37:21.000Z
+    const fileLine = getCallerFileLine(); // e.g. "topoViewer.ts:108"
+
+    // Final log line:
+    // time=2024-12-29T09:37:21Z level=info msg=Hello file=topoViewer.ts:108
+    const logLine = `time=${now} level=${level} msg=${message} file=${fileLine}`;
+
+    // Write to the OutputChannel
+    outputChannel.appendLine(logLine);
+
+    // If you want to auto-show the channel:
+    // outputChannel.show(true);
+}
+
+/**
+ * Export a `log` object with convenience methods.
+ */
+export const log = {
+    info(msg: string) { logMessage('info', msg); },
+    debug(msg: string) { logMessage('debug', msg); },
+    warn(msg: string) { logMessage('warn', msg); },
+    error(msg: string) { logMessage('error', msg); },
+};