feat: add detail view for alerts in echoes component and improve alert display

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/data-management/alert-management/shared/components/alert-description/alert-description.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="alertDetail" class="w-100 mt-2">
+<div *ngIf="alertDetail" class="w-100 mt-2 text-wrap">
   <span class="font-weight-semibold">Summary:</span>
   <p [innerHTML]="alertDetail" class="font-weight-light">
   </p>

frontend/src/app/data-management/alert-management/shared/components/alert-echoes/alert-echoes.component.html

@@ -15,29 +15,29 @@
     </tr>
     </thead>
     <tbody *ngIf="alerts && alerts.length > 0">
-    <ng-container *ngFor="let alert of alerts">
-      <ng-container *ngTemplateOutlet="alertRowTemplate; context: { $implicit: alert }"></ng-container>
-    </ng-container>
+      <ng-container *ngFor="let alert of alerts">
+        <ng-container *ngTemplateOutlet="alertRowTemplate; context: { $implicit: alert }"></ng-container>
+      </ng-container>
     </tbody>
     <tbody *ngIf="(alerts && alerts.length===0)  && !loading">
-    <tr>
-      <td [attr.colspan]="fields.length +1">
-        <app-no-data-found></app-no-data-found>
-      </td>
-    </tr>
+      <tr>
+        <td [attr.colspan]="fields.length +1">
+          <app-no-data-found></app-no-data-found>
+        </td>
+      </tr>
     </tbody>
     <tbody *ngIf="loading">
-    <tr>
-      <td [attr.colspan]="fields.length + 1">
-        <div class="p-5 d-flex  justify-content-center align-items-center text-blue-800">
-          <app-utm-spinner [height]="'35px'"
-                           [label]="'Loading...'"
-                           [loading]="loading"
-                           [width]="'35px'">
-          </app-utm-spinner>
-        </div>
-      </td>
-    </tr>
+      <tr>
+        <td [attr.colspan]="fields.length + 1">
+          <div class="p-5 d-flex  justify-content-center align-items-center text-blue-800">
+            <app-utm-spinner [height]="'35px'"
+                             [label]="'Loading...'"
+                             [loading]="loading"
+                             [width]="'35px'">
+            </app-utm-spinner>
+          </div>
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
@@ -58,7 +58,7 @@
 </div>
 
 <ng-template #alertRowTemplate let-alert>
-  <tr class="cursor-pointer">
+  <tr (click)="viewDetail(alert)" class="cursor-pointer">
     <ng-container *ngFor="let td of fields">
       <td *ngIf="td.visible"
           [ngClass]="{'min-width': td.field === ALERT_ADVERSARY_FIELD || td.field === ALERT_TARGET_FIELD}">
@@ -68,4 +68,16 @@
       </td>
     </ng-container>
   </tr>
+  <ng-container *ngIf="alert.expanded">
+    <tr>
+      <td style="height: 500px" [attr.colspan]="fields.length + 2" >
+        <app-alert-view-detail (refreshData)="onRefreshData($event)"
+                               [isEcho]=" true"
+                               [alert]="alert"
+                               [hideEmptyField]=" true"
+                               [dataType]="dataType">
+        </app-alert-view-detail>
+      </td>
+    </tr>
+  </ng-container>
 </ng-template>

frontend/src/app/data-management/alert-management/shared/components/alert-echoes/alert-echoes.component.ts

@@ -2,7 +2,7 @@ import {HttpResponse} from '@angular/common/http';
 import {Component, Input, OnInit} from '@angular/core';
 import {UtmToastService} from '../../../../../shared/alert/utm-toast.service';
 import {
-  ALERT_ADVERSARY_FIELD, ALERT_ECHOES_FIELDS, ALERT_PARENT_ID,
+  ALERT_ADVERSARY_FIELD, ALERT_ECHOES_FIELDS, ALERT_FIELDS, ALERT_PARENT_ID,
   ALERT_STATUS_FIELD_AUTO, ALERT_TAGS_FIELD,
   ALERT_TARGET_FIELD, ALERT_TIMESTAMP_FIELD, FALSE_POSITIVE_OBJECT
 } from '../../../../../shared/constants/alert/alert-field.constant';
@@ -94,4 +94,8 @@ export class AlertEchoesComponent implements OnInit {
     this.itemsPerPage = $event;
     this.loadChildrenAlerts();
   }
+
+  protected viewDetail(alert: UtmAlertType) {
+    alert.expanded = !alert.expanded;
+  }
 }

frontend/src/app/data-management/alert-management/shared/components/alert-view-detail/alert-view-detail.component.html

@@ -97,7 +97,7 @@
         <app-alert-apply-note (applyNote)="refreshData.emit(true);" [alert]="alert"
                               [showNote]="true"></app-alert-apply-note>
       </div>
-      <div class="alert-details w-100 d-flex justify-content-start mb-2 ">
+      <div *ngIf="!isEcho" class="alert-details w-100 d-flex justify-content-start mb-2 ">
         <span class="text-blue-800 font-weight-light has-minimum-width">Tags:</span>&nbsp;
         <app-alert-tags-apply (applyTagsEvent)="onApplyTags($event)"
                               [alert]="alert"

frontend/src/app/data-management/alert-management/shared/components/alert-view-detail/alert-view-detail.component.ts

@@ -40,6 +40,7 @@ export class AlertViewDetailComponent implements OnInit {
   @Input() hideEmptyField = false;
   @Input() dataType: EventDataTypeEnum;
   @Input() tags: AlertTags[];
+  @Input() isEcho = false;
   @Input() timeFilter: ElasticFilterType;
   @Output() refreshData = new EventEmitter<boolean>();
   ALERT_NAME = ALERT_NAME_FIELD;