feat: 🎸 Refactored sessions page filters to load separately (#3053)

Author: ZedLi

ui/admin/app/controllers/scopes/scope/session-recordings/index.js

@@ -9,29 +9,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { assert } from '@ember/debug';
 import { restartableTask } from 'ember-concurrency';
-
-class FilterOptions {
-  @tracked search;
-  @tracked _options = [];
-  #allOptions = new Map();
-
-  get options() {
-    return this._options;
-  }
-
-  set options(newOptions) {
-    this._options = newOptions;
-    newOptions.forEach((option) => {
-      this.#allOptions.set(option.id, option);
-    });
-  }
-
-  // Keep track of all filter options that are loaded so they can be
-  // displayed in the selected filters regardless of search input
-  get allOptions() {
-    return Array.from(this.#allOptions.values());
-  }
-}
+import FilterOptions from 'admin/utils/filter-options';
 
 export default class ScopesScopeSessionRecordingsIndexController extends Controller {
   // =services

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

@@ -8,18 +8,22 @@ import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import {
   STATUS_SESSION_ACTIVE,
-  STATUS_SESSION_PENDING,
   STATUS_SESSION_CANCELING,
+  STATUS_SESSION_PENDING,
   statusTypes,
 } from 'api/models/session';
 import { action } from '@ember/object';
-import { notifySuccess, notifyError } from 'core/decorators/notify';
+import { notifyError, notifySuccess } from 'core/decorators/notify';
+import { restartableTask } from 'ember-concurrency';
+import { assert } from '@ember/debug';
+import FilterOptions from 'admin/utils/filter-options';
 
 export default class ScopesScopeSessionsIndexController extends Controller {
   // =services
 
   @service store;
   @service intl;
+  @service db;
 
   // =attributes
 
@@ -34,6 +38,9 @@ export default class ScopesScopeSessionsIndexController extends Controller {
     'sortDirection',
   ];
 
+  userFilters = new FilterOptions();
+  targetFilters = new FilterOptions();
+
   @tracked search;
   @tracked users = [];
   @tracked targets = [];
@@ -54,8 +61,8 @@ export default class ScopesScopeSessionsIndexController extends Controller {
   get filters() {
     return {
       allFilters: {
-        users: this.model.associatedUsers,
-        targets: this.model.associatedTargets,
+        users: this.userFilters.allOptions,
+        targets: this.targetFilters.allOptions,
         status: this.sessionStatusOptions,
       },
       selectedFilters: {
@@ -77,6 +84,74 @@ export default class ScopesScopeSessionsIndexController extends Controller {
     }));
   }
 
+  /**
+   * Configurations for different filter options
+   * @returns {[object]}
+   */
+  get filterConfigs() {
+    return {
+      userFilters: {
+        resource: 'user',
+        select: [
+          { field: 'id', isDistinct: true },
+          { field: 'name', isDistinct: true },
+        ],
+        searchFields: ['id', 'name'],
+        filters: {
+          joins: [
+            {
+              resource: 'session',
+              joinOn: 'user_id',
+            },
+          ],
+        },
+      },
+      targetFilters: {
+        resource: 'target',
+        select: [
+          { field: 'id', isDistinct: true },
+          { field: 'name', isDistinct: true },
+        ],
+        searchFields: ['id', 'name'],
+        filters: {
+          joins: [
+            {
+              resource: 'session',
+              joinOn: 'target_id',
+            },
+          ],
+        },
+      },
+    };
+  }
+
+  /**
+   * Generic retrieve function for session filter options
+   * @param {string} type - The type of options to retrieve (userFilters, targetFilters)
+   * @param {string} search - Search term
+   * @returns {Promise<Array>}
+   */
+  async retrieveFilterOptions(type, search) {
+    const config = this.filterConfigs[type];
+    assert(`Unknown filter type: ${type}`, config);
+
+    return this.db.query(config.resource, {
+      select: config.select,
+      query: {
+        search: { text: search, fields: config.searchFields },
+        filters: config.filters,
+      },
+      page: 1,
+      pageSize: 250,
+    });
+  }
+
+  loadItems = restartableTask(async () => {
+    this.userFilters.options = await this.retrieveFilterOptions('userFilters');
+    this.targetFilters.options =
+      await this.retrieveFilterOptions('targetFilters');
+  });
+
   // =actions
 
   /**
@@ -106,7 +181,7 @@ export default class ScopesScopeSessionsIndexController extends Controller {
    */
   @action
   refresh() {
-    this.send('refreshAll');
+    this.router.refresh('scopes.scope.sessions');
   }
 
   /**
@@ -131,4 +206,9 @@ export default class ScopesScopeSessionsIndexController extends Controller {
     this.sortDirection = sortOrder;
     this.page = 1;
   }
+
+  onFilterSearch = restartableTask(async (filter, value) => {
+    this[filter].search = value;
+    this[filter].options = await this.retrieveFilterOptions(filter, value);
+  });
 }