Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/impact-metrics/ChartItem.tsx
View File

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

12
frontend/src/component/impact-metrics/types.ts
View File

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

8
frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts
View File

@ -1,12 +1,12 @@
import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js'; import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js';
import { formatApiPath } from 'utils/formatPath'; 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 = () => { export const useImpactMetricsSettings = () => {
const PATH = `api/admin/impact-metrics/settings`; const PATH = `api/admin/impact-metrics/settings`;
const { data, refetch, loading, error } = useApiGetter<ImpactMetricsState>( const { data, refetch, loading, error } =
formatApiPath(PATH), useApiGetter<DisplayImpactMetricsState>(formatApiPath(PATH), () =>
() => fetcher(formatApiPath(PATH), 'Impact metrics settings'), fetcher(formatApiPath(PATH), 'Impact metrics settings'),
); );
return { return {