Configuration for default displaying names and duration globally (#844)

Co-authored-by: Tim Jacomb <[email protected]>

Author: lewisbirks

src/main/frontend/common/user/user-preferences-provider.tsx

@@ -1,10 +1,4 @@
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, ReactNode, useContext, useState } from "react";
 
 interface PipelineGraphViewPreferences {
   showNames: boolean;
@@ -24,24 +18,40 @@ const UserPreferencesContext = createContext<
 
 const makeKey = (setting: string) => `pgv-graph-view.${setting}`;
 
-const loadFromLocalStorage = <T,>(key: string, fallback: T): T => {
-  if (typeof window === "undefined") {
+const parsePreferenceValue = <T,>(
+  value: string | undefined,
+  fallback: T,
+): T => {
+  if (value === undefined) {
     return fallback;
   }
+  if (typeof fallback === "boolean") {
+    return (value === "true") as typeof fallback;
+  }
+  return value as unknown as T;
+};
+
+const loadFromLocalStorage = <T,>(key: string, fallback: T): T => {
   try {
-    const value = window.localStorage.getItem(key);
-    if (value !== null) {
-      if (typeof fallback === "boolean") {
-        return (value === "true") as typeof fallback;
-      }
-      return value as unknown as T;
-    }
+    const value = window.localStorage.getItem(key) ?? undefined;
+    return parsePreferenceValue(value, fallback);
   } catch (e) {
     console.error(`Error loading localStorage key "${key}"`, e);
   }
   return fallback;
 };
 
+const loadFromDOM = <T,>(key: string, fallback: T): T => {
+  const preferencesModule = document.querySelector(
+    "[data-module='user-preferences']",
+  );
+  const value =
+    preferencesModule && "dataset" in preferencesModule
+      ? (preferencesModule as HTMLElement).dataset[key]
+      : undefined;
+  return parsePreferenceValue(value, fallback);
+};
+
 export const UserPreferencesProvider = ({
   children,
 }: {
@@ -51,27 +61,38 @@ export const UserPreferencesProvider = ({
   const stageDurationsKey = makeKey("stageDurations");
 
   const [showNames, setShowNames] = useState<boolean>(
-    loadFromLocalStorage(stageNamesKey, defaultPreferences.showNames),
+    loadFromLocalStorage(
+      stageNamesKey,
+      loadFromDOM("preferenceShowStageNames", defaultPreferences.showNames),
+    ),
   );
   const [showDurations, setShowDurations] = useState<boolean>(
-    loadFromLocalStorage(stageDurationsKey, defaultPreferences.showDurations),
+    loadFromLocalStorage(
+      stageDurationsKey,
+      loadFromDOM(
+        "preferenceShowStageDurations",
+        defaultPreferences.showDurations,
+      ),
+    ),
   );
 
-  useEffect(() => {
-    window.localStorage.setItem(stageNamesKey, String(showNames));
-  }, [showNames]);
+  const persistShowNames = (val: boolean) => {
+    window.localStorage.setItem(stageNamesKey, String(val));
+    setShowNames(val);
+  };
 
-  useEffect(() => {
-    window.localStorage.setItem(stageDurationsKey, String(showDurations));
-  }, [showDurations]);
+  const persistShowDurations = (val: boolean) => {
+    window.localStorage.setItem(stageDurationsKey, String(val));
+    setShowDurations(val);
+  };
 
   return (
     <UserPreferencesContext.Provider
       value={{
         showNames,
-        setShowNames,
+        setShowNames: persistShowNames,
         showDurations,
-        setShowDurations,
+        setShowDurations: persistShowDurations,
       }}
     >
       {children}

src/main/java/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewConfiguration.java

@@ -14,6 +14,8 @@
 public class PipelineGraphViewConfiguration extends GlobalConfiguration {
 
     private boolean showGraphOnJobPage;
+    private boolean showStageNames;
+    private boolean showStageDurations;
     private boolean showGraphOnBuildPage;
 
     public PipelineGraphViewConfiguration() {
@@ -30,6 +32,26 @@ public void setShowGraphOnJobPage(boolean showGraphOnJobPage) {
         save();
     }
 
+    public boolean isShowStageNames() {
+        return showStageNames;
+    }
+
+    @DataBoundSetter
+    public void setShowStageNames(boolean showStageNames) {
+        this.showStageNames = showStageNames;
+        save();
+    }
+
+    public boolean isShowStageDurations() {
+        return showStageDurations;
+    }
+
+    @DataBoundSetter
+    public void setShowStageDurations(boolean showStageDurations) {
+        this.showStageDurations = showStageDurations;
+        save();
+    }
+
     public boolean isShowGraphOnBuildPage() {
         return showGraphOnBuildPage;
     }

src/main/java/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/MultiPipelineGraphViewAction.java

@@ -3,6 +3,7 @@
 import com.fasterxml.jackson.core.JsonProcessingException;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import hudson.model.Action;
+import hudson.model.Item;
 import hudson.security.Permission;
 import hudson.util.HttpResponses;
 import hudson.util.RunList;
@@ -40,17 +41,28 @@ public boolean isBuildable() {
     }
 
     public Permission getPermission() {
-        return target.BUILD;
+        return Item.BUILD;
     }
 
     public Permission getConfigurePermission() {
-        return target.CONFIGURE;
+        return Item.CONFIGURE;
     }
 
+    @SuppressWarnings("unused")
     public boolean isShowGraphOnJobPage() {
         return PipelineGraphViewConfiguration.get().isShowGraphOnJobPage();
     }
 
+    @SuppressWarnings("unused")
+    public boolean isShowStageNames() {
+        return PipelineGraphViewConfiguration.get().isShowStageNames();
+    }
+
+    @SuppressWarnings("unused")
+    public boolean isShowStageDurations() {
+        return PipelineGraphViewConfiguration.get().isShowStageDurations();
+    }
+
     @GET
     @WebMethod(name = "tree")
     public HttpResponse getTree(StaplerRequest2 req) throws JsonProcessingException {

src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewConfiguration/config.jelly

@@ -2,12 +2,20 @@
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
-  <f:section title="${%Pipeline graph view}">
+  <f:section title="${%pipelineStages}">
     <f:entry>
-      <f:checkbox field="showGraphOnJobPage" title="${%Show pipeline graph on job page}" />
+      <f:checkbox field="showGraphOnJobPage" title="${%pipelineStageShowOnPage}" />
     </f:entry>
     <f:entry>
-      <f:checkbox field="showGraphOnBuildPage" title="${%Show pipeline graph on build page}" />
+      <f:checkbox field="showStageNames" title="${%pipelineStageShowStageNames}" />
+    </f:entry>
+    <f:entry>
+      <f:checkbox field="showStageDurations" title="${%pipelineStageShowStageDurations}" />
+    </f:entry>
+  </f:section>
+  <f:section title="${%pipelineGraph}">
+    <f:entry>
+      <f:checkbox field="showGraphOnBuildPage" title="${%pipelineGraphShowOnPage}" />
     </f:entry>
   </f:section>
 </j:jelly>

src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewConfiguration/config.properties

@@ -1,2 +1,6 @@
-Show\ pipeline\ graph\ on\ job\ page=Show pipeline graph on job page
-Show\ pipeline\ graph\ on\ build\ page=Show pipeline graph on build page
+pipelineStages=Pipeline Stages
+pipelineStageShowOnPage=Show pipeline stages on job page
+pipelineStageShowStageNames=Show stage names by default
+pipelineStageShowStageDurations=Show stage durations by default
+pipelineGraph=Pipeline Graph
+pipelineGraphShowOnPage=Show pipeline graph on build page

src/main/resources/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/MultiPipelineGraphViewAction/index.jelly

@@ -24,6 +24,9 @@
       <template data-module="permissions"
                 data-permission-configure="${configPermission}"
       />
+      <template data-module="user-preferences"
+                data-preference-show-stage-names="${it.showStageNames}"
+                data-preference-show-stage-durations="${it.showStageDurations}"/>
 
       <div id="multiple-pipeline-root"
            data-current-job-path="${rootURL + '/' + it.jobUrl}"

src/main/resources/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/MultiPipelineGraphViewAction/jobMain.jelly

@@ -7,6 +7,10 @@
     </j:set>
     <!-- workaround floatingBox elements overlapping until page is reworked -->
     <div class="clearfix" />
+    <template data-module="user-preferences"
+              data-preference-show-stage-names="${it.showStageNames}"
+              data-preference-show-stage-durations="${it.showStageDurations}"/>
+
     <l:card title="${%Stages}" expandable="multi-pipeline-graph" controls="${controls}">
       <div id="multiple-pipeline-root"
            data-current-job-path="${rootURL + '/' + it.jobUrl}"

src/test/java/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewTest.java

@@ -6,6 +6,7 @@
 import io.jenkins.plugins.casc.misc.ConfiguredWithCode;
 import io.jenkins.plugins.casc.misc.JenkinsConfiguredWithCodeRule;
 import io.jenkins.plugins.casc.misc.junit.jupiter.WithJenkinsConfiguredWithCode;
+import io.jenkins.plugins.pipelinegraphview.playwright.ManageAppearancePage;
 import io.jenkins.plugins.pipelinegraphview.playwright.PipelineJobPage;
 import io.jenkins.plugins.pipelinegraphview.playwright.PlaywrightConfig;
 import io.jenkins.plugins.pipelinegraphview.utils.PipelineState;
@@ -27,11 +28,19 @@ class PipelineGraphViewTest {
     // http://localhost:8080/jenkins
 
     @Test
-    @ConfiguredWithCode("configure-appearance.yml")
     void smokeTest(Page p, JenkinsConfiguredWithCodeRule j) throws Exception {
         String name = "Integration Tests";
         WorkflowRun run = TestUtils.createAndRunJob(j, name, "smokeTest.jenkinsfile", Result.FAILURE);
 
+        new ManageAppearancePage(p, j.jenkins.getRootUrl())
+                .goTo()
+                .displayPipelineOnBuildPage()
+                .displayPipelineOnJobPage()
+                .setPipelineGraphAsConsoleProvider()
+                .displayNamesOnStageViewByDefault()
+                .displayDurationsOnStageViewByDefault()
+                .save();
+
         new PipelineJobPage(p, run.getParent())
                 .goTo()
                 .hasBuilds(1)

src/test/java/io/jenkins/plugins/pipelinegraphview/playwright/ManageAppearancePage.java

@@ -11,22 +11,22 @@
 public class ManageAppearancePage extends JenkinsPage<ManageAppearancePage> {
 
     private static final Logger log = LoggerFactory.getLogger(ManageAppearancePage.class);
-    private final String baseUrl;
+    private final String manageUrl;
 
     public ManageAppearancePage(Page page, String baseUrl) {
         super(page, baseUrl + "manage/appearance/");
-        this.baseUrl = baseUrl;
+        this.manageUrl = baseUrl + "manage/";
     }
 
     public ManageAppearancePage displayPipelineOnJobPage() {
-        log.info("Clicking on the 'Show pipeline graph on job' checkbox");
-        page.getByText("Show pipeline graph on job").click();
+        log.info("Clicking on the 'Show pipeline stages on job page' checkbox");
+        page.getByText("Show pipeline stages on job page").click();
         return this;
     }
 
     public ManageAppearancePage displayPipelineOnBuildPage() {
-        log.info("Clicking on the 'Show pipeline graph on build' checkbox");
-        page.getByText("Show pipeline graph on build").click();
+        log.info("Clicking on the 'Show pipeline graph on build page' checkbox");
+        page.getByText("Show pipeline graph on build page").click();
         return this;
     }
 
@@ -39,12 +39,24 @@ public ManageAppearancePage setPipelineGraphAsConsoleProvider() {
         return this;
     }
 
+    public ManageAppearancePage displayNamesOnStageViewByDefault() {
+        log.info("Clicking on the 'Display names on stage view by default' checkbox");
+        page.getByText("Show stage names by default").click();
+        return this;
+    }
+
+    public ManageAppearancePage displayDurationsOnStageViewByDefault() {
+        log.info("Clicking on the 'Display durations on stage view by default' checkbox");
+        page.getByText("Show stage durations by default").click();
+        return this;
+    }
+
     public void save() {
         log.info("Saving the changes");
         Locator button = page.getByRole(
                 AriaRole.BUTTON, new Page.GetByRoleOptions().setExact(true).setName("Save"));
         assertThat(button).isEnabled();
         button.click();
-        isAtUrl(this.baseUrl + "manage/");
+        isAtUrl(this.manageUrl);
     }
 }