Open PipelineRun diagram from Tekton tree

.vscode/settings.json

@@ -9,5 +9,5 @@
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
     "typescript.tsc.autoDetect": "off",
     "debug.node.autoAttach": "off",
-    "svg.preview.background": "custom"
+    "svg.preview.background": "transparent"
 }

package.json

@@ -444,6 +444,15 @@
           "dark": "images/dark/icon-delete.svg",
           "light": "images/light/icon-delete.svg"
         }
+      },
+      {
+        "command": "tekton.view.pipelinerun.diagram",
+        "title": "Open Diagram",
+        "category": "Tekton",
+        "icon": {
+          "dark": "images/dark/icon-diagram.svg",
+          "light": "images/light/icon-diagram.svg"
+        }
       }
     ],
     "viewsContainers": {
@@ -711,6 +720,11 @@
           "when": "view =~ /^tekton(CustomTree|PipelineExplorer)View/ && viewItem == taskrun",
           "group": "inline@1"
         },
+        {
+          "command": "tekton.view.pipelinerun.diagram",
+          "when": "view =~ /^tekton(CustomTree|PipelineExplorer)View/ && viewItem == pipelinerun",
+          "group": "inline@1"
+        },
         {
           "command": "tekton.open.condition",
           "when": "view =~ /^tekton(CustomTree|PipelineExplorer)View/ && viewItem == tr",

src/extension.ts

@@ -88,6 +88,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     vscode.commands.registerCommand('tekton.open.condition', (context) => execute(TaskRun.openConditionDefinition, context)),
     vscode.commands.registerCommand('tekton.open.task', (context) => execute(TaskRun.openDefinition, context)),
     vscode.commands.registerCommand('tekton.open.task.palette', (context) => execute(TaskRun.openDefinition, context)),
+    vscode.commands.registerCommand('tekton.view.pipelinerun.diagram', (context) => execute(PipelineRun.showDiagram, context)),
 
     pipelineExplorer,
     // Temporarily loaded resource providers

src/pipeline/pipeline-graph.ts

@@ -15,7 +15,7 @@ import { tektonFSUri, tektonVfsProvider } from '../util/tekton-vfs';
 const pipelineRunTaskCache = new Map<string, DeclaredTask[]>();
 
 export interface GraphProvider {
-  (document: vscode.TextDocument, pipelineRun?: PipelineRunData): Promise<NodeOrEdge[]>;
+  (document: vscode.TextDocument | VirtualDocument, pipelineRun?: PipelineRunData): Promise<NodeOrEdge[]>;
   getElementBySelection?(document: vscode.TextDocument, selection: vscode.Selection): string | undefined;
 }
 
@@ -36,7 +36,7 @@ calculatePipelineGraph.getElementBySelection = function (document: vscode.TextDo
   return pipelineYaml.findTask(document, selection.start);
 }
 
-export async function calculatePipelineRunGraph(document: vscode.TextDocument, pipelineRun?: PipelineRunData): Promise<NodeOrEdge[]> {
+export async function calculatePipelineRunGraph(document: VirtualDocument, pipelineRun?: PipelineRunData): Promise<NodeOrEdge[]> {
   const doc: YamlDocument = await getPipelineDocument(document, TektonYamlType.PipelineRun);
   if (!doc) {
     return []; // TODO: throw error there

src/pipeline/pipeline-preview.ts

@@ -7,6 +7,8 @@ import { TektonYamlType, tektonYaml, pipelineRunYaml } from '../yaml-support/tkn
 import { previewManager, PreviewSettings } from './preview-manager';
 import { CommandContext, setCommandContext } from '../commands';
 import { calculatePipelineGraph, calculatePipelineRunGraph, askToSelectPipeline } from './pipeline-graph';
+import { tektonFSUri, tektonVfsProvider } from '../util/tekton-vfs';
+import { ContextType } from '../tkn';
 
 export async function showPipelinePreview(): Promise<void> {
   const document = vscode.window.activeTextEditor?.document;
@@ -42,6 +44,23 @@ export async function showPipelinePreview(): Promise<void> {
   }
 }
 
+export async function showPipelineRunPreview(name: string): Promise<void> {
+  if (!name) {
+    return;
+  }
+  const uri = tektonFSUri(ContextType.PIPELINERUN, name, 'yaml');
+  const pipelineRunDoc = await tektonVfsProvider.loadTektonDocument(uri);
+  const pipelineRun = tektonYaml.getTektonDocuments(pipelineRunDoc, TektonYamlType.PipelineRun);
+
+  previewManager.createPipelinePreview(pipelineRunDoc, {
+    resourceColumn: vscode.ViewColumn.Active,
+    previewColumn: vscode.ViewColumn.Active,
+    graphProvider: calculatePipelineRunGraph,
+    pipelineRunName: name,
+    pipelineRunStatus: pipelineRunYaml.getPipelineRunStatus(pipelineRun[0])
+  } as PreviewSettings);
+}
+
 export function registerPipelinePreviewContext(): void {
 
   setCommandContext(CommandContext.PipelinePreview, getContext(vscode.window.activeTextEditor?.document));

src/pipeline/preview-manager.ts

@@ -6,6 +6,7 @@ import { TextDocument, ViewColumn } from 'vscode';
 import { PipelinePreview } from './preview';
 import { Disposable } from '../util/disposable';
 import { GraphProvider } from './pipeline-graph';
+import { VirtualDocument } from '../yaml-support/yaml-locator';
 
 
 export interface PreviewSettings {
@@ -37,7 +38,7 @@ export class PreviewManager extends Disposable {
     preview.update(document);
   }
 
-  createPipelinePreview(document: TextDocument, settings: PreviewSettings): PipelinePreview {
+  createPipelinePreview(document: TextDocument | VirtualDocument, settings: PreviewSettings): PipelinePreview {
     const preview = PipelinePreview.create(
       {
         document,

src/pipeline/preview.ts

@@ -12,9 +12,10 @@ import { debounce } from 'debounce';
 import { kubectl } from '../kubectl';
 import { PipelineRunData } from '../tekton';
 import { NodeData } from '../../preview-src/model';
+import { VirtualDocument } from '../yaml-support/yaml-locator';
 
 export interface PipelinePreviewInput {
-  readonly document: vscode.TextDocument;
+  readonly document: vscode.TextDocument | VirtualDocument;
   readonly resourceColumn: vscode.ViewColumn;
   readonly line?: number;
   readonly graphProvider: GraphProvider;
@@ -31,7 +32,7 @@ export class PipelinePreview extends Disposable {
     previewColumn: vscode.ViewColumn): PipelinePreview {
     const webview = vscode.window.createWebviewPanel(
       PipelinePreview.viewType,
-      `Preview ${path.basename(input.document.fileName)}`,
+      `Preview ${path.basename(input.document.uri.fsPath)}`,
       previewColumn,
       {
         enableFindWidget: true,
@@ -43,7 +44,7 @@ export class PipelinePreview extends Disposable {
   }
 
   private editor: vscode.WebviewPanel;
-  private document: vscode.TextDocument;
+  private document: vscode.TextDocument | VirtualDocument;
   private updateFunc = debounce(() => this.doUpdate(), 500);
   private graphProvider: GraphProvider;
   private readonly onDisposeEmitter = new vscode.EventEmitter<void>();
@@ -62,7 +63,7 @@ export class PipelinePreview extends Disposable {
     }));
 
     this.register(vscode.workspace.onDidChangeTextDocument(e => {
-      if (e.document.fileName === this.document.fileName) {
+      if (e.document.fileName === this.document.uri.fsPath) {
         this.update(e.document);
       }
     }));
@@ -76,7 +77,7 @@ export class PipelinePreview extends Disposable {
     }));
 
     this.register(vscode.window.onDidChangeTextEditorSelection(e => {
-      if (e.textEditor.document.fileName === this.document.fileName) {
+      if (e.textEditor.document.fileName === this.document.uri.fsPath) {
         this.highlightNode(e.textEditor.document, e.selections);
       }
     }));
@@ -113,7 +114,7 @@ export class PipelinePreview extends Disposable {
   }
 
   update(document: vscode.TextDocument): void {
-    if (this.document.fileName === document.fileName) {
+    if (this.document.uri.fsPath === document.fileName) {
       this.updateFunc();
     }
   }
@@ -130,21 +131,24 @@ export class PipelinePreview extends Disposable {
   }
 
   private async onDidClick(node: NodeData): Promise<void> {
-    const position = this.document.positionAt(node.yamlPosition);
-    for (const visibleEditor of vscode.window.visibleTextEditors) {
-      if (this.isPreviewOf(visibleEditor.document.uri)) {
-        const editor = await vscode.window.showTextDocument(visibleEditor.document, visibleEditor.viewColumn);
-        editor.selection = new vscode.Selection(position, position);
-        editor.revealRange(new vscode.Range(position, position), vscode.TextEditorRevealType.InCenterIfOutsideViewport);
-        return;
+    if ((this.document as vscode.TextDocument).positionAt) {
+      const position = (this.document as vscode.TextDocument).positionAt(node.yamlPosition);
+      for (const visibleEditor of vscode.window.visibleTextEditors) {
+        if (this.isPreviewOf(visibleEditor.document.uri)) {
+          const editor = await vscode.window.showTextDocument(visibleEditor.document, visibleEditor.viewColumn);
+          editor.selection = new vscode.Selection(position, position);
+          editor.revealRange(new vscode.Range(position, position), vscode.TextEditorRevealType.InCenterIfOutsideViewport);
+          return;
+        }
       }
+
+      vscode.workspace.openTextDocument(this.document.uri)
+        .then(vscode.window.showTextDocument)
+        .then(undefined, () => {
+          vscode.window.showErrorMessage(`Could not open ${this.document.uri.toString()}`);
+        });
     }
 
-    vscode.workspace.openTextDocument(this.document.uri)
-      .then(vscode.window.showTextDocument)
-      .then(undefined, () => {
-        vscode.window.showErrorMessage(`Could not open ${this.document.uri.toString()}`);
-      });
   }
 
   private isPreviewOf(resource: vscode.Uri): boolean {
@@ -182,7 +186,7 @@ export class PipelinePreview extends Disposable {
   }
 
   private setContent(html: string): void {
-    const fileName = path.basename(this.document.fileName);
+    const fileName = path.basename(this.document.uri.fsPath);
     this.editor.title = `Preview ${fileName}`;
     // this.editor.iconPath = this.iconPath; //TODO: implement
     this.editor.webview.options = getWebviewOptions();

src/tekton/pipelinerun.ts

@@ -7,6 +7,7 @@ import { TektonItem } from './tektonitem';
 import { TektonNode, Command } from '../tkn';
 import { window } from 'vscode';
 import { CliCommand } from '../cli';
+import { showPipelineRunPreview } from '../pipeline/pipeline-preview';
 
 export class PipelineRun extends TektonItem {
 
@@ -53,4 +54,8 @@ export class PipelineRun extends TektonItem {
   static getDeleteCommand(item: TektonNode): CliCommand {
     return Command.deletePipelineRun(item.getName())
   }
+
+  static async showDiagram(item: TektonNode): Promise<void> {
+    await showPipelineRunPreview(item.getName());
+  }
 }