diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx index ca98a46a98..76b58dc96d 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx +++ b/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) => ( + {}} + onDelete={() => {}} + /> + ))} + + setModalOpen(false)} diff --git a/frontend/src/component/impact-metrics/types.ts b/frontend/src/component/impact-metrics/types.ts index 2b945e6957..23ae51ab63 100644 --- a/frontend/src/component/impact-metrics/types.ts +++ b/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 }; diff --git a/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts b/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts index 5a9edf1073..933f380f3b 100644 --- a/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts +++ b/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, diff --git a/frontend/src/hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts b/frontend/src/hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts index 309bd2f521..862554e116 100644 --- a/frontend/src/hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts +++ b/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, diff --git a/frontend/src/openapi/models/createImpactMetricsConfigSchema.ts b/frontend/src/openapi/models/createImpactMetricsConfigSchema.ts new file mode 100644 index 0000000000..268066879b --- /dev/null +++ b/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; +} diff --git a/frontend/src/openapi/models/createImpactMetricsConfigSchemaAggregationMode.ts b/frontend/src/openapi/models/createImpactMetricsConfigSchemaAggregationMode.ts new file mode 100644 index 0000000000..6bdcafad19 --- /dev/null +++ b/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; diff --git a/frontend/src/openapi/models/createImpactMetricsConfigSchemaSelectedLabels.ts b/frontend/src/openapi/models/createImpactMetricsConfigSchemaSelectedLabels.ts new file mode 100644 index 0000000000..a021175948 --- /dev/null +++ b/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[]; +}; diff --git a/frontend/src/openapi/models/createImpactMetricsConfigSchemaSelectedRange.ts b/frontend/src/openapi/models/createImpactMetricsConfigSchemaSelectedRange.ts new file mode 100644 index 0000000000..0cec1e0bc1 --- /dev/null +++ b/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; diff --git a/frontend/src/openapi/models/impactMetricsConfigSchema.ts b/frontend/src/openapi/models/impactMetricsConfigSchema.ts index aa5d70a918..e2d53d2f26 100644 --- a/frontend/src/openapi/models/impactMetricsConfigSchema.ts +++ b/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; } diff --git a/frontend/src/openapi/models/impactMetricsConfigSchemaAggregationMode.ts b/frontend/src/openapi/models/impactMetricsConfigSchemaAggregationMode.ts new file mode 100644 index 0000000000..f07e25b4bf --- /dev/null +++ b/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; diff --git a/frontend/src/openapi/models/impactMetricsConfigSchemaType.ts b/frontend/src/openapi/models/impactMetricsConfigSchemaType.ts new file mode 100644 index 0000000000..b0eabe9863 --- /dev/null +++ b/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; diff --git a/frontend/src/openapi/models/index.ts b/frontend/src/openapi/models/index.ts index c49c454f71..ba547c2f2b 100644 --- a/frontend/src/openapi/models/index.ts +++ b/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';