feat: keep flakiness in table and user server-side pagination for flakiness overview (#920)

Author: meryemefe

client/src/app/components/pull-request-table/pull-request-table.component.ts

@@ -21,7 +21,7 @@ import { PullRequestStatusIconComponent } from '@app/components/pull-request-sta
 import { MessageService, SortMeta } from 'primeng/api';
 import { provideTablerIcons, TablerIconComponent } from 'angular-tabler-icons';
 import { IconExternalLink, IconFilterPlus, IconGitPullRequest, IconPinned, IconPinnedOff, IconPoint, IconBrandGithub } from 'angular-tabler-icons/icons';
-import { PAGINATED_FILTER_OPTIONS_TOKEN, PaginatedFilterOption, PaginatedTableService } from '@app/core/services/paginated-table.service';
+import { PAGINATED_FILTER_OPTIONS_TOKEN, PAGINATION_STORAGE_KEY_TOKEN, PaginatedFilterOption, PaginatedTableService } from '@app/core/services/paginated-table.service';
 import { TableFilterPaginatedComponent } from '@app/components/table-filter-paginated/table-filter-paginated.component';
 import { NgTemplateOutlet } from '@angular/common';
 
@@ -71,6 +71,7 @@ export function createPullRequestFilterOptions(keycloakService: KeycloakService)
   providers: [
     PaginatedTableService,
     { provide: PAGINATED_FILTER_OPTIONS_TOKEN, useFactory: createPullRequestFilterOptions, deps: [KeycloakService] },
+    { provide: PAGINATION_STORAGE_KEY_TOKEN, useValue: 'pullRequestPaginationState' },
     provideTablerIcons({
       IconFilterPlus,
       IconPoint,

client/src/app/components/workflow-runs-table/workflow-runs-table.component.ts

@@ -11,7 +11,7 @@ import { TimeAgoPipe } from '@app/pipes/time-ago.pipe';
 import { WorkflowRunDto } from '@app/core/modules/openapi';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { getWorkflowRunsOptions } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
-import { PAGINATED_FILTER_OPTIONS_TOKEN, PaginatedFilterOption, PaginatedTableService } from '@app/core/services/paginated-table.service';
+import { PAGINATED_FILTER_OPTIONS_TOKEN, PAGINATION_STORAGE_KEY_TOKEN, PaginatedFilterOption, PaginatedTableService } from '@app/core/services/paginated-table.service';
 import { TableFilterPaginatedComponent } from '@app/components/table-filter-paginated/table-filter-paginated.component';
 import { MessageService, SortMeta } from 'primeng/api';
 import { provideTablerIcons, TablerIconComponent } from 'angular-tabler-icons';
@@ -37,6 +37,7 @@ export function createWorkflowRunsFilterOptions(): PaginatedFilterOption[] {
     PaginatedTableService,
     MessageService,
     { provide: PAGINATED_FILTER_OPTIONS_TOKEN, useFactory: createWorkflowRunsFilterOptions },
+    { provide: PAGINATION_STORAGE_KEY_TOKEN, useValue: 'workflowRunsPaginationState' },
     provideTablerIcons({
       IconFilterPlus,
       IconCircleCheck,

client/src/app/core/modules/openapi/@tanstack/angular-query-experimental.gen.ts

@@ -144,6 +144,8 @@ import type {
   GetFlakinessScoresError,
   GetFlakinessScoresResponse,
   GetFlakyTestsOverviewData,
+  GetFlakyTestsOverviewError,
+  GetFlakyTestsOverviewResponse,
   GetGitRepoSettingsData,
   GetGroupsWithWorkflowsData,
   GetLatestDeploymentByEnvironmentIdData,
@@ -1262,6 +1264,43 @@ export const getFlakyTestsOverviewOptions = (options?: Options<GetFlakyTestsOver
   });
 };
 
+export const getFlakyTestsOverviewInfiniteQueryKey = (options?: Options<GetFlakyTestsOverviewData>): QueryKey<Options<GetFlakyTestsOverviewData>> =>
+  createQueryKey('getFlakyTestsOverview', options, true);
+
+export const getFlakyTestsOverviewInfiniteOptions = (options?: Options<GetFlakyTestsOverviewData>) => {
+  return infiniteQueryOptions<
+    GetFlakyTestsOverviewResponse,
+    GetFlakyTestsOverviewError,
+    InfiniteData<GetFlakyTestsOverviewResponse>,
+    QueryKey<Options<GetFlakyTestsOverviewData>>,
+    number | Pick<QueryKey<Options<GetFlakyTestsOverviewData>>[0], 'body' | 'headers' | 'path' | 'query'>
+  >(
+    // @ts-ignore
+    {
+      queryFn: async ({ pageParam, queryKey, signal }) => {
+        // @ts-ignore
+        const page: Pick<QueryKey<Options<GetFlakyTestsOverviewData>>[0], 'body' | 'headers' | 'path' | 'query'> =
+          typeof pageParam === 'object'
+            ? pageParam
+            : {
+                query: {
+                  page: pageParam,
+                },
+              };
+        const params = createInfiniteParams(queryKey, page);
+        const { data } = await getFlakyTestsOverview({
+          ...options,
+          ...params,
+          signal,
+          throwOnError: true,
+        });
+        return data;
+      },
+      queryKey: getFlakyTestsOverviewInfiniteQueryKey(options),
+    }
+  );
+};
+
 export const getLatestTestResultsByBranchQueryKey = (options: Options<GetLatestTestResultsByBranchData>) => createQueryKey('getLatestTestResultsByBranch', options);
 
 export const getLatestTestResultsByBranchOptions = (options: Options<GetLatestTestResultsByBranchData>) => {

client/src/app/core/modules/openapi/schemas.gen.ts

@@ -496,8 +496,12 @@ export const TestCaseIdentifierSchema = {
       type: 'string',
       minLength: 1,
     },
+    testSuiteName: {
+      type: 'string',
+      minLength: 1,
+    },
   },
-  required: ['className', 'testName'],
+  required: ['className', 'testName', 'testSuiteName'],
 } as const;
 
 export const TestFlakinessScoreRequestSchema = {
@@ -523,6 +527,9 @@ export const TestFlakinessScoreDtoSchema = {
     className: {
       type: 'string',
     },
+    testSuiteName: {
+      type: 'string',
+    },
     flakinessScore: {
       type: 'number',
       format: 'double',
@@ -536,7 +543,7 @@ export const TestFlakinessScoreDtoSchema = {
       format: 'double',
     },
   },
-  required: ['className', 'testName'],
+  required: ['className', 'testName', 'testSuiteName'],
 } as const;
 
 export const ReleaseCandidateCreateDtoSchema = {
@@ -1186,14 +1193,6 @@ export const FlakyTestDtoSchema = {
       type: 'number',
       format: 'double',
     },
-    totalRuns: {
-      type: 'integer',
-      format: 'int32',
-    },
-    failedRuns: {
-      type: 'integer',
-      format: 'int32',
-    },
     lastUpdated: {
       type: 'string',
       format: 'date-time',
@@ -1214,6 +1213,10 @@ export const FlakyTestOverviewDtoSchema = {
         $ref: '#/components/schemas/FlakyTestDto',
       },
     },
+    filteredCount: {
+      type: 'integer',
+      format: 'int64',
+    },
   },
   required: ['flakyTests', 'summary'],
 } as const;

client/src/app/core/modules/openapi/types.gen.ts

@@ -162,6 +162,7 @@ export type NotificationPreferencesWrapper = {
 export type TestCaseIdentifier = {
   testName: string;
   className: string;
+  testSuiteName: string;
 };
 
 export type TestFlakinessScoreRequest = {
@@ -171,6 +172,7 @@ export type TestFlakinessScoreRequest = {
 export type TestFlakinessScoreDto = {
   testName: string;
   className: string;
+  testSuiteName: string;
   flakinessScore?: number;
   defaultBranchFailureRate?: number;
   combinedFailureRate?: number;
@@ -390,14 +392,13 @@ export type FlakyTestDto = {
   flakinessScore?: number;
   defaultBranchFailureRate?: number;
   combinedFailureRate?: number;
-  totalRuns?: number;
-  failedRuns?: number;
   lastUpdated: string;
 };
 
 export type FlakyTestOverviewDto = {
   summary: FlakyTestSummary;
   flakyTests: Array<FlakyTestDto>;
+  filteredCount?: number;
 };
 
 export type FlakyTestSummary = {
@@ -1955,7 +1956,13 @@ export type GetLatestTestResultsByPullRequestIdResponse = GetLatestTestResultsBy
 export type GetFlakyTestsOverviewData = {
   body?: never;
   path?: never;
-  query?: never;
+  query?: {
+    page?: number;
+    size?: number;
+    sortDirection?: string;
+    filterType?: 'ALL' | 'HIGH' | 'MEDIUM' | 'LOW';
+    searchTerm?: string;
+  };
   url: '/api/tests/flaky';
 };
 

client/src/app/core/services/paginated-table.service.ts

@@ -15,6 +15,11 @@ export type PaginatedFilterOption = {
 // Define an injection token for filter options
 export const PAGINATED_FILTER_OPTIONS_TOKEN = new InjectionToken<PaginatedFilterOption[]>('paginatedFilterOptions');
 
+// Injection token for the localStorage key used to persist pagination state.
+// Each component that provides PaginatedTableService should supply its own unique key
+// via this token to prevent different tables from overwriting each other's state.
+export const PAGINATION_STORAGE_KEY_TOKEN = new InjectionToken<string>('paginationStorageKey');
+
 export interface PaginationState {
   page: number;
   size: number;
@@ -32,6 +37,8 @@ export class PaginatedTableService {
   // Inject filter options
   filterOptions = inject<PaginatedFilterOption[]>(PAGINATED_FILTER_OPTIONS_TOKEN);
 
+  private storageKey = inject(PAGINATION_STORAGE_KEY_TOKEN);
+
   // Pagination state
   page = signal(1);
   size = signal(20);
@@ -66,7 +73,7 @@ export class PaginatedTableService {
   }
 
   private loadPaginationFromLocalStorage(): void {
-    const storedStateStr = localStorage.getItem('pullRequestPaginationState');
+    const storedStateStr = localStorage.getItem(this.storageKey);
     if (!storedStateStr) {
       console.log('No pagination state found in localStorage');
       return;
@@ -108,7 +115,7 @@ export class PaginatedTableService {
   }
 
   private savePaginationToLocalStorage(state: PaginationState): void {
-    localStorage.setItem('pullRequestPaginationState', JSON.stringify(state));
+    localStorage.setItem(this.storageKey, JSON.stringify(state));
   }
 
   filterType(): string {