Merge pull request #1507 from utmstack/backlog/add-detail-view-for-echoes

feat: add detail view for alerts in echoes component and improve aler…

Author: elmilan06

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-timeline/alert-echoes-timeline.component.ts

@@ -85,7 +85,6 @@ export class AlertEchoesTimelineComponent implements OnInit {
       group.startTimestamp = Math.floor(timestamps.reduce((sum, t) => sum + t, 0) / timestamps.length);
 
       const rep = group.items[0] || ({} as any); // representative item
-      console.log('group', group, rep);
       seriesData.push({
         value: [
           group.startTimestamp,                         // 0: timestamp (start of minute)

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,14 +58,28 @@
 </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}">
-        <app-data-field-render [data]="alert" [field]="td" [dataType]="dataType" [isEcho]="true" [showStatusChange]="true"
-                               (refreshData)="onRefreshData($event)">
+        <app-data-field-render [data]="alert"
+                               [field]="td"
+                               [dataType]="dataType"
+                               [isEcho]="true"
+                               [showStatusChange]="true">
         </app-data-field-render>
       </td>
     </ng-container>
   </tr>
+  <ng-container *ngIf="alert.expanded">
+    <tr>
+      <td class="expanded-row-detail" [attr.colspan]="fields.length + 2" >
+        <app-alert-view-detail [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"
@@ -146,8 +146,8 @@
                                     (emptyValue)="hideLastChange = $event"
                                     class=""></app-alert-view-last-change>
       </div>
-      <div class="alert-details w-100 d-flex justify-content-start mb-2 align-items-start"
-           *ngIf="alert.dataSource && (!hideEmptyField || (hideEmptyField && !incidentResponse))">
+      <div *ngIf="alert.dataSource && (!hideEmptyField || (hideEmptyField && !incidentResponse))"
+           class="alert-details w-100 d-flex justify-content-start mb-2 align-items-start">
         <span class="text-blue-800 font-weight-light has-minimum-width mr-2">Incident response:</span>&nbsp;
         <app-utm-console-check [hostname]="alert.dataSource"
                                (emptyValue)="incidentResponse = $event"

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;

frontend/src/app/shared/components/utm/util/utm-console-check/utm-console-check.component.ts

@@ -22,11 +22,13 @@ export class UtmConsoleCheckComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.getAgent(this.hostname).then(value => {
-      this.agent = value;
-      this.canConnect = this.agent.status === AgentStatusEnum.ONLINE;
-      this.emptyValue.emit(!this.canConnect);
-    });
+    this.getAgent(this.hostname)
+      .then(value => {
+        this.agent = value;
+        this.canConnect = this.agent && this.agent.status === AgentStatusEnum.ONLINE;
+        this.emptyValue.emit(!this.canConnect);
+      })
+      .catch(error => this.canConnect = false);
   }
 
   getAgent(hostname: string): Promise<AgentType> {