#662: Added ability to filter by coverage in Html reports

src/AngularComponents/package.json

@@ -9,6 +9,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-slider/ngx-slider": "^17.0.2",
     "@angular/animations": "^17.3.8",
     "@angular/common": "^17.3.8",
     "@angular/compiler": "^17.3.8",
@@ -28,4 +29,4 @@
     "@types/node": "^12.11.1",
     "typescript": "~5.2.2"
   }
-}
+}

src/AngularComponents/src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { NgxSliderModule } from "@angular-slider/ngx-slider";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
@@ -24,7 +25,8 @@ import { WindowRefService } from "./infrastructure/windowref.service";
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    NgxSliderModule
   ],
   providers: [WindowRefService],
   bootstrap: [RiskHotspotsComponent, CoverageInfoComponent]

src/AngularComponents/src/app/components/coverageinfo/coverage-info.component.ts

@@ -1,3 +1,4 @@
+import { Options } from "@angular-slider/ngx-slider";
 import { Component, HostListener } from "@angular/core";
 import { WindowRefService } from "../../infrastructure/windowref.service";
 import { GlobalHistoryState } from "../globalhistorystate";
@@ -72,15 +73,8 @@ import { Helper } from "./viewmodels/helper.class";
           </div>
         </ng-container>
       </div>
-      <div class="col-right">
-        <div>
+      <div class="col-right right">
           <button type="button" (click)="popupVisible=true;"><i class="icon-cog"></i>{{ metrics.length > 0 ? translations.selectCoverageTypesAndMetrics :  translations.selectCoverageTypes}}</button>
-        </div>
-        <br/>
-        <div>
-          <span>{{translations.filter}} </span>
-          <input type="text" [(ngModel)]="settings.filter" />
-        </div>
       </div>
     </div>
 
@@ -112,6 +106,21 @@ import { Helper } from "./viewmodels/helper.class";
             <th class="center" colspan="4" *ngIf="methodCoverageAvailable && settings.showMethodCoverage">{{translations.methodCoverage}}</th>
             <th class="center" [attr.colspan]="settings.visibleMetrics.length" *ngIf="settings.visibleMetrics.length > 0">{{translations.metrics}}</th>
           </tr>
+          <tr class="filterbar">
+            <td>
+              <input type="text" [(ngModel)]="settings.filter" placeholder="{{translations.filter}}" />
+            </td>
+            <td class="center" colspan="6" *ngIf="settings.showLineCoverage">
+              <ngx-slider [(value)]="settings.lineCoverageMin" [(highValue)]="settings.lineCoverageMax" [options]="sliderOptions"></ngx-slider>
+            </td>
+            <td class="center" colspan="4" *ngIf="branchCoverageAvailable && settings.showBranchCoverage">
+              <ngx-slider [(value)]="settings.branchCoverageMin" [(highValue)]="settings.branchCoverageMax" [options]="sliderOptions"></ngx-slider>
+            </td>
+            <td class="center" colspan="4" *ngIf="methodCoverageAvailable && settings.showMethodCoverage">
+              <ngx-slider [(value)]="settings.methodCoverageMin" [(highValue)]="settings.methodCoverageMax" [options]="sliderOptions"></ngx-slider>
+            </td>
+            <td class="center" [attr.colspan]="settings.visibleMetrics.length" *ngIf="settings.visibleMetrics.length > 0"></td>
+          </tr>
           <tr>
             <th><a href="#" (click)="updateSorting('name', $event)"><i class="icon-down-dir"
               [ngClass]="{'icon-up-dir_active': settings.sortBy === 'name' && settings.sortOrder === 'desc',
@@ -174,7 +183,7 @@ import { Helper } from "./viewmodels/helper.class";
         </thead>
         <tbody>
           <ng-container *ngFor="let element of codeElements">
-            <tr *ngIf="element.visible(settings.filter, settings.historyComparisionType)"
+            <tr *ngIf="element.visible(settings)"
               codeelement-row
               [element]="element"
               [collapsed]="element.collapsed"
@@ -185,7 +194,7 @@ import { Helper } from "./viewmodels/helper.class";
             </tr>
             <ng-container *ngFor="let clazz of element.classes">
               <tr *ngIf="!element.collapsed
-                && clazz.visible(settings.filter, settings.historyComparisionType)"
+                && clazz.visible(settings)"
                 class-row [clazz]="clazz"
                   [translations]="translations"
                   [lineCoverageAvailable]="settings.showLineCoverage"
@@ -197,7 +206,7 @@ import { Helper } from "./viewmodels/helper.class";
             </ng-container>
             <ng-container *ngFor="let subElement of element.subElements">
               <ng-container *ngIf="!element.collapsed
-                && subElement.visible(settings.filter, settings.historyComparisionType)">
+                && subElement.visible(settings)">
                <tr class="namespace"
                  codeelement-row
                  [element]="subElement"
@@ -209,7 +218,7 @@ import { Helper } from "./viewmodels/helper.class";
                 </tr>
                 <ng-container *ngFor="let clazz of subElement.classes">
                   <tr class="namespace" *ngIf="!subElement.collapsed
-                   && clazz.visible(settings.filter, settings.historyComparisionType)"
+                   && clazz.visible(settings)"
                    class-row [clazz]="clazz"
                     [translations]="translations"
                     [lineCoverageAvailable]="settings.showLineCoverage"
@@ -242,6 +251,14 @@ export class CoverageInfoComponent {
 
   settings: CoverageInfoSettings = new CoverageInfoSettings();
 
+  sliderOptions: Options = {
+    floor: 0,
+    ceil: 100,
+    step: 1,
+    ticksArray: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+    showTicks: true
+  };
+
   constructor(
     windowRef: WindowRefService) {
         this.window = windowRef.nativeWindow;

src/AngularComponents/src/app/components/coverageinfo/data/coverageinfo-settings.class.ts

@@ -10,7 +10,14 @@ export class CoverageInfoSettings {
     grouping: number = 0;
     historyComparisionDate: string = "";
     historyComparisionType: string = "";
+
     filter: string = "";
+    lineCoverageMin: number = 0;
+    lineCoverageMax: number = 100;
+    branchCoverageMin: number = 0;
+    branchCoverageMax: number = 100;
+    methodCoverageMin: number = 0;
+    methodCoverageMax: number = 100;
 
     sortBy: string = "name";
     sortOrder: string = "asc";

src/AngularComponents/src/app/components/coverageinfo/viewmodels/class-viewmodel.class.ts

@@ -1,4 +1,5 @@
 import { Class } from "../data/class.class";
+import { CoverageInfoSettings } from "../data/coverageinfo-settings.class";
 import { HistoricCoverage } from "../data/historic-coverage.class";
 import { ElementBase } from "./elementbase.class";
 import { Helper } from "./helper.class";
@@ -50,16 +51,43 @@ export class ClassViewModel extends ElementBase {
         return Helper.roundNumber(100 * this.coveredLines / this.coverableLines);
     }
 
-    visible(filter: string, historicCoverageFilter: string): boolean {
-        if (filter !== "" && this.name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
+    visible(settings: CoverageInfoSettings): boolean {
+        if (settings.filter !== "" && this.name.toLowerCase().indexOf(settings.filter.toLowerCase()) === -1) {
             return false;
         }
 
-        if (historicCoverageFilter === "" || this.currentHistoricCoverage === null) {
+        let coverageMin = this.coverage;
+        let coverageMax = coverageMin;
+        coverageMin = Number.isNaN(coverageMin) ? 0 : coverageMin;
+        coverageMax = Number.isNaN(coverageMax) ? 100 : coverageMax;
+
+        if (settings.lineCoverageMin > coverageMin || settings.lineCoverageMax < coverageMax) {
+            return false;
+        }
+
+        let branchCoverageMin = this.branchCoverage;
+        let branchCoverageMax = branchCoverageMin;
+        branchCoverageMin = Number.isNaN(branchCoverageMin) ? 0 : branchCoverageMin;
+        branchCoverageMax = Number.isNaN(branchCoverageMax) ? 100 : branchCoverageMax;
+
+        if (settings.branchCoverageMin > branchCoverageMin || settings.branchCoverageMax < branchCoverageMax) {
+            return false;
+        }
+
+        let methodCoverageMin = this.methodCoverage;
+        let methodCoverageMax = methodCoverageMin;
+        methodCoverageMin = Number.isNaN(methodCoverageMin) ? 0 : methodCoverageMin;
+        methodCoverageMax = Number.isNaN(methodCoverageMax) ? 100 : methodCoverageMax;
+
+        if (settings.methodCoverageMin > methodCoverageMin || settings.methodCoverageMax < methodCoverageMax) {
+            return false;
+        }
+
+        if (settings.historyComparisionType === "" || this.currentHistoricCoverage === null) {
             return true;
         }
 
-        if (historicCoverageFilter === "allChanges") {
+        if (settings.historyComparisionType === "allChanges") {
             if (this.coveredLines === this.currentHistoricCoverage.cl
                 && this.uncoveredLines === this.currentHistoricCoverage.ucl
                 && this.coverableLines === this.currentHistoricCoverage.cal
@@ -70,32 +98,32 @@ export class ClassViewModel extends ElementBase {
                 && this.totalMethods === this.currentHistoricCoverage.tm) {
                 return false;
             }
-        } else if (historicCoverageFilter === "lineCoverageIncreaseOnly") {
+        } else if (settings.historyComparisionType === "lineCoverageIncreaseOnly") {
             let coverage: number = this.coverage;
             if (isNaN(coverage) || coverage <= this.currentHistoricCoverage.lcq) {
                 return false;
             }
-        } else if (historicCoverageFilter === "lineCoverageDecreaseOnly") {
+        } else if (settings.historyComparisionType === "lineCoverageDecreaseOnly") {
             let coverage: number = this.coverage;
             if (isNaN(coverage) || coverage >= this.currentHistoricCoverage.lcq) {
                 return false;
             }
-        } else if (historicCoverageFilter === "branchCoverageIncreaseOnly") {
+        } else if (settings.historyComparisionType === "branchCoverageIncreaseOnly") {
             let branchCoverage: number = this.branchCoverage;
             if (isNaN(branchCoverage) || branchCoverage <= this.currentHistoricCoverage.bcq) {
                 return false;
             }
-        } else if (historicCoverageFilter === "branchCoverageDecreaseOnly") {
+        } else if (settings.historyComparisionType === "branchCoverageDecreaseOnly") {
             let branchCoverage: number = this.branchCoverage;
             if (isNaN(branchCoverage) || branchCoverage >= this.currentHistoricCoverage.bcq) {
                 return false;
             }
-        } else if (historicCoverageFilter === "methodCoverageIncreaseOnly") {
+        } else if (settings.historyComparisionType === "methodCoverageIncreaseOnly") {
             let methodCoverage: number = this.methodCoverage;
             if (isNaN(methodCoverage) || methodCoverage <= this.currentHistoricCoverage.mcq) {
                 return false;
             }
-        } else if (historicCoverageFilter === "methodCoverageDecreaseOnly") {
+        } else if (settings.historyComparisionType === "methodCoverageDecreaseOnly") {
             let methodCoverage: number = this.methodCoverage;
             if (isNaN(methodCoverage) || methodCoverage >= this.currentHistoricCoverage.mcq) {
                 return false;

src/AngularComponents/src/app/components/coverageinfo/viewmodels/codelement-viewmodel.class.ts

@@ -1,3 +1,4 @@
+import { CoverageInfoSettings } from "../data/coverageinfo-settings.class";
 import { ClassViewModel } from "./class-viewmodel.class";
 import { ElementBase } from "./elementbase.class";
 import { Helper } from "./helper.class";
@@ -17,19 +18,19 @@ export class CodeElementViewModel extends ElementBase {
             this.collapsed = name.indexOf("Test") > -1 && parent === null;
     }
 
-    visible(filter: string, historicCoverageFilter: string): boolean {
-        if (filter !== "" && this.name.toLowerCase().indexOf(filter.toLowerCase()) > -1) {
+    visible(settings: CoverageInfoSettings): boolean {
+        if (settings.filter !== "" && this.name.toLowerCase().indexOf(settings.filter.toLowerCase()) > -1) {
             return true;
         }
 
         for (let i: number = 0; i < this.subElements.length; i++) {
-            if (this.subElements[i].visible(filter, historicCoverageFilter)) {
+            if (this.subElements[i].visible(settings)) {
                 return true;
             }
         }
 
         for (let i: number = 0; i < this.classes.length; i++) {
-            if (this.classes[i].visible(filter, historicCoverageFilter)) {
+            if (this.classes[i].visible(settings)) {
                 return true;
             }
         }

src/AngularComponents/src/app/components/coverageinfo/viewmodels/elementbase.class.ts

@@ -1,3 +1,4 @@
+import { CoverageInfoSettings } from "../data/coverageinfo-settings.class";
 import { Helper } from "./helper.class";
 
 export abstract class ElementBase {
@@ -86,7 +87,7 @@ export abstract class ElementBase {
         return this.coveredMethods + "/" + this.totalMethods;
     }
 
-    abstract visible(filter: string, historicCoverageFilter: string): boolean;
+    abstract visible(settings: CoverageInfoSettings): boolean;
 
     abstract updateCurrentHistoricCoverage(historyComparisionDate: string): void;
 }