Add status bar that displays the currently active stack

zenml-studio/.gitignore → .gitignore

@@ -5,16 +5,8 @@ Thumbs.db
 .sass-cache
 .eslintcache
 lib-cov
-*.seed
 *.log
-*.csv
-*.dat
-*.out
-*.pid
-*.gz
 pids
-logs
-results
 
 .vscode-test/
 

zenml-studio/package.json → package.json

@@ -9,13 +9,15 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [],
+  "activationEvents": [
+    "onStartupFinished"
+  ],
   "main": "./dist/extension.js",
   "contributes": {
     "commands": [
       {
-        "command": "zenml-studio.helloWorld",
-        "title": "Hello World"
+        "command": "zenml.showActiveStack",
+        "title": "Show Active ZenML Stack"
       }
     ]
   },

src/commands/stackCommands.ts

@@ -0,0 +1,8 @@
+import { execCLICommand } from '../utils/shell';
+
+/**
+ * Fetches the current active stack using the ZenML CLI.
+ */
+export function getActiveStack(): Promise<string> {
+  return execCLICommand('zenml stack get');
+}

src/extension.ts

@@ -0,0 +1,16 @@
+import * as vscode from 'vscode';
+import { ZenMLStatusBar } from './views/statusBar';
+
+export function activate(context: vscode.ExtensionContext) {
+	console.log('ZenML Studio is now active!');
+
+	const zenMLStatusBar = ZenMLStatusBar.getInstance();
+
+	const refreshCommand = vscode.commands.registerCommand('zenml.showActiveStack', () => {
+		zenMLStatusBar.updateStatusBar();
+	});
+
+	context.subscriptions.push(refreshCommand);
+}
+
+export function deactivate() { }

src/utils/shell.ts

@@ -0,0 +1,17 @@
+import { exec } from 'child_process';
+
+/**
+ * Executes a CLI command and returns a promise that resolves with the command's stdout.
+ */
+export function execCLICommand(command: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve(stdout.trim());
+    });
+  });
+}

src/views/statusBar.ts

@@ -0,0 +1,56 @@
+import * as vscode from 'vscode';
+import { getActiveStack } from '../commands/stackCommands';
+
+export class ZenMLStatusBar {
+  private static instance: ZenMLStatusBar;
+  private statusBar: vscode.StatusBarItem;
+  private constructor() {
+    this.statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
+    this.statusBar.command = 'zenml.showActiveStack';
+    this.updateStatusBar();
+  }
+
+  public static getInstance(): ZenMLStatusBar {
+    if (!ZenMLStatusBar.instance) {
+      ZenMLStatusBar.instance = new ZenMLStatusBar();
+      // ZenMLStatusBar.instance.startAutoRefresh();
+    }
+    return ZenMLStatusBar.instance;
+  }
+
+  // public startAutoRefresh() {
+  //   const interval = 30000;
+  //   setInterval(() => {
+  //     this.updateStatusBar();
+  //   }, interval);
+  // }
+
+  public show() {
+    this.statusBar.show();
+  }
+
+  public hide() {
+    this.statusBar.hide();
+  }
+
+  public updateStatusBar() {
+    console.log('Updating ZenML active stack...');
+
+    getActiveStack().then((fullActiveStackText) => {
+      /**
+       * The cli command `zenml stack get` outputs the line below: 
+       * The global active stack is: 'default'
+       * 'default' is the actual string we want to display in the status bar.
+       */
+      const match = fullActiveStackText.match(/'([^']+)'/); // matches text within single quotes
+      const activeStack = match ? match[1] : 'Error parsing stack name';
+      this.statusBar.text = `Active Stack: ${activeStack}`;
+      this.statusBar.tooltip = 'Click to refresh the active ZenML stack';
+      this.show();
+    }).catch((error) => {
+      console.error('Failed to fetch active ZenML stack:', error);
+      this.statusBar.text = `Active Stack: Error`;
+      this.show();
+    });
+  }
+}