feat: 🎸 Refactor session recording filters

Author: ZedLi

addons/api/addon/handlers/sqlite-handler.js

@@ -35,6 +35,7 @@ export default class SqliteHandler {
             pushToStore = true,
             peekDb = false,
             storeToken = true,
+            returnRawData = false,
           } = {},
         } = data;
         const supportedModels = Object.keys(modelMapping);
@@ -49,7 +50,13 @@ export default class SqliteHandler {
         const schema = store.modelFor(type);
         const serializer = store.serializerFor(type);
 
-        let { page, pageSize, query: queryObj, ...remainingQuery } = query;
+        let {
+          page,
+          pageSize,
+          select,
+          query: queryObj,
+          ...remainingQuery
+        } = query;
         let payload,
           listToken,
           writeToDbPromise,
@@ -119,17 +126,21 @@ export default class SqliteHandler {
         const { sql, parameters } = generateSQLExpressions(type, queryObj, {
           page,
           pageSize,
-          select: ['data'],
+          select: select ?? [{ field: 'data' }],
         });
 
         const rows = await this.sqlite.fetchResource({
           sql,
           parameters,
         });
 
+        if (returnRawData) {
+          return rows;
+        }
+
         const { sql: countSql, parameters: countParams } =
           generateSQLExpressions(type, queryObj, {
-            select: ['count(*) as total'],
+            select: [{ field: '*', isCount: true, alias: 'total' }],
           });
         const count = await this.sqlite.fetchResource({
           sql: countSql,

addons/api/addon/services/sqlite.js

@@ -100,6 +100,8 @@ export const modelMapping = {
     target_name: 'create_time_values.target.name',
     target_scope_id: 'create_time_values.target.scope.id',
     target_scope_name: 'create_time_values.target.scope.name',
+    target_scope_parent_scope_id:
+      'create_time_values.target.scope.parent_scope_id',
     created_time: 'created_time',
   },
   session: {
@@ -114,21 +116,6 @@ export const modelMapping = {
   },
 };
 
-// A list of tables that we support searching using FTS5 in SQLite.
-export const searchTables = new Set([
-  'target',
-  'alias',
-  'group',
-  'role',
-  'user',
-  'credential-store',
-  'scope',
-  'auth-method',
-  'host-catalog',
-  'session-recording',
-  'session',
-]);
-
 export default class SqliteDbService extends Service {
   // =attributes
 

addons/api/addon/utils/sqlite-query.js

@@ -4,7 +4,6 @@
  */
 
 import { modelMapping } from 'api/services/sqlite';
-import { searchTables } from 'api/services/sqlite';
 import { typeOf } from '@ember/utils';
 import { underscore } from '@ember/string';
 
@@ -35,17 +34,15 @@ export function generateSQLExpressions(
   addFilterConditions({ filters, parameters, conditions });
   addSearchConditions({ search, resource, tableName, parameters, conditions });
 
+  const selectClause = constructSelectClause(select, tableName);
   const orderByClause = constructOrderByClause(resource, sort);
-
   const whereClause = conditions.length ? `WHERE ${and(conditions)}` : '';
 
   const paginationClause = page && pageSize ? `LIMIT ? OFFSET ?` : '';
   if (paginationClause) {
     parameters.push(pageSize, (page - 1) * pageSize);
   }
 
-  const selectClause = `SELECT ${select ? select.join(', ') : '*'} FROM "${tableName}"`;
-
   return {
     // Replace any empty newlines or leading whitespace on each line to be consistent with formatting
     // This is mainly to help us read and test the generated SQL as it has no effect on the actual SQL execution.
@@ -114,32 +111,57 @@ function addSearchConditions({
   parameters,
   conditions,
 }) {
-  if (!search) {
+  if (!search || !modelMapping[resource]) {
     return;
   }
 
-  if (searchTables.has(resource)) {
-    // Use the special prefix indicator "*" for full-text search
-    parameters.push(`"${search}"*`);
-    // Use a subquery to match against the FTS table with rowids as SQLite is
-    // much more efficient with FTS queries when using rowids or MATCH (or both).
-    // We could have also used a join here but a subquery is simpler.
-    conditions.push(
-      `rowid IN (SELECT rowid FROM ${tableName}_fts WHERE ${tableName}_fts MATCH ?)`,
+  // Use the special prefix indicator "*" for full-text search
+  if (typeOf(search) === 'object') {
+    if (!search?.value) {
+      return;
+    }
+
+    parameters.push(
+      or(search.fields.map((field) => `${field}:"${search.value}"*`)),
     );
-    return;
+  } else {
+    parameters.push(`"${search}"*`);
   }
 
-  const fields = Object.keys(modelMapping[resource]);
-  const searchConditions = parenthetical(
-    or(
-      fields.map((field) => {
-        parameters.push(`%${search}%`);
-        return `${field}${OPERATORS['contains']}`;
-      }),
-    ),
+  // Use a subquery to match against the FTS table with rowids as SQLite is
+  // much more efficient with FTS queries when using rowids or MATCH (or both).
+  // We could have also used a join here but a subquery is simpler.
+  conditions.push(
+    `rowid IN (SELECT rowid FROM ${tableName}_fts WHERE ${tableName}_fts MATCH ?)`,
   );
-  conditions.push(searchConditions);
+}
+function constructSelectClause(select = [{ field: '*' }], tableName) {
+  const distinctColumns = select.filter(({ isDistinct }) => isDistinct);
+  let selectColumns;
+
+  // Special case for distinct columns as they must be grouped together.
+  // We're only handling simple use cases as anything more complicated
+  // like windows/CTEs can be custom SQL.
+  if (distinctColumns.length > 0) {
+    selectColumns = `DISTINCT ${distinctColumns.map(({ field }) => field).join(', ')}`;
+  } else {
+    selectColumns = select
+      .map(({ field, isCount, alias }) => {
+        let column = field;
+
+        if (isCount) {
+          column = `count(${column})`;
+        }
+        if (alias) {
+          column = `${column} as ${alias}`;
+        }
+
+        return column;
+      })
+      .join(', ');
+  }
+
+  return `SELECT ${selectColumns} FROM "${tableName}"`;
 }
 
 function constructOrderByClause(resource, sort) {

addons/api/addon/workers/utils/schema.js

@@ -352,6 +352,7 @@ CREATE TABLE IF NOT EXISTS session_recording (
     target_name TEXT,
     target_scope_id TEXT,
     target_scope_name TEXT,
+    target_scope_parent_scope_id TEXT,
     created_time TEXT NOT NULL,
     data TEXT NOT NULL
 );
@@ -371,21 +372,22 @@ CREATE VIRTUAL TABLE IF NOT EXISTS session_recording_fts USING fts5(
     target_name,
     target_scope_id,
     target_scope_name,
+    target_scope_parent_scope_id,
     created_time,
     content='',
 );
 
 CREATE TRIGGER IF NOT EXISTS session_recording_ai AFTER INSERT ON session_recording BEGIN
     INSERT INTO session_recording_fts(
-        id, type, state, start_time, end_time, duration, scope_id, user_id, user_name, target_id, target_name, target_scope_id, target_scope_name, created_time
+        id, type, state, start_time, end_time, duration, scope_id, user_id, user_name, target_id, target_name, target_scope_id, target_scope_name, target_scope_parent_scope_id, created_time
     ) VALUES (
-        new.id, new.type, new.state, new.start_time, new.end_time, new.duration, new.scope_id, new.user_id, new.user_name, new.target_id, new.target_name, new.target_scope_id, new.target_scope_name, new.created_time
+        new.id, new.type, new.state, new.start_time, new.end_time, new.duration, new.scope_id, new.user_id, new.user_name, new.target_id, new.target_name, new.target_scope_id, new.target_scope_name, new.target_scope_parent_scope_id, new.created_time
     );
 END;
 
 CREATE TRIGGER IF NOT EXISTS session_recording_ad AFTER DELETE ON session_recording BEGIN
-    INSERT INTO session_recording_fts(session_recording_fts, rowid, id, type, state, start_time, end_time, duration, scope_id, user_id, user_name, target_id, target_name, target_scope_id, target_scope_name, created_time)
-    VALUES('delete', old.rowid, old.id, old.type, old.state, old.start_time, old.end_time, old.duration, old.scope_id, old.user_id, old.user_name, old.target_id, old.target_name, old.target_scope_id, old.target_scope_name, old.created_time);
+    INSERT INTO session_recording_fts(session_recording_fts, rowid, id, type, state, start_time, end_time, duration, scope_id, user_id, user_name, target_id, target_name, target_scope_id, target_scope_name, target_scope_parent_scope_id, created_time)
+    VALUES('delete', old.rowid, old.id, old.type, old.state, old.start_time, old.end_time, old.duration, old.scope_id, old.user_id, old.user_name, old.target_id, old.target_name, old.target_scope_id, old.target_scope_name, old.target_scope_parent_scope_id, old.created_time);
 END;`;
 
 const createSessionTables = `

addons/api/tests/unit/services/sqlite-test.js

@@ -6,11 +6,10 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
-import { modelMapping, searchTables } from 'api/services/sqlite';
+import { modelMapping } from 'api/services/sqlite';
 import { underscore } from '@ember/string';
 
 const supportedModels = Object.keys(modelMapping);
-const supportedFtsTables = [...searchTables];
 
 module('Unit | Service | sqlite', function (hooks) {
   setupTest(hooks);
@@ -38,7 +37,7 @@ module('Unit | Service | sqlite', function (hooks) {
 
   test.each(
     'Mapping matches fts table columns',
-    supportedFtsTables,
+    supportedModels,
     async function (assert, resource) {
       const service = this.owner.lookup('service:sqlite');
 

addons/core/addon/components/dropdown/index.hbs

@@ -20,19 +20,26 @@
     <DD.Header @hasDivider={{true}}>
       <Hds::Form::TextInput::Base
         @type='search'
-        @value={{this.searchTerm}}
+        @value={{or this.searchTerm @searchTerm}}
         placeholder={{t 'actions.narrow-results'}}
         aria-label={{t 'actions.narrow-results'}}
         {{on 'input' this.filterItems}}
         data-test-dropdown-search
       />
     </DD.Header>
   {{/if}}
-  {{#unless this.itemOptions}}
+
+  {{#unless (or this.itemOptions @isLoading)}}
     <DD.Description @text={{t 'titles.no-results'}} />
   {{/unless}}
 
-  {{#if (has-block)}}
+  {{#if @isLoading}}
+    <DD.Generic>
+      <Hds::Layout::Flex @align='center' @justify='center'>
+        <Hds::Icon @name='loading' @size='24' class='margin-y-xs' />
+      </Hds::Layout::Flex>
+    </DD.Generic>
+  {{else if (has-block)}}
     {{yield DD this.selectItem this.itemOptions}}
   {{else}}
     {{#each this.itemOptions as |itemOption|}}
@@ -47,13 +54,15 @@
     {{/each}}
   {{/if}}
 
-  <DD.Footer @hasDivider={{true}}>
-    <Hds::Button
-      @text='Apply'
-      @isFullWidth={{true}}
-      @size='small'
-      {{on 'click' (fn this.applyFilter DD.close)}}
-      data-test-dropdown-apply-button
-    />
-  </DD.Footer>
+  {{#unless @isLoading}}
+    <DD.Footer @hasDivider={{true}}>
+      <Hds::Button
+        @text='Apply'
+        @isFullWidth={{true}}
+        @size='small'
+        {{on 'click' (fn this.applyFilter DD.close)}}
+        data-test-dropdown-apply-button
+      />
+    </DD.Footer>
+  {{/unless}}
 </Hds::Dropdown>

addons/core/addon/components/dropdown/index.js

@@ -21,7 +21,8 @@ export default class DropdownComponent extends Component {
    */
   get itemOptions() {
     let items = this.args.itemOptions;
-    if (this.searchTerm) {
+
+    if (this.searchTerm && !this.args.updateSearchTerm) {
       const searchTerm = this.searchTerm.toLowerCase();
       items = this.args.itemOptions.filter((item) => {
         const isNameMatch = item.name?.toLowerCase().includes(searchTerm);
@@ -39,10 +40,15 @@ export default class DropdownComponent extends Component {
    * @param {object} event
    */
   @action
-  @debounce(150)
-  filterItems(event) {
+  @debounce(250)
+  async filterItems(event) {
     const { value } = event.target;
-    this.searchTerm = value;
+
+    if (this.args.updateSearchTerm) {
+      this.args.updateSearchTerm(value);
+    } else {
+      this.searchTerm = value;
+    }
   }
 
   /**

addons/core/addon/styles/addon.scss

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+@use 'rose/app/styles/rose/variables/sizing' as sizing;
+
 .filters-applied {
   display: flex;
   flex-wrap: wrap;
@@ -72,3 +74,34 @@
     margin-bottom: 0.5rem;
   }
 }
+
+$margin-directions: (
+  '': 'margin',
+  '-top': 'margin-top',
+  '-right': 'margin-right',
+  '-bottom': 'margin-bottom',
+  '-left': 'margin-left',
+  '-x': (
+    'margin-left',
+    'margin-right',
+  ),
+  '-y': (
+    'margin-top',
+    'margin-bottom',
+  ),
+);
+
+// Generate margin utility classes with sizes and directions
+@each $size-name, $size-coefficient in sizing.$size-coefficients {
+  @each $direction-suffix, $properties in $margin-directions {
+    .margin#{$direction-suffix}-#{$size-name} {
+      @if type-of($properties) == 'list' {
+        @each $property in $properties {
+          #{$property}: #{sizing.rems($size-name)};
+        }
+      } @else {
+        #{$properties}: #{sizing.rems($size-name)};
+      }
+    }
+  }
+}