fix: improve visibility of actions in Log Explorer

Author: mjabascal10

frontend/src/app/log-analyzer/explorer/log-analyzer-view/log-analyzer-view.component.html

@@ -1,36 +1,41 @@
-<div class="px-3 w-100 m-0 d-flex align-items-center justify-content-between">
-  <div style="border-left: 1px #dee2e6 solid" class="d-flex p-2 bg-white w-100">
-    <div class="d-flex align-items-center justify-content-start mr-1">
+<div class="px-3 w-100 m-0 d-flex">
+  <div style="border-left: 1px #dee2e6 solid" class="d-flex flex-grow-1 p-2 bg-white gap-2">
+    <div class="d-flex align-items-center justify-content-start">
       <app-index-pattern-select
         (indexPatternChange)="changeFields($event)"
         [template]="'log-explorer'"
         [pattern]="pattern">
       </app-index-pattern-select>
     </div>
-    <div class="d-flex search-container flex-grow-1 mx-2 align-items-center">
+    <div class="d-flex search-container flex-grow-5 align-items-center gap-1">
       <app-utm-search-input
         (searchFor)="onSearchInAll($event)"
         [placeholder]="'Search in ' + (pattern ? pattern.pattern : '...')"
         class="w-100">
       </app-utm-search-input>
+      <button (click)="getData()" class="btn btn-primary btn-refresh" [ngbTooltip]="'Refresh'">
+        <i class="icon-reload-alt"></i>
+      </button>
     </div>
-    <div class="log-analyzer-actions d-flex justify-content-end align-items-center flex-wrap ml-5">
-      <div class="actions-log span-small-icon">
-        <button (click)="getData()" class="btn btn-sm utm-button utm-button-primary mr-2 mb-1">
-          <i class="icon-reload-alt"></i>&nbsp;Refresh data
+    <div class="log-analyzer-actions d-flex flex-grow-1 justify-content-between align-items-center gap-2">
+      <div class="d-flex  justify-content-center gap-1 flex-grow-1">
+        <button (click)="saveQuery()" [ngbTooltip]="'Save query'" class="btn utm-button utm-button-primary">
+          <i class="icon-floppy-disk"></i>&nbsp;Save query
         </button>
-        <!--<button (click)="saveQuery()" class="btn btn-sm utm-button utm-button-primary mr-2 mb-1">
-          <i class="icon-floppy-disk"></i>&nbsp;Save
-        </button>-->
+        <button (click)="loadQuery()" [ngbTooltip]="'Load query'" class="btn utm-button utm-button-primary">
+          <i class="icon-zoomin3"></i>&nbsp;Load query
+        </button>
+      </div>
+
+      <div class="d-flex justify-content-start">
         <button (click)="exportToCsv()"
                 [disabled]="(fields && fields.length === 0) || !rows || csvExport"
-                class="btn btn-sm utm-button utm-button-primary mb-1">
-          <i [ngClass]="csvExport ? 'icon-download10' : 'icon-table2'" class="mr-1"></i>
+                class="btn utm-button utm-button-primary">
+          <i [ngClass]="csvExport ? 'icon-download10' : 'icon-table2'"></i>
           {{csvExport ? 'Generating...' : 'Export to CSV'}}
         </button>
       </div>
     </div>
-
   </div>
 </div>
 

frontend/src/app/log-analyzer/explorer/log-analyzer-view/log-analyzer-view.component.scss

@@ -12,8 +12,21 @@ app-log-analyzer-field {
 }
 
 .search-container {
-  max-width: 60%;
-  min-width: 40%;
-  width: 100%;
+  flex-basis: 65%;
+}
+
+.btn-refresh {
+  background-color: #d3dae696;
+  color: #0277bd;
+  height: 36px !important;
+  border: 1px solid #d3dae696;
+}
+
+.gap-1 {
+  gap: .25rem;
+}
+
+.gap-2 {
+  gap: .5rem;
 }
 

frontend/src/app/log-analyzer/explorer/log-analyzer-view/log-analyzer-view.component.ts

@@ -381,6 +381,10 @@ export class LogAnalyzerViewComponent implements OnInit, OnDestroy {
     this.setInitialWidth();
   }
 
+  loadQuery() {
+    this.router.navigate(['/discover/log-analyzer-queries']);
+  }
+
   ngOnDestroy(): void {
     this.filters = [];
     this.utmFilterBehavior.$filterChange.next(null);

frontend/src/app/shared/components/utm/filters/elastic-filter-time/elastic-filter-time.component.html

@@ -26,16 +26,16 @@
        [container]="container?container:''"
        [ngbPopover]="popContent"
        autoClose="outside"
-       class="d-flex justify-content-start align-items-center cursor-pointer pr-2 border-grey-100 border-1 border-radius-1"
+       class="d-flex justify-content-start align-items-center cursor-pointer pr-2 border-grey-100 border-1 border-radius-1 flex-grow-1"
        placement="bottom-right"
        popoverClass="utm-popover-filter-time" style="white-space: nowrap">
     <span [ngClass]="invertContent?'ml-2':' p-2 mr-2 border-left-1 '"
           class="setting-filter cursor-pointer text-blue-800 border-grey-100 background-color-grey-100">
-    <i class="icon-calendar52"></i>
-    <i [ngClass]="popover.isOpen()?'icon-arrow-right32':'icon-arrow-down32'" class="ml-2"></i>
+      <i class="icon-calendar52"></i>
+      <i [ngClass]="popover.isOpen()?'icon-arrow-right32':'icon-arrow-down32'" class="ml-2"></i>
    </span>
     <div *ngIf="dateFrom && dateTo"
-         class="d-flex justify-content-between align-items-center span-small-icon">
+         class="d-flex justify-content-center flex-grow-1 span-small-icon">
       <span class="font-weight-semibold">{{dateFrom}}</span>
       <i class="icon-arrow-right8 mr-2 ml-2 mt-1"></i>
       <span class="font-weight-semibold">{{dateTo}}</span>

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/elastic-filter.component.html

@@ -63,55 +63,37 @@
 </ng-container>
 
 <ng-container *ngIf="template === 'log-explorer'">
-  <div class="d-flex px-3 m-0 align-items-stretch">
+  <div class="flex-row mx-3 m-0 card">
     <!-- Main Filters Section -->
-    <div class="flex-grow-1">
-      <div class="card w-100 d-flex justify-content-start align-items-center flex-row m-0 p-2">
+    <div class="filters-container">
+      <div class="w-100 d-flex justify-content-start align-items-center flex-row m-0">
         <!-- Query Menu and Add Filter Buttons -->
-        <div class="d-flex align-items-center justify-content-start mr-2 pl-2">
+        <div class="d-flex align-items-center justify-content-start mr-2 pl-3">
           <div class="order-buttons-container">
             <button
+              (click)="resetFilters()"
               type="button"
-              class="order-button btn-left"
-              [ngbTooltip]="'Query menu'"
-              #popoverQuery="ngbPopover"
-              [ngbPopover]="queryContent"
-              ngbTooltip="Add filter"
+              class="order-button"
+              [ngbTooltip]="'Clear filters'"
               autoClose="true"
-              placement="bottom-left"
-              popoverClass="utm-popover-bottom">
+              placement="bottom-left">
               <i class="icon-filter3 font-size-sm"></i>
             </button>
-            <button
-              type="button"
-              class="order-button btn-right"
-              [ngbTooltip]="'Add filter'"
-              #popoverFilter="ngbPopover"
-              (click)="resetFilterSelection()"
-              [ngbPopover]="addContent"
-              [popoverTitle]="addTitle"
-              ngbTooltip="Add filter"
-              autoClose="outside"
-              placement="bottom-left"
-              popoverClass="utm-popover-bottom">
-              <i class="icon-plus-circle2 font-size-sm"></i>
-            </button>
           </div>
         </div>
 
         <!-- Filters List -->
-        <div class="filters d-flex justify-content-start align-items-center flex-wrap">
+        <div class="filters d-flex justify-content-start align-items-center flex-wrap gap-1 py-1">
           <div *ngFor="let filter of resolveFilters(); let index = index"
-            class="dropdown cursor-pointer d-flex justify-content-center align-items-center border-1 mr-2 p-1 border-grey-100 border-radius-1"
+            class="dropdown cursor-pointer d-flex justify-content-center align-items-center border-1 p-1 border-grey-100 border-radius-1"
             #popoverField="ngbPopover"
             (click)="selectFilter(filter, index)"
             [ngbPopover]="filter.field !== '@timestamp' ? popField : null"
             autoClose="true"
             placement="bottom"
             popoverClass="utm-popover-bottom">
             <div class="filter-label">
-              <span
-                class="text-center pt-1 pb-1 m-1"
+              <span class="text-center m-1"
                 [innerHTML]="getFilterLabel(filter)"
                 [ngClass]="filter.operator.toLocaleLowerCase().includes('not')
                   ? 'border-danger-800 text-danger-800'
@@ -129,13 +111,27 @@
               </i>
             </span>
           </div>
+          <div class="cursor-pointer d-flex justify-content-center align-items-center mr-2 p-1">
+            <span class="btn-right py-1 m-1 border-radius-1 text-blue-800"
+                  [ngbTooltip]="'Add filter'"
+                  #popoverFilter="ngbPopover"
+                  [ngbPopover]="addContent"
+                  [popoverTitle]="addTitle"
+                  ngbTooltip="Add filter"
+                  autoClose="outside"
+                  placement="bottom-left"
+                  popoverClass="utm-popover-bottom">
+              <i class="icon-plus-circle2 font-size-sm mr-2"></i>
+            <span> Add filter</span>
+          </span>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- Time Filter Section -->
-    <div class="filter-time-container d-flex">
-      <div class="card px-2 pt-1 m-0 w-100">
+    <div class="d-flex flex-column justify-content-center flex-grow-1 filter-time-container px-2">
+
         <app-elastic-filter-time
           [template]="'log-explorer'"
           [changeOnInit]="'NO'"
@@ -144,7 +140,7 @@
           [invertContent]="false"
           (timeFilterChange)="onTimeFilterChange($event)">
         </app-elastic-filter-time>
-      </div>
+
     </div>
   </div>
 </ng-container>
@@ -191,39 +187,6 @@ <h6 class="font-weight-light m-0">
   </div>
 </ng-template>
 
-<ng-template #queryContent>
-  <div class="context-menu">
-    <!-- Add Filter Item -->
-    <div (click)="openFilterPopover()" class="d-flex justify-content-start align-items-center custom-list-item">
-      <i class="icon-plus3 font-size-sm pt-1"></i>
-      <span class="ml-2">Add filter</span>
-    </div>
-
-    <!-- Clear All Item -->
-    <div (click)="resetFilters()" class="d-flex justify-content-start align-items-center custom-list-item">
-      <i class="icon-cross2 font-size-sm pt-1"></i>
-      <span class="ml-2">Clear all</span>
-    </div>
-
-    <!-- Divider -->
-    <hr class="context-menu-divider">
-
-    <!-- Load Query Item -->
-    <div routerLink="/discover/log-analyzer-queries" class="d-flex justify-content-start align-items-center custom-list-item">
-      <i class="icon-reload-alt font-size-sm"></i>
-      <span class="ml-2">Load query</span>
-      <!--<i class="icon-arrow-right32 font-size-sm ml-auto pt-1"></i>-->
-    </div>
-
-    <!-- Save Query Item -->
-    <div (click)="saveQuery()" class="d-flex justify-content-start align-items-center custom-list-item">
-      <i class="icon-floppy-disk font-size-sm"></i>
-      <span class="ml-2">Save query</span>
-      <!--<i class="icon-arrow-right32 font-size-sm ml-auto pt-1"></i>-->
-    </div>
-  </div>
-</ng-template>
-
 <!--Field popup-->
 <ng-template #popField>
   <div (click)="popoverFilter.open();editMode=true" class="dropdown-item text-blue-800">

frontend/src/app/shared/components/utm/filters/utm-elastic-filter/elastic-filter.component.scss

@@ -11,7 +11,7 @@
 }
 
 .filter-time-container {
-  min-width: 300px;
+  border-left: 1px solid #ddd;
 }
 
 app-elastic-filter-add {
@@ -48,7 +48,7 @@ app-elastic-filter-add {
   color: #0277bd;
 }
 
-.order-button:hover {
+.order-button:hover:not(.btn-right) {
   background-color: #d3dae6;
 }
 
@@ -63,8 +63,10 @@ app-elastic-filter-add {
 }
 
 .btn-right {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border: 1px dashed #d3dae6;
+  background-color: transparent;
+  width: auto;
+  padding: .25rem .5rem;
 }
 
 .context-menu {
@@ -100,5 +102,13 @@ app-elastic-filter-add {
   margin-left: auto;
 }
 
+.filters-container {
+  flex-basis: 85%;
+}
+
+.gap-1 {
+  gap: .25rem;
+}
+