Use the build number for requests from /latestXXX builds (#1205)

Author: das7pad

openapi.yaml

@@ -612,7 +612,7 @@ components:
               synthetic: false
               placeholder: false
               agent: "linux"
-              url: "/job/my-pipeline/1/stages?selected-node=6"
+              url: "/job/my-pipeline/1/stages/?selected-node=6"
 
     StepListExample:
       summary: Example step list

src/main/frontend/common/RestClient.tsx

@@ -64,19 +64,28 @@ export interface ConsoleLogData {
   consoleAnnotator: string;
 }
 
+function fixStaleStageURL(stages: StageInfo[]) {
+  for (const stage of stages) {
+    stage.url = stage.url.replace("stages?", "stages/?");
+    fixStaleStageURL(stage.children);
+  }
+}
+
 export async function getRunStatusFromPath(url: string): Promise<RunStatus> {
-  const response = await fetch(url + "stages/tree");
+  const response = await fetch(`${url}stages/tree`);
   if (!response.ok) {
     throw response.statusText;
   }
   const text = await response.text();
   const json = JSON.parse(text);
+  // Trees of completed builds are cached. The response may have been generated by a previous release without the URL normalization. We can remove the normalization from the frontend in a few months time.
+  fixStaleStageURL(json.data.stages);
   json.data.raw = text;
   return json.data;
 }
 
-export async function getRunSteps(): Promise<AllStepsData> {
-  const response = await fetch("allSteps");
+export async function getRunSteps(url: string): Promise<AllStepsData> {
+  const response = await fetch(`${url}stages/allSteps`);
   if (!response.ok) throw response.statusText;
   const text = await response.text();
   const json = JSON.parse(text);
@@ -85,6 +94,7 @@ export async function getRunSteps(): Promise<AllStepsData> {
 }
 
 export async function getConsoleTextOffset(
+  url: string,
   stepId: string,
   startByte: number,
   consoleAnnotator: string,
@@ -93,7 +103,7 @@ export async function getConsoleTextOffset(
   if (consoleAnnotator) headers.set("X-ConsoleAnnotator", consoleAnnotator);
   try {
     const response = await fetch(
-      `../execution/node/${stepId}/log/logText/progressiveHtml?start=${startByte.toString()}`,
+      `${url}execution/node/${stepId}/log/logText/progressiveHtml?start=${startByte.toString()}`,
       { headers },
     );
     if (!response.ok) throw response.statusText;
@@ -113,9 +123,12 @@ export async function getConsoleTextOffset(
   }
 }
 
-export async function getExceptionText(stepId: string): Promise<string[]> {
+export async function getExceptionText(
+  url: string,
+  stepId: string,
+): Promise<string[]> {
   try {
-    const response = await fetch(`exceptionText?nodeId=${stepId}`);
+    const response = await fetch(`${url}stages/exceptionText?nodeId=${stepId}`);
     if (!response.ok) throw response.statusText;
     const text = await response.text();
     if (!text) return [];

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx

@@ -10,11 +10,12 @@ export interface ConsoleLineProps {
   content: string;
   stepId: string;
   startByte: number;
+  currentRunPath: string;
 }
 
 // Console output line
 export const ConsoleLine = memo(function ConsoleLine(props: ConsoleLineProps) {
-  const baseURL = `?start-byte=${props.startByte}&selected-node=${props.stepId}`;
+  const baseURL = `${props.currentRunPath}stages/?start-byte=${props.startByte}&selected-node=${props.stepId}`;
   const id = `log-${props.stepId}-${props.lineNumber}`;
   return (
     <pre

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.spec.tsx

@@ -52,6 +52,7 @@ describe("ConsoleLogCard", () => {
     tailLogs: true,
     scrollToTail: () => {},
     stopTailingLogs: () => {},
+    currentRunPath: "/jenkins/job/name/1/",
   } as ConsoleLogCardProps;
   beforeEach(function () {
     (DefaultTestProps.fetchLogText as Mock).mockReset();

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -39,16 +39,16 @@ export default function ConsoleLogCard({
   fetchLogText,
   onStepToggle,
   fetchExceptionText,
+  currentRunPath,
 }: ConsoleLogCardProps) {
-  const handleToggle = (e: ReactMouseEvent<HTMLElement>) => {
+  const handleToggle = (e: ReactMouseEvent<HTMLAnchorElement>) => {
     // Only prevent left clicks
     if (e.button !== 0 || e.metaKey || e.ctrlKey) {
       return;
     }
 
     e.preventDefault();
-
-    history.replaceState({}, "", `?selected-node=` + step.id);
+    history.replaceState({}, "", e.currentTarget.href);
 
     onStepToggle(step.id);
   };
@@ -68,7 +68,7 @@ export default function ConsoleLogCard({
         })}
       >
         <a
-          href={`?selected-node=` + step.id}
+          href={currentRunPath + `stages/?selected-node=` + step.id}
           onClick={handleToggle}
           key={`step-action-area-${step.id}`}
         >
@@ -122,7 +122,7 @@ export default function ConsoleLogCard({
 
         <Tooltip content={messages.format(LocalizedMessageKey.consoleNewTab)}>
           <a
-            href={`log?nodeId=${step.id}`}
+            href={`${currentRunPath}stages/log?nodeId=${step.id}`}
             className={"jenkins-button jenkins-button--tertiary"}
             target="_blank"
             rel="noreferrer"
@@ -153,6 +153,7 @@ export default function ConsoleLogCard({
           fetchLogText={fetchLogText}
           fetchExceptionText={fetchExceptionText}
           onStepToggle={onStepToggle}
+          currentRunPath={currentRunPath}
         />
       )}
     </div>
@@ -193,6 +194,7 @@ const ConsoleLogBody = memo(function ConsoleLogBody({
   stepBuffers,
   fetchLogText,
   fetchExceptionText,
+  currentRunPath,
 }: ConsoleLogCardBodyProps) {
   const [stepBuffer, setStepBuffer] = useState<StepLogBufferInfo>({
     ...(stepBuffers.get(stepId) || defaultStepBuffer()),
@@ -265,6 +267,7 @@ const ConsoleLogBody = memo(function ConsoleLogBody({
           fetchExceptionText={fetchExceptionText}
           stepId={stepId}
           stepState={stepState}
+          currentRunPath={currentRunPath}
         />
       </Suspense>
     </div>
@@ -284,6 +287,7 @@ export type ConsoleLogCardProps = {
   tailLogs: boolean;
   scrollToTail: (stepId: string, element: HTMLDivElement) => void;
   stopTailingLogs: () => void;
+  currentRunPath: string;
 };
 
 export type ConsoleLogCardBodyProps = {
@@ -299,4 +303,5 @@ export type ConsoleLogCardBodyProps = {
   tailLogs: boolean;
   scrollToTail: (stepId: string, element: HTMLDivElement) => void;
   stopTailingLogs: () => void;
+  currentRunPath: string;
 };

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.spec.tsx

@@ -49,6 +49,7 @@ describe("ConsoleLogStream", () => {
     tailLogs: false,
     stopTailingLogs: () => {},
     scrollToTail: () => {},
+    currentRunPath: "/jenkins/job/name/1/",
   } as ConsoleLogStreamProps;
 
   it("renders step console", async () => {

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.tsx

@@ -18,6 +18,7 @@ export default function ConsoleLogStream({
   updateLogBufferIfChanged,
   fetchLogText,
   fetchExceptionText,
+  currentRunPath,
 }: ConsoleLogStreamProps) {
   const logRef = useRef<HTMLDivElement>(null);
   const [logVisible, setLogVisible] = useState(true);
@@ -100,6 +101,7 @@ export default function ConsoleLogStream({
           stepId={stepId}
           startByte={logBuffer.startByte}
           stopTailingLogs={stopTailingLogs}
+          currentRunPath={currentRunPath}
         />
       ))}
     </div>
@@ -119,4 +121,5 @@ export interface ConsoleLogStreamProps {
   tailLogs: boolean;
   stopTailingLogs: () => void;
   scrollToTail: (stepId: string, element: HTMLDivElement) => void;
+  currentRunPath: string;
 }

src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx

@@ -21,6 +21,7 @@ export default function DataTreeView({
   stages,
   selected,
   onNodeSelect,
+  currentRunPath,
 }: DataTreeViewProps) {
   const { search, setSearch, visibleStatuses } = useFilter();
   const filteredStages = filterStageTree(search, visibleStatuses, stages);
@@ -90,6 +91,7 @@ export default function DataTreeView({
             stage={stage}
             selected={String(selected)}
             onSelect={onNodeSelect}
+            currentRunPath={currentRunPath}
           />
         ))}
       </ol>
@@ -108,6 +110,7 @@ const TreeNode = memo(function TreeNode({
   stage,
   selected,
   onSelect,
+  currentRunPath,
 }: TreeNodeProps) {
   const { search, visibleStatuses, allVisible } = useFilter();
   const hasChildren = stage.children && stage.children.length > 0;
@@ -145,16 +148,16 @@ const TreeNode = memo(function TreeNode({
     >
       <div className="pgv-tree-item-container">
         <a
-          href={`?selected-node=` + stage.id}
+          href={currentRunPath + `stages/?selected-node=` + stage.id}
           onClick={(e) => {
             // Only prevent left clicks
             if (e.button !== 0 || e.metaKey || e.ctrlKey) {
               return;
             }
 
             e.preventDefault();
+            history.replaceState({}, "", e.currentTarget.href);
 
-            history.replaceState({}, "", `?selected-node=` + stage.id);
             if (!isSelected) {
               onSelect(String(stage.id));
             }
@@ -223,6 +226,7 @@ const TreeNode = memo(function TreeNode({
                 stage={child}
                 selected={selected}
                 onSelect={onSelect}
+                currentRunPath={currentRunPath}
               />
             ))}
           </ol>
@@ -264,10 +268,12 @@ interface DataTreeViewProps {
   stages: StageInfo[];
   selected?: number;
   onNodeSelect: (nodeId: string) => void;
+  currentRunPath: string;
 }
 
 interface TreeNodeProps {
   stage: StageInfo;
   selected: string;
   onSelect: (id: string) => void;
+  currentRunPath: string;
 }

src/main/frontend/pipeline-console-view/pipeline-console/main/NoStageStepsFallback.tsx

@@ -19,7 +19,7 @@ async function fetchData(url: string): Promise<StepLogBufferInfo> {
 }
 
 interface NoStageStepsFallbackProps {
-  url: string;
+  currentRunPath: string;
   tailLogs: boolean;
   scrollToTail: (stepId: string, element: HTMLDivElement) => void;
 }
@@ -32,13 +32,13 @@ export function NoStageStepsFallback(props: NoStageStepsFallbackProps) {
   });
 
   useEffect(() => {
-    fetchData(props.url)
+    fetchData(props.currentRunPath)
       .then((data) => {
         setLogBuffer(data);
         return data;
       })
       .catch((err) => console.log(err));
-  }, [props.url]);
+  }, [props.currentRunPath]);
 
   return (
     <div className={"pgv-stage-steps"}>
@@ -52,6 +52,7 @@ export function NoStageStepsFallback(props: NoStageStepsFallbackProps) {
           stepId={""}
           stepState={Result.success}
           fetchExceptionText={async () => logBuffer}
+          currentRunPath={props.currentRunPath}
         />
       </div>
     </div>

src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx

@@ -127,6 +127,7 @@ export default function PipelineConsole() {
                     </div>
                   ) : (
                     <DataTreeView
+                      currentRunPath={currentRunPath}
                       onNodeSelect={handleStageSelect}
                       selected={openStage?.id}
                       stages={stages}
@@ -153,6 +154,7 @@ export default function PipelineConsole() {
                   onStepToggle={onStepToggle}
                   fetchLogText={fetchLogText}
                   fetchExceptionText={fetchExceptionText}
+                  currentRunPath={currentRunPath}
                 />
               )}
             </div>
@@ -162,7 +164,7 @@ export default function PipelineConsole() {
 
       {!loading && stages.length === 0 && (
         <NoStageStepsFallback
-          url={currentRunPath}
+          currentRunPath={currentRunPath}
           tailLogs={tailLogs}
           scrollToTail={scrollToTail}
         />