redhat-developer#342 add context menu and command to show logs (redhat-developer#620)

Signed-off-by: Yevhen Vydolob <[email protected]>

Author: evidolob

package-lock.json

@@ -997,6 +997,7 @@
     "codecov": "^3.7.1",
     "css-loader": "^5.2.4",
     "cytoscape": "^3.14.0",
+    "cytoscape-cxtmenu": "^3.4.0",
     "cytoscape-dagre": "^2.2.2",
     "cytoscape-popper": "^2.0.0",
     "decache": "^4.5.1",

package.json

@@ -120,7 +120,7 @@ function convertTasksToNode(tasks: PipelineRunTask[], includePositions = true):
   tasks.forEach((task: DeclaredTask) => tasksMap.set( task.id, task));
 
   for (const task of tasks) {
-    result.push({ data: { id: task.id, label: getLabel(task), type: task.kind, taskRef: task.taskRef, state: task.state, yamlPosition: includePositions ? task.position : undefined, final: task.final, steps: task.steps ?? undefined } as NodeData });
+    result.push({ data: { id: task.id, label: getLabel(task), type: task.kind, taskRef: task.taskRef, state: task.state, yamlPosition: includePositions ? task.position : undefined, final: task.final, steps: task.steps ?? undefined, taskRunName: task.taskRunName } as NodeData });
     for (const after of task.runAfter ?? []) {
       if (tasksMap.has(after)) {
         result.push({ data: { source: after, target: task.id, id: `${after}-${ task.id}`, state: tasksMap.get(after).state } as EdgeData });
@@ -163,15 +163,17 @@ function updatePipelineRunTasks(pipelineRun: PipelineRunData, tasks: DeclaredTas
     const runTask = task as PipelineRunTask;
 
     let taskRun: TaskRun | PipelineRunConditionCheckStatus;
+    let taskRunName: string;
     if (task.kind === 'Condition') {
-      taskRun = findConditionInTaskRun(task.name, taskRuns);
+      [taskRun, taskRunName] = findConditionInTaskRun(task.name, taskRuns);
     } else {
-      taskRun = findTaskInTaskRun(task.name, taskRuns);
+      [taskRun, taskRunName] = findTaskInTaskRun(task.name, taskRuns);
     }
     if (taskRun) {
       runTask.completionTime = taskRun.status?.completionTime;
       runTask.startTime = taskRun.status?.startTime;
       runTask.state = getPipelineRunTaskState(taskRun.status);
+      runTask.taskRunName = taskRunName;
       const steps = (taskRun as TaskRun).status?.steps;
       if (steps) {
         runTask.stepsCount = steps.length;
@@ -198,27 +200,29 @@ function updatePipelineRunTasks(pipelineRun: PipelineRunData, tasks: DeclaredTas
   return tasks as PipelineRunTask[];
 }
 
-function findTaskInTaskRun(name: string, taskRuns: TaskRuns): TaskRun | undefined {
+function findTaskInTaskRun(name: string, taskRuns: TaskRuns): [TaskRun, string] {
   for (const taskRun in taskRuns) {
     const element = taskRuns[taskRun];
     if (element.pipelineTaskName === name) {
-      return element;
+      return [element, taskRun];
     }
   }
+  return [undefined, undefined];
 }
 
-function findConditionInTaskRun(name: string, taskRuns: TaskRuns): PipelineRunConditionCheckStatus | undefined {
+function findConditionInTaskRun(name: string, taskRuns: TaskRuns): [PipelineRunConditionCheckStatus, string] {
   for (const taskRun in taskRuns) {
     const element = taskRuns[taskRun];
     if (element.conditionChecks) {
       for (const conditionRunName in element.conditionChecks) {
         const condition = element.conditionChecks[conditionRunName];
         if (condition.conditionName === name) {
-          return condition;
+          return [condition, conditionRunName];
         }
       }
     }
   }
+  return [undefined, undefined];
 }
 
 async function getPipelineTaskSteps(document: vscode.TextDocument | VirtualDocument, task: NodeData): Promise<StepData[] | undefined> {

src/pipeline/pipeline-graph.ts

@@ -14,6 +14,7 @@ import { PipelineRunData } from '../tekton';
 import { NodeData } from '../webview/pipeline-preview/model';
 import { VirtualDocument } from '../yaml-support/yaml-locator';
 import { telemetryLogError } from '../telemetry';
+import { TaskRun } from '../tekton/taskrun';
 
 export interface PipelinePreviewInput {
   readonly document: vscode.TextDocument | VirtualDocument;
@@ -77,6 +78,9 @@ export class PipelinePreview extends Disposable {
         case 'getSteps': 
           this.handleGetSteps(e.body);
           break;
+        case 'showTaskLog':
+          this.handleShowTaskLog(e.body);
+          break;
         default:
           console.error(`Cannot handle message: ${e.type}`);
       }
@@ -171,6 +175,10 @@ export class PipelinePreview extends Disposable {
 
   }
 
+  private handleShowTaskLog(taskRunName: string): void {
+    TaskRun.showLogs(taskRunName);
+  }
+
   private isPreviewOf(resource: vscode.Uri): boolean {
     return this.document.uri.fsPath === resource.fsPath;
   }

src/pipeline/preview.ts

@@ -80,10 +80,14 @@ export class TaskRun extends TektonItem {
     if (!taskRun) {
       return;
     }
+    return TaskRun.showLogs(taskRun.getName());
+  }
+
+  static showLogs(taskRunName: string): void {
     if (workspace.getConfiguration('vs-tekton').get('showLogInEditor')) {
-      showLogInEditor(Command.showTaskRunLogs(taskRun.getName()), `Log: ${taskRun.getName()}`);
+      showLogInEditor(Command.showTaskRunLogs(taskRunName), `Log: ${taskRunName}`);
     } else {
-      TaskRun.tkn.executeInTerminal(Command.showTaskRunLogs(taskRun.getName()));
+      TaskRun.tkn.executeInTerminal(Command.showTaskRunLogs(taskRunName));
     }
   }
 

src/tekton/taskrun.ts

@@ -9,12 +9,14 @@ import * as dagre from 'cytoscape-dagre';
 import { debounce } from 'debounce';
 import * as popper from 'cytoscape-popper';
 import { TaskPopup } from './task-popup';
+import * as cxtmenu from 'cytoscape-cxtmenu';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare let acquireVsCodeApi: any;
 const vscode = acquireVsCodeApi();
 cytoscape.use(dagre); // register extension
 cytoscape.use(popper);
+cytoscape.use(cxtmenu);
 
 let cy: cytoscape.Core;
 const saveState = debounce(() => {
@@ -154,6 +156,48 @@ function startUpdatingState(): void {
     }
     hoveredId = undefined;
   });
+
+  const theme = getTheme();
+
+  // the default values of each option are outlined below:
+  const defaults = {
+    menuRadius: function(){ return 50; }, // the outer radius (node center to the end of the menu) in pixels. It is added to the rendered size of the node. Can either be a number or function as in the example.
+    selector: 'node[taskRunName]', // elements matching this Cytoscape.js selector will trigger cxtmenus
+    commands: [ // an array of commands to list in the menu or a function that returns the array
+    
+      { // example command
+        // fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
+        content: 'Show logs', // html/text content to be displayed in the menu
+        contentStyle: {}, // css key:value pairs to set the command's css in js if you want
+        select: function(ele){ // a function to execute when the command is selected
+          console.error(ele.data().taskRunName) // `ele` holds the reference to the active element
+          vscode.postMessage({
+            type: 'showTaskLog',
+            body: ele.data().taskRunName
+          });
+        },
+        enabled: true // whether the command is selectable
+      }
+    
+    ], // function( ele ){ return [ /*...*/ ] }, // a function that returns commands or a promise of commands
+    fillColor: theme.menuBackgroundColor,//'rgba(0, 0, 0, 0.75)', // the background colour of the menu
+    activeFillColor: theme.menuSelectionColor,//'rgba(1, 105, 217, 0.75)', // the colour used to indicate the selected command
+    activePadding: 0, // additional size in pixels for the active command
+    indicatorSize: 24, // the size in pixels of the pointer to the active command, will default to the node size if the node size is smaller than the indicator size, 
+    separatorWidth: 3, // the empty spacing in pixels between successive commands
+    spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
+    adaptativeNodeSpotlightRadius: true, // specify whether the spotlight radius should adapt to the node size
+    minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
+    maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
+    openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here
+    itemColor: 'white', // the colour of text in the command's content
+    itemTextShadowColor: 'transparent', // the text shadow colour of the command's content
+    zIndex: 9999, // the z-index of the ui div
+    atMouse: false, // draw menu at mouse position
+    outsideMenuCancel: 2 // if set to a number, this will cancel the command if the pointer is released outside of the spotlight, padded by the number given 
+  };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (cy as any).cxtmenu( defaults );
 }
 
 function restore(state: object): void {
@@ -209,6 +253,8 @@ function getTheme(): CyTheme {
   result.arrowColor = getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-selectionBackground');
   result.targetEdgesColor = getComputedStyle(document.body).getPropertyValue('--vscode-charts-yellow');
   result.sourceEdgesColor = getComputedStyle(document.body).getPropertyValue('--vscode-charts-green');
+  result.menuBackgroundColor = getComputedStyle(document.body).getPropertyValue('--vscode-menu-background');
+  result.menuSelectionColor = getComputedStyle(document.body).getPropertyValue('--vscode-menu-selectionBackground');
   return result;
 }
 

src/webview/pipeline-preview/index.ts

@@ -86,4 +86,6 @@ export interface CyTheme {
   fontFamily: string;
   targetEdgesColor: string;
   sourceEdgesColor: string;
+  menuBackgroundColor: string;
+  menuSelectionColor: string;
 }

src/webview/pipeline-preview/model.ts

@@ -53,6 +53,7 @@ export interface PipelineRunTask extends DeclaredTask {
   finishedSteps?: number;
   steps?: TaskRunSteps[] | TaskStep[];
   retryNumber?: number;
+  taskRunName?: string;
 }
 
 

src/yaml-support/tkn-yaml.ts

@@ -162,6 +162,7 @@ suite('Tekton graph', () => {
           'state': 'Unknown',
           'steps': [],
           'taskRef': 'foo-ref',
+          'taskRunName': 'foo',
           'type': 'Task',
           'yamlPosition': undefined
         }