diff --git a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.html b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.html new file mode 100644 index 0000000000..ea089cab2f --- /dev/null +++ b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + diff --git a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.ts new file mode 100644 index 0000000000..c551eaae59 --- /dev/null +++ b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.ts @@ -0,0 +1,251 @@ +import { ChangeDetectionStrategy, Component, Input, OnInit, OnDestroy } from '@angular/core'; +import { + CommonSectionCardActionButtonsComponent, + CommonSectionCardComponent, + CommonSectionCardSearchHeaderComponent, +} from '../../../../../../../shared-standalone-component-lib/components'; +import { + FilterOption, + CommonSearchWidgetSearchParams, +} from '../../../../../../../shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component'; +import { CommonModule } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; +import { ExperimentService } from '../../../../../../../core/experiments/experiments.service'; +import { Experiment } from '../../../../../../../core/experiments/store/experiments.model'; +import { LogsService } from '../../../../../../../core/logs/logs.service'; +import { SharedModule } from '../../../../../../../shared/shared.module'; +import { CommonAuditLogTimelineComponent } from '../../../../../../../shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component'; +import { AuditLogs, LogDateFormatType } from '../../../../../../../core/logs/store/logs.model'; +import { LOG_TYPE } from 'upgrade_types'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { combineLatest, Subject, Observable, BehaviorSubject } from 'rxjs'; +import { map, filter, takeUntil, switchMap, tap, take } from 'rxjs/operators'; +import { groupBy } from 'lodash'; +import { AuditLogTimelineConfig } from '../../../../../../../shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline-config.model'; +import { EXPERIMENT_TIMELINE_LOG_TYPE_CONFIG } from '../../../../../../../shared-standalone-component-lib/components/common-audit-log-timeline/configs/experiment-timeline.config'; + +/** + * Section card component for displaying experiment-specific audit logs in a timeline format. + * Features: + * - Dynamic filter dropdown with action types and users from logs + * - Text search capability + * - Timeline view grouped by date + * - Infinite scroll pagination + */ +@Component({ + selector: 'app-experiment-log-section-card', + imports: [ + CommonModule, + CommonSectionCardComponent, + CommonSectionCardActionButtonsComponent, + CommonSectionCardSearchHeaderComponent, + TranslateModule, + SharedModule, + CommonAuditLogTimelineComponent, + MatProgressSpinnerModule, + ], + standalone: true, + templateUrl: './experiment-log-section-card.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExperimentLogSectionCardComponent implements OnInit, OnDestroy { + @Input() isSectionCardExpanded = true; + + selectedExperiment$: Observable = this.experimentService.selectedExperiment$; + + // Search state + searchString$ = new BehaviorSubject(''); + searchKey$ = new BehaviorSubject('All'); + filterOptions$ = new BehaviorSubject([{ value: 'All' }]); + + // Logs data + experimentLogs$: Observable; + timelineDataSource$: Observable<{ dates: string[]; dateGroups: Record }>; + isLoading$: Observable; + allLogsFetched$: Observable; + + private destroy$ = new Subject(); + private currentExperimentId: string | null = null; + + LogDateFormatType = LogDateFormatType; + timelineConfig: AuditLogTimelineConfig = EXPERIMENT_TIMELINE_LOG_TYPE_CONFIG; + + constructor(private readonly experimentService: ExperimentService, private readonly logsService: LogsService) {} + + ngOnInit(): void { + // Fetch logs when experiment loads + this.selectedExperiment$ + .pipe( + filter((exp): exp is Experiment => !!exp), + tap((exp) => { + this.currentExperimentId = exp.id; + this.logsService.fetchExperimentLogs(exp.id, true); + }), + takeUntil(this.destroy$) + ) + .subscribe(); + + // Get raw logs observable + this.experimentLogs$ = this.selectedExperiment$.pipe( + filter((exp): exp is Experiment => !!exp), + switchMap((exp) => this.logsService.getExperimentLogsById(exp.id)), + tap((logs) => { + this.buildFilterOptions(logs); + }), + takeUntil(this.destroy$) + ); + + // Get loading state + this.isLoading$ = this.selectedExperiment$.pipe( + filter((exp): exp is Experiment => !!exp), + switchMap((exp) => this.logsService.getExperimentLogsLoadingState(exp.id)), + takeUntil(this.destroy$) + ); + + // Get pagination state + this.allLogsFetched$ = this.selectedExperiment$.pipe( + filter((exp): exp is Experiment => !!exp), + switchMap((exp) => this.logsService.isAllExperimentLogsFetched(exp.id)), + takeUntil(this.destroy$) + ); + + // Apply search and group by date + // TODO: prefer doing this on backend + this.timelineDataSource$ = combineLatest([this.experimentLogs$, this.searchString$, this.searchKey$]).pipe( + map(([logs, searchString, searchKey]) => { + // TODO: prefer doing this on backend + const filtered = this.filterLogs(logs, searchString, searchKey); + const dateGroups = this.groupLogsByDate(filtered); + const dates = Object.keys(dateGroups); + return { + dates, + dateGroups, + }; + }), + takeUntil(this.destroy$) + ); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + onSectionCardExpandChange(isSectionCardExpanded: boolean): void { + this.isSectionCardExpanded = isSectionCardExpanded; + } + + onSearch(params: CommonSearchWidgetSearchParams): void { + this.searchKey$.next(params.searchKey); + this.searchString$.next(params.searchString); + } + + fetchLogsOnScroll(): void { + if (!this.currentExperimentId) return; + + // Check if all logs are fetched and if not currently loading + combineLatest([this.allLogsFetched$, this.isLoading$]) + .pipe( + take(1), + filter(([allFetched, isLoading]) => !allFetched && !isLoading), + takeUntil(this.destroy$) + ) + .subscribe(() => { + this.logsService.fetchExperimentLogs(this.currentExperimentId); + }); + } + + /** + * Build dynamic filter options from logs data + */ + private buildFilterOptions(logs: AuditLogs[]): void { + if (!logs || logs.length === 0) { + this.filterOptions$.next([{ value: 'All' }]); + return; + } + + // Get unique action types (only experiment-related) + const experimentLogTypes = [ + LOG_TYPE.EXPERIMENT_CREATED, + LOG_TYPE.EXPERIMENT_UPDATED, + LOG_TYPE.EXPERIMENT_STATE_CHANGED, + LOG_TYPE.EXPERIMENT_DELETED, + LOG_TYPE.EXPERIMENT_DATA_EXPORTED, + LOG_TYPE.EXPERIMENT_DESIGN_EXPORTED, + ]; + + const actionTypes = [...new Set(logs.map((log) => log.type))].filter((type) => experimentLogTypes.includes(type)); + + // Get unique users (firstName + lastName) + const userSet = new Set(); + logs.forEach((log) => { + if (log.user?.firstName && log.user?.lastName) { + userSet.add(`${log.user.firstName} ${log.user.lastName}`); + } + }); + const users = Array.from(userSet); + + // Build grouped filter options + const options: FilterOption[] = [ + { value: 'All' }, // Standalone option + ...actionTypes.map((type) => ({ + value: type, + group: 'Event Type', // Group name + })), + ]; + + if (users.length > 0) { + users.forEach((user) => { + options.push({ value: user, group: 'Users' }); // Group name + }); + } + + this.filterOptions$.next(options); + } + + /** + * Filter logs based on search criteria + */ + private filterLogs(logs: AuditLogs[], searchString: string, searchKey: string): AuditLogs[] { + let filtered = logs; + + // Apply dropdown filter + if (searchKey && searchKey !== 'All') { + // Check if it's an action type + if (Object.values(LOG_TYPE).includes(searchKey as LOG_TYPE)) { + filtered = filtered.filter((log) => log.type === searchKey); + } + // Check if it's a user name + else { + filtered = filtered.filter((log) => { + const userName = `${log.user?.firstName || ''} ${log.user?.lastName || ''}`.trim(); + return userName === searchKey; + }); + } + } + + // Apply text search + if (searchString) { + const searchLower = searchString.toLowerCase(); + filtered = filtered.filter((log) => { + const userName = `${log.user?.firstName || ''} ${log.user?.lastName || ''}`.toLowerCase(); + const actionType = log.type.toLowerCase(); + const dataStr = JSON.stringify(log.data).toLowerCase(); + + return userName.includes(searchLower) || actionType.includes(searchLower) || dataStr.includes(searchLower); + }); + } + + return filtered; + } + + /** + * Group logs by date (format: YYYY/M/D) + */ + private groupLogsByDate(logs: AuditLogs[]): Record { + return groupBy(logs, (log) => { + const date = new Date(log.createdAt); + return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; + }); + } +} diff --git a/packages/backend/src/api/controllers/LogController.ts b/packages/backend/src/api/controllers/LogController.ts index 565880ba0d..fcdab38650 100644 --- a/packages/backend/src/api/controllers/LogController.ts +++ b/packages/backend/src/api/controllers/LogController.ts @@ -50,6 +50,9 @@ export class AuditLogController { * filter: * type: string * enum: [experimentCreated, experimentUpdated, experimentStateChanged, experimentDeleted] + * experimentId: + * type: string + * format: uuid * description: number of audit logs to requests * tags: * - Logs @@ -64,8 +67,8 @@ export class AuditLogController { @Body({ validate: true }) logParams: AuditLogParamsValidator ): Promise { const [nodes, total] = await Promise.all([ - this.auditService.getAuditLogs(logParams.take, logParams.skip, logParams.filter), - this.auditService.getTotalLogs(logParams.filter), + this.auditService.getAuditLogs(logParams.take, logParams.skip, logParams.filter, logParams.experimentId), + this.auditService.getTotalLogs(logParams.filter, logParams.experimentId), ]); return { total, diff --git a/packages/backend/src/api/controllers/validators/AuditLogParamsValidators.ts b/packages/backend/src/api/controllers/validators/AuditLogParamsValidators.ts index bf8ca796a5..83a84d2928 100644 --- a/packages/backend/src/api/controllers/validators/AuditLogParamsValidators.ts +++ b/packages/backend/src/api/controllers/validators/AuditLogParamsValidators.ts @@ -1,4 +1,4 @@ -import { IsNumber, IsNotEmpty, IsEnum, IsOptional } from 'class-validator'; +import { IsNumber, IsNotEmpty, IsEnum, IsOptional, IsString, IsUUID } from 'class-validator'; import { LOG_TYPE } from 'upgrade_types'; export class AuditLogParamsValidator { @IsNumber() @@ -12,4 +12,9 @@ export class AuditLogParamsValidator { @IsOptional() @IsEnum(LOG_TYPE) public filter?: LOG_TYPE; + + @IsOptional() + @IsString() + @IsUUID() + public experimentId?: string; } diff --git a/packages/backend/src/api/repositories/ExperimentAuditLogRepository.ts b/packages/backend/src/api/repositories/ExperimentAuditLogRepository.ts index 31cfbc93a7..391c8f078e 100644 --- a/packages/backend/src/api/repositories/ExperimentAuditLogRepository.ts +++ b/packages/backend/src/api/repositories/ExperimentAuditLogRepository.ts @@ -7,7 +7,12 @@ import repositoryError from './utils/repositoryError'; @EntityRepository(ExperimentAuditLog) export class ExperimentAuditLogRepository extends Repository { - public async paginatedFind(limit: number, offset: number, filter: LOG_TYPE): Promise { + public async paginatedFind( + limit: number, + offset: number, + filter?: LOG_TYPE, + experimentId?: string + ): Promise { let queryBuilder = this.createQueryBuilder('audit') .offset(offset) .limit(limit) @@ -17,20 +22,43 @@ export class ExperimentAuditLogRepository extends Repository if (filter) { queryBuilder = queryBuilder.where('audit.type = :filter', { filter }); } + + if (experimentId) { + const experimentIdCondition = "(audit.data->>'experimentId' = :experimentId)"; + queryBuilder = filter + ? queryBuilder.andWhere(experimentIdCondition, { experimentId }) + : queryBuilder.where(experimentIdCondition, { experimentId }); + } + return queryBuilder.getMany().catch((error: any) => { - const errorMsg = repositoryError('ExperimentAuditLogRepository', 'paginatedFind', { limit, offset }, error); + const errorMsg = repositoryError( + 'ExperimentAuditLogRepository', + 'paginatedFind', + { limit, offset, filter, experimentId }, + error + ); throw errorMsg; }); } - public getTotalLogs(filter: LOG_TYPE): Promise { - return this.createQueryBuilder('audit') - .where('audit.type = :filter', { filter }) - .getCount() - .catch((error: any) => { - const errorMsg = repositoryError('ExperimentAuditLogRepository', 'paginatedFind', { filter }, error); - throw errorMsg; - }); + public getTotalLogs(filter?: LOG_TYPE, experimentId?: string): Promise { + let queryBuilder = this.createQueryBuilder('audit'); + + if (filter) { + queryBuilder = queryBuilder.where('audit.type = :filter', { filter }); + } + + if (experimentId) { + const experimentIdCondition = "(audit.data->>'experimentId' = :experimentId)"; + queryBuilder = filter + ? queryBuilder.andWhere(experimentIdCondition, { experimentId }) + : queryBuilder.where(experimentIdCondition, { experimentId }); + } + + return queryBuilder.getCount().catch((error: any) => { + const errorMsg = repositoryError('ExperimentAuditLogRepository', 'getTotalLogs', { filter, experimentId }, error); + throw errorMsg; + }); } public async saveRawJson( diff --git a/packages/backend/src/api/services/AnalyticsService.ts b/packages/backend/src/api/services/AnalyticsService.ts index 10f611deab..444c565455 100644 --- a/packages/backend/src/api/services/AnalyticsService.ts +++ b/packages/backend/src/api/services/AnalyticsService.ts @@ -529,7 +529,7 @@ export class AnalyticsService { } await this.experimentAuditLogRepository.saveRawJson( LOG_TYPE.EXPERIMENT_DATA_EXPORTED, - { experimentName: experimentDetails[0].experimentName }, + { experimentId: experimentDetails[0].experimentId, experimentName: experimentDetails[0].experimentName }, user ); logger.info({ message: `Exported Data emailed successfully to ${email}` }); diff --git a/packages/backend/src/api/services/AuditService.ts b/packages/backend/src/api/services/AuditService.ts index e46793a914..2b6294fea4 100644 --- a/packages/backend/src/api/services/AuditService.ts +++ b/packages/backend/src/api/services/AuditService.ts @@ -11,15 +11,25 @@ export class AuditService { private experimentAuditLogRepository: ExperimentAuditLogRepository ) {} - public getTotalLogs(filter: LOG_TYPE): Promise { + public getTotalLogs(filter?: LOG_TYPE, experimentId?: string): Promise { if (filter) { - return this.experimentAuditLogRepository.getTotalLogs(filter); + return this.experimentAuditLogRepository.getTotalLogs(filter, experimentId); } + + if (experimentId) { + return this.experimentAuditLogRepository.count({ where: { id: experimentId } }); + } + return this.experimentAuditLogRepository.count(); } - public async getAuditLogs(limit: number, offset: number, filter?: LOG_TYPE): Promise { - const logs = await this.experimentAuditLogRepository.paginatedFind(limit, offset, filter); + public async getAuditLogs( + limit: number, + offset: number, + filter?: LOG_TYPE, + experimentId?: string + ): Promise { + const logs = await this.experimentAuditLogRepository.paginatedFind(limit, offset, filter, experimentId); return logs.map((log) => this.convertStateStrings(log)); } diff --git a/packages/backend/src/api/services/ExperimentService.ts b/packages/backend/src/api/services/ExperimentService.ts index 5a6a47c552..5552e92cc4 100644 --- a/packages/backend/src/api/services/ExperimentService.ts +++ b/packages/backend/src/api/services/ExperimentService.ts @@ -351,6 +351,7 @@ export class ExperimentService { // adding entry in audit log const deleteAuditLogData = { + experimentId: experiment.id, experimentName: experiment.name, }; diff --git a/packages/backend/src/api/services/ImportExportService.ts b/packages/backend/src/api/services/ImportExportService.ts index cc145926a5..cf718b1e17 100644 --- a/packages/backend/src/api/services/ImportExportService.ts +++ b/packages/backend/src/api/services/ImportExportService.ts @@ -135,7 +135,7 @@ export class ImportExportService { this.experimentAuditLogRepository.saveRawJson( LOG_TYPE.EXPERIMENT_DESIGN_EXPORTED, - { experimentName: experiment.name }, + { experimentId: experiment.id, experimentName: experiment.name }, user ); return experimentRecord; diff --git a/packages/backend/test/unit/controllers/LogController.test.ts b/packages/backend/test/unit/controllers/LogController.test.ts index cb68d5b6ea..72f17e4d75 100644 --- a/packages/backend/test/unit/controllers/LogController.test.ts +++ b/packages/backend/test/unit/controllers/LogController.test.ts @@ -36,6 +36,45 @@ describe('Log Controller Testing', () => { .expect(200); }); + test('Post request for /api/audit with experimentId', () => { + return request(app) + .post('/api/audit') + .send({ + skip: 0, + take: 0, + filter: 'experimentCreated', + experimentId: '550e8400-e29b-41d4-a716-446655440000', + }) + .set('Accept', 'application/json') + .expect('Content-Type', /json/) + .expect(200); + }); + + test('Post request for /api/audit with only experimentId (no filter)', () => { + return request(app) + .post('/api/audit') + .send({ + skip: 0, + take: 10, + experimentId: '550e8400-e29b-41d4-a716-446655440000', + }) + .set('Accept', 'application/json') + .expect('Content-Type', /json/) + .expect(200); + }); + + test('Post request for /api/audit with invalid experimentId should fail', () => { + return request(app) + .post('/api/audit') + .send({ + skip: 0, + take: 0, + experimentId: 'invalid-uuid', + }) + .set('Accept', 'application/json') + .expect(400); + }); + test('Post request for /api/error', () => { return request(app) .post('/api/error') diff --git a/packages/backend/test/unit/repositories/ExperimentAuditLogRepository.test.ts b/packages/backend/test/unit/repositories/ExperimentAuditLogRepository.test.ts index b05c5bdb55..ce7e31bcd9 100644 --- a/packages/backend/test/unit/repositories/ExperimentAuditLogRepository.test.ts +++ b/packages/backend/test/unit/repositories/ExperimentAuditLogRepository.test.ts @@ -143,6 +143,32 @@ describe('ExperimentAuditLogRepository Testing', () => { expect(res).toEqual(5); }); + it('should get total logs with experimentId', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const res = await repo.getTotalLogs(LOG_TYPE.EXPERIMENT_CREATED, experimentId); + + expect(repo.createQueryBuilder).toHaveBeenCalledTimes(1); + + expect(mock.where).toHaveBeenCalledTimes(1); + expect(mock.andWhere).toHaveBeenCalledTimes(1); + expect(mock.getCount).toHaveBeenCalledTimes(1); + + expect(res).toEqual(5); + }); + + it('should get total logs with only experimentId (no filter)', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const res = await repo.getTotalLogs(undefined, experimentId); + + expect(repo.createQueryBuilder).toHaveBeenCalledTimes(1); + + expect(mock.where).toHaveBeenCalledTimes(1); + expect(mock.andWhere).not.toHaveBeenCalled(); + expect(mock.getCount).toHaveBeenCalledTimes(1); + + expect(res).toEqual(5); + }); + it('should throw an error when get total logs fails', async () => { mock.getCount.mockRejectedValue(err); @@ -188,6 +214,44 @@ describe('ExperimentAuditLogRepository Testing', () => { expect(res).toEqual(result); }); + it('should find paginated with experimentId', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const res = await repo.paginatedFind(3, 0, LOG_TYPE.EXPERIMENT_CREATED, experimentId); + + expect(repo.createQueryBuilder).toHaveBeenCalledTimes(1); + + expect(mock.offset).toHaveBeenCalledTimes(1); + expect(mock.offset).toHaveBeenCalledWith(0); + expect(mock.limit).toHaveBeenCalledTimes(1); + expect(mock.limit).toHaveBeenCalledWith(3); + expect(mock.leftJoinAndSelect).toHaveBeenCalledTimes(1); + expect(mock.orderBy).toHaveBeenCalledTimes(1); + expect(mock.where).toHaveBeenCalledTimes(1); + expect(mock.andWhere).toHaveBeenCalledTimes(1); + expect(mock.getMany).toHaveBeenCalledTimes(1); + + expect(res).toEqual(result); + }); + + it('should find paginated with only experimentId (no filter)', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const res = await repo.paginatedFind(3, 0, undefined, experimentId); + + expect(repo.createQueryBuilder).toHaveBeenCalledTimes(1); + + expect(mock.offset).toHaveBeenCalledTimes(1); + expect(mock.offset).toHaveBeenCalledWith(0); + expect(mock.limit).toHaveBeenCalledTimes(1); + expect(mock.limit).toHaveBeenCalledWith(3); + expect(mock.leftJoinAndSelect).toHaveBeenCalledTimes(1); + expect(mock.orderBy).toHaveBeenCalledTimes(1); + expect(mock.where).toHaveBeenCalledTimes(1); + expect(mock.andWhere).not.toHaveBeenCalled(); + expect(mock.getMany).toHaveBeenCalledTimes(1); + + expect(res).toEqual(result); + }); + it('should throw an error when find paginated fails', async () => { mock.getMany.mockRejectedValue(err); diff --git a/packages/backend/test/unit/services/AuditService.test.ts b/packages/backend/test/unit/services/AuditService.test.ts index a3e9810ce1..9e0457117d 100644 --- a/packages/backend/test/unit/services/AuditService.test.ts +++ b/packages/backend/test/unit/services/AuditService.test.ts @@ -1,5 +1,4 @@ import { AuditService } from '../../../src/api/services/AuditService'; -import { Repository } from 'typeorm'; import { Test, TestingModule } from '@nestjs/testing'; import { getRepositoryToken } from '@nestjs/typeorm'; import { ExperimentAuditLogRepository } from '../../../src/api/repositories/ExperimentAuditLogRepository'; @@ -10,7 +9,7 @@ const auditArr = [1, 2, 3]; describe('Audit Service Testing', () => { let service: AuditService; - let repo: Repository; + let repo: ExperimentAuditLogRepository; let module: TestingModule; beforeAll(() => { @@ -35,7 +34,7 @@ describe('Audit Service Testing', () => { }).compile(); service = module.get(AuditService); - repo = module.get>(getRepositoryToken(ExperimentAuditLogRepository)); + repo = module.get(getRepositoryToken(ExperimentAuditLogRepository)); }); it('should be defined', async () => { @@ -56,11 +55,39 @@ describe('Audit Service Testing', () => { expect(flags).toEqual(auditArr.length); }); + it('should return a count of audit logs with experimentId', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const flags = await service.getTotalLogs(LOG_TYPE.EXPERIMENT_CREATED, experimentId); + expect(flags).toEqual(auditArr.length); + expect(repo.getTotalLogs).toHaveBeenCalledWith(LOG_TYPE.EXPERIMENT_CREATED, experimentId); + }); + + it('should return a count of audit logs with only experimentId (no filter)', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const flags = await service.getTotalLogs(undefined, experimentId); + expect(flags).toEqual(auditArr.length); + expect(repo.count).toHaveBeenCalledWith({ where: { id: experimentId } }); + }); + it('should return an array of audit logs', async () => { const flags = await service.getAuditLogs(1, 0); expect(flags).toEqual(auditArr); }); + it('should return an array of audit logs with experimentId', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const flags = await service.getAuditLogs(1, 0, undefined, experimentId); + expect(flags).toEqual(auditArr); + expect(repo.paginatedFind).toHaveBeenCalledWith(1, 0, undefined, experimentId); + }); + + it('should return an array of audit logs with filter and experimentId', async () => { + const experimentId = '550e8400-e29b-41d4-a716-446655440000'; + const flags = await service.getAuditLogs(1, 0, LOG_TYPE.EXPERIMENT_CREATED, experimentId); + expect(flags).toEqual(auditArr); + expect(repo.paginatedFind).toHaveBeenCalledWith(1, 0, LOG_TYPE.EXPERIMENT_CREATED, experimentId); + }); + it('should return an array of audit logs by type', async () => { const flags = await service.getAuditLogByType(LOG_TYPE.EXPERIMENT_CREATED); expect(flags).toEqual(auditArr); diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.spec.ts b/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.spec.ts index f56f564e77..4871365b64 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.spec.ts @@ -236,4 +236,74 @@ describe('LogsService', () => { expect(mockStore.dispatch).toHaveBeenCalledWith(LogActions.actionSetErrorLogFilter({ filterType })); }); }); + + describe('#fetchExperimentLogs', () => { + it('should dispatch actionGetExperimentLogs with experimentId and fromStart', () => { + const experimentId = 'exp-123'; + const fromStart = true; + + service.fetchExperimentLogs(experimentId, fromStart); + + expect(mockStore.dispatch).toHaveBeenCalledWith(LogActions.actionGetExperimentLogs({ experimentId, fromStart })); + }); + + it('should dispatch actionGetExperimentLogs with only experimentId', () => { + const experimentId = 'exp-123'; + + service.fetchExperimentLogs(experimentId); + + expect(mockStore.dispatch).toHaveBeenCalledWith( + LogActions.actionGetExperimentLogs({ experimentId, fromStart: undefined }) + ); + }); + }); + + describe('#setExperimentLogFilter', () => { + it('should dispatch actionSetExperimentLogFilter with experimentId and filterType', () => { + const experimentId = 'exp-123'; + const filterType = LOG_TYPE.EXPERIMENT_UPDATED; + + service.setExperimentLogFilter(experimentId, filterType); + + expect(mockStore.dispatch).toHaveBeenCalledWith( + LogActions.actionSetExperimentLogFilter({ experimentId, filterType }) + ); + }); + }); + + describe('#isAllExperimentLogsFetched', () => { + const testCases = [ + { + whenCondition: 'skip does not equal total', + expectedValue: false, + metadata: { skip: 10, total: 20, logs: [], isLoading: false, filter: null }, + }, + { + whenCondition: 'skip equals total', + expectedValue: true, + metadata: { skip: 20, total: 20, logs: [], isLoading: false, filter: null }, + }, + { + whenCondition: 'metadata is null', + expectedValue: false, + metadata: null, + }, + ]; + + testCases.forEach((testCase) => { + const { whenCondition, expectedValue, metadata } = testCase; + + it(`WHEN ${whenCondition}, THEN ${expectedValue}`, fakeAsync(() => { + const experimentId = 'exp-123'; + LogSelectors.selectIsAllExperimentLogsFetched.setResult(expectedValue); + + service.isAllExperimentLogsFetched(experimentId).subscribe((val) => { + tick(0); + expect(val).toEqual(expectedValue); + }); + + tick(); + })); + }); + }); }); diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.ts b/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.ts index 46ec703bff..7ab5f580a4 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/logs.service.ts @@ -11,6 +11,9 @@ import { selectTotalAuditLogs, selectTotalErrorLogs, selectSkipErrorLog, + selectIsExperimentLogsLoading, + selectIsAllExperimentLogsFetched, + selectExperimentLogs, } from './store/logs.selectors'; import { combineLatest } from 'rxjs'; import { selectAllExperiment } from '../experiments/store/experiments.selectors'; @@ -114,4 +117,24 @@ export class LogsService { setErrorLogFilter(filterType: SERVER_ERROR) { this.store$.dispatch(logsActions.actionSetErrorLogFilter({ filterType })); } + + getExperimentLogsById(experimentId: string) { + return this.store$.pipe(select(selectExperimentLogs, { experimentId })); + } + + getExperimentLogsLoadingState(experimentId: string) { + return this.store$.pipe(select(selectIsExperimentLogsLoading, { experimentId })); + } + + isAllExperimentLogsFetched(experimentId: string) { + return this.store$.pipe(select(selectIsAllExperimentLogsFetched, { experimentId })); + } + + fetchExperimentLogs(experimentId: string, fromStart?: boolean) { + this.store$.dispatch(logsActions.actionGetExperimentLogs({ experimentId, fromStart })); + } + + setExperimentLogFilter(experimentId: string, filterType: LOG_TYPE) { + this.store$.dispatch(logsActions.actionSetExperimentLogFilter({ experimentId, filterType })); + } } diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.actions.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.actions.ts index 915ca4b751..6c13d41cc4 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.actions.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.actions.ts @@ -40,3 +40,24 @@ export const actionSetErrorLogFilter = createAction( '[Logs] Set Error Log Filter', props<{ filterType: SERVER_ERROR }>() ); + +// Experiment-specific log actions +export const actionGetExperimentLogs = createAction( + '[Logs] Get Experiment Logs', + props<{ experimentId: string; fromStart?: boolean }>() +); + +export const actionGetExperimentLogsSuccess = createAction( + '[Logs] Get Experiment Logs Success', + props<{ experimentId: string; auditLogs: AuditLogs[]; totalAuditLogs: number; fromStart: boolean }>() +); + +export const actionGetExperimentLogsFailure = createAction( + '[Logs] Get Experiment Logs Failure', + props<{ experimentId: string }>() +); + +export const actionSetExperimentLogFilter = createAction( + '[Logs] Set Experiment Log Filter', + props<{ experimentId: string; filterType: LOG_TYPE }>() +); diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.spec.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.spec.ts index acb2ba4f1e..8a7ed6c692 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.spec.ts @@ -275,4 +275,119 @@ describe('LogsEffects', () => { expect(store$.dispatch).toHaveBeenCalledWith(LogsActions.actionGetErrorLogs({ fromStart: true })); })); }); + + describe('getExperimentLogs$', () => { + beforeEach(() => { + LogsSelectors.selectExperimentLogsState.setResult({}); + }); + + it('should dispatch actionGetExperimentLogsSuccess when service call succeeds', fakeAsync(() => { + const experimentId = 'exp-123'; + const mockReturnData = { + nodes: [], + total: 5, + }; + + logsDataService.getAllAuditLogs = jest.fn().mockReturnValue(of(mockReturnData)); + + const expectedAction = LogsActions.actionGetExperimentLogsSuccess({ + experimentId, + auditLogs: [], + totalAuditLogs: 5, + fromStart: false, + }); + + service.getExperimentLogs$.subscribe((result) => { + expect(result).toEqual(expectedAction); + }); + + actions$.next(LogsActions.actionGetExperimentLogs({ experimentId })); + + tick(0); + })); + + it('should dispatch actionGetExperimentLogsFailure when service call fails', fakeAsync(() => { + const experimentId = 'exp-123'; + + logsDataService.getAllAuditLogs = jest.fn().mockReturnValue(throwError(() => new Error('test error'))); + + const expectedAction = LogsActions.actionGetExperimentLogsFailure({ experimentId }); + + service.getExperimentLogs$.subscribe((result) => { + expect(result).toEqual(expectedAction); + }); + + actions$.next(LogsActions.actionGetExperimentLogs({ experimentId })); + + tick(0); + })); + + it('should not fetch if all logs already fetched and fromStart is false', fakeAsync(() => { + const experimentId = 'exp-123'; + LogsSelectors.selectExperimentLogsState.setResult({ + [experimentId]: { skip: 10, total: 10, logs: [], isLoading: false, filter: null }, + }); + + let neverEmitted = true; + + service.getExperimentLogs$.subscribe(() => { + neverEmitted = false; + }); + + actions$.next(LogsActions.actionGetExperimentLogs({ experimentId, fromStart: false })); + + tick(0); + + expect(neverEmitted).toEqual(true); + })); + + it('should fetch with filter when metadata has filter set', fakeAsync(() => { + const experimentId = 'exp-123'; + const filter = LOG_TYPE.EXPERIMENT_UPDATED; + LogsSelectors.selectExperimentLogsState.setResult({ + [experimentId]: { skip: 0, total: null, logs: [], isLoading: false, filter }, + }); + + const mockReturnData = { + nodes: [], + total: 5, + }; + + logsDataService.getAllAuditLogs = jest.fn().mockReturnValue(of(mockReturnData)); + + service.getExperimentLogs$.subscribe(); + + actions$.next(LogsActions.actionGetExperimentLogs({ experimentId })); + + tick(0); + + expect(logsDataService.getAllAuditLogs).toHaveBeenCalledWith({ + skip: 0, + take: 20, + experimentId, + filter, + }); + })); + }); + + describe('changeExperimentLogFilter$', () => { + it('should dispatch actionGetExperimentLogs with fromStart: true', fakeAsync(() => { + const experimentId = 'exp-123'; + + service.changeExperimentLogFilter$.subscribe(); + + actions$.next( + LogsActions.actionSetExperimentLogFilter({ + experimentId, + filterType: LOG_TYPE.EXPERIMENT_CREATED, + }) + ); + + tick(0); + + expect(store$.dispatch).toHaveBeenCalledWith( + LogsActions.actionGetExperimentLogs({ experimentId, fromStart: true }) + ); + })); + }); }); diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.ts index 14be613c0e..67042f2bf7 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.effects.ts @@ -13,6 +13,7 @@ import { selectSkipErrorLog, selectAuditFilterType, selectErrorFilterType, + selectExperimentLogsState, } from './logs.selectors'; import { NUMBER_OF_LOGS, AuditLogParams, ErrorLogParams } from './logs.model'; @@ -60,6 +61,49 @@ export class LogsEffects { ) ); + getExperimentLogs$ = createEffect(() => + this.actions$.pipe( + ofType(logsActions.actionGetExperimentLogs), + withLatestFrom(this.store$.pipe(select(selectExperimentLogsState))), + map(([action, experimentLogsState]) => ({ + experimentId: action.experimentId, + fromStart: action.fromStart || false, + metadata: experimentLogsState[action.experimentId], + })), + filter(({ metadata, fromStart }) => { + if (fromStart) return true; + if (!metadata || metadata.total === null) return true; + return metadata.skip < metadata.total; + }), + mergeMap(({ experimentId, fromStart, metadata }) => { + const skip = fromStart ? 0 : metadata?.skip || 0; + const filter = metadata?.filter || null; + + let params: AuditLogParams = { + skip, + take: NUMBER_OF_LOGS, + experimentId, + }; + + if (filter) { + params = { ...params, filter }; + } + + return this.logsDataService.getAllAuditLogs(params).pipe( + map((data: any) => + logsActions.actionGetExperimentLogsSuccess({ + experimentId, + auditLogs: data.nodes, + totalAuditLogs: data.total, + fromStart, + }) + ), + catchError(() => [logsActions.actionGetExperimentLogsFailure({ experimentId })]) + ); + }) + ) + ); + getAllErrorLogs$ = createEffect(() => this.actions$.pipe( ofType(logsActions.actionGetErrorLogs), @@ -124,4 +168,15 @@ export class LogsEffects { ), { dispatch: false } ); + + changeExperimentLogFilter$ = createEffect( + () => + this.actions$.pipe( + ofType(logsActions.actionSetExperimentLogFilter), + tap(({ experimentId }) => { + this.store$.dispatch(logsActions.actionGetExperimentLogs({ experimentId, fromStart: true })); + }) + ), + { dispatch: false } + ); } diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.model.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.model.ts index ad41f0fafc..44123349bd 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.model.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.model.ts @@ -1,8 +1,10 @@ import { AppState } from '../../core.module'; import { EntityState } from '@ngrx/entity'; import { LOG_TYPE, SERVER_ERROR } from 'upgrade_types'; +import { User } from '../../users/store/users.model'; export const NUMBER_OF_LOGS = 20; +export const SYSTEM_USER_EMAIL = 'system@gmail.com'; export enum LogType { ERROR_LOG = 'Error log', @@ -18,6 +20,7 @@ export interface AuditLogParams { skip: number; take: number; filter?: LOG_TYPE; + experimentId?: string; } export interface ErrorLogParams { @@ -33,6 +36,7 @@ export interface AuditLogs { versionNumber: number; type: LOG_TYPE; data: any; + user?: User; } export interface ErrorLogs { @@ -47,6 +51,14 @@ export interface ErrorLogs { name: string; } +export interface AuditLogsMetadata { + logs: AuditLogs[]; + skip: number; + total: number | null; + isLoading: boolean; + filter: LOG_TYPE | null; +} + export interface LogState extends EntityState { isAuditLogLoading: boolean; isErrorLogLoading: boolean; @@ -56,6 +68,7 @@ export interface LogState extends EntityState { totalErrorLogs: number; auditLogFilter: LOG_TYPE; errorLogFilter: SERVER_ERROR; + experimentAuditLogs: Record; } export interface State extends AppState { diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.spec.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.spec.ts index 989e838754..43df804fc9 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.spec.ts @@ -213,4 +213,123 @@ describe('LogsReducer', () => { expect(newState.errorLogFilter).toEqual(SERVER_ERROR.INCORRECT_PARAM_FORMAT); }); + + it('should handle actionGetExperimentLogs by setting isLoading to true for experiment', () => { + const previousState = { ...initialState }; + const experimentId = 'exp-123'; + const testAction = LogsActions.actionGetExperimentLogs({ experimentId, fromStart: false }); + + const newState = logsReducer(previousState, testAction); + + expect(newState.experimentAuditLogs[experimentId]).toBeDefined(); + expect(newState.experimentAuditLogs[experimentId].isLoading).toEqual(true); + }); + + it('should handle actionGetExperimentLogs with fromStart by resetting logs and skip', () => { + const previousState = { ...initialState }; + const experimentId = 'exp-123'; + previousState.experimentAuditLogs[experimentId] = { + logs: [...mockAuditLogs], + skip: 10, + total: 20, + isLoading: false, + filter: null, + }; + const testAction = LogsActions.actionGetExperimentLogs({ experimentId, fromStart: true }); + + const newState = logsReducer(previousState, testAction); + + expect(newState.experimentAuditLogs[experimentId].logs).toEqual([]); + expect(newState.experimentAuditLogs[experimentId].skip).toEqual(0); + expect(newState.experimentAuditLogs[experimentId].isLoading).toEqual(true); + }); + + it('should handle actionGetExperimentLogsSuccess by appending logs when fromStart is false', () => { + const previousState = { ...initialState }; + const experimentId = 'exp-123'; + previousState.experimentAuditLogs[experimentId] = { + logs: [mockAuditLogs[0]], + skip: 1, + total: null, + isLoading: true, + filter: null, + }; + const testAction = LogsActions.actionGetExperimentLogsSuccess({ + experimentId, + auditLogs: [mockAuditLogs[1]], + totalAuditLogs: 2, + fromStart: false, + }); + + const newState = logsReducer(previousState, testAction); + + expect(newState.experimentAuditLogs[experimentId].logs).toEqual([mockAuditLogs[0], mockAuditLogs[1]]); + expect(newState.experimentAuditLogs[experimentId].skip).toEqual(2); + expect(newState.experimentAuditLogs[experimentId].total).toEqual(2); + expect(newState.experimentAuditLogs[experimentId].isLoading).toEqual(false); + }); + + it('should handle actionGetExperimentLogsSuccess by replacing logs when fromStart is true', () => { + const previousState = { ...initialState }; + const experimentId = 'exp-123'; + previousState.experimentAuditLogs[experimentId] = { + logs: [mockAuditLogs[0]], + skip: 1, + total: null, + isLoading: true, + filter: null, + }; + const testAction = LogsActions.actionGetExperimentLogsSuccess({ + experimentId, + auditLogs: [mockAuditLogs[1]], + totalAuditLogs: 1, + fromStart: true, + }); + + const newState = logsReducer(previousState, testAction); + + expect(newState.experimentAuditLogs[experimentId].logs).toEqual([mockAuditLogs[1]]); + expect(newState.experimentAuditLogs[experimentId].skip).toEqual(1); + expect(newState.experimentAuditLogs[experimentId].total).toEqual(1); + expect(newState.experimentAuditLogs[experimentId].isLoading).toEqual(false); + }); + + it('should handle actionGetExperimentLogsFailure by setting isLoading to false', () => { + const previousState = { ...initialState }; + const experimentId = 'exp-123'; + previousState.experimentAuditLogs[experimentId] = { + logs: [], + skip: 0, + total: null, + isLoading: true, + filter: null, + }; + const testAction = LogsActions.actionGetExperimentLogsFailure({ experimentId }); + + const newState = logsReducer(previousState, testAction); + + expect(newState.experimentAuditLogs[experimentId].isLoading).toEqual(false); + }); + + it('should handle actionSetExperimentLogFilter by setting filter and resetting logs', () => { + const previousState = { ...initialState }; + const experimentId = 'exp-123'; + previousState.experimentAuditLogs[experimentId] = { + logs: [...mockAuditLogs], + skip: 10, + total: 20, + isLoading: false, + filter: null, + }; + const testAction = LogsActions.actionSetExperimentLogFilter({ + experimentId, + filterType: LOG_TYPE.EXPERIMENT_UPDATED, + }); + + const newState = logsReducer(previousState, testAction); + + expect(newState.experimentAuditLogs[experimentId].filter).toEqual(LOG_TYPE.EXPERIMENT_UPDATED); + expect(newState.experimentAuditLogs[experimentId].logs).toEqual([]); + expect(newState.experimentAuditLogs[experimentId].skip).toEqual(0); + }); }); diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.ts index 07905194df..ac4134adb8 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.ts @@ -1,12 +1,20 @@ import { createReducer, on, Action } from '@ngrx/store'; import { createEntityAdapter, EntityAdapter } from '@ngrx/entity'; -import { AuditLogs, LogState, ErrorLogs } from './logs.model'; +import { AuditLogs, LogState, ErrorLogs, AuditLogsMetadata } from './logs.model'; import * as logsActions from './logs.actions'; export const adapter: EntityAdapter = createEntityAdapter(); export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors(); +const initialAuditLogsMetadata: AuditLogsMetadata = { + logs: [], + skip: 0, + total: null, + isLoading: false, + filter: null, +}; + export const initialState: LogState = adapter.getInitialState({ isAuditLogLoading: false, isErrorLogLoading: false, @@ -16,6 +24,7 @@ export const initialState: LogState = adapter.getInitialState({ totalErrorLogs: null, auditLogFilter: null, errorLogFilter: null, + experimentAuditLogs: {}, }); const reducer = createReducer( @@ -55,7 +64,68 @@ const reducer = createReducer( on(logsActions.actionSetIsAuditLogLoading, (state, { isAuditLogLoading }) => ({ ...state, isAuditLogLoading })), on(logsActions.actionSetIsErrorLogLoading, (state, { isErrorLogLoading }) => ({ ...state, isErrorLogLoading })), on(logsActions.actionSetAuditLogFilter, (state, { filterType }) => ({ ...state, auditLogFilter: filterType })), - on(logsActions.actionSetErrorLogFilter, (state, { filterType }) => ({ ...state, errorLogFilter: filterType })) + on(logsActions.actionSetErrorLogFilter, (state, { filterType }) => ({ ...state, errorLogFilter: filterType })), + // Experiment-specific log handlers + on(logsActions.actionGetExperimentLogs, (state, { experimentId, fromStart }) => { + const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata; + return { + ...state, + experimentAuditLogs: { + ...state.experimentAuditLogs, + [experimentId]: { + ...experimentLog, + isLoading: true, + ...(fromStart && { skip: 0, logs: [] }), + }, + }, + }; + }), + on(logsActions.actionGetExperimentLogsSuccess, (state, { experimentId, auditLogs, totalAuditLogs, fromStart }) => { + const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata; + const updatedLogs = fromStart ? auditLogs : [...experimentLog.logs, ...auditLogs]; + + return { + ...state, + experimentAuditLogs: { + ...state.experimentAuditLogs, + [experimentId]: { + ...experimentLog, + logs: updatedLogs, + skip: updatedLogs.length, + total: totalAuditLogs, + isLoading: false, + }, + }, + }; + }), + on(logsActions.actionGetExperimentLogsFailure, (state, { experimentId }) => { + const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata; + return { + ...state, + experimentAuditLogs: { + ...state.experimentAuditLogs, + [experimentId]: { + ...experimentLog, + isLoading: false, + }, + }, + }; + }), + on(logsActions.actionSetExperimentLogFilter, (state, { experimentId, filterType }) => { + const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata; + return { + ...state, + experimentAuditLogs: { + ...state.experimentAuditLogs, + [experimentId]: { + ...experimentLog, + filter: filterType, + logs: [], + skip: 0, + }, + }, + }; + }) ); export function logsReducer(state: LogState | undefined, action: Action) { diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.spec.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.spec.ts index 4988e33ab6..dfc1b9585e 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.spec.ts @@ -140,4 +140,125 @@ describe('LogsSelectors', () => { expect(result).toEqual(SERVER_ERROR.CONDITION_NOT_FOUND); }); }); + + describe('#selectExperimentLogsState', () => { + it('should return the experimentAuditLogs from state', () => { + const state = { ...mockState }; + const experimentLogs = { + 'exp-123': { logs: [], skip: 0, total: 10, isLoading: false, filter: null }, + }; + state.experimentAuditLogs = experimentLogs; + + const result = LogsSelectors.selectExperimentLogsState.projector(state); + + expect(result).toEqual(experimentLogs); + }); + }); + + describe('#selectExperimentLogsMetadata', () => { + it('should return metadata for specific experiment', () => { + const experimentLogs = { + 'exp-123': { logs: [], skip: 5, total: 10, isLoading: false, filter: null }, + }; + const props = { experimentId: 'exp-123' }; + + const result = LogsSelectors.selectExperimentLogsMetadata.projector(experimentLogs, props); + + expect(result).toEqual(experimentLogs['exp-123']); + }); + + it('should return null if experiment not found', () => { + const experimentLogs = {}; + const props = { experimentId: 'exp-456' }; + + const result = LogsSelectors.selectExperimentLogsMetadata.projector(experimentLogs, props); + + expect(result).toBeNull(); + }); + }); + + describe('#selectExperimentLogs', () => { + it('should return logs array from metadata', () => { + const mockLogs: AuditLogs[] = [ + { + id: 'log1', + createdAt: '2020-10-10', + updatedAt: '2020-10-10', + data: {}, + versionNumber: 1, + type: LOG_TYPE.EXPERIMENT_CREATED, + }, + ]; + const metadata = { logs: mockLogs, skip: 1, total: 1, isLoading: false, filter: null }; + const props = { experimentId: 'exp-123' }; + + const result = LogsSelectors.selectExperimentLogs.projector(metadata, props); + + expect(result).toEqual(mockLogs); + }); + + it('should return empty array if metadata is null', () => { + const props = { experimentId: 'exp-456' }; + + const result = LogsSelectors.selectExperimentLogs.projector(null, props); + + expect(result).toEqual([]); + }); + }); + + describe('#selectIsExperimentLogsLoading', () => { + it('should return isLoading from metadata', () => { + const metadata = { logs: [], skip: 0, total: 10, isLoading: true, filter: null }; + const props = { experimentId: 'exp-123' }; + + const result = LogsSelectors.selectIsExperimentLogsLoading.projector(metadata, props); + + expect(result).toEqual(true); + }); + + it('should return false if metadata is null', () => { + const props = { experimentId: 'exp-456' }; + + const result = LogsSelectors.selectIsExperimentLogsLoading.projector(null, props); + + expect(result).toEqual(false); + }); + }); + + describe('#selectIsAllExperimentLogsFetched', () => { + it('should return true when skip equals total', () => { + const metadata = { logs: [], skip: 10, total: 10, isLoading: false, filter: null }; + const props = { experimentId: 'exp-123' }; + + const result = LogsSelectors.selectIsAllExperimentLogsFetched.projector(metadata, props); + + expect(result).toEqual(true); + }); + + it('should return false when skip is less than total', () => { + const metadata = { logs: [], skip: 5, total: 10, isLoading: false, filter: null }; + const props = { experimentId: 'exp-123' }; + + const result = LogsSelectors.selectIsAllExperimentLogsFetched.projector(metadata, props); + + expect(result).toEqual(false); + }); + + it('should return false when metadata is null', () => { + const props = { experimentId: 'exp-456' }; + + const result = LogsSelectors.selectIsAllExperimentLogsFetched.projector(null, props); + + expect(result).toEqual(false); + }); + + it('should return false when total is null', () => { + const metadata = { logs: [], skip: 5, total: null, isLoading: false, filter: null }; + const props = { experimentId: 'exp-123' }; + + const result = LogsSelectors.selectIsAllExperimentLogsFetched.projector(metadata, props); + + expect(result).toEqual(false); + }); + }); }); diff --git a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.ts b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.ts index ee76267b47..7112a1caff 100644 --- a/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.ts +++ b/packages/frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.ts @@ -38,3 +38,30 @@ export const selectTotalErrorLogs = createSelector(selectLogState, (state) => st export const selectAuditFilterType = createSelector(selectLogState, (state) => state.auditLogFilter); export const selectErrorFilterType = createSelector(selectLogState, (state) => state.errorLogFilter); + +// Experiment-specific log selectors +export const selectExperimentLogsState = createSelector(selectLogState, (state) => state.experimentAuditLogs); + +export const selectExperimentLogsMetadata = createSelector( + selectExperimentLogsState, + (experimentLogs: Record, props: { experimentId: string }) => experimentLogs[props.experimentId] || null +); + +export const selectExperimentLogs = createSelector(selectExperimentLogsMetadata, (metadata) => metadata?.logs || []); + +export const selectIsExperimentLogsLoading = createSelector( + selectExperimentLogsMetadata, + (metadata) => metadata?.isLoading || false +); + +export const selectExperimentLogsTotal = createSelector( + selectExperimentLogsMetadata, + (metadata) => metadata?.total || 0 +); + +export const selectExperimentLogsSkip = createSelector(selectExperimentLogsMetadata, (metadata) => metadata?.skip || 0); + +export const selectIsAllExperimentLogsFetched = createSelector(selectExperimentLogsMetadata, (metadata) => { + if (!metadata || metadata.total === null) return false; + return metadata.skip >= metadata.total; +}); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.html b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.html index d943d04dc7..17e00ab5d7 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.html +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.html @@ -63,6 +63,13 @@ [isSectionCardExpanded]="isSectionCardExpanded" section-card > + + + diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.ts index 403fcfc8bf..d986ad2da7 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-details-page-content.component.ts @@ -12,6 +12,7 @@ import { ExperimentEnrollmentDataSectionCardComponent } from './experiment-enrol import { ExperimentMetricsDataSectionCardComponent } from './experiment-metrics-data-section-card/experiment-metrics-data-section-card.component'; import { ExperimentPayloadsSectionCardComponent } from './experiment-payloads-section-card/experiment-payloads-section-card.component'; import { ExperimentRewardFeedbackSectionCardComponent } from './experiment-reward-feedback-section-card/experiment-reward-feedback-section-card.component'; +import { ExperimentLogSectionCardComponent } from './experiment-log-section-card/experiment-log-section-card.component'; import { ActivatedRoute, Router, NavigationEnd } from '@angular/router'; import { ExperimentService } from '../../../../../../core/experiments/experiments.service'; import { Observable, Subscription, combineLatest } from 'rxjs'; @@ -37,6 +38,7 @@ import { ASSIGNMENT_ALGORITHM } from 'upgrade_types'; ExperimentEnrollmentDataSectionCardComponent, ExperimentRewardFeedbackSectionCardComponent, ExperimentMetricsDataSectionCardComponent, + ExperimentLogSectionCardComponent, ], templateUrl: './experiment-details-page-content.component.html', styleUrl: './experiment-details-page-content.component.scss', @@ -44,7 +46,7 @@ import { ASSIGNMENT_ALGORITHM } from 'upgrade_types'; }) export class ExperimentDetailsPageContentComponent implements OnInit, OnDestroy { isSectionCardExpanded = true; - activeTabIndex = 0; // 0 for Design, 1 for Data + activeTabIndex = 0; // 0 for Design, 1 for Data, 2 for Logs experiment$: Observable; experimentIdSub: Subscription; shouldShowRewardFeedback$: Observable; diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.html b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.html new file mode 100644 index 0000000000..ea089cab2f --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.ts new file mode 100644 index 0000000000..c551eaae59 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-log-section-card.component.ts @@ -0,0 +1,251 @@ +import { ChangeDetectionStrategy, Component, Input, OnInit, OnDestroy } from '@angular/core'; +import { + CommonSectionCardActionButtonsComponent, + CommonSectionCardComponent, + CommonSectionCardSearchHeaderComponent, +} from '../../../../../../../shared-standalone-component-lib/components'; +import { + FilterOption, + CommonSearchWidgetSearchParams, +} from '../../../../../../../shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component'; +import { CommonModule } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; +import { ExperimentService } from '../../../../../../../core/experiments/experiments.service'; +import { Experiment } from '../../../../../../../core/experiments/store/experiments.model'; +import { LogsService } from '../../../../../../../core/logs/logs.service'; +import { SharedModule } from '../../../../../../../shared/shared.module'; +import { CommonAuditLogTimelineComponent } from '../../../../../../../shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component'; +import { AuditLogs, LogDateFormatType } from '../../../../../../../core/logs/store/logs.model'; +import { LOG_TYPE } from 'upgrade_types'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { combineLatest, Subject, Observable, BehaviorSubject } from 'rxjs'; +import { map, filter, takeUntil, switchMap, tap, take } from 'rxjs/operators'; +import { groupBy } from 'lodash'; +import { AuditLogTimelineConfig } from '../../../../../../../shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline-config.model'; +import { EXPERIMENT_TIMELINE_LOG_TYPE_CONFIG } from '../../../../../../../shared-standalone-component-lib/components/common-audit-log-timeline/configs/experiment-timeline.config'; + +/** + * Section card component for displaying experiment-specific audit logs in a timeline format. + * Features: + * - Dynamic filter dropdown with action types and users from logs + * - Text search capability + * - Timeline view grouped by date + * - Infinite scroll pagination + */ +@Component({ + selector: 'app-experiment-log-section-card', + imports: [ + CommonModule, + CommonSectionCardComponent, + CommonSectionCardActionButtonsComponent, + CommonSectionCardSearchHeaderComponent, + TranslateModule, + SharedModule, + CommonAuditLogTimelineComponent, + MatProgressSpinnerModule, + ], + standalone: true, + templateUrl: './experiment-log-section-card.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExperimentLogSectionCardComponent implements OnInit, OnDestroy { + @Input() isSectionCardExpanded = true; + + selectedExperiment$: Observable = this.experimentService.selectedExperiment$; + + // Search state + searchString$ = new BehaviorSubject(''); + searchKey$ = new BehaviorSubject('All'); + filterOptions$ = new BehaviorSubject([{ value: 'All' }]); + + // Logs data + experimentLogs$: Observable; + timelineDataSource$: Observable<{ dates: string[]; dateGroups: Record }>; + isLoading$: Observable; + allLogsFetched$: Observable; + + private destroy$ = new Subject(); + private currentExperimentId: string | null = null; + + LogDateFormatType = LogDateFormatType; + timelineConfig: AuditLogTimelineConfig = EXPERIMENT_TIMELINE_LOG_TYPE_CONFIG; + + constructor(private readonly experimentService: ExperimentService, private readonly logsService: LogsService) {} + + ngOnInit(): void { + // Fetch logs when experiment loads + this.selectedExperiment$ + .pipe( + filter((exp): exp is Experiment => !!exp), + tap((exp) => { + this.currentExperimentId = exp.id; + this.logsService.fetchExperimentLogs(exp.id, true); + }), + takeUntil(this.destroy$) + ) + .subscribe(); + + // Get raw logs observable + this.experimentLogs$ = this.selectedExperiment$.pipe( + filter((exp): exp is Experiment => !!exp), + switchMap((exp) => this.logsService.getExperimentLogsById(exp.id)), + tap((logs) => { + this.buildFilterOptions(logs); + }), + takeUntil(this.destroy$) + ); + + // Get loading state + this.isLoading$ = this.selectedExperiment$.pipe( + filter((exp): exp is Experiment => !!exp), + switchMap((exp) => this.logsService.getExperimentLogsLoadingState(exp.id)), + takeUntil(this.destroy$) + ); + + // Get pagination state + this.allLogsFetched$ = this.selectedExperiment$.pipe( + filter((exp): exp is Experiment => !!exp), + switchMap((exp) => this.logsService.isAllExperimentLogsFetched(exp.id)), + takeUntil(this.destroy$) + ); + + // Apply search and group by date + // TODO: prefer doing this on backend + this.timelineDataSource$ = combineLatest([this.experimentLogs$, this.searchString$, this.searchKey$]).pipe( + map(([logs, searchString, searchKey]) => { + // TODO: prefer doing this on backend + const filtered = this.filterLogs(logs, searchString, searchKey); + const dateGroups = this.groupLogsByDate(filtered); + const dates = Object.keys(dateGroups); + return { + dates, + dateGroups, + }; + }), + takeUntil(this.destroy$) + ); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + onSectionCardExpandChange(isSectionCardExpanded: boolean): void { + this.isSectionCardExpanded = isSectionCardExpanded; + } + + onSearch(params: CommonSearchWidgetSearchParams): void { + this.searchKey$.next(params.searchKey); + this.searchString$.next(params.searchString); + } + + fetchLogsOnScroll(): void { + if (!this.currentExperimentId) return; + + // Check if all logs are fetched and if not currently loading + combineLatest([this.allLogsFetched$, this.isLoading$]) + .pipe( + take(1), + filter(([allFetched, isLoading]) => !allFetched && !isLoading), + takeUntil(this.destroy$) + ) + .subscribe(() => { + this.logsService.fetchExperimentLogs(this.currentExperimentId); + }); + } + + /** + * Build dynamic filter options from logs data + */ + private buildFilterOptions(logs: AuditLogs[]): void { + if (!logs || logs.length === 0) { + this.filterOptions$.next([{ value: 'All' }]); + return; + } + + // Get unique action types (only experiment-related) + const experimentLogTypes = [ + LOG_TYPE.EXPERIMENT_CREATED, + LOG_TYPE.EXPERIMENT_UPDATED, + LOG_TYPE.EXPERIMENT_STATE_CHANGED, + LOG_TYPE.EXPERIMENT_DELETED, + LOG_TYPE.EXPERIMENT_DATA_EXPORTED, + LOG_TYPE.EXPERIMENT_DESIGN_EXPORTED, + ]; + + const actionTypes = [...new Set(logs.map((log) => log.type))].filter((type) => experimentLogTypes.includes(type)); + + // Get unique users (firstName + lastName) + const userSet = new Set(); + logs.forEach((log) => { + if (log.user?.firstName && log.user?.lastName) { + userSet.add(`${log.user.firstName} ${log.user.lastName}`); + } + }); + const users = Array.from(userSet); + + // Build grouped filter options + const options: FilterOption[] = [ + { value: 'All' }, // Standalone option + ...actionTypes.map((type) => ({ + value: type, + group: 'Event Type', // Group name + })), + ]; + + if (users.length > 0) { + users.forEach((user) => { + options.push({ value: user, group: 'Users' }); // Group name + }); + } + + this.filterOptions$.next(options); + } + + /** + * Filter logs based on search criteria + */ + private filterLogs(logs: AuditLogs[], searchString: string, searchKey: string): AuditLogs[] { + let filtered = logs; + + // Apply dropdown filter + if (searchKey && searchKey !== 'All') { + // Check if it's an action type + if (Object.values(LOG_TYPE).includes(searchKey as LOG_TYPE)) { + filtered = filtered.filter((log) => log.type === searchKey); + } + // Check if it's a user name + else { + filtered = filtered.filter((log) => { + const userName = `${log.user?.firstName || ''} ${log.user?.lastName || ''}`.trim(); + return userName === searchKey; + }); + } + } + + // Apply text search + if (searchString) { + const searchLower = searchString.toLowerCase(); + filtered = filtered.filter((log) => { + const userName = `${log.user?.firstName || ''} ${log.user?.lastName || ''}`.toLowerCase(); + const actionType = log.type.toLowerCase(); + const dataStr = JSON.stringify(log.data).toLowerCase(); + + return userName.includes(searchLower) || actionType.includes(searchLower) || dataStr.includes(searchLower); + }); + } + + return filtered; + } + + /** + * Group logs by date (format: YYYY/M/D) + */ + private groupLogsByDate(logs: AuditLogs[]): Record { + return groupBy(logs, (log) => { + const date = new Date(log.createdAt); + return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; + }); + } +} diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts index 239b70c0ab..9742ad0b1d 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts @@ -14,6 +14,7 @@ export class ExperimentOverviewDetailsFooterComponent implements OnInit { tabLabels = [ { label: 'Design', disabled: false }, { label: 'Data', disabled: false }, + { label: 'Logs', disabled: false }, ]; onSelectedTabChange(selectedTabIndex: number): void { diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/audit-logs/audit-logs.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/audit-logs/audit-logs.component.spec.ts index 26d4f0c177..8ea3c5e8cb 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/audit-logs/audit-logs.component.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/audit-logs/audit-logs.component.spec.ts @@ -5,9 +5,9 @@ import { TestingModule } from '../../../../../../testing/testing.module'; import { SettingsService } from '../../../../../core/settings/settings.service'; import { LogsService } from '../../../../../core/logs/logs.service'; import { TimelineComponent } from '../timeline/timeline.component'; -import { LogDateFormatPipe } from '../../pipes/logs-date-format.pipe'; import { ErrorLogPipe } from '../../pipes/error-log.pipe'; import { ExperimentActionMessage } from '../../pipes/experiment-action-message.pipe'; +import { SharedModule } from '../../../../../shared/shared.module'; xdescribe('AuditLogsComponent', () => { let component: AuditLogsComponent; @@ -15,8 +15,8 @@ xdescribe('AuditLogsComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [AuditLogsComponent, TimelineComponent, LogDateFormatPipe, ErrorLogPipe, ExperimentActionMessage], - imports: [TestingModule], + declarations: [AuditLogsComponent, TimelineComponent, ErrorLogPipe, ExperimentActionMessage], + imports: [TestingModule, SharedModule], providers: [SettingsService, LogsService], }).compileComponents(); })); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/error-logs/error-logs.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/error-logs/error-logs.component.spec.ts index d43d2474e5..b23b5b7ad7 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/error-logs/error-logs.component.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/error-logs/error-logs.component.spec.ts @@ -5,9 +5,9 @@ import { TestingModule } from '../../../../../../testing/testing.module'; import { LogsService } from '../../../../../core/logs/logs.service'; import { SettingsService } from '../../../../../core/settings/settings.service'; import { TimelineComponent } from '../timeline/timeline.component'; -import { LogDateFormatPipe } from '../../pipes/logs-date-format.pipe'; import { ErrorLogPipe } from '../../pipes/error-log.pipe'; import { ExperimentActionMessage } from '../../pipes/experiment-action-message.pipe'; +import { SharedModule } from '../../../../../shared/shared.module'; xdescribe('ErrorLogsComponent', () => { let component: ErrorLogsComponent; @@ -15,8 +15,8 @@ xdescribe('ErrorLogsComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ErrorLogsComponent, TimelineComponent, LogDateFormatPipe, ErrorLogPipe, ExperimentActionMessage], - imports: [TestingModule], + declarations: [ErrorLogsComponent, TimelineComponent, ErrorLogPipe, ExperimentActionMessage], + imports: [TestingModule, SharedModule], providers: [LogsService, SettingsService], }).compileComponents(); })); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/timeline/timeline.component.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/timeline/timeline.component.ts index 0f121b2b45..f2e3f8f4fb 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/timeline/timeline.component.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/components/timeline/timeline.component.ts @@ -1,6 +1,6 @@ import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; import * as env from '../../../../../../environments/environment'; -import { LogType } from '../../../../../core/logs/store/logs.model'; +import { LogType, SYSTEM_USER_EMAIL } from '../../../../../core/logs/store/logs.model'; import { EXPERIMENT_LIST_OPERATION, FEATURE_FLAG_LIST_OPERATION, LOG_TYPE, SERVER_ERROR } from 'upgrade_types'; import Convert from 'ansi-to-html'; @@ -15,7 +15,7 @@ export class TimelineComponent { @Input() logData; @Input() logType: LogType; // Used to change setting icon based on theme - systemUserEmail = 'system@gmail.com'; + systemUserEmail = SYSTEM_USER_EMAIL; endPoint = env.environment.apiBaseUrl.substring(0, env.environment.apiBaseUrl.lastIndexOf('/')); get LogType() { diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/logs.module.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/logs.module.ts index 92cd0c510d..2c78ccc740 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/logs.module.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/logs.module.ts @@ -7,7 +7,6 @@ import { ErrorLogsComponent } from './components/error-logs/error-logs.component import { AuditLogsComponent } from './components/audit-logs/audit-logs.component'; import { TimelineComponent } from './components/timeline/timeline.component'; import { ErrorLogPipe } from './pipes/error-log.pipe'; -import { LogDateFormatPipe } from './pipes/logs-date-format.pipe'; import { ExperimentActionMessage } from './pipes/experiment-action-message.pipe'; import { LogsComponent } from './root/logs.component'; import { LogsRoutingModule } from './logs-routing.module'; @@ -20,7 +19,6 @@ import { ListOperationsMessage } from './pipes/list-operation-message.pipe'; AuditLogsComponent, TimelineComponent, ErrorLogPipe, - LogDateFormatPipe, ExperimentActionMessage, ListOperationsMessage, ], diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/root/logs.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/root/logs.component.spec.ts index 0dc669465b..60c0aa4039 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/root/logs.component.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/root/logs.component.spec.ts @@ -6,10 +6,10 @@ import { AuditLogsComponent } from '../components/audit-logs/audit-logs.componen import { ErrorLogsComponent } from '../components/error-logs/error-logs.component'; import { LogsService } from '../../../../core/logs/logs.service'; import { TimelineComponent } from '../components/timeline/timeline.component'; -import { LogDateFormatPipe } from '../pipes/logs-date-format.pipe'; import { ErrorLogPipe } from '../pipes/error-log.pipe'; import { ExperimentActionMessage } from '../pipes/experiment-action-message.pipe'; import { SettingsService } from '../../../../core/settings/settings.service'; +import { SharedModule } from '../../../../shared/shared.module'; xdescribe('LogsComponent', () => { let component: LogsComponent; @@ -22,11 +22,10 @@ xdescribe('LogsComponent', () => { AuditLogsComponent, ErrorLogsComponent, TimelineComponent, - LogDateFormatPipe, ErrorLogPipe, ExperimentActionMessage, ], - imports: [TestingModule], + imports: [TestingModule, SharedModule], providers: [LogsService, SettingsService], }).compileComponents(); })); diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.html b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.html new file mode 100644 index 0000000000..a631cb3d33 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.html @@ -0,0 +1,13 @@ + + + + + {{ actionMessage }} + + + {{ createdAt | date : 'shortTime' }} + + + 
{{ renderDiff() }}
+ + diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.scss b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.scss new file mode 100644 index 0000000000..c511dc7657 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.scss @@ -0,0 +1,58 @@ +.accordion { + width: 100%; + margin-top: 8px; +} + +.expansion-header { + padding: 8px 16px; + min-height: 48px !important; + + ::ng-deep .mat-expansion-panel-header-title { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } +} + +.action-msg { + color: var(--text-primary); + font-weight: 600; +} + +.view-diff { + color: var(--primary); + cursor: pointer; + margin-left: 8px; + text-decoration: underline; +} + +.log-time { + color: var(--text-secondary); + margin-left: auto; + padding-left: 16px; +} + +.diff-container { + background-color: var(--background-secondary); + padding: 16px; + border-radius: 4px; + font-family: 'Courier New', monospace; + font-size: 14px; + overflow-x: auto; + white-space: pre-wrap; + word-wrap: break-word; + max-height: 500px; + overflow-y: auto; + + ::ng-deep { + .ansi-color { + font-weight: normal; + } + } +} + +pre { + margin: 0; + padding: 0; +} diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.ts new file mode 100644 index 0000000000..ca58c35263 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component.ts @@ -0,0 +1,54 @@ +import { Component, ChangeDetectionStrategy, Input, AfterViewInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { TranslateModule } from '@ngx-translate/core'; +import Convert from 'ansi-to-html'; + +/** + * Generic component for displaying diffs in audit logs. + * Supports any entity type (experiments, feature flags, segments). + */ +@Component({ + selector: 'common-audit-log-diff-display', + templateUrl: './common-audit-log-diff-display.component.html', + styleUrls: ['./common-audit-log-diff-display.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, MatExpansionModule, TranslateModule], +}) +export class CommonAuditLogDiffDisplayComponent implements AfterViewInit { + @Input() logId: string; + @Input() logData: any; + @Input() logType: string; + @Input() createdAt: string; + @Input() actionMessage: string; + + ngAfterViewInit(): void { + // Convert ANSI-formatted diff to HTML after view is initialized + if (this.hasDiff) { + setTimeout(() => { + this.renderDiff(); + }, 0); + } + } + + get hasDiff(): boolean { + return !!(this.logData?.diff || this.logData?.list?.diff); + } + + get diffContent(): string { + return this.logData?.list?.diff || this.logData?.diff || ''; + } + + renderDiff(): void { + const convert = new Convert(); + let convertedToHtml = convert.toHtml(this.diffContent); + convertedToHtml = convertedToHtml.split('color:#FFF').join('color: grey'); + + const diffNode = document.getElementById(`diff-${this.logId}`); + if (diffNode) { + const html = new DOMParser().parseFromString(convertedToHtml, 'text/html'); + diffNode.innerHTML = html.body.innerHTML; + } + } +} diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline-config.model.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline-config.model.ts new file mode 100644 index 0000000000..5a90917fac --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline-config.model.ts @@ -0,0 +1,91 @@ +/** + * Configuration interface for entity-specific timeline behavior. + * + * This model enables the CommonAuditLogTimelineComponent to display audit logs + * for different entity types (experiments, feature flags, segments) by providing + * entity-specific message maps and behavior functions. + * + * @example + * ```typescript + * const experimentConfig: TimelineLogTypeConfig = { + * logTypeMessageMap: { + * [LOG_TYPE.EXPERIMENT_CREATED]: 'logs.audit-log-experiment-created.text', + * ... + * }, + * isSimpleLogType: (type) => [LOG_TYPE.EXPERIMENT_DELETED, ...].includes(type), + * ... + * }; + * ``` + */ + +/** + * Entity-specific configuration for timeline log display. + */ +export interface AuditLogTimelineConfig { + /** + * Mapping of log type enum values to i18n translation keys. + * Used to display the appropriate message for each log action. + * + * Example: \{ 'EXPERIMENT_CREATED': 'logs.audit-log-experiment-created.text' \} + */ + logTypeMessageMap: Record; + + /** + * Optional mapping for list operation types (inclusion/exclusion lists). + * Only needed if the entity supports list operations. + * + * Example: \{ 'CREATED': 'logs.audit-log-list-created.text' \} + */ + listOperationMessageMap?: Record; + + /** + * Determines if a log type should be displayed as a simple message + * without expandable diff panels (e.g., deleted, exported logs). + * + * @param type - The log type as a string + * @returns true if the log should be displayed simply + */ + isSimpleLogType: (type: string) => boolean; + + /** + * Determines if a log type represents a state change or creation event. + * These logs may display additional state information (old state → new state). + * + * @param type - The log type as a string + * @returns true if the log is a state change or creation event + */ + isStateChangeOrCreated: (type: string) => boolean; + + /** + * Checks if the log data contains a list operation (inclusion/exclusion). + * + * @param logData - The log's data object + * @returns true if the log contains a list operation + */ + hasListOperation: (logData: any) => boolean; + + /** + * Determines if a log type represents an update operation. + * Update logs typically have expandable diff displays. + * + * @param type - The log type as a string + * @returns true if the log is an update operation + */ + isUpdateLogType?: (type: string) => boolean; +} + +/** + * Complete timeline configuration including system settings and entity-specific behavior. + */ +// export interface TimelineConfig { +// /** +// * Email address used to identify system-generated logs. +// * System logs are displayed with a special icon. +// */ +// systemUserEmail: string; + +// /** +// * Entity-specific configuration for log type handling and message display. +// */ +// entityConfig: TimelineLogTypeConfig; +// } diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.html b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.html new file mode 100644 index 0000000000..36085bb4cd --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.html @@ -0,0 +1,167 @@ +
+ + + + + +
+ +
+ {{ date | logDateFormatPipe : LogDateFormatType.DATE_MONTH }} + {{ date | logDateFormatPipe : LogDateFormatType.YEAR_DAY }} +
+ + +
+
+ +
+ + + + + + + + +
+ + + + + {{ getUserFullName(log.user) }} + + + + {{ getUserFullName(log.user) | truncate : 30 }} + + + + + {{ 'logs-global.log-no-user' | translate }} + + + + + + + + {{ getLogTypeMessage(log.type) | translate }} + + {{ log.createdAt | date : 'shortTime' }} + + + + + + + {{ + getLogTypeMessage(log.type) + | translate + : { + previousState: log.data.previousState | titlecase, + newState: log.data.newState | titlecase + } + }} + + + {{ getLogTypeMessage(log.type) | translate }} + + + {{ log.createdAt | date : 'shortTime' }} + + + +
+ + + +
+ + {{ getLogTypeMessage(log.type) | translate }} + + - + {{ + getListOperationMessage(log.data.list.operation) + | translate + : { + listTableType: getListTableType(log.data.list.filterType), + listName: log.data.list.listName + } + }} + + + {{ log.createdAt | date : 'shortTime' }} +
+ + +
+ + + + + + {{ getLogTypeMessage(log.type) | translate }} + + - + {{ + getListOperationMessage(log.data.list.operation) + | translate + : { + listTableType: getListTableType(log.data.list.filterType), + listName: log.data.list.listName + } + }} + + + + + {{ log.createdAt | date : 'shortTime' }} + + + +
+ + + + + + +
+
+
+ +
+
+
+ + + +
+

{{ 'logs-global.log-zero-state.text' | translate }}

+
+
diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.scss b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.scss new file mode 100644 index 0000000000..acd67f4a6a --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.scss @@ -0,0 +1,231 @@ +// Container and layout styles (moved from section-card) +.logs-container { + max-height: 600px; + overflow-y: auto; + overflow-x: hidden; + padding-top: 10px; + position: relative; + background-color: var(--background-primary); +} + +.loading-spinner { + display: flex; + justify-content: center; + align-items: center; + padding: 40px 0; +} + +.timeline-section { + display: flex; + padding: 16px 34px; + + .date-column { + width: 203px; + max-width: 203px; + flex-shrink: 0; + + .date-info { + display: block; + font-size: 24px; + font-weight: 700; + color: var(--text-primary); + } + + .day-info { + display: block; + font-size: 14px; + color: var(--grey-2); + } + } + + .timeline-column { + flex-grow: 1; + width: calc(100% - 203px); + } +} + +.empty-state { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 60px 20px; + color: var(--text-secondary); + font-size: 16px; + + p { + margin: 0; + } +} + +// Custom scrollbar styling +.logs-container::-webkit-scrollbar { + width: 8px; +} + +.logs-container::-webkit-scrollbar-track { + background: var(--background-secondary); + border-radius: 4px; +} + +.logs-container::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; + + &:hover { + background: var(--text-secondary); + } +} + +// Timeline item styles (existing) +$red: #fff0f0; +$light-blue: #e9f3ff; +$yellow: #fff1de; +$black: #111111; +$timeline-background-color: #eaf0f8; +$action-msg-font-size: 15px; + +.timeline { + position: relative; + padding: 16px 0; + + &::after { + position: absolute; + top: 0; + bottom: 0; + left: 2%; + margin-left: -5px; + background-color: $timeline-background-color; + width: 1px; + content: ''; + } + + &-container { + position: relative; + left: 2%; + margin-bottom: 30px; + background-color: inherit; + padding: 0 0 0 30px; + width: 97%; + + &::after { + left: -16px; + } + + &:last-child { + margin-bottom: 0; + } + + .icon { + display: flex; + position: absolute; + top: 15px; + left: -18px; + align-items: center; + justify-content: center; + z-index: 1; + border-radius: 50%; + width: 27px; + height: 27px; + content: ''; + + &:first-of-type { + top: 0; + } + + &--red { + background-color: $red; + } + + &--light-blue { + background-color: $light-blue; + } + + &--yellow { + background-color: $yellow; + } + + &--black { + background-color: $black; + } + } + + .content { + display: flex; + position: relative; + + .log-text { + display: flex; + flex-grow: 1; + justify-content: space-between; + max-width: 100%; + } + + .user-name { + flex-shrink: 0; + padding-bottom: 3px; + width: 125px; + word-wrap: break-word; + } + + .action { + flex-grow: 1; + padding-left: 12px; + + &-msg { + margin-right: 5px; + font-size: $action-msg-font-size !important; + } + } + + .accordion { + flex-grow: 1; + max-width: 100%; + + .expansion-header { + height: auto !important; + } + + .view-diff { + margin-left: 15px; + color: var(--blue); + } + + .diff-container { + color: var(--grey); + } + } + + .log-time { + flex-shrink: 0; + align-self: center; + margin-left: 5px; + text-align: right; + } + + .full-width { + width: 100%; + } + } + } +} + +::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) { + box-shadow: none !important; +} + +::ng-deep .mat-expansion-panel-header { + padding: 0 0 0 12px !important; + + &:hover { + background-color: unset !important; + } +} + +::ng-deep .mat-content.mat-content-hide-toggle { + margin-right: 0 !important; +} + +::ng-deep .mat-expansion-panel-header-title { + align-items: center !important; +} diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.ts new file mode 100644 index 0000000000..f6cdb92c33 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/common-audit-log-timeline.component.ts @@ -0,0 +1,105 @@ +import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { TranslateModule } from '@ngx-translate/core'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; + +import { AuditLogTimelineConfig } from './common-audit-log-timeline-config.model'; +import { CommonAuditLogDiffDisplayComponent } from './common-audit-log-diff-display/common-audit-log-diff-display.component'; +import { SharedModule } from '../../../shared/shared.module'; +import { ScrollDirective } from '../../../shared/directives/scroll.directive'; +import { AuditLogs, LogDateFormatType, SYSTEM_USER_EMAIL } from '../../../core/logs/store/logs.model'; +import { User } from '../../../core/users/store/users.model'; + +/** + * Generic timeline component for displaying audit logs for any entity type. + * Configured via TimelineConfig to handle entity-specific behavior. + */ +@Component({ + selector: 'common-audit-log-timeline', + templateUrl: './common-audit-log-timeline.component.html', + styleUrls: ['./common-audit-log-timeline.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + RouterModule, + MatExpansionModule, + MatTooltipModule, + MatProgressSpinnerModule, + TranslateModule, + CommonAuditLogDiffDisplayComponent, + SharedModule, + ScrollDirective, + ], +}) +export class CommonAuditLogTimelineComponent { + @Input() groupedLogs: { dates: string[]; dateGroups: Record }; + @Input() isLoading = false; + @Input() isEmpty = false; + @Input() config: AuditLogTimelineConfig; + @Output() scrolledToBottom = new EventEmitter(); + + LogDateFormatType = LogDateFormatType; + + hasDiff(log: AuditLogs): boolean { + return !!(log.data?.diff || log.data?.list?.diff); + } + + // User-related helpers + getUserFullName(user: User): string { + if (!user?.firstName && !user?.lastName) return ''; + return `${user.firstName || ''} ${user.lastName || ''}`.trim(); + } + + isSystemUser(user: User): boolean { + return user?.email === SYSTEM_USER_EMAIL; + } + + hasUserImage(user: User): boolean { + return !!user?.imageUrl; + } + + shouldTruncateUserName(user: User): boolean { + return this.getUserFullName(user).length >= 30; + } + + // Entity-specific helpers (delegated to config) + isSimpleLogType(type: string): boolean { + return this.config?.isSimpleLogType(type) ?? false; + } + + isStateChangeOrCreated(type: string): boolean { + return this.config?.isStateChangeOrCreated(type) ?? false; + } + + isUpdateLogType(type: string): boolean { + // Use custom function if provided, otherwise check if it's not simple or state change + if (this.config?.isUpdateLogType) { + return this.config.isUpdateLogType(type); + } + return !this.isSimpleLogType(type) && !this.isStateChangeOrCreated(type); + } + + hasListOperation(logData: AuditLogs[]): boolean { + return this.config?.hasListOperation(logData) ?? false; + } + + getListTableType(filterType: string): string { + return filterType === 'inclusion' ? 'include' : 'exclude'; + } + + getLogTypeMessage(type: string): string { + return this.config?.logTypeMessageMap?.[type] || ''; + } + + getListOperationMessage(operation: string): string { + return this.config?.listOperationMessageMap?.[operation] || ''; + } + + onScrolledToBottom(): void { + this.scrolledToBottom.emit(); + } +} diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/configs/experiment-timeline.config.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/configs/experiment-timeline.config.ts new file mode 100644 index 0000000000..670fca8225 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/configs/experiment-timeline.config.ts @@ -0,0 +1,43 @@ +import { AuditLogTimelineConfig } from '../common-audit-log-timeline-config.model'; +import { LOG_TYPE, EXPERIMENT_LIST_OPERATION } from 'upgrade_types'; + +/** + * Experiment-specific configuration for the audit log timeline component. + * Contains message maps and behavior functions for displaying experiment logs. + */ +export const EXPERIMENT_TIMELINE_LOG_TYPE_CONFIG: AuditLogTimelineConfig = { + logTypeMessageMap: { + [LOG_TYPE.EXPERIMENT_CREATED]: 'logs.audit-log-experiment-created.text', + [LOG_TYPE.EXPERIMENT_DELETED]: 'logs.audit-log-experiment-deleted.text', + [LOG_TYPE.EXPERIMENT_STATE_CHANGED]: 'logs.audit-log-experiment-state-changed.text', + [LOG_TYPE.EXPERIMENT_UPDATED]: 'logs.audit-log-experiment-updated.text', + [LOG_TYPE.EXPERIMENT_DATA_EXPORTED]: 'logs.audit-log-experiment-data-exported.text', + [LOG_TYPE.EXPERIMENT_DESIGN_EXPORTED]: 'logs.audit-log-experiment-design-exported.text', + }, + + listOperationMessageMap: { + [EXPERIMENT_LIST_OPERATION.CREATED]: 'logs.audit-log-list-created.text', + [EXPERIMENT_LIST_OPERATION.DELETED]: 'logs.audit-log-list-deleted.text', + [EXPERIMENT_LIST_OPERATION.UPDATED]: 'logs.audit-log-list-updated.text', + }, + + isSimpleLogType: (type: string): boolean => { + return [ + LOG_TYPE.EXPERIMENT_DELETED, + LOG_TYPE.EXPERIMENT_DATA_EXPORTED, + LOG_TYPE.EXPERIMENT_DESIGN_EXPORTED, + ].includes(type as LOG_TYPE); + }, + + isStateChangeOrCreated: (type: string): boolean => { + return type === LOG_TYPE.EXPERIMENT_STATE_CHANGED || type === LOG_TYPE.EXPERIMENT_CREATED; + }, + + hasListOperation: (logData: any): boolean => { + return !!logData?.list; + }, + + isUpdateLogType: (type: string): boolean => { + return type === LOG_TYPE.EXPERIMENT_UPDATED; + }, +}; diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/configs/feature-flag-timeline.config.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/configs/feature-flag-timeline.config.ts new file mode 100644 index 0000000000..3d6f4122a1 --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-audit-log-timeline/configs/feature-flag-timeline.config.ts @@ -0,0 +1,47 @@ +import { AuditLogTimelineConfig } from '../common-audit-log-timeline-config.model'; +import { LOG_TYPE } from 'upgrade_types'; + +/** + * Feature flag-specific configuration for the audit log timeline component. + * + * NOTE: This is a placeholder configuration for when feature flag logs are implemented. + * To use this config, integrate it with a FeatureFlagLogSectionCardComponent that: + * 1. Fetches feature flag logs from the backend + * 2. Groups logs by date + * 3. Passes this config to CommonAuditLogTimelineComponent + */ +export const FEATURE_FLAG_TIMELINE_LOG_TYPE_CONFIG: AuditLogTimelineConfig = { + logTypeMessageMap: { + [LOG_TYPE.FEATURE_FLAG_CREATED]: 'logs.audit-log-feature-flag-created.text', + [LOG_TYPE.FEATURE_FLAG_DELETED]: 'logs.audit-log-feature-flag-deleted.text', + [LOG_TYPE.FEATURE_FLAG_STATUS_CHANGED]: 'logs.audit-log-feature-flag-state-changed.text', + [LOG_TYPE.FEATURE_FLAG_UPDATED]: 'logs.audit-log-feature-flag-updated.text', + [LOG_TYPE.FEATURE_FLAG_DATA_EXPORTED]: 'logs.audit-log-feature-flag-data-exported.text', + [LOG_TYPE.FEATURE_FLAG_DESIGN_EXPORTED]: 'logs.audit-log-feature-flag-design-exported.text', + }, + + // Feature flags use segment lists instead of experiment lists + // Adjust this if/when feature flag list operations are supported + listOperationMessageMap: undefined, + + isSimpleLogType: (type: string): boolean => { + return [ + LOG_TYPE.FEATURE_FLAG_DELETED, + LOG_TYPE.FEATURE_FLAG_DATA_EXPORTED, + LOG_TYPE.FEATURE_FLAG_DESIGN_EXPORTED, + ].includes(type as LOG_TYPE); + }, + + isStateChangeOrCreated: (type: string): boolean => { + return type === LOG_TYPE.FEATURE_FLAG_STATUS_CHANGED || type === LOG_TYPE.FEATURE_FLAG_CREATED; + }, + + hasListOperation: (logData: any): boolean => { + // Feature flags may have segment list operations - adjust based on actual data structure + return !!logData?.list; + }, + + isUpdateLogType: (type: string): boolean => { + return type === LOG_TYPE.FEATURE_FLAG_UPDATED; + }, +}; diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.html b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.html index 44bd706e28..8791dec1ce 100644 --- a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.html +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.html @@ -1,9 +1,17 @@
- - {{ filterOption | titlecase }} + + + {{ option.value | titlecase }} + + + + + {{ option.value | titlecase }} + + diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.scss b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.scss index 26125105bd..44387b71ae 100644 --- a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.scss +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.scss @@ -3,7 +3,7 @@ column-gap: 16px; .filter-options { - width: 120px; + width: 200px; } .search-input { diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.ts index 0d653aff0d..518291e97f 100644 --- a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.ts +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-search-header/common-section-card-search-header.component.ts @@ -1,11 +1,21 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, +} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; +import { MatOptionModule } from '@angular/material/core'; import { TranslateModule } from '@ngx-translate/core'; +import isEqual from 'lodash.isequal'; /** * The `app-common-section-card-search-header` component provides a common header with search and filter options for search functionality. @@ -44,6 +54,7 @@ export interface FilterOption { value: string; type?: string; valueOptions?: string[]; + group?: string; } @Component({ @@ -55,18 +66,32 @@ export interface FilterOption { MatFormFieldModule, MatInputModule, MatSelectModule, + MatOptionModule, MatIconModule, FormsModule, TranslateModule, ], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class CommonSectionCardSearchHeaderComponent { - @Input() filterOptions: FilterOption[]; +export class CommonSectionCardSearchHeaderComponent implements OnChanges { + @Input() filterOptions: FilterOption[] = []; @Input() searchString: string; @Input() searchKey: string; @Output() search = new EventEmitter>(); + standaloneOptions: FilterOption[] = []; + groupedOptions: { groupName: string; options: FilterOption[] }[] = []; + + // if filterOptions have changed, rebuild the options + ngOnChanges(changes: SimpleChanges): void { + const filterOptionsChange = changes['filterOptions']; + if (filterOptionsChange && !filterOptionsChange.firstChange) { + if (!isEqual(filterOptionsChange.previousValue, filterOptionsChange.currentValue)) { + this.rebuildOptions(); + } + } + } + onSearch(): void { this.search.emit({ searchKey: this.searchKey, @@ -85,4 +110,26 @@ export class CommonSectionCardSearchHeaderComponent { get isDropdown(): boolean { return this.filterOptions.find((option) => option.value === this.searchKey)?.type === 'dropdown'; } + + private rebuildOptions(): void { + // Cache standalone options + this.standaloneOptions = this.filterOptions.filter((option) => !option.group && option.type !== 'group'); + + // Cache grouped options + const groups = new Map(); + + this.filterOptions.forEach((option) => { + if (option.group) { + if (!groups.has(option.group)) { + groups.set(option.group, []); + } + const groupOptions = groups.get(option.group); + if (groupOptions) { + groupOptions.push(option); + } + } + }); + + this.groupedOptions = Array.from(groups.entries()).map(([groupName, options]) => ({ groupName, options })); + } } diff --git a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/index.ts b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/index.ts index 689ca15dd8..d7b00606d3 100644 --- a/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/index.ts +++ b/packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/index.ts @@ -14,6 +14,8 @@ import { CommonTagComponent } from './common-tag/common-tag.component'; import { CommonTagListComponent } from './common-tag-list/common-tag-list.component'; import { CommonLearnMoreLinkComponent } from './common-learn-more-link/common-learn-more-link.component'; import { CommonSimpleTextValidatedConfirmationModalComponent } from './common-simple-text-validated-confirmation-modal/common-simple-text-validated-confirmation-modal.component'; +import { CommonAuditLogTimelineComponent } from './common-audit-log-timeline/common-audit-log-timeline.component'; +import { CommonAuditLogDiffDisplayComponent } from './common-audit-log-timeline/common-audit-log-diff-display/common-audit-log-diff-display.component'; export { CommonPageComponent, @@ -32,4 +34,6 @@ export { CommonTagListComponent, CommonLearnMoreLinkComponent, CommonSimpleTextValidatedConfirmationModalComponent, + CommonAuditLogTimelineComponent, + CommonAuditLogDiffDisplayComponent, }; diff --git a/packages/frontend/projects/upgrade/src/app/shared/directives/scroll.directive.ts b/packages/frontend/projects/upgrade/src/app/shared/directives/scroll.directive.ts index 75a520aa4e..c9dc93e201 100644 --- a/packages/frontend/projects/upgrade/src/app/shared/directives/scroll.directive.ts +++ b/packages/frontend/projects/upgrade/src/app/shared/directives/scroll.directive.ts @@ -3,7 +3,7 @@ import { debounce } from '../decorator/debounce.decorator'; @Directive({ selector: '[scroll]', - standalone: false, + standalone: true, }) export class ScrollDirective { @Output() scrolled = new EventEmitter(); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/pipes/logs-date-format.pipe.spec.ts b/packages/frontend/projects/upgrade/src/app/shared/pipes/logs-date-format.pipe.spec.ts similarity index 89% rename from packages/frontend/projects/upgrade/src/app/features/dashboard/logs/pipes/logs-date-format.pipe.spec.ts rename to packages/frontend/projects/upgrade/src/app/shared/pipes/logs-date-format.pipe.spec.ts index 6ad1da9467..f6a1b1a624 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/pipes/logs-date-format.pipe.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/shared/pipes/logs-date-format.pipe.spec.ts @@ -1,5 +1,5 @@ +import { LogDateFormatType } from '../../core/logs/store/logs.model'; import { LogDateFormatPipe } from './logs-date-format.pipe'; -import { LogDateFormatType } from '../../../../core/logs/store/logs.model'; describe('LogDateFormatPipe', () => { const logDateFormatPipe = new LogDateFormatPipe(); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/pipes/logs-date-format.pipe.ts b/packages/frontend/projects/upgrade/src/app/shared/pipes/logs-date-format.pipe.ts similarity index 94% rename from packages/frontend/projects/upgrade/src/app/features/dashboard/logs/pipes/logs-date-format.pipe.ts rename to packages/frontend/projects/upgrade/src/app/shared/pipes/logs-date-format.pipe.ts index db58947e9b..907f9ff90e 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/logs/pipes/logs-date-format.pipe.ts +++ b/packages/frontend/projects/upgrade/src/app/shared/pipes/logs-date-format.pipe.ts @@ -1,5 +1,5 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { LogDateFormatType } from '../../../../core/logs/store/logs.model'; +import { LogDateFormatType } from '../../core/logs/store/logs.model'; @Pipe({ name: 'logDateFormatPipe', diff --git a/packages/frontend/projects/upgrade/src/app/shared/shared.module.ts b/packages/frontend/projects/upgrade/src/app/shared/shared.module.ts index 32e3fd78bc..03bb6bf294 100755 --- a/packages/frontend/projects/upgrade/src/app/shared/shared.module.ts +++ b/packages/frontend/projects/upgrade/src/app/shared/shared.module.ts @@ -37,12 +37,14 @@ import { TrimInputDirective } from './directives/trim-input.directive'; import { TextOverflowTooltipDirective } from './directives/text-overflow-tooltip.directive'; import { SegmentStatusPipe } from './pipes/segment-status.pipe'; import { DeleteComponent } from './components/delete/delete.component'; +import { LogDateFormatPipe } from './pipes/logs-date-format.pipe'; @NgModule({ imports: [ CommonModule, FormsModule, TranslateModule, + ScrollDirective, MatButtonModule, MatToolbarModule, MatSelectModule, @@ -73,11 +75,11 @@ import { DeleteComponent } from './components/delete/delete.component'; SharedIconsComponent, TruncatePipe, ExperimentStatePipe, - ScrollDirective, TrimInputDirective, TextOverflowTooltipDirective, DeleteComponent, SegmentStatusPipe, + LogDateFormatPipe, ], exports: [ CommonModule, @@ -112,6 +114,7 @@ import { DeleteComponent } from './components/delete/delete.component'; SharedIconsComponent, TruncatePipe, ExperimentStatePipe, + LogDateFormatPipe, ScrollDirective, TrimInputDirective, TextOverflowTooltipDirective, diff --git a/packages/frontend/projects/upgrade/src/assets/i18n/en.json b/packages/frontend/projects/upgrade/src/assets/i18n/en.json index 693aec70df..faa0da4313 100644 --- a/packages/frontend/projects/upgrade/src/assets/i18n/en.json +++ b/packages/frontend/projects/upgrade/src/assets/i18n/en.json @@ -308,6 +308,7 @@ "home.change-post-experiment-rule.title.text": "Change Post Experiment Condition", "logs-global.log-zero-state.text": "No Logs", "logs-global.log-view-diff.text": "view", + "logs-global.log-no-user": "User Details Unknown", "logs.main-heading.text": "Logs", "logs.sub-heading.text": "Track changes made in environment", "logs.error-logs-tab.text": "Error Logs", diff --git a/packages/types/src/Experiment/interfaces.ts b/packages/types/src/Experiment/interfaces.ts index 1c3fe96df2..2376d51933 100644 --- a/packages/types/src/Experiment/interfaces.ts +++ b/packages/types/src/Experiment/interfaces.ts @@ -85,6 +85,17 @@ interface ExperimentStateChangedData { } interface ExperimentDeletedData { + experimentId: string; + experimentName: string; +} + +interface ExperimentDataExportedData { + experimentId: string; + experimentName: string; +} + +interface ExperimentDesignExportedData { + experimentId: string; experimentName: string; } @@ -126,6 +137,8 @@ export type AuditLogData = | ExperimentUpdatedData | ExperimentStateChangedData | ExperimentDeletedData + | ExperimentDataExportedData + | ExperimentDesignExportedData | FeatureFlagCreatedData | FeatureFlagUpdatedData | FeatureFlagStateChangedData