feat: enhance detail view for alerts in echoes component and improve data handling

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

Author: mjabascal10

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

@@ -62,17 +62,19 @@
     <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 style="height: 500px" [attr.colspan]="fields.length + 2" >
-        <app-alert-view-detail (refreshData)="onRefreshData($event)"
-                               [isEcho]=" true"
+      <td class="expanded-row-detail" [attr.colspan]="fields.length + 2" >
+        <app-alert-view-detail [isEcho]=" true"
                                [alert]="alert"
                                [hideEmptyField]=" true"
                                [dataType]="dataType">

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

@@ -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/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> {