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:
parent
6c11b57c53
commit
88d384573f
@ -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)}
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
@ -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,
|
||||
|
@ -10,7 +10,7 @@ export const useFeatureImpactMetrics = (feature: string) => {
|
||||
);
|
||||
|
||||
return {
|
||||
settings: data || { configs: [] },
|
||||
impactMetrics: data || { configs: [] },
|
||||
refetch,
|
||||
loading,
|
||||
error,
|
||||
|
@ -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;
|
||||
}
|
@ -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;
|
@ -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[];
|
||||
};
|
@ -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;
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
18
frontend/src/openapi/models/impactMetricsConfigSchemaType.ts
Normal file
18
frontend/src/openapi/models/impactMetricsConfigSchemaType.ts
Normal 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;
|
@ -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';
|
||||
|
Loading…
Reference in New Issue
Block a user