feat: enhance logstash filters component with loading state and quick create functionality

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

Author: mjabascal10

frontend/src/app/logstash/logstash-filters/logstash-filters.component.html

@@ -1,6 +1,6 @@
-<div class="d-flex justify-content-between w-100 align-items-center" >
+<div *ngIf="filters.length > 0" class="d-flex justify-content-between w-100 align-items-center" >
   <h6 class="font-weight-semibold  m-0">Pipeline filters</h6>
-  <button (click)="filterEdit = null;openEditJson = true"
+  <button (click)="addCustomFilter()"
           class="btn utm-button utm-button-primary">
     <i class="icon-database-add mr-2"></i> Add filter
   </button>
@@ -11,8 +11,7 @@ <h6 class="font-weight-semibold  m-0">Pipeline filters</h6>
   <code [innerHTML]="pipeline.reloads.lastError.message | safe:'html'"></code>
 </div>-->
 
-<div class="row w-100 m-0 mt-3 d-flex justify-content-center align-items-center container-pipeline flex-column"
-     *ngIf="filters.length>0 && !loading">
+<div *ngIf="filters.length > 0 && !loading; else isLoading" class="row w-100 m-0 mt-3 d-flex justify-content-center align-items-center container-pipeline flex-column" >
   <span inlineSVG="assets/icons/system/DATA-FILTER.svg"
         class="svg-icon svg-icon-4x svg-icon-grey text-grey-300"></span>
   <div class="pipeline-line pipeline-{{lineColor}}">
@@ -56,6 +55,16 @@ <h6 (click)="viewFilter(filter)" class="d-flex justify-content-start align-items
 
 </div>
 
+<ng-template #isLoading>
+  <div class="p-5 d-flex  justify-content-center align-items-center text-blue-800">
+    <app-utm-spinner [height]="'35px'"
+                     [label]="'Loading filters...'"
+                     [loading]="loading"
+                     [width]="'35px'">
+    </app-utm-spinner>
+  </div>
+</ng-template>
+
 
 <div *ngIf="openEditJson" class="utm-right-container">
   <div (click)="openEditJson= undefined" class="overlay overlay-lg"></div>
@@ -70,10 +79,12 @@ <h6 class="card-title text-blue-800 font-weight-light">
         <div class="close-icon"></div>
       </button>
     </div>
-    <app-logstash-filter-create *ngIf="filter" (filterEditClose)="onFilterEditClose()"
+    <app-logstash-filter-create *ngIf="filter"
+                                (filterEditClose)="onFilterEditClose()"
                                 [disable] = "filterEdit && filterEdit.systemOwner"
-                                (close)="openEditJson= undefined"
+                                (close)="onFilterEditDismiss()"
                                 [dataType]="filter.datatype"
-                                [filter]="filterEdit" [pipeline]="pipeline"></app-logstash-filter-create>
+                                [filter]="filterEdit" [pipeline]="pipeline">
+    </app-logstash-filter-create>
   </div>
 </div>

frontend/src/app/logstash/logstash-filters/logstash-filters.component.ts

@@ -18,9 +18,10 @@ import {UtmPipeline} from '../shared/types/logstash-stats.type';
 })
 export class LogstashFiltersComponent implements OnInit {
   @Input() pipeline: UtmPipeline;
+  @Input() enableQuickCreate = false;
   filters: LogstashFilterType[] = [];
   filter: LogstashFilterType = {} as LogstashFilterType;
-  loading = true;
+  loading = false;
   totalItems: any;
   requestParams =
     {
@@ -42,6 +43,7 @@ export class LogstashFiltersComponent implements OnInit {
 
   ngOnInit() {
     if (this.pipeline) {
+      this.loading = true;
       this.requestParams = {
         ...this.requestParams,
         pipelineId: this.pipeline.id
@@ -69,11 +71,17 @@ export class LogstashFiltersComponent implements OnInit {
   }
 
   onFilterEditClose() {
+    this.enableQuickCreate = false;
     this.requestParams.page = 0;
     this.getLogsFilters();
     this.openEditJson = false;
   }
 
+  onFilterEditDismiss() {
+    this.enableQuickCreate = false;
+    this.openEditJson = false;
+  }
+
   deleteFilter(filter: LogstashFilterType) {
     const modalFilter = this.modalService.open(ModalConfirmationComponent, {centered: true});
     modalFilter.componentInstance.header = 'Delete asset';
@@ -102,6 +110,10 @@ export class LogstashFiltersComponent implements OnInit {
     this.filters = data;
     this.filter = data[0] || {};
     this.loading = false;
+
+    if (this.enableQuickCreate) {
+      this.addCustomFilter();
+    }
   }
 
   private onError(error) {
@@ -128,4 +140,9 @@ export class LogstashFiltersComponent implements OnInit {
     this.filterEdit = filter;
     this.openEditJson = true;
   }
+
+  addCustomFilter() {
+    this.filterEdit = null;
+    this.openEditJson = true;
+  }
 }

frontend/src/app/logstash/logstash-pipelines/logstash-pipelines.component.html

@@ -13,15 +13,20 @@ <h5 class="card-title label-header mb-0 text-uppercase label-header">
            *ngFor="let pipeline of logstashPipelines.pipelines"
            [ngClass]="{'card-pipeline-selected':pipelineDetail && pipeline.pipelineId === pipelineDetail.pipelineId}"
            (click)="viewPipeline(pipeline)">
-        <h6 class="text-blue-800 d-flex justify-content-start w-100">
+        <div class="d-flex justify-content-between w-100 align-items-center" >
+          <h6 class="text-blue-800 d-flex justify-content-start">
           <span
             [ngClass]="pipeline.pipelineStatus==='up'?'text-success':'text-danger'"
             class="span-small-icon d-flex justify-content-start align-items-center">
                   <i
                     [ngClass]="'icon-circle2'"
                     class="mr-2"></i></span>
-          {{ pipeline.pipelineName }}
-        </h6>
+            {{ pipeline.pipelineName }}
+          </h6>
+          <button [ngbTooltip]="'Add filter'" (click)="addCustomFilter(pipeline)" class="btn btn-small btn-icon btn-outline-info">
+            <i class="small-md-icon icon-database-add"></i>
+          </button>
+        </div>
         <img class="p-3 mt-2 mt-1"
              [alt]="pipeline.moduleName"
              [src]="'/assets/img/guides/logos/' + getModuleSvg(pipeline.moduleName)">
@@ -174,7 +179,10 @@ <h6 class="card-title text-blue-800 font-weight-light">
           *ngTemplateOutlet="pipelineEventTemplate; context: { pipeline: pipelineDetail, showColum:false }"></ng-container>
       </div>
 
-      <app-logstash-filters *ngIf="pipelineDetail" [pipeline]="pipelineDetail"></app-logstash-filters>
+      <app-logstash-filters *ngIf="pipelineDetail"
+                            [enableQuickCreate]="enableQuickCreate"
+                            [pipeline]="pipelineDetail">
+      </app-logstash-filters>
     </div>
   </div>
 </div>

frontend/src/app/logstash/logstash-pipelines/logstash-pipelines.component.scss

@@ -387,3 +387,15 @@ p {
   font-size: 0.88rem!important;
 }
 
+.btn-outline-info {
+  color: #0277bd !important;;
+  border-color: #0277bd !important;
+  padding: 0.175rem .75rem!important;
+}
+
+.btn-outline-info:hover {
+  color: #fff!important;
+  background-color: #0277bd!important;
+  border-color: #0277bd!important;
+}
+

frontend/src/app/logstash/logstash-pipelines/logstash-pipelines.component.ts

@@ -24,6 +24,7 @@ export class LogstashPipelinesComponent implements OnInit, OnDestroy, AfterViewC
   img3: string;
   img4: string;
   img5: string;
+  enableQuickCreate = false;
 
   constructor(private elasticHealthService: ElasticHealthService,
               private logstashService: LogstashService,
@@ -33,10 +34,10 @@ export class LogstashPipelinesComponent implements OnInit, OnDestroy, AfterViewC
   ngOnInit() {
     this.getHealth();
     this.getLogstashStats();
-    this.interval = setInterval(() => {
+    /*this.interval = setInterval(() => {
       this.getHealth();
       this.getLogstashStats();
-    }, 5000);
+    }, 5000);*/
     this.imageChangeInterval = setInterval(() => this.setImages(), 8000);
   }
 
@@ -71,6 +72,7 @@ export class LogstashPipelinesComponent implements OnInit, OnDestroy, AfterViewC
 
   closeDetail() {
     this.pipelineDetail = null;
+    this.enableQuickCreate = false;
   }
 
   getClusterHealth() {
@@ -100,4 +102,9 @@ export class LogstashPipelinesComponent implements OnInit, OnDestroy, AfterViewC
     const icon = this.svgMap[module];
     return icon ? icon : 'generic.svg';
   }
+
+  addCustomFilter(pipeline: UtmPipeline) {
+      this.enableQuickCreate = true;
+      this.viewPipeline(pipeline);
+  }
 }