NAS-125705 / 24.04 / More improvements for audit page (#9348)

truenas · Dec 20, 2023 · 5adb776 · 5adb776
1 parent 5230e16
commit 5adb776
Show file tree

Hide file tree

Showing 104 changed files with 1,366 additions and 67 deletions.
diff --git a/src/app/core/components/directives/details-height/details-height.directive.ts b/src/app/core/components/directives/details-height/details-height.directive.ts
@@ -62,6 +62,10 @@ export class IxDetailsHeightDirective implements OnInit, OnDestroy, OnChanges {
   onScroll(): void {
     const parentElement = this.layoutService.getContentContainer();
 
+    if (!parentElement) {
+      return;
+    }
+
     if (!this.parentPadding) {
       this.parentPadding = parseFloat(
         this.window

diff --git a/src/app/modules/ix-table2/components/ix-table-pager/ix-table-pager.component.scss b/src/app/modules/ix-table2/components/ix-table-pager/ix-table-pager.component.scss
@@ -10,6 +10,7 @@
   .page-size {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: 5px;
     margin-right: 30px;
 

diff --git a/src/app/modules/search-input/components/advanced-search/advanced-search.component.scss b/src/app/modules/search-input/components/advanced-search/advanced-search.component.scss
@@ -1,3 +1,6 @@
+@import 'scss-imports/splitview';
+@import 'mixins/layout';
+
 :host {
   align-items: flex-start;
   background: rgba(0, 0, 0, 0.1);
@@ -69,34 +72,44 @@
   margin-top: 5px;
   user-select: none;
   white-space: nowrap;
+
+  @media (max-width: $breakpoint-sm) {
+    margin-top: 0;
+    white-space: inherit;
+    width: 70px;
+  }
 }
 
 .input-area {
   background-color: transparent;
   border: 0;
   flex-grow: 1;
-  min-width: 240px;
   outline: none;
-  padding: 7px 8px;
+  padding: 6.2px 8px;
   width: 100%;
 
+  @media (min-width: $breakpoint-md) {
+    min-width: 340px;
+  }
+
   ::ng-deep {
     .cm-content {
       caret-color: auto;
       color: var(--fg2);
       font-family: var(--mdc-dialog-subhead-font);
-      font-size: 12px;
+      font-size: 1.1em;
       padding: 0;
     }
 
     .calendar {
       background-color: var(--bg2);
       left: 0;
       margin: 5px auto;
+      max-width: 300px;
       position: absolute;
       top: 100%;
       width: 100%;
-      z-index: 1;
+      z-index: 2;
 
       ::ng-deep {
         .mat-calendar-table {

diff --git a/src/app/modules/search-input/components/advanced-search/advanced-search.component.ts b/src/app/modules/search-input/components/advanced-search/advanced-search.component.ts
@@ -137,16 +137,20 @@ export class AdvancedSearchComponent<T> implements OnInit {
     this.focusInput();
   }
 
+  hideDatePicker(): void {
+    this.showDatePicker$.next(false);
+  }
+
   dateSelected(value: string): void {
     this.setEditorContents(`"${format(new Date(value), 'yyyy-MM-dd')}" `, this.editorView.state.doc.length);
     this.focusInput();
-    this.showDatePicker$.next(false);
+    this.hideDatePicker();
   }
 
   protected onResetInput(): void {
     this.setEditorContents('', 0, this.editorView.state.doc.length);
     this.focusInput();
-    this.showDatePicker$.next(false);
+    this.hideDatePicker();
     this.paramsChange.emit([]);
     this.runSearch.emit();
   }

diff --git a/src/app/modules/search-input/components/basic-search/basic-search.component.scss b/src/app/modules/search-input/components/basic-search/basic-search.component.scss
@@ -1,3 +1,6 @@
+@import 'scss-imports/splitview';
+@import 'mixins/layout';
+
 :host {
   align-items: center;
   background: rgba(0, 0, 0, 0.1);
@@ -56,8 +59,18 @@
   flex-shrink: 1;
   user-select: none;
   white-space: nowrap;
+
+  @media (max-width: $breakpoint-sm) {
+    margin-top: 0;
+    white-space: inherit;
+    width: 70px;
+  }
 }
 
 input {
-  min-width: 200px;
+  @media (min-width: $breakpoint-md) {
+    min-width: 300px;
+  }
+
+  font-size: 1.1em;
 }
diff --git a/src/app/modules/search-input/components/search-input/search-input.component.html b/src/app/modules/search-input/components/search-input/search-input.component.html
@@ -1,5 +1,6 @@
 <ix-advanced-search
   *ngIf="isInAdvancedMode; else simpleSearch"
+  #advancedSearch
   [query]="advancedQuery"
   [properties]="properties"
   (paramsChange)="advancedSearchUpdated($event)"

diff --git a/src/app/modules/search-input/components/search-input/search-input.component.ts b/src/app/modules/search-input/components/search-input/search-input.component.ts
@@ -5,8 +5,10 @@ import {
   Input,
   OnChanges,
   Output,
+  ViewChild,
 } from '@angular/core';
 import { QueryFilters } from 'app/interfaces/query-api.interface';
+import { AdvancedSearchComponent } from 'app/modules/search-input/components/advanced-search/advanced-search.component';
 import { SearchProperty } from 'app/modules/search-input/types/search-property.interface';
 import {
   AdvancedSearchQuery,
@@ -27,6 +29,8 @@ export class SearchInputComponent<T> implements OnChanges {
   @Output() queryChange = new EventEmitter<SearchQuery<T>>();
   @Output() runSearch = new EventEmitter<void>();
 
+  @ViewChild('advancedSearch', { static: false }) advancedSearch: AdvancedSearchComponent<T>;
+
   ngOnChanges(): void {
     this.selectModeFromQuery();
   }

diff --git a/src/app/modules/search-input/services/advanced-search-autocomplete.service.ts b/src/app/modules/search-input/services/advanced-search-autocomplete.service.ts
@@ -13,11 +13,11 @@ import { QueryComparator } from 'app/interfaces/query-api.interface';
 import { QueryParserService } from 'app/modules/search-input/services/query-parser/query-parser.service';
 import { PropertyType, SearchProperty } from 'app/modules/search-input/types/search-property.interface';
 
-const inComparator = 'IN';
-const ninComparator = 'NIN';
-const comparatorSuggestions = [
-  '=', '!=', '<', '>', '<=', '>=', inComparator, ninComparator, 'RIN', 'RNIN', '~', '^', '!^', '$', '!$',
-] as QueryComparator[];
+const inComparator = 'in';
+const ninComparator = 'nin';
+const comparatorSuggestions: QueryComparator[] = [
+  '=', '!=', '<', '>', '<=', '>=', inComparator, ninComparator, '~', '^', '!^', '$', '!$',
+];
 
 const orSuggestion = 'OR';
 const andSuggestion = 'AND';
@@ -41,6 +41,22 @@ export class AdvancedSearchAutocompleteService<T> {
   private editorView: EditorView;
   private queryContext: QueryContext;
 
+  private comparatorHints = {
+    '=': this.translate.instant('{comparator} (Equals)', { comparator: '=' }),
+    '!=': this.translate.instant('{comparator} (Not Equals)', { comparator: '!=' }),
+    '<': this.translate.instant('{comparator} (Less Than)', { comparator: '<' }),
+    '>': this.translate.instant('{comparator} (Greater Than)', { comparator: '>' }),
+    '<=': this.translate.instant('{comparator} (Less Than or Equal To)', { comparator: '<=' }),
+    '>=': this.translate.instant('{comparator} (Greater Than or Equal To)', { comparator: '>=' }),
+    '~': this.translate.instant('{comparator} (Contains)', { comparator: '~' }),
+    '^': this.translate.instant('{comparator} (Starts With)', { comparator: '^' }),
+    '!^': this.translate.instant('{comparator} (Not Starts With)', { comparator: '!^' }),
+    '!$': this.translate.instant('{comparator} (Not Ends With)', { comparator: '!$' }),
+    in: this.translate.instant('{comparator} (In)', { comparator: 'IN' }),
+    nin: this.translate.instant('{comparator} (Not In)', { comparator: 'NIN' }),
+    $: this.translate.instant('{comparator} (Ends With)', { comparator: '$' }),
+  } as { [key in QueryComparator]: string };
+
   showDatePicker$ = new BehaviorSubject(false);
 
   constructor(
@@ -122,7 +138,7 @@ export class AdvancedSearchAutocompleteService<T> {
     const { lastToken, secondLastToken } = this.getTokenParts(tokens);
     let contextType = ContextType.Property;
 
-    const isPropertyType = comparatorSuggestions.some((item) => item?.toUpperCase() === lastToken?.toUpperCase())
+    const isPropertyType = comparatorSuggestions.some((item) => item?.toLowerCase() === lastToken?.toLowerCase())
       || this.isPartiallyLogicalOperator(lastToken);
 
     const isLogicalOperatorType = (
@@ -132,7 +148,7 @@ export class AdvancedSearchAutocompleteService<T> {
     ) || (
       this.isPartiallyComparator(secondLastToken) && query[cursorPosition] === ')'
       && (
-        (secondLastToken?.toUpperCase() === inComparator || secondLastToken?.toUpperCase() === ninComparator)
+        (secondLastToken?.toLowerCase() === inComparator || secondLastToken?.toLowerCase() === ninComparator)
         && lastToken?.startsWith('(') && lastToken?.endsWith(')')
       )
     );
@@ -199,22 +215,22 @@ export class AdvancedSearchAutocompleteService<T> {
   }
 
   private isPartiallyComparator(token: string): boolean {
-    return comparatorSuggestions.map((item) => item?.toUpperCase())?.includes(token?.toUpperCase());
+    return comparatorSuggestions.map((item) => item?.toLowerCase())?.includes(token?.toLowerCase());
   }
 
   private isPartiallyLogicalOperator(token: string): boolean {
-    return logicalSuggestions.map((item) => item?.toUpperCase())?.includes(token?.toUpperCase());
+    return logicalSuggestions.map((item) => item?.toLowerCase())?.includes(token?.toLowerCase());
   }
 
   private generateSuggestionsBasedOnContext(context: QueryContext): Observable<Option[]> {
     const { lastToken, secondLastToken, thirdLastToken } = this.getTokenParts(context.tokens);
 
-    const isInOrNin = (lastToken?.toUpperCase() === inComparator || lastToken?.toUpperCase() === ninComparator)
-      || secondLastToken?.toUpperCase() === inComparator || secondLastToken?.toUpperCase() === ninComparator;
+    const isInOrNin = (lastToken?.toLowerCase() === inComparator || lastToken?.toLowerCase() === ninComparator)
+      || secondLastToken?.toLowerCase() === inComparator || secondLastToken?.toLowerCase() === ninComparator;
 
     const searchedProperty = this.properties?.find((property) => {
-      return property.label?.toUpperCase() === thirdLastToken?.replace(regexMap.captureBetweenQuotes, '$1')?.toUpperCase()
-        || (property.label?.toUpperCase() === secondLastToken?.replace(regexMap.captureBetweenQuotes, '$1')?.toUpperCase()
+      return property.label?.toLowerCase() === thirdLastToken?.replace(regexMap.captureBetweenQuotes, '$1')?.toLowerCase()
+        || (property.label?.toLowerCase() === secondLastToken?.replace(regexMap.captureBetweenQuotes, '$1')?.toLowerCase()
         && this.isPartiallyComparator(lastToken));
     });
 
@@ -259,7 +275,9 @@ export class AdvancedSearchAutocompleteService<T> {
         return of(logicalSuggestions.map((property) => ({ label: property, value: property })));
 
       case ContextType.Comparator:
-        return of(comparatorSuggestions.map((property) => ({ label: property, value: property.toUpperCase() })));
+        return of(comparatorSuggestions.map((property) => ({
+          label: this.comparatorHints?.[property] || property, value: property.toUpperCase(),
+        })));
       default:
         return of([]);
     }

diff --git a/src/app/modules/search-input/services/query-parser/query-parser.service.ts b/src/app/modules/search-input/services/query-parser/query-parser.service.ts
@@ -200,7 +200,7 @@ export class QueryParserService {
     value: LiteralValue | LiteralValue[],
   ): LiteralValue | LiteralValue[] {
     if (property?.propertyType === PropertyType.Date) {
-      return this.formatMillisecondsToDate(value as number | number[]);
+      return this.formatUnixSecondsToDate(value as number | number[]);
     }
 
     if (property?.propertyType === PropertyType.Memory) {
@@ -214,16 +214,16 @@ export class QueryParserService {
     return value;
   }
 
-  private formatMillisecondsToDate(value: number | number[]): string | string[] {
-    const convertMillis = (millis: number): string => {
-      return format(fromUnixTime(millis / 1000), 'yyyy-MM-dd');
+  private formatUnixSecondsToDate(value: number | number[]): string | string[] {
+    const convertUnixSeconds = (seconds: number): string => {
+      return format(fromUnixTime(seconds), 'yyyy-MM-dd');
     };
 
     if (Array.isArray(value)) {
-      return value.map(convertMillis);
+      return value.map(convertUnixSeconds);
     }
 
-    return convertMillis(value);
+    return convertUnixSeconds(value);
   }
 
   private formatMemoryValue(

diff --git a/src/app/modules/search-input/services/query-to-api/query-to-api.service.spec.ts b/src/app/modules/search-input/services/query-to-api/query-to-api.service.spec.ts
@@ -204,7 +204,7 @@ describe('QueryToApiService', () => {
     ]);
 
     expect(condition).toEqual([
-      ['message_timestamp', '>', 1699999200000], ['memory_size', '<', 57671680],
+      ['message_timestamp', '>', 1699999200], ['memory_size', '<', 57671680],
     ]);
   });
 

diff --git a/src/app/modules/search-input/services/query-to-api/query-to-api.service.ts b/src/app/modules/search-input/services/query-to-api/query-to-api.service.ts
@@ -79,7 +79,7 @@ export class QueryToApiService<T> {
     value: LiteralValue | LiteralValue[],
   ): LiteralValue | LiteralValue[] {
     if (property?.propertyType === PropertyType.Date) {
-      return this.parseDateAsMilliseconds(value);
+      return this.parseDateAsUnixSeconds(value);
     }
 
     if (property?.propertyType === PropertyType.Memory) {
@@ -93,13 +93,13 @@ export class QueryToApiService<T> {
     return value;
   }
 
-  private parseDateAsMilliseconds(value: LiteralValue | LiteralValue[]): number | number[] {
+  private parseDateAsUnixSeconds(value: LiteralValue | LiteralValue[]): number | number[] {
     const convertDate = (dateValue: LiteralValue): number | null => {
       const date = parseISO(dateValue as string);
       if (Number.isNaN(date.getTime())) {
         return null;
       }
-      return startOfDay(date).getTime();
+      return startOfDay(date).getTime() / 1000;
     };
 
     if (Array.isArray(value)) {

diff --git a/src/app/pages/audit/components/audit/audit.component.html b/src/app/pages/audit/components/audit/audit.component.html
@@ -11,30 +11,27 @@
         class="search-input"
         [properties]="searchProperties"
         [query]="searchQuery"
-        (runSearch)="onSearch(searchInput.query); updateUrlOptions()"
+        (runSearch)="onSearch(searchInput.query); updateUrlOptions(); searchInput.advancedSearch?.hideDatePicker()"
       ></ix-search-input2>
-      <button
-        mat-button
-        type="button"
-        color="primary"
-        ixTest="search"
-        (click)="onSearch(searchInput.query); updateUrlOptions()"
-      >
-        {{ 'Search' | translate }}
-      </button>
+      <div class="search-button-wrapper">
+        <button
+          mat-button
+          type="button"
+          color="primary"
+          ixTest="search"
+          (click)="onSearch(searchInput.query); updateUrlOptions(); searchInput.advancedSearch?.hideDatePicker()"
+        >
+          {{ 'Search' | translate }}
+        </button>
+        <ng-container *ngIf="isMobileView" [ngTemplateOutlet]="exportButton"></ng-container>
+      </div>
     </div>
-    <ix-export-button
-      *ngIf="dataProvider.totalRows"
-      method="audit.export"
-      [searchQuery]="searchQuery"
-      [sorting]="dataProvider.sorting"
-      [defaultFilters]="basicQueryFilters"
-    ></ix-export-button>
+    <ng-container *ngIf="!isMobileView" [ngTemplateOutlet]="exportButton"></ng-container>
   </div>
 </mat-card>
 
 <div class="container" fxLayoutGap="16px">
-  <div *ngIf="!(showMobileDetails && isMobileView)" class="table-container">
+  <div class="table-container" [class.hidden]="showMobileDetails && isMobileView">
     <div class="sticky-header">
       <thead
         class="audit-header-row"
@@ -87,3 +84,13 @@
     ></ix-log-details-panel>
   </div>
 </div>
+
+<ng-template #exportButton>
+  <ix-export-button
+    *ngIf="dataProvider.totalRows"
+    method="audit.export"
+    [searchQuery]="searchQuery"
+    [sorting]="dataProvider.sorting"
+    [defaultFilters]="basicQueryFilters"
+  ></ix-export-button>
+</ng-template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -204,7 +204,7 @@ describe('QueryToApiService', () => { @@
         ]);
         expect(condition).toEqual([
-          ['message_timestamp', '>', 1699999200000], ['memory_size', '<', 57671680],
+          ['message_timestamp', '>', 1699999200], ['memory_size', '<', 57671680],
         ]);
       });
@@ Expand Down @@