search in remote clusters view

src/app/shared/admin/clusters/manager/manager.component.html

 <div style="display: flex; align-items: center;  margin-top:20px">
-    <div style="margin-right:20px">
-        <div >
+    <div style=" display:flex; align-items: center;">
+        <div style="margin-right:20px;">
             <button class="btn btn-primary" (click)="modal.show()">New Cluster</button>
         </div>
-    </div>
-    <div class="flex" style="margin-right:20px">
-        
+        <span class="p-input-icon-right">
+            <i class="pi pi-search" style="font-size: 13px; top: 16px; margin-right: 5px;"></i>
+             <input pInputText class="form-control" name="search" id="search"
+                    placeholder="Search" type="text" [(ngModel)]="searchValue"  (ngModelChange)="filterClusters()">
+        </span>
     </div>
 </div>
 
@@ -13,7 +15,7 @@
     
 <div class="background-section">
     <p-table
-    [value]="clusters"
+    [value]="filteredClusters"
     [paginator]="true"
     [rows]="maxItemsOnPage"
     [rowsPerPageOptions]="[15, 20, 25, 30, 50]"
@@ -44,11 +46,11 @@
         <ng-template pTemplate="body" let-cluster>
             <tr>
                 <td  [routerLink]="[cluster.id]">{{cluster.id}}</td>
-                <td>{{cluster.name}}</td>
-                <td>{{cluster.codename}}</td>
-                <td>{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td>
-                <td>{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
-                <td>{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
+                <td [routerLink]="[cluster.id]">{{cluster.name}}</td>
+                <td [routerLink]="[cluster.id]">{{cluster.codename}}</td>
+                <td [routerLink]="[cluster.id]">{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td>
+                <td [routerLink]="[cluster.id]">{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
+                <td [routerLink]="[cluster.id]">{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
                 <td class="text-right">
                     <span class="dropdown">
                             <a style="display: inline-block" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button">

src/app/shared/admin/clusters/manager/manager.component.ts

@@ -16,6 +16,8 @@ export class ClusterManagerComponent {
   public addedCluster: ClusterManager = new ClusterManager();
   public updatedFile : File = null;
   public maxItemsOnPage = 15;
+  public searchValue = '';
+  filteredClusters: ClusterManager[] = [];
 
   public domains = [];
 
@@ -23,49 +25,50 @@ export class ClusterManagerComponent {
     public modal: ModalComponent;
 
   constructor(private clusterService: ClusterManagerService,
-              private domainService: DomainService
-  ) {
+              private domainService: DomainService) {
     this.getAllClusters();
     this.domainService.getAllBase().subscribe(result => {
       this.domains = result.filter(d => d.id !== this.domainService.getGlobalDomainId());
     });
   }
 
- public saveFile(event: any) {
-    console.log(event);
-    this.updatedFile =event.files[0];     
-    }
-
-public getAllClusters() {
-    this.clusterService.getAllClusters().subscribe(result => { 
-          console.log(result);
-            this.clusters = result;
-        })
-      }
-
-public closeModalAndSaveCluster() {
-  this.clusterService.sendCluster(this.updatedFile, this.addedCluster).subscribe(result => { 
-    console.log(result);
-    this.getAllClusters();
-    this.modal.hide();
-    this.updatedFile = null;
-    this.addedCluster = new ClusterManager();
-  }, error => {
-    console.error(error);
-    
+  public saveFile(event: any) {
+        console.log(event);
+        this.updatedFile =event.files[0];
   }
-)
-}
-
-
-public onDomainSelection(event: any) {
-
-    console.log(event);
-    this.addedCluster.domainNames = [event]
-  
-}
-
 
+  public getAllClusters() {
+       this.clusterService.getAllClusters().subscribe(result => {
+           console.log(result);
+           this.clusters = result;
+           this.filterClusters();
+         })
+  }
 
+  public closeModalAndSaveCluster() {
+       this.clusterService.sendCluster(this.updatedFile, this.addedCluster).subscribe(result => {
+            console.log(result);
+            this.getAllClusters();
+            this.modal.hide();
+            this.updatedFile = null;
+            this.addedCluster = new ClusterManager();
+       }, error => {
+            console.error(error);
+       })
+     }
+
+
+     public onDomainSelection(event: any) {
+            console.log(event);
+            this.addedCluster.domainNames = [event]
+     }
+    filterClusters() {
+        const value = this.searchValue?.toLowerCase() || '';
+        this.filteredClusters = this.clusters.filter(cluster =>
+            cluster.name?.toLowerCase().includes(value) ||
+            cluster.codename?.toLowerCase().includes(value) ||
+            cluster.id?.toString().includes(value)
+        );
+    }
 
 }