NAS-133676 / 25.04-RC.1 / Check/add search elements for new pages (by AlexKarpov98)

src/app/directives/ui-search.directive.ts

@@ -62,7 +62,11 @@ export class UiSearchDirective implements OnInit, OnDestroy {
 
   private tryHighlightAnchors(element: UiSearchableElement, attemptCount: number): void {
     if (this.elementRef.nativeElement) {
-      this.highlightAndClickElement(this.elementRef.nativeElement, !!element.triggerAnchor);
+      setTimeout(() => {
+        const anchorRef = document.getElementById(this.elementRef.nativeElement.id) || this.elementRef.nativeElement;
+        this.highlightAndClickElement(anchorRef, !!element.triggerAnchor);
+      }, searchDelayConst);
+
       if (this.elementRef.nativeElement.id !== element.anchor) {
         this.highlightElementAnchor(element.anchor);
       }

src/app/pages/sharing/iscsi/authorized-access/authorized-access-list/authorized-access-list.component.html

@@ -7,7 +7,14 @@ <h3>{{ 'Authorized Access' | translate }}</h3>
 
       <ix-table-columns-selector [columns]="columns" (columnsChange)="columnsChange($event)"></ix-table-columns-selector>
 
-      <button *ixRequiresRoles="requiredRoles" mat-button color="primary" ixTest="add-target-extent" (click)="doAdd()">
+      <button
+        *ixRequiresRoles="requiredRoles"
+        mat-button
+        color="primary"
+        ixTest="add-target-extent"
+        [ixUiSearch]="searchableElements.elements.add"
+        (click)="doAdd()"
+      >
         {{ 'Add' | translate }}
       </button>
     </div>

src/app/pages/sharing/iscsi/authorized-access/authorized-access-list/authorized-access-list.elements.ts

@@ -8,5 +8,10 @@ export const authorizedAccessListElements = {
     list: {
       anchor: 'authorized-access-list',
     },
+    add: {
+      hierarchy: [T('Add Authorized Access')],
+      synonyms: [T('New Authorized Access'), T('Create Authorized Access')],
+      anchor: 'add-authorized-access',
+    },
   },
 } satisfies UiSearchableElement;

src/app/pages/sharing/iscsi/extent/extent-list/extent-list.component.html

@@ -8,7 +8,14 @@ <h3>{{ 'Extents' | translate }}</h3>
 
       <ix-table-columns-selector [columns]="columns" (columnsChange)="columnsChange($event)"></ix-table-columns-selector>
 
-      <button *ixRequiresRoles="requiredRoles" mat-button color="primary" ixTest="add-target" (click)="doAdd()">
+      <button
+        *ixRequiresRoles="requiredRoles"
+        mat-button
+        color="primary"
+        ixTest="add-target"
+        [ixUiSearch]="searchableElements.elements.add"
+        (click)="doAdd()"
+      >
         {{ 'Add' | translate }}
       </button>
     </div>

src/app/pages/sharing/iscsi/extent/extent-list/extent-list.elements.ts

@@ -8,5 +8,10 @@ export const extentListElements = {
     list: {
       anchor: 'extent-list',
     },
+    add: {
+      hierarchy: [T('Add Extent')],
+      synonyms: [T('New Extent'), T('Create Extent')],
+      anchor: 'add-extent',
+    },
   },
 } satisfies UiSearchableElement;

src/app/pages/sharing/iscsi/fibre-channel-ports/fibre-channel-ports.component.html

@@ -12,7 +12,6 @@ <h3>{{ 'Fibre Channel Ports' | translate }}</h3>
   </mat-toolbar-row>
   <mat-card-content>
     <ix-table
-      [ixUiSearch]="searchableElements.elements.list"
       [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
       [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
     >

src/app/pages/sharing/iscsi/initiator/initiator-list/initiator-list.component.html

@@ -7,7 +7,13 @@ <h3>{{ 'Initiators Groups' | translate }}</h3>
 
       <ix-table-columns-selector [columns]="columns" (columnsChange)="columnsChange($event)"></ix-table-columns-selector>
 
-      <button *ixRequiresRoles="requiredRoles" mat-button color="primary" ixTest="add-initiator" (click)="doAdd()">
+      <button
+        *ixRequiresRoles="requiredRoles"
+        mat-button
+        color="primary"
+        ixTest="add-initiator"
+        (click)="doAdd()"
+      >
         {{ 'Add' | translate }}
       </button>
     </div>

src/app/pages/sharing/iscsi/portal/portal-list/portal-list.component.html

@@ -7,7 +7,14 @@ <h3>{{ 'Portals' | translate }}</h3>
 
       <ix-table-columns-selector [columns]="columns" (columnsChange)="columnsChange($event)"></ix-table-columns-selector>
 
-      <button *ixRequiresRoles="requiredRoles" mat-button color="primary" ixTest="add-portal" (click)="doAdd()">
+      <button
+        *ixRequiresRoles="requiredRoles"
+        mat-button
+        color="primary"
+        ixTest="add-portal"
+        [ixUiSearch]="searchableElements.elements.add"
+        (click)="doAdd()"
+      >
         {{ 'Add' | translate }}
       </button>
     </div>

src/app/pages/sharing/iscsi/portal/portal-list/portal-list.elements.ts

@@ -8,5 +8,10 @@ export const portalListElements = {
     list: {
       anchor: 'portal-list',
     },
+    add: {
+      hierarchy: [T('Add Portal')],
+      synonyms: [T('New Portal'), T('Create Portal')],
+      anchor: 'add-portal',
+    },
   },
 } satisfies UiSearchableElement;

src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.html

@@ -6,7 +6,14 @@ <h3>{{ 'Targets' | translate }}</h3>
     <div class="actions action-icon">
       <ix-search-input1 [value]="filterString" (search)="onListFiltered($event)"></ix-search-input1>
 
-      <button *ixRequiresRoles="requiredRoles" mat-button color="primary" ixTest="add-target" (click)="doAdd()">
+      <button
+        *ixRequiresRoles="requiredRoles"
+        mat-button
+        color="primary"
+        ixTest="add-target"
+        [ixUiSearch]="searchableElements.elements.add"
+        (click)="doAdd()"
+      >
         {{ 'Add' | translate }}
       </button>
     </div>

src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.elements.ts

@@ -8,5 +8,10 @@ export const targetListElements = {
     list: {
       anchor: 'target-list',
     },
+    add: {
+      hierarchy: [T('Add Target')],
+      synonyms: [T('New Target'), T('Create Target')],
+      anchor: 'add-target',
+    },
   },
 } satisfies UiSearchableElement;

src/app/pages/virtualization/components/all-instances/all-instances-header/all-instances-header.component.html

@@ -4,6 +4,7 @@
   mat-button
   ixTest="edit-global-settings"
   [color]="needToSetupPool() ? 'primary' : 'default'"
+  [ixUiSearch]="searchableElements.elements.globalSettings"
   (click)="onEdit()"
 >
   @if (needToSetupPool()) {
@@ -28,5 +29,6 @@
     [color]="canAddNewInstances() ? 'primary' : 'default'"
     [disabled]="!canAddNewInstances()"
     [routerLink]="['/virtualization/new']"
+    [ixUiSearch]="searchableElements.elements.add"
   >{{ 'Create New Instance' | translate }}</a>
 }

src/app/pages/virtualization/components/all-instances/all-instances-header/all-instances-header.component.ts

@@ -3,9 +3,11 @@ import { MatAnchor, MatButton } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
+import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { VirtualizationGlobalState } from 'app/enums/virtualization.enum';
 import { SlideIn } from 'app/modules/slide-ins/slide-in';
 import { TestDirective } from 'app/modules/test-id/test.directive';
+import { allInstancesHeaderElements } from 'app/pages/virtualization/components/all-instances/all-instances-header/all-instances-header.elements';
 import {
   GlobalConfigFormComponent,
 } from 'app/pages/virtualization/components/all-instances/all-instances-header/global-config-form/global-config-form.component';
@@ -30,11 +32,14 @@ import {
     MatAnchor,
     RouterLink,
     VirtualizationStateComponent,
+    UiSearchDirective,
   ],
 })
 export class AllInstancesHeaderComponent {
   protected readonly state = this.configStore.virtualizationState;
 
+  protected readonly searchableElements = allInstancesHeaderElements;
+
   protected readonly needToSetupPool = computed(() => this.state() === VirtualizationGlobalState.NoPool);
   protected readonly isLocked = computed(() => this.state() === VirtualizationGlobalState.Locked);
   protected readonly config = this.configStore.config;

src/app/pages/virtualization/components/all-instances/all-instances-header/all-instances-header.elements.ts

@@ -0,0 +1,20 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+import { UiSearchableElement } from 'app/modules/global-search/interfaces/ui-searchable-element.interface';
+
+export const allInstancesHeaderElements = {
+  hierarchy: [T('Virtualization'), T('Containers')],
+  synonyms: [T('VMs'), T('Virtual Machines')],
+  anchorRouterLink: ['/virtualization'],
+  elements: {
+    globalSettings: {
+      hierarchy: [T('Global Settings')],
+      synonyms: [T('VM Settings'), T('Virtual Machine Settings')],
+      anchor: 'vm-global-settings',
+    },
+    add: {
+      hierarchy: [T('Create New Instance')],
+      synonyms: [T('Add Instance'), T('Create VM'), T('Add VM'), T('New VM'), T('New Container'), T('Add Container')],
+      anchor: 'add-instance',
+    },
+  },
+} satisfies UiSearchableElement;

src/app/pages/virtualization/components/all-instances/all-instances.component.html

@@ -8,6 +8,7 @@
 >
   <ix-instance-list
     master
+    [ixUiSearch]="searchableElements.elements.list"
     [isMobileView]="masterDetailView.isMobileView()"
     (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
   ></ix-instance-list>

src/app/pages/virtualization/components/all-instances/all-instances.component.ts

@@ -5,14 +5,14 @@ import { Router, NavigationStart } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
 import { filter } from 'rxjs';
+import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { MasterDetailViewComponent } from 'app/modules/master-detail-view/master-detail-view.component';
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
 import {
   AllInstancesHeaderComponent,
 } from 'app/pages/virtualization/components/all-instances/all-instances-header/all-instances-header.component';
-import {
-  InstanceDetailsComponent,
-} from 'app/pages/virtualization/components/all-instances/instance-details/instance-details.component';
+import { allInstancesElements } from 'app/pages/virtualization/components/all-instances/all-instances.elements';
+import { InstanceDetailsComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-details.component';
 import { InstanceListComponent } from 'app/pages/virtualization/components/all-instances/instance-list/instance-list.component';
 import { VirtualizationConfigStore } from 'app/pages/virtualization/stores/virtualization-config.store';
 import { VirtualizationDevicesStore } from 'app/pages/virtualization/stores/virtualization-devices.store';
@@ -31,11 +31,14 @@ import { VirtualizationInstancesStore } from 'app/pages/virtualization/stores/vi
     InstanceDetailsComponent,
     InstanceListComponent,
     MasterDetailViewComponent,
+    UiSearchDirective,
   ],
 })
 export class AllInstancesComponent implements OnInit {
   readonly selectedInstance = this.deviceStore.selectedInstance;
 
+  protected readonly searchableElements = allInstancesElements;
+
   constructor(
     private configStore: VirtualizationConfigStore,
     private instancesStore: VirtualizationInstancesStore,

src/app/pages/virtualization/components/all-instances/all-instances.elements.ts

@@ -0,0 +1,15 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+import { UiSearchableElement } from 'app/modules/global-search/interfaces/ui-searchable-element.interface';
+
+export const allInstancesElements = {
+  hierarchy: [T('Virtualization'), T('Containers')],
+  synonyms: [T('VM'), T('Virtual Machines')],
+  anchorRouterLink: ['/virtualization/view/def'],
+  elements: {
+    list: {
+      hierarchy: [T('Instances')],
+      synonyms: [T('Containers')],
+      anchor: 'containers-list',
+    },
+  },
+} satisfies UiSearchableElement;

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.html

@@ -1,12 +1,34 @@
 <div class="cards">
   <div class="scroll-window">
-    <ix-instance-general-info [instance]="instance()"></ix-instance-general-info>
-    <ix-instance-devices></ix-instance-devices>
-    <ix-instance-disks></ix-instance-disks>
-    <ix-instance-nics></ix-instance-nics>
-    <ix-instance-proxies></ix-instance-proxies>
+    <ix-instance-general-info
+      [instance]="instance()"
+      [ixUiSearch]="searchableElements.elements.generalInfo"
+    ></ix-instance-general-info>
+
+    <ix-instance-devices
+      [ixUiSearch]="searchableElements.elements.devices"
+    ></ix-instance-devices>
+
+    <ix-instance-disks
+      [ixUiSearch]="searchableElements.elements.disks"
+    ></ix-instance-disks>
+
+    <ix-instance-nics
+      [ixUiSearch]="searchableElements.elements.nic"
+    ></ix-instance-nics>
+
+    <ix-instance-proxies
+      [ixUiSearch]="searchableElements.elements.proxies"
+    ></ix-instance-proxies>
+
     <ix-instance-idmap [instance]="instance()"></ix-instance-idmap>
-    <ix-instance-tools [instance]="instance()"></ix-instance-tools>
-    <ix-instance-metrics [instance]="instance()"></ix-instance-metrics>
+
+    <ix-instance-tools [instance]="instance()"
+      [ixUiSearch]="searchableElements.elements.tools"
+    ></ix-instance-tools>
+
+    <ix-instance-metrics [instance]="instance()"
+      [ixUiSearch]="searchableElements.elements.metrics"
+    ></ix-instance-metrics>
   </div>
 </div>

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.spec.ts

@@ -2,9 +2,7 @@ import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockComponents } from 'ng-mocks';
 import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
-import {
-  InstanceDetailsComponent,
-} from 'app/pages/virtualization/components/all-instances/instance-details/instance-details.component';
+import { InstanceDetailsComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-details.component';
 import {
   InstanceDevicesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-devices/instance-devices.component';

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.ts

@@ -2,7 +2,9 @@ import {
   ChangeDetectionStrategy, Component, input,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import { instanceDetailsElements } from 'app/pages/virtualization/components/all-instances/instance-details/instance-details.elements';
 import {
   InstanceDevicesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-devices/instance-devices.component';
@@ -37,8 +39,11 @@ import {
     InstanceMetricsComponent,
     InstanceNicsComponent,
     InstanceIdmapComponent,
+    UiSearchDirective,
   ],
 })
 export class InstanceDetailsComponent {
   instance = input.required<VirtualizationInstance>();
+
+  protected readonly searchableElements = instanceDetailsElements;
 }

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.elements.ts

@@ -0,0 +1,38 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+import { UiSearchableElement } from 'app/modules/global-search/interfaces/ui-searchable-element.interface';
+
+export const instanceDetailsElements = {
+  hierarchy: [T('Virtualization'), T('Containers')],
+  synonyms: [T('VM'), T('Virtual Machines'), T('Instances')],
+  anchorRouterLink: ['/virtualization/view/def'],
+  elements: {
+    generalInfo: {
+      hierarchy: [T('General Info')],
+      anchor: 'general-info',
+    },
+    devices: {
+      hierarchy: [T('Devices')],
+      anchor: 'devices',
+    },
+    disks: {
+      hierarchy: [T('Disks')],
+      anchor: 'disks',
+    },
+    nic: {
+      hierarchy: [T('NIC')],
+      anchor: 'nic',
+    },
+    proxies: {
+      hierarchy: [T('Proxies')],
+      anchor: 'proxies',
+    },
+    tools: {
+      hierarchy: [T('Tools')],
+      anchor: 'tools',
+    },
+    metrics: {
+      hierarchy: [T('Metrics')],
+      anchor: 'metrics',
+    },
+  },
+} satisfies UiSearchableElement;