feat: enhance playbook UI and loading behavior, add new alert fields

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

Author: mjabascal10

frontend/src/app/incident-response/playbooks/playbooks.component.html

@@ -102,20 +102,20 @@ <h5 class="card-title mb-0 label-header">FLOWS</h5>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-12 text-center py-5">
       <ng-container *ngIf="{ loading: playbookService.loading$ | async,
                               totalItems: playbookService.totalItems$ | async
                            } as data">
         <ng-container *ngIf="!data.loading && data.totalItems === 0">
-          <i class="icon-play text-muted mb-3" style="font-size: 48px;"></i>
-          <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
-          <p class="text-muted mb-4">Begin with a template, or start from scratch.</p>
-          <a (click)="newPlaybook()" class="btn utm-button utm-button-primary">
-            <i class="icon-plus2 mr-1"></i>
-            New Flow
-          </a>
+          <div class="d-flex flex-column align-items-center justify-content-center">
+            <i class="icon-play text-muted mb-3" style="font-size: 48px;"></i>
+            <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
+            <p class="text-muted mb-4">Begin with a template, or start from scratch.</p>
+            <a (click)="newPlaybook()" class="btn utm-button utm-button-primary">
+              <i class="icon-plus2 mr-1"></i>
+              New Flow
+            </a>
+          </div>
         </ng-container>
         <app-utm-spinner
           class="position-absolute right-50"
@@ -129,6 +129,8 @@ <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
 
 
 
+
+
     <div *ngIf="playbookService.totalItems$ | async as totalItems" class="mt-3">
       <div class="row justify-content-center">
         <ngb-pagination (pageChange)="loadPage($event)"

frontend/src/app/incident-response/playbooks/playbooks.component.ts

@@ -32,8 +32,7 @@ export class PlaybooksComponent implements OnInit, AfterViewInit, OnDestroy {
     sort: '',
     'active.equals': null,
     'agentPlatform.equals': null,
-    'createdBy.equals': null,
-    'systemOwner.equals': false
+    'createdBy.equals': null
   };
   platforms: string[];
   users: string[];

frontend/src/app/incident-response/shared/services/playbook.service.ts

@@ -20,7 +20,7 @@ export class PlaybookService {
   playbooks$ = this.request$.pipe(
     filter(request =>  !!request),
     switchMap(request => {
-      this.loading.next(true);
+      setTimeout(() => this.loading.next(true), 300);
       return this.incidentResponseRuleService.query(request).pipe(
         map(response => {
           this.totalItems.next(Number(response.headers.get('X-Total-Count')));
@@ -30,7 +30,7 @@ export class PlaybookService {
           this.utmToastService.showError('Error', 'An error occurred while fetching playbooks.');
           return of([]);
         }),
-        finalize(() => this.loading.next(false))
+        finalize(() =>  setTimeout(() => this.loading.next(false), 200))
       );
     })
   );

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

@@ -480,6 +480,36 @@ export const ALERT_FILTERS_FIELDS: UtmFieldType[] = [
     type: ElasticDataTypesEnum.STRING,
     visible: false,
   },
+  {
+    label: 'Category',
+    field: ALERT_CATEGORY_FIELD,
+    type: ElasticDataTypesEnum.STRING,
+    visible: true,
+  },
+  {
+    label: 'Sensor',
+    field: ALERT_SENSOR_FIELD,
+    type: ElasticDataTypesEnum.STRING,
+    visible: true,
+  },
+  {
+    label: 'Time',
+    field: ALERT_TIMESTAMP_FIELD,
+    type: ElasticDataTypesEnum.DATE,
+    visible: false,
+  },
+  {
+    label: 'Incident Name',
+    field: ALERT_INCIDENT_NAME_FIELD,
+    type: ElasticDataTypesEnum.STRING,
+    visible: true,
+  },
+  {
+    label: 'Tags',
+    field: ALERT_TAGS_FIELD,
+    type: ElasticDataTypesEnum.STRING,
+    visible: true,
+  },
   {
     label: 'Adversary IP',
     field: ALERT_ADVERSARY_IP_FIELD,
@@ -575,37 +605,7 @@ export const ALERT_FILTERS_FIELDS: UtmFieldType[] = [
     field: ALERT_TARGET_GEOLOCATION_LONGITUDE_FIELD,
     type: ElasticDataTypesEnum.STRING,
     visible: false,
-  },
-  {
-    label: 'Category',
-    field: ALERT_CATEGORY_FIELD,
-    type: ElasticDataTypesEnum.STRING,
-    visible: true,
-  },
-  {
-    label: 'Sensor',
-    field: ALERT_SENSOR_FIELD,
-    type: ElasticDataTypesEnum.STRING,
-    visible: true,
-  },
-  {
-    label: 'Time',
-    field: ALERT_TIMESTAMP_FIELD,
-    type: ElasticDataTypesEnum.DATE,
-    visible: false,
-  },
-  {
-    label: 'Incident Name',
-    field: ALERT_INCIDENT_NAME_FIELD,
-    type: ElasticDataTypesEnum.STRING,
-    visible: true,
-  },
-  {
-    label: 'Tags',
-    field: ALERT_TAGS_FIELD,
-    type: ElasticDataTypesEnum.STRING,
-    visible: true,
-  },
+  }
 ];
 
 export const EVENT_FIELDS: UtmFieldType[] = [