1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-09 13:47:13 +02:00

feat: use metric display name in impact charts (#10359)

This commit is contained in:
Mateusz Kwasniewski 2025-07-16 11:58:42 +02:00 committed by GitHub
parent 7910aa9130
commit c3f1454df7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 11 deletions

View File

@ -4,19 +4,19 @@ import Edit from '@mui/icons-material/Edit';
import Delete from '@mui/icons-material/Delete';
import DragHandle from '@mui/icons-material/DragHandle';
import { ImpactMetricsChart } from './ImpactMetricsChart.tsx';
import type { ChartConfig } from './types.ts';
import type { ChartConfig, DisplayChartConfig } from './types.ts';
export interface ChartItemProps {
config: ChartConfig;
config: DisplayChartConfig;
onEdit: (config: ChartConfig) => void;
onDelete: (id: string) => void;
}
const getConfigDescription = (config: ChartConfig): string => {
const getConfigDescription = (config: DisplayChartConfig): string => {
const parts: string[] = [];
if (config.selectedSeries) {
parts.push(`${config.selectedSeries}`);
if (config.displayName) {
parts.push(`${config.displayName}`);
}
parts.push(`last ${config.selectedRange}`);

View File

@ -1,6 +1,6 @@
export type ChartConfig = {
id: string;
selectedSeries: string;
selectedSeries: string; // e.g. unleash_counter_my_metric
selectedRange: 'hour' | 'day' | 'week' | 'month';
beginAtZero: boolean;
showRate: boolean;
@ -8,6 +8,11 @@ export type ChartConfig = {
title?: string;
};
export type DisplayChartConfig = ChartConfig & {
type: 'counter' | 'gauge';
displayName: string; // e.g. my_metric with unleash_counter stripped
};
export type LayoutItem = {
i: string;
x: number;
@ -24,3 +29,8 @@ export type ImpactMetricsState = {
charts: ChartConfig[];
layout: LayoutItem[];
};
export type DisplayImpactMetricsState = {
charts: DisplayChartConfig[];
layout: LayoutItem[];
};

View File

@ -1,13 +1,13 @@
import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js';
import { formatApiPath } from 'utils/formatPath';
import type { ImpactMetricsState } from 'component/impact-metrics/types.ts';
import type { DisplayImpactMetricsState } from 'component/impact-metrics/types.ts';
export const useImpactMetricsSettings = () => {
const PATH = `api/admin/impact-metrics/settings`;
const { data, refetch, loading, error } = useApiGetter<ImpactMetricsState>(
formatApiPath(PATH),
() => fetcher(formatApiPath(PATH), 'Impact metrics settings'),
);
const { data, refetch, loading, error } =
useApiGetter<DisplayImpactMetricsState>(formatApiPath(PATH), () =>
fetcher(formatApiPath(PATH), 'Impact metrics settings'),
);
return {
settings: data || { charts: [], layout: [] },