Integrated refactorings and fixes from PR#90.

Main changes: - show details for issues - show first tab if persisted tab is not available - use a single CSS file for all customizations - use data attributes rather than invisible elements See #90 Integrates the changes of commits: - 4c50f53 - c91d3ae - 1fa248e
jenkinsci · Feb 13, 2018 · 3b270bd · 3b270bd
1 parent fcf42e4
commit 3b270bd
Show file tree

Hide file tree

Showing 17 changed files with 211 additions and 877 deletions.
diff --git a/src/main/java/io/jenkins/plugins/analysis/core/model/DefaultLabelProvider.java b/src/main/java/io/jenkins/plugins/analysis/core/model/DefaultLabelProvider.java
@@ -4,6 +4,7 @@
 import java.util.function.Function;
 
 import org.apache.commons.lang.StringUtils;
+import org.apache.commons.text.StringEscapeUtils;
 
 import edu.hm.hafner.analysis.IntegerParser;
 import edu.hm.hafner.analysis.Issue;
@@ -67,6 +68,7 @@ public DefaultLabelProvider() {
     @Override
     public String[] getTableHeaders() {
         return new String[] {
+                Messages.Table_Column_Details(),
                 Messages.Table_Column_File(),
                 Messages.Table_Column_Package(),
                 Messages.Table_Column_Category(),
@@ -78,7 +80,7 @@ public String[] getTableHeaders() {
 
     @Override
     public int[] getTableWidths() {
-        return new int[] {1, 2, 1, 1, 1, 1};
+        return new int[] {1, 1, 2, 1, 1, 1, 1};
     }
 
     @Override
@@ -94,6 +96,8 @@ public JSONObject toJsonArray(final Issues<Issue> issues, final AgeBuilder ageBu
 
     protected JSONArray toJson(final Issue issue, final AgeBuilder ageBuilder) {
         JSONArray columns = new JSONArray();
+        columns.add(String.format("<div class=\"details-control\" data-description=\"%s\"/>",
+                StringEscapeUtils.escapeHtml4(getDescription(issue))));
         columns.add(formatFileName(issue));
         columns.add(formatProperty("packageName", issue.getPackageName()));
         columns.add(formatProperty("category", issue.getCategory()));

diff --git a/src/main/java/io/jenkins/plugins/analysis/core/views/IssuesDetail.java b/src/main/java/io/jenkins/plugins/analysis/core/views/IssuesDetail.java
@@ -74,6 +74,8 @@ public StaticAnalysisLabelProvider getLabelProvider() {
         return labelProvider;
     }
 
+    // FIXME: use labelProvider directly in jelly file
+
     @SuppressWarnings("unused") // Called by jelly view
     public String[] getTableHeaders() {
         return labelProvider.getTableHeaders();

diff --git a/src/main/resources/io/jenkins/plugins/analysis/core/model/Messages.properties b/src/main/resources/io/jenkins/plugins/analysis/core/model/Messages.properties
@@ -24,6 +24,7 @@ Result.MultipleFixedWarnings={0} fixed issues
 Result.OneFile=from one analysis.
 Result.MultipleFiles=from {0} analyses.
 
+Table.Column.Details=Details
 Table.Column.Module=Module
 Table.Column.Package=Package
 Table.Column.File=File

diff --git a/src/main/resources/io/jenkins/plugins/analysis/core/views/IssuesDetail/index.jelly b/src/main/resources/io/jenkins/plugins/analysis/core/views/IssuesDetail/index.jelly
@@ -13,7 +13,7 @@
             crossorigin="anonymous"/>
       <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>
 
-      <link rel="stylesheet" href="${resURL}/plugin/analysis-core/css/bootstrap-customized/bootstrap-customized.css"/>
+      <link rel="stylesheet" href="${resURL}/plugin/analysis-core/css/custom-styles/custom-style.css"/>
       <link rel="stylesheet" href="${resURL}/plugin/analysis-core/css/font-awesome470/font-awesome.css"/>
       <link rel="stylesheet" href="${resURL}/plugin/analysis-core/css/material-blue-grey.css"/>
 

diff --git a/src/main/resources/issues/priorities-summary.jelly b/src/main/resources/issues/priorities-summary.jelly
@@ -5,32 +5,19 @@
   </st:documentation>
 
   <div class="col-sm-6">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">${%Priorities}
-          <i class="fa fa fa-bell-o icon-right fa-2x" aria-hidden="true"/>
-        </h5>
+    <div class="card card-marg-bot">
+      <div data-role="page" class="card-body">
 
-        <div style="display: none">
-          <div id="high">
-            <j:if test="${it.issues.highPrioritySize != 0}">
-              <span id="HIGH">${it.issues.highPrioritySize}</span>
-            </j:if>
-          </div>
-          <div id="normal">
-            <j:if test="${it.issues.normalPrioritySize != 0}">
-              <span id="NORMAL">${it.issues.normalPrioritySize}</span>
-            </j:if>
-          </div>
-          <div id="low">
-            <j:if test="${it.issues.lowPrioritySize != 0}">
-              <span id="LOW">${it.issues.lowPrioritySize}</span>
-            </j:if>
-          </div>
-        </div>
+        <!-- data-xxx...: model values for chart -->
+        <h5 id="number-priorities" class="card-title"
+            data-high="${it.issues.highPrioritySize}"
+            data-normal="${it.issues.normalPrioritySize}"
+            data-low="${it.issues.lowPrioritySize}">
+          ${%Priorities}<i class="fa fa fa-bell-o icon-right fa-2x" aria-hidden="true"/>
+        </h5>
 
         <div class="graph-size">
-          <canvas id="doughnut-priorities-summary" class="graph-cursor-pointer" width="100" height="100"/>
+          <canvas id="priorities-chart" class="graph-cursor-pointer" width="100" height="100"/>
         </div>
 
       </div>

diff --git a/src/main/resources/issues/property.jelly b/src/main/resources/issues/property.jelly
@@ -13,7 +13,7 @@
   <div role="tabpanel" id="${property}Content" class="tab-pane">
     <j:set var="l" value="${it.tabLabelProvider}"/>
     <j:set var="t" value="${it.getDetails(property)}"/>
-    <table class="table table-hover table-striped" id="${property}">
+    <table class="table table-hover table-responsive table-striped display" id="${property}">
       <colgroup>
         <col class="col-width-5"/>
         <col class="col-width-1"/>

diff --git a/src/main/resources/issues/table.jelly b/src/main/resources/issues/table.jelly
@@ -24,9 +24,28 @@
 
     <script>
       (function ($) {
-        $('#warnings').DataTable({
-          "order": [],
-          "pagingType": "numbers",
+        var table = $('#warnings').DataTable({
+          'pagingType': 'numbers', // Page number button only
+          'columnDefs': [{
+            'targets': 'no-sort', // Columns with class 'no-sort' are not orderable
+            'orderable': false
+          }]
+        });
+
+        // Add event listener for opening and closing details
+        $('#warnings').on('click', 'div.details-control', function () {
+          var tr = $(this).parents('tr');
+          var row = table.row(tr);
+
+          if (row.child.isShown()) {
+            // This row is already open - close it
+            row.child.hide();
+            tr.removeClass('shown');
+          } else {
+            // Open this row
+            row.child($(this).data('description')).show();
+            tr.addClass('shown');
+          }
         });
       })(jQuery);
 

diff --git a/src/main/resources/issues/trend-summary.jelly b/src/main/resources/issues/trend-summary.jelly
@@ -3,26 +3,23 @@
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
 
   <st:documentation>
-    Renders a doughnut graph showing fixed, new and existing issues.
+    Renders a doughnut graph showing fixed, new and outstanding issues.
   </st:documentation>
 
   <div class="col-sm-6">
-
     <div class="card card-marg-bot">
-      <div class="card-body">
+      <div data-role="page" class="card-body" >
 
-        <h5 class="card-title">${%Trend}
-          <i class="fa fa-line-chart icon-right fa-2x" aria-hidden="true"/>
+        <!-- data-xxx-issues...: model values for chart -->
+        <h5 id="number-issues" class="card-title"
+            data-new-issues="${size(it.newIssues)}"
+            data-fixed-issues="${size(it.fixedIssues)}"
+            data-outstanding-issues="${size(it.outstandingIssues)}">
+          ${%Trend}<i class="fa fa-line-chart icon-right fa-2x" aria-hidden="true"/>
         </h5>
 
-        <div style="display: none">
-          <span id="numberOfNewWarnings">${size(it.newIssues)}</span>
-          <span id="numberOfFixedWarnings">${size(it.fixedIssues)}</span>
-          <span id="numberOfExistingWarnings">${size(it.outstandingIssues)}</span>
-        </div>
-
         <div class="graph-size">
-          <canvas id="doughnut-trend-summary" class="graph-cursor-pointer" width="100" height="100"/>
+          <canvas id="trend-chart" class="graph-cursor-pointer" width="100" height="100"/>
         </div>
       </div>
     </div>

diff --git a/...strap-customized/bootstrap-customized.css → ...webapp/css/custom-styles/custom-style.css b/...strap-customized/bootstrap-customized.css → ...webapp/css/custom-styles/custom-style.css
@@ -1,25 +1,84 @@
-.card-body {
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    padding: 1.25rem;
+/* Table customcColumn widths */
+.col-width-1 {
+    width: 8.333333%;
+}
+
+.col-width-2 {
+    width: 16.666667%;
+}
+
+.col-width-3 {
+    width: 25%;
+}
+
+.col-width-5 {
+    width: 41.66667%;
 }
 
+.col-width-6 {
+    width: 50%;
+}
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+/* DataTables */
+table.dataTable {
+    border-collapse: collapse !important;
+}
+
+/* Change color of active pagination, to fit to the material blue grey css */
 .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
     background-color: #607d8b;
     border-color: #607d8b;
 }
 
+/* Change color of inactive pagination, to fit to the material blue grey css */
 .pagination > li > a, .pagination > li > span {
     color: #607d8b;
 }
 
+/* Change color of active pagination, to fit to the material blue grey css */
 .page-item.active .page-link {
-    z-index: 2;
-    color: #fff;
     background-color: #607d8b;
     border-color: #607d8b;
 }
 
+/* Add padding-top for more space */
+.tab-content > .active {
+    display: block;
+    padding-top: 20px;
+}
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+/* DataTables Details */
+/* Mouse cursor pointer for details icon */
+div.details-control {
+    position: relative;
+    cursor: pointer;
+}
+
+/*Add font awesome plus icon when its closed*/
+div.details-control:before {
+    content: "\f055";
+    font-family: FontAwesome;
+    padding: 12px;
+    font-size: 1.5em;
+    color: #b4b4b4;
+}
+
+/* Add font awesome minus icon when it's opened */
+tr.shown div.details-control:before {
+    content: "\f056";
+    font-family: FontAwesome;
+    padding: 12px;
+    font-size: 1.5em;
+    color: #b4b4b4;
+}
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+/* Font awesome icons float right */
 .icon-right {
     float: right;
     color: #ddd;
@@ -28,20 +87,14 @@
     top: 10px;
 }
 
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+/* Bar graph in table */
 .bar-graph {
     float: left;
     color: transparent;
 }
 
-.left {
-    display: block;
-    float: left;
-    margin-top: 0;
-    position: relative;
-    padding: 0;
-    text-align: left;
-}
-
 .priority-high {
     background-color: #f5c6cb;
 }
@@ -66,69 +119,17 @@
     background-color: #53bdff;
 }
 
-.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
-    vertical-align: middle;
-}
-
-/* Cursor Charts */
-.graph-cursor-pinter {
-    cursor: pointer;
-}
-
-.tab-content > .active {
-    display: block;
-    padding-top: 20px;
-}
-
-table.dataTable {
-    border-collapse: collapse !important;
-}
-
-.col-width-1 {
-    width: 8.333333%;
-}
-
-.col-width-2 {
-    width: 16.666667%;
-}
-
-.col-width-3 {
-    width: 25%;
-}
-
-.col-width-5 {
-    width: 41.66667%;
-}
+/* ------------------------------------------------------------------------------------------------------------------- */
 
-.col-width-6 {
-    width: 50%;
-}
-
-td.details-control {
-    position: relative;
+/* Mouse cursor pointer for clicking on doughnut charts */
+.graph-cursor-pointer {
     cursor: pointer;
 }
 
-td.details-control:before {
-    content: "\f055";
-    font-family: FontAwesome;
-    padding: 12px;
-    font-size: 1.5em;
-    color: #b4b4b4;
-}
-
-tr.shown td.details-control {
-    position: relative;
-}
-
-tr.shown td.details-control:before {
-    content: "\f056";
-    font-family: FontAwesome;
-    padding: 12px;
-    font-size: 1.5em;
-    color: #b4b4b4;
-}
+/* ------------------------------------------------------------------------------------------------------------------- */
 
+/* Responsive classes */
+/* Change graph size to displays with min-width 576px */
 @media only screen and (min-width: 576px) {
     .graph-size {
         position: relative;
@@ -149,4 +150,4 @@ tr.shown td.details-control:before {
     .card-marg-bot {
         margin-bottom: 2rem;
     }
-}
+}