NVSHAS-9869: UI: Move DDoS Controls to Group Pane

Author: xingzhang-suse

admin/webapp/websrc/app/common/services/groups.service.ts

@@ -7,8 +7,10 @@ import { GlobalConstant } from '@common/constants/global.constant';
 import { MapConstant } from '@common/constants/map.constant';
 import { UtilsService } from '@common/utils/app.utils';
 import { parseCamelStyle } from '@common/utils/common.utils';
-import { ActionButtonsComponent } from '@routes/components/groups/partial/action-buttons/action-buttons.component';
-import { ScorableHeaderComponent } from '@routes/components/groups/partial/scorable-header/scorable-header.component';
+import { ActionButtonsComponent } from '@components/groups/partial/action-buttons/action-buttons.component';
+import { ScorableHeaderComponent } from '@components/groups/partial/scorable-header/scorable-header.component';
+import { MonitorMetricHeaderComponent } from '@components/groups/partial/monitor-metric-header/monitor-metric-header.component';
+import { MonitorMetricSwitchComponent } from '@components/groups/partial/monitor-metric-switch/monitor-metric-switch.component';
 import { CustomCheckActionButtonComponent } from '@routes/components/group-details/partial/custom-check-action-button/custom-check-action-button.component';
 import { GroupDlpConfigActionButtonComponent } from '@routes/components/group-details/partial/group-dlp-config-action-button/group-dlp-config-action-button.component';
 import { GroupWafConfigActionButtonComponent } from '@routes/components/group-details/partial/group-waf-config-action-button/group-waf-config-action-button.component';
@@ -234,6 +236,15 @@ export class GroupsService {
         minWidth: 50,
         maxWidth: 50,
       },
+      {
+        headerComponent: MonitorMetricHeaderComponent,
+        field: 'monitor_metric',
+        cellRenderer: MonitorMetricSwitchComponent,
+        width: 50,
+        sortable: false,
+        minWidth: 50,
+        maxWidth: 50,
+      },
       {
         headerName: '',
         cellRenderer: ActionButtonsComponent,

admin/webapp/websrc/app/routes/components/groups/groups.component.ts

@@ -308,7 +308,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.groups = [];
     this.groupsService.getFedGroupsData().subscribe({
       next: groups => {
-        this.renderGroups(groups, true);
+        this.renderGroups(groups, { isHardReloaded: true });
       },
       error: ({ error }: { error: ErrorResponse }) => {},
       complete: () => {
@@ -509,17 +509,19 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.filtered = this.filteredCount !== this.groupsCount;
   }
 
-  private renderGroups = (data, options) => {
+  renderGroups = (data, options) => {
     this.eof = data.length < MapConstant.PAGE.GROUPS;
-    this.groups = this.groups.concat(data);
+    this.groups = options.isHardReloaded ? this.groups.concat(data) : data;
     if (!this.isShowingSystemGroups) {
       this.groups = this.groups.filter(function (item) {
         return !item.platform_role;
       });
     }
     console.log('this.groups', this.groups);
     this.gridApi!.setRowData(this.groups);
-    this.filteredCount = this.groups.length;
+    this.filteredCount = options.isHardReloaded
+      ? this.groups.length
+      : this.filteredCount;
     if (this.eof) this.refreshing.emit(false);
     console.log('this.linkedGroup:', this.linkedGroup);
     setTimeout(() => {
@@ -564,7 +566,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
   private handleError = () => {
     this.groupsErr = true;
-    this.renderGroups([], true);
+    this.renderGroups([], { isHardReloaded: true });
   };
 
   private getModeCounts = () => {

admin/webapp/websrc/app/routes/components/groups/groups.module.ts

@@ -19,6 +19,8 @@ import { RuleDetailModalService } from '@components/groups/partial/rule-detail-m
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ExportOptionsModalModule } from '@components/export-options-modal/export-options-modal.module';
 import { FederatedConfigurationService } from '@services/federated-configuration.service';
+import { MonitorMetricHeaderComponent } from './partial/monitor-metric-header/monitor-metric-header.component';
+import { MonitorMetricSwitchComponent } from './partial/monitor-metric-switch/monitor-metric-switch.component';
 
 @NgModule({
   declarations: [
@@ -30,6 +32,8 @@ import { FederatedConfigurationService } from '@services/federated-configuration
     GroupResponseRulesComponent,
     GroupNetworkRulesComponent,
     RuleDetailModalComponent,
+    MonitorMetricHeaderComponent,
+    MonitorMetricSwitchComponent,
   ],
   imports: [
     CommonModule,

admin/webapp/websrc/app/routes/components/groups/partial/monitor-metric-header/monitor-metric-header.component.html

@@ -0,0 +1,6 @@
+<em
+  class="eos-icons icon-18"
+  matTooltip="{{ 'group.editGroup.MONITOR_METRIC' | translate }}"
+  matTooltipPosition="above"
+  >security</em
+>

admin/webapp/websrc/app/routes/components/groups/partial/monitor-metric-header/monitor-metric-header.component.scss

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonitorMetricHeaderComponent } from './monitor-metric-header.component';
+
+describe('MonitorMetricHeaderComponent', () => {
+  let component: MonitorMetricHeaderComponent;
+  let fixture: ComponentFixture<MonitorMetricHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MonitorMetricHeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MonitorMetricHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

admin/webapp/websrc/app/routes/components/groups/partial/monitor-metric-header/monitor-metric-header.component.spec.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { IHeaderAngularComp } from 'ag-grid-angular';
+import { IHeaderParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-monitor-metric-header',
+  templateUrl: './monitor-metric-header.component.html',
+  styleUrls: ['./monitor-metric-header.component.scss'],
+})
+export class MonitorMetricHeaderComponent implements IHeaderAngularComp {
+  constructor() {}
+
+  agInit(headerParams: IHeaderParams): void {}
+
+  refresh(params: IHeaderParams): boolean {
+    return false;
+  }
+}

admin/webapp/websrc/app/routes/components/groups/partial/monitor-metric-header/monitor-metric-header.component.ts

@@ -0,0 +1,34 @@
+<span *ngIf="showMonitorMetric">
+  <span
+    *ngIf="
+      !isReadonlyGroup &&
+      !isAddressGroupAndNamespaceUser &&
+      params.context.componentParent.isWriteGroupAuthorized
+    ">
+    <em
+      class="eos-icons hand text-action text-muted"
+      *ngIf="!params.value"
+      (click)="toggleMonitoMetric(true)">
+      toggle_off
+    </em>
+    <em
+      class="eos-icons hand text-action text-success"
+      *ngIf="params.value"
+      (click)="toggleMonitoMetric(false)">
+      toggle_on
+    </em>
+  </span>
+  <span
+    *ngIf="
+      isReadonlyGroup ||
+      isAddressGroupAndNamespaceUser ||
+      !params.context.componentParent.isWriteGroupAuthorized
+    ">
+    <em class="eos-icons text-action text-muted" *ngIf="!params.value">
+      toggle_off
+    </em>
+    <em class="eos-icons text-action text-success" *ngIf="params.value">
+      toggle_on
+    </em>
+  </span>
+</span>

admin/webapp/websrc/app/routes/components/groups/partial/monitor-metric-switch/monitor-metric-switch.component.html

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonitorMetricSwitchComponent } from './monitor-metric-switch.component';
+
+describe('MonitorMetricSwitchComponent', () => {
+  let component: MonitorMetricSwitchComponent;
+  let fixture: ComponentFixture<MonitorMetricSwitchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MonitorMetricSwitchComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MonitorMetricSwitchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});