refactor to make timeline component generalizeable

Author: danoswaltCL

backend/packages/Upgrade/src/api/controllers/validators/AuditLogParamsValidators.ts

@@ -15,6 +15,6 @@ export class AuditLogParamsValidator {
 
   @IsOptional()
   @IsString()
-  @IsUUID('4')
+  @IsUUID()
   public experimentId?: string;
 }

frontend/projects/upgrade/src/app/core/logs/logs.service.ts

@@ -118,7 +118,7 @@ export class LogsService {
     this.store$.dispatch(logsActions.actionSetErrorLogFilter({ filterType }));
   }
 
-  fetchExperimentLogsById(experimentId: string) {
+  getExperimentLogsById(experimentId: string) {
     return this.store$.pipe(select(selectExperimentLogs, { experimentId }));
   }
 

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',
@@ -34,12 +36,7 @@ export interface AuditLogs {
   versionNumber: number;
   type: LOG_TYPE;
   data: any;
-  user?: {
-    firstName: string;
-    lastName: string;
-    email?: string;
-    imageUrl?: string;
-  };
+  user?: User;
 }
 
 export interface ErrorLogs {
@@ -54,7 +51,7 @@ export interface ErrorLogs {
   name: string;
 }
 
-export interface ExperimentLogsMetadata {
+export interface AuditLogsMetadata {
   logs: AuditLogs[];
   skip: number;
   total: number | null;
@@ -71,7 +68,7 @@ export interface LogState extends EntityState<AuditLogs | ErrorLogs> {
   totalErrorLogs: number;
   auditLogFilter: LOG_TYPE;
   errorLogFilter: SERVER_ERROR;
-  experimentLogs: Record<string, ExperimentLogsMetadata>;
+  experimentAuditLogs: Record<string, AuditLogsMetadata>;
 }
 
 export interface State extends AppState {

frontend/projects/upgrade/src/app/core/logs/store/logs.reducer.ts

@@ -1,13 +1,13 @@
 import { createReducer, on, Action } from '@ngrx/store';
 import { createEntityAdapter, EntityAdapter } from '@ngrx/entity';
-import { AuditLogs, LogState, ErrorLogs, ExperimentLogsMetadata } from './logs.model';
+import { AuditLogs, LogState, ErrorLogs, AuditLogsMetadata } from './logs.model';
 import * as logsActions from './logs.actions';
 
 export const adapter: EntityAdapter<AuditLogs | ErrorLogs> = createEntityAdapter<AuditLogs | ErrorLogs>();
 
 export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();
 
-const initialExperimentLogsMetadata: ExperimentLogsMetadata = {
+const initialAuditLogsMetadata: AuditLogsMetadata = {
   logs: [],
   skip: 0,
   total: null,
@@ -24,7 +24,7 @@ export const initialState: LogState = adapter.getInitialState({
   totalErrorLogs: null,
   auditLogFilter: null,
   errorLogFilter: null,
-  experimentLogs: {},
+  experimentAuditLogs: {},
 });
 
 const reducer = createReducer(
@@ -67,11 +67,11 @@ const reducer = createReducer(
   on(logsActions.actionSetErrorLogFilter, (state, { filterType }) => ({ ...state, errorLogFilter: filterType })),
   // Experiment-specific log handlers
   on(logsActions.actionGetExperimentLogs, (state, { experimentId, fromStart }) => {
-    const experimentLog = state.experimentLogs[experimentId] || initialExperimentLogsMetadata;
+    const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata;
     return {
       ...state,
-      experimentLogs: {
-        ...state.experimentLogs,
+      experimentAuditLogs: {
+        ...state.experimentAuditLogs,
         [experimentId]: {
           ...experimentLog,
           isLoading: true,
@@ -81,13 +81,13 @@ const reducer = createReducer(
     };
   }),
   on(logsActions.actionGetExperimentLogsSuccess, (state, { experimentId, auditLogs, totalAuditLogs, fromStart }) => {
-    const experimentLog = state.experimentLogs[experimentId] || initialExperimentLogsMetadata;
+    const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata;
     const updatedLogs = fromStart ? auditLogs : [...experimentLog.logs, ...auditLogs];
 
     return {
       ...state,
-      experimentLogs: {
-        ...state.experimentLogs,
+      experimentAuditLogs: {
+        ...state.experimentAuditLogs,
         [experimentId]: {
           ...experimentLog,
           logs: updatedLogs,
@@ -99,11 +99,11 @@ const reducer = createReducer(
     };
   }),
   on(logsActions.actionGetExperimentLogsFailure, (state, { experimentId }) => {
-    const experimentLog = state.experimentLogs[experimentId] || initialExperimentLogsMetadata;
+    const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata;
     return {
       ...state,
-      experimentLogs: {
-        ...state.experimentLogs,
+      experimentAuditLogs: {
+        ...state.experimentAuditLogs,
         [experimentId]: {
           ...experimentLog,
           isLoading: false,
@@ -112,11 +112,11 @@ const reducer = createReducer(
     };
   }),
   on(logsActions.actionSetExperimentLogFilter, (state, { experimentId, filterType }) => {
-    const experimentLog = state.experimentLogs[experimentId] || initialExperimentLogsMetadata;
+    const experimentLog = state.experimentAuditLogs[experimentId] || initialAuditLogsMetadata;
     return {
       ...state,
-      experimentLogs: {
-        ...state.experimentLogs,
+      experimentAuditLogs: {
+        ...state.experimentAuditLogs,
         [experimentId]: {
           ...experimentLog,
           filter: filterType,

frontend/projects/upgrade/src/app/core/logs/store/logs.selectors.ts

@@ -40,7 +40,7 @@ export const selectAuditFilterType = createSelector(selectLogState, (state) => s
 export const selectErrorFilterType = createSelector(selectLogState, (state) => state.errorLogFilter);
 
 // Experiment-specific log selectors
-export const selectExperimentLogsState = createSelector(selectLogState, (state) => state.experimentLogs);
+export const selectExperimentLogsState = createSelector(selectLogState, (state) => state.experimentAuditLogs);
 
 export const selectExperimentLogsMetadata = createSelector(
   selectExperimentLogsState,

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

@@ -20,12 +20,13 @@
 
   <!-- Timeline Content -->
   <ng-container content *ngIf="isSectionCardExpanded">
-    <app-experiment-logs-timeline
+    <common-audit-log-timeline
       [groupedLogs]="timelineDataSource$ | async"
       [isLoading]="isLoading$ | async"
       [isEmpty]="(experimentLogs$ | async)?.length === 0"
+      [config]="timelineConfig"
       (scrolledToBottom)="fetchLogsOnScroll()"
     >
-    </app-experiment-logs-timeline>
+    </common-audit-log-timeline>
   </ng-container>
 </app-common-section-card>

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

@@ -14,13 +14,15 @@ import { ExperimentService } from '../../../../../../../core/experiments/experim
 import { Experiment } from '../../../../../../../core/experiments/store/experiments.model';
 import { LogsService } from '../../../../../../../core/logs/logs.service';
 import { SharedModule } from '../../../../../../../shared/shared.module';
-import { ExperimentLogsTimelineComponent } from './experiment-logs-timeline/experiment-logs-timeline.component';
+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.
@@ -39,7 +41,7 @@ import { groupBy } from 'lodash';
     CommonSectionCardSearchHeaderComponent,
     TranslateModule,
     SharedModule,
-    ExperimentLogsTimelineComponent,
+    CommonAuditLogTimelineComponent,
     MatProgressSpinnerModule,
   ],
   standalone: true,
@@ -67,6 +69,7 @@ export class ExperimentLogSectionCardComponent implements OnInit, OnDestroy {
   private currentExperimentId: string | null = null;
 
   LogDateFormatType = LogDateFormatType;
+  timelineConfig: AuditLogTimelineConfig = EXPERIMENT_TIMELINE_LOG_TYPE_CONFIG;
 
   constructor(private readonly experimentService: ExperimentService, private readonly logsService: LogsService) {}
 
@@ -86,7 +89,7 @@ export class ExperimentLogSectionCardComponent implements OnInit, OnDestroy {
     // Get raw logs observable
     this.experimentLogs$ = this.selectedExperiment$.pipe(
       filter((exp): exp is Experiment => !!exp),
-      switchMap((exp) => this.logsService.fetchExperimentLogsById(exp.id)),
+      switchMap((exp) => this.logsService.getExperimentLogsById(exp.id)),
       tap((logs) => {
         this.buildFilterOptions(logs);
       }),

frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-log-section-card/experiment-logs-timeline/experiment-logs-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() {