1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-05 17:53:12 +02:00

feat: read feature impact metrics (#10597)

This commit is contained in:
Mateusz Kwasniewski 2025-09-02 13:16:57 +02:00 committed by GitHub
parent 6c11b57c53
commit 88d384573f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 153 additions and 10 deletions

View File

@ -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)}

View File

@ -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
};

View File

@ -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,

View File

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

View File

@ -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;
}

View File

@ -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;

View File

@ -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[];
};

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

@ -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';