fix(rule-management): removing view rule button, and added that functionality on click a rule

Author: AlexSanchez-bit

frontend/src/app/rule-management/app-rule/components/rule-list/rule-list.component.html

@@ -31,7 +31,7 @@
           <ng-container *ngIf="rules$ | async as rules; else empty">
             <tr *ngFor="let rule of rules; trackBy: trackByFn" class="cursor-pointer">
               <ng-container *ngFor="let field of fields">
-                <td [ngStyle]="{'width': field.width}" *ngIf="(field.visible)">
+                <td [ngStyle]="{'width': field.width}" *ngIf="(field.visible)" (click)="visualizeRule(rule)">
                   <app-rule-field
                     [rule] = "rule"
                     [column] = "field">
@@ -41,19 +41,20 @@
               <td class="td-action">
                 <div class="d-flex justify-content-end align-items-center medium-icon">
 
-                  <i (click)="visualizeRule(rule)"
-                     class="icon-eye cursor-pointer ml-2"
-                     ngbTooltip="View Rule"
-                     container="body"
-                     placement="left"></i>
 
                   <i (click)="activeRule(rule)"
                      class="cursor-pointer ml-2"
                      [ngClass]="{'icon-blocked': rule.ruleActive, 'icon-check2': !rule.ruleActive}"
                      ngbTooltip="{{ !rule.ruleActive ? 'Active' : 'Deactivate' }}"
                      container="body"
+                     *ngIf="!loadingRules.includes(rule.id);else spinner"
                      placement="left"></i>
 
+
+                  <ng-template #spinner >
+                    <i class="icon-spinner2 spinner"></i>
+                  </ng-template>
+
                   <i *ngIf="!rule.systemOwner"
                     (click)="editRule(rule)" class="icon-pencil3 cursor-pointer ml-2"
                      ngbTooltip="Edit"

frontend/src/app/rule-management/app-rule/components/rule-list/rule-list.component.ts

@@ -4,7 +4,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {merge, Observable, of, Subject} from 'rxjs';
-import {catchError, filter, map, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {catchError, filter, map, switchMap, takeUntil, tap, finalize} from 'rxjs/operators';
 import { SortEvent } from 'src/app/shared/directives/sortable/type/sort-event';
 import {UtmToastService} from '../../../../shared/alert/utm-toast.service';
 import {
@@ -50,6 +50,7 @@ export class RuleListComponent implements OnInit, OnDestroy {
   isInitialized = false;
   request = RULE_REQUEST;
   destroy$: Subject<void> = new Subject<void>();
+  loadingRules=[]
 
   constructor(private route: ActivatedRoute,
               private filterService: FilterService,
@@ -153,8 +154,11 @@ export class RuleListComponent implements OnInit, OnDestroy {
       id: rule.id,
       active: !rule.ruleActive
     };
-
-    this.ruleService.activeRule(params)
+    this.loadingRules.push(rule.id)
+    const index = this.loadingRules.length-1
+    this.ruleService.activeRule(params).pipe(
+      finalize(()=>this.loadingRules.splice(index,1))
+    )
       .subscribe(() =>  this.ruleService.notifyRefresh(true),
         () => {
           this.utmToast.showError('Error', 'Error changing rule status');

frontend/src/app/rule-management/share/generic-filter/generic-filter.component.html

@@ -18,7 +18,7 @@
              [infiniteScrollDistance]="1"
              [infiniteScrollThrottle]="80"
              [scrollWindow]="false"
-             class="filter-value-field-container h-100 m-h-0 overflow-auto"
+             class="filter-value-field-container h-100 m-h-0 overflow-scroll"
              infiniteScroll>
             <app-filter [list]="items">
               <ng-template appTemplateSelector let-item let-i>