Add ids to UI and search for segments, flags, and experiments

bcb37 · bcb37 · commit 303918d0bea3 · 2025-11-05T17:17:43.000-05:00
diff --git a/backend/packages/Upgrade/src/api/controllers/validators/FeatureFlagsPaginatedParamsValidator.ts b/backend/packages/Upgrade/src/api/controllers/validators/FeatureFlagsPaginatedParamsValidator.ts
@@ -26,6 +26,7 @@ export enum FLAG_SEARCH_KEY {
   STATUS = 'status',
   TAG = 'tag',
   CONTEXT = 'context',
+  ID = 'id',
 }
 
 class IFeatureFlagSortParamsValidator {
diff --git a/backend/packages/Upgrade/src/api/controllers/validators/SegmentPaginatedParamsValidator.ts b/backend/packages/Upgrade/src/api/controllers/validators/SegmentPaginatedParamsValidator.ts
@@ -22,6 +22,7 @@ export enum SEGMENT_SEARCH_KEY {
   NAME = 'name',
   TAG = 'tag',
   CONTEXT = 'context',
+  ID = 'id',
 }
 
 class ISegmentSortParamsValidator {
diff --git a/backend/packages/Upgrade/src/api/services/ExperimentService.ts b/backend/packages/Upgrade/src/api/services/ExperimentService.ts
@@ -82,7 +82,7 @@ import { CacheService } from './CacheService';
 import { QueryService } from './QueryService';
 import { ArchivedStats } from '../models/ArchivedStats';
 import { ArchivedStatsRepository } from '../repositories/ArchivedStatsRepository';
-import { validate } from 'class-validator';
+import { isUUID, validate } from 'class-validator';
 import { plainToClass } from 'class-transformer';
 import { StratificationFactorRepository } from '../repositories/StratificationFactorRepository';
 import { ExperimentDetailsForCSVData } from '../repositories/AnalyticsRepository';
@@ -1798,6 +1798,10 @@ export class ExperimentService {
     const type = params.key;
     // escape % and ' characters
     const serachString = params.string.replace(/%/g, '\\$&').replace(/'/g, "''");
+    if (type === EXPERIMENT_SEARCH_KEY.ID && !isUUID(serachString)) {
+      return '';
+    }
+
     const likeString = `ILIKE '%${serachString}%'`;
     const searchString: string[] = [];
     switch (type) {
@@ -1813,13 +1817,19 @@ export class ExperimentService {
       case EXPERIMENT_SEARCH_KEY.TAG:
         searchString.push(`ARRAY_TO_STRING(tags, ',') ${likeString}`);
         break;
+      case EXPERIMENT_SEARCH_KEY.ID:
+        searchString.push(`experiment.id = '${serachString}'`);
+        break;
       default:
         searchString.push(`name ${likeString}`);
         searchString.push(`state::TEXT ${likeString}`);
         searchString.push(`ARRAY_TO_STRING(context, ',') ${likeString}`);
         searchString.push(`ARRAY_TO_STRING(tags, ',') ${likeString}`);
         searchString.push(`partitions.site ${likeString}`);
         searchString.push(`partitions.target ${likeString}`);
+        if (isUUID(serachString)) {
+          searchString.push(`experiment.id = '${serachString}'`);
+        }
         break;
     }
 
diff --git a/backend/packages/Upgrade/src/api/services/FeatureFlagService.ts b/backend/packages/Upgrade/src/api/services/FeatureFlagService.ts
@@ -43,7 +43,7 @@ import { ExperimentAssignmentService } from './ExperimentAssignmentService';
 import { SegmentService } from './SegmentService';
 import { ErrorWithType } from '../errors/ErrorWithType';
 import { RequestedExperimentUser } from '../controllers/validators/ExperimentUserValidator';
-import { validate } from 'class-validator';
+import { isUUID, validate } from 'class-validator';
 import { plainToClass } from 'class-transformer';
 import {
   FeatureFlagImportDataValidation,
@@ -805,6 +805,9 @@ export class FeatureFlagService {
     const type = params.key;
     // escape % and ' characters
     const serachString = params.string.replace(/%/g, '\\$&').replace(/'/g, "''");
+    if (type === FLAG_SEARCH_KEY.ID && !isUUID(serachString)) {
+      return '';
+    }
     const likeString = `ILIKE '%${serachString}%'`;
     const searchString: string[] = [];
     switch (type) {
@@ -820,11 +823,17 @@ export class FeatureFlagService {
       case FLAG_SEARCH_KEY.TAG:
         searchString.push(`ARRAY_TO_STRING(tags, ',') ${likeString}`);
         break;
+      case FLAG_SEARCH_KEY.ID:
+        searchString.push(`feature_flag.id = '${serachString}'`);
+        break;
       default:
         searchString.push(`name ${likeString}`);
         searchString.push(`status::TEXT ${likeString}`);
         searchString.push(`ARRAY_TO_STRING(context, ',') ${likeString}`);
         searchString.push(`ARRAY_TO_STRING(tags, ',') ${likeString}`);
+        if (isUUID(serachString)) {
+          searchString.push(`feature_flag.id = '${serachString}'`);
+        }
         break;
     }
 
diff --git a/backend/packages/Upgrade/src/api/services/SegmentService.ts b/backend/packages/Upgrade/src/api/services/SegmentService.ts
@@ -38,7 +38,7 @@ import { FeatureFlagSegmentExclusionRepository } from '../repositories/FeatureFl
 import { FeatureFlagSegmentInclusionRepository } from '../repositories/FeatureFlagSegmentInclusionRepository';
 import { getSegmentData, getSegmentsData } from '../controllers/SegmentController';
 import { CacheService } from './CacheService';
-import { validate } from 'class-validator';
+import { isUUID, validate } from 'class-validator';
 import { plainToClass } from 'class-transformer';
 import path from 'path';
 import { GroupEnrollmentRepository } from '../repositories/GroupEnrollmentRepository';
@@ -222,7 +222,9 @@ export class SegmentService {
 
     if (searchParams) {
       const whereClause = this.paginatedSearchString(searchParams);
-      paginatedParentSubQuery = paginatedParentSubQuery.andWhere(whereClause);
+      if (whereClause) {
+        paginatedParentSubQuery = paginatedParentSubQuery.andWhere(whereClause);
+      }
     }
     const countQuery = paginatedParentSubQuery.clone().andWhere('segment.type=:type', { type: SEGMENT_TYPE.PUBLIC });
     paginatedParentSubQuery = paginatedParentSubQuery.andWhere('segment.type = :type').offset(skip).limit(take);
@@ -246,6 +248,9 @@ export class SegmentService {
     const type = params.key;
     // escape % and ' characters
     const serachString = params.string.replace(/%/g, '\\$&').replace(/'/g, "''");
+    if (type === SEGMENT_SEARCH_KEY.ID && !isUUID(serachString)) {
+      return null;
+    }
     const likeString = `ILIKE '%${serachString}%'`;
     const searchString: string[] = [];
     switch (type) {
@@ -255,10 +260,16 @@ export class SegmentService {
       case SEGMENT_SEARCH_KEY.TAG:
         searchString.push(`ARRAY_TO_STRING(tags, ',') ${likeString}`);
         break;
+      case SEGMENT_SEARCH_KEY.ID:
+        searchString.push(`segment.id = '${serachString}'`);
+        break;
       default:
         searchString.push(`${SEGMENT_SEARCH_KEY.NAME} ${likeString}`);
         searchString.push(`${SEGMENT_SEARCH_KEY.CONTEXT} ${likeString}`);
         searchString.push(`ARRAY_TO_STRING(tags, ',') ${likeString}`);
+        if (isUUID(serachString)) {
+          searchString.push(`segment.id = '${serachString}'`);
+        }
         break;
     }
 
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
@@ -8,6 +8,7 @@
     [versionNumber]="flag.versionNumber"
     [chipClass]="flag.status"
     [showWarning]="shouldShowWarning$ | async"
+    [id]="flag.id"
   ></app-common-section-card-title-header>
 
   <!-- header-right -->
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.ts
@@ -59,6 +59,7 @@ export class FeatureFlagRootSectionCardComponent {
   featureFlagFilterOption = [
     FLAG_SEARCH_KEY.ALL,
     FLAG_SEARCH_KEY.NAME,
+    FLAG_SEARCH_KEY.ID,
     FLAG_SEARCH_KEY.STATUS,
     FLAG_SEARCH_KEY.CONTEXT,
     FLAG_SEARCH_KEY.TAG,
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts
@@ -33,6 +33,7 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
   experimentFilterOptions = [
     EXPERIMENT_SEARCH_KEY.ALL,
     EXPERIMENT_SEARCH_KEY.NAME,
+    EXPERIMENT_SEARCH_KEY.ID,
     EXPERIMENT_SEARCH_KEY.STATUS,
     EXPERIMENT_SEARCH_KEY.TAG,
     EXPERIMENT_SEARCH_KEY.CONTEXT,
@@ -126,14 +127,17 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
               data.state.toLocaleLowerCase().includes(filter) ||
               !!data.tags.filter((tags) => tags.toLocaleLowerCase().includes(filter)).length ||
               this.isPartitionFound(data, filter) ||
-              !!data.context.filter((context) => context.toLocaleLowerCase().includes(filter)).length
+              !!data.context.filter((context) => context.toLocaleLowerCase().includes(filter)).length ||
+              data.id.includes(filter)
             );
           case EXPERIMENT_SEARCH_KEY.NAME:
             return data.name.toLocaleLowerCase().includes(filter);
           case EXPERIMENT_SEARCH_KEY.TAG:
             return !!data.tags.filter((tags) => tags.toLocaleLowerCase().includes(filter)).length;
           case EXPERIMENT_SEARCH_KEY.CONTEXT:
             return !!data.context.filter((context) => context.toLocaleLowerCase().includes(filter)).length;
+          case EXPERIMENT_SEARCH_KEY.ID:
+            return data.id.includes(filter);
         }
       };
     }
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.html b/frontend/projects/upgrade/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.html
@@ -66,6 +66,7 @@
               ('home.view-experiment.updated-at.text' | translate) + (experiment.updatedAt | date : 'MMM d, y, h:mm a')
             }}
           </span>
+          <span class="ft-14-700">ID: {{ experiment.id }}</span>
         </span>
 
         <!-- <div class="action-buttons">
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.html b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.html
@@ -7,6 +7,7 @@
     [updatedAt]="segment.updatedAt"
     [versionNumber]="segment.versionNumber"
     [chipClass]="segment.status.toLowerCase()"
+    [id]="segment.id"
   ></app-common-section-card-title-header>
   <!-- TODO: Update the SEGMENT_STATUS enum to lowercase and remove toLowerCase() once the legacy Segments code is removed -->
 
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-root-page/segment-root-page-content/segment-root-section-card/segment-root-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-root-page/segment-root-page-content/segment-root-section-card/segment-root-section-card.component.ts
@@ -55,6 +55,7 @@ export class SegmentRootSectionCardComponent {
   segmentFilterOptions = [
     SEGMENT_SEARCH_KEY.ALL,
     SEGMENT_SEARCH_KEY.NAME,
+    SEGMENT_SEARCH_KEY.ID,
     SEGMENT_SEARCH_KEY.CONTEXT,
     SEGMENT_SEARCH_KEY.TAG,
   ];
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.html
@@ -24,4 +24,7 @@ <h5 class="title ft-18-700">
       </span>
     </ng-container>
   </p>
+  <ng-container *ngIf="id">
+    <div class="subtitle ft-14-400">ID: {{ id }}</div>
+  </ng-container>
 </div>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.ts b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.ts
@@ -42,4 +42,5 @@ export class CommonSectionCardTitleHeaderComponent {
   @Input() versionNumber?: number;
   @Input() chipClass?: STATUS_INDICATOR_CHIP_TYPE;
   @Input() showWarning?: boolean;
+  @Input() id?: string;
 }
diff --git a/types/src/Experiment/enums.ts b/types/src/Experiment/enums.ts
@@ -140,6 +140,7 @@ export enum EXPERIMENT_SEARCH_KEY {
   STATUS = 'status',
   TAG = 'tag',
   CONTEXT = 'context',
+  ID = 'id',
 }
 
 export enum EXPERIMENT_SORT_KEY {
@@ -218,6 +219,7 @@ export enum SEGMENT_SEARCH_KEY {
   TAG = 'tag',
   STATUS = 'status',
   CONTEXT = 'context',
+  ID = 'id',
 }
 
 export enum SEGMENT_SORT_KEY {
@@ -232,6 +234,7 @@ export enum FLAG_SEARCH_KEY {
   STATUS = 'status',
   TAG = 'tag',
   CONTEXT = 'context',
+  ID = 'id',
 }
 
 export enum METRIC_SEARCH_KEY {

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ export enum FLAG_SEARCH_KEY {`
`26`	`26`	`STATUS = 'status',`
`27`	`27`	`TAG = 'tag',`
`28`	`28`	`CONTEXT = 'context',`
	`29`	`+ ID = 'id',`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`class IFeatureFlagSortParamsValidator {`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@ export enum SEGMENT_SEARCH_KEY {`
`22`	`22`	`NAME = 'name',`
`23`	`23`	`TAG = 'tag',`
`24`	`24`	`CONTEXT = 'context',`
	`25`	`+ ID = 'id',`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`class ISegmentSortParamsValidator {`