icu-14735 add search & pagination to aliases

addons/api/addon/services/indexed-db.js

@@ -29,6 +29,8 @@ export const modelIndexes = {
     '&id, attributes.created_time, attributes.type, attributes.name, attributes.description, attributes.scope.scope_id, attributes.plugin.name',
   'auth-method':
     '&id, attributes.created_time, attributes.type, attributes.name, attributes.description, attributes.is_primary, attributes.scope.scope_id',
+  alias:
+    '&id, attributes.created_time, attributes.type, attributes.value, attributes.name, attributes.description, attributes.destination_id, attributes.scope.scope_id',
 };
 
 export const formatDbName = (userId, clusterUrl) =>

ui/admin/app/controllers/scopes/scope/aliases/index.js

@@ -6,26 +6,37 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { loading } from 'ember-loading';
+import { debounce } from 'core/decorators/debounce';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 import { confirm } from 'core/decorators/confirm';
 
 export default class ScopesScopeAliasesIndexController extends Controller {
   // =services
+
   @service can;
   @service router;
 
+  // =attributes
+
+  queryParams = ['search', 'page', 'pageSize'];
+
+  @tracked search;
+  @tracked page = 1;
+  @tracked pageSize = 10;
+
   // =actions
 
   /**
    * Rollback changes on an alias.
    * @param {AliasModel} alias
    */
   @action
-  async cancel(alias) {
+  cancel(alias) {
     const { isNew } = alias;
     alias.rollbackAttributes();
-    if (isNew) await this.router.transitionTo('scopes.scope.aliases');
+    if (isNew) this.router.transitionTo('scopes.scope.aliases');
   }
 
   /**
@@ -49,7 +60,7 @@ export default class ScopesScopeAliasesIndexController extends Controller {
   }
 
   /**
-   * Remove destaination_id from alias
+   * Remove destination_id from alias
    * @param {AliasModel} alias
    */
   @action
@@ -77,4 +88,16 @@ export default class ScopesScopeAliasesIndexController extends Controller {
     await this.router.replaceWith('scopes.scope.aliases');
     await this.router.refresh();
   }
+
+  /**
+   * Handles input on each keystroke and the search queryParam
+   * @param {object} event
+   */
+  @action
+  @debounce(250)
+  handleSearchInput(event) {
+    const { value } = event.target;
+    this.search = value;
+    this.page = 1;
+  }
 }

ui/admin/app/routes/scopes/scope/aliases.js

@@ -5,14 +5,11 @@
 
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { all, hash } from 'rsvp';
 
 export default class ScopesScopeAliasesRoute extends Route {
   // =services
 
-  @service store;
   @service session;
-  @service can;
   @service router;
 
   // =methods
@@ -23,34 +20,4 @@ export default class ScopesScopeAliasesRoute extends Route {
   beforeModel() {
     if (!this.session.isAuthenticated) this.router.transitionTo('index');
   }
-
-  /**
-   * Load all aliases in current scope
-   * @return {Promise<[AliasModel]>}
-   */
-  async model() {
-    const scope = this.modelFor('scopes.scope');
-    const { id: scope_id } = scope;
-
-    if (
-      this.can.can('list model', scope, {
-        collection: 'aliases',
-      })
-    ) {
-      const aliases = await this.store.query('alias', { scope_id });
-      // since we don't receive target info from aliases list API,
-      // we query the store to fetch target information based on the destination id
-      const aliasesWithResourceNames = await all(
-        aliases.map((alias) =>
-          hash({
-            alias,
-            target: alias.destination_id
-              ? this.store.findRecord('target', alias.destination_id)
-              : null,
-          }),
-        ),
-      );
-      return aliasesWithResourceNames;
-    }
-  }
 }

ui/admin/app/routes/scopes/scope/aliases/index.js

@@ -4,10 +4,100 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
 
 export default class ScopesScopeAliasesIndexRoute extends Route {
+  // =services
+
+  @service store;
+  @service can;
+
+  // =attributes
+
+  queryParams = {
+    search: {
+      refreshModel: true,
+      replace: true,
+    },
+    page: {
+      refreshModel: true,
+    },
+    pageSize: {
+      refreshModel: true,
+    },
+  };
+
   // =methods
 
+  /**
+   * Loads queried aliases and the number of aliases under current scope.
+   * @returns {Promise<{totalItems: number, aliases: [object], aliasesExist: boolean}>}
+   */
+  async model({ search, page, pageSize }) {
+    const scope = this.modelFor('scopes.scope');
+    const { id: scope_id } = scope;
+
+    let aliases;
+    let doAliasesExist = false;
+    let totalItems = 0;
+
+    if (
+      this.can.can('list model', scope, {
+        collection: 'aliases',
+      })
+    ) {
+      aliases = await this.store.query('alias', {
+        scope_id,
+        query: { search },
+        page,
+        pageSize,
+      });
+      totalItems = aliases.meta?.totalItems;
+      // since we don't receive target info from aliases list API,
+      // we query the store to fetch target information based on the destination id
+      aliases = await Promise.all(
+        aliases.map((alias) =>
+          hash({
+            alias,
+            target: alias.destination_id
+              ? this.store.findRecord('target', alias.destination_id, {
+                  backgroundReload: false,
+                })
+              : null,
+          }),
+        ),
+      );
+      doAliasesExist = await this.getDoAliasesExist(scope_id, totalItems);
+    }
+
+    return { aliases, doAliasesExist, totalItems };
+  }
+
+  /**
+   * Sets doAliasesExist to true if there are any aliases.
+   * @param {string} scope_id
+   * @param {number} totalItems
+   * @returns {Promise<boolean>}
+   */
+  async getDoAliasesExist(scope_id, totalItems) {
+    if (totalItems > 0) {
+      return true;
+    }
+    const options = { pushToStore: false, peekIndexedDB: true };
+    const aliases = await this.store.query(
+      'alias',
+      {
+        scope_id,
+        query: { filters: { scope_id: [{ equals: scope_id }] } },
+        page: 1,
+        pageSize: 1,
+      },
+      options,
+    );
+    return aliases.length > 0;
+  }
+
   setupController(controller) {
     const scope = this.modelFor('scopes.scope');
     super.setupController(...arguments);

ui/admin/app/routes/scopes/scope/auth-methods/index.js

@@ -40,7 +40,7 @@ export default class ScopesScopeAuthMethodsIndexRoute extends Route {
 
   /**
    * Loads queried auth-methods and the number of auth-methods under current scope.
-   * @returns {Promise<{totalItems: number, authMethods: [AuthMethodModel], authMethodsExist: boolean }> }
+   * @returns {Promise<{totalItems: number, authMethods: [AuthMethodModel], doAuthMethodsExist: boolean }> }
    */
   async model({ search, types, primary, page, pageSize }) {
     const scope = this.modelFor('scopes.scope');
@@ -62,7 +62,7 @@ export default class ScopesScopeAuthMethodsIndexRoute extends Route {
 
     let authMethods;
     let totalItems = 0;
-    let authMethodsExist = false;
+    let doAuthMethodsExist = false;
     if (this.can.can('list model', scope, { collection: 'auth-methods' })) {
       // TODO: Remove storeToken option as this is a temporary fix for auth-methods.
       const options = { storeToken: false };
@@ -77,19 +77,22 @@ export default class ScopesScopeAuthMethodsIndexRoute extends Route {
         options,
       );
       totalItems = authMethods.meta?.totalItems;
-      authMethodsExist = await this.getAuthMethodsExist(scope_id, totalItems);
+      doAuthMethodsExist = await this.getDoAuthMethodsExist(
+        scope_id,
+        totalItems,
+      );
     }
 
-    return { authMethods, authMethodsExist, totalItems };
+    return { authMethods, doAuthMethodsExist, totalItems };
   }
 
   /**
-   * Sets authMethodsExist to true if there exists any auth methods.
+   * Sets doAuthMethodsExist to true if there exists any auth methods.
    * @param {string} scope_id
    * @param {number} totalItems
    * @returns {Promise<boolean>}
    */
-  async getAuthMethodsExist(scope_id, totalItems) {
+  async getDoAuthMethodsExist(scope_id, totalItems) {
     if (totalItems > 0) {
       return true;
     }

ui/admin/app/routes/scopes/scope/credential-stores/index.js

@@ -35,7 +35,7 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
 
   /**
    * Loads queried credential-stores and the number of credential-stores under current scope.
-   * @returns {Promise<{totalItems: number, credentialStores: [CredentialStoreModel], credentialStoresExist: boolean }> }
+   * @returns {Promise<{totalItems: number, credentialStores: [CredentialStoreModel], doCredentialStoresExist: boolean }> }
    */
   async model({ search, types, page, pageSize }) {
     const scope = this.modelFor('scopes.scope');
@@ -51,7 +51,7 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
 
     let credentialStores;
     let totalItems = 0;
-    let credentialStoresExist = false;
+    let doCredentialStoresExist = false;
     if (
       this.can.can('list model', scope, {
         collection: 'credential-stores',
@@ -64,22 +64,21 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
         pageSize,
       });
       totalItems = credentialStores.meta?.totalItems;
-      credentialStoresExist = await this.getCredentialStoresExist(
+      doCredentialStoresExist = await this.getDoCredentialStoresExist(
         scope_id,
         totalItems,
       );
     }
-
-    return { credentialStores, credentialStoresExist, totalItems };
+    return { credentialStores, doCredentialStoresExist, totalItems };
   }
 
   /**
-   * Sets credentialStoresExist to true if there exists any credential-stores.
+   * Sets doCredentialStoresExist to true if there exists any credential-stores.
    * @param {string} scope_id
    * @param {number} totalItems
    * @returns {Promise<boolean>}
    */
-  async getCredentialStoresExist(scope_id, totalItems) {
+  async getDoCredentialStoresExist(scope_id, totalItems) {
     if (totalItems > 0) {
       return true;
     }

ui/admin/app/routes/scopes/scope/groups/index.js

@@ -31,14 +31,14 @@ export default class ScopesScopeGroupsIndexRoute extends Route {
 
   /**
    * Loads queried groups and the number of groups under current scope.
-   * @returns {Promise<{totalItems: number, groups: [GroupModel], groupsExist: boolean }> }
+   * @returns {Promise<{totalItems: number, groups: [GroupModel], doGroupsExist: boolean }> }
    */
   async model({ search, page, pageSize }) {
     const scope = this.modelFor('scopes.scope');
     const { id: scope_id } = scope;
     let groups = [];
     let totalItems = 0;
-    let groupsExist = false;
+    let doGroupsExist = false;
     const filters = { scope_id: [{ equals: scope_id }] };
 
     if (this.can.can('list model', scope, { collection: 'groups' })) {
@@ -49,18 +49,19 @@ export default class ScopesScopeGroupsIndexRoute extends Route {
         pageSize,
       });
       totalItems = groups.meta?.totalItems;
-      groupsExist = await this.getGroupsExist(scope_id, totalItems);
+      doGroupsExist = await this.getDoGroupsExist(scope_id, totalItems);
     }
 
-    return { groups, groupsExist, totalItems };
+    return { groups, doGroupsExist, totalItems };
   }
 
   /**
-   * Sets groupsExist to true if there exists any groups.
+   * Sets doGroupsExist to true if there exists any groups.
    * @param {string} scope_id
    * @param {number} totalItems
+   * @returns {Promise<boolean>}
    */
-  async getGroupsExist(scope_id, totalItems) {
+  async getDoGroupsExist(scope_id, totalItems) {
     if (totalItems > 0) {
       return true;
     }