595 improved layer upgrade UI workflow (#614)

* review all works

* expand all works

* review based on filter

* minor change

* requested changes added

* improved code functionality

nav-app/src/app/layer-upgrade/layer-upgrade.component.html

@@ -33,8 +33,8 @@ <h2>Layer Upgrade</h2>
             <mat-divider></mat-divider>
 
             <div *ngIf="changelog[section].length > 0">
+                <h4>Filters</h4>
                 <div *ngIf="section !== 'additions'">
-                    <h4>Filters</h4>
                     <input
                         id="filter_{{ section }}"
                         class="checkbox-custom"
@@ -51,14 +51,38 @@ <h4>Filters</h4>
                         show annotated techniques only
                     </label>
                 </div>
+                <input
+                    id="filter_review_all_{{ section }}"
+                    class="checkbox-custom"
+                    type="checkbox"
+                    (change)="reviewAll(section)" />
+                <label
+                    for="filter_review_all_{{ section }}"
+                    class="checkbox-custom-label noselect"
+                    matTooltipPosition="above"
+                    [matTooltip]="'mark all as reviewed'">
+                    mark all as reviewed
+                </label>
+                <input
+                    id="filter_expand_visible_{{ section }}"
+                    class="checkbox-custom"
+                    type="checkbox"
+                    (change)="expandAll(section)" />
+                <label
+                    for="filter_expand_visible_{{ section }}"
+                    class="checkbox-custom-label noselect"
+                    matTooltipPosition="above"
+                    [matTooltip]="'expand visible techniques'">
+                    expand visible techniques
+                </label>
 
                 <div class="spinner" *ngIf="loading">
                     <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
                 </div>
 
                 <ng-container *ngIf="stepper ? section == sections[stepper.selectedIndex] : section == sections[0]">
                     <div class="stepper-content" *ngIf="!loading">
-                        <mat-accordion>
+                        <mat-accordion multi="true">
                             <mat-expansion-panel *ngFor="let attackID of filteredIDs" #panel="matExpansionPanel">
                                 <mat-expansion-panel-header>
                                     <mat-panel-title>
@@ -67,7 +91,6 @@ <h4>Filters</h4>
                                         <span>{{ attackID }}: {{ getTechnique(attackID, viewModel).name }}</span>
                                     </mat-panel-title>
                                 </mat-expansion-panel-header>
-
                                 <ng-template matExpansionPanelContent>
                                     <div class="cols">
                                         <div class="float wide" *ngIf="section !== 'additions'">
@@ -195,7 +218,7 @@ <h4>Filters</h4>
                                             (click)="reviewedChanged(attackID, panel)" />
                                         <label for="review_{{ attackID }}" class="checkbox-custom-label noselect">reviewed</label>
                                     </div>
-                                </ng-template>
+                            </ng-template>
                             </mat-expansion-panel>
                         </mat-accordion>
                     </div>
@@ -206,12 +229,9 @@ <h4>Filters</h4>
             <div *ngIf="changelog[section].length == 0 && !loading">
                 <div class="description center">No objects to show</div>
             </div>
-
             <mat-divider></mat-divider>
-
             <div class="stepper-button">
                 <span *ngIf="changelog[section].length > 0">Reviewed {{ countReviewed(section) }}/{{ sectionLength(section) }} techniques</span>
-
                 <button *ngIf="section !== 'additions'" mat-stroked-button matStepperPrevious (click)="onStepChange(section, -1)">Back</button>
                 <button mat-stroked-button matStepperNext (click)="onStepChange(section, 1)">
                     {{ countReviewed(section) > 0 ? 'Next' : 'Skip' }}

nav-app/src/app/layer-upgrade/layer-upgrade.component.scss

@@ -177,3 +177,6 @@ tr td {
         stroke: on-color-deemphasis(body);
     }
 }
+.mat-icon {
+    overflow: visible;
+}

nav-app/src/app/layer-upgrade/layer-upgrade.component.ts

@@ -16,9 +16,9 @@ import { MatStepper } from '@angular/material/stepper';
 export class LayerUpgradeComponent implements OnInit {
     @Input() viewModel: ViewModel; // view model of new version
     @ViewChildren(MatPaginator) paginators = new QueryList<MatPaginator>();
+    @ViewChildren(MatExpansionPanel) panels: QueryList<MatExpansionPanel>;
     public paginator_map: Map<string, number> = new Map(); // section name mapped to index of paginator
     public filteredIDs: string[] = [];
-
     @ViewChild('stepper') stepper: MatStepper;
 
     public changelog: VersionChangelog;
@@ -100,6 +100,9 @@ export class LayerUpgradeComponent implements OnInit {
         let start = paginator ? paginator.pageIndex * paginator.pageSize : 0;
         let end = paginator ? start + paginator.pageSize : 10;
         this.filteredIDs = sectionIDs.slice(start, end);
+        setTimeout(() => {
+            this.expandAll(section);
+        })
     }
 
     /**
@@ -201,6 +204,40 @@ export class LayerUpgradeComponent implements OnInit {
         }
     }
 
+    /**
+     * Expands all the techniques for easy review
+     */
+    public expandAll(section: string): void {
+        let filtered_expand_visible_section = document.getElementById("filter_expand_visible_"+section) as HTMLInputElement;
+        this.panels.forEach(panel => {
+            if (filtered_expand_visible_section.checked){
+                panel.open();
+            }
+            else{
+                panel.close();
+            }
+        })
+    }
+
+    /**
+     * Marks all techniques in the section as reviewed
+     * @param section name of the changelog section
+     */
+    public reviewAll(section: string): void {
+        let sectionIDs = this.changelog[section];
+        let filtered_review_all_section = document.getElementById("filter_review_all_"+section) as HTMLInputElement;
+        if(filtered_review_all_section.checked){
+            for(let sectionID of sectionIDs){
+                this.changelog.reviewed.add(sectionID);
+            }
+        }
+        else{
+            for(let sectionID of sectionIDs){
+                this.changelog.reviewed.delete(sectionID);
+            }
+        }
+    }
+
     /**
      * Get the number of techniques marked as reviewed in the given section
      * @param section the name of the changelog section