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

feat: use metric display name in impact charts

This commit is contained in:
kwasniew 2025-07-16 11:49:21 +02:00
parent 052929099b
commit 4d35909b20
No known key found for this signature in database
GPG Key ID: 43A7CBC24C119560
3 changed files with 19 additions and 11 deletions

View File

@ -4,18 +4,18 @@ 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) {
if (config.displayName) {
parts.push(`${config.displayName}`);
}

View File

@ -1,8 +1,6 @@
export type ChartConfig = {
id: string;
selectedSeries: string; // e.g. unleash_counter_my_metric
type: 'counter' | 'gauge';
displayName: string; // e.g. my_metric with unleash_counter stripped
selectedRange: 'hour' | 'day' | 'week' | 'month';
beginAtZero: boolean;
showRate: boolean;
@ -10,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;
@ -26,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: [] },