feat[frontend](alert_management): changed echoes button style

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

@@ -105,7 +105,6 @@ <h5 class="card-title mb-0 text-uppercase label-header">
                                             icon="icon-table"
                                             tooltipClass="utm-tooltip-top"></app-utm-dtable-columns>
                   </th>
-                  <th>Echoes</th>
                   <th (sort)="onSortBy($event)"
                       *ngFor="let item of fields; let i=index"
                       [hidden]="!item.visible"
@@ -216,22 +215,24 @@ <h6 class="card-title text-blue-800 font-weight-light">
     <td class="text-center">
       <ng-container *ngTemplateOutlet="actionContent; context: { $implicit: alert }"></ng-container>
     </td>
-    <td>
-      <app-alert-child-column [loadingChildren]="loadingChildren"
-        (toggleExpand)="loadChildrenAlerts(alert)"
-        [alert]="alert">
-      </app-alert-child-column>
-    </td>
     <ng-container *ngFor="let td of fields">
       <td *ngIf="td.visible"
           [ngClass]="{'min-width': td.field === ALERT_ADVERSARY_FIELD || td.field === ALERT_TARGET_FIELD}"
-          (click)="viewDetailAlert(alert, td)">
+          (click)="viewDetailAlert(alert, td)"
+      >
+
         <app-data-field-render [data]="alert"
                                [tags]="tags"
                                [field]="td"
                                [dataType]="dataType"
                                [showStatusChange]="true"
                                (refreshData)="onRefreshData($event)">
+
+          <app-alert-child-column echoes [loadingChildren]="loadingChildren"
+                (toggleExpand)="loadChildrenAlerts(alert)"
+                [alert]="alert">
+          </app-alert-child-column>
+
         </app-data-field-render>
       </td>
     </ng-container>

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

@@ -26,7 +26,8 @@ import {
   EVENT_FIELDS,
   EVENT_IS_ALERT,
   FALSE_POSITIVE_OBJECT,
-  INCIDENT_FIELDS
+  INCIDENT_FIELDS,
+  ALERT_ECHOES_FIELD
 } from '../../../shared/constants/alert/alert-field.constant';
 import {AUTOMATIC_REVIEW, IGNORED} from '../../../shared/constants/alert/alert-status.constant';
 import {ADMIN_ROLE} from '../../../shared/constants/global.constant';
@@ -475,8 +476,12 @@ export class AlertViewComponent implements OnInit, OnDestroy {
     return this.alertDetail.name;
   }
 
-  viewDetailAlert(alert: any, td: UtmFieldType) {
-    if (td.field !== ALERT_STATUS_FIELD) {
+  viewDetailAlert(alert: UtmAlertType, td: UtmFieldType) {
+    if (td.field !== ALERT_STATUS_FIELD && td.field !== ALERT_ECHOES_FIELD) {
+      if (alert.echoes > 0) {
+        alert.expanded = true;
+        this.loadChildrenAlerts(alert);
+      }
       this.alertDetail = alert;
       this.viewAlertDetail = true;
     }
@@ -586,7 +591,6 @@ export class AlertViewComponent implements OnInit, OnDestroy {
   }
 
   loadChildrenAlerts(alert: UtmAlertType) {
-    console.log(alert);
     if (alert.expanded) {
       this.alerts = this.alerts.map(a => {
         if (a.id !== alert.id) {

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

@@ -1,12 +1,14 @@
+
+
+
     <button
        (click)="onToggleExpand()"
-       class="btn-expand d-flex w-fit h-100 gap-3 justify-items-center p-1 pl-2 justify-content-between  rounded-lg"
-       [disabled]="loadingChildren"
-       [ngbTooltip]="alert.hasChildren ?(alert.expanded ? 'Collapse' : 'View echoes'):'No echoes'"
-       [ngClass]="alert.hasChildren ? 'pr-0':'pr-2'"
+       class="btn-expand d-flex w-fit justify-items-center p-1 pl-2 justify-content-between rounded-lg"
+       [disabled]="loadingChildren || !alert.hasChildren"
+       [ngbTooltip]="alert.hasChildren?'Echoes':'No echoes'"
        container="body"
        placement="top">
-      <span>Echoes</span>
+      <img src="/assets/icons/echoes/echoesicon.png" alt="Echoes" class="echoes-icons w-10px h-10px" style="height:0.8rem;" />
       <span class="text-xs my-auto h-fit  ">{{ alert.echoes }}</span>
       <i class="top-0 w-fit" *ngIf="alert.hasChildren"
          [ngClass]="loadingChildren && alert.expanded ? 'icon-spinner2 spinner' : alert.expanded ? 'icon-arrow-down32' : 'icon-arrow-right32'"></i>

frontend/src/app/data-management/alert-management/shared/components/alert-child-column/alert-child-column.component.scss

@@ -1,5 +1,5 @@
 .btn-expand {
-  border: 1px solid #004b8b;
+  // border: 1px solid #004b8b;
   background-color: white;
   color: #004b8b ;
   cursor: pointer;
@@ -14,14 +14,12 @@
 
 
 .btn-expand:hover:not(:disabled) {
-  background-color: #004b8b ;
-  color: white;
   border-color: #004b8b ;
 }
 
 .btn-expand:active:not(:disabled) {
   background-color: #004b8b ;
-  border-color: #004b8a;
+  // border-color: #004b8a;
   transform: scale(0.98);
 }
 
@@ -51,4 +49,6 @@
   width: 70px;
   height: 32px;
 }
-
+.echoes-icons{
+  filter: invert(30%) sepia(94%) saturate(2000%) hue-rotate(190deg) brightness(95%) contrast(101%);
+}

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

@@ -13,7 +13,10 @@
                            [showDrop]="showStatusChange"
                            [statusField]="STATUS_FIELD"
                            (statusChange)="onStatusChange($event)">
+
+
   </app-alert-action-select>
+  <ng-content *ngSwitchCase="ALERT_ECHOES_FIELD"  select="[echoes]"></ng-content>
   <app-alert-ip *ngSwitchCase="ALERT_TARGET_IP_FIELD" [alert]="data" [type]="'target'"></app-alert-ip>
   <app-alert-ip *ngSwitchCase="ALERT_ADVERSARY_IP_FIELD" [alert]="data" [type]="'adversary'"></app-alert-ip>
   <app-alert-ip *ngSwitchCase="DESTINATION_IP_FIELD" [alert]="data" [type]="'destination'"></app-alert-ip>

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

@@ -8,6 +8,7 @@ import {
   ALERT_STATUS_FIELD,
   ALERT_TAGS_FIELD,
   ALERT_TARGET_FIELD, ALERT_TARGET_IP_FIELD,
+  ALERT_ECHOES_FIELD
 } from '../../../../../shared/constants/alert/alert-field.constant';
 import {UtmDateFormatEnum} from '../../../../../shared/enums/utm-date-format.enum';
 import {UtmAlertType} from '../../../../../shared/types/alert/utm-alert.type';
@@ -38,6 +39,7 @@ export class DataFieldRenderComponent implements OnInit {
   utmFormatDate = UtmDateFormatEnum.UTM_SHORT_UTC;
   ALERT_TARGET_IP_FIELD = ALERT_TARGET_IP_FIELD;
   ALERT_ADVERSARY_IP_FIELD = ALERT_ADVERSARY_IP_FIELD;
+  ALERT_ECHOES_FIELD = ALERT_ECHOES_FIELD;
 
   constructor() {
   }

frontend/src/app/shared/constants/alert/alert-field.constant.ts

@@ -32,6 +32,7 @@ export const ALERT_TARGET_FIELD = 'target';
 export const ALERT_ADVERSARY_FIELD = 'adversary';
 export const ALERT_TECHNIQUE_FIELD = 'technique';
 export const ALERT_PARENT_ID = 'parentId';
+export const ALERT_ECHOES_FIELD = 'echoes';
 
 // SOURCE
 export const ALERT_SOURCE_HOSTNAME_FIELD = 'source.host';
@@ -147,6 +148,12 @@ export const ALERT_FIELDS: UtmFieldType[] = [
     type: ElasticDataTypesEnum.STRING,
     visible: true,
   },
+  {
+    label: 'Echoes',
+    field: ALERT_ECHOES_FIELD,
+    type: ElasticDataTypesEnum.NUMBER,
+    visible: true,
+  },
   {
     label: 'Target',
     field: ALERT_TARGET_FIELD,