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
index 721a8a6279..d6733aa5fa 100644
--- 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
@@ -14,7 +14,6 @@ import { ExperimentStatePipeType } from '../../../../../shared/pipes/experiment-
import { debounceTime } from 'rxjs/operators';
import { UserPermission } from '../../../../../core/auth/store/auth.models';
import { AuthService } from '../../../../../core/auth/auth.service';
-import { SettingsService } from '../../../../../core/settings/settings.service';
import { ImportExperimentComponent } from '../modal/import-experiment/import-experiment.component';
import { FLAG_SEARCH_SORT_KEY } from '../../../../../core/feature-flags/store/feature-flags.model';
import { ExportModalComponent } from '../modal/export-experiment/export-experiment.component';
@@ -66,8 +65,7 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
constructor(
private experimentService: ExperimentService,
private dialog: MatDialog,
- private authService: AuthService,
- private settingsService: SettingsService
+ private authService: AuthService
) {}
ngOnInit() {
@@ -122,7 +120,7 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
!!data.context.filter((context) => context.toLocaleLowerCase().includes(filter)).length
);
case EXPERIMENT_SEARCH_KEY.NAME:
- return data.name.toLowerCase().includes(filter) || this.isPartitionFound(data, filter);
+ return data.name.toLocaleLowerCase().includes(filter) || this.isPartitionFound(data, filter);
case EXPERIMENT_SEARCH_KEY.TAG:
return !!data.tags.filter((tags) => tags.toLocaleLowerCase().includes(filter)).length;
case EXPERIMENT_SEARCH_KEY.CONTEXT:
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html
index 847f8ba8b9..22ee822a83 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html
@@ -7,9 +7,10 @@
>
-
+
{{ filterOption | titlecase }}
@@ -23,6 +24,7 @@
matInput
#searchInput
[(ngModel)]="searchValue"
+ (keyup)="applyFilter($event.target.value)"
[placeholder]="'global.search.text' | translate"
/>
search
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts
index 94d9efd05b..be4d2a3c57 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts
@@ -16,7 +16,6 @@ import { SegmentsService } from '../../../../../core/segments/segments.service';
import { Segment } from '../../../../../core/segments/store/segments.model';
import { NewSegmentComponent } from '../modal/new-segment/new-segment.component';
import { ImportSegmentComponent } from '../modal/import-segment/import-segment.component';
-import { CustomMatTableSource } from './CustomMatTableSource';
import { EXPERIMENT_SEARCH_KEY } from '../../../../../core/experiments/store/experiments.model';
import { SegmentStatusPipeType } from '../../../../../shared/pipes/segment-status.pipe';
import { SEGMENT_STATUS } from '../../../../../core/segments/store/segments.model';
@@ -41,14 +40,25 @@ export class SegmentsListComponent implements OnInit, OnDestroy, AfterViewInit {
allSegments: MatTableDataSource;
allSegmentsSub: Subscription;
isLoadingSegments$ = this.segmentsService.isLoadingSegments$;
- experimentFilterOptions = [
+ segmentFilterOptions = [
EXPERIMENT_SEARCH_KEY.ALL,
EXPERIMENT_SEARCH_KEY.NAME,
EXPERIMENT_SEARCH_KEY.STATUS,
EXPERIMENT_SEARCH_KEY.CONTEXT,
];
- selectedExperimentFilterOption = EXPERIMENT_SEARCH_KEY.ALL;
+ statusFilterOptions = Object.values(SEGMENT_STATUS);
+ selectedSegmentFilterOption = EXPERIMENT_SEARCH_KEY.ALL;
searchValue: string;
+ contextVisibility = [];
+
+ get filteredStatusOptions(): string[] {
+ if (typeof this.searchValue === 'string') {
+ const filterValue = this.searchValue.toLowerCase();
+ return this.statusFilterOptions.filter((option) => option.toLowerCase().includes(filterValue));
+ } else {
+ return this.statusFilterOptions;
+ }
+ }
constructor(
private authService: AuthService,
@@ -69,13 +79,40 @@ export class SegmentsListComponent implements OnInit, OnDestroy, AfterViewInit {
this.permissions$ = this.authService.userPermissions$;
this.allSegmentsSub = this.segmentsService.allSegments$.subscribe((segments) => {
segments = segments.map((segment) => ({ ...segment, status: segment.status || SEGMENT_STATUS.UNUSED }));
- this.allSegments = new CustomMatTableSource();
+ this.allSegments = new MatTableDataSource();
this.allSegments.data = [...segments];
this.allSegments.sort = this.sort;
this.cdr.detectChanges();
+ this.applyFilter(this.searchValue);
});
}
+ filterSegmentPredicate(type: EXPERIMENT_SEARCH_KEY) {
+ this.allSegments.filterPredicate = (data, filter: string): boolean => {
+ switch (type) {
+ case EXPERIMENT_SEARCH_KEY.ALL:
+ return (
+ data.name.toLocaleLowerCase().includes(filter) ||
+ data.status.toLocaleLowerCase().includes(filter) ||
+ data.context.toLocaleLowerCase().includes(filter)
+ );
+ case EXPERIMENT_SEARCH_KEY.NAME:
+ return data.name.toLocaleLowerCase().includes(filter);
+ case EXPERIMENT_SEARCH_KEY.STATUS:
+ return data.status.toLocaleLowerCase().includes(filter);
+ case EXPERIMENT_SEARCH_KEY.CONTEXT:
+ return data.context.toLocaleLowerCase().includes(filter);
+ }
+ };
+ }
+
+ applyFilter(filterValue: string) {
+ this.filterSegmentPredicate(this.selectedSegmentFilterOption);
+ if (typeof filterValue === 'string') {
+ this.allSegments.filter = filterValue.trim().toLowerCase();
+ }
+ }
+
openNewSegmentDialog() {
this.dialog.open(NewSegmentComponent, {
panelClass: 'new-segment-modal',