feat: read feature impact metrics (#10597)

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx

@@ -8,6 +8,7 @@ import { ChartConfigModal } from '../../../impact-metrics/ChartConfigModal/Chart
 import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam.ts';
 import { useFeatureImpactMetrics } from 'hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts';
+import { ChartItem } from '../../../impact-metrics/ChartItem.tsx';
 
 const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.mainHeader,
@@ -19,7 +20,7 @@ export const FeatureImpactMetrics: FC = () => {
     const feature = useRequiredPathParam('featureId');
     const [modalOpen, setModalOpen] = useState(false);
     const { createImpactMetric } = useImpactMetricsApi();
-    useFeatureImpactMetrics(feature);
+    const { impactMetrics } = useFeatureImpactMetrics(feature);
 
     const {
         metadata,
@@ -59,6 +60,16 @@ export const FeatureImpactMetrics: FC = () => {
                 }
             />
 
+            <>
+                {impactMetrics.configs.map((config) => (
+                    <ChartItem
+                        config={config}
+                        onEdit={() => {}}
+                        onDelete={() => {}}
+                    />
+                ))}
+            </>
+
             <ChartConfigModal
                 open={modalOpen}
                 onClose={() => setModalOpen(false)}

frontend/src/component/impact-metrics/types.ts

@@ -11,7 +11,7 @@ export type ChartConfig = {
 export type AggregationMode = 'rps' | 'count' | 'avg' | 'sum';
 
 export type DisplayChartConfig = ChartConfig & {
-    type: 'counter' | 'gauge';
+    type: 'counter' | 'gauge' | 'unknown';
     displayName: string; // e.g. my_metric with unleash_counter stripped
 };
 

frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import useAPI from '../useApi/useApi.js';
-import type { ImpactMetricsConfigSchema } from 'openapi/models/impactMetricsConfigSchema.js';
+import type { CreateImpactMetricsConfigSchema } from 'openapi';
 
 export const useImpactMetricsApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
@@ -8,7 +8,7 @@ export const useImpactMetricsApi = () => {
     });
 
     const createImpactMetric = useCallback(
-        async (config: ImpactMetricsConfigSchema) => {
+        async (config: CreateImpactMetricsConfigSchema) => {
             const path = `api/admin/impact-metrics/config`;
             const req = createRequest(
                 path,

frontend/src/hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts

@@ -10,7 +10,7 @@ export const useFeatureImpactMetrics = (feature: string) => {
         );
 
     return {
-        settings: data || { configs: [] },
+        impactMetrics: data || { configs: [] },
         refetch,
         loading,
         error,

frontend/src/openapi/models/createImpactMetricsConfigSchema.ts

@@ -0,0 +1,34 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { CreateImpactMetricsConfigSchemaAggregationMode } from './createImpactMetricsConfigSchemaAggregationMode.js';
+import type { CreateImpactMetricsConfigSchemaSelectedLabels } from './createImpactMetricsConfigSchemaSelectedLabels.js';
+import type { CreateImpactMetricsConfigSchemaSelectedRange } from './createImpactMetricsConfigSchemaSelectedRange.js';
+
+/**
+ * Describes the configuration for a single impact metric chart.
+ */
+export interface CreateImpactMetricsConfigSchema {
+    /** The aggregation mode for the metric data. */
+    aggregationMode: CreateImpactMetricsConfigSchemaAggregationMode;
+    /** Whether the chart should begin at zero on the y-axis. */
+    beginAtZero: boolean;
+    /**
+     * Optional feature name that this impact metric is associated with.
+     * @nullable
+     */
+    feature?: string | null;
+    /** The selected labels and their values for filtering the metric data. */
+    selectedLabels: CreateImpactMetricsConfigSchemaSelectedLabels;
+    /** The time range for the metric data. */
+    selectedRange: CreateImpactMetricsConfigSchemaSelectedRange;
+    /** The Prometheus metric series to display. It includes both unleash prefix and metric type and display name */
+    selectedSeries: string;
+    /**
+     * Optional title for the impact metric chart.
+     */
+    title?: string;
+    [key: string]: unknown;
+}

frontend/src/openapi/models/createImpactMetricsConfigSchemaAggregationMode.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The aggregation mode for the metric data.
+ */
+export type CreateImpactMetricsConfigSchemaAggregationMode =
+    (typeof CreateImpactMetricsConfigSchemaAggregationMode)[keyof typeof CreateImpactMetricsConfigSchemaAggregationMode];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const CreateImpactMetricsConfigSchemaAggregationMode = {
+    rps: 'rps',
+    count: 'count',
+    avg: 'avg',
+    sum: 'sum',
+} as const;

frontend/src/openapi/models/createImpactMetricsConfigSchemaSelectedLabels.ts

@@ -0,0 +1,12 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The selected labels and their values for filtering the metric data.
+ */
+export type CreateImpactMetricsConfigSchemaSelectedLabels = {
+    [key: string]: string[];
+};

frontend/src/openapi/models/createImpactMetricsConfigSchemaSelectedRange.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The time range for the metric data.
+ */
+export type CreateImpactMetricsConfigSchemaSelectedRange =
+    (typeof CreateImpactMetricsConfigSchemaSelectedRange)[keyof typeof CreateImpactMetricsConfigSchemaSelectedRange];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const CreateImpactMetricsConfigSchemaSelectedRange = {
+    hour: 'hour',
+    day: 'day',
+    week: 'week',
+    month: 'month',
+} as const;

frontend/src/openapi/models/impactMetricsConfigSchema.ts

@@ -3,33 +3,38 @@
  * Do not edit manually.
  * See `gen:api` script in package.json
  */
+import type { ImpactMetricsConfigSchemaAggregationMode } from './impactMetricsConfigSchemaAggregationMode.js';
 import type { ImpactMetricsConfigSchemaSelectedLabels } from './impactMetricsConfigSchemaSelectedLabels.js';
 import type { ImpactMetricsConfigSchemaSelectedRange } from './impactMetricsConfigSchemaSelectedRange.js';
+import type { ImpactMetricsConfigSchemaType } from './impactMetricsConfigSchemaType.js';
 
 /**
  * Describes the configuration for a single impact metric chart.
  */
 export interface ImpactMetricsConfigSchema {
     /** The aggregation mode for the metric data. */
-    aggregationMode: string;
+    aggregationMode: ImpactMetricsConfigSchemaAggregationMode;
     /** Whether the chart should begin at zero on the y-axis. */
     beginAtZero: boolean;
+    /** The human readable display name of the impact metric */
+    displayName: string;
     /**
      * Optional feature name that this impact metric is associated with.
      * @nullable
      */
     feature?: string | null;
     /** The unique ULID identifier for this impact metric configuration. Generated automatically if not provided. */
-    id?: string;
+    id: string;
     /** The selected labels and their values for filtering the metric data. */
     selectedLabels: ImpactMetricsConfigSchemaSelectedLabels;
     /** The time range for the metric data. */
     selectedRange: ImpactMetricsConfigSchemaSelectedRange;
-    /** The Prometheus metric series to display. */
+    /** The Prometheus metric series to display. It includes both unleash prefix and metric type and display name */
     selectedSeries: string;
     /**
      * Optional title for the impact metric chart.
-     * @nullable
      */
-    title?: string | null;
+    title?: string;
+    /** The type of metric */
+    type: ImpactMetricsConfigSchemaType;
 }

frontend/src/openapi/models/impactMetricsConfigSchemaAggregationMode.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The aggregation mode for the metric data.
+ */
+export type ImpactMetricsConfigSchemaAggregationMode =
+    (typeof ImpactMetricsConfigSchemaAggregationMode)[keyof typeof ImpactMetricsConfigSchemaAggregationMode];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ImpactMetricsConfigSchemaAggregationMode = {
+    rps: 'rps',
+    count: 'count',
+    avg: 'avg',
+    sum: 'sum',
+} as const;

frontend/src/openapi/models/impactMetricsConfigSchemaType.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The type of metric
+ */
+export type ImpactMetricsConfigSchemaType =
+    (typeof ImpactMetricsConfigSchemaType)[keyof typeof ImpactMetricsConfigSchemaType];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ImpactMetricsConfigSchemaType = {
+    counter: 'counter',
+    gauge: 'gauge',
+    unknown: 'unknown',
+} as const;

frontend/src/openapi/models/index.ts

@@ -426,6 +426,10 @@ export * from './createGroup409.js';
 export * from './createGroupSchema.js';
 export * from './createGroupSchemaUsersItem.js';
 export * from './createGroupSchemaUsersItemUser.js';
+export * from './createImpactMetricsConfigSchema.js';
+export * from './createImpactMetricsConfigSchemaAggregationMode.js';
+export * from './createImpactMetricsConfigSchemaSelectedLabels.js';
+export * from './createImpactMetricsConfigSchemaSelectedRange.js';
 export * from './createInvitedUserSchema.js';
 export * from './createPat401.js';
 export * from './createPat403.js';
@@ -889,8 +893,10 @@ export * from './idSchema.js';
 export * from './idsSchema.js';
 export * from './impactMetricsConfigListSchema.js';
 export * from './impactMetricsConfigSchema.js';
+export * from './impactMetricsConfigSchemaAggregationMode.js';
 export * from './impactMetricsConfigSchemaSelectedLabels.js';
 export * from './impactMetricsConfigSchemaSelectedRange.js';
+export * from './impactMetricsConfigSchemaType.js';
 export * from './impactMetricsSchema.js';
 export * from './impactMetricsSchemaSamplesItem.js';
 export * from './impactMetricsSchemaSamplesItemLabels.js';