Improving webview of plugin scores (#501)

jenkins-infra · Apr 5, 2024 · b5fff0c · b5fff0c
1 parent 261c7d2
commit b5fff0c
Show file tree

Hide file tree

Showing 5 changed files with 640 additions and 537 deletions.
diff --git a/war/package.json b/war/package.json
@@ -8,23 +8,23 @@
     "dev": "webpack --config webpack.config.js --watch --mode=development"
   },
   "devDependencies": {
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^4.2.2",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.0",
-    "mini-css-extract-plugin": "^2.7.2",
-    "path": "^0.12.7",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-remove-empty-scripts": "^1.0.1"
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "12.0.2",
+    "css-loader": "6.11.0",
+    "css-minimizer-webpack-plugin": "6.0.0",
+    "less": "4.2.0",
+    "less-loader": "12.2.0",
+    "mini-css-extract-plugin": "2.8.1",
+    "path": "0.12.7",
+    "postcss": "8.4.38",
+    "postcss-loader": "8.1.1",
+    "style-loader": "3.3.4",
+    "webpack": "5.91.0",
+    "webpack-cli": "5.1.4",
+    "webpack-remove-empty-scripts": "1.0.4"
   },
   "dependencies": {
-    "ionicons": "^6.1.3"
+    "ionicons": "7.3.1"
   },
   "browserslist": [
     "defaults",

diff --git a/war/src/main/js/index.js b/war/src/main/js/index.js
@@ -15,18 +15,14 @@ const updateCollapseIcon = (container, target) => {
 
 const triggers = document.getElementsByClassName('collapse')
 for (const trigger of triggers) {
-  const iconContainers = trigger.getElementsByTagName('ion-icon');
+  const iconContainer = trigger.querySelector('ion-icon[data-collapse]');
   const target = document.getElementById(trigger.getAttribute('data-target'));
   if (target != null) {
-    for (const container of iconContainers) {
-      updateCollapseIcon(container, target)
-    }
+    updateCollapseIcon(iconContainer, target)
     trigger.addEventListener('click', e => {
       e.preventDefault();
       target.classList.toggle('show');
-      for (const container of iconContainers) {
-        updateCollapseIcon(container, target)
-      }
+      updateCollapseIcon(iconContainer, target)
     });
   }
 }
diff --git a/war/src/main/less/modules/score.less b/war/src/main/less/modules/score.less
@@ -40,6 +40,9 @@ ion-icon {
     border-radius: 1em;
 
     background-color: var(--light-grey);
+    & > *:not(:first-child) {
+      margin-left: 8px;
+    }
   }
 }
 

diff --git a/war/src/main/resources/templates/scores/details.html b/war/src/main/resources/templates/scores/details.html
@@ -15,11 +15,18 @@ <h1 data-th-utext="'Score of <em>' + ${plugin.name} + '</em> plugin'"></h1>
         </div>
         <div class="plugin--details--tab">
             <ion-icon name="version-tag"></ion-icon>
+            <span>Latest version: </span>
             <span data-th-text="${ plugin.version }"></span>
         </div>
         <div class="plugin--details--tab">
             <ion-icon name="calendar"></ion-icon>
-            <span data-th-text="${ #temporals.format(plugin.releaseTimestamp) }"></span>
+            <span>Last release date:</span>
+            <span data-th-text="${ #temporals.format(plugin.releaseTimestamp, 'yyyy-MM-dd HH:mm', 'UTC') }"></span>
+        </div>
+        <div class="plugin--details--tab">
+            <ion-icon name="calendar"></ion-icon>
+            <span>Last score computation:</span>
+            <span data-th-text="${ #temporals.format(score.computedAt, 'yyyy-MM-dd HH:mm', 'UTC') }"></span>
         </div>
     </div>
 
@@ -31,6 +38,7 @@ <h3>Details</h3>
         <thead>
         <tr>
             <th></th>
+            <th>Status</th>
             <th>Key</th>
             <th>Value</th>
             <th>Weight</th>
@@ -39,7 +47,11 @@ <h3>Details</h3>
         <tbody>
         <th-block data-th-each="scoreDetail: ${score.details}">
             <tr class="collapse" data-th-data-target="'collapse-' + ${scoreDetail.key}">
-                <td><ion-icon name="chevron-expand"></ion-icon></td>
+                <td><ion-icon data-collapse name="chevron-expand"></ion-icon></td>
+                <td>
+                    <ion-icon data-th-if="${scoreDetail.value} == 100" class="success" name="success"></ion-icon>
+                    <ion-icon data-th-unless="${scoreDetail.value} == 100" class="failure" name="failure"></ion-icon>
+                </td>
                 <td><code class="label" data-th-text="${scoreDetail.key}"></code></td>
                 <td align="center" data-th-text="${scoreDetail.value}"></td>
                 <td align="center" data-th-text="${scoreDetail.weight}"></td>
@@ -50,20 +62,33 @@ <h3>Details:</h3>
                     <table class="table">
                         <thead>
                         <tr>
+                            <th></th>
                             <th>Value</th>
                             <th>Weight</th>
                             <th>Message</th>
+                            <th>Help</th>
                         </tr>
                         </thead>
                         <tbody>
                         <tr data-th-each="component : ${scoreDetail.componentsResults}">
+                            <td>
+                                <ion-icon data-th-if="${component.score} == 100" class="success" name="success"></ion-icon>
+                                <ion-icon data-th-unless="${component.score} == 100" class="failure" name="failure"></ion-icon>
+                            </td>
                             <td data-th-text="${component.score}"></td>
                             <td data-th-text="${component.weight}"></td>
                             <td>
                                 <ul>
                                     <li data-th-each="reason: ${component.reasons}" data-th-text="${reason}"/>
                                 </ul>
                             </td>
+                            <td>
+                                <ul>
+                                    <li data-th-each="resolution: ${component.resolutions}">
+                                        <a data-th-href="${resolution.link}" data-th-text="${resolution.text}"></a>
+                                    </li>
+                                </ul>
+                            </td>
                         </tr>
                         </tbody>
                     </table>
@@ -79,17 +104,12 @@ <h3>Probes results</h3>
             <thead>
             <tr>
                 <th>ID</th>
-                <th>Status</th>
                 <th>Message</th>
             </tr>
             </thead>
             <tbody>
             <tr data-th-each="item: ${plugin.details}" data-th-with="probeResult = ${item.value}">
                 <td><code data-th-text="${probeResult.id}" class="label"></code></td>
-                <td>
-                    <ion-icon data-th-if="${probeResult.status.name} == 'SUCCESS'" class="success" name="success"></ion-icon>
-                    <ion-icon data-th-unless="${probeResult.status.name} == 'SUCCESS'" class="failure" name="failure"></ion-icon>
-                </td>
                 <td data-th-text="${probeResult.message}"></td>
             </tr>
             </tbody>