More

janfaracik · Feb 29, 2024 · d9513e8 · d9513e8
1 parent bb2b9a4
commit d9513e8
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 160 deletions.
diff --git a/core/src/main/java/jenkins/widgets/BuildTimeTrend.java b/core/src/main/java/jenkins/widgets/BuildTimeTrend.java
@@ -28,6 +28,7 @@
 import hudson.model.BallColor;
 import hudson.model.Node;
 import hudson.model.Run;
+import java.util.List;
 import jenkins.console.ConsoleUrlProvider;
 import jenkins.model.Jenkins;
 import net.sf.json.JSONObject;
@@ -64,4 +65,51 @@ public class BuildTimeTrend extends RunListProgressiveRendering {
         }
     }
 
+    public static class SwagCard {
+        private final String symbol;
+
+        private final String label;
+
+        private final String value;
+
+        private String url;
+
+        public SwagCard(String symbol, String label, String value) {
+            this.symbol = symbol;
+            this.label = label;
+            this.value = value;
+        }
+
+        public SwagCard(String symbol, String label, String value, String url) {
+            this.symbol = symbol;
+            this.label = label;
+            this.value = value;
+            this.url = url;
+        }
+
+        public String getSymbol() {
+            return symbol;
+        }
+
+        public String getLabel() {
+            return label;
+        }
+
+        public String getValue() {
+            return value;
+        }
+
+        public String getUrl() {
+            return url;
+        }
+    }
+
+    public List<SwagCard> getSwagCards() {
+        return List.of(
+                new SwagCard("symbol-timer", "Average time", "8418ms"),
+                new SwagCard("symbol-play", "Last completed", "10 mins ago", "/"),
+                new SwagCard("symbol-status-blue", "Last successful", "#118", "/"),
+                new SwagCard("symbol-status-red", "Last failed", "#74", "/")
+        );
+    }
 }
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
@@ -25,11 +25,14 @@ THE SOFTWARE.
 
 <!-- Displays the chart that show how long builds are taking -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:x="jelly:xml">
   <l:layout title="${%title(it.displayName)}" type="one-column">
     <l:breadcrumb title="${%Builds}" />
 
     <l:main-panel>
+      <j:new var="handler" className="jenkins.widgets.BuildTimeTrend"/>
+      ${handler.setBuilds(it.builds)}
+
       <template id="jenkins-build-status-icons">
         <l:icon src="symbol-status-blue" id="blue" />
         <l:icon src="symbol-status-yellow" id="yellow" />
@@ -46,64 +49,37 @@ THE SOFTWARE.
         <l:icon src="symbol-status-disabled-anime" id="disabled-anime" />
       </template>
 
-      <div class="jenkins-app-bar">
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
           <div class="jenkins-app-bar__content">
-              <h1>${%Builds} <span class="aasda">${it.builds.size()}</span></h1>
+              <h1>${%Builds} <span class="jenkins-app-bar__subtitle">${it.builds.size()}</span></h1>
           </div>
           <div class="jenkins-app-bar__controls">
               <l:search-bar id="search-bar-builds" />
           </div>
       </div>
 
-    <script src="${resURL}/jsbundles/pages/project/builds.js" type="text/javascript" />
-
-<!--      <j:set var="job" value="${it}" />-->
-<!--      <j:forEach var="p" items="${it.permalinks}">-->
-<!--        <st:include page="link.jelly" it="${p}" />-->
-<!--      </j:forEach>-->
+      <script src="${resURL}/jsbundles/pages/project/builds.js" type="text/javascript" />
 
       <div class="abouttodays">
-        <div class="iteem  iteem--time">
-<!--          <span class="backplate"></span>-->
-          <l:icon src="symbol-timer" />
-          <div>Average time</div>
-          <div>
-            ${it.estimatedDuration}ms
-          </div>
-        </div>
-        <div class="iteem iteem--time">
-<!--          <span class="backplate"></span>-->
-          <l:icon src="symbol-check" />
-          <div>Average time</div>
-          <div>
-            ${it.estimatedDuration}ms
-          </div>
-        </div>
-        <a class="iteem iteem--success">
-<!--          <span class="backplate"></span>-->
-          <l:icon src="symbol-status-blue" />
-          <div>Last successful</div>
-          <div>
-            #123
-          </div>
-        </a>
-        <a class="iteem iteem--failed">
-<!--          <span class="backplate"></span>-->
-          <l:icon src="symbol-status-red" />
-          <div>Last failed</div>
-          <div>
-            #74
-          </div>
-        </a>
+        <j:forEach var="card" items="${handler.swagCards}">
+          <x:element name="${card.url != null ? 'a' : 'div'}">
+            <x:attribute name="class">iteem</x:attribute>
+            <x:attribute name="href">${card.url}</x:attribute>
+
+            <l:icon src="${card.symbol}" />
+            <div>${card.label}</div>
+            <div>
+              ${card.value}
+            </div>
+          </x:element>
+        </j:forEach>
       </div>
 
       <div class="canvaas">
         <canvas id="myChart" data-labels="${it.swag.labels}" data-values="${it.swag.values}"></canvas>
       </div>
 
       <j:set var="isDistributedBuildEnabled" value="${!empty(app.nodes)}"/>
-      <j:new var="handler" className="jenkins.widgets.BuildTimeTrend"/>
-      ${handler.setBuilds(it.builds)}
       <l:progressiveRendering handler="${handler}" callback="buildTimeTrend_displayBuilds"/>
       <table class="jenkins-table sortable" id="trend"
              data-is-distributed-build-enabled="${isDistributedBuildEnabled}">

diff --git a/war/src/main/js/components/graph/index.js b/war/src/main/js/components/graph/index.js
@@ -1,4 +1,3 @@
-// import Jumplists from "@/components/dropdowns/jumplists";
 import Chart from "chart.js/auto";
 
 function init() {
@@ -23,6 +22,9 @@ function init() {
     return getComputedStyle(ctx).getPropertyValue("--" + color);
   };
 
+  Chart.defaults.font.weight = 500;
+  Chart.defaults.color = textColor;
+
   new Chart(ctx, {
     type: "line",
     data: {
@@ -62,9 +64,6 @@ function init() {
           grid: {
             drawOnChartArea: false,
           },
-          ticks: {
-            color: textColor,
-          },
         },
         y: {
           border: {
@@ -73,9 +72,6 @@ function init() {
           grid: {
             drawOnChartArea: false,
           },
-          ticks: {
-            color: textColor,
-          },
         },
       },
     },

diff --git a/war/src/main/js/pages/project/builds/index.js b/war/src/main/js/pages/project/builds/index.js
@@ -24,8 +24,6 @@ window.buildTimeTrend_displayBuilds = function (data) {
     "true" === p.getAttribute("data-is-distributed-build-enabled");
   const rootURL = document.head.getAttribute("data-rooturl");
 
-  console.log(data);
-
   data.forEach((item) => {
     let distributedBuildColumn = ``;
 

diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
@@ -1207,111 +1207,3 @@ svg.icon-xlg {
 }
 
 /* -------------------------------------- */
-
-.canvaas,
-.iteem {
-  background: var(--card-background);
-}
-
-.canvaas {
-  padding: 1.5rem 1rem;
-  border-radius: 0.75rem;
-  margin-bottom: 1rem;
-  border: var(--card-border-width) solid var(--card-border-color);
-
-  canvas {
-    max-height: 350px;
-  }
-}
-
-.aasda {
-  color: var(--text-color-secondary);
-  margin-left: 0.5ch;
-}
-
-.abouttodays {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  gap: 1rem;
-  margin-bottom: 1rem;
-
-  a.iteem {
-    cursor: pointer;
-    text-decoration: none !important;
-  }
-
-  .iteem {
-    position: relative;
-    padding: 1rem 1.2rem;
-    border-radius: 0.75rem;
-    font-size: 1.2rem;
-    font-weight: 550;
-    overflow: hidden;
-    aspect-ratio: 20 / 10;
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    line-height: 1;
-    gap: 0.625rem;
-
-    .backplate {
-      position: absolute;
-      inset: 0;
-      mask-image: radial-gradient(at top right, white, transparent 70%);
-      opacity: 0.2;
-
-      &::before {
-        content: "";
-        position: absolute;
-        z-index: 0;
-        inset: -400px;
-        pointer-events: none;
-        mask-size: 2rem;
-        //rotate: 45deg;
-        background: var(--text-color-secondary);
-        mask-image: var(--card-symbol);
-      }
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      pointer-events: none;
-      border: var(--card-border-width) solid var(--card-border-color);
-      border-radius: inherit;
-    }
-
-    svg {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &--time {
-      --card-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M112.91 128A191.85 191.85 0 0064 254c-1.18 106.35 85.65 193.8 192 194 106.2.2 192-85.83 192-192 0-104.54-83.55-189.61-187.5-192a4.36 4.36 0 00-4.5 4.37V152' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M233.38 278.63l-79-113a8.13 8.13 0 0111.32-11.32l113 79a32.5 32.5 0 01-37.25 53.26 33.21 33.21 0 01-8.07-7.94z'/%3E%3C/svg%3E");
-    }
-
-    &--success {
-      --card-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M352 176L217.6 336 160 272'/%3E%3C/svg%3E");
-      --card-color: var(--green);
-    }
-
-    &--failed {
-      --card-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368'/%3E%3C/svg%3E");
-      //--card-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M352 176L217.6 336 160 272'/%3E%3C/svg%3E");
-      --card-color: var(--red);
-    }
-
-    div:first-of-type {
-      color: var(--text-color-secondary);
-    }
-  }
-}
-//
-//@keyframes blurin {
-//  from {
-//    scale: 0.9;
-//    filter: blur(10px);
-//  }
-//}
diff --git a/war/src/main/scss/components/_app-bar.scss b/war/src/main/scss/components/_app-bar.scss
@@ -69,6 +69,11 @@
     margin: 0;
     font-size: 1.5rem;
   }
+
+  &__subtitle {
+    color: var(--text-color-secondary);
+    margin-left: 0.5ch;
+  }
 }
 
 .jenkins-build-caption {

diff --git a/war/src/main/scss/pages/_index.scss b/war/src/main/scss/pages/_index.scss
@@ -3,5 +3,6 @@
 @use "icon-legend";
 @use "manage-jenkins";
 @use "plugin-manager";
+@use "project";
 @use "setupWizardFirstUser";
 @use "setupWizardConfigureInstance";