Merge branch 'main' into gateway-api-keys

frontend/public/Logos/convex-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="184" height="188" fill="none" viewBox="0 0 184 188"><path fill="#f3b01c" d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122"/><path fill="#8d2676" d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555"/><path fill="#ee342f" d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704"/></svg>

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -1,117 +0,0 @@
-import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
-import {
-	BarTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { BarChartProps } from '../types';
-import { stack } from './stackUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle) */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
-
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data as uPlot.AlignedData;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stack(data as uPlot.AlignedData, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		const hasValidData =
-			unstacked && plot.data && unstacked[0]?.length === plot.data[0]?.length;
-
-		if (!hasValidData || isUpdatingChartRef.current) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stack(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-
-		const onDataChange = (plot: uPlot): void => {
-			if (!isUpdatingChartRef.current) {
-				applyStackingToChart(plot);
-			}
-		};
-
-		const onSeriesVisibilityChange = (
-			plot: uPlot,
-			_seriesIdx: number | null,
-			opts: uPlot.Series,
-		): void => {
-			if (has(opts, 'focus')) {
-				return;
-			}
-			applyStackingToChart(plot);
-		};
-
-		const removeSetDataHook = config.addHook('setData', onDataChange);
-		const removeSetSeriesHook = config.addHook(
-			'setSeries',
-			onSeriesVisibilityChange,
-		);
-
-		return (): void => {
-			removeSetDataHook?.();
-			removeSetSeriesHook?.();
-		};
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: BarTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
-			};
-			return <BarChartTooltip {...tooltipProps} />;
-		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
-	);
-
-	return (
-		<ChartWrapper
-			{...rest}
-			config={config}
-			data={chartData}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/BarChart/stackUtils.ts

@@ -1,57 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When omit(i) returns true for a series index, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const d0Len = data[0].length;
-	const n = data.length - 1;
-	const data2: (number | null)[][] = Array(n);
-	const accum = Array(d0Len).fill(0) as number[];
-
-	// Accumulate from last series upward: last = raw, first = total
-	for (let i = n; i >= 1; i--) {
-		const seriesData = data[i] as (number | null)[];
-		if (omit(i)) {
-			data2[i - 1] = seriesData;
-		} else {
-			data2[i - 1] = seriesData.map((v, idx) => {
-				const val = v == null ? 0 : Number(v);
-				return (accum[idx] += val);
-			});
-		}
-	}
-
-	const bands: uPlot.Band[] = [];
-	// Bands: [upper, lower] - fill between consecutive visible series
-	for (let i = 1; i < data.length; i++) {
-		if (!omit(i)) {
-			const nextIdx = data.findIndex((_, j) => j > i && !omit(j));
-			if (nextIdx >= 1) {
-				bands.push({ series: [i, nextIdx] });
-			}
-		}
-	}
-
-	return {
-		data: [data[0], ...data2] as AlignedData,
-		bands,
-	};
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let i = 1; i < seriesCount; i++) {
-		bands.push({ series: [i, i + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import noop from 'lodash-es/noop';
-import uPlot from 'uplot';
-
-import { ChartProps } from '../types';
-
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
-
-export default function ChartWrapper({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	showTooltip = true,
-	canPinTooltip = false,
-	syncMode,
-	syncKey,
-	onDestroy = noop,
-	children,
-	layoutChildren,
-	renderTooltip,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
-		},
-		[config, legendConfig.position],
-	);
-
-	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{showTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={renderTooltip}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -1,32 +1,104 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
+import { useCallback, useRef } from 'react';
+import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
 import {
-	TimeSeriesTooltipProps,
+	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
+import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
+import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
+import _noop from 'lodash-es/noop';
+import uPlot from 'uplot';
 
-import { TimeSeriesChartProps } from '../types';
+import { ChartProps } from '../types';
 
-export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, ...rest } = props;
+const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_MIN_WIDTH = 200;
 
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: TimeSeriesTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-			};
-			return <TimeSeriesTooltip {...tooltipProps} />;
+export default function TimeSeries({
+	legendConfig = { position: LegendPosition.BOTTOM },
+	config,
+	data,
+	width: containerWidth,
+	height: containerHeight,
+	disableTooltip = false,
+	canPinTooltip = false,
+	timezone,
+	yAxisUnit,
+	decimalPrecision,
+	syncMode,
+	syncKey,
+	onDestroy = _noop,
+	children,
+	layoutChildren,
+	'data-testid': testId,
+}: ChartProps): JSX.Element {
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const legendComponent = useCallback(
+		(averageLegendWidth: number): React.ReactNode => {
+			return (
+				<Legend
+					config={config}
+					position={legendConfig.position}
+					averageLegendWidth={averageLegendWidth}
+				/>
+			);
 		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[config, legendConfig.position],
 	);
 
 	return (
-		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
-			{children}
-		</ChartWrapper>
+		<PlotContextProvider>
+			<ChartLayout
+				config={config}
+				containerWidth={containerWidth}
+				containerHeight={containerHeight}
+				legendConfig={legendConfig}
+				legendComponent={legendComponent}
+				layoutChildren={layoutChildren}
+			>
+				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
+					<UPlotChart
+						config={config}
+						data={data}
+						width={chartWidth}
+						height={chartHeight}
+						plotRef={(plot): void => {
+							plotInstanceRef.current = plot;
+						}}
+						onDestroy={(plot: uPlot): void => {
+							plotInstanceRef.current = null;
+							onDestroy(plot);
+						}}
+						data-testid={testId}
+					>
+						{children}
+						{!disableTooltip && (
+							<TooltipPlugin
+								config={config}
+								canPinTooltip={canPinTooltip}
+								syncMode={syncMode}
+								maxWidth={Math.max(
+									TOOLTIP_MIN_WIDTH,
+									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
+								)}
+								syncKey={syncKey}
+								render={(props: TooltipRenderArgs): React.ReactNode => (
+									<Tooltip
+										{...props}
+										timezone={timezone}
+										yAxisUnit={yAxisUnit}
+										decimalPrecision={decimalPrecision}
+									/>
+								)}
+							/>
+						)}
+					</UPlotChart>
+				)}
+			</ChartLayout>
+		</PlotContextProvider>
 	);
 }

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,40 +1,29 @@
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
+import { LegendConfig } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
-	showTooltip?: boolean;
+	disableTooltip?: boolean;
 	timezone: string;
+	syncMode?: DashboardCursorSync;
+	syncKey?: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	'data-testid'?: string;
 }
-interface UPlotBasedChartProps {
+
+interface TimeSeriesChartProps extends BaseChartProps {
 	config: UPlotConfigBuilder;
+	legendConfig: LegendConfig;
 	data: uPlot.AlignedData;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;
 	layoutChildren?: React.ReactNode;
+	'data-testid'?: string;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-}
-
-export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-	isStackedBarChart?: boolean;
-}
-
-export type ChartProps = (TimeSeriesChartProps | BarChartProps) & {
-	renderTooltip: (props: TooltipRenderArgs) => React.ReactNode;
-};
+export type ChartProps = TimeSeriesChartProps;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,154 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={(plot: uPlot | null): void => {
-						uPlotRef.current = plot;
-					}}
-					onDestroy={(): void => {
-						uPlotRef.current = null;
-					}}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,109 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/BarChart/stackUtils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
-export function prepareBarPanelConfig({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	minTimeScale,
-	maxTimeScale,
-}: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
-		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	builder.setCursor({
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-		builder.addScale({ scaleKey: 'y', softMin: 0 });
-	}
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
-			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-
-	return builder;
-}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -6,6 +6,7 @@ import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { LineInterpolation } from 'lib/uPlotV2/config/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
@@ -72,28 +73,55 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	}, [queryResponse?.data?.payload]);
 
 	const config = useMemo(() => {
+		const tzDate = (timestamp: number): Date =>
+			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
 		return prepareUPlotConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
+			widgetId: widget.id || '',
 			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
+			tzDate,
 			minTimeScale: minTimeScale,
 			maxTimeScale: maxTimeScale,
+			isLogScale: widget?.isLogScale ?? false,
+			thresholds: {
+				scaleKey: 'y',
+				thresholds: (widget.thresholds || []).map((threshold) => ({
+					thresholdValue: threshold.thresholdValue ?? 0,
+					thresholdColor: threshold.thresholdColor,
+					thresholdUnit: threshold.thresholdUnit,
+					thresholdLabel: threshold.thresholdLabel,
+				})),
+				yAxisUnit: widget.yAxisUnit,
+			},
+			yAxisUnit: widget.yAxisUnit || '',
+			softMin: widget.softMin === undefined ? null : widget.softMin,
+			softMax: widget.softMax === undefined ? null : widget.softMax,
+			spanGaps: false,
+			colorMapping: widget.customLegendColors ?? {},
+			lineInterpolation: LineInterpolation.Spline,
+			isDarkMode,
+			onClick: clickHandlerWithContextMenu,
+			onDragSelect,
+			currentQuery: widget.query,
+			panelMode,
 		});
 	}, [
-		widget,
+		widget.id,
+		maxTimeScale,
+		minTimeScale,
+		timezone.value,
+		widget.customLegendColors,
+		widget.isLogScale,
+		widget.softMax,
+		widget.softMin,
 		isDarkMode,
+		queryResponse?.data?.payload,
+		widget.query,
+		widget.thresholds,
+		widget.yAxisUnit,
+		panelMode,
 		clickHandlerWithContextMenu,
 		onDragSelect,
-		queryResponse?.data?.payload,
-		panelMode,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
 	]);
 
 	const layoutChildren = useMemo(() => {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -1,4 +1,3 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fillMissingXAxisTimestamps,
@@ -6,20 +5,23 @@ import {
 } from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import onClickPlugin, {
+	OnClickPluginOpts,
+} from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
+	DistributionType,
 	DrawStyle,
 	LineInterpolation,
 	LineStyle,
+	SelectionPreferencesSource,
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
 export const prepareChartData = (
 	apiResponse: MetricRangePayloadProps,
@@ -32,39 +34,112 @@ export const prepareChartData = (
 };
 
 export const prepareUPlotConfig = ({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
+	widgetId,
 	apiResponse,
-	timezone,
-	panelMode,
+	tzDate,
 	minTimeScale,
 	maxTimeScale,
+	isLogScale,
+	thresholds,
+	softMin,
+	softMax,
+	spanGaps,
+	colorMapping,
+	lineInterpolation,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	onClick,
+	yAxisUnit,
+	panelMode,
 }: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
+	widgetId: string;
 	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
+	tzDate: uPlot.LocalDateFromUnix;
+	minTimeScale: number | undefined;
+	maxTimeScale: number | undefined;
+	isLogScale: boolean;
+	softMin: number | null;
+	softMax: number | null;
+	spanGaps: boolean;
+	colorMapping: Record<string, string>;
+	lineInterpolation: LineInterpolation;
+	isDarkMode: boolean;
+	thresholds: ThresholdsDrawHookOptions;
+	currentQuery: Query;
+	yAxisUnit: string;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
 	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
+	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
+		widgetId,
+		tzDate,
+		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
+			: SelectionPreferencesSource.IN_MEMORY,
+	});
+
+	// X scale – time axis
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	// Y scale – value axis, driven primarily by softMin/softMax and data
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		min: undefined,
+		max: undefined,
+		softMin: softMin ?? undefined,
+		softMax: softMax ?? undefined,
+		thresholds,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	builder.addThresholds(thresholds);
+
+	if (typeof onClick === 'function') {
+		builder.addPlugin(
+			onClickPlugin({
+				onClick,
+				apiResponse,
+			}),
+		);
+	}
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		isLogScale: false,
+		panelType: PANEL_TYPES.TIME_SERIES,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		isLogScale: false,
+		yAxisUnit,
 		panelType: PANEL_TYPES.TIME_SERIES,
-		minTimeScale,
-		maxTimeScale,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
@@ -82,16 +157,14 @@ export const prepareUPlotConfig = ({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Line,
 			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
+			colorMapping,
+			spanGaps,
 			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
+			lineInterpolation,
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
-
 	return builder;
 };

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -1,127 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { PanelMode } from '../types';
-
-export interface BaseConfigBuilderProps {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	panelType: PANEL_TYPES;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-export function buildBaseConfig({
-	widget,
-	isDarkMode,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	panelType,
-	minTimeScale,
-	maxTimeScale,
-}: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-	const builder = new UPlotConfigBuilder({
-		onDragSelect,
-		widgetId: widget.id,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	const thresholdOptions: ThresholdsDrawHookOptions = {
-		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
-			thresholdValue: threshold.thresholdValue ?? 0,
-			thresholdColor: threshold.thresholdColor,
-			thresholdUnit: threshold.thresholdUnit,
-			thresholdLabel: threshold.thresholdLabel,
-		})),
-		yAxisUnit: widget.yAxisUnit,
-	};
-
-	builder.addThresholds(thresholdOptions);
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		// thresholds,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		panelType,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
-		panelType,
-	});
-
-	return builder;
-}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
@@ -27,12 +26,20 @@ import {
 } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { CollapseProps } from 'antd/lib';
-import createIngestionKeyApi from 'api/IngestionKeys/createIngestionKey';
-import deleteIngestionKey from 'api/IngestionKeys/deleteIngestionKey';
-import createLimitForIngestionKeyApi from 'api/IngestionKeys/limits/createLimitsForKey';
-import deleteLimitsForIngestionKey from 'api/IngestionKeys/limits/deleteLimitsForIngestionKey';
-import updateLimitForIngestionKeyApi from 'api/IngestionKeys/limits/updateLimitsForIngestionKey';
-import updateIngestionKey from 'api/IngestionKeys/updateIngestionKey';
+import {
+	useCreateIngestionKey,
+	useCreateIngestionKeyLimit,
+	useDeleteIngestionKey,
+	useDeleteIngestionKeyLimit,
+	useGetIngestionKeys,
+	useSearchIngestionKeys,
+	useUpdateIngestionKey,
+	useUpdateIngestionKeyLimit,
+} from 'api/generated/services/gateway';
+import {
+	GatewaytypesIngestionKeyDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import Tags from 'components/Tags/Tags';
@@ -44,7 +51,6 @@ import ROUTES from 'constants/routes';
 import { INITIAL_ALERT_THRESHOLD_STATE } from 'container/CreateAlertV2/context/constants';
 import dayjs from 'dayjs';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
-import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, isNil, isUndefined } from 'lodash-es';
@@ -66,16 +72,12 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { ErrorResponse } from 'types/api';
 import {
 	AddLimitProps,
 	LimitProps,
 	UpdateLimitProps,
 } from 'types/api/ingestionKeys/limits/types';
-import {
-	IngestionKeyProps,
-	PaginationProps,
-} from 'types/api/ingestionKeys/types';
+import { PaginationProps } from 'types/api/ingestionKeys/types';
 import { MeterAggregateOperator } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { getDaysUntilExpiry } from 'utils/timeUtils';
@@ -86,6 +88,10 @@ const { Option } = Select;
 
 const BYTES = 1073741824;
 
+const INITIAL_PAGE_SIZE = 10;
+const SEARCH_PAGE_SIZE = 100;
+const FIRST_PAGE = 1;
+
 const COUNT_MULTIPLIER = {
 	thousand: 1000,
 	million: 1000000,
@@ -111,6 +117,8 @@ export const showErrorNotification = (
 ): void => {
 	notifications.error({
 		message: err.message || SOMETHING_WENT_WRONG,
+		description: (err as AxiosError<RenderErrorResponseDTO>).response?.data?.error
+			?.message,
 	});
 };
 
@@ -163,15 +171,20 @@ function MultiIngestionSettings(): JSX.Element {
 	const [updatedTags, setUpdatedTags] = useState<string[]>([]);
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isEditAddLimitOpen, setIsEditAddLimitOpen] = useState(false);
-	const [activeAPIKey, setActiveAPIKey] = useState<IngestionKeyProps | null>();
+	const [
+		activeAPIKey,
+		setActiveAPIKey,
+	] = useState<GatewaytypesIngestionKeyDTO | null>(null);
 	const [activeSignal, setActiveSignal] = useState<LimitProps | null>(null);
 
 	const [searchValue, setSearchValue] = useState<string>('');
 	const [searchText, setSearchText] = useState<string>('');
-	const [dataSource, setDataSource] = useState<IngestionKeyProps[]>([]);
+	const [dataSource, setDataSource] = useState<GatewaytypesIngestionKeyDTO[]>(
+		[],
+	);
 	const [paginationParams, setPaginationParams] = useState<PaginationProps>({
-		page: 1,
-		per_page: 10,
+		page: FIRST_PAGE,
+		per_page: INITIAL_PAGE_SIZE,
 	});
 
 	const [totalIngestionKeys, setTotalIngestionKeys] = useState(0);
@@ -186,7 +199,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		createLimitForIngestionKeyError,
 		setCreateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);
 
 	const [
 		hasUpdateLimitForIngestionKeyError,
@@ -196,7 +209,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		updateLimitForIngestionKeyError,
 		setUpdateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);
 
 	const { t } = useTranslation(['ingestionKeys']);
 
@@ -216,7 +229,11 @@ function MultiIngestionSettings(): JSX.Element {
 		handleFormReset();
 	};
 
-	const showDeleteModal = (apiKey: IngestionKeyProps): void => {
+	const showDeleteModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
 		setActiveAPIKey(apiKey);
 		setIsDeleteModalOpen(true);
 	};
@@ -233,7 +250,11 @@ function MultiIngestionSettings(): JSX.Element {
 		setIsAddModalOpen(false);
 	};
 
-	const showEditModal = (apiKey: IngestionKeyProps): void => {
+	const showEditModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
 		setActiveAPIKey(apiKey);
 		handleFormReset();
 		setUpdatedTags(apiKey.tags || []);
@@ -248,6 +269,10 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const showAddModal = (): void => {
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
 		setUpdatedTags([]);
 		setActiveAPIKey(null);
 		setIsAddModalOpen(true);
@@ -258,27 +283,62 @@ function MultiIngestionSettings(): JSX.Element {
 		setActiveSignal(null);
 	};
 
+	// Use search API when searchText is present, otherwise use normal get API
+	const isSearching = searchText.length > 0;
+
 	const {
-		data: IngestionKeys,
-		isLoading,
-		isRefetching,
-		refetch: refetchAPIKeys,
-		error,
-		isError,
-	} = useGetAllIngestionsKeys({
-		search: searchText,
-		...paginationParams,
-	});
+		data: ingestionKeysData,
+		isLoading: isLoadingGet,
+		isRefetching: isRefetchingGet,
+		refetch: refetchGetAPIKeys,
+		error: getError,
+		isError: isGetError,
+	} = useGetIngestionKeys(
+		{
+			...paginationParams,
+		},
+		{
+			query: {
+				enabled: !isSearching,
+			},
+		},
+	);
+
+	const {
+		data: searchIngestionKeysData,
+		isLoading: isLoadingSearch,
+		isRefetching: isRefetchingSearch,
+		refetch: refetchSearchAPIKeys,
+		error: searchError,
+		isError: isSearchError,
+	} = useSearchIngestionKeys(
+		{
+			page: FIRST_PAGE,
+			per_page: SEARCH_PAGE_SIZE,
+			name: searchText,
+		},
+		{
+			query: {
+				enabled: isSearching,
+			},
+		},
+	);
+
+	// Use the appropriate data based on which API is active
+	const ingestionKeys = isSearching
+		? searchIngestionKeysData
+		: ingestionKeysData;
+	const isLoading = isSearching ? isLoadingSearch : isLoadingGet;
+	const isRefetching = isSearching ? isRefetchingSearch : isRefetchingGet;
+	const refetchAPIKeys = isSearching ? refetchSearchAPIKeys : refetchGetAPIKeys;
+	const error = isSearching ? searchError : getError;
+	const isError = isSearching ? isSearchError : isGetError;
 
 	useEffect(() => {
-		setActiveAPIKey(IngestionKeys?.data.data[0]);
-	}, [IngestionKeys]);
-
-	useEffect(() => {
-		setDataSource(IngestionKeys?.data.data || []);
-		setTotalIngestionKeys(IngestionKeys?.data?._pagination?.total || 0);
+		setDataSource(ingestionKeys?.data.data?.keys || []);
+		setTotalIngestionKeys(ingestionKeys?.data?.data?._pagination?.total || 0);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [IngestionKeys?.data?.data]);
+	}, [ingestionKeys?.data?.data]);
 
 	useEffect(() => {
 		if (isError) {
@@ -297,6 +357,7 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const clearSearch = (): void => {
 		setSearchValue('');
+		setSearchText('');
 	};
 
 	const {
@@ -309,101 +370,54 @@ function MultiIngestionSettings(): JSX.Element {
 	const {
 		mutate: createIngestionKey,
 		isLoading: isLoadingCreateAPIKey,
-	} = useMutation(createIngestionKeyApi, {
-		onSuccess: (data) => {
-			setActiveAPIKey(data.payload);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-		},
-		onError: (error) => {
-			showErrorNotification(notifications, error as AxiosError);
-		},
-	});
+	} = useCreateIngestionKey<AxiosError<RenderErrorResponseDTO>>();
 
-	const { mutate: updateAPIKey, isLoading: isLoadingUpdateAPIKey } = useMutation(
-		updateIngestionKey,
-		{
-			onSuccess: () => {
-				refetchAPIKeys();
-				setIsEditModalOpen(false);
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
+	const {
+		mutate: updateAPIKey,
+		isLoading: isLoadingUpdateAPIKey,
+	} = useUpdateIngestionKey<AxiosError<RenderErrorResponseDTO>>();
 
-	const { mutate: deleteAPIKey, isLoading: isDeleteingAPIKey } = useMutation(
-		deleteIngestionKey,
-		{
-			onSuccess: () => {
-				refetchAPIKeys();
-				setIsDeleteModalOpen(false);
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
+	const {
+		mutate: deleteAPIKey,
+		isLoading: isDeleteingAPIKey,
+	} = useDeleteIngestionKey<AxiosError<RenderErrorResponseDTO>>();
 
 	const {
 		mutate: createLimitForIngestionKey,
 		isLoading: isLoadingLimitForKey,
-	} = useMutation(createLimitForIngestionKeyApi, {
-		onSuccess: () => {
-			setActiveSignal(null);
-			setActiveAPIKey(null);
-			setIsEditAddLimitOpen(false);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-			setHasCreateLimitForIngestionKeyError(false);
-		},
-		onError: (error: ErrorResponse) => {
-			setHasCreateLimitForIngestionKeyError(true);
-			setCreateLimitForIngestionKeyError(error);
-		},
-	});
+	} = useCreateIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
 
 	const {
 		mutate: updateLimitForIngestionKey,
 		isLoading: isLoadingUpdatedLimitForKey,
-	} = useMutation(updateLimitForIngestionKeyApi, {
-		onSuccess: () => {
-			setActiveSignal(null);
-			setActiveAPIKey(null);
-			setIsEditAddLimitOpen(false);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-			setHasUpdateLimitForIngestionKeyError(false);
-		},
-		onError: (error: ErrorResponse) => {
-			setHasUpdateLimitForIngestionKeyError(true);
-			setUpdateLimitForIngestionKeyError(error);
-		},
-	});
+	} = useUpdateIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
 
-	const { mutate: deleteLimitForKey, isLoading: isDeletingLimit } = useMutation(
-		deleteLimitsForIngestionKey,
-		{
-			onSuccess: () => {
-				setIsDeleteModalOpen(false);
-				setIsDeleteLimitModalOpen(false);
-				refetchAPIKeys();
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
+	const {
+		mutate: deleteLimitForKey,
+		isLoading: isDeletingLimit,
+	} = useDeleteIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
 
 	const onDeleteHandler = (): void => {
 		clearSearch();
 
-		if (activeAPIKey) {
-			deleteAPIKey(activeAPIKey.id);
+		if (activeAPIKey && activeAPIKey.id) {
+			deleteAPIKey(
+				{
+					pathParams: { keyId: activeAPIKey.id },
+				},
+				{
+					onSuccess: () => {
+						notifications.success({
+							message: 'Ingestion key deleted successfully',
+						});
+						refetchAPIKeys();
+						setIsDeleteModalOpen(false);
+					},
+					onError: (error) => {
+						showErrorNotification(notifications, error as AxiosError);
+					},
+				},
+			);
 		}
 	};
 
@@ -411,15 +425,31 @@ function MultiIngestionSettings(): JSX.Element {
 		editForm
 			.validateFields()
 			.then((values) => {
-				if (activeAPIKey) {
-					updateAPIKey({
-						id: activeAPIKey.id,
-						data: {
-							name: values.name,
-							tags: updatedTags,
-							expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+				if (activeAPIKey && activeAPIKey.id) {
+					updateAPIKey(
+						{
+							pathParams: { keyId: activeAPIKey.id },
+							data: {
+								name: values.name,
+								tags: updatedTags,
+								expires_at: new Date(
+									dayjs(values.expires_at).endOf('day').toISOString(),
+								),
+							},
 						},
-					});
+						{
+							onSuccess: () => {
+								notifications.success({
+									message: 'Ingestion key updated successfully',
+								});
+								refetchAPIKeys();
+								setIsEditModalOpen(false);
+							},
+							onError: (error) => {
+								showErrorNotification(notifications, error as AxiosError);
+							},
+						},
+					);
 				}
 			})
 			.catch((errorInfo) => {
@@ -435,10 +465,30 @@ function MultiIngestionSettings(): JSX.Element {
 					const requestPayload = {
 						name: values.name,
 						tags: updatedTags,
-						expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+						expires_at: new Date(dayjs(values.expires_at).endOf('day').toISOString()),
 					};
 
-					createIngestionKey(requestPayload);
+					createIngestionKey(
+						{
+							data: requestPayload,
+						},
+						{
+							onSuccess: (_data) => {
+								notifications.success({
+									message: 'Ingestion key created successfully',
+								});
+								// The new API returns GatewaytypesGettableCreatedIngestionKeyDTO with only id and value
+								// We rely on refetchAPIKeys to get the full key object
+								setActiveAPIKey(null);
+								setUpdatedTags([]);
+								hideAddViewModal();
+								refetchAPIKeys();
+							},
+							onError: (error) => {
+								showErrorNotification(notifications, error as AxiosError);
+							},
+						},
+					);
 				}
 			})
 			.catch((errorInfo) => {
@@ -465,7 +515,7 @@ function MultiIngestionSettings(): JSX.Element {
 		formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.UTC_MONTH_COMPACT);
 
 	const showDeleteLimitModal = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		limit: LimitProps,
 	): void => {
 		setActiveAPIKey(APIKey);
@@ -489,9 +539,17 @@ function MultiIngestionSettings(): JSX.Element {
 
 	/* eslint-disable sonarjs/cognitive-complexity */
 	const handleAddLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signalName: string,
 	): void => {
+		if (!APIKey.id) {
+			notifications.error({
+				message: 'Invalid ingestion key',
+				description: 'Cannot create limit for ingestion key without a valid ID',
+			});
+			return;
+		}
+
 		const {
 			dailyLimit,
 			secondsLimit,
@@ -576,13 +634,49 @@ function MultiIngestionSettings(): JSX.Element {
 			return;
 		}
 
-		createLimitForIngestionKey(payload);
+		createLimitForIngestionKey(
+			{
+				pathParams: { keyId: payload.keyID },
+				data: {
+					signal: payload.signal,
+					config: payload.config,
+				},
+			},
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'Limit created successfully',
+					});
+					setActiveSignal(null);
+					setActiveAPIKey(null);
+					setIsEditAddLimitOpen(false);
+					setUpdatedTags([]);
+					hideAddViewModal();
+					refetchAPIKeys();
+					setHasCreateLimitForIngestionKeyError(false);
+				},
+				onError: (error: AxiosError<RenderErrorResponseDTO>) => {
+					setHasCreateLimitForIngestionKeyError(true);
+					setCreateLimitForIngestionKeyError(
+						error.response?.data?.error?.message || 'Failed to create limit',
+					);
+				},
+			},
+		);
 	};
 
 	const handleUpdateLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
+		if (!signal.id) {
+			notifications.error({
+				message: 'Invalid limit',
+				description: 'Cannot update limit without a valid ID',
+			});
+			return;
+		}
+
 		const {
 			dailyLimit,
 			secondsLimit,
@@ -644,7 +738,34 @@ function MultiIngestionSettings(): JSX.Element {
 			}
 		}
 
-		updateLimitForIngestionKey(payload);
+		updateLimitForIngestionKey(
+			{
+				pathParams: { limitId: payload.limitID },
+				data: {
+					config: payload.config,
+				},
+			},
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'Limit updated successfully',
+					});
+					setActiveSignal(null);
+					setActiveAPIKey(null);
+					setIsEditAddLimitOpen(false);
+					setUpdatedTags([]);
+					hideAddViewModal();
+					refetchAPIKeys();
+					setHasUpdateLimitForIngestionKeyError(false);
+				},
+				onError: (error: AxiosError<RenderErrorResponseDTO>) => {
+					setHasUpdateLimitForIngestionKeyError(true);
+					setUpdateLimitForIngestionKeyError(
+						error.response?.data?.error?.message || 'Failed to update limit',
+					);
+				},
+			},
+		);
 	};
 	/* eslint-enable sonarjs/cognitive-complexity */
 
@@ -656,7 +777,7 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const enableEditLimitMode = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		const dayCount = signal?.config?.day?.count;
@@ -665,6 +786,11 @@ function MultiIngestionSettings(): JSX.Element {
 		const dayCountConverted = countToUnit(dayCount || 0);
 		const secondCountConverted = countToUnit(secondCount || 0);
 
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
+
 		setActiveAPIKey(APIKey);
 		setActiveSignal({
 			...signal,
@@ -703,14 +829,31 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const onDeleteLimitHandler = (): void => {
 		if (activeSignal && activeSignal.id) {
-			deleteLimitForKey(activeSignal.id);
+			deleteLimitForKey(
+				{
+					pathParams: { limitId: activeSignal.id },
+				},
+				{
+					onSuccess: () => {
+						notifications.success({
+							message: 'Limit deleted successfully',
+						});
+						setIsDeleteModalOpen(false);
+						setIsDeleteLimitModalOpen(false);
+						refetchAPIKeys();
+					},
+					onError: (error) => {
+						showErrorNotification(notifications, error as AxiosError);
+					},
+				},
+			);
 		}
 	};
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const handleCreateAlert = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		let metricName = '';
@@ -771,31 +914,61 @@ function MultiIngestionSettings(): JSX.Element {
 		history.push(URL);
 	};
 
-	const columns: AntDTableProps<IngestionKeyProps>['columns'] = [
+	const columns: AntDTableProps<GatewaytypesIngestionKeyDTO>['columns'] = [
 		{
 			title: 'Ingestion Key',
 			key: 'ingestion-key',
 			// eslint-disable-next-line sonarjs/cognitive-complexity
-			render: (APIKey: IngestionKeyProps): JSX.Element => {
-				const createdOn = getFormattedTime(
-					APIKey.created_at,
-					formatTimezoneAdjustedTimestamp,
-				);
+			render: (APIKey: GatewaytypesIngestionKeyDTO): JSX.Element => {
+				const createdOn = APIKey?.created_at
+					? getFormattedTime(
+							dayjs(APIKey.created_at).toISOString(),
+							formatTimezoneAdjustedTimestamp,
+					  )
+					: '';
 
 				const expiresOn =
-					!APIKey?.expires_at || APIKey?.expires_at === '0001-01-01T00:00:00Z'
+					!APIKey?.expires_at ||
+					dayjs(APIKey?.expires_at).toISOString() === '0001-01-01T00:00:00.000Z'
 						? 'No Expiry'
-						: getFormattedTime(APIKey?.expires_at, formatTimezoneAdjustedTimestamp);
+						: getFormattedTime(
+								dayjs(APIKey?.expires_at).toISOString(),
+								formatTimezoneAdjustedTimestamp,
+						  );
 
-				const updatedOn = getFormattedTime(
-					APIKey?.updated_at,
-					formatTimezoneAdjustedTimestamp,
-				);
+				const updatedOn = APIKey?.updated_at
+					? getFormattedTime(
+							dayjs(APIKey.updated_at).toISOString(),
+							formatTimezoneAdjustedTimestamp,
+					  )
+					: '';
+
+				const onCopyKey = (e: React.MouseEvent): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					if (APIKey?.value) {
+						handleCopyKey(APIKey.value);
+					}
+				};
+
+				const onEditKey = (e: React.MouseEvent): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					showEditModal(APIKey);
+				};
+
+				const onDeleteKey = (e: React.MouseEvent): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					showDeleteModal(APIKey);
+				};
 
 				// Convert array of limits to a dictionary for quick access
 				const limitsDict: Record<string, LimitProps> = {};
-				APIKey.limits?.forEach((limitItem: LimitProps) => {
-					limitsDict[limitItem.signal] = limitItem;
+				APIKey.limits?.forEach((limitItem) => {
+					if (limitItem.signal && limitItem.id) {
+						limitsDict[limitItem.signal] = limitItem as LimitProps;
+					}
 				});
 
 				const hasLimits = (signalName: string): boolean => !!limitsDict[signalName];
@@ -812,39 +985,25 @@ function MultiIngestionSettings(): JSX.Element {
 
 									<div className="ingestion-key-value">
 										<Typography.Text>
-											{APIKey?.value.substring(0, 2)}********
-											{APIKey?.value.substring(APIKey.value.length - 2).trim()}
+											{APIKey?.value?.substring(0, 2)}********
+											{APIKey?.value
+												?.substring(APIKey?.value?.length ? APIKey.value.length - 2 : 0)
+												?.trim()}
 										</Typography.Text>
 
-										<Copy
-											className="copy-key-btn"
-											size={12}
-											onClick={(e): void => {
-												e.stopPropagation();
-												e.preventDefault();
-												handleCopyKey(APIKey.value);
-											}}
-										/>
+										<Copy className="copy-key-btn" size={12} onClick={onCopyKey} />
 									</div>
 								</div>
 								<div className="action-btn">
 									<Button
 										className="periscope-btn ghost"
 										icon={<PenLine size={14} />}
-										onClick={(e): void => {
-											e.stopPropagation();
-											e.preventDefault();
-											showEditModal(APIKey);
-										}}
+										onClick={onEditKey}
 									/>
 									<Button
 										className="periscope-btn ghost"
 										icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-										onClick={(e): void => {
-											e.stopPropagation();
-											e.preventDefault();
-											showDeleteModal(APIKey);
-										}}
+										onClick={onDeleteKey}
 									/>
 								</div>
 							</div>
@@ -854,7 +1013,7 @@ function MultiIngestionSettings(): JSX.Element {
 								<Row>
 									<Col span={6}> ID </Col>
 									<Col span={12}>
-										<Typography.Text>{APIKey.id}</Typography.Text>
+										<Typography.Text>{APIKey?.id}</Typography.Text>
 									</Col>
 								</Row>
 
@@ -906,6 +1065,39 @@ function MultiIngestionSettings(): JSX.Element {
 													limit?.config?.second?.size !== undefined ||
 													limit?.config?.second?.count !== undefined;
 
+												const onEditSignalLimit = (e: React.MouseEvent): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													enableEditLimitMode(APIKey, limit);
+												};
+
+												const onDeleteSignalLimit = (e: React.MouseEvent): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													showDeleteLimitModal(APIKey, limit);
+												};
+
+												const onAddSignalLimit = (e: React.MouseEvent): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													enableEditLimitMode(APIKey, {
+														id: signalName,
+														signal: signalName,
+														config: {},
+													});
+												};
+
+												const onSaveSignalLimit = (): void => {
+													if (!hasLimits(signalName)) {
+														handleAddLimit(APIKey, signalName);
+													} else {
+														handleUpdateLimit(APIKey, limitsDict[signalName]);
+													}
+												};
+
+												const onCreateSignalAlert = (): void =>
+													handleCreateAlert(APIKey, limitsDict[signalName]);
+
 												return (
 													<div className="signal" key={signalName}>
 														<div className="header">
@@ -916,22 +1108,18 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<PenLine size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																			onClick={(e): void => {
-																				e.stopPropagation();
-																				e.preventDefault();
-																				enableEditLimitMode(APIKey, limit);
-																			}}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
+																			onClick={onEditSignalLimit}
 																		/>
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																			onClick={(e): void => {
-																				e.stopPropagation();
-																				e.preventDefault();
-																				showDeleteLimitModal(APIKey, limit);
-																			}}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
+																			onClick={onDeleteSignalLimit}
 																		/>
 																	</>
 																) : (
@@ -940,16 +1128,8 @@ function MultiIngestionSettings(): JSX.Element {
 																		size="small"
 																		shape="round"
 																		icon={<PlusIcon size={14} />}
-																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																		onClick={(e): void => {
-																			e.stopPropagation();
-																			e.preventDefault();
-																			enableEditLimitMode(APIKey, {
-																				id: signalName,
-																				signal: signalName,
-																				config: {},
-																			});
-																		}}
+																		disabled={!!(activeAPIKey?.id === APIKey?.id && activeSignal)}
+																		onClick={onAddSignalLimit}
 																	>
 																		Limits
 																	</Button>
@@ -958,7 +1138,7 @@ function MultiIngestionSettings(): JSX.Element {
 														</div>
 
 														<div className="signal-limit-values">
-															{activeAPIKey?.id === APIKey.id &&
+															{activeAPIKey?.id === APIKey?.id &&
 															activeSignal?.signal === signalName &&
 															isEditAddLimitOpen ? (
 																<Form
@@ -1154,27 +1334,27 @@ function MultiIngestionSettings(): JSX.Element {
 																		</div>
 																	</div>
 
-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasCreateLimitForIngestionKeyError &&
-																		createLimitForIngestionKeyError?.error && (
+																		createLimitForIngestionKeyError && (
 																			<div className="error">
-																				{createLimitForIngestionKeyError?.error}
+																				{createLimitForIngestionKeyError}
 																			</div>
 																		)}
 
-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasUpdateLimitForIngestionKeyError &&
-																		updateLimitForIngestionKeyError?.error && (
+																		updateLimitForIngestionKeyError && (
 																			<div className="error">
-																				{updateLimitForIngestionKeyError?.error}
+																				{updateLimitForIngestionKeyError}
 																			</div>
 																		)}
 
-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		isEditAddLimitOpen && (
 																			<div className="signal-limit-save-discard">
@@ -1188,13 +1368,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					loading={
 																						isLoadingLimitForKey || isLoadingUpdatedLimitForKey
 																					}
-																					onClick={(): void => {
-																						if (!hasLimits(signalName)) {
-																							handleAddLimit(APIKey, signalName);
-																						} else {
-																							handleUpdateLimit(APIKey, limitsDict[signalName]);
-																						}
-																					}}
+																					onClick={onSaveSignalLimit}
 																				>
 																					Save
 																				</Button>
@@ -1275,9 +1449,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					className="set-alert-btn periscope-btn ghost"
 																					type="text"
 																					data-testid={`set-alert-btn-${signalName}`}
-																					onClick={(): void =>
-																						handleCreateAlert(APIKey, limitsDict[signalName])
-																					}
+																					onClick={onCreateSignalAlert}
 																				/>
 																			</Tooltip>
 																		)}
@@ -1392,7 +1564,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const handleTableChange = (pagination: TablePaginationConfig): void => {
 		setPaginationParams({
 			page: pagination?.current || 1,
-			per_page: 10,
+			per_page: INITIAL_PAGE_SIZE,
 		});
 	};
 
@@ -1490,7 +1662,7 @@ function MultiIngestionSettings(): JSX.Element {
 					showHeader={false}
 					onChange={handleTableChange}
 					pagination={{
-						pageSize: paginationParams?.per_page,
+						pageSize: isSearching ? SEARCH_PAGE_SIZE : paginationParams?.per_page,
 						hideOnSinglePage: true,
 						showTotal: (total: number, range: number[]): string =>
 							`${range[0]}-${range[1]} of ${total} Ingestion keys`,

frontend/src/container/IngestionSettings/__tests__/MultiIngestionSettings.test.tsx

@@ -1,3 +1,4 @@
+import { GatewaytypesGettableIngestionKeysDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -18,6 +19,12 @@ interface TestAllIngestionKeyProps extends Omit<AllIngestionKeyProps, 'data'> {
 	data: TestIngestionKeyProps[];
 }
 
+// Gateway API response type (uses actual schema types for contract safety)
+interface TestGatewayIngestionKeysResponse {
+	status: string;
+	data: GatewaytypesGettableIngestionKeysDTO;
+}
+
 // Mock useHistory.push to capture navigation URL used by MultiIngestionSettings
 const mockPush = jest.fn() as jest.MockedFunction<(path: string) => void>;
 jest.mock('react-router-dom', () => {
@@ -86,32 +93,34 @@ describe('MultiIngestionSettings Page', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		// Arrange API response with a metrics daily count limit so the alert button is visible
-		const response: TestAllIngestionKeyProps = {
+		const response: TestGatewayIngestionKeysResponse = {
 			status: 'success',
-			data: [
-				{
-					name: 'Key One',
-					expires_at: TEST_EXPIRES_AT,
-					value: 'secret',
-					workspace_id: TEST_WORKSPACE_ID,
-					id: 'k1',
-					created_at: TEST_CREATED_UPDATED,
-					updated_at: TEST_CREATED_UPDATED,
-					tags: [],
-					limits: [
-						{
-							id: 'l1',
-							signal: 'metrics',
-							config: { day: { count: 1000 } },
-						},
-					],
-				},
-			],
-			_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
+			data: {
+				keys: [
+					{
+						name: 'Key One',
+						expires_at: new Date(TEST_EXPIRES_AT),
+						value: 'secret',
+						workspace_id: TEST_WORKSPACE_ID,
+						id: 'k1',
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
+						tags: [],
+						limits: [
+							{
+								id: 'l1',
+								signal: 'metrics',
+								config: { day: { count: 1000 } },
+							},
+						],
+					},
+				],
+				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
+			},
 		};
 
 		server.use(
-			rest.get('*/workspaces/me/keys*', (_req, res, ctx) =>
+			rest.get('*/api/v2/gateway/ingestion_keys*', (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(response)),
 			),
 		);
@@ -257,4 +266,95 @@ describe('MultiIngestionSettings Page', () => {
 			'signoz.meter.log.size',
 		);
 	});
+
+	it('switches to search API when search text is entered', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		const getResponse: TestGatewayIngestionKeysResponse = {
+			status: 'success',
+			data: {
+				keys: [
+					{
+						name: 'Key Regular',
+						expires_at: new Date(TEST_EXPIRES_AT),
+						value: 'secret1',
+						workspace_id: TEST_WORKSPACE_ID,
+						id: 'k1',
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
+						tags: [],
+						limits: [],
+					},
+				],
+				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
+			},
+		};
+
+		const searchResponse: TestGatewayIngestionKeysResponse = {
+			status: 'success',
+			data: {
+				keys: [
+					{
+						name: 'Key Search Result',
+						expires_at: new Date(TEST_EXPIRES_AT),
+						value: 'secret2',
+						workspace_id: TEST_WORKSPACE_ID,
+						id: 'k2',
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
+						tags: [],
+						limits: [],
+					},
+				],
+				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
+			},
+		};
+
+		const getHandler = jest.fn();
+		const searchHandler = jest.fn();
+
+		server.use(
+			rest.get('*/api/v2/gateway/ingestion_keys', (req, res, ctx) => {
+				if (req.url.pathname.endsWith('/search')) {
+					return undefined;
+				}
+				getHandler();
+				return res(ctx.status(200), ctx.json(getResponse));
+			}),
+			rest.get('*/api/v2/gateway/ingestion_keys/search', (_req, res, ctx) => {
+				searchHandler();
+				return res(ctx.status(200), ctx.json(searchResponse));
+			}),
+		);
+
+		render(<MultiIngestionSettings />, undefined, {
+			initialRoute: INGESTION_SETTINGS_ROUTE,
+		});
+
+		await screen.findByText('Key Regular');
+		expect(getHandler).toHaveBeenCalled();
+		expect(searchHandler).not.toHaveBeenCalled();
+
+		// Reset getHandler count to verify it's not called again during search
+		getHandler.mockClear();
+
+		// Type in search box
+		const searchInput = screen.getByPlaceholderText(
+			'Search for ingestion key...',
+		);
+		await user.type(searchInput, 'test');
+
+		await screen.findByText('Key Search Result');
+		expect(searchHandler).toHaveBeenCalled();
+		expect(getHandler).not.toHaveBeenCalled();
+
+		// Clear search
+		searchHandler.mockClear();
+		getHandler.mockClear();
+		await user.clear(searchInput);
+
+		await screen.findByText('Key Regular');
+		// Search API should be disabled when not searching
+		expect(searchHandler).not.toHaveBeenCalled();
+	});
 });

frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx

@@ -2,13 +2,16 @@ import { useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Skeleton, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { useGetIngestionKeys } from 'api/generated/services/gateway';
+import {
+	GatewaytypesIngestionKeyDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { DOCS_BASE_URL } from 'constants/app';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
-import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowUpRight, Copy, Info, Key, TriangleAlert } from 'lucide-react';
-import { IngestionKeyProps } from 'types/api/ingestionKeys/types';
 
 import './IngestionDetails.styles.scss';
 
@@ -39,17 +42,17 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	const { notifications } = useNotifications();
 	const [, handleCopyToClipboard] = useCopyToClipboard();
 
-	const [firstIngestionKey, setFirstIngestionKey] = useState<IngestionKeyProps>(
-		{} as IngestionKeyProps,
-	);
+	const [
+		firstIngestionKey,
+		setFirstIngestionKey,
+	] = useState<GatewaytypesIngestionKeyDTO>({} as GatewaytypesIngestionKeyDTO);
 
 	const {
 		data: ingestionKeys,
 		isLoading: isIngestionKeysLoading,
 		error,
 		isError,
-	} = useGetAllIngestionsKeys({
-		search: '',
+	} = useGetIngestionKeys({
 		page: 1,
 		per_page: 10,
 	});
@@ -69,8 +72,11 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	};
 
 	useEffect(() => {
-		if (ingestionKeys?.data.data && ingestionKeys?.data.data.length > 0) {
-			setFirstIngestionKey(ingestionKeys?.data.data[0]);
+		if (
+			ingestionKeys?.data?.data?.keys &&
+			ingestionKeys?.data.data.keys.length > 0
+		) {
+			setFirstIngestionKey(ingestionKeys?.data.data.keys[0]);
 		}
 	}, [ingestionKeys]);
 
@@ -80,7 +86,10 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 				<div className="ingestion-endpoint-section-error-container">
 					<Typography.Text className="ingestion-endpoint-section-error-text error">
 						<TriangleAlert size={14} />{' '}
-						{(error as AxiosError)?.message || 'Something went wrong'}
+						{(error as AxiosError<RenderErrorResponseDTO>)?.response?.data?.error
+							?.message ||
+							(error as AxiosError)?.message ||
+							'Something went wrong'}
 					</Typography.Text>
 
 					<div className="ingestion-setup-details-links">
@@ -176,7 +185,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 										</Typography.Text>
 
 										<Typography.Text className="ingestion-key-value-copy">
-											{maskKey(firstIngestionKey?.value)}
+											{maskKey(firstIngestionKey?.value || '')}
 
 											<Copy
 												size={14}
@@ -186,7 +195,9 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 														`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INGESTION_KEY_COPIED}`,
 														{},
 													);
-													handleCopyKey(firstIngestionKey?.value);
+													if (firstIngestionKey?.value) {
+														handleCopyKey(firstIngestionKey.value);
+													}
 												}}
 											/>
 										</Typography.Text>

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -323,6 +323,7 @@
 			"java instrumentation",
 			"java k8s",
 			"java logs",
+			"java metrics",
 			"java microservices",
 			"java monitoring",
 			"java observability",
@@ -331,12 +332,10 @@
 			"java vm",
 			"java windows",
 			"jboss",
-			"wildfly",
 			"jdk 11",
 			"jdk 17",
 			"jdk 21",
 			"jdk 8",
-			"jdbc",
 			"opentelemetry java",
 			"quarkus",
 			"spring boot",
@@ -373,12 +372,6 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-springboot/"
 							},
-							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
-								"link": "/docs/instrumentation/opentelemetry-springboot/"
-							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -410,12 +403,6 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-tomcat/"
 							},
-							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
-								"link": "/docs/instrumentation/opentelemetry-tomcat/"
-							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -427,7 +414,7 @@
 				},
 				{
 					"key": "jboss",
-					"label": "JBoss/WildFly",
+					"label": "JBoss",
 					"imgUrl": "/Logos/jboss.svg",
 					"link": "/docs/instrumentation/opentelemetry-jboss/",
 					"question": {
@@ -447,12 +434,6 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-jboss/"
 							},
-							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
-								"link": "/docs/instrumentation/opentelemetry-jboss/"
-							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -484,12 +465,6 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-quarkus/"
 							},
-							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
-								"link": "/docs/instrumentation/opentelemetry-quarkus/"
-							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -520,18 +495,6 @@
 								"label": "Kubernetes",
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-java/"
-							},
-							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
-								"link": "/docs/instrumentation/opentelemetry-java/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-java/"
 							}
 						]
 					}
@@ -567,6 +530,7 @@
 			"python in containers",
 			"python instrumentation",
 			"python k8s",
+			"python metrics",
 			"python microservices",
 			"python observability",
 			"python on kubernetes",
@@ -619,6 +583,7 @@
 		],
 		"module": "apm",
 		"relatedSearchKeywords": [
+			"angular",
 			"apm",
 			"apm/traces",
 			"application performance monitoring",
@@ -630,6 +595,7 @@
 			"next.js",
 			"nodejs",
 			"nuxtjs",
+			"reactjs",
 			"traces",
 			"tracing",
 			"ts",
@@ -644,8 +610,8 @@
 			"entityID": "framework",
 			"options": [
 				{
-					"key": "nodejs-nestjs",
-					"label": "NodeJs/NestJS",
+					"key": "nodejs",
+					"label": "NodeJs",
 					"imgUrl": "/Logos/nodejs.svg",
 					"link": "/docs/instrumentation/opentelemetry-javascript/",
 					"question": {
@@ -666,16 +632,103 @@
 								"link": "/docs/instrumentation/opentelemetry-javascript/"
 							},
 							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
 								"link": "/docs/instrumentation/opentelemetry-javascript/"
+							}
+						]
+					}
+				},
+				{
+					"key": "express",
+					"label": "Express",
+					"imgUrl": "/Logos/express.svg",
+					"link": "/docs/instrumentation/opentelemetry-express/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/opentelemetry-express/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/opentelemetry-express/"
 							},
 							{
 								"key": "windows",
 								"label": "Windows",
 								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-javascript/"
+								"link": "/docs/instrumentation/opentelemetry-express/"
+							}
+						]
+					}
+				},
+				{
+					"key": "nestjs",
+					"label": "NestJS",
+					"imgUrl": "/Logos/nestjs.svg",
+					"link": "/docs/instrumentation/opentelemetry-nestjs/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/opentelemetry-nestjs/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/opentelemetry-nestjs/"
+							},
+							{
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
+								"link": "/docs/instrumentation/opentelemetry-nestjs/"
+							}
+						]
+					}
+				},
+				{
+					"key": "angular",
+					"label": "Angular",
+					"imgUrl": "/Logos/angular.svg",
+					"link": "/docs/instrumentation/opentelemetry-angular/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/opentelemetry-angular/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/opentelemetry-angular/"
+							},
+							{
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
+								"link": "/docs/instrumentation/opentelemetry-angular/"
 							}
 						]
 					}
@@ -703,16 +756,41 @@
 								"link": "/docs/instrumentation/opentelemetry-nextjs/"
 							},
 							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
 								"link": "/docs/instrumentation/opentelemetry-nextjs/"
+							}
+						]
+					}
+				},
+				{
+					"key": "reactjs",
+					"label": "ReactJS",
+					"imgUrl": "/Logos/reactjs.svg",
+					"link": "/docs/instrumentation/opentelemetry-reactjs/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/opentelemetry-reactjs/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/opentelemetry-reactjs/"
 							},
 							{
 								"key": "windows",
 								"label": "Windows",
 								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-nextjs/"
+								"link": "/docs/instrumentation/opentelemetry-reactjs/"
 							}
 						]
 					}
@@ -739,12 +817,6 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-nuxtjs/"
 							},
-							{
-								"key": "docker",
-								"label": "Docker",
-								"imgUrl": "/Logos/docker.svg",
-								"link": "/docs/instrumentation/opentelemetry-nuxtjs/"
-							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -758,7 +830,32 @@
 					"key": "react-native",
 					"label": "React Native",
 					"imgUrl": "/Logos/reactjs.svg",
-					"link": "/docs/instrumentation/opentelemetry-react-native/"
+					"link": "/docs/instrumentation/opentelemetry-react-native/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/opentelemetry-react-native/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/opentelemetry-react-native/"
+							},
+							{
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
+								"link": "/docs/instrumentation/opentelemetry-react-native/"
+							}
+						]
+					}
 				}
 			]
 		}
@@ -792,6 +889,7 @@
 			"golang",
 			"golang apm",
 			"golang instrumentation",
+			"golang metrics",
 			"golang observability",
 			"golang performance monitoring",
 			"golang tracing",
@@ -882,39 +980,69 @@
 			"php-fpm monitoring",
 			"slim php",
 			"traces",
-			"tracing",
-			"wordpress"
+			"tracing"
 		],
 		"id": "php",
-		"link": "/docs/instrumentation/opentelemetry-php/",
 		"question": {
-			"desc": "What is your Environment?",
+			"desc": "Which PHP framework do you use?",
 			"type": "select",
-			"entityID": "environment",
+			"entityID": "framework",
 			"options": [
 				{
-					"key": "vm",
-					"label": "VM",
-					"imgUrl": "/Logos/vm.svg",
-					"link": "/docs/instrumentation/opentelemetry-php/"
+					"key": "laravel",
+					"label": "Laravel",
+					"imgUrl": "/Logos/laravel.svg",
+					"link": "/docs/instrumentation/laravel/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/laravel/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/laravel/"
+							}
+						]
+					}
 				},
 				{
-					"key": "k8s",
-					"label": "Kubernetes",
-					"imgUrl": "/Logos/kubernetes.svg",
-					"link": "/docs/instrumentation/opentelemetry-php/"
-				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/instrumentation/opentelemetry-php/"
-				},
-				{
-					"key": "windows",
-					"label": "Windows",
-					"imgUrl": "/Logos/windows.svg",
-					"link": "/docs/instrumentation/opentelemetry-php/"
+					"key": "Others",
+					"label": "Others",
+					"imgUrl": "/Logos/php-others.svg",
+					"link": "/docs/instrumentation/opentelemetry-php/",
+					"question": {
+						"desc": "What is your Environment?",
+						"type": "select",
+						"entityID": "environment",
+						"options": [
+							{
+								"key": "vm",
+								"label": "VM",
+								"imgUrl": "/Logos/vm.svg",
+								"link": "/docs/instrumentation/opentelemetry-php/"
+							},
+							{
+								"key": "k8s",
+								"label": "Kubernetes",
+								"imgUrl": "/Logos/kubernetes.svg",
+								"link": "/docs/instrumentation/opentelemetry-php/"
+							},
+							{
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
+								"link": "/docs/instrumentation/opentelemetry-php/"
+							}
+						]
+					}
 				}
 			]
 		}
@@ -989,12 +1117,6 @@
 					"imgUrl": "/Logos/kubernetes.svg",
 					"link": "/docs/instrumentation/opentelemetry-dotnet/"
 				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/instrumentation/opentelemetry-dotnet/"
-				},
 				{
 					"key": "windows",
 					"label": "Windows",
@@ -1006,7 +1128,7 @@
 	},
 	{
 		"dataSource": "ruby-on-rails",
-		"label": "Ruby",
+		"label": "Ruby on Rails",
 		"imgUrl": "/Logos/ruby-on-rails.svg",
 		"tags": [
 			"apm/traces"
@@ -1046,12 +1168,9 @@
 			"ruby tracing",
 			"ruby-on-rails",
 			"traces",
-			"tracing",
-			"sinatra",
-			"sidekiq",
-			"resque"
+			"tracing"
 		],
-		"id": "ruby",
+		"id": "ruby-on-rails",
 		"link": "/docs/instrumentation/opentelemetry-ruby-on-rails/",
 		"question": {
 			"desc": "What is your Environment?",
@@ -1070,12 +1189,6 @@
 					"imgUrl": "/Logos/kubernetes.svg",
 					"link": "/docs/instrumentation/opentelemetry-ruby-on-rails/"
 				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/instrumentation/opentelemetry-ruby-on-rails/"
-				},
 				{
 					"key": "windows",
 					"label": "Windows",
@@ -1355,6 +1468,41 @@
 		"id": "nginx-tracing",
 		"link": "/docs/instrumentation/opentelemetry-nginx/"
 	},
+	{
+		"dataSource": "opentelemetry-wordpress",
+		"label": "WordPress",
+		"imgUrl": "/Logos/wordpress.svg",
+		"tags": [
+			"apm/traces"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"apm",
+			"apm/traces",
+			"application performance monitoring",
+			"monitor wordpress site",
+			"opentelemetry",
+			"opentelemetry wordpress",
+			"opentelemetry-wordpress",
+			"otel",
+			"otel wordpress",
+			"traces",
+			"tracing",
+			"wordpress",
+			"wordpress apm",
+			"wordpress instrumentation",
+			"wordpress metrics",
+			"wordpress monitoring",
+			"wordpress observability",
+			"wordpress performance",
+			"wordpress php monitoring",
+			"wordpress plugin monitoring",
+			"wordpress to signoz",
+			"wordpress tracing"
+		],
+		"id": "opentelemetry-wordpress",
+		"link": "/docs/instrumentation/opentelemetry-wordpress/"
+	},
 	{
 		"dataSource": "opentelemetry-cloudflare",
 		"label": "Cloudflare Tracing",
@@ -1419,25 +1567,6 @@
 		"id": "opentelemetry-cloudflare-logs",
 		"link": "/docs/logs-management/send-logs/cloudflare-logs/"
 	},
-	{
-		"dataSource": "convex-logs",
-		"label": "Convex Logs",
-		"imgUrl": "/Logos/convex-logo.svg",
-		"tags": [
-			"logs"
-		],
-		"module": "logs",
-		"relatedSearchKeywords": [
-			"convex",
-			"convex log streaming",
-			"convex logs",
-			"convex webhook",
-			"logging",
-			"logs"
-		],
-		"id": "convex-logs",
-		"link": "/docs/logs-management/send-logs/convex-log-streams-signoz/"
-	},
 	{
 		"dataSource": "kubernetes-pod-logs",
 		"label": "Kubernetes Pod Logs",
@@ -4439,7 +4568,6 @@
 		],
 		"module": "metrics",
 		"relatedSearchKeywords": [
-			"browser metrics",
 			"core web vitals metrics",
 			"frontend metrics",
 			"frontend monitoring",
@@ -4459,7 +4587,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-			"next.js"
+"next.js"
 		],
 		"link": "/docs/frontend-monitoring/web-vitals-with-metrics/"
 	},
@@ -4494,7 +4622,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-			"next.js"
+"next.js"
 		],
 		"link": "/docs/frontend-monitoring/web-vitals-with-traces/"
 	},
@@ -4536,7 +4664,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-			"next.js"
+"next.js"
 		],
 		"link": "/docs/frontend-monitoring/document-load/"
 	},
@@ -5188,6 +5316,23 @@
 		],
 		"link": "/docs/metrics-management/mysql-metrics/"
 	},
+	{
+		"dataSource": "jvm",
+		"label": "JVM",
+		"imgUrl": "/Logos/java.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"java virtual machine",
+			"jvm",
+			"jvm metrics",
+			"jvm monitoring",
+			"runtime"
+		],
+		"link": "/docs/tutorial/jvm-metrics/"
+	},
 	{
 		"dataSource": "jmx",
 		"label": "JMX",
@@ -5203,7 +5348,7 @@
 			"jmx monitoring",
 			"runtime"
 		],
-		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/jmx-metrics/"
+		"link": "/docs/tutorial/jmx-metrics/"
 	},
 	{
 		"dataSource": "prometheus-metrics",
@@ -5429,17 +5574,16 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-			"next.js"
+"next.js"
 		],
 		"link": "/docs/frontend-monitoring/sending-logs-with-opentelemetry/"
 	},
 	{
 		"dataSource": "frontend-traces",
-		"label": "Frontend Tracing",
+		"label": "Frontend Traces",
 		"imgUrl": "/Logos/traces.svg",
 		"tags": [
-			"Frontend Monitoring",
-			"apm/traces"
+			"Frontend Monitoring"
 		],
 		"module": "apm",
 		"relatedSearchKeywords": [
@@ -5461,7 +5605,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-			"next.js"
+"next.js"
 		],
 		"link": "/docs/frontend-monitoring/sending-traces-with-opentelemetry/"
 	},
@@ -5492,7 +5636,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-			"next.js"
+"next.js"
 		],
 		"link": "/docs/frontend-monitoring/sending-metrics-with-opentelemetry/"
 	},
@@ -5539,6 +5683,7 @@
 		"label": "Golang Metrics",
 		"imgUrl": "/Logos/go.svg",
 		"tags": [
+			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",
@@ -5592,64 +5737,12 @@
 			]
 		}
 	},
-	{
-		"dataSource": "java-metrics",
-		"label": "Java Metrics",
-		"imgUrl": "/Logos/java.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"java",
-			"java metrics",
-			"java monitoring",
-			"java observability",
-			"jvm metrics",
-			"metrics",
-			"opentelemetry java",
-			"otel java",
-			"runtime metrics"
-		],
-		"id": "java-metrics",
-		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/",
-		"question": {
-			"desc": "What is your Environment?",
-			"type": "select",
-			"entityID": "environment",
-			"options": [
-				{
-					"key": "vm",
-					"label": "VM",
-					"imgUrl": "/Logos/vm.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
-				},
-				{
-					"key": "k8s",
-					"label": "Kubernetes",
-					"imgUrl": "/Logos/kubernetes.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
-				},
-				{
-					"key": "windows",
-					"label": "Windows",
-					"imgUrl": "/Logos/windows.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
-				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
-				}
-			]
-		}
-	},
 	{
 		"dataSource": "python-metrics",
 		"label": "Python Metrics",
 		"imgUrl": "/Logos/python.svg",
 		"tags": [
+			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",
@@ -5703,6 +5796,7 @@
 		"label": ".NET Metrics",
 		"imgUrl": "/Logos/dotnet.svg",
 		"tags": [
+			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",
@@ -5759,6 +5853,7 @@
 		"label": "Node.js Metrics",
 		"imgUrl": "/Logos/nodejs.svg",
 		"tags": [
+			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { BarTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-				isStackedBarChart: props.isStackedBarChart,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-			props.isStackedBarChart,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

frontend/src/lib/uPlotV2/components/Tooltip/TimeSeriesTooltip.tsx

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { TimeSeriesTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function TimeSeriesTooltip(
-	props: TimeSeriesTooltipProps,
-): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -5,7 +5,8 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
-import { TooltipProps } from '../types';
+import { TooltipContentItem, TooltipProps } from '../types';
+import { buildTooltipContent } from './utils';
 
 import './Tooltip.styles.scss';
 
@@ -13,12 +14,14 @@ const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
 
 export default function Tooltip({
+	seriesIndex,
+	dataIndexes,
 	uPlotInstance,
 	timezone,
-	content,
+	yAxisUnit = '',
+	decimalPrecision,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-
 	const headerTitle = useMemo(() => {
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
@@ -30,6 +33,20 @@ export default function Tooltip({
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
 
+	const content = useMemo(
+		(): TooltipContentItem[] =>
+			buildTooltipContent({
+				data: uPlotInstance.data,
+				series: uPlotInstance.series,
+				dataIndexes,
+				activeSeriesIndex: seriesIndex,
+				uPlotInstance,
+				yAxisUnit,
+				decimalPrecision,
+			}),
+		[uPlotInstance, seriesIndex, dataIndexes, yAxisUnit, decimalPrecision],
+	);
+
 	return (
 		<div
 			className={cx(

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -20,39 +20,6 @@ export function resolveSeriesColor(
 	return FALLBACK_SERIES_COLOR;
 }
 
-export function getTooltipBaseValue({
-	data,
-	index,
-	dataIndex,
-	isStackedBarChart,
-	series,
-}: {
-	data: AlignedData;
-	index: number;
-	dataIndex: number;
-	isStackedBarChart?: boolean;
-	series?: Series[];
-}): number | null {
-	let baseValue = data[index][dataIndex] ?? null;
-	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
-	// When series are hidden, we must use the next *visible* series, not index+1,
-	// since hidden series keep raw values and would produce negative/wrong results.
-	if (isStackedBarChart && baseValue !== null && series) {
-		let nextVisibleIdx = -1;
-		for (let j = index + 1; j < series.length; j++) {
-			if (series[j]?.show) {
-				nextVisibleIdx = j;
-				break;
-			}
-		}
-		if (nextVisibleIdx >= 1) {
-			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
-			baseValue = baseValue - nextValue;
-		}
-	}
-	return baseValue;
-}
-
 export function buildTooltipContent({
 	data,
 	series,
@@ -61,7 +28,6 @@ export function buildTooltipContent({
 	uPlotInstance,
 	yAxisUnit,
 	decimalPrecision,
-	isStackedBarChart,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -70,7 +36,6 @@ export function buildTooltipContent({
 	uPlotInstance: uPlot;
 	yAxisUnit: string;
 	decimalPrecision?: PrecisionOption;
-	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
 	const active: TooltipContentItem[] = [];
 	const rest: TooltipContentItem[] = [];
@@ -87,30 +52,23 @@ export function buildTooltipContent({
 			continue;
 		}
 
-		const baseValue = getTooltipBaseValue({
-			data,
-			index,
-			dataIndex,
-			isStackedBarChart,
-			series,
-		});
-
+		const raw = data[index]?.[dataIndex];
+		const value = Number(raw);
+		const displayValue = Number.isNaN(value) ? 0 : value;
 		const isActive = index === activeSeriesIndex;
 
-		if (Number.isFinite(baseValue) && baseValue !== null) {
-			const item: TooltipContentItem = {
-				label: String(s.label ?? ''),
-				value: baseValue,
-				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
-				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
-				isActive,
-			};
+		const item: TooltipContentItem = {
+			label: String(s.label ?? ''),
+			value: displayValue,
+			tooltipValue: getToolTipValue(displayValue, yAxisUnit, decimalPrecision),
+			color: resolveSeriesColor(s.stroke, uPlotInstance, index),
+			isActive,
+		};
 
-			if (isActive) {
-				active.push(item);
-			} else {
-				rest.push(item);
-			}
+		if (isActive) {
+			active.push(item);
+		} else {
+			rest.push(item);
 		}
 	}
 

frontend/src/lib/uPlotV2/components/types.ts

@@ -59,22 +59,10 @@ export interface TooltipRenderArgs {
 	viaSync: boolean;
 }
 
-export interface BaseTooltipProps {
+export type TooltipProps = TooltipRenderArgs & {
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-}
-
-export interface TimeSeriesTooltipProps
-	extends BaseTooltipProps,
-		TooltipRenderArgs {}
-
-export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
-	isStackedBarChart?: boolean;
-}
-
-export type TooltipProps = (TimeSeriesTooltipProps | BarTooltipProps) & {
-	content: TooltipContentItem[];
 };
 
 export enum LegendPosition {

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
@@ -40,11 +39,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
-
-		if (this.props.panelType === PANEL_TYPES.BAR) {
-			lineConfig.fill = lineColor;
-		}
-
 		return lineConfig;
 	}
 
@@ -219,9 +213,8 @@ function getPathBuilder(
 		const linearBuilder = pathBuilders.linear;
 		const splineBuilder = pathBuilders.spline;
 		const steppedBuilder = pathBuilders.stepped;
-		const barBuilder = pathBuilders.bars;
 
-		if (!linearBuilder || !splineBuilder || !steppedBuilder || !barBuilder) {
+		if (!linearBuilder || !splineBuilder || !steppedBuilder) {
 			throw new Error('Required uPlot path builders are not available');
 		}
 
@@ -230,14 +223,9 @@ function getPathBuilder(
 			spline: splineBuilder(),
 			stepBefore: steppedBuilder({ align: -1 }),
 			stepAfter: steppedBuilder({ align: 1 }),
-			bar: barBuilder(),
 		};
 	}
 
-	if (style === DrawStyle.Bar) {
-		return builders.bar;
-	}
-
 	if (style === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;

frontend/src/lib/uPlotV2/config/types.ts

@@ -110,7 +110,6 @@ export enum LineStyle {
 export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
-	Bar = 'bar',
 }
 
 export enum LineInterpolation {
@@ -129,7 +128,7 @@ export enum VisibilityMode {
 export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
-	panelType: PANEL_TYPES;
+
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

pkg/query-service/app/clickhouseReader/reader.go

@@ -830,7 +830,7 @@ func (r *ClickHouseReader) GetUsage(ctx context.Context, queryParams *model.GetU
 
 func (r *ClickHouseReader) GetSpansForTrace(ctx context.Context, traceID string, traceDetailsQuery string) ([]model.SpanItemV2, *model.ApiError) {
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, traceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {
@@ -6458,7 +6458,7 @@ func (r *ClickHouseReader) SearchTraces(ctx context.Context, params *model.Searc
 	}
 
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, params.TraceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {