feat: added new histogram panel

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -23,6 +23,7 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
+	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -36,6 +37,9 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
+			if (!showLegend) {
+				return null;
+			}
 			return (
 				<Legend
 					config={config}
@@ -44,7 +48,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -60,6 +64,7 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
+				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

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

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	HistogramTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+
+import { HistogramChartProps } from '../types';
+
+export default function Histogram(props: HistogramChartProps): JSX.Element {
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		isQueriesMerged,
+		...rest
+	} = props;
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
+			const tooltipProps: HistogramTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				content,
+			};
+			return <HistogramTooltip {...tooltipProps} />;
+		},
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+	);
+
+	return (
+		<ChartWrapper
+			showLegend={!isQueriesMerged}
+			{...rest}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

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

@@ -7,6 +7,7 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
+	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -17,6 +18,7 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
+	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -26,14 +28,20 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {}
+
+export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
+	isQueriesMerged?: boolean;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps = TimeSeriesChartProps | BarChartProps;
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
+	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -20,6 +22,7 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
+	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -30,6 +33,15 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
+			if (!showLegend) {
+				return {
+					width: containerWidth,
+					height: containerHeight,
+					legendWidth: 0,
+					legendHeight: 0,
+					averageLegendWidth: MAX_LEGEND_WIDTH,
+				};
+			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -42,7 +54,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -60,15 +72,17 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				<div
-					className="chart-layout__legend-wrapper"
-					style={{
-						height: chartDimensions.legendHeight,
-						width: chartDimensions.legendWidth,
-					}}
-				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
-				</div>
+				{showLegend && (
+					<div
+						className="chart-layout__legend-wrapper"
+						style={{
+							height: chartDimensions.legendHeight,
+							width: chartDimensions.legendWidth,
+						}}
+					>
+						{legendComponent(chartDimensions.averageLegendWidth)}
+					</div>
+				)}
 			</div>
 			{layoutChildren}
 		</div>

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

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,108 @@
+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));
+	}
+
+	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/HistogramPanel/HistogramPanel.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useRef } 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 { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import Histogram from '../../charts/Histogram/Histogram';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import {
+	prepareHistogramPanelConfig,
+	prepareHistogramPanelData,
+} from './utils';
+
+function HistogramPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const graphRef = useRef<HTMLDivElement>(null);
+	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]);
+
+	const config = useMemo(() => {
+		return prepareHistogramPanelConfig({
+			widget,
+			isDarkMode,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			panelMode,
+		});
+	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareHistogramPanelData({
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			bucketWidth: widget?.bucketWidth,
+			bucketCount: widget?.bucketCount,
+			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
+		});
+	}, [
+		queryResponse?.data?.payload,
+		widget?.bucketWidth,
+		widget?.bucketCount,
+		widget?.mergeAllActiveQueries,
+	]);
+
+	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 && (
+				<Histogram
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={(plot: uPlot | null): void => {
+						uPlotRef.current = plot;
+					}}
+					onDestroy={(): void => {
+						uPlotRef.current = null;
+					}}
+					isQueriesMerged={widget.mergeAllActiveQueries}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					syncMode={DashboardCursorSync.Crosshair}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HistogramPanel;

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

@@ -0,0 +1,214 @@
+import { histogramBucketSizes } from '@grafana/data';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { DrawStyle, VisibilityMode } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { incrRoundDn } from 'lib/uPlotV2/utils/scale';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { AlignedData } from 'uplot';
+
+import { PanelMode } from '../types';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+import {
+	addNullToFirstHistogram,
+	histogram,
+	join,
+	replaceUndefinedWithNull,
+	roundDecimals,
+} from '../utils/histogram';
+
+export interface PrepareHistogramPanelDataParams {
+	apiResponse: MetricRangePayloadProps;
+	bucketWidth?: number;
+	bucketCount?: number;
+	mergeAllActiveQueries?: boolean;
+}
+
+const BUCKET_OFFSET = 0;
+const HIST_SORT = (a: number, b: number): number => a - b;
+
+function extractNumericValues(
+	result: MetricRangePayloadProps['data']['result'],
+): number[] {
+	const values: number[] = [];
+	for (const item of result) {
+		for (const [, valueStr] of item.values) {
+			values.push(Number.parseFloat(valueStr) || 0);
+		}
+	}
+	return values;
+}
+
+function computeSmallestDelta(sortedValues: number[]): number {
+	if (sortedValues.length <= 1) {
+		return 0;
+	}
+	let smallest = Infinity;
+	for (let i = 1; i < sortedValues.length; i++) {
+		const delta = sortedValues[i] - sortedValues[i - 1];
+		if (delta > 0) {
+			smallest = Math.min(smallest, delta);
+		}
+	}
+	return smallest === Infinity ? 0 : smallest;
+}
+
+function selectBucketSize({
+	range,
+	bucketCount,
+	smallestDelta,
+	bucketWidthOverride,
+}: {
+	range: number;
+	bucketCount: number;
+	smallestDelta: number;
+	bucketWidthOverride?: number;
+}): number {
+	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
+		return bucketWidthOverride;
+	}
+	const targetSize = range / bucketCount;
+	for (const candidate of histogramBucketSizes) {
+		if (targetSize < candidate && candidate >= smallestDelta) {
+			return candidate;
+		}
+	}
+	return 0;
+}
+
+function buildFrames(
+	result: MetricRangePayloadProps['data']['result'],
+	mergeAllActiveQueries: boolean,
+): number[][] {
+	const frames: number[][] = result.map((item) =>
+		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
+	);
+	if (mergeAllActiveQueries && frames.length > 1) {
+		const first = frames[0];
+		for (let i = 1; i < frames.length; i++) {
+			first.push(...frames[i]);
+			frames[i] = [];
+		}
+	}
+	return frames;
+}
+
+export function prepareHistogramPanelData({
+	apiResponse,
+	bucketWidth,
+	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
+	mergeAllActiveQueries = false,
+}: PrepareHistogramPanelDataParams): AlignedData {
+	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
+	const result = apiResponse.data.result;
+
+	const seriesValues = extractNumericValues(result);
+	if (seriesValues.length === 0) {
+		return [[]];
+	}
+
+	const sorted = [...seriesValues].sort((a, b) => a - b);
+	const min = sorted[0];
+	const max = sorted[sorted.length - 1];
+	const range = max - min;
+	const smallestDelta = computeSmallestDelta(sorted);
+	let bucketSize = selectBucketSize({
+		range,
+		bucketCount,
+		smallestDelta,
+		bucketWidthOverride: bucketWidth,
+	});
+	if (bucketSize <= 0) {
+		bucketSize = range > 0 ? range / bucketCount : 1;
+	}
+
+	const getBucket = (v: number): number =>
+		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
+
+	const frames = buildFrames(result, mergeAllActiveQueries);
+	const histograms: AlignedData[] = frames
+		.filter((frame) => frame.length > 0)
+		.map((frame) => histogram(frame, getBucket, HIST_SORT));
+
+	if (histograms.length === 0) {
+		return [[]];
+	}
+
+	const joined = join(histograms);
+	replaceUndefinedWithNull(joined);
+	addNullToFirstHistogram(joined, bucketSize);
+	return joined;
+}
+
+export function prepareHistogramPanelConfig({
+	widget,
+	apiResponse,
+	panelMode,
+	isDarkMode,
+}: {
+	widget: Widgets;
+	apiResponse: MetricRangePayloadProps;
+	panelMode: PanelMode;
+	isDarkMode: boolean;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		apiResponse,
+		panelMode,
+		panelType: PANEL_TYPES.HISTOGRAM,
+	});
+	builder.setCursor({
+		drag: {
+			x: false,
+			y: false,
+			setScale: true,
+		},
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		auto: true,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		auto: true,
+	});
+
+	const currentQuery = widget.query;
+
+	apiResponse.data.result.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '', // query
+			series.legend || '',
+		);
+
+		const label = currentQuery
+			? getLegend(series, currentQuery, baseLabelName)
+			: baseLabelName;
+
+		builder.addSeries({
+			label: label,
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			barWidthFactor: 1,
+			showPoints: VisibilityMode.Never,
+			pointSize: 5,
+			isDarkMode,
+		});
+	});
+
+	return builder;
+}

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

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
+	onClick?: OnClickPluginOpts['onClick'];
+	onDragSelect?: (startTime: number, endTime: number) => void;
+	timezone?: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,8 +40,10 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+	const tzDate = timezone
+		? (timestamp: number): Date =>
+				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
+		: undefined;
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

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

@@ -0,0 +1,181 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-param-reassign */
+import {
+	NULL_EXPAND,
+	NULL_REMOVE,
+	NULL_RETAIN,
+} from 'container/PanelWrapper/constants';
+import { AlignedData } from 'uplot';
+
+export function incrRoundDn(num: number, incr: number): number {
+	return Math.floor(num / incr) * incr;
+}
+
+export function roundDecimals(val: number, dec = 0): number {
+	if (Number.isInteger(val)) {
+		return val;
+	}
+
+	const p = 10 ** dec;
+	const n = val * p * (1 + Number.EPSILON);
+	return Math.round(n) / p;
+}
+
+function nullExpand(
+	yVals: Array<number | null>,
+	nullIdxs: number[],
+	alignedLen: number,
+): void {
+	for (let i = 0, xi, lastNullIdx = -1; i < nullIdxs.length; i++) {
+		const nullIdx = nullIdxs[i];
+
+		if (nullIdx > lastNullIdx) {
+			xi = nullIdx - 1;
+			while (xi >= 0 && yVals[xi] == null) {
+				yVals[xi--] = null;
+			}
+
+			xi = nullIdx + 1;
+			while (xi < alignedLen && yVals[xi] == null) {
+				yVals[(lastNullIdx = xi++)] = null;
+			}
+		}
+	}
+}
+
+export function join(
+	tables: AlignedData[],
+	nullModes?: number[][],
+): AlignedData {
+	let xVals: Set<number>;
+
+	// eslint-disable-next-line prefer-const
+	xVals = new Set();
+
+	for (let ti = 0; ti < tables.length; ti++) {
+		const t = tables[ti];
+		const xs = t[0];
+		const len = xs.length;
+
+		for (let i = 0; i < len; i++) {
+			xVals.add(xs[i]);
+		}
+	}
+
+	const data = [Array.from(xVals).sort((a, b) => a - b)];
+
+	const alignedLen = data[0].length;
+
+	const xIdxs = new Map();
+
+	for (let i = 0; i < alignedLen; i++) {
+		xIdxs.set(data[0][i], i);
+	}
+
+	for (let ti = 0; ti < tables.length; ti++) {
+		const t = tables[ti];
+		const xs = t[0];
+
+		for (let si = 1; si < t.length; si++) {
+			const ys = t[si];
+
+			const yVals = Array(alignedLen).fill(undefined);
+
+			const nullMode = nullModes ? nullModes[ti][si] : NULL_RETAIN;
+
+			const nullIdxs = [];
+
+			for (let i = 0; i < ys.length; i++) {
+				const yVal = ys[i];
+				const alignedIdx = xIdxs.get(xs[i]);
+
+				if (yVal === null) {
+					if (nullMode !== NULL_REMOVE) {
+						yVals[alignedIdx] = yVal;
+
+						if (nullMode === NULL_EXPAND) {
+							nullIdxs.push(alignedIdx);
+						}
+					}
+				} else {
+					yVals[alignedIdx] = yVal;
+				}
+			}
+
+			nullExpand(yVals, nullIdxs, alignedLen);
+
+			data.push(yVals);
+		}
+	}
+
+	return data as AlignedData;
+}
+
+export function histogram(
+	vals: number[],
+	getBucket: (v: number) => number,
+	sort?: ((a: number, b: number) => number) | null,
+): AlignedData {
+	const hist = new Map();
+
+	for (let i = 0; i < vals.length; i++) {
+		let v = vals[i];
+
+		if (v != null) {
+			v = getBucket(v);
+		}
+
+		const entry = hist.get(v);
+
+		if (entry) {
+			entry.count++;
+		} else {
+			hist.set(v, { value: v, count: 1 });
+		}
+	}
+
+	const bins = [...hist.values()];
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	sort && bins.sort((a, b) => sort(a.value, b.value));
+
+	const values = Array(bins.length);
+	const counts = Array(bins.length);
+
+	for (let i = 0; i < bins.length; i++) {
+		values[i] = bins[i].value;
+		counts[i] = bins[i].count;
+	}
+
+	return [values, counts];
+}
+
+export function replaceUndefinedWithNull(data: AlignedData): AlignedData {
+	const arrays = data as (number | null | undefined)[][];
+	for (let i = 0; i < arrays.length; i++) {
+		for (let j = 0; j < arrays[i].length; j++) {
+			if (arrays[i][j] === undefined) {
+				arrays[i][j] = null;
+			}
+		}
+	}
+	return data;
+}
+
+export function addNullToFirstHistogram(
+	data: AlignedData,
+	bucketSize: number,
+): void {
+	const histograms = data as (number | null)[][];
+	if (
+		histograms.length > 0 &&
+		histograms[0].length > 0 &&
+		histograms[0][0] !== null
+	) {
+		histograms[0].unshift(histograms[0][0] - bucketSize);
+		for (let i = 1; i < histograms.length; i++) {
+			histograms[i].unshift(null);
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -1,27 +1,14 @@
 import { useState } from 'react';
 import { Button, Form, Modal } from 'antd';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import {
-	useCreateAuthDomain,
-	useUpdateAuthDomain,
-} from 'api/generated/services/authdomains';
-import {
-	AuthtypesGettableAuthDomainDTO,
-	AuthtypesGoogleConfigDTO,
-	AuthtypesOIDCConfigDTO,
-	AuthtypesPostableAuthDomainDTO,
-	AuthtypesRoleMappingDTO,
-	AuthtypesSamlConfigDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
+import put from 'api/v1/domains/id/put';
+import post from 'api/v1/domains/post';
 import { FeatureKeys } from 'constants/features';
-import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
+import { GettableAuthDomain } from 'types/api/v1/domains/list';
+import { PostableAuthDomain } from 'types/api/v1/domains/post';
 
 import AuthnProviderSelector from './AuthnProviderSelector';
 import ConfigureGoogleAuthAuthnProvider from './Providers/AuthnGoogleAuth';
@@ -33,22 +20,7 @@ import './CreateEdit.styles.scss';
 interface CreateOrEditProps {
 	isCreate: boolean;
 	onClose: () => void;
-	record?: AuthtypesGettableAuthDomainDTO;
-}
-
-// Form values interface for internal use (includes array-based fields for UI)
-interface FormValues {
-	name?: string;
-	ssoEnabled?: boolean;
-	ssoType?: string;
-	googleAuthConfig?: AuthtypesGoogleConfigDTO & {
-		domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>;
-	};
-	samlConfig?: AuthtypesSamlConfigDTO;
-	oidcConfig?: AuthtypesOIDCConfigDTO;
-	roleMapping?: AuthtypesRoleMappingDTO & {
-		groupMappingsList?: Array<{ groupName?: string; role?: string }>;
-	};
+	record?: GettableAuthDomain;
 }
 
 function configureAuthnProvider(
@@ -67,282 +39,64 @@ function configureAuthnProvider(
 	}
 }
 
-/**
- * Converts groupMappingsList array to groupMappings Record for API
- */
-function convertGroupMappingsToRecord(
-	groupMappingsList?: Array<{ groupName?: string; role?: string }>,
-): Record<string, string> | undefined {
-	if (!Array.isArray(groupMappingsList) || groupMappingsList.length === 0) {
-		return undefined;
-	}
-
-	const groupMappings: Record<string, string> = {};
-	groupMappingsList.forEach((item) => {
-		if (item.groupName && item.role) {
-			groupMappings[item.groupName] = item.role;
-		}
-	});
-
-	return Object.keys(groupMappings).length > 0 ? groupMappings : undefined;
-}
-
-/**
- * Converts groupMappings Record to groupMappingsList array for form
- */
-function convertGroupMappingsToList(
-	groupMappings?: Record<string, string> | null,
-): Array<{ groupName: string; role: string }> {
-	if (!groupMappings) {
-		return [];
-	}
-
-	return Object.entries(groupMappings).map(([groupName, role]) => ({
-		groupName,
-		role,
-	}));
-}
-
-/**
- * Converts domainToAdminEmailList array to domainToAdminEmail Record for API
- */
-function convertDomainMappingsToRecord(
-	domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>,
-): Record<string, string> | undefined {
-	if (
-		!Array.isArray(domainToAdminEmailList) ||
-		domainToAdminEmailList.length === 0
-	) {
-		return undefined;
-	}
-
-	const domainToAdminEmail: Record<string, string> = {};
-	domainToAdminEmailList.forEach((item) => {
-		if (item.domain && item.adminEmail) {
-			domainToAdminEmail[item.domain] = item.adminEmail;
-		}
-	});
-
-	return Object.keys(domainToAdminEmail).length > 0
-		? domainToAdminEmail
-		: undefined;
-}
-
-/**
- * Converts domainToAdminEmail Record to domainToAdminEmailList array for form
- */
-function convertDomainMappingsToList(
-	domainToAdminEmail?: Record<string, string>,
-): Array<{ domain: string; adminEmail: string }> {
-	if (!domainToAdminEmail) {
-		return [];
-	}
-
-	return Object.entries(domainToAdminEmail).map(([domain, adminEmail]) => ({
-		domain,
-		adminEmail,
-	}));
-}
-
-/**
- * Prepares initial form values from API record
- */
-function prepareInitialValues(
-	record?: AuthtypesGettableAuthDomainDTO,
-): FormValues {
-	if (!record) {
-		return {
-			name: '',
-			ssoEnabled: false,
-			ssoType: '',
-		};
-	}
-
-	return {
-		...record,
-		googleAuthConfig: record.googleAuthConfig
-			? {
-					...record.googleAuthConfig,
-					domainToAdminEmailList: convertDomainMappingsToList(
-						record.googleAuthConfig.domainToAdminEmail,
-					),
-			  }
-			: undefined,
-		roleMapping: record.roleMapping
-			? {
-					...record.roleMapping,
-					groupMappingsList: convertGroupMappingsToList(
-						record.roleMapping.groupMappings,
-					),
-			  }
-			: undefined,
-	};
-}
-
 function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 	const { isCreate, record, onClose } = props;
-	const [form] = Form.useForm<AuthtypesPostableAuthDomainDTO>();
+	const [form] = Form.useForm<PostableAuthDomain>();
 	const [authnProvider, setAuthnProvider] = useState<string>(
 		record?.ssoType || '',
 	);
 
-	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
 	const { featureFlags } = useAppContext();
-
-	const handleError = (error: AxiosError<RenderErrorResponseDTO>): void => {
-		try {
-			ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		} catch (apiError) {
-			showErrorModal(apiError as APIError);
-		}
-	};
 	const samlEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.SSO)?.active || false;
 
-	const {
-		mutate: createAuthDomain,
-		isLoading: isCreating,
-	} = useCreateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
-
-	const {
-		mutate: updateAuthDomain,
-		isLoading: isUpdating,
-	} = useUpdateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
-
-	/**
-	 * Prepares Google Auth config for API payload
-	 */
-	const getGoogleAuthConfig = (): AuthtypesGoogleConfigDTO | undefined => {
-		const config = form.getFieldValue('googleAuthConfig');
-		if (!config) {
-			return undefined;
-		}
-
-		const { domainToAdminEmailList, ...rest } = config;
-		const domainToAdminEmail = convertDomainMappingsToRecord(
-			domainToAdminEmailList,
-		);
-
-		return {
-			...rest,
-			...(domainToAdminEmail && { domainToAdminEmail }),
-		};
-	};
-
-	/**
-	 * Prepares role mapping for API payload
-	 */
-	const getRoleMapping = (): AuthtypesRoleMappingDTO | undefined => {
-		const roleMapping = form.getFieldValue('roleMapping');
-		if (!roleMapping) {
-			return undefined;
-		}
-
-		const { groupMappingsList, ...rest } = roleMapping;
-		const groupMappings = convertGroupMappingsToRecord(groupMappingsList);
-
-		// Only return roleMapping if there's meaningful content
-		const hasDefaultRole = rest.defaultRole && rest.defaultRole !== 'VIEWER';
-		const hasUseRoleAttribute = rest.useRoleAttribute === true;
-		const hasGroupMappings =
-			groupMappings && Object.keys(groupMappings).length > 0;
-
-		if (!hasDefaultRole && !hasUseRoleAttribute && !hasGroupMappings) {
-			return undefined;
-		}
-
-		return {
-			...rest,
-			...(groupMappings && { groupMappings }),
-		};
-	};
-
 	const onSubmitHandler = async (): Promise<void> => {
-		try {
-			await form.validateFields();
-		} catch {
-			return;
-		}
-
 		const name = form.getFieldValue('name');
-		const googleAuthConfig = getGoogleAuthConfig();
+		const googleAuthConfig = form.getFieldValue('googleAuthConfig');
 		const samlConfig = form.getFieldValue('samlConfig');
 		const oidcConfig = form.getFieldValue('oidcConfig');
-		const roleMapping = getRoleMapping();
 
-		if (isCreate) {
-			createAuthDomain(
-				{
-					data: {
-						name,
-						config: {
-							ssoEnabled: true,
-							ssoType: authnProvider,
-							googleAuthConfig,
-							samlConfig,
-							oidcConfig,
-							roleMapping,
-						},
+		try {
+			if (isCreate) {
+				await post({
+					name,
+					config: {
+						ssoEnabled: true,
+						ssoType: authnProvider,
+						googleAuthConfig,
+						samlConfig,
+						oidcConfig,
 					},
-				},
-				{
-					onSuccess: () => {
-						notifications.success({
-							message: 'Domain created successfully',
-						});
-						onClose();
+				});
+			} else {
+				await put({
+					id: record?.id || '',
+					config: {
+						ssoEnabled: form.getFieldValue('ssoEnabled'),
+						ssoType: authnProvider,
+						googleAuthConfig,
+						samlConfig,
+						oidcConfig,
 					},
-					onError: handleError,
-				},
-			);
-		} else {
-			if (!record?.id) {
-				return;
+				});
 			}
 
-			updateAuthDomain(
-				{
-					pathParams: { id: record.id },
-					data: {
-						config: {
-							ssoEnabled: form.getFieldValue('ssoEnabled'),
-							ssoType: authnProvider,
-							googleAuthConfig,
-							samlConfig,
-							oidcConfig,
-							roleMapping,
-						},
-					},
-				},
-				{
-					onSuccess: () => {
-						notifications.success({
-							message: 'Domain updated successfully',
-						});
-						onClose();
-					},
-					onError: handleError,
-				},
-			);
+			onClose();
+		} catch (error) {
+			showErrorModal(error as APIError);
 		}
 	};
 
 	const onBackHandler = (): void => {
-		form.resetFields();
 		setAuthnProvider('');
 	};
 
 	return (
-		<Modal
-			open
-			footer={null}
-			onCancel={onClose}
-			width={authnProvider ? 980 : undefined}
-		>
+		<Modal open footer={null} onCancel={onClose}>
 			<Form
 				name="auth-domain"
-				initialValues={defaultTo(prepareInitialValues(record), {
+				initialValues={defaultTo(record, {
 					name: '',
 					ssoEnabled: false,
 					ssoType: '',
@@ -362,11 +116,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 						<section className="action-buttons">
 							{isCreate && <Button onClick={onBackHandler}>Back</Button>}
 							{!isCreate && <Button onClick={onClose}>Cancel</Button>}
-							<Button
-								onClick={onSubmitHandler}
-								type="primary"
-								loading={isCreating || isUpdating}
-							>
+							<Button onClick={onSubmitHandler} type="primary">
 								Save Changes
 							</Button>
 						</section>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -1,48 +1,20 @@
-import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox } from '@signozhq/checkbox';
-import { Input } from '@signozhq/input';
-import { Collapse, Form, Tooltip } from 'antd';
-import TextArea from 'antd/lib/input/TextArea';
-import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
-
-import DomainMappingList from './components/DomainMappingList';
-import EmailTagInput from './components/EmailTagInput';
-import RoleMappingSection from './components/RoleMappingSection';
+import { Form, Input, Typography } from 'antd';
 
 import './Providers.styles.scss';
 
-type ExpandedSection = 'workspace-groups' | 'role-mapping' | null;
-
 function ConfigureGoogleAuthAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
-	const form = Form.useFormInstance();
-	const fetchGroups = Form.useWatch(['googleAuthConfig', 'fetchGroups'], form);
-
-	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
-
-	const handleWorkspaceGroupsChange = useCallback(
-		(keys: string | string[]): void => {
-			const isExpanding = Array.isArray(keys) ? keys.length > 0 : !!keys;
-			setExpandedSection(isExpanding ? 'workspace-groups' : null);
-		},
-		[],
-	);
-
-	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
-		setExpandedSection(expanded ? 'role-mapping' : null);
-	}, []);
-
 	return (
 		<div className="google-auth">
-			<section className="google-auth__header">
-				<h3 className="google-auth__title typography-label-medium-600">
+			<section className="header">
+				<Typography.Text className="title">
 					Edit Google Authentication
-				</h3>
-				<p className="google-auth__description typography-paragraph-base-400">
+				</Typography.Text>
+				<Typography.Paragraph className="description">
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
@@ -53,243 +25,50 @@ function ConfigureGoogleAuthAuthnProvider({
 						docs
 					</a>{' '}
 					for more information.
-				</p>
+				</Typography.Paragraph>
 			</section>
 
-			<div className="google-auth__columns">
-				{/* Left Column - Core OAuth Settings */}
-				<div className="google-auth__left">
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="google-domain"
-						>
-							Domain
-							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name="name"
-							className="google-auth__form-item"
-							rules={[
-								{ required: true, message: 'Domain is required', whitespace: true },
-							]}
-						>
-							<Input id="google-domain" disabled={!isCreate} />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Domain"
+				name="name"
+				className="field"
+				tooltip={{
+					title:
+						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
+				}}
+			>
+				<Input disabled={!isCreate} />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="google-client-id"
-						>
-							Client ID
-							<Tooltip title="ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['googleAuthConfig', 'clientId']}
-							className="google-auth__form-item"
-							rules={[
-								{ required: true, message: 'Client ID is required', whitespace: true },
-							]}
-						>
-							<Input id="google-client-id" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Client ID"
+				name={['googleAuthConfig', 'clientId']}
+				className="field"
+				tooltip={{
+					title: `ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="google-client-secret"
-						>
-							Client Secret
-							<Tooltip title="It is the application's secret.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['googleAuthConfig', 'clientSecret']}
-							className="google-auth__form-item"
-							rules={[
-								{
-									required: true,
-									message: 'Client Secret is required',
-									whitespace: true,
-								},
-							]}
-						>
-							<Input id="google-client-secret" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Client Secret"
+				name={['googleAuthConfig', 'clientSecret']}
+				className="field"
+				tooltip={{
+					title: `It is the application's secret.`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__checkbox-row">
-						<Form.Item
-							name={['googleAuthConfig', 'insecureSkipEmailVerified']}
-							valuePropName="checked"
-							noStyle
-						>
-							<Checkbox
-								id="google-skip-email-verification"
-								labelName="Skip Email Verification"
-								onCheckedChange={(checked: boolean): void => {
-									form.setFieldValue(
-										['googleAuthConfig', 'insecureSkipEmailVerified'],
-										checked,
-									);
-								}}
-							/>
-						</Form.Item>
-						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
-							<CircleHelp size={14} className="google-auth__label-icon" />
-						</Tooltip>
-					</div>
-
-					<Callout
-						type="warning"
-						size="small"
-						showIcon
-						description="Google OAuth2 won't be enabled unless you enter all the attributes above"
-						className="callout"
-					/>
-				</div>
-
-				{/* Right Column - Google Workspace Groups (Advanced) */}
-				<div className="google-auth__right">
-					<Collapse
-						bordered={false}
-						activeKey={
-							expandedSection === 'workspace-groups' ? ['workspace-groups'] : []
-						}
-						onChange={handleWorkspaceGroupsChange}
-						className="google-auth__collapse"
-						expandIcon={(): null => null}
-					>
-						<Collapse.Panel
-							key="workspace-groups"
-							header={
-								<div className="google-auth__collapse-header">
-									{expandedSection !== 'workspace-groups' ? (
-										<ChevronRight size={16} />
-									) : (
-										<ChevronDown size={16} />
-									)}
-									<div className="google-auth__collapse-header-text">
-										<h4 className="google-auth__section-title typography-label-base-600">
-											Google Workspace Groups (Advanced)
-										</h4>
-										<p className="google-auth__section-description typography-paragraph-small-400">
-											Enable group fetching to retrieve user groups from Google Workspace.
-											Requires a Service Account with domain-wide delegation.
-										</p>
-									</div>
-								</div>
-							}
-						>
-							<div className="google-auth__group-content">
-								<div className="google-auth__checkbox-row">
-									<Form.Item
-										name={['googleAuthConfig', 'fetchGroups']}
-										valuePropName="checked"
-										noStyle
-									>
-										<Checkbox
-											id="google-fetch-groups"
-											labelName="Fetch Groups"
-											onCheckedChange={(checked: boolean): void => {
-												form.setFieldValue(['googleAuthConfig', 'fetchGroups'], checked);
-											}}
-										/>
-									</Form.Item>
-									<Tooltip title="Enable fetching Google Workspace groups for the user. Requires service account configuration.">
-										<CircleHelp size={14} className="google-auth__label-icon" />
-									</Tooltip>
-								</div>
-
-								{fetchGroups && (
-									<div className="google-auth__group-fields">
-										<div className="google-auth__field-group">
-											<label
-												className="google-auth__label typography-label-base-500"
-												htmlFor="google-service-account-json"
-											>
-												Service Account JSON
-												<Tooltip title="The JSON content of the Google Service Account credentials file. Required for group fetching.">
-													<CircleHelp size={14} className="google-auth__label-icon" />
-												</Tooltip>
-											</label>
-											<Form.Item
-												name={['googleAuthConfig', 'serviceAccountJson']}
-												className="google-auth__form-item"
-											>
-												<TextArea
-													id="google-service-account-json"
-													rows={3}
-													placeholder="Paste service account JSON"
-													className="google-auth__textarea"
-												/>
-											</Form.Item>
-										</div>
-
-										<DomainMappingList
-											fieldNamePrefix={['googleAuthConfig', 'domainToAdminEmailList']}
-										/>
-
-										<div className="google-auth__checkbox-row">
-											<Form.Item
-												name={['googleAuthConfig', 'fetchTransitiveGroupMembership']}
-												valuePropName="checked"
-												noStyle
-											>
-												<Checkbox
-													id="google-transitive-membership"
-													labelName="Fetch Transitive Group Membership"
-													onCheckedChange={(checked: boolean): void => {
-														form.setFieldValue(
-															['googleAuthConfig', 'fetchTransitiveGroupMembership'],
-															checked,
-														);
-													}}
-												/>
-											</Form.Item>
-											<Tooltip title="If enabled, recursively fetch groups that contain other groups (transitive membership).">
-												<CircleHelp size={14} className="google-auth__label-icon" />
-											</Tooltip>
-										</div>
-
-										<div className="google-auth__field-group">
-											<label
-												className="google-auth__label typography-label-base-500"
-												htmlFor="google-allowed-groups"
-											>
-												Allowed Groups
-												<Tooltip title="Optional list of allowed groups. If configured, only users belonging to one of these groups will be allowed to login.">
-													<CircleHelp size={14} className="google-auth__label-icon" />
-												</Tooltip>
-											</label>
-											<Form.Item
-												name={['googleAuthConfig', 'allowedGroups']}
-												className="google-auth__form-item"
-											>
-												<EmailTagInput placeholder="Type a group email and press Enter" />
-											</Form.Item>
-										</div>
-									</div>
-								)}
-							</div>
-						</Collapse.Panel>
-					</Collapse>
-
-					<RoleMappingSection
-						fieldNamePrefix={['roleMapping']}
-						isExpanded={expandedSection === 'role-mapping'}
-						onExpandChange={handleRoleMappingChange}
-					/>
-				</div>
-			</div>
+			<Callout
+				type="warning"
+				size="small"
+				showIcon
+				description="Google OAuth2 won’t be enabled unless you enter all the attributes above"
+				className="callout"
+			/>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -1,228 +1,110 @@
-import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox } from '@signozhq/checkbox';
-import { Input } from '@signozhq/input';
-import { Form, Tooltip } from 'antd';
-import { CircleHelp } from 'lucide-react';
-
-import ClaimMappingSection from './components/ClaimMappingSection';
-import RoleMappingSection from './components/RoleMappingSection';
+import { Checkbox, Form, Input, Typography } from 'antd';
 
 import './Providers.styles.scss';
 
-type ExpandedSection = 'claim-mapping' | 'role-mapping' | null;
-
 function ConfigureOIDCAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
-	const form = Form.useFormInstance();
-
-	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
-
-	const handleClaimMappingChange = useCallback((expanded: boolean): void => {
-		setExpandedSection(expanded ? 'claim-mapping' : null);
-	}, []);
-
-	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
-		setExpandedSection(expanded ? 'role-mapping' : null);
-	}, []);
-
 	return (
-		<div className="google-auth">
-			<section className="google-auth__header">
-				<h3 className="google-auth__title typography-label-medium-600">
+		<div className="saml">
+			<section className="header">
+				<Typography.Text className="title">
 					Edit OIDC Authentication
-				</h3>
-				<p className="google-auth__description typography-paragraph-base-400">
-					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
-					the{' '}
-					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
-						target="_blank"
-						rel="noreferrer"
-					>
-						docs
-					</a>{' '}
-					for more information.
-				</p>
+				</Typography.Text>
 			</section>
 
-			<div className="google-auth__columns">
-				{/* Left Column - Core OIDC Settings */}
-				<div className="google-auth__left">
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="oidc-domain"
-						>
-							Domain
-							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name="name"
-							className="google-auth__form-item"
-							rules={[
-								{ required: true, message: 'Domain is required', whitespace: true },
-							]}
-						>
-							<Input id="oidc-domain" disabled={!isCreate} />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Domain"
+				name="name"
+				tooltip={{
+					title:
+						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
+				}}
+			>
+				<Input disabled={!isCreate} />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="oidc-issuer"
-						>
-							Issuer URL
-							<Tooltip title='The URL identifier for the OIDC provider. For example: "https://accounts.google.com" or "https://login.salesforce.com".'>
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['oidcConfig', 'issuer']}
-							className="google-auth__form-item"
-							rules={[
-								{ required: true, message: 'Issuer URL is required', whitespace: true },
-							]}
-						>
-							<Input id="oidc-issuer" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Issuer URL"
+				name={['oidcConfig', 'issuer']}
+				tooltip={{
+					title: `It is the URL identifier for the service. For example: "https://accounts.google.com" or "https://login.salesforce.com".`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="oidc-issuer-alias"
-						>
-							Issuer Alias
-							<Tooltip title="Optional: Override the issuer URL from .well-known/openid-configuration for providers like Azure or Oracle IDCS.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['oidcConfig', 'issuerAlias']}
-							className="google-auth__form-item"
-						>
-							<Input id="oidc-issuer-alias" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Issuer Alias"
+				name={['oidcConfig', 'issuerAlias']}
+				tooltip={{
+					title: `Some offspec providers like Azure, Oracle IDCS have oidc discovery url different from issuer url which causes issuerValidation to fail.
+					This provides a way to override the Issuer url from the .well-known/openid-configuration issuer`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="oidc-client-id"
-						>
-							Client ID
-							<Tooltip title="The application's client ID from your OIDC provider.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['oidcConfig', 'clientId']}
-							className="google-auth__form-item"
-							rules={[
-								{ required: true, message: 'Client ID is required', whitespace: true },
-							]}
-						>
-							<Input id="oidc-client-id" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Client ID"
+				name={['oidcConfig', 'clientId']}
+				tooltip={{ title: `It is the application's ID.` }}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="oidc-client-secret"
-						>
-							Client Secret
-							<Tooltip title="The application's client secret from your OIDC provider.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['oidcConfig', 'clientSecret']}
-							className="google-auth__form-item"
-							rules={[
-								{
-									required: true,
-									message: 'Client Secret is required',
-									whitespace: true,
-								},
-							]}
-						>
-							<Input id="oidc-client-secret" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Client Secret"
+				name={['oidcConfig', 'clientSecret']}
+				tooltip={{ title: `It is the application's secret.` }}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__checkbox-row">
-						<Form.Item
-							name={['oidcConfig', 'insecureSkipEmailVerified']}
-							valuePropName="checked"
-							noStyle
-						>
-							<Checkbox
-								id="oidc-skip-email-verification"
-								labelName="Skip Email Verification"
-								onCheckedChange={(checked: boolean): void => {
-									form.setFieldValue(
-										['oidcConfig', 'insecureSkipEmailVerified'],
-										checked,
-									);
-								}}
-							/>
-						</Form.Item>
-						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
-							<CircleHelp size={14} className="google-auth__label-icon" />
-						</Tooltip>
-					</div>
+			<Form.Item
+				label="Email Claim Mapping"
+				name={['oidcConfig', 'claimMapping', 'email']}
+				tooltip={{
+					title: `Mapping of email claims to the corresponding email field in the token.`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__checkbox-row">
-						<Form.Item
-							name={['oidcConfig', 'getUserInfo']}
-							valuePropName="checked"
-							noStyle
-						>
-							<Checkbox
-								id="oidc-get-user-info"
-								labelName="Get User Info"
-								onCheckedChange={(checked: boolean): void => {
-									form.setFieldValue(['oidcConfig', 'getUserInfo'], checked);
-								}}
-							/>
-						</Form.Item>
-						<Tooltip title="Use the userinfo endpoint to get additional claims. Useful when providers return thin ID tokens.">
-							<CircleHelp size={14} className="google-auth__label-icon" />
-						</Tooltip>
-					</div>
+			<Form.Item
+				label="Skip Email Verification"
+				name={['oidcConfig', 'insecureSkipEmailVerified']}
+				valuePropName="checked"
+				className="field"
+				tooltip={{
+					title: `Whether to skip email verification. Defaults to "false"`,
+				}}
+			>
+				<Checkbox />
+			</Form.Item>
 
-					<Callout
-						type="warning"
-						size="small"
-						showIcon
-						description="OIDC won't be enabled unless you enter all the attributes above"
-						className="callout"
-					/>
-				</div>
+			<Form.Item
+				label="Get User Info"
+				name={['oidcConfig', 'getUserInfo']}
+				valuePropName="checked"
+				className="field"
+				tooltip={{
+					title: `Uses the userinfo endpoint to get additional claims for the token. This is especially useful where upstreams return "thin" id tokens`,
+				}}
+			>
+				<Checkbox />
+			</Form.Item>
 
-				{/* Right Column - Advanced Settings */}
-				<div className="google-auth__right">
-					<ClaimMappingSection
-						fieldNamePrefix={['oidcConfig', 'claimMapping']}
-						isExpanded={expandedSection === 'claim-mapping'}
-						onExpandChange={handleClaimMappingChange}
-					/>
-
-					<RoleMappingSection
-						fieldNamePrefix={['roleMapping']}
-						isExpanded={expandedSection === 'role-mapping'}
-						onExpandChange={handleRoleMappingChange}
-					/>
-				</div>
-			</div>
+			<Callout
+				type="warning"
+				size="small"
+				showIcon
+				description="OIDC won’t be enabled unless you enter all the attributes above"
+				className="callout"
+			/>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -1,204 +1,82 @@
-import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox } from '@signozhq/checkbox';
-import { Input } from '@signozhq/input';
-import { Form, Tooltip } from 'antd';
-import TextArea from 'antd/lib/input/TextArea';
-import { CircleHelp } from 'lucide-react';
-
-import AttributeMappingSection from './components/AttributeMappingSection';
-import RoleMappingSection from './components/RoleMappingSection';
+import { Checkbox, Form, Input, Typography } from 'antd';
 
 import './Providers.styles.scss';
 
-type ExpandedSection = 'attribute-mapping' | 'role-mapping' | null;
-
 function ConfigureSAMLAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
-	const form = Form.useFormInstance();
-
-	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
-
-	const handleAttributeMappingChange = useCallback((expanded: boolean): void => {
-		setExpandedSection(expanded ? 'attribute-mapping' : null);
-	}, []);
-
-	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
-		setExpandedSection(expanded ? 'role-mapping' : null);
-	}, []);
-
 	return (
-		<div className="google-auth">
-			<section className="google-auth__header">
-				<h3 className="google-auth__title typography-label-medium-600">
+		<div className="saml">
+			<section className="header">
+				<Typography.Text className="title">
 					Edit SAML Authentication
-				</h3>
-				<p className="google-auth__description typography-paragraph-base-400">
-					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
-					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
-						target="_blank"
-						rel="noreferrer"
-					>
-						docs
-					</a>{' '}
-					for more information.
-				</p>
+				</Typography.Text>
 			</section>
 
-			<div className="google-auth__columns">
-				{/* Left Column - Core SAML Settings */}
-				<div className="google-auth__left">
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="saml-domain"
-						>
-							Domain
-							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name="name"
-							className="google-auth__form-item"
-							rules={[
-								{ required: true, message: 'Domain is required', whitespace: true },
-							]}
-						>
-							<Input id="saml-domain" disabled={!isCreate} />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="Domain"
+				name="name"
+				tooltip={{
+					title:
+						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
+				}}
+			>
+				<Input disabled={!isCreate} />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="saml-acs-url"
-						>
-							SAML ACS URL
-							<Tooltip title="The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['samlConfig', 'samlIdp']}
-							className="google-auth__form-item"
-							rules={[
-								{
-									required: true,
-									message: 'SAML ACS URL is required',
-									whitespace: true,
-								},
-							]}
-						>
-							<Input id="saml-acs-url" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="SAML ACS URL"
+				name={['samlConfig', 'samlIdp']}
+				tooltip={{
+					title: `The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider. Example: <md:SingleSignOnService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST" Location="{samlIdp}"/>`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="saml-entity-id"
-						>
-							SAML Entity ID
-							<Tooltip title="The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['samlConfig', 'samlEntity']}
-							className="google-auth__form-item"
-							rules={[
-								{
-									required: true,
-									message: 'SAML Entity ID is required',
-									whitespace: true,
-								},
-							]}
-						>
-							<Input id="saml-entity-id" />
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="SAML Entity ID"
+				name={['samlConfig', 'samlEntity']}
+				tooltip={{
+					title: `The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata of the identity provider. Example: <md:EntityDescriptor xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata" entityID="{samlEntity}">`,
+				}}
+			>
+				<Input />
+			</Form.Item>
 
-					<div className="google-auth__field-group">
-						<label
-							className="google-auth__label typography-label-base-500"
-							htmlFor="saml-certificate"
-						>
-							SAML X.509 Certificate
-							<Tooltip title="The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata.">
-								<CircleHelp size={14} className="google-auth__label-icon" />
-							</Tooltip>
-						</label>
-						<Form.Item
-							name={['samlConfig', 'samlCert']}
-							className="google-auth__form-item"
-							rules={[
-								{
-									required: true,
-									message: 'SAML Certificate is required',
-									whitespace: true,
-								},
-							]}
-						>
-							<TextArea
-								id="saml-certificate"
-								rows={3}
-								placeholder="Paste X.509 certificate"
-								className="google-auth__textarea"
-							/>
-						</Form.Item>
-					</div>
+			<Form.Item
+				label="SAML X.509 Certificate"
+				name={['samlConfig', 'samlCert']}
+				tooltip={{
+					title: `The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata of the identity provider. Example: <ds:X509Certificate><ds:X509Certificate>{samlCert}</ds:X509Certificate></ds:X509Certificate>`,
+				}}
+			>
+				<Input.TextArea rows={4} />
+			</Form.Item>
 
-					<div className="google-auth__checkbox-row">
-						<Form.Item
-							name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
-							valuePropName="checked"
-							noStyle
-						>
-							<Checkbox
-								id="saml-skip-signing"
-								labelName="Skip Signing AuthN Requests"
-								onCheckedChange={(checked: boolean): void => {
-									form.setFieldValue(
-										['samlConfig', 'insecureSkipAuthNRequestsSigned'],
-										checked,
-									);
-								}}
-							/>
-						</Form.Item>
-						<Tooltip title="Whether to skip signing the SAML requests. For providers like JumpCloud, this should be enabled.">
-							<CircleHelp size={14} className="google-auth__label-icon" />
-						</Tooltip>
-					</div>
+			<Form.Item
+				label="Skip Signing AuthN Requests"
+				name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
+				valuePropName="checked"
+				className="field"
+				tooltip={{
+					title: `Whether to skip signing the SAML requests. It can typically be found in the WantAuthnRequestsSigned attribute of the IDPSSODescriptor element in the SAML metadata of the identity provider. Example: <md:IDPSSODescriptor WantAuthnRequestsSigned="false" protocolSupportEnumeration="urn:oasis:names:tc:SAML:2.0:protocol">
+					For providers like jumpcloud, this should be set to true.Note: This is the reverse of WantAuthnRequestsSigned. If WantAuthnRequestsSigned is false, then InsecureSkipAuthNRequestsSigned should be true.`,
+				}}
+			>
+				<Checkbox />
+			</Form.Item>
 
-					<Callout
-						type="warning"
-						size="small"
-						showIcon
-						description="SAML won't be enabled unless you enter all the attributes above"
-						className="callout"
-					/>
-				</div>
-
-				{/* Right Column - Advanced Settings */}
-				<div className="google-auth__right">
-					<AttributeMappingSection
-						fieldNamePrefix={['samlConfig', 'attributeMapping']}
-						isExpanded={expandedSection === 'attribute-mapping'}
-						onExpandChange={handleAttributeMappingChange}
-					/>
-
-					<RoleMappingSection
-						fieldNamePrefix={['roleMapping']}
-						isExpanded={expandedSection === 'role-mapping'}
-						onExpandChange={handleRoleMappingChange}
-					/>
-				</div>
-			</div>
+			<Callout
+				type="warning"
+				size="small"
+				showIcon
+				description="SAML won’t be enabled unless you enter all the attributes above"
+				className="callout"
+			/>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss

@@ -2,248 +2,23 @@
 	display: flex;
 	flex-direction: column;
 
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		margin-bottom: 16px;
+	.ant-form-item {
+		margin-bottom: 12px !important;
 	}
 
-	&__title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__description {
-		margin: 0;
-		color: var(--l2-foreground);
-
-		a {
-			color: var(--accent-primary);
-			text-decoration: none;
-
-			&:hover {
-				text-decoration: underline;
-			}
-		}
-	}
-
-	&__columns {
-		display: grid;
-		grid-template-columns: 0.9fr 1fr;
-		gap: 24px;
-	}
-
-	&__left {
-		display: flex;
-		flex-direction: column;
-	}
-
-	&__right {
-		border-left: 1px solid var(--l3-border);
-		padding-left: 24px;
-		display: flex;
-		flex-direction: column;
-	}
-
-	// --- Form field layout ---
-	&__field-group {
+	.header {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
 		margin-bottom: 12px;
-	}
 
-	&__label {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		color: var(--l1-foreground);
-	}
-
-	&__label-icon {
-		color: var(--l3-foreground);
-		cursor: help;
-		flex-shrink: 0;
-	}
-
-	&__form-item {
-		margin-bottom: 0 !important;
-	}
-
-	// --- Checkbox row: label on left, checkbox on right ---
-	&__checkbox-row {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		margin-bottom: 12px;
-	}
-
-	// --- Input styles (matching auth flow standards) ---
-	input,
-	textarea {
-		height: 32px;
-		background: var(--l3-background) !important;
-		border: 1px solid var(--l3-border) !important;
-		border-radius: 2px;
-		color: var(--l1-foreground) !important;
-
-		&::placeholder {
-			color: var(--l3-foreground) !important;
-			opacity: 1;
+		.title {
+			font-weight: bold;
 		}
 
-		&:hover {
-			border-color: var(--l3-border) !important;
+		.description {
+			margin-bottom: 0px !important;
 		}
-
-		&:focus,
-		&:focus-visible {
-			border-color: var(--bg-robin-500) !important;
-			box-shadow: none !important;
-			outline: none;
-		}
-	}
-
-	// Textarea should not have fixed height
-	textarea {
-		height: auto;
-	}
-
-	// --- Textarea specific styles ---
-	&__textarea {
-		min-height: 60px !important;
-		max-height: 200px;
-		resize: vertical;
-		background: var(--l3-background) !important;
-		border: 1px solid var(--l3-border) !important;
-		border-radius: 2px;
-		color: var(--l1-foreground) !important;
-		font-family: 'SF Mono', monospace;
-		font-size: 12px;
-		line-height: 18px;
-
-		&::placeholder {
-			color: var(--l3-foreground) !important;
-			font-family: Inter, sans-serif;
-		}
-
-		&:hover {
-			border-color: var(--l3-border) !important;
-		}
-
-		&:focus,
-		&:focus-visible {
-			border-color: var(--bg-robin-500) !important;
-			box-shadow: none !important;
-			outline: none;
-		}
-	}
-
-	// --- Checkbox border visibility (lighter for dark modal bg) ---
-	button[role='checkbox'] {
-		border: 1px solid var(--l2-foreground) !important;
-		border-radius: 2px;
-
-		&[data-state='checked'] {
-			background-color: var(--bg-robin-500) !important;
-			border-color: var(--bg-robin-500) !important;
-		}
-	}
-
-	// --- Collapsible section ---
-	&__collapse {
-		background: transparent !important;
-
-		.ant-collapse-item {
-			border: none !important;
-		}
-
-		.ant-collapse-header {
-			padding: 0 !important;
-		}
-
-		.ant-collapse-content {
-			border-top: none !important;
-			background: transparent !important;
-		}
-
-		.ant-collapse-content-box {
-			padding: 12px 0 0 24px !important;
-		}
-	}
-
-	&__collapse-header {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		cursor: pointer;
-
-		svg {
-			margin-top: 2px;
-			color: var(--l3-foreground);
-			flex-shrink: 0;
-		}
-	}
-
-	&__collapse-header-text {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__section-title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__section-description {
-		margin: 0;
-		color: var(--l3-foreground);
-	}
-
-	// --- Group fields that scroll when "Fetch Groups" is on ---
-	&__group-content {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-
-	&__group-fields {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-		max-height: 45vh;
-		overflow-y: auto;
-		padding-right: 4px;
-
-		// Remove bottom margins from children since we rely on gap
-		.google-auth__field-group,
-		.google-auth__checkbox-row {
-			margin-bottom: 0;
-		}
-
-		// Thin scrollbar
-		&::-webkit-scrollbar {
-			width: 4px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--l3-foreground);
-			border-radius: 4px;
-
-			&:hover {
-				background: var(--l2-foreground);
-			}
-		}
-
-		// Firefox thin scrollbar
-		scrollbar-width: thin;
-		scrollbar-color: var(--l3-foreground) transparent;
 	}
 
 	.callout {
@@ -251,37 +26,6 @@
 	}
 }
 
-// --- Light mode overrides ---
-.lightMode {
-	.google-auth {
-		input,
-		textarea {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-			color: var(--text-ink-500) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-
-			&:focus,
-			&:focus-visible {
-				border-color: var(--bg-robin-500) !important;
-			}
-		}
-
-		&__textarea {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-			color: var(--text-ink-500) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-		}
-	}
-}
-
 .saml {
 	display: flex;
 	flex-direction: column;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.styles.scss

@@ -1,151 +0,0 @@
-.attribute-mapping-section {
-	display: flex;
-	flex-direction: column;
-
-	// --- Collapsible section ---
-	&__collapse {
-		background: transparent !important;
-
-		.ant-collapse-item {
-			border: none !important;
-		}
-
-		.ant-collapse-header {
-			padding: 0 !important;
-		}
-
-		.ant-collapse-content {
-			border-top: none !important;
-			background: transparent !important;
-		}
-
-		.ant-collapse-content-box {
-			padding: 12px 0 0 24px !important;
-		}
-	}
-
-	&__collapse-header {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		cursor: pointer;
-
-		svg {
-			margin-top: 2px;
-			color: var(--l3-foreground);
-			flex-shrink: 0;
-		}
-	}
-
-	&__collapse-header-text {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__section-title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__section-description {
-		margin: 0;
-		color: var(--l3-foreground);
-	}
-
-	// --- Content area with scroll ---
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		max-height: 45vh;
-		overflow-y: auto;
-		padding-right: 4px;
-
-		// Thin scrollbar
-		&::-webkit-scrollbar {
-			width: 4px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--l3-foreground);
-			border-radius: 4px;
-
-			&:hover {
-				background: var(--l2-foreground);
-			}
-		}
-
-		// Firefox thin scrollbar
-		scrollbar-width: thin;
-		scrollbar-color: var(--l3-foreground) transparent;
-	}
-
-	// --- Field group layout ---
-	&__field-group {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__label {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		color: var(--l1-foreground);
-	}
-
-	&__label-icon {
-		color: var(--l3-foreground);
-		cursor: help;
-		flex-shrink: 0;
-	}
-
-	&__form-item {
-		margin-bottom: 0 !important;
-	}
-
-	// --- Input styles ---
-	input {
-		height: 32px;
-		background: var(--l3-background) !important;
-		border: 1px solid var(--l3-border) !important;
-		border-radius: 2px;
-		color: var(--l1-foreground) !important;
-
-		&::placeholder {
-			color: var(--l3-foreground) !important;
-			opacity: 1;
-		}
-
-		&:hover {
-			border-color: var(--l3-border) !important;
-		}
-
-		&:focus,
-		&:focus-visible {
-			border-color: var(--bg-robin-500) !important;
-			box-shadow: none !important;
-			outline: none;
-		}
-	}
-}
-
-// --- Light mode overrides ---
-.lightMode {
-	.attribute-mapping-section {
-		input {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-			color: var(--text-ink-500) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-		}
-	}
-}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.tsx

@@ -1,141 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Input } from '@signozhq/input';
-import { Collapse, Form, Tooltip } from 'antd';
-import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
-
-import './AttributeMappingSection.styles.scss';
-
-interface AttributeMappingSectionProps {
-	/** The form field name prefix for the attribute mapping configuration */
-	fieldNamePrefix: string[];
-	/** Whether the section is expanded (controlled mode) */
-	isExpanded?: boolean;
-	/** Callback when expand/collapse is toggled */
-	onExpandChange?: (expanded: boolean) => void;
-}
-
-function AttributeMappingSection({
-	fieldNamePrefix,
-	isExpanded,
-	onExpandChange,
-}: AttributeMappingSectionProps): JSX.Element {
-	// Support both controlled and uncontrolled modes
-	const [internalExpanded, setInternalExpanded] = useState(false);
-	const isControlled = isExpanded !== undefined;
-	const expanded = isControlled ? isExpanded : internalExpanded;
-
-	const handleCollapseChange = useCallback(
-		(keys: string | string[]): void => {
-			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
-			if (isControlled && onExpandChange) {
-				onExpandChange(newExpanded);
-			} else {
-				setInternalExpanded(newExpanded);
-			}
-		},
-		[isControlled, onExpandChange],
-	);
-
-	const collapseActiveKey = expanded ? ['attribute-mapping'] : [];
-
-	return (
-		<div className="attribute-mapping-section">
-			<Collapse
-				bordered={false}
-				activeKey={collapseActiveKey}
-				onChange={handleCollapseChange}
-				className="attribute-mapping-section__collapse"
-				expandIcon={(): null => null}
-			>
-				<Collapse.Panel
-					key="attribute-mapping"
-					header={
-						<div className="attribute-mapping-section__collapse-header">
-							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
-							<div className="attribute-mapping-section__collapse-header-text">
-								<h4 className="attribute-mapping-section__section-title typography-label-base-600">
-									Attribute Mapping (Advanced)
-								</h4>
-								<p className="attribute-mapping-section__section-description typography-paragraph-small-400">
-									Configure how SAML assertion attributes from your Identity Provider map
-									to SigNoz user attributes. Leave empty to use default values. Note:
-									Email is always extracted from the NameID assertion.
-								</p>
-							</div>
-						</div>
-					}
-				>
-					<div className="attribute-mapping-section__content">
-						{/* Name Attribute */}
-						<div className="attribute-mapping-section__field-group">
-							<label
-								className="attribute-mapping-section__label typography-label-base-500"
-								htmlFor="name-attribute"
-							>
-								Name Attribute
-								<Tooltip title="The SAML attribute key that contains the user's display name. Default: 'name'">
-									<CircleHelp
-										size={14}
-										className="attribute-mapping-section__label-icon"
-									/>
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'name']}
-								className="attribute-mapping-section__form-item"
-							>
-								<Input id="name-attribute" placeholder="name" />
-							</Form.Item>
-						</div>
-
-						{/* Groups Attribute */}
-						<div className="attribute-mapping-section__field-group">
-							<label
-								className="attribute-mapping-section__label typography-label-base-500"
-								htmlFor="groups-attribute"
-							>
-								Groups Attribute
-								<Tooltip title="The SAML attribute key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
-									<CircleHelp
-										size={14}
-										className="attribute-mapping-section__label-icon"
-									/>
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'groups']}
-								className="attribute-mapping-section__form-item"
-							>
-								<Input id="groups-attribute" placeholder="groups" />
-							</Form.Item>
-						</div>
-
-						{/* Role Attribute */}
-						<div className="attribute-mapping-section__field-group">
-							<label
-								className="attribute-mapping-section__label typography-label-base-500"
-								htmlFor="role-attribute"
-							>
-								Role Attribute
-								<Tooltip title="The SAML attribute key that contains the user's role directly from the IDP. Default: 'role'">
-									<CircleHelp
-										size={14}
-										className="attribute-mapping-section__label-icon"
-									/>
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'role']}
-								className="attribute-mapping-section__form-item"
-							>
-								<Input id="role-attribute" placeholder="role" />
-							</Form.Item>
-						</div>
-					</div>
-				</Collapse.Panel>
-			</Collapse>
-		</div>
-	);
-}
-
-export default AttributeMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.styles.scss

@@ -1,151 +0,0 @@
-.claim-mapping-section {
-	display: flex;
-	flex-direction: column;
-
-	// --- Collapsible section ---
-	&__collapse {
-		background: transparent !important;
-
-		.ant-collapse-item {
-			border: none !important;
-		}
-
-		.ant-collapse-header {
-			padding: 0 !important;
-		}
-
-		.ant-collapse-content {
-			border-top: none !important;
-			background: transparent !important;
-		}
-
-		.ant-collapse-content-box {
-			padding: 12px 0 0 24px !important;
-		}
-	}
-
-	&__collapse-header {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		cursor: pointer;
-
-		svg {
-			margin-top: 2px;
-			color: var(--l3-foreground);
-			flex-shrink: 0;
-		}
-	}
-
-	&__collapse-header-text {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__section-title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__section-description {
-		margin: 0;
-		color: var(--l3-foreground);
-	}
-
-	// --- Content area with scroll ---
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		max-height: 45vh;
-		overflow-y: auto;
-		padding-right: 4px;
-
-		// Thin scrollbar
-		&::-webkit-scrollbar {
-			width: 4px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--l3-foreground);
-			border-radius: 4px;
-
-			&:hover {
-				background: var(--l2-foreground);
-			}
-		}
-
-		// Firefox thin scrollbar
-		scrollbar-width: thin;
-		scrollbar-color: var(--l3-foreground) transparent;
-	}
-
-	// --- Field group layout ---
-	&__field-group {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__label {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		color: var(--l1-foreground);
-	}
-
-	&__label-icon {
-		color: var(--l3-foreground);
-		cursor: help;
-		flex-shrink: 0;
-	}
-
-	&__form-item {
-		margin-bottom: 0 !important;
-	}
-
-	// --- Input styles ---
-	input {
-		height: 32px;
-		background: var(--l3-background) !important;
-		border: 1px solid var(--l3-border) !important;
-		border-radius: 2px;
-		color: var(--l1-foreground) !important;
-
-		&::placeholder {
-			color: var(--l3-foreground) !important;
-			opacity: 1;
-		}
-
-		&:hover {
-			border-color: var(--l3-border) !important;
-		}
-
-		&:focus,
-		&:focus-visible {
-			border-color: var(--bg-robin-500) !important;
-			box-shadow: none !important;
-			outline: none;
-		}
-	}
-}
-
-// --- Light mode overrides ---
-.lightMode {
-	.claim-mapping-section {
-		input {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-			color: var(--text-ink-500) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-		}
-	}
-}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.tsx

@@ -1,150 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Input } from '@signozhq/input';
-import { Collapse, Form, Tooltip } from 'antd';
-import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
-
-import './ClaimMappingSection.styles.scss';
-
-interface ClaimMappingSectionProps {
-	/** The form field name prefix for the claim mapping configuration */
-	fieldNamePrefix: string[];
-	/** Whether the section is expanded (controlled mode) */
-	isExpanded?: boolean;
-	/** Callback when expand/collapse is toggled */
-	onExpandChange?: (expanded: boolean) => void;
-}
-
-function ClaimMappingSection({
-	fieldNamePrefix,
-	isExpanded,
-	onExpandChange,
-}: ClaimMappingSectionProps): JSX.Element {
-	// Support both controlled and uncontrolled modes
-	const [internalExpanded, setInternalExpanded] = useState(false);
-	const isControlled = isExpanded !== undefined;
-	const expanded = isControlled ? isExpanded : internalExpanded;
-
-	const handleCollapseChange = useCallback(
-		(keys: string | string[]): void => {
-			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
-			if (isControlled && onExpandChange) {
-				onExpandChange(newExpanded);
-			} else {
-				setInternalExpanded(newExpanded);
-			}
-		},
-		[isControlled, onExpandChange],
-	);
-
-	const collapseActiveKey = expanded ? ['claim-mapping'] : [];
-
-	return (
-		<div className="claim-mapping-section">
-			<Collapse
-				bordered={false}
-				activeKey={collapseActiveKey}
-				onChange={handleCollapseChange}
-				className="claim-mapping-section__collapse"
-				expandIcon={(): null => null}
-			>
-				<Collapse.Panel
-					key="claim-mapping"
-					header={
-						<div className="claim-mapping-section__collapse-header">
-							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
-							<div className="claim-mapping-section__collapse-header-text">
-								<h4 className="claim-mapping-section__section-title typography-label-base-600">
-									Claim Mapping (Advanced)
-								</h4>
-								<p className="claim-mapping-section__section-description typography-paragraph-small-400">
-									Configure how claims from your Identity Provider map to SigNoz user
-									attributes. Leave empty to use default values.
-								</p>
-							</div>
-						</div>
-					}
-				>
-					<div className="claim-mapping-section__content">
-						{/* Email Claim */}
-						<div className="claim-mapping-section__field-group">
-							<label
-								className="claim-mapping-section__label typography-label-base-500"
-								htmlFor="email-claim"
-							>
-								Email Claim
-								<Tooltip title="The claim key that contains the user's email address. Default: 'email'">
-									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'email']}
-								className="claim-mapping-section__form-item"
-							>
-								<Input id="email-claim" placeholder="email" />
-							</Form.Item>
-						</div>
-
-						{/* Name Claim */}
-						<div className="claim-mapping-section__field-group">
-							<label
-								className="claim-mapping-section__label typography-label-base-500"
-								htmlFor="name-claim"
-							>
-								Name Claim
-								<Tooltip title="The claim key that contains the user's display name. Default: 'name'">
-									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'name']}
-								className="claim-mapping-section__form-item"
-							>
-								<Input id="name-claim" placeholder="name" />
-							</Form.Item>
-						</div>
-
-						{/* Groups Claim */}
-						<div className="claim-mapping-section__field-group">
-							<label
-								className="claim-mapping-section__label typography-label-base-500"
-								htmlFor="groups-claim"
-							>
-								Groups Claim
-								<Tooltip title="The claim key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
-									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'groups']}
-								className="claim-mapping-section__form-item"
-							>
-								<Input id="groups-claim" placeholder="groups" />
-							</Form.Item>
-						</div>
-
-						{/* Role Claim */}
-						<div className="claim-mapping-section__field-group">
-							<label
-								className="claim-mapping-section__label typography-label-base-500"
-								htmlFor="role-claim"
-							>
-								Role Claim
-								<Tooltip title="The claim key that contains the user's role directly from the IDP. Default: 'role'">
-									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'role']}
-								className="claim-mapping-section__form-item"
-							>
-								<Input id="role-claim" placeholder="role" />
-							</Form.Item>
-						</div>
-					</div>
-				</Collapse.Panel>
-			</Collapse>
-		</div>
-	);
-}
-
-export default ClaimMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.styles.scss

@@ -1,118 +0,0 @@
-.domain-mapping-list {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin-bottom: 4px;
-	}
-
-	&__title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__description {
-		margin: 0;
-		color: var(--l3-foreground);
-	}
-
-	&__items {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&__row {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-
-		.ant-form-item {
-			margin-bottom: 0;
-		}
-	}
-
-	&__field {
-		flex: 1;
-	}
-
-	&__remove-btn {
-		flex-shrink: 0;
-		width: 32px !important;
-		height: 32px !important;
-		min-width: 32px !important;
-		padding: 0 !important;
-		border: none !important;
-		border-radius: 2px !important;
-		background: transparent !important;
-		color: #e5484d !important;
-		opacity: 0.6 !important;
-		cursor: pointer;
-		transition: background-color 0.2s, opacity 0.2s;
-		box-shadow: none !important;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		svg {
-			color: #e5484d !important;
-			width: 12px !important;
-			height: 12px !important;
-		}
-
-		&:hover {
-			background: rgba(229, 72, 77, 0.1) !important;
-			opacity: 0.9 !important;
-			color: #e5484d !important;
-
-			svg {
-				color: #e5484d !important;
-			}
-		}
-
-		&:active {
-			opacity: 0.7 !important;
-			background: rgba(229, 72, 77, 0.15) !important;
-		}
-	}
-
-	&__add-btn {
-		width: 100%;
-
-		// Ensure icon is visible
-		svg,
-		[class*='icon'] {
-			color: var(--l2-foreground) !important;
-			display: inline-block !important;
-			opacity: 1 !important;
-		}
-
-		&:hover {
-			color: var(--l1-foreground);
-
-			svg,
-			[class*='icon'] {
-				color: var(--l1-foreground) !important;
-			}
-		}
-	}
-}
-
-// Light mode overrides
-.lightMode {
-	.domain-mapping-list {
-		&__row input {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-			color: var(--text-ink-500) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-		}
-	}
-}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.tsx

@@ -1,92 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from '@signozhq/button';
-import { Plus, Trash2 } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Form } from 'antd';
-
-import './DomainMappingList.styles.scss';
-
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-interface DomainMappingListProps {
-	/** The form field name prefix for the domain mapping list */
-	fieldNamePrefix: string[];
-}
-
-function DomainMappingList({
-	fieldNamePrefix,
-}: DomainMappingListProps): JSX.Element {
-	const validateEmail = useCallback(
-		(_: unknown, value: string): Promise<void> => {
-			if (!value) {
-				return Promise.reject(new Error('Admin email is required'));
-			}
-			if (!EMAIL_REGEX.test(value)) {
-				return Promise.reject(new Error('Please enter a valid email'));
-			}
-			return Promise.resolve();
-		},
-		[],
-	);
-
-	return (
-		<div className="domain-mapping-list">
-			<div className="domain-mapping-list__header">
-				<span className="domain-mapping-list__title">
-					Domain to Admin Email Mapping
-				</span>
-				<p className="domain-mapping-list__description">
-					Map workspace domains to admin emails for service account impersonation.
-					Use &quot;*&quot; as a wildcard for any domain.
-				</p>
-			</div>
-
-			<Form.List name={fieldNamePrefix}>
-				{(fields, { add, remove }): JSX.Element => (
-					<div className="domain-mapping-list__items">
-						{fields.map((field) => (
-							<div key={field.key} className="domain-mapping-list__row">
-								<Form.Item
-									name={[field.name, 'domain']}
-									className="domain-mapping-list__field"
-									rules={[{ required: true, message: 'Domain is required' }]}
-								>
-									<Input placeholder="Domain (e.g., example.com or *)" />
-								</Form.Item>
-
-								<Form.Item
-									name={[field.name, 'adminEmail']}
-									className="domain-mapping-list__field"
-									rules={[{ validator: validateEmail }]}
-								>
-									<Input placeholder="Admin Email" />
-								</Form.Item>
-
-								<Button
-									variant="ghost"
-									color="secondary"
-									className="domain-mapping-list__remove-btn"
-									onClick={(): void => remove(field.name)}
-									aria-label="Remove mapping"
-								>
-									<Trash2 size={12} />
-								</Button>
-							</div>
-						))}
-
-						<Button
-							variant="dashed"
-							onClick={(): void => add({ domain: '', adminEmail: '' })}
-							prefixIcon={<Plus size={14} />}
-							className="domain-mapping-list__add-btn"
-						>
-							Add Domain Mapping
-						</Button>
-					</div>
-				)}
-			</Form.List>
-		</div>
-	);
-}
-
-export default DomainMappingList;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.styles.scss

@@ -1,30 +0,0 @@
-.email-tag-input {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-
-	&__select {
-		width: 100%;
-
-		.ant-select-selector {
-			.ant-select-selection-search {
-				// margin-inline-start: 0 !important;
-
-				input {
-					height: 32px !important;
-					border: none !important;
-					background: transparent !important;
-					padding: 0 !important;
-					margin: 0 !important;
-					box-shadow: none !important;
-					font-family: inherit !important;
-				}
-			}
-		}
-	}
-
-	&__error {
-		margin: 0;
-		color: var(--bg-cherry-500);
-	}
-}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.tsx

@@ -1,61 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Select, Tooltip } from 'antd';
-
-import './EmailTagInput.styles.scss';
-
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-interface EmailTagInputProps {
-	/** Current value (array of email strings) */
-	value?: string[];
-	/** Change handler */
-	onChange?: (value: string[]) => void;
-	/** Placeholder text */
-	placeholder?: string;
-}
-
-function EmailTagInput({
-	value = [],
-	onChange,
-	placeholder = 'Type an email and press Enter',
-}: EmailTagInputProps): JSX.Element {
-	const [validationError, setValidationError] = useState('');
-
-	const handleChange = useCallback(
-		(newValues: string[]): void => {
-			const addedValues = newValues.filter((v) => !value.includes(v));
-			const invalidEmail = addedValues.find((v) => !EMAIL_REGEX.test(v));
-
-			if (invalidEmail) {
-				setValidationError(`"${invalidEmail}" is not a valid email`);
-				return;
-			}
-			setValidationError('');
-			onChange?.(newValues);
-		},
-		[onChange, value],
-	);
-
-	return (
-		<div className="email-tag-input">
-			<Tooltip
-				title={validationError}
-				open={!!validationError}
-				placement="topRight"
-			>
-				<Select
-					mode="tags"
-					value={value}
-					onChange={handleChange}
-					placeholder={placeholder}
-					tokenSeparators={[',', ' ']}
-					className="email-tag-input__select"
-					allowClear
-					status={validationError ? 'error' : undefined}
-				/>
-			</Tooltip>
-		</div>
-	);
-}
-
-export default EmailTagInput;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss

@@ -1,328 +0,0 @@
-.role-mapping-section {
-	display: flex;
-	flex-direction: column;
-	margin-top: 24px;
-
-	// --- Collapsible section ---
-	&__collapse {
-		background: transparent !important;
-
-		.ant-collapse-item {
-			border: none !important;
-		}
-
-		.ant-collapse-header {
-			padding: 0 !important;
-		}
-
-		.ant-collapse-content {
-			border-top: none !important;
-			background: transparent !important;
-		}
-
-		.ant-collapse-content-box {
-			padding: 12px 0 0 24px !important;
-		}
-	}
-
-	&__collapse-header {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		cursor: pointer;
-
-		svg {
-			margin-top: 2px;
-			color: var(--l3-foreground);
-			flex-shrink: 0;
-		}
-	}
-
-	&__collapse-header-text {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__section-title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__section-description {
-		margin: 0;
-		color: var(--l3-foreground);
-	}
-
-	// --- Content area with scroll ---
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		max-height: 45vh;
-		overflow-y: auto;
-		padding-right: 4px;
-
-		// Thin scrollbar
-		&::-webkit-scrollbar {
-			width: 4px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--l3-foreground);
-			border-radius: 4px;
-
-			&:hover {
-				background: var(--l2-foreground);
-			}
-		}
-
-		// Firefox thin scrollbar
-		scrollbar-width: thin;
-		scrollbar-color: var(--l3-foreground) transparent;
-	}
-
-	// --- Field group layout ---
-	&__field-group {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__label {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		color: var(--l1-foreground);
-	}
-
-	&__label-icon {
-		color: var(--l3-foreground);
-		cursor: help;
-		flex-shrink: 0;
-	}
-
-	&__form-item {
-		margin-bottom: 0 !important;
-	}
-
-	// --- Checkbox row ---
-	&__checkbox-row {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
-
-	// --- Select styling ---
-	&__select {
-		width: 100%;
-
-		&.ant-select {
-			.ant-select-selector {
-				height: 32px;
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l3-border) !important;
-				border-radius: 2px;
-				color: var(--l1-foreground) !important;
-
-				.ant-select-selection-item {
-					color: var(--l1-foreground) !important;
-				}
-			}
-
-			&:hover .ant-select-selector {
-				border-color: var(--l3-border) !important;
-			}
-
-			&.ant-select-focused .ant-select-selector {
-				border-color: var(--bg-robin-500) !important;
-				box-shadow: none !important;
-			}
-
-			.ant-select-arrow {
-				color: var(--l3-foreground);
-			}
-		}
-	}
-
-	// --- Group mappings section ---
-	&__group-mappings {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&__group-header {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin-bottom: 4px;
-	}
-
-	&__group-title {
-		margin: 0;
-		color: var(--l1-foreground);
-	}
-
-	&__group-description {
-		margin: 0;
-		color: var(--l3-foreground);
-	}
-
-	&__items {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&__row {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-
-		.ant-form-item {
-			margin-bottom: 0;
-		}
-	}
-
-	&__field {
-		&--group {
-			flex: 2;
-		}
-
-		&--role {
-			flex: 1;
-			min-width: 120px;
-		}
-	}
-
-	&__remove-btn {
-		flex-shrink: 0;
-		width: 32px !important;
-		height: 32px !important;
-		min-width: 32px !important;
-		padding: 0 !important;
-		border: none !important;
-		border-radius: 2px !important;
-		background: transparent !important;
-		color: #e5484d !important;
-		opacity: 0.6 !important;
-		cursor: pointer;
-		transition: background-color 0.2s, opacity 0.2s;
-		box-shadow: none !important;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		svg {
-			color: #e5484d !important;
-			width: 12px !important;
-			height: 12px !important;
-		}
-
-		&:hover {
-			background: rgba(229, 72, 77, 0.1) !important;
-			opacity: 0.9 !important;
-			color: #e5484d !important;
-
-			svg {
-				color: #e5484d !important;
-			}
-		}
-
-		&:active {
-			opacity: 0.7 !important;
-			background: rgba(229, 72, 77, 0.15) !important;
-		}
-	}
-
-	&__add-btn {
-		width: 100%;
-
-		// Ensure icon is visible
-		svg,
-		[class*='icon'] {
-			color: var(--l2-foreground) !important;
-			display: inline-block !important;
-			opacity: 1 !important;
-		}
-
-		&:hover {
-			color: var(--l1-foreground);
-
-			svg,
-			[class*='icon'] {
-				color: var(--l1-foreground) !important;
-			}
-		}
-	}
-
-	// --- Checkbox border visibility ---
-	button[role='checkbox'] {
-		border: 1px solid var(--l2-foreground) !important;
-		border-radius: 2px;
-
-		&[data-state='checked'] {
-			background-color: var(--bg-robin-500) !important;
-			border-color: var(--bg-robin-500) !important;
-		}
-	}
-
-	// --- Input styles ---
-	input {
-		height: 32px;
-		background: var(--l3-background) !important;
-		border: 1px solid var(--l3-border) !important;
-		border-radius: 2px;
-		color: var(--l1-foreground) !important;
-
-		&::placeholder {
-			color: var(--l3-foreground) !important;
-			opacity: 1;
-		}
-
-		&:hover {
-			border-color: var(--l3-border) !important;
-		}
-
-		&:focus,
-		&:focus-visible {
-			border-color: var(--bg-robin-500) !important;
-			box-shadow: none !important;
-			outline: none;
-		}
-	}
-}
-
-// --- Light mode overrides ---
-.lightMode {
-	.role-mapping-section {
-		input {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-			color: var(--text-ink-500) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-		}
-
-		&__select {
-			&.ant-select {
-				.ant-select-selector {
-					background: var(--bg-vanilla-200) !important;
-					border-color: var(--bg-vanilla-300) !important;
-					color: var(--text-ink-500) !important;
-
-					.ant-select-selection-item {
-						color: var(--text-ink-500) !important;
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx

@@ -1,198 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
-import { Plus, Trash2 } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Collapse, Form, Select, Tooltip } from 'antd';
-import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
-
-import './RoleMappingSection.styles.scss';
-
-const ROLE_OPTIONS = [
-	{ value: 'VIEWER', label: 'VIEWER' },
-	{ value: 'EDITOR', label: 'EDITOR' },
-	{ value: 'ADMIN', label: 'ADMIN' },
-];
-
-interface RoleMappingSectionProps {
-	/** The form field name prefix for the role mapping configuration */
-	fieldNamePrefix: string[];
-	/** Whether the section is expanded (controlled mode) */
-	isExpanded?: boolean;
-	/** Callback when expand/collapse is toggled */
-	onExpandChange?: (expanded: boolean) => void;
-}
-
-function RoleMappingSection({
-	fieldNamePrefix,
-	isExpanded,
-	onExpandChange,
-}: RoleMappingSectionProps): JSX.Element {
-	const form = Form.useFormInstance();
-	const useRoleAttribute = Form.useWatch(
-		[...fieldNamePrefix, 'useRoleAttribute'],
-		form,
-	);
-
-	// Support both controlled and uncontrolled modes
-	const [internalExpanded, setInternalExpanded] = useState(false);
-	const isControlled = isExpanded !== undefined;
-	const expanded = isControlled ? isExpanded : internalExpanded;
-
-	const handleCollapseChange = useCallback(
-		(keys: string | string[]): void => {
-			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
-			if (isControlled && onExpandChange) {
-				onExpandChange(newExpanded);
-			} else {
-				setInternalExpanded(newExpanded);
-			}
-		},
-		[isControlled, onExpandChange],
-	);
-
-	const collapseActiveKey = expanded ? ['role-mapping'] : [];
-
-	return (
-		<div className="role-mapping-section">
-			<Collapse
-				bordered={false}
-				activeKey={collapseActiveKey}
-				onChange={handleCollapseChange}
-				className="role-mapping-section__collapse"
-				expandIcon={(): null => null}
-			>
-				<Collapse.Panel
-					key="role-mapping"
-					header={
-						<div className="role-mapping-section__collapse-header">
-							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
-							<div className="role-mapping-section__collapse-header-text">
-								<h4 className="role-mapping-section__section-title typography-label-base-600">
-									Role Mapping (Advanced)
-								</h4>
-								<p className="role-mapping-section__section-description typography-paragraph-small-400">
-									Configure how user roles are determined from your Identity Provider.
-									You can either use a direct role attribute or map IDP groups to SigNoz
-									roles.
-								</p>
-							</div>
-						</div>
-					}
-				>
-					<div className="role-mapping-section__content">
-						{/* Default Role */}
-						<div className="role-mapping-section__field-group">
-							<label
-								className="role-mapping-section__label typography-label-base-500"
-								htmlFor="default-role"
-							>
-								Default Role
-								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
-									<CircleHelp size={14} className="role-mapping-section__label-icon" />
-								</Tooltip>
-							</label>
-							<Form.Item
-								name={[...fieldNamePrefix, 'defaultRole']}
-								className="role-mapping-section__form-item"
-								initialValue="VIEWER"
-							>
-								<Select
-									id="default-role"
-									options={ROLE_OPTIONS}
-									className="role-mapping-section__select"
-								/>
-							</Form.Item>
-						</div>
-
-						{/* Use Role Attribute */}
-						<div className="role-mapping-section__checkbox-row">
-							<Form.Item
-								name={[...fieldNamePrefix, 'useRoleAttribute']}
-								valuePropName="checked"
-								noStyle
-							>
-								<Checkbox
-									id="use-role-attribute"
-									labelName="Use Role Attribute Directly"
-									onCheckedChange={(checked: boolean): void => {
-										form.setFieldValue([...fieldNamePrefix, 'useRoleAttribute'], checked);
-									}}
-								/>
-							</Form.Item>
-							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
-								<CircleHelp size={14} className="role-mapping-section__label-icon" />
-							</Tooltip>
-						</div>
-
-						{/* Group to Role Mappings - only show when useRoleAttribute is false */}
-						{!useRoleAttribute && (
-							<div className="role-mapping-section__group-mappings">
-								<div className="role-mapping-section__group-header">
-									<span className="role-mapping-section__group-title">
-										Group to Role Mappings
-									</span>
-									<p className="role-mapping-section__group-description">
-										Map IDP group names to SigNoz roles. If a user belongs to multiple
-										groups, the highest privilege role will be assigned.
-									</p>
-								</div>
-
-								<Form.List name={[...fieldNamePrefix, 'groupMappingsList']}>
-									{(fields, { add, remove }): JSX.Element => (
-										<div className="role-mapping-section__items">
-											{fields.map((field) => (
-												<div key={field.key} className="role-mapping-section__row">
-													<Form.Item
-														name={[field.name, 'groupName']}
-														className="role-mapping-section__field role-mapping-section__field--group"
-														rules={[{ required: true, message: 'Group name is required' }]}
-													>
-														<Input placeholder="IDP Group Name" />
-													</Form.Item>
-
-													<Form.Item
-														name={[field.name, 'role']}
-														className="role-mapping-section__field role-mapping-section__field--role"
-														rules={[{ required: true, message: 'Role is required' }]}
-														initialValue="VIEWER"
-													>
-														<Select
-															options={ROLE_OPTIONS}
-															className="role-mapping-section__select"
-														/>
-													</Form.Item>
-
-													<Button
-														variant="ghost"
-														color="secondary"
-														className="role-mapping-section__remove-btn"
-														onClick={(): void => remove(field.name)}
-														aria-label="Remove mapping"
-													>
-														<Trash2 size={12} />
-													</Button>
-												</div>
-											))}
-
-											<Button
-												variant="dashed"
-												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
-												prefixIcon={<Plus size={14} />}
-												className="role-mapping-section__add-btn"
-											>
-												Add Group Mapping
-											</Button>
-										</div>
-									)}
-								</Form.List>
-							</div>
-						)}
-					</div>
-				</Collapse.Panel>
-			</Collapse>
-		</div>
-	);
-}
-
-export default RoleMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/Toggle.tsx

@@ -1,60 +1,35 @@
 import { useState } from 'react';
 import { Switch } from 'antd';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { useUpdateAuthDomain } from 'api/generated/services/authdomains';
-import {
-	AuthtypesGettableAuthDomainDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
+import put from 'api/v1/domains/id/put';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-
-interface ToggleProps {
-	isDefaultChecked: boolean;
-	record: AuthtypesGettableAuthDomainDTO;
-}
+import { GettableAuthDomain } from 'types/api/v1/domains/list';
 
 function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
 	const [isChecked, setIsChecked] = useState<boolean>(isDefaultChecked);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const { showErrorModal } = useErrorModal();
 
-	const { mutate: updateAuthDomain, isLoading } = useUpdateAuthDomain<
-		AxiosError<RenderErrorResponseDTO>
-	>();
+	const onChangeHandler = async (checked: boolean): Promise<void> => {
+		setIsLoading(true);
 
-	const onChangeHandler = (checked: boolean): void => {
-		if (!record.id) {
-			return;
+		try {
+			await put({
+				id: record.id,
+				config: {
+					ssoEnabled: checked,
+					ssoType: record.ssoType,
+					googleAuthConfig: record.googleAuthConfig,
+					oidcConfig: record.oidcConfig,
+					samlConfig: record.samlConfig,
+				},
+			});
+			setIsChecked(checked);
+		} catch (error) {
+			showErrorModal(error as APIError);
 		}
 
-		updateAuthDomain(
-			{
-				pathParams: { id: record.id },
-				data: {
-					config: {
-						ssoEnabled: checked,
-						ssoType: record.ssoType,
-						googleAuthConfig: record.googleAuthConfig,
-						oidcConfig: record.oidcConfig,
-						samlConfig: record.samlConfig,
-					},
-				},
-			},
-			{
-				onSuccess: () => {
-					setIsChecked(checked);
-				},
-				onError: (error) => {
-					try {
-						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-					} catch (apiError) {
-						showErrorModal(apiError as APIError);
-					}
-				},
-			},
-		);
+		setIsLoading(false);
 	};
 
 	return (
@@ -62,4 +37,9 @@ function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
 	);
 }
 
+interface ToggleProps {
+	isDefaultChecked: boolean;
+	record: GettableAuthDomain;
+}
+
 export default Toggle;

frontend/src/container/OrganizationSettings/AuthDomain/index.tsx

@@ -1,38 +1,22 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
+import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button } from '@signozhq/button';
-import { Table, Typography } from 'antd';
+import { Button, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import {
-	useDeleteAuthDomain,
-	useListAuthDomains,
-} from 'api/generated/services/authdomains';
-import {
-	AuthtypesGettableAuthDomainDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
+import deleteDomain from 'api/v1/domains/id/delete';
+import listAllDomain from 'api/v1/domains/list';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import { useNotifications } from 'hooks/useNotifications';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
+import { GettableAuthDomain, SSOType } from 'types/api/v1/domains/list';
 
 import CreateEdit from './CreateEdit/CreateEdit';
 import Toggle from './Toggle';
 
 import './AuthDomain.styles.scss';
 
-export const SSOType = new Map<string, string>([
-	['google_auth', 'Google Auth'],
-	['saml', 'SAML'],
-	['email_password', 'Email Password'],
-	['oidc', 'OIDC'],
-]);
-
-const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = [
+const columns: ColumnsType<GettableAuthDomain> = [
 	{
 		title: 'Domain',
 		dataIndex: 'name',
@@ -45,18 +29,17 @@ const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = [
 		dataIndex: 'ssoEnabled',
 		key: 'ssoEnabled',
 		width: 80,
-		render: (
-			value: boolean,
-			record: AuthtypesGettableAuthDomainDTO,
-		): JSX.Element => <Toggle isDefaultChecked={value} record={record} />,
+		render: (value: boolean, record: GettableAuthDomain): JSX.Element => (
+			<Toggle isDefaultChecked={value} record={record} />
+		),
 	},
 	{
 		title: 'IDP Initiated SSO URL',
 		dataIndex: 'relayState',
 		key: 'relayState',
 		width: 80,
-		render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => {
-			const relayPath = record.authNProviderInfo?.relayStatePath;
+		render: (_, record: GettableAuthDomain): JSX.Element => {
+			const relayPath = record.authNProviderInfo.relayStatePath;
 			if (!relayPath) {
 				return (
 					<Typography.Text style={{ paddingLeft: '6px' }}>N/A</Typography.Text>
@@ -72,10 +55,10 @@ const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = [
 		dataIndex: 'action',
 		key: 'action',
 		width: 100,
-		render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => (
+		render: (_, record: GettableAuthDomain): JSX.Element => (
 			<section className="auth-domain-list-column-action">
 				<Typography.Link data-column-action="configure">
-					Configure {SSOType.get(record.ssoType || '')}
+					Configure {SSOType.get(record.ssoType)}
 				</Typography.Link>
 				<Typography.Link type="danger" data-column-action="delete">
 					Delete
@@ -85,81 +68,58 @@ const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = [
 	},
 ];
 
-function AuthDomain(): JSX.Element {
-	const [record, setRecord] = useState<AuthtypesGettableAuthDomainDTO>();
-	const [addDomain, setAddDomain] = useState<boolean>(false);
-	const { notifications } = useNotifications();
-	const { showErrorModal } = useErrorModal();
+async function deleteDomainById(
+	id: string,
+	showErrorModal: (error: APIError) => void,
+	refetchAuthDomainListResponse: () => void,
+): Promise<void> {
+	try {
+		await deleteDomain(id);
+		refetchAuthDomainListResponse();
+	} catch (error) {
+		showErrorModal(error as APIError);
+	}
+}
 
+function AuthDomain(): JSX.Element {
+	const [record, setRecord] = useState<GettableAuthDomain>();
+	const [addDomain, setAddDomain] = useState<boolean>(false);
+	const { showErrorModal } = useErrorModal();
 	const {
 		data: authDomainListResponse,
 		isLoading: isLoadingAuthDomainListResponse,
 		isFetching: isFetchingAuthDomainListResponse,
 		error: errorFetchingAuthDomainListResponse,
 		refetch: refetchAuthDomainListResponse,
-	} = useListAuthDomains();
-
-	const { mutate: deleteAuthDomain } = useDeleteAuthDomain<
-		AxiosError<RenderErrorResponseDTO>
-	>();
-
-	const handleDeleteDomain = (id: string): void => {
-		deleteAuthDomain(
-			{ pathParams: { id } },
-			{
-				onSuccess: () => {
-					notifications.success({
-						message: 'Domain deleted successfully',
-					});
-					refetchAuthDomainListResponse();
-				},
-				onError: (error) => {
-					try {
-						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-					} catch (apiError) {
-						showErrorModal(apiError as APIError);
-					}
-				},
-			},
-		);
-	};
-
-	const formattedError = useMemo(() => {
-		if (!errorFetchingAuthDomainListResponse) {
-			return null;
-		}
-
-		try {
-			ErrorResponseHandlerV2(
-				errorFetchingAuthDomainListResponse as AxiosError<ErrorV2Resp>,
-			);
-		} catch (error) {
-			return error as APIError;
-		}
-	}, [errorFetchingAuthDomainListResponse]);
+	} = useQuery({
+		queryFn: listAllDomain,
+		queryKey: ['/api/v1/domains', 'list'],
+		enabled: true,
+	});
 
 	return (
 		<div className="auth-domain">
 			<section className="auth-domain-header">
 				<Typography.Title level={3}>Authenticated Domains</Typography.Title>
 				<Button
-					prefixIcon={<PlusOutlined />}
+					type="primary"
+					icon={<PlusOutlined />}
 					onClick={(): void => {
 						setAddDomain(true);
 					}}
-					variant="solid"
-					size="sm"
-					color="primary"
+					className="button"
 				>
 					Add Domain
 				</Button>
 			</section>
-			{formattedError && <ErrorContent error={formattedError} />}
-			{!errorFetchingAuthDomainListResponse && (
+			{(errorFetchingAuthDomainListResponse as APIError) && (
+				<ErrorContent error={errorFetchingAuthDomainListResponse as APIError} />
+			)}
+			{!(errorFetchingAuthDomainListResponse as APIError) && (
 				<Table
 					columns={columns}
-					dataSource={authDomainListResponse?.data?.data}
-					onRow={(tableRecord): any => ({
+					dataSource={authDomainListResponse?.data}
+					onRow={(record): any => ({
 						onClick: (
 							event: React.SyntheticEvent<HTMLLinkElement, MouseEvent>,
 						): void => {
@@ -167,12 +127,15 @@ function AuthDomain(): JSX.Element {
 							const { columnAction } = target.dataset;
 							switch (columnAction) {
 								case 'configure':
-									setRecord(tableRecord);
+									setRecord(record);
+
 									break;
 								case 'delete':
-									if (tableRecord.id) {
-										handleDeleteDomain(tableRecord.id);
-									}
+									deleteDomainById(
+										record.id,
+										showErrorModal,
+										refetchAuthDomainListResponse,
+									);
 									break;
 								default:
 									console.error('Unknown action:', columnAction);

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

@@ -0,0 +1,31 @@
+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/HistogramTooltip.tsx

@@ -0,0 +1,8 @@
+import { HistogramTooltipProps } from '../types';
+import Tooltip from './Tooltip';
+
+export default function HistogramTooltip(
+	props: HistogramTooltipProps,
+): JSX.Element {
+	return <Tooltip {...props} showTooltipHeader={false} />;
+}

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

@@ -16,12 +16,16 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
+	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
@@ -30,7 +34,12 @@ export default function Tooltip({
 		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
+	}, [
+		timezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
 
 	return (
 		<div
@@ -39,9 +48,11 @@ export default function Tooltip({
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
 		>
-			<div className="uplot-tooltip-header">
-				<span>{headerTitle}</span>
-			</div>
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header">
+					<span>{headerTitle}</span>
+				</div>
+			)}
 			<div
 				style={{
 					height: Math.min(

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

@@ -25,16 +25,28 @@ export function getTooltipBaseValue({
 	index,
 	dataIndex,
 	isStackedBarChart,
+	series,
 }: {
 	data: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
+	series?: Series[];
 }): number | null {
 	let baseValue = data[index][dataIndex] ?? null;
-	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
-		const nextValue = data[index + 1][dataIndex] ?? null;
-		if (nextValue !== 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;
 		}
 	}
@@ -80,6 +92,7 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
+			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

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

@@ -60,6 +60,7 @@ export interface TooltipRenderArgs {
 }
 
 export interface BaseTooltipProps {
+	showTooltipHeader?: boolean;
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
@@ -74,7 +75,14 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 	isStackedBarChart?: boolean;
 }
 
-export type TooltipProps = TimeSeriesTooltipProps | BarTooltipProps;
+export interface HistogramTooltipProps
+	extends BaseTooltipProps,
+		TooltipRenderArgs {}
+
+export type TooltipProps =
+	| TimeSeriesTooltipProps
+	| BarTooltipProps
+	| HistogramTooltipProps;
 
 export enum LegendPosition {
 	BOTTOM = 'bottom',

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

@@ -1,8 +1,10 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
 
 import {
+	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
 	LineInterpolation,
@@ -18,15 +20,10 @@ import {
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	private buildLineConfig({
 		lineColor,
-		lineWidth,
-		lineStyle,
-		lineCap,
 	}: {
 		lineColor: string;
-		lineWidth?: number;
-		lineStyle?: LineStyle;
-		lineCap?: Series.Cap;
 	}): Partial<Series> {
+		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: lineColor,
 			width: lineWidth ?? 2,
@@ -39,21 +36,28 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
+
+		if (this.props.panelType === PANEL_TYPES.BAR) {
+			lineConfig.fill = lineColor;
+		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
+			lineConfig.fill = `${lineColor}40`;
+		}
+
 		return lineConfig;
 	}
 
 	/**
 	 * Build path configuration
 	 */
-	private buildPathConfig({
-		pathBuilder,
-		drawStyle,
-		lineInterpolation,
-	}: {
-		pathBuilder?: Series.PathBuilder | null;
-		drawStyle: DrawStyle;
-		lineInterpolation?: LineInterpolation;
-	}): Partial<Series> {
+	private buildPathConfig(): Partial<Series> {
+		const {
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
+			barAlignment,
+			barMaxWidth,
+			barWidthFactor,
+		} = this.props;
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -70,7 +74,13 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
+					const pathsBuilder = getPathBuilder({
+						drawStyle,
+						lineInterpolation,
+						barAlignment,
+						barMaxWidth,
+						barWidthFactor,
+					});
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -85,21 +95,17 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 */
 	private buildPointsConfig({
 		lineColor,
-		lineWidth,
-		pointSize,
-		pointsBuilder,
-		pointsFilter,
-		drawStyle,
-		showPoints,
 	}: {
 		lineColor: string;
-		lineWidth?: number;
-		pointSize?: number;
-		pointsBuilder: Series.Points.Show | null;
-		pointsFilter: Series.Points.Filter | null;
-		drawStyle: DrawStyle;
-		showPoints?: VisibilityMode;
 	}): Partial<Series.Points> {
+		const {
+			lineWidth,
+			pointSize,
+			pointsBuilder,
+			pointsFilter,
+			drawStyle,
+			showPoints,
+		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: lineColor,
 			fill: lineColor,
@@ -136,44 +142,16 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const {
-			drawStyle,
-			pathBuilder,
-			pointsBuilder,
-			pointsFilter,
-			lineInterpolation,
-			lineWidth,
-			lineStyle,
-			lineCap,
-			showPoints,
-			pointSize,
-			scaleKey,
-			label,
-			spanGaps,
-			show = true,
-		} = this.props;
+		const { scaleKey, label, spanGaps, show = true } = this.props;
 
 		const lineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
 			lineColor,
-			lineWidth,
-			lineStyle,
-			lineCap,
-		});
-		const pathConfig = this.buildPathConfig({
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
 		});
+		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
 			lineColor,
-			lineWidth,
-			pointSize,
-			pointsBuilder: pointsBuilder ?? null,
-			pointsFilter: pointsFilter ?? null,
-			drawStyle,
-			showPoints,
 		});
 
 		return {
@@ -203,10 +181,19 @@ let builders: PathBuilders | null = null;
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder(
-	style: DrawStyle,
-	lineInterpolation?: LineInterpolation,
-): Series.PathBuilder {
+function getPathBuilder({
+	drawStyle,
+	lineInterpolation,
+	barAlignment = BarAlignment.Center,
+	barWidthFactor = 0.6,
+	barMaxWidth = 200,
+}: {
+	drawStyle: DrawStyle;
+	lineInterpolation?: LineInterpolation;
+	barAlignment?: BarAlignment;
+	barMaxWidth?: number;
+	barWidthFactor?: number;
+}): Series.PathBuilder {
 	const pathBuilders = uPlot.paths;
 
 	if (!builders) {
@@ -226,7 +213,18 @@ function getPathBuilder(
 		};
 	}
 
-	if (style === DrawStyle.Line) {
+	if (drawStyle === DrawStyle.Bar) {
+		const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
+		if (!builders[barsCfgKey] && pathBuilders.bars) {
+			builders[barsCfgKey] = pathBuilders.bars({
+				size: [barWidthFactor, barMaxWidth],
+				align: barAlignment,
+			});
+		}
+		return builders[barsCfgKey];
+	}
+
+	if (drawStyle === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}

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

@@ -126,7 +126,45 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-export interface SeriesProps {
+/**
+ * Props for configuring lines
+ */
+export interface LineConfig {
+	lineColor?: string;
+	lineInterpolation?: LineInterpolation;
+	lineStyle?: LineStyle;
+	lineWidth?: number;
+	lineCap?: Series.Cap;
+}
+
+/**
+ * Alignment of bars
+ */
+export enum BarAlignment {
+	After = 1,
+	Before = -1,
+	Center = 0,
+}
+
+/**
+ * Props for configuring bars
+ */
+export interface BarConfig {
+	barAlignment?: BarAlignment;
+	barMaxWidth?: number;
+	barWidthFactor?: number;
+}
+
+/**
+ * Props for configuring points
+ */
+export interface PointsConfig {
+	pointColor?: string;
+	pointSize?: number;
+	showPoints?: VisibilityMode;
+}
+
+export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -137,20 +175,7 @@ export interface SeriesProps {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
-
 	isDarkMode?: boolean;
-
-	// Line config
-	lineColor?: string;
-	lineInterpolation?: LineInterpolation;
-	lineStyle?: LineStyle;
-	lineWidth?: number;
-	lineCap?: Series.Cap;
-
-	// Points config
-	pointColor?: string;
-	pointSize?: number;
-	showPoints?: VisibilityMode;
 }
 
 export interface LegendItem {

frontend/src/types/api/v1/domains/list.ts

@@ -17,41 +17,17 @@ export interface GettableAuthDomain {
 	oidcConfig?: OIDCConfig;
 }
 
-export interface SAMLAttributeMapping {
-	nameAttribute?: string;
-	groupsAttribute?: string;
-	roleAttribute?: string;
-}
-
 export interface SAMLConfig {
 	samlEntity: string;
 	samlIdp: string;
 	samlCert: string;
 	insecureSkipAuthNRequestsSigned: boolean;
-	attributeMapping?: SAMLAttributeMapping;
-	roleMapping?: RoleMappingConfig;
-}
-
-export interface RoleMappingConfig {
-	defaultRole?: 'VIEWER' | 'EDITOR' | 'ADMIN';
-	useRoleAttributeDirectly?: boolean;
-	groupMappings?: Array<{
-		groupName: string;
-		role: 'VIEWER' | 'EDITOR' | 'ADMIN';
-	}>;
 }
 
 export interface GoogleAuthConfig {
 	clientId: string;
 	clientSecret: string;
 	redirectURI: string;
-	insecureSkipEmailVerified?: boolean;
-	fetchGroups?: boolean;
-	serviceAccountJson?: string;
-	domainToAdminEmail?: Record<string, string>;
-	fetchTransitiveGroupMembership?: boolean;
-	allowedGroups?: string[];
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface OIDCConfig {
@@ -62,14 +38,10 @@ export interface OIDCConfig {
 	claimMapping: ClaimMapping;
 	insecureSkipEmailVerified: boolean;
 	getUserInfo: boolean;
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface ClaimMapping {
-	email?: string;
-	name?: string;
-	groups?: string;
-	role?: string;
+	email: string;
 }
 
 export interface AuthNProviderInfo {

frontend/src/types/api/v1/domains/post.ts

@@ -11,41 +11,17 @@ export interface Config {
 	oidcConfig?: OIDCConfig;
 }
 
-export interface RoleMappingConfig {
-	defaultRole?: 'VIEWER' | 'EDITOR' | 'ADMIN';
-	useRoleAttributeDirectly?: boolean;
-	groupMappings?: Array<{
-		groupName: string;
-		role: 'VIEWER' | 'EDITOR' | 'ADMIN';
-	}>;
-}
-
-export interface SAMLAttributeMapping {
-	nameAttribute?: string;
-	groupsAttribute?: string;
-	roleAttribute?: string;
-}
-
 export interface SAMLConfig {
 	samlEntity: string;
 	samlIdp: string;
 	samlCert: string;
 	insecureSkipAuthNRequestsSigned: boolean;
-	attributeMapping?: SAMLAttributeMapping;
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface GoogleAuthConfig {
 	clientId: string;
 	clientSecret: string;
 	redirectURI: string;
-	insecureSkipEmailVerified?: boolean;
-	fetchGroups?: boolean;
-	serviceAccountJson?: string;
-	domainToAdminEmail?: Record<string, string>;
-	fetchTransitiveGroupMembership?: boolean;
-	allowedGroups?: string[];
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface OIDCConfig {
@@ -56,12 +32,8 @@ export interface OIDCConfig {
 	claimMapping: ClaimMapping;
 	insecureSkipEmailVerified: boolean;
 	getUserInfo: boolean;
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface ClaimMapping {
-	email?: string;
-	name?: string;
-	groups?: string;
-	role?: string;
+	email: string;
 }

frontend/src/types/api/v1/domains/put.ts

@@ -9,41 +9,17 @@ export interface UpdatableAuthDomain {
 	id: string;
 }
 
-export interface RoleMappingConfig {
-	defaultRole?: 'VIEWER' | 'EDITOR' | 'ADMIN';
-	useRoleAttributeDirectly?: boolean;
-	groupMappings?: Array<{
-		groupName: string;
-		role: 'VIEWER' | 'EDITOR' | 'ADMIN';
-	}>;
-}
-
-export interface SAMLAttributeMapping {
-	nameAttribute?: string;
-	groupsAttribute?: string;
-	roleAttribute?: string;
-}
-
 export interface SAMLConfig {
 	samlEntity: string;
 	samlIdp: string;
 	samlCert: string;
 	insecureSkipAuthNRequestsSigned: boolean;
-	attributeMapping?: SAMLAttributeMapping;
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface GoogleAuthConfig {
 	clientId: string;
 	clientSecret: string;
 	redirectURI: string;
-	insecureSkipEmailVerified?: boolean;
-	fetchGroups?: boolean;
-	serviceAccountJson?: string;
-	domainToAdminEmail?: Record<string, string>;
-	fetchTransitiveGroupMembership?: boolean;
-	allowedGroups?: string[];
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface OIDCConfig {
@@ -54,12 +30,8 @@ export interface OIDCConfig {
 	claimMapping: ClaimMapping;
 	insecureSkipEmailVerified: boolean;
 	getUserInfo: boolean;
-	roleMapping?: RoleMappingConfig;
 }
 
 export interface ClaimMapping {
-	email?: string;
-	name?: string;
-	groups?: string;
-	role?: string;
+	email: string;
 }