Merge pull request #4616 from noraz31/highlight_outstanding

[feat] Highlight non-compliant rules in the Guideline statistics

Author: bruntib

web/server/vue-cli/src/components/Statistics/Guideline/GuidelineStatistics.vue

@@ -69,9 +69,16 @@
                 </template>
               </v-select>
             </v-col>
+            <v-col cols="6">
+              <v-checkbox
+                v-model="hideNotOutstanding"
+                label="Hide compliant rules"
+                density="comfortable"
+              />
+            </v-col>
           </v-row>
           <guideline-statistics-table
-            :items="statistics"
+            :items="filteredStatistics"
             :loading="loading"
             @enabled-click="showingRuns"
           />
@@ -209,6 +216,7 @@ export default {
       },
       statistics: [],
       type: null,
+      hideNotOutstanding: false,
     };
   },
 
@@ -223,6 +231,15 @@ export default {
       return this.selectedGuidelineIndexes.map(idx => new Guideline({
         guidelineName: this.guidelineOptions[idx].id
       }));
+    },
+
+    filteredStatistics() {
+      if (this.hideNotOutstanding) {
+        return this.statistics.filter(stat =>
+          stat.checkers.some(checker => checker.outstanding > 0)
+        );
+      }
+      return this.statistics;
     }
   },
 

web/server/vue-cli/src/components/Statistics/Guideline/GuidelineStatisticsTable.vue

@@ -4,6 +4,7 @@
     :items="items"
     :loading="loading"
     :mobile-breakpoint="1000"
+    :item-class="getRowClass"
     loading-text="Loading guideline statistics..."
     no-data-text="No guideline statistics available"
     item-key="guidelineRule"
@@ -89,12 +90,18 @@ export default {
   methods: {
     enabledClick(type, checker_name) {
       this.$emit("enabled-click", type, checker_name);
+    },
+
+    getRowClass(item) {
+      const hasOutstanding = item.checkers.some(
+        checker => checker.outstanding > 0);
+      return hasOutstanding ? "highlight-row" : "";
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 $class-name: ".checker-statistics > ::v-deep .v-data-table__wrapper";
 @import "@/components/Statistics/style.scss";
 </style>

web/server/vue-cli/src/components/Statistics/style.scss

@@ -81,3 +81,7 @@ $tr: 'tr:not(.v-data-table__expanded__content)';
     border-bottom: thin solid rgba(0, 0, 0, 0.12);
   }
 }
+
+.highlight-row {
+  background-color: $outstanding-bg-color !important;
+}