Combine graph and console view (#666)

Author: janfaracik

README.md

@@ -1,19 +1,33 @@
 # Pipeline Graph View Plugin
 
+[![Build Status](https://ci.jenkins.io/job/Plugins/job/pipeline-graph-view-plugin/job/main/badge/icon)](https://ci.jenkins.io/job/Plugins/job/pipeline-graph-view-plugin/job/main/)
+[![Gitter](https://badges.gitter.im/jenkinsci/ux-sig.svg)](https://gitter.im/jenkinsci/ux-sig?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![Jenkins Plugin](https://img.shields.io/jenkins/plugin/v/pipeline-graph-view.svg)](https://plugins.jenkins.io/pipeline-graph-view)
+[![Jenkins Plugin Installs](https://img.shields.io/jenkins/plugin/i/pipeline-graph-view.svg?color=blue)](https://plugins.jenkins.io/pipeline-graph-view)
+
+![preview.png](docs/images/preview.png)
+
 ## Introduction
 
-This plugin provides new Action and View to view a `WorkflowRun` via the "Pipeline Graph" visualization that was popularized in the [Blue Ocean plugin](https://github.com/jenkinsci/blueocean-plugin).
+This plugin adds a visual representation of Jenkins pipelines, showing each stage of a run in a clear and easy-to-follow graph format. It’s designed to make pipeline progress and structure easier to understand at a glance.
+
+## Features
+
+- Visualize pipelines as an interactive, nested graph
+- Navigate pipeline stages in a clear, collapsible list view
+- View logs in real time without leaving the interface
+- Toggle between graph and stage views; move and resize panes to suit your workflow
+- Quickly access details of each step and its results
+- Designed for better readability and faster troubleshooting
 
 ## Getting started
 
-1. Install the `pipeline-graph-view` plugin
+1. Install the [pipeline-graph-view](https://plugins.jenkins.io/pipeline-graph-view/) plugin
 2. Go to a pipeline run (not a job page)
-3. Click 'Pipeline Overview'
+3. Click 'Pipeline Console'
 
 ## Screenshots
 
-![Pipeline Graph link](docs/images/action.png)
-
 Basic pipeline:
 
 ![Different statuses](./docs/images/different-statuses.png)
@@ -28,20 +42,10 @@ See a live demonstration from a Jenkins Contributor Summit:
 
 [![Demo of Pipeline Graph View plugin](https://img.youtube.com/vi/MBI3MBY2eJ8/0.jpg)](https://www.youtube.com/watch?v=MBI3MBY2eJ8&t=3295 "Pipeline Graph View plugin")
 
-## Vision
-
-This plugin aims to bring the best of Blue Ocean into the regular Jenkins UI.
-
-That means functionality like:
-
-- [x] Pipeline graph
-- [x] Summary of runs in a job (like [Pipeline Stage View Plugin](https://github.com/jenkinsci/pipeline-stage-view-plugin/), but simpler, more modern and more performant)
-- [x] Modern logs viewing
-
-The plugin should be lightweight, using or providing extension points where possible rather than building everything into one plugin.
-
 ## Contributing
 
-Any help is much appreciated, the frontend code is written in React, the backend code is in Java, designers would be greatly appreciated as well.
+Refer to our [contribution guidelines](./CONTRIBUTING.md).
+
+## LICENSE
 
-Refer to our [contribution guidelines](./CONTRIBUTING.md)
+Licensed under MIT, see [LICENSE](LICENSE.md).

docs/images/action.png

@@ -15,7 +15,6 @@ export default [
       },
     },
   },
-  plugins.n.configs["flat/recommended"],
   plugins.promise.configs["flat/recommended"],
   {
     plugins: {

docs/images/preview.png

@@ -35,7 +35,8 @@
     "@tippyjs/react": "^4.2.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-virtuoso": "^4.12.6"
+    "react-virtuoso": "^4.12.6",
+    "react-zoom-pan-pinch": "3.7.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

eslint.config.js

@@ -43,7 +43,7 @@ export async function getRunStatusFromPath(
   url: string,
 ): Promise<RunStatus | null> {
   try {
-    const response = await fetch(url + "pipeline-graph/tree");
+    const response = await fetch(url + "pipeline-console/tree");
     if (!response.ok) {
       throw response.statusText;
     }

package-lock.json

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+interface DropdownPortalProps {
+  children: React.ReactNode;
+}
+
+export default function DropdownPortal({ children }: DropdownPortalProps) {
+  const container = document.getElementById("console-pipeline-overflow-root");
+
+  if (!container) {
+    console.error("DropdownPortal: Target container not found!");
+    return null;
+  }
+
+  return ReactDOM.createPortal(children, container);
+}

package.json

@@ -6,7 +6,11 @@ import Tooltip from "./tooltip.tsx";
 /**
  * A customized (and customizable) implementation of Tippy dropdowns
  */
-export default function Dropdown({ items, disabled }: DropdownProps) {
+export default function Dropdown({
+  items,
+  disabled,
+  className,
+}: DropdownProps) {
   const [visible, setVisible] = useState(false);
   const show = () => setVisible(true);
   const hide = () => setVisible(false);
@@ -19,23 +23,45 @@ export default function Dropdown({ items, disabled }: DropdownProps) {
         {...DefaultDropdownProps}
         content={
           <div className="jenkins-dropdown">
-            {items.map((item, index) => (
-              <a
-                key={index}
-                className="jenkins-dropdown__item"
-                href={item.href}
-                target={item.target}
-                download={item.download}
-              >
-                <div className="jenkins-dropdown__item__icon">{item.icon}</div>
-                {item.text}
-              </a>
-            ))}
+            {items.map((item, index) => {
+              if (item === "separator") {
+                return (
+                  <div
+                    key={`separator-${index}`}
+                    className="jenkins-dropdown__separator"
+                  />
+                );
+              }
+
+              if (React.isValidElement(item)) {
+                return (
+                  <div key={index} className="jenkins-dropdown__custom-item">
+                    {item}
+                  </div>
+                );
+              }
+
+              const dropdownItem = item as DropdownItem;
+              return (
+                <a
+                  key={index}
+                  className="jenkins-dropdown__item"
+                  href={dropdownItem.href}
+                  target={dropdownItem.target}
+                  download={dropdownItem.download}
+                >
+                  <div className="jenkins-dropdown__item__icon">
+                    {dropdownItem.icon}
+                  </div>
+                  {dropdownItem.text}
+                </a>
+              );
+            })}
           </div>
         }
       >
         <button
-          className="jenkins-button jenkins-button--tertiary"
+          className={"jenkins-button " + className}
           type="button"
           disabled={disabled}
           onClick={visible ? hide : show}
@@ -63,8 +89,9 @@ export const DefaultDropdownProps: TippyProps = {
 };
 
 interface DropdownProps {
-  items: DropdownItem[];
+  items: (DropdownItem | React.ReactElement | "separator")[];
   disabled?: boolean;
+  className?: string;
 }
 
 interface DropdownItem {

src/main/frontend/common/RestClient.tsx

@@ -1,19 +1,19 @@
 import "./single-run.scss";
 
-import React, { useState } from "react";
+import React from "react";
 
 import StatusIcon from "../../../common/components/status-icon.tsx";
+import useRunPoller from "../../../common/tree-api.ts";
 import { time, Total } from "../../../common/utils/timings.tsx";
-import {
-  LayoutInfo,
-  StageInfo,
-} from "../../../pipeline-graph-view/pipeline-graph/main/index.ts";
+import { LayoutInfo } from "../../../pipeline-graph-view/pipeline-graph/main/index.ts";
 import { PipelineGraph } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx";
 import { defaultLayout } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import { RunInfo } from "./MultiPipelineGraphModel.ts";
 
 export default function SingleRun({ run, currentJobPath }: SingleRunProps) {
-  const [stages, setStages] = useState<Array<StageInfo>>([]);
+  const { run: runInfo } = useRunPoller({
+    currentRunPath: currentJobPath + run.id + "/",
+  });
 
   const layout: LayoutInfo = {
     ...defaultLayout,
@@ -31,13 +31,7 @@ export default function SingleRun({ run, currentJobPath }: SingleRunProps) {
           </span>
         </a>
       </div>
-      <PipelineGraph
-        stages={stages}
-        setStages={setStages}
-        currentRunPath={currentJobPath + run.id + "/"}
-        layout={layout}
-        collapsed
-      />
+      <PipelineGraph stages={runInfo?.stages || []} layout={layout} collapsed />
     </div>
   );
 }