Merge pull request #10 from zenml-io/feature/experimental-buttons

Add button to view dashboard after successful pipeline run / completion

Author: strickvl

.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(rg:*)",
+      "Bash(grep:*)",
+      "Bash(npm run compile:*)"
+    ],
+    "deny": []
+  }
+}

assets/main.css

@@ -448,13 +448,68 @@ footer .run-pipeline-button.running {
 footer .run-pipeline-button.completed {
   background: var(--zenml-green);
   color: white;
+  cursor: default;
+}
+
+footer .run-pipeline-button.completed:hover {
+  background: var(--zenml-green);
+  transform: none;
+  box-shadow: none;
 }
 
 footer .run-pipeline-button.failed {
   background: var(--zenml-red);
   color: white;
 }
 
+
+/* Pipeline button group */
+.pipeline-button-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Dashboard button styling - smaller variant */
+.dashboard-button-small {
+  background: var(--vscode-button-secondaryBackground);
+  border: 1px solid var(--vscode-sideBar-border);
+  color: var(--vscode-button-secondaryForeground);
+  padding: 9px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: center;
+  font-family: "Inter", sans-serif;
+  margin: 0;
+  height: 38px;
+  text-decoration: none;
+  flex-shrink: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.dashboard-button-small:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  color: var(--vscode-button-secondaryForeground);
+  text-decoration: none;
+}
+
+.dashboard-button-small:active {
+  transform: translateY(0);
+}
+
+.dashboard-button-small .codicon {
+  font-size: 14px;
+}
+
 #progress {
   height: 4px;
   background-color: var(--vscode-progressBar-background);

assets/main.js

@@ -476,7 +476,8 @@
       } else if (status === "completed" || status === "cached") {
         runButton.innerHTML = `<i class="checkmark">✓</i> ${buttonTexts[status]}`;
         //@ts-ignore
-        runButton.disabled = false;
+        runButton.disabled = true;
+        runButton.style.cursor = "default";
       } else if (status === "failed") {
         runButton.innerHTML = `<i class="codicon codicon-error"></i> ${buttonTexts[status]}`;
         //@ts-ignore
@@ -493,14 +494,18 @@
   }
 
   function showDashboardUrl(url) {
-    const dashboardLink = document.getElementById("dashboard-link");
-    const dashboardUrl = document.getElementById("dashboard-url");
+    const dashboardButton = document.getElementById("dashboard-button");
 
-    if (dashboardLink && dashboardUrl) {
+    if (dashboardButton) {
       //@ts-ignore
-      dashboardUrl.href = url;
-      dashboardUrl.textContent = "View Pipeline in Dashboard";
-      dashboardLink.style.display = "flex";
+      dashboardButton.href = url;
+      dashboardButton.style.display = "flex";
+      
+      // Add click handler to open in external browser
+      dashboardButton.addEventListener('click', function(e) {
+        e.preventDefault();
+        vscode.postMessage({ type: "openDashboard", url: url });
+      });
     }
   }
 

src/tutorialOrchestrator.ts

@@ -27,8 +27,14 @@ export default class TutorialOrchestrator {
   private _getDashboardUrl(runId?: string): string {
     const baseUrl = vscode.workspace
       .getConfiguration("zenml")
-      .get<string>("dashboardUrl", "http://localhost:8080");
-    return runId ? `${baseUrl}/workspaces/default/runs/${runId}` : baseUrl;
+      .get<string>("dashboardUrl", "https://cloud.zenml.io");
+    // If we have a run ID, show specific run, otherwise show pipelines page
+    if (runId) {
+      return `${baseUrl}/workspaces/default/runs/${runId}`;
+    } else {
+      // Fallback to generic pipelines page when no specific run ID
+      return `${baseUrl}/workspaces/default/pipelines`;
+    }
   }
 
   constructor(context: vscode.ExtensionContext, tutorial: Tutorial) {
@@ -142,7 +148,7 @@ export default class TutorialOrchestrator {
       codeRunner(
         this.terminal,
         this._codePanel.document.uri,
-        () => {
+        (dashboardUrl?: string) => {
           vscode.window.showInformationMessage("Code Ran Successfully! 🎉");
           if (callback) {
             callback();
@@ -196,27 +202,25 @@ export default class TutorialOrchestrator {
       codeRunner(
         this.terminal,
         this._codePanel.document.uri,
-        (runId?: string) => {
+        (dashboardUrl?: string) => {
           // Pipeline completed successfully
           this._pipelineRunning = false;
           this._completedTutorials.add(this._tutorial.currentSection.index);
           this._sendWebviewMessage({
             type: "pipelineStatusUpdate",
             status: "completed",
           });
-          this._sendWebviewMessage({ type: "pipelineCompleted", runId: runId });
+          this._sendWebviewMessage({ type: "pipelineCompleted" });
 
           // Save progress
           this._saveProgress();
 
-          // Show dashboard URL
-          if (runId) {
-            const dashboardUrl = this._getDashboardUrl(runId);
-            this._sendWebviewMessage({
-              type: "showDashboardUrl",
-              url: dashboardUrl,
-            });
-          }
+          // Show dashboard URL - use the captured URL or fallback to generic
+          const finalDashboardUrl = dashboardUrl || this._getDashboardUrl();
+          this._sendWebviewMessage({
+            type: "showDashboardUrl",
+            url: finalDashboardUrl,
+          });
         },
         () => {
           // Pipeline failed
@@ -779,10 +783,16 @@ export default class TutorialOrchestrator {
         <i class="codicon codicon-chevron-left"></i>
         <span>Prev</span>
       </button>
-      <button class="run-pipeline-button" id="run-pipeline">
-        <i class="codicon codicon-play"></i>
-        <span>Run Pipeline</span>
-      </button>
+      <div class="pipeline-button-group">
+        <button class="run-pipeline-button" id="run-pipeline">
+          <i class="codicon codicon-play"></i>
+          <span>Run Pipeline</span>
+        </button>
+        <a class="dashboard-button-small" id="dashboard-button" href="#" style="display: none;">
+          <i class="codicon codicon-link-external"></i>
+          <span>View in dashboard</span>
+        </a>
+      </div>
       <button class="footer-nav-button next ${
         isLast && !isCompletionScreen ? "disabled" : ""
       }" id="nav-next" ${isLast && !isCompletionScreen ? "disabled" : ""}>

src/utils/codeRunner.ts

@@ -1,4 +1,4 @@
-import { unlinkSync, writeFileSync } from "fs";
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from "fs";
 import os from "os";
 import path from "path";
 import * as vscode from "vscode";
@@ -7,8 +7,8 @@ import getNonce from "./getNonce";
 export default function codeRunner(
   terminal: vscode.Terminal,
   fileUri: vscode.Uri,
-  onSuccessCallback?: Function,
-  onErrorCallback?: Function
+  onSuccessCallback?: (dashboardUrl?: string) => void,
+  onErrorCallback?: () => void
 ) {
   const uniqueId = getNonce();
 
@@ -34,6 +34,9 @@ function runCode(
   // Get the project root directory (go up from pipeline file to project root)
   const projectRoot = path.resolve(path.dirname(filePath), "../..");
 
+  const dashboardUrlFile = path.join(os.tmpdir(), `dashboard_url_${uniqueId}.txt`);
+  const pipelineOutputLog = path.join(os.tmpdir(), `pipeline_output_${uniqueId}.log`);
+  
   writeFileSync(
     scriptPath,
     `
@@ -42,8 +45,17 @@ function runCode(
     echo "Executing code..."
     cd "${projectRoot}"
     export PYTHONPATH="${projectRoot}:$PYTHONPATH"
-    python "${filePath}"
-    if [ $? -eq 0 ]; then
+    # Capture output to extract dashboard URL
+    python "${filePath}" 2>&1 | tee "${pipelineOutputLog}"
+    RESULT=$?
+    
+    # Extract dashboard URL if present
+    grep "DASHBOARD_URL:" "${pipelineOutputLog}" | tail -1 | cut -d':' -f2- > "${dashboardUrlFile}"
+    
+    # Clean up
+    rm -f "${pipelineOutputLog}"
+    
+    if [ $RESULT -eq 0 ]; then
       touch "${successFilePath}"
     else
       touch "${errorFilePath}"
@@ -59,8 +71,8 @@ function runCode(
 function initializeFileWatcher(
   filePath: string,
   uniqueId: string,
-  onSuccessCallback?: Function,
-  onFailureCallback?: Function
+  onSuccessCallback?: (dashboardUrl?: string) => void,
+  onFailureCallback?: () => void
 ) {
   const removeLastFileFromPath = (filePath: string) => {
     let sections = filePath.split("/");
@@ -87,8 +99,21 @@ function initializeFileWatcher(
       vscode.workspace.fs.delete(uri);
       unlinkSync(scriptPath);
       watcher.dispose();
+      
+      // Try to read dashboard URL if available
+      const dashboardUrlFile = path.join(os.tmpdir(), `dashboard_url_${uniqueId}.txt`);
+      let dashboardUrl: string | undefined;
+      try {
+        if (existsSync(dashboardUrlFile)) {
+          dashboardUrl = readFileSync(dashboardUrlFile, 'utf8').trim();
+          unlinkSync(dashboardUrlFile);
+        }
+      } catch (error) {
+        // Ignore errors reading dashboard URL
+      }
+      
       if (onSuccessCallback) {
-        onSuccessCallback();
+        onSuccessCallback(dashboardUrl);
       }
     } else if (uri.fsPath.endsWith(errorFileName)) {
       vscode.workspace.fs.delete(uri);

utils.py

@@ -25,3 +25,5 @@ def log_dashboard_urls(pipeline_name: str):
     logger.info(f"🌐 View this run: {dashboard_url}")
     logger.info(f"🌐 View all artifacts: {base_url}/artifacts")
     logger.info("=" * 60)
+    # Print dashboard URL for VSCode extension to capture
+    print(f"DASHBOARD_URL:{dashboard_url}")