Add start time and duration to job page

jenkinsci · Jun 28, 2024 · 57c58e1 · 57c58e1
1 parent deaf888
commit 57c58e1
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 10 deletions.
diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx
@@ -19,8 +19,9 @@ export const MultiPipelineGraph = () => {
     <table className="jenkins-table sortable">
       <thead>
         <tr>
-          <th className="jenkins-table__cell--tight">id</th>
-          <th data-sort-disable="true">pipeline</th>
+          <th className="jenkins-table__cell">ID</th>
+          <th data-sort-disable="true">Pipeline</th>
+          <th className="jenkins-table__cell">Duration</th>
         </tr>
       </thead>
       <tbody>

diff --git a/...n/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts b/...n/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts
@@ -1,4 +1,7 @@
 export interface RunInfo {
   id: string;
   displayName: string;
+  duration: string;
+  result: string;
+  startTime: string;
 }
diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx
@@ -24,22 +24,26 @@ export const SingleRun: (data: Props) => JSX.Element = ({ run }) => {
   }
 
   const handleNodeClick = (nodeName: string, id: number) => {
-    console.log(nodeName, id);
     let redirect = `../${run.id}/pipeline-console?selected-node=${id}`;
     if (onJobView) {
       redirect = `${run.id}/pipeline-console?selected-node=${id}`;
     }
     window.location.href = redirect;
   };
+
+  const jobStatus = `${run.result.toLowerCase()}`;
+
   return (
     <tr>
       <td>
-        <a
-          href={singleRunPage}
-          className="jenkins-table__link pgw-user-specified-text"
-        >
-          {run.displayName}
-        </a>
+        <div className="PWGx-PipelineGraph-Summary-container">
+          <a href={singleRunPage} className={`PWGx-Link  ${jobStatus}`}>
+            <p>{run.displayName}</p>
+          </a>
+          <div className="PWGx-Start">
+            <span>{run.startTime}</span>
+          </div>
+        </div>
       </td>
       <td>
         <PipelineGraph
@@ -50,6 +54,11 @@ export const SingleRun: (data: Props) => JSX.Element = ({ run }) => {
           collapsed={true}
         />
       </td>
-    </tr>
+      <td>
+        <div className="PWGx-PipelineGraph-Summary-container">
+          <p className="PWGx-Duration">{jobStatus === 'in_progress' ? 'Running...' : 'Took: ' + run.duration}</p>
+        </div>
+      </td>
+    </tr> 
   );
 };
diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/main.scss b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/main.scss
@@ -17,3 +17,62 @@
     margin-right: auto;
   }
 }
+
+.PWGx-PipelineGraph-Summary-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .PWGx-Link {
+    border-style: solid;
+    border-radius: 12px;
+    border-width: 1px;
+    display: inline-flex;
+    align-items: center;
+    z-index: 3;
+    position: relative;
+    background-color: white;
+    text-decoration: none;
+
+    &.aborted {
+      border-color: var(--text-color-secondary)
+    }
+    &.success {
+      border-color: var(--success-color);
+    }
+    &.failure {
+      border-color: var(--red);
+    }
+
+    p {
+      font-size: var(--font-size-xs);
+      margin: 0px 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px; /* Adjust the max-width as needed */
+    }
+
+    &:hover p {
+      color: var(--link-color--hover);
+      text-decoration: none;
+    }
+  }
+
+  .PWGx-Duration {
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+  }
+
+  .PWGx-Start {
+    background: var(--light-grey);
+    border-radius: 6px;
+    font-size: 11px;
+    padding: 7px;
+    position: relative;
+    text-align: left;
+    top: -0.8em;
+    white-space: nowrap;
+    display: inline-block;
+  }
+}
diff --git a/src/main/java/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/PipelineRun.java b/src/main/java/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/PipelineRun.java
@@ -1,15 +1,33 @@
 package io.jenkins.plugins.pipelinegraphview.multipipelinegraphview;
 
+import hudson.model.Result;
+import hudson.Util;
 import org.jenkinsci.plugins.workflow.job.WorkflowRun;
 
+import java.text.SimpleDateFormat;
+import java.util.Date;
+import java.util.Locale;
+import java.util.TimeZone;
+
 public class PipelineRun {
 
     private String id;
     private String displayName;
+    private String duration;
+    private String result;
+    private String startTime;
 
     public PipelineRun(WorkflowRun run) {
         this.id = run.getId();
         this.displayName = run.getDisplayName();
+        this.duration = Util.getTimeSpanString(run.getDuration());
+
+        Result buildResult = run.getResult();
+        this.result = (buildResult != null) ? buildResult.toString() : "IN_PROGRESS";
+
+        SimpleDateFormat sdf = new SimpleDateFormat("MMM dd, yyyy, hh:mm a", Locale.getDefault());
+        sdf.setTimeZone(TimeZone.getDefault());
+        this.startTime = sdf.format(new Date(run.getStartTimeInMillis()));
     }
 
     public String getId() {
@@ -19,4 +37,16 @@ public String getId() {
     public String getDisplayName() {
         return displayName;
     }
+
+    public String getDuration() {
+        return duration;
+    }
+
+    public String getResult() {
+        return result;
+    }
+
+    public String getStartTime() {
+        return startTime;
+    }
 }