Progressbar when in state RUNNING

Diabol · Mar 9, 2014 · a31b6d6 · a31b6d6
1 parent 445eae0
commit a31b6d6
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 9 deletions.
diff --git a/src/main/java/se/diabol/jenkins/pipeline/PipelineFactory.java b/src/main/java/se/diabol/jenkins/pipeline/PipelineFactory.java
@@ -319,8 +319,14 @@ protected static Status resolveStatus(AbstractProject project, AbstractBuild bui
         }
 
         if (build.isBuilding()) {
-            return StatusFactory.running((int) round(100.0d * (currentTimeMillis() - build.getTimestamp().getTimeInMillis())
-                    / build.getEstimatedDuration()), build.getTimeInMillis(), currentTimeMillis() - build.getTimestamp().getTimeInMillis());
+            //build.getEstimatedDuration()
+            int progress = (int) round(100.0d * (currentTimeMillis() - build.getTimestamp().getTimeInMillis())
+                                / build.getEstimatedDuration());
+            if (progress > 100) {
+                progress = 99;
+            }
+
+            return StatusFactory.running(progress, build.getTimeInMillis(), currentTimeMillis() - build.getTimestamp().getTimeInMillis());
         }
 
         Result result = build.getResult();

diff --git a/src/main/webapp/pipe-fullscreen.css b/src/main/webapp/pipe-fullscreen.css
@@ -114,6 +114,38 @@ section.stage div.task {
     padding-left: 5px;
 }
 
+
+div.task-progress {
+    position: relative;
+    height: 34px;
+    width: 0;
+    background-color: #0197fe;
+    -webkit-animation-name: bluePulse;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes bluePulse {
+    from { background-color: #0197fe; -webkit-box-shadow: 0 0 9px #333; }
+    50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; }
+    to { background-color: #0197fe; -webkit-box-shadow: 0 0 9px #333; }
+}
+
+div.task-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    margin-left: 2px;
+    margin-top: 2px;
+}
+
+
+div.taskname {
+    position: relative;
+}
+
 section.stage a {
     text-decoration: none;
     color: inherit;
@@ -179,7 +211,6 @@ section.hide {
 }
 
 .RUNNING {
-    background: url("running.gif") no-repeat right;
     border-left: 6px solid #0197fe;
     color: lightgray;
 }

diff --git a/src/main/webapp/pipe.css b/src/main/webapp/pipe.css
@@ -53,15 +53,13 @@ div.changes a:hover {
     text-decoration: underline;
 }
 
-
 div.changes h1 {
     font-size: 14px;
     line-height: 14px;
     padding: 0;
     margin: 0;
 }
 
-
 div.change {
     clear: both;
     padding-left: 5px;
@@ -104,6 +102,30 @@ section.stage div.task {
     padding-left: 5px;
 }
 
+
+div.task-progress {
+    position: relative;
+    height: 30px;
+    width: 0;
+    background-color: lightskyblue;
+    border-radius: 3px;
+}
+
+div.task-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    margin-left: 2px;
+    margin-top: 2px;
+}
+
+
+div.taskname {
+    position: relative;
+}
+
 section.stage a {
     text-decoration: none;
     color: inherit;
@@ -125,7 +147,6 @@ section.stage a:hover {
     float: left;
 }
 
-
 .IDLE {
     border-left: 6px solid #d3d3d3;
 }
@@ -162,7 +183,6 @@ section.stage a:hover {
 }
 
 .RUNNING {
-    background: url("running.gif") no-repeat right;
     border-left: 6px solid #0092ef;
 }
 
@@ -207,6 +227,7 @@ div.pipeline-row {
     display: table-row;
     white-space: nowrap;
 }
+
 div.pipeline-row-spacer {
     white-space: nowrap;
     height: 20px;

diff --git a/src/main/webapp/pipe.js b/src/main/webapp/pipe.js
@@ -135,8 +135,14 @@ function refreshPipelines(data, divNames, errorDiv, view, showAvatars, showChang
 
                         tasks.push({id: id, taskId: task.id, buildId: task.buildId});
 
+                        var progress = 0;
+
+                        if (task.status.percentage) {
+                            progress = task.status.percentage;
+                        }
+
                         html = html + "<div id=\"" + id + "\" class=\"task " + task.status.type +
-                            "\"><div class=\"taskname\"><a href=\"" + task.link + "\">" + task.name + "</a></div>";
+                            "\"><div class=\"task-progress\" style=\"width: " + progress + "%;\"><div class=\"task-content\"><div class=\"taskname\"><a href=\"" + task.link + "\">" + task.name + "</a></div>";
 
                         if (timestamp != "") {
                             html = html + "<span id=\"" + id + ".timestamp\" class='timestamp'>" + timestamp + "</span>"
@@ -145,7 +151,7 @@ function refreshPipelines(data, divNames, errorDiv, view, showAvatars, showChang
                         if (task.status.duration >= 0)
                             html = html + "<span class='duration'>" + formatDuration(task.status.duration) + "</span>";
 
-                        html = html + "</div>"
+                        html = html + "</div></div></div>"
 
                     }
                     html = html + "</section>";