Implement Upsert Metric Modal for Experiments

frontend/projects/upgrade/src/app/core/experiments/experiments.data.service.ts

@@ -5,6 +5,7 @@ import {
   ExperimentPaginationParams,
   UpdateExperimentFilterModeRequest,
   UpdateExperimentDecisionPointsRequest,
+  UpdateExperimentMetricsRequest,
   ExperimentSegmentListResponse,
 } from './store/experiments.model';
 import { HttpClient, HttpParams } from '@angular/common/http';
@@ -165,4 +166,12 @@ export class ExperimentDataService {
     };
     return this.updateExperiment(updatedExperiment);
   }
+
+  updateExperimentMetrics(params: UpdateExperimentMetricsRequest): Observable<Experiment> {
+    const updatedExperiment = {
+      ...params.experiment,
+      queries: params.metrics,
+    };
+    return this.updateExperiment(updatedExperiment);
+  }
 }

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

@@ -14,6 +14,7 @@ import {
   AddExperimentRequest,
   UpdateExperimentFilterModeRequest,
   UpdateExperimentDecisionPointsRequest,
+  UpdateExperimentMetricsRequest,
 } from './store/experiments.model';
 import { Store, select } from '@ngrx/store';
 import {
@@ -199,6 +200,10 @@ export class ExperimentService {
     );
   }
 
+  updateExperimentMetrics(updateExperimentMetricsRequest: UpdateExperimentMetricsRequest) {
+    this.store$.dispatch(experimentAction.actionUpdateExperimentMetrics({ updateExperimentMetricsRequest }));
+  }
+
   fetchContextMetaData() {
     this.store$.dispatch(experimentAction.actionFetchContextMetaData({ isLoadingContextMetaData: true }));
   }

frontend/projects/upgrade/src/app/core/experiments/metric-helper.service.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { v4 as uuidv4 } from 'uuid';
+
+import { ExperimentService } from './experiments.service';
+import { Experiment, ExperimentQueryDTO, UpdateExperimentMetricsRequest } from './store/experiments.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MetricHelperService {
+  constructor(private experimentService: ExperimentService) {}
+
+  /**
+   * Add a new metric to an experiment
+   */
+  addMetric(experiment: Experiment, metricData: ExperimentQueryDTO): void {
+    const currentMetrics = [...(experiment.queries || [])];
+    const newMetric = {
+      ...metricData,
+      id: uuidv4(),
+    };
+
+    const updatedMetrics = [...currentMetrics, newMetric] as ExperimentQueryDTO[];
+
+    this.updateExperimentMetrics(experiment, updatedMetrics);
+  }
+
+  /**
+   * Update an existing metric in an experiment
+   */
+  updateMetric(experiment: Experiment, sourceMetric: ExperimentQueryDTO, metricData: ExperimentQueryDTO): void {
+    const currentMetrics = [...(experiment.queries || [])];
+    const updatedMetrics = currentMetrics.map((metric) =>
+      metric.id === sourceMetric.id
+        ? {
+            ...metric,
+            ...metricData,
+          }
+        : metric
+    );
+
+    this.updateExperimentMetrics(experiment, updatedMetrics);
+  }
+
+  /**
+   * Delete a metric from an experiment
+   */
+  deleteMetric(experiment: Experiment, metricToDelete: ExperimentQueryDTO): void {
+    const currentMetrics = [...(experiment.queries || [])];
+    const updatedMetrics = currentMetrics.filter((metric) => metric.id !== metricToDelete.id);
+
+    this.updateExperimentMetrics(experiment, updatedMetrics);
+  }
+
+  /**
+   * Common method to update experiment metrics
+   */
+  private updateExperimentMetrics(experiment: Experiment, updatedMetrics: ExperimentQueryDTO[]): void {
+    const updateRequest: UpdateExperimentMetricsRequest = {
+      experiment,
+      metrics: updatedMetrics,
+    };
+
+    this.experimentService.updateExperimentMetrics(updateRequest);
+  }
+}

frontend/projects/upgrade/src/app/core/experiments/store/experiments.actions.ts

@@ -13,6 +13,7 @@ import {
   IContextMetaData,
   UpdateExperimentFilterModeRequest,
   UpdateExperimentDecisionPointsRequest,
+  UpdateExperimentMetricsRequest,
   ExperimentSegmentListResponse,
 } from './experiments.model';
 import { ExperimentSegmentListRequest, ExperimentSegmentListDetails } from '../../segments/store/segments.model';
@@ -116,6 +117,18 @@ export const actionUpdateExperimentDecisionPointsFailure = createAction(
   '[Experiment] Update Experiment Decision Points Failure'
 );
 
+export const actionUpdateExperimentMetrics = createAction(
+  '[Experiment] Update Experiment Metrics',
+  props<{ updateExperimentMetricsRequest: UpdateExperimentMetricsRequest }>()
+);
+
+export const actionUpdateExperimentMetricsSuccess = createAction(
+  '[Experiment] Update Experiment Metrics Success',
+  props<{ experiment: Experiment }>()
+);
+
+export const actionUpdateExperimentMetricsFailure = createAction('[Experiment] Update Experiment Metrics Failure');
+
 export const actionFetchAllDecisionPoints = createAction('[Experiment] Fetch All Decision Points');
 
 export const actionFetchAllDecisionPointsSuccess = createAction(

frontend/projects/upgrade/src/app/core/experiments/store/experiments.effects.ts

@@ -240,6 +240,24 @@ export class ExperimentEffects {
     )
   );
 
+  updateExperimentMetrics$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(experimentAction.actionUpdateExperimentMetrics),
+      switchMap((action) => {
+        return this.experimentDataService.updateExperimentMetrics(action.updateExperimentMetricsRequest).pipe(
+          map((experiment) => {
+            this.notificationService.showSuccess(this.translate.instant('experiments.metrics.update-success.text'));
+            return experimentAction.actionUpdateExperimentMetricsSuccess({ experiment });
+          }),
+          catchError(() => {
+            this.notificationService.showError(this.translate.instant('experiments.metrics.update-error.text'));
+            return [experimentAction.actionUpdateExperimentMetricsFailure()];
+          })
+        );
+      })
+    )
+  );
+
   deleteExperiment$ = createEffect(() =>
     this.actions$.pipe(
       ofType(experimentAction.actionDeleteExperiment),

frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts

@@ -24,6 +24,7 @@ import {
   REPEATED_MEASURE,
   SEGMENT_TYPE,
   IEnrollmentCompleteCondition,
+  METRIC_TYPE,
 } from 'upgrade_types';
 import { Segment } from '../../segments/store/segments.model';
 
@@ -41,6 +42,7 @@ export {
   IExperimentSortParams,
   IExperimentEnrollmentDetailStats,
   DATE_RANGE,
+  METRIC_TYPE,
 };
 
 export interface ExperimentConditionFilterOptions {
@@ -361,6 +363,20 @@ export interface DecisionPointFormData {
   excludeIfReached: boolean;
 }
 
+export interface MetricFormData {
+  metricType: METRIC_TYPE;
+  metricId: string;
+  displayName: string;
+  description?: string;
+  metricClass?: string; // For repeatable metrics only
+  metricKey?: string; // For repeatable metrics only
+  aggregateStatistic?: string;
+  individualStatistic?: string; // For repeatable metrics only
+  comparison?: string;
+  compareValue?: string;
+  allowableDataKeys?: string[]; // For categorical metrics only
+}
+
 // Base interfaces matching backend DTO structure
 export interface ExperimentConditionDTO {
   id: string;
@@ -500,6 +516,11 @@ export interface UpdateExperimentDecisionPointsRequest {
   decisionPoints: ExperimentDecisionPoint[];
 }
 
+export interface UpdateExperimentMetricsRequest {
+  experiment: Experiment;
+  metrics: ExperimentQueryDTO[];
+}
+
 export const EXPERIMENT_ROOT_COLUMN_NAMES = {
   NAME: 'name',
   STATUS: 'state',
@@ -602,6 +623,11 @@ export interface ExperimentConditionRowActionEvent {
   condition: ExperimentCondition;
 }
 
+export interface ExperimentQueryRowActionEvent {
+  action: EXPERIMENT_ROW_ACTION;
+  query: ExperimentQueryDTO;
+}
+
 export enum EXPERIMENT_PAYLOAD_DISPLAY_TYPE {
   UNIVERSAL = 'universal',
   SPECIFIC = 'specific',
@@ -623,3 +649,11 @@ export interface RewardMetricData {
 export interface ExperimentSegmentListResponse extends SegmentNew {
   experiment: Experiment;
 }
+
+export interface UpsertMetricParams {
+  sourceQuery: ExperimentQueryDTO | null;
+  action: UPSERT_EXPERIMENT_ACTION;
+  experimentId: string;
+  currentContext?: string;
+  experimentInfo?: ExperimentVM;
+}

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

@@ -106,6 +106,14 @@ const reducer = createReducer(
     ...state,
     isLoadingExperiment: false,
   })),
+  on(experimentsAction.actionUpdateExperimentMetrics, (state) => ({ ...state, isLoadingExperiment: true })),
+  on(experimentsAction.actionUpdateExperimentMetricsSuccess, (state, { experiment }) =>
+    adapter.upsertOne(experiment, { ...state, isLoadingExperiment: false })
+  ),
+  on(experimentsAction.actionUpdateExperimentMetricsFailure, (state) => ({
+    ...state,
+    isLoadingExperiment: false,
+  })),
   on(experimentsAction.actionFetchAllDecisionPointsSuccess, (state, { decisionPoints }) => ({
     ...state,
     allDecisionPoints: decisionPoints,