feat: enhance playbook component with improved layout and functionality

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

Author: mjabascal10

frontend/src/app/incident-response/incident-response.module.ts

@@ -20,7 +20,8 @@ import {IncidentResponseSharedModule} from './shared/incident-response-shared.mo
 @NgModule({
   declarations:
     [
-      IncidentResponseViewComponent, IncidentResponseCommandComponent,
+      IncidentResponseViewComponent,
+      IncidentResponseCommandComponent,
       IncidentResponseAutomationComponent,
       PlaybookBuilderComponent,
       PlaybooksComponent,
@@ -40,6 +41,7 @@ import {IncidentResponseSharedModule} from './shared/incident-response-shared.mo
       ReactiveFormsModule
     ],
   entryComponents: [],
+  providers: []
 })
 export class IncidentResponseModule {
 }

frontend/src/app/incident-response/playbook-builder/playbook-builder.component.html

@@ -86,7 +86,7 @@ <h5 class="card-title mb-0 text-uppercase label-header">Add flow</h5>
           <button (click)="createRule()" class="btn utm-button utm-button-primary ml-2"
           [disabled]="!formRule.valid">
             <i class="icon-terminal mr-2"></i>
-            {{ (rule ? 'Update' : 'Create') + ' flow' }}
+            {{ (rule.id ? 'Update' : 'Create') + ' flow' }}
           </button>
         </div>
       </div>

frontend/src/app/incident-response/playbook-builder/playbook-builder.component.spec.ts

@@ -89,12 +89,26 @@ export class PlaybookBuilderComponent implements OnInit, OnDestroy {
               map(res => res.body));
         })
       ).subscribe(rule => {
-        console.log(rule.conditions);
-        this.rule = rule;
+
+        const isTemplate = this.route.snapshot.queryParams.template === 'true';
+        const ruleData = isTemplate ? { ...rule, id: null } : rule;
+        const actions = isTemplate ? ruleData.actions.map(item => {
+          return {
+            ...item,
+            id: null
+          };
+        }) : ruleData.actions;
+
+        this.rule = ruleData;
+        this.rule.actions = actions;
+
         this.exist = false;
         this.typing = false;
         this.rulePrefix = getElementPrefix(this.rule.name);
-        this.formRule.patchValue(this.rule, {emitEvent: false});
+
+
+        this.formRule.patchValue(ruleData, { emitEvent: false });
+
         const name = this.formRule.get('name').value;
         this.formRule.get('name').setValue(this.replacePrefixInName(name));
 
@@ -122,9 +136,9 @@ export class PlaybookBuilderComponent implements OnInit, OnDestroy {
     this.route.queryParams
       .pipe(
         filter(params => !!params && !!params.alertName),
-        map(params => params.alertName)).subscribe((alertName)=>{
+        map(params => params.alertName)).subscribe((alertName) => {
         this.addRuleCondition();
-        const rc = this.ruleConditions.at(this.ruleConditions.length-1);
+        const rc = this.ruleConditions.at(this.ruleConditions.length - 1);
         rc.patchValue({
           field: 'name',
           value: alertName,
@@ -180,7 +194,7 @@ export class PlaybookBuilderComponent implements OnInit, OnDestroy {
   }
 
   createRule() {
-    if (this.rule) {
+    if (this.rule.id) {
       this.editRule();
     } else {
       this.saveRule();

frontend/src/app/incident-response/playbook-builder/playbook-builder.component.ts

@@ -11,13 +11,14 @@ import {UtmAlertType} from '../../shared/types/alert/utm-alert.type';
 import {TimeFilterType} from '../../shared/types/time-filter.type';
 import {IncidentResponseRuleService} from '../shared/services/incident-response-rule.service';
 import {IncidentRuleType} from '../shared/type/incident-rule.type';
-import {PlaybookService} from './playbook.service';
+import {PlaybookService} from '../shared/services/playbook.service';
 import {NewPlaybookComponent} from "../shared/component/new-playbook/new-playbook.component";
 
 @Component({
   selector: 'app-playbooks',
   templateUrl: './playbooks.component.html',
-  styleUrls: ['./playbooks.component.scss']
+  styleUrls: ['./playbooks.component.scss'],
+  providers: [PlaybookService]
 })
 export class PlaybooksComponent implements OnInit, AfterViewInit, OnDestroy {
   loading = true;

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

@@ -1,42 +1,69 @@
 <div class="d-flex flex-1 flex-column gap-8 overflow-hidden p-4 ma-h-620 h-50">
   <div class="d-flex flex-1 flex-column gap-6 overflow-hidden">
-    <div class="d-flex flex-1 flex-grow-0 flex-column space-y-1 text-left">
+    <div class="d-flex flex-1 flex-grow-0 flex-column space-y-1 text-left h-100">
       <h2 id="radix-:rf8:" class="font-semibold tracking-tight line-clamp-1 flex items-center pb-0.5 text-base">Get started</h2>
       <p id="radix-:rf9:" class="text-muted-foreground line-clamp-2 text-sm">Start with templates showcasing common response playbooks and workflows.</p>
 
-      <div class="d-flex w-100 mt-3">
+      <div class="d-flex flex-column mt-3 px-1">
         <app-utm-search-input
           (searchFor)="searchByRule($event)"
           [placeholder]="'Search workflows '"
           class="w-100">
         </app-utm-search-input>
       </div>
 
-      <div class="col-12 text-center py-5">
-        <div class="d-flex flex-column align-items-center justify-content-center">
-          <i class="bi bi-diagram-3 text-muted mb-3" style="font-size: 48px;"></i>
-          <h4 class="mb-2 fw-semibold text-muted">Let’s get started</h4>
-          <p class="text-muted mb-0">No predefined flows were found. Create your first one to begin.</p>
+      <div class="playbook-list-container m-h-0 d-flex flex-column gap-3 overflow-auto mt-3 px-1">
+        <div *ngFor="let item of playbookService.playbooks$ | async; trackBy: trackByFn"
+             class="playbook-item-card d-flex align-items-center rounded border p-3 cursor-pointer"
+             [routerLink]="['/soar/create-flow']"
+             [queryParams]="{ id: item.id, template: true }">
+
+          <div class="playbook-icon-small d-flex justify-content-center align-items-center flex-shrink-0">
+            <i class="fa fa-sitemap"></i>
+          </div>
+
+          <div class="playbook-content d-flex flex-column flex-grow-1 min-w-0">
+            <div class="d-flex align-items-center justify-content-between mb-1">
+              <span class="playbook-title">{{ item.name }}</span>
+              <i class="fa fa-chevron-right playbook-arrow"></i>
+            </div>
+            <p class="playbook-description">
+              {{ item.description }}
+            </p>
+            <div class="playbook-date">
+              <i class="fa fa-clock-o"></i>
+              <span>Edited {{ item.createdDate | relativeTime }}</span>
+            </div>
+          </div>
         </div>
-      </div>
 
+        <div *ngIf="(playbookService.playbooks$ | async)?.length === 0" class="col-12 text-center py-5">
+          <div class="d-flex flex-column align-items-center justify-content-center">
+            <i class="fa fa-sitemap text-muted mb-3" style="font-size: 48px;"></i>
+            <h4 class="mb-2 fw-semibold text-muted">Let's get started</h4>
+            <p class="text-muted mb-0">No predefined flows were found. Create your first one to begin.</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+
   <div class="d-flex flex-shrink-0 flex-row-reverse">
-    <div class="d-flex w-100 justify-content-between gap-4 pb-4">
+    <div class="d-flex w-100 justify-content-between align-items-center gap-4 pb-4 border-top pt-4">
       <div class="d-flex flex-column items-start justify-center">
-        <div class="font-semibold">Start from scratch</div>
+        <div class="font-semibold text-dark">Start from scratch</div>
         <div class="text-sm text-muted-foreground">Begin with a fresh flow to build from scratch.</div>
       </div>
-      <button (click)="createNewPlaybook()" class="btn utm-button utm-button-primary">
-        <i class="icon-plus2 mr-1"></i>
-        New blank flow </button>
+      <button (click)="createNewPlaybook()" class="btn utm-button utm-button-primary d-flex align-items-center">
+        <i class="fa fa-plus mr-2"></i>
+        New blank flow
+      </button>
     </div>
   </div>
 </div>
+
 <button (click)="activeModal.dismiss('closed')" aria-label="Close"
         class="position-absolute right-2 top-2 h-8 w-8" data-dismiss="modal"
         type="button">
   <div class="close-modal-icon"></div>
 </button>
-

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

@@ -64,3 +64,92 @@
 .h-8 {
   height: 2rem;
 }
+
+.playbook-list-container {
+  padding-right: 8px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 3px;
+
+    &:hover {
+      background: #9ca3af;
+    }
+  }
+}
+
+.playbook-item-card {
+  background: #f9fafb;
+  border-color: #e5e7eb;
+  transition: all 0.2s ease;
+  margin-bottom: 8px; // Separación entre cards
+
+  &:hover {
+    background: #ffffff;
+    border-color: #cbd5e1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.playbook-icon-small {
+  width: 36px;
+  height: 36px;
+  color: #6b7280;
+  font-size: 16px;
+  margin-right: 16px; // Mejor separación del icono al contenido
+  flex-shrink: 0;
+}
+
+.playbook-content {
+  min-width: 0;
+}
+
+.playbook-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+  line-height: 1.5;
+}
+
+.playbook-description {
+  font-size: 13px;
+  color: #6b7280;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.playbook-date {
+  font-size: 12px;
+  color: #9ca3af;
+  display: flex;
+  align-items: center;
+  gap: 6px; // Separación entre icono y texto
+
+  i {
+    font-size: 11px;
+  }
+}
+
+.playbook-arrow {
+  color: #9ca3af;
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+

frontend/src/app/incident-response/shared/component/new-playbook/new-playbook.component.html

@@ -1,27 +1,51 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Router} from "@angular/router";
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Router} from '@angular/router';
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import {Observable, of} from 'rxjs';
 import {UtmToastService} from '../../../../shared/alert/utm-toast.service';
 import {InputClassResolve} from '../../../../shared/util/input-class-resolve';
+import {PlaybookService} from '../../services/playbook.service';
+import {IncidentResponseRuleService} from '../../services/incident-response-rule.service';
 import {IncidentActionType} from '../../type/incident-action.type';
 
 @Component({
   selector: 'app-incident-response-command-create',
   templateUrl: './new-playbook.component.html',
-  styleUrls: ['./new-playbook.component.scss']
+  styleUrls: ['./new-playbook.component.scss'],
+  providers: [PlaybookService]
 })
-export class NewPlaybookComponent implements OnInit {
+export class NewPlaybookComponent implements OnInit, AfterViewInit {
   @Input() action: IncidentActionType;
   @Output() actionCreated = new EventEmitter<IncidentActionType>();
 
+  request = {
+    page: 0,
+    size: 25,
+    sort: '',
+    'active.equals': null,
+    'agentPlatform.equals': null,
+    'createdBy.equals': null,
+    'systemOwner.equals': true
+  };
+  platforms: string[];
+
+  platforms$: Observable<string[]>;
+  loadingPlatform = false;
+
   constructor(public activeModal: NgbActiveModal,
               public inputClass: InputClassResolve,
-              public utmToastService: UtmToastService,
+              private utmToastService: UtmToastService,
+              private incidentResponseRuleService: IncidentResponseRuleService,
+              public playbookService: PlaybookService,
               private router: Router) {
   }
 
   ngOnInit() {}
 
+  ngAfterViewInit(): void {
+    this.playbookService.loadData({...this.request});
+  }
+
   createNewPlaybook() {
     this.router.navigate(['/soar/create-flow']);
     this.activeModal.close();
@@ -30,4 +54,12 @@ export class NewPlaybookComponent implements OnInit {
   searchByRule($event: string | number) {
 
   }
+
+  selectPlatform(platform: string) {
+
+  }
+
+  trackByFn(index: number, item: any) {
+    return item.id || index;
+  }
 }