chore: updated rightcontainer

conf/example.yaml

@@ -308,9 +308,6 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
-    invite:
-      # The duration within which a user can accept their invite.
-      max_token_lifetime: 48h
   root:
     # Whether to enable the root user. When enabled, a root user is provisioned
     # on startup using the email and password below. The root user cannot be

frontend/jest.config.ts

@@ -24,7 +24,8 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/([^/]+)$': '<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
+		'^@signozhq/(?!ui$)([^/]+)$':
+			'<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],

frontend/package.json

@@ -67,6 +67,7 @@
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
+    "@signozhq/ui": "0.0.4",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/src/auto-import-registry.d.ts

@@ -30,3 +30,4 @@ import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
+import '@signozhq/ui';

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

@@ -123,7 +123,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			spanGaps: widget.spanGaps ?? true,
 			lineStyle: widget.lineStyle || LineStyle.Solid,
 			lineInterpolation: widget.lineInterpolation || LineInterpolation.Spline,
 			showPoints:

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -30,6 +30,17 @@
 		width: 100%;
 	}
 
+	.section-heading {
+		font-family: 'Space Mono';
+		color: var(--bg-vanilla-400);
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 138.462% */
+		letter-spacing: 0.52px;
+		text-transform: uppercase;
+	}
+
 	.header {
 		display: flex;
 		padding: 14px 14px 14px 12px;

frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -7,9 +7,10 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { Paintbrush } from 'lucide-react';
 
-import { FillModeSelector } from '../../components/FillModeSelector/FillModeSelector';
-import { LineInterpolationSelector } from '../../components/LineInterpolationSelector/LineInterpolationSelector';
-import { LineStyleSelector } from '../../components/LineStyleSelector/LineStyleSelector';
+import DisconnectValuesSelector from '../../components/DisconnectValuesSelector/DisconnectValuesSelector';
+import FillModeSelector from '../../components/FillModeSelector/FillModeSelector';
+import LineInterpolationSelector from '../../components/LineInterpolationSelector/LineInterpolationSelector';
+import LineStyleSelector from '../../components/LineStyleSelector/LineStyleSelector';
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
 
 interface ChartAppearanceSectionProps {
@@ -21,10 +22,13 @@ interface ChartAppearanceSectionProps {
 	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
 	showPoints: boolean;
 	setShowPoints: Dispatch<SetStateAction<boolean>>;
+	spanGaps: boolean | number;
+	setSpanGaps: Dispatch<SetStateAction<boolean | number>>;
 	allowFillMode: boolean;
 	allowLineStyle: boolean;
 	allowLineInterpolation: boolean;
 	allowShowPoints: boolean;
+	allowSpanGaps: boolean;
 }
 
 export default function ChartAppearanceSection({
@@ -36,10 +40,13 @@ export default function ChartAppearanceSection({
 	setLineInterpolation,
 	showPoints,
 	setShowPoints,
+	spanGaps,
+	setSpanGaps,
 	allowFillMode,
 	allowLineStyle,
 	allowLineInterpolation,
 	allowShowPoints,
+	allowSpanGaps,
 }: ChartAppearanceSectionProps): JSX.Element {
 	return (
 		<SettingsSection title="Chart Appearance" icon={<Paintbrush size={14} />}>
@@ -66,6 +73,9 @@ export default function ChartAppearanceSection({
 					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
 				</section>
 			)}
+			{allowSpanGaps && (
+				<DisconnectValuesSelector value={spanGaps} onChange={setSpanGaps} />
+			)}
 		</SettingsSection>
 	);
 }

frontend/src/container/NewWidget/RightContainer/__tests__/RightContainer.test.tsx

@@ -178,6 +178,8 @@ describe('RightContainer - Alerts Section', () => {
 		setLineStyle: jest.fn(),
 		showPoints: false,
 		setShowPoints: jest.fn(),
+		spanGaps: false,
+		setSpanGaps: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesModeToggle.tsx

@@ -0,0 +1,44 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
+
+interface DisconnectValuesModeToggleProps {
+	value: DisconnectedValuesMode;
+	onChange: (value: DisconnectedValuesMode) => void;
+}
+
+export default function DisconnectValuesModeToggle({
+	value,
+	onChange,
+}: DisconnectValuesModeToggleProps): JSX.Element {
+	return (
+		<ToggleGroup
+			type="single"
+			value={value}
+			variant="outline"
+			size="lg"
+			onValueChange={(newValue): void => {
+				if (newValue) {
+					onChange(newValue as DisconnectedValuesMode);
+				}
+			}}
+		>
+			<ToggleGroupItem
+				value={DisconnectedValuesMode.Never}
+				aria-label="Never"
+				title="Never"
+			>
+				<Typography.Text className="section-heading-small">Never</Typography.Text>
+			</ToggleGroupItem>
+			<ToggleGroupItem
+				value={DisconnectedValuesMode.Threshold}
+				aria-label="Threshold"
+				title="Threshold"
+			>
+				<Typography.Text className="section-heading-small">
+					Threshold
+				</Typography.Text>
+			</ToggleGroupItem>
+		</ToggleGroup>
+	);
+}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesSelector.styles.scss

@@ -0,0 +1,16 @@
+.disconnect-values-selector {
+	.disconnect-values-input-wrapper {
+		display: flex;
+		align-items: stretch;
+		gap: 8px;
+
+		.disconnect-values-threshold-input {
+			width: 100px;
+			height: auto;
+			.disconnect-values-threshold-prefix {
+				padding: 0 8px;
+				font-size: 20px;
+			}
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesSelector.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { Typography } from 'antd';
+import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
+
+import DisconnectValuesModeToggle from './DisconnectValuesModeToggle';
+import DisconnectValuesThresholdInput from './DisconnectValuesThresholdInput';
+
+import './DisconnectValuesSelector.styles.scss';
+
+const DEFAULT_THRESHOLD_SECONDS = 10;
+
+interface DisconnectValuesSelectorProps {
+	value: boolean | number;
+	onChange: (value: boolean | number) => void;
+}
+
+export default function DisconnectValuesSelector({
+	value,
+	onChange,
+}: DisconnectValuesSelectorProps): JSX.Element {
+	const [mode, setMode] = useState<DisconnectedValuesMode>(() => {
+		if (typeof value === 'number') {
+			return DisconnectedValuesMode.Threshold;
+		}
+		return DisconnectedValuesMode.Never;
+	});
+	const [thresholdSeconds, setThresholdSeconds] = useState<number>(
+		typeof value === 'number' ? value : DEFAULT_THRESHOLD_SECONDS,
+	);
+
+	useEffect(() => {
+		if (typeof value === 'boolean') {
+			setMode(DisconnectedValuesMode.Never);
+		} else if (typeof value === 'number') {
+			setMode(DisconnectedValuesMode.Threshold);
+			setThresholdSeconds(value);
+		}
+	}, [value]);
+
+	const handleModeChange = (newMode: DisconnectedValuesMode): void => {
+		setMode(newMode);
+		switch (newMode) {
+			case DisconnectedValuesMode.Never:
+				onChange(true);
+				break;
+			case DisconnectedValuesMode.Threshold:
+				onChange(thresholdSeconds);
+				break;
+		}
+	};
+
+	const handleThresholdChange = (seconds: number): void => {
+		setThresholdSeconds(seconds);
+		onChange(seconds);
+	};
+
+	return (
+		<section className="disconnect-values-selector control-container">
+			<Typography.Text className="section-heading">
+				Disconnect values
+			</Typography.Text>
+			<div className="disconnect-values-input-wrapper">
+				<DisconnectValuesModeToggle value={mode} onChange={handleModeChange} />
+				{mode === DisconnectedValuesMode.Threshold && (
+					<DisconnectValuesThresholdInput
+						value={thresholdSeconds}
+						onChange={handleThresholdChange}
+					/>
+				)}
+			</div>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesThresholdInput.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { rangeUtil } from '@grafana/data';
+import { Input } from '@signozhq/ui';
+interface DisconnectValuesThresholdInputProps {
+	value: number;
+	onChange: (seconds: number) => void;
+}
+
+export default function DisconnectValuesThresholdInput({
+	value,
+	onChange,
+}: DisconnectValuesThresholdInputProps): JSX.Element {
+	const [inputValue, setInputValue] = useState<string>(
+		rangeUtil.secondsToHms(value),
+	);
+
+	useEffect(() => {
+		setInputValue(rangeUtil.secondsToHms(value));
+	}, [value]);
+
+	const commitValue = (txt: string): void => {
+		if (!txt) {
+			return;
+		}
+		try {
+			let seconds: number;
+			if (rangeUtil.isValidTimeSpan(txt)) {
+				seconds = rangeUtil.intervalToSeconds(txt);
+			} else {
+				const parsed = Number(txt);
+				if (Number.isNaN(parsed) || parsed <= 0) {
+					return;
+				}
+				seconds = parsed;
+			}
+			setInputValue(txt);
+			onChange(seconds);
+		} catch (err) {
+			console.warn('Invalid threshold value', err);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+		if (e.key === 'Enter') {
+			commitValue(e.currentTarget.value);
+		}
+	};
+
+	const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
+		commitValue(e.currentTarget.value);
+	};
+
+	return (
+		<Input
+			name="disconnect-values-threshold"
+			className="disconnect-values-threshold-input"
+			prefix={<span className="disconnect-values-threshold-prefix">&gt;</span>}
+			value={inputValue}
+			onChange={(e): void => setInputValue(e.currentTarget.value)}
+			onKeyDown={handleKeyDown}
+			onBlur={handleBlur}
+			autoFocus={false}
+		/>
+	);
+}

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.tsx

@@ -9,7 +9,7 @@ interface FillModeSelectorProps {
 	onChange: (value: FillMode) => void;
 }
 
-export function FillModeSelector({
+export default function FillModeSelector({
 	value,
 	onChange,
 }: FillModeSelectorProps): JSX.Element {

frontend/src/container/NewWidget/RightContainer/components/LineInterpolationSelector/LineInterpolationSelector.tsx

@@ -9,7 +9,7 @@ interface LineInterpolationSelectorProps {
 	onChange: (value: LineInterpolation) => void;
 }
 
-export function LineInterpolationSelector({
+export default function LineInterpolationSelector({
 	value,
 	onChange,
 }: LineInterpolationSelectorProps): JSX.Element {

frontend/src/container/NewWidget/RightContainer/components/LineStyleSelector/LineStyleSelector.tsx

@@ -9,7 +9,7 @@ interface LineStyleSelectorProps {
 	onChange: (value: LineStyle) => void;
 }
 
-export function LineStyleSelector({
+export default function LineStyleSelector({
 	value,
 	onChange,
 }: LineStyleSelectorProps): JSX.Element {

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -262,3 +262,17 @@ export const panelTypeVsShowPoints: {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
+
+export const panelTypeVsSpanGaps: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.BAR]: false,
+	[PANEL_TYPES.HISTOGRAM]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -36,6 +36,7 @@ import {
 	panelTypeVsPanelTimePreferences,
 	panelTypeVsShowPoints,
 	panelTypeVsSoftMinMax,
+	panelTypeVsSpanGaps,
 	panelTypeVsStackingChartPreferences,
 	panelTypeVsThreshold,
 	panelTypeVsYAxisUnit,
@@ -68,6 +69,8 @@ function RightContainer({
 	setLineStyle,
 	showPoints,
 	setShowPoints,
+	spanGaps,
+	setSpanGaps,
 	bucketCount,
 	bucketWidth,
 	stackedBarChart,
@@ -138,6 +141,7 @@ function RightContainer({
 	const allowLineStyle = panelTypeVsLineStyle[selectedGraph];
 	const allowFillMode = panelTypeVsFillMode[selectedGraph];
 	const allowShowPoints = panelTypeVsShowPoints[selectedGraph];
+	const allowSpanGaps = panelTypeVsSpanGaps[selectedGraph];
 
 	const decimapPrecisionOptions = useMemo(
 		() => [
@@ -176,8 +180,15 @@ function RightContainer({
 			(allowFillMode ||
 				allowLineStyle ||
 				allowLineInterpolation ||
-				allowShowPoints),
-		[allowFillMode, allowLineStyle, allowLineInterpolation, allowShowPoints],
+				allowShowPoints ||
+				allowSpanGaps),
+		[
+			allowFillMode,
+			allowLineStyle,
+			allowLineInterpolation,
+			allowShowPoints,
+			allowSpanGaps,
+		],
 	);
 
 	return (
@@ -237,10 +248,13 @@ function RightContainer({
 						setLineInterpolation={setLineInterpolation}
 						showPoints={showPoints}
 						setShowPoints={setShowPoints}
+						spanGaps={spanGaps}
+						setSpanGaps={setSpanGaps}
 						allowFillMode={allowFillMode}
 						allowLineStyle={allowLineStyle}
 						allowLineInterpolation={allowLineInterpolation}
 						allowShowPoints={allowShowPoints}
+						allowSpanGaps={allowSpanGaps}
 					/>
 				)}
 
@@ -364,6 +378,8 @@ export interface RightContainerProps {
 	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
 	showPoints: boolean;
 	setShowPoints: Dispatch<SetStateAction<boolean>>;
+	spanGaps: boolean | number;
+	setSpanGaps: Dispatch<SetStateAction<boolean | number>>;
 }
 
 RightContainer.defaultProps = {

frontend/src/container/NewWidget/index.tsx

@@ -220,6 +220,9 @@ function NewWidget({
 	const [showPoints, setShowPoints] = useState<boolean>(
 		selectedWidget?.showPoints ?? false,
 	);
+	const [spanGaps, setSpanGaps] = useState<boolean | number>(
+		selectedWidget?.spanGaps ?? false,
+	);
 	const [customLegendColors, setCustomLegendColors] = useState<
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
@@ -289,6 +292,7 @@ function NewWidget({
 				fillMode,
 				lineStyle,
 				showPoints,
+				spanGaps,
 				columnUnits,
 				bucketCount,
 				stackedBarChart,
@@ -328,6 +332,7 @@ function NewWidget({
 		fillMode,
 		lineStyle,
 		showPoints,
+		spanGaps,
 		customLegendColors,
 		contextLinks,
 		selectedWidget.columnWidths,
@@ -541,6 +546,7 @@ function NewWidget({
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
+								spanGaps: selectedWidget?.spanGaps ?? true,
 								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
@@ -572,6 +578,7 @@ function NewWidget({
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
+								spanGaps: selectedWidget?.spanGaps ?? true,
 								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
@@ -889,6 +896,8 @@ function NewWidget({
 							setLineStyle={setLineStyle}
 							showPoints={showPoints}
 							setShowPoints={setShowPoints}
+							spanGaps={spanGaps}
+							setSpanGaps={setSpanGaps}
 							opacity={opacity}
 							yAxisUnit={yAxisUnit}
 							columnUnits={columnUnits}

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

@@ -7,6 +7,7 @@ import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFall
 import uPlot, { AlignedData, Options } from 'uplot';
 
 import { usePlotContext } from '../context/PlotContext';
+import { applySpanGapsToAlignedData } from '../utils/dataUtils';
 import { UPlotChartProps } from './types';
 
 /**
@@ -84,7 +85,13 @@ export default function UPlotChart({
 		} as Options;
 
 		// Create new plot instance
-		const plot = new uPlot(plotConfig, data as AlignedData, containerRef.current);
+		const seriesSpanGaps = config.getSeriesSpanGapsOptions();
+		const preparedData =
+			seriesSpanGaps.length > 0
+				? applySpanGapsToAlignedData(data, seriesSpanGaps)
+				: (data as AlignedData);
+
+		const plot = new uPlot(plotConfig, preparedData, containerRef.current);
 
 		if (plotRef) {
 			plotRef(plot);
@@ -162,7 +169,13 @@ export default function UPlotChart({
 		}
 		// Update data if only data changed
 		else if (!sameData(prevProps, currentProps) && plotInstanceRef.current) {
-			plotInstanceRef.current.setData(data as AlignedData);
+			const seriesSpanGaps = config.getSeriesSpanGapsOptions?.() ?? [];
+			const preparedData =
+				seriesSpanGaps.length > 0
+					? applySpanGapsToAlignedData(data as AlignedData, seriesSpanGaps)
+					: (data as AlignedData);
+
+			plotInstanceRef.current.setData(preparedData as AlignedData);
 		}
 
 		prevPropsRef.current = currentProps;

frontend/src/lib/uPlotV2/components/__tests__/UPlotChart.test.tsx

@@ -86,6 +86,7 @@ const createMockConfig = (): UPlotConfigBuilder => {
 		}),
 		getId: jest.fn().mockReturnValue(undefined),
 		getShouldSaveSelectionPreference: jest.fn().mockReturnValue(false),
+		getSeriesSpanGapsOptions: jest.fn().mockReturnValue([]),
 	} as unknown) as UPlotConfigBuilder;
 };
 
@@ -328,6 +329,78 @@ describe('UPlotChart', () => {
 		});
 	});
 
+	describe('spanGaps data transformation', () => {
+		it('inserts null break points before passing data to uPlot when a gap exceeds the numeric threshold', () => {
+			const config = createMockConfig();
+			// gap 0→100 = 100 > threshold 50 → null inserted at midpoint x=50
+			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
+				{ spanGaps: 50 },
+			]);
+			const data: AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+
+			render(<UPlotChart config={config} data={data} width={600} height={400} />, {
+				wrapper: Wrapper,
+			});
+
+			const [, receivedData] = mockUPlotConstructor.mock.calls[0];
+			expect(receivedData[0]).toEqual([0, 50, 100]);
+			expect(receivedData[1]).toEqual([1, null, 2]);
+		});
+
+		it('passes data through unchanged when no gap exceeds the numeric threshold', () => {
+			const config = createMockConfig();
+			// all gaps = 10, threshold = 50 → no insertions, same reference returned
+			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
+				{ spanGaps: 50 },
+			]);
+			const data: AlignedData = [
+				[0, 10, 20],
+				[1, 2, 3],
+			];
+
+			render(<UPlotChart config={config} data={data} width={600} height={400} />, {
+				wrapper: Wrapper,
+			});
+
+			const [, receivedData] = mockUPlotConstructor.mock.calls[0];
+			expect(receivedData).toBe(data);
+		});
+
+		it('transforms data passed to setData when data updates and a new gap exceeds the threshold', () => {
+			const config = createMockConfig();
+			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
+				{ spanGaps: 50 },
+			]);
+
+			// initial render: gap 10 < 50, no transformation
+			const initialData: AlignedData = [
+				[0, 10],
+				[1, 2],
+			];
+			// updated data: gap 100 > 50 → null inserted at midpoint x=50
+			const newData: AlignedData = [
+				[0, 100],
+				[3, 4],
+			];
+
+			const { rerender } = render(
+				<UPlotChart config={config} data={initialData} width={600} height={400} />,
+				{ wrapper: Wrapper },
+			);
+
+			rerender(
+				<UPlotChart config={config} data={newData} width={600} height={400} />,
+			);
+
+			const receivedData = instances[0].setData.mock.calls[0][0];
+			expect(receivedData[0]).toEqual([0, 50, 100]);
+			expect(receivedData[1]).toEqual([3, null, 4]);
+		});
+	});
+
 	describe('prop updates', () => {
 		it('calls setData without recreating the plot when only data changes', () => {
 			const config = createMockConfig();

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

@@ -14,6 +14,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../constants';
 import { calculateWidthBasedOnStepInterval } from '../utils';
+import { SeriesSpanGapsOption } from '../utils/dataUtils';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
@@ -161,6 +162,13 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.series.push(new UPlotSeriesBuilder(props));
 	}
 
+	getSeriesSpanGapsOptions(): SeriesSpanGapsOption[] {
+		return this.series.map((s) => {
+			const { spanGaps } = s.props;
+			return { spanGaps };
+		});
+	}
+
 	/**
 	 * Add a hook for extensibility
 	 */

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

@@ -212,7 +212,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		return {
 			scale: scaleKey,
 			label,
-			spanGaps: typeof spanGaps === 'boolean' ? spanGaps : false,
+			// When spanGaps is numeric, we always disable uPlot's internal
+			// spanGaps behavior and rely on data-prep to implement the
+			// threshold-based null handling. When spanGaps is boolean we
+			// map it directly. When spanGaps is undefined we fall back to
+			// the default of false.
+			spanGaps: typeof spanGaps === 'number' ? false : !!spanGaps,
 			value: (): string => '',
 			pxAlign: true,
 			show,

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

@@ -40,6 +40,37 @@ describe('UPlotSeriesBuilder', () => {
 		expect(typeof config.value).toBe('function');
 	});
 
+	it('maps boolean spanGaps directly to uPlot spanGaps', () => {
+		const trueBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				spanGaps: true,
+			}),
+		);
+		const falseBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				spanGaps: false,
+			}),
+		);
+
+		const trueConfig = trueBuilder.getConfig();
+		const falseConfig = falseBuilder.getConfig();
+
+		expect(trueConfig.spanGaps).toBe(true);
+		expect(falseConfig.spanGaps).toBe(false);
+	});
+
+	it('disables uPlot spanGaps when spanGaps is a number', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				spanGaps: 10000,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.spanGaps).toBe(false);
+	});
+
 	it('uses explicit lineColor when provided, regardless of mapping', () => {
 		const builder = new UPlotSeriesBuilder(
 			createBaseProps({

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

@@ -99,6 +99,11 @@ export interface ScaleProps {
 	distribution?: DistributionType;
 }
 
+export enum DisconnectedValuesMode {
+	Never = 'never',
+	Threshold = 'threshold',
+}
+
 /**
  * Props for configuring a series
  */
@@ -175,7 +180,16 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsFilter?: Series.Points.Filter;
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
-	spanGaps?: boolean;
+	/**
+	 * Controls how nulls are treated for this series.
+	 *
+	 * - boolean: mapped directly to uPlot's spanGaps behavior
+	 * - number: interpreted as an X-axis threshold (same unit as ref values),
+	 *           where gaps smaller than this threshold are spanned by
+	 *           converting short null runs to undefined during data prep
+	 *           while uPlot's internal spanGaps is kept disabled.
+	 */
+	spanGaps?: boolean | number;
 	fillColor?: string;
 	fillMode?: FillMode;
 	isDarkMode?: boolean;

frontend/src/lib/uPlotV2/utils/__tests__/dataUtils.test.ts

@@ -1,4 +1,12 @@
-import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
+import uPlot from 'uplot';
+
+import {
+	applySpanGapsToAlignedData,
+	insertLargeGapNullsIntoAlignedData,
+	isInvalidPlotValue,
+	normalizePlotValue,
+	SeriesSpanGapsOption,
+} from '../dataUtils';
 
 describe('dataUtils', () => {
 	describe('isInvalidPlotValue', () => {
@@ -59,4 +67,217 @@ describe('dataUtils', () => {
 			expect(normalizePlotValue(42.5)).toBe(42.5);
 		});
 	});
+
+	describe('insertLargeGapNullsIntoAlignedData', () => {
+		it('returns original data unchanged when no gap exceeds the threshold', () => {
+			// all gaps = 10, threshold = 25 → no insertions
+			const data: uPlot.AlignedData = [
+				[0, 10, 20, 30],
+				[1, 2, 3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 25 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('does not insert when the gap equals the threshold exactly', () => {
+			// gap = 50, threshold = 50 → condition is gap > threshold, not >=
+			const data: uPlot.AlignedData = [
+				[0, 50],
+				[1, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('inserts a null at the midpoint when a single gap exceeds the threshold', () => {
+			// gap 0→100 = 100 > 50 → insert null at x=50
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100]);
+			expect(result[1]).toEqual([1, null, 2]);
+		});
+
+		it('inserts nulls at every gap that exceeds the threshold', () => {
+			// gaps: 0→100=100, 100→110=10, 110→210=100; threshold=50
+			// → insert at 0→100 and 110→210
+			const data: uPlot.AlignedData = [
+				[0, 100, 110, 210],
+				[1, 2, 3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100, 110, 160, 210]);
+			expect(result[1]).toEqual([1, null, 2, 3, null, 4]);
+		});
+
+		it('inserts null for all series at a gap triggered by any one series', () => {
+			// series 0: threshold=50, gap=100 → triggers insertion
+			// series 1: threshold=200, gap=100 → would not trigger alone
+			// result: both series get null at the inserted x because the x-axis is shared
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+				[3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [
+				{ spanGaps: 50 },
+				{ spanGaps: 200 },
+			];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100]);
+			expect(result[1]).toEqual([1, null, 2]);
+			expect(result[2]).toEqual([3, null, 4]);
+		});
+
+		it('ignores boolean spanGaps options (only numeric values trigger insertion)', () => {
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: true }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('returns original data when series options array is empty', () => {
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, []);
+
+			expect(result).toBe(data);
+		});
+
+		it('returns original data when there is only one x point', () => {
+			const data: uPlot.AlignedData = [[0], [1]];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 10 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('preserves existing null values in the series alongside inserted ones', () => {
+			// original series already has a null; gap 0→100 also triggers insertion
+			const data: uPlot.AlignedData = [
+				[0, 100, 110],
+				[1, null, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100, 110]);
+			expect(result[1]).toEqual([1, null, null, 2]);
+		});
+	});
+
+	describe('applySpanGapsToAlignedData', () => {
+		const xs: uPlot.AlignedData[0] = [0, 10, 20, 30];
+
+		it('returns original data when there are no series', () => {
+			const data: uPlot.AlignedData = [xs];
+			const result = applySpanGapsToAlignedData(data, []);
+
+			expect(result).toBe(data);
+		});
+
+		it('leaves data unchanged when spanGaps is undefined', () => {
+			const ys = [1, null, 2, null];
+			const data: uPlot.AlignedData = [xs, ys];
+			const options: SeriesSpanGapsOption[] = [{}];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[1]).toEqual(ys);
+		});
+
+		it('converts nulls to undefined when spanGaps is true', () => {
+			const ys = [1, null, 2, null];
+			const data: uPlot.AlignedData = [xs, ys];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: true }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[1]).toEqual([1, undefined, 2, undefined]);
+		});
+
+		it('leaves data unchanged when spanGaps is false', () => {
+			const ys = [1, null, 2, null];
+			const data: uPlot.AlignedData = [xs, ys];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: false }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[1]).toEqual(ys);
+		});
+
+		it('inserts a null break point when a gap exceeds the numeric threshold', () => {
+			// gap 0→100 = 100 > 50 → null inserted at midpoint x=50
+			const data: uPlot.AlignedData = [
+				[0, 100, 110],
+				[1, 2, 3],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100, 110]);
+			expect(result[1]).toEqual([1, null, 2, 3]);
+		});
+
+		it('returns original data when no gap exceeds the numeric threshold', () => {
+			// all gaps = 10, threshold = 25 → no insertions
+			const data: uPlot.AlignedData = [xs, [1, 2, 3, 4]];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 25 }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('applies both numeric gap insertion and boolean null-to-undefined in one pass', () => {
+			// series 0: spanGaps: 50 → gap 0→100 triggers a null break at midpoint x=50
+			// series 1: spanGaps: true → the inserted null at x=50 becomes undefined,
+			//   so the line spans over it rather than breaking
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+				[3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [
+				{ spanGaps: 50 },
+				{ spanGaps: true },
+			];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			// x-axis extended with the inserted midpoint
+			expect(result[0]).toEqual([0, 50, 100]);
+			// series 0: null at midpoint breaks the line
+			expect(result[1]).toEqual([1, null, 2]);
+			// series 1: null at midpoint converted to undefined → line spans over it
+			expect(result[2]).toEqual([3, undefined, 4]);
+		});
+	});
 });

frontend/src/lib/uPlotV2/utils/dataUtils.ts

@@ -51,3 +51,163 @@ export function normalizePlotValue(
 	// Already a valid number
 	return value as number;
 }
+
+export interface SeriesSpanGapsOption {
+	spanGaps?: boolean | number;
+}
+
+// Internal type alias: a series value array that may contain nulls/undefineds.
+// uPlot uses null to draw a visible gap and undefined to represent "no sample"
+// (the line continues across undefined points but breaks at null ones).
+type SeriesArray = Array<number | null | undefined>;
+
+/**
+ * Returns true if the given gap size exceeds the numeric spanGaps threshold
+ * of at least one series. Used to decide whether to insert a null break point.
+ */
+function gapExceedsThreshold(
+	gapSize: number,
+	seriesOptions: SeriesSpanGapsOption[],
+): boolean {
+	return seriesOptions.some(
+		({ spanGaps }) =>
+			typeof spanGaps === 'number' && spanGaps > 0 && gapSize > spanGaps,
+	);
+}
+
+/**
+ * For each series with a numeric spanGaps threshold, insert a null data point
+ * between consecutive x timestamps whose gap exceeds the threshold.
+ *
+ * Why: uPlot draws a continuous line between all non-null points. When the
+ * time gap between two consecutive samples is larger than the configured
+ * spanGaps value, we inject a synthetic null at the midpoint so uPlot renders
+ * a visible break instead of a misleading straight line across the gap.
+ *
+ * Because uPlot's AlignedData shares a single x-axis across all series, a null
+ * is inserted for every series at each position where any series needs a break.
+ *
+ * Two-pass approach for performance:
+ *   Pass 1 — count how many nulls will be inserted (no allocations).
+ *   Pass 2 — fill pre-allocated output arrays by index (no push/reallocation).
+ */
+export function insertLargeGapNullsIntoAlignedData(
+	data: uPlot.AlignedData,
+	seriesOptions: SeriesSpanGapsOption[],
+): uPlot.AlignedData {
+	const [xValues, ...seriesValues] = data;
+
+	if (
+		!Array.isArray(xValues) ||
+		xValues.length < 2 ||
+		seriesValues.length === 0
+	) {
+		return data;
+	}
+
+	const xs = xValues as number[];
+	const n = xs.length;
+
+	// Pass 1: count insertions needed so we know the exact output length.
+	// This lets us pre-allocate arrays rather than growing them dynamically.
+	let insertionCount = 0;
+	for (let i = 0; i < n - 1; i += 1) {
+		if (gapExceedsThreshold(xs[i + 1] - xs[i], seriesOptions)) {
+			insertionCount += 1;
+		}
+	}
+
+	// No gaps exceed any threshold — return the original data unchanged.
+	if (insertionCount === 0) {
+		return data;
+	}
+
+	// Pass 2: build output arrays of exact size and fill them.
+	// `out` is the write cursor into the output arrays.
+	const outputLen = n + insertionCount;
+	const newX = new Array<number>(outputLen);
+	const newSeries: SeriesArray[] = seriesValues.map(
+		() => new Array<number | null | undefined>(outputLen),
+	);
+
+	let out = 0;
+	for (let i = 0; i < n; i += 1) {
+		// Copy the real data point at position i
+		newX[out] = xs[i];
+		for (let s = 0; s < seriesValues.length; s += 1) {
+			newSeries[s][out] = (seriesValues[s] as SeriesArray)[i];
+		}
+		out += 1;
+
+		// If the gap to the next x timestamp exceeds the threshold, insert a
+		// synthetic null at the midpoint. The midpoint x is placed halfway
+		// between xs[i] and xs[i+1] (minimum 1 unit past xs[i] to stay unique).
+		if (i < n - 1 && gapExceedsThreshold(xs[i + 1] - xs[i], seriesOptions)) {
+			newX[out] = xs[i] + Math.max(1, Math.floor((xs[i + 1] - xs[i]) / 2));
+			for (let s = 0; s < seriesValues.length; s += 1) {
+				newSeries[s][out] = null; // null tells uPlot to break the line here
+			}
+			out += 1;
+		}
+	}
+
+	return [newX, ...newSeries] as uPlot.AlignedData;
+}
+
+/**
+ * Apply per-series spanGaps (boolean | number) handling to an aligned dataset.
+ *
+ * spanGaps controls how uPlot handles gaps in a series:
+ *   - boolean true  → convert null → undefined so uPlot spans over every gap
+ *                     (draws a continuous line, skipping missing samples)
+ *   - boolean false → no change; nulls render as visible breaks (default)
+ *   - number        → insert a null break point between any two consecutive
+ *                     timestamps whose difference exceeds the threshold;
+ *                     gaps smaller than the threshold are left as-is
+ *
+ * The input data is expected to be of the form:
+ * [xValues, series1Values, series2Values, ...]
+ */
+export function applySpanGapsToAlignedData(
+	data: uPlot.AlignedData,
+	seriesOptions: SeriesSpanGapsOption[],
+): uPlot.AlignedData {
+	const [xValues, ...seriesValues] = data;
+
+	if (!Array.isArray(xValues) || seriesValues.length === 0) {
+		return data;
+	}
+
+	// Numeric spanGaps: operates on the whole dataset at once because inserting
+	// null break points requires modifying the shared x-axis.
+	const hasNumericSpanGaps = seriesOptions.some(
+		({ spanGaps }) => typeof spanGaps === 'number',
+	);
+	const gapProcessed = hasNumericSpanGaps
+		? insertLargeGapNullsIntoAlignedData(data, seriesOptions)
+		: data;
+
+	// Boolean spanGaps === true: convert null → undefined per series so uPlot
+	// draws a continuous line across missing samples instead of breaking it.
+	// Skip this pass entirely if no series uses spanGaps: true.
+	const hasBooleanTrue = seriesOptions.some(({ spanGaps }) => spanGaps === true);
+	if (!hasBooleanTrue) {
+		return gapProcessed;
+	}
+
+	const [newX, ...newSeries] = gapProcessed;
+	const transformedSeries = newSeries.map((ys, idx) => {
+		const { spanGaps } = seriesOptions[idx] ?? {};
+		if (spanGaps !== true) {
+			// This series doesn't use spanGaps: true — leave it unchanged.
+			return ys;
+		}
+		// Replace null with undefined: uPlot skips undefined points without
+		// breaking the line, effectively spanning over the gap.
+		return (ys as SeriesArray).map((v) =>
+			v === null ? undefined : v,
+		) as uPlot.AlignedData[0];
+	});
+
+	return [newX, ...transformedSeries] as uPlot.AlignedData;
+}

frontend/src/types/api/dashboard/getAll.ts

@@ -141,6 +141,7 @@ export interface IBaseWidget {
 	showPoints?: boolean;
 	lineStyle?: LineStyle;
 	fillMode?: FillMode;
+	spanGaps?: boolean | number;
 }
 export interface Widgets extends IBaseWidget {
 	query: Query;

frontend/yarn.lock

@@ -4506,6 +4506,19 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-escape-keydown" "1.1.1"
 
+"@radix-ui/react-dropdown-menu@^2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz#5ee045c62bad8122347981c479d92b1ff24c7254"
+  integrity sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-menu" "2.1.16"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-focus-guards@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
@@ -4565,6 +4578,30 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-menu@2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.16.tgz#528a5a973c3a7413d3d49eb9ccd229aa52402911"
+  integrity sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-popper" "1.2.8"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-popover@^1.1.15", "@radix-ui/react-popover@^1.1.2":
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.15.tgz#9c852f93990a687ebdc949b2c3de1f37cdc4c5d5"
@@ -4804,6 +4841,20 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-tabs@^1.1.3":
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz#3537ce379d7e7ff4eeb6b67a0973e139c2ac1f15"
+  integrity sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-toggle-group@^1.1.7":
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz#e513d6ffdb07509b400ab5b26f2523747c0d51c1"
@@ -5675,6 +5726,42 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/ui@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.4.tgz#2a9c403900311298d881ca9feb6245d94ca0aa0e"
+  integrity sha512-ViiLsAciCzUgHCu3uDCOEMmjE6OkLpA2g8xvjjbbzi4XFosYBhEASx1Pf3a4f5wlh/JID7z12DOc5YnjzEcn4Q==
+  dependencies:
+    "@radix-ui/react-checkbox" "^1.2.3"
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-dropdown-menu" "^2.1.16"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-popover" "^1.1.15"
+    "@radix-ui/react-radio-group" "^1.3.4"
+    "@radix-ui/react-slot" "^1.2.3"
+    "@radix-ui/react-switch" "^1.1.4"
+    "@radix-ui/react-tabs" "^1.1.3"
+    "@radix-ui/react-toggle" "^1.1.6"
+    "@radix-ui/react-toggle-group" "^1.1.7"
+    "@radix-ui/react-tooltip" "^1.2.6"
+    "@tanstack/react-table" "^8.21.3"
+    "@tanstack/react-virtual" "^3.13.9"
+    "@types/lodash-es" "^4.17.12"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    cmdk "^1.1.1"
+    date-fns "^4.1.0"
+    dayjs "^1.11.10"
+    lodash-es "^4.17.21"
+    lucide-react "^0.445.0"
+    lucide-solid "^0.510.0"
+    motion "^11.11.17"
+    next-themes "^0.4.6"
+    nuqs "^2.8.9"
+    react-day-picker "^9.8.1"
+    react-resizable-panels "^4.7.1"
+    sonner "^2.0.7"
+    tailwind-merge "^3.5.0"
+
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz"
@@ -9573,6 +9660,11 @@ dayjs@^1.10.7, dayjs@^1.11.1:
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
+dayjs@^1.11.10:
+  version "1.11.20"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.20.tgz#88d919fd639dc991415da5f4cb6f1b6650811938"
+  integrity sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -11092,6 +11184,15 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^11.18.2:
+  version "11.18.2"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.18.2.tgz#0c6bd05677f4cfd3b3bdead4eb5ecdd5ed245718"
+  integrity sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==
+  dependencies:
+    motion-dom "^11.18.1"
+    motion-utils "^11.18.1"
+    tslib "^2.4.0"
+
 framer-motion@^12.4.13:
   version "12.4.13"
   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.4.13.tgz#1efd954f95e6a54685b660929c00f5a61e35256a"
@@ -15002,6 +15103,13 @@ moment@^2.29.4:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
+motion-dom@^11.18.1:
+  version "11.18.1"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-11.18.1.tgz#e7fed7b7dc6ae1223ef1cce29ee54bec826dc3f2"
+  integrity sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==
+  dependencies:
+    motion-utils "^11.18.1"
+
 motion-dom@^12.4.11:
   version "12.4.11"
   resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.4.11.tgz#0419c8686cda4d523f08249deeb8fa6683a9b9d3"
@@ -15009,6 +15117,11 @@ motion-dom@^12.4.11:
   dependencies:
     motion-utils "^12.4.10"
 
+motion-utils@^11.18.1:
+  version "11.18.1"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-11.18.1.tgz#671227669833e991c55813cf337899f41327db5b"
+  integrity sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==
+
 motion-utils@^12.4.10:
   version "12.4.10"
   resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.4.10.tgz#3d93acea5454419eaaad8d5e5425cb71cbfa1e7f"
@@ -15022,6 +15135,14 @@ motion@12.4.13:
     framer-motion "^12.4.13"
     tslib "^2.4.0"
 
+motion@^11.11.17:
+  version "11.18.2"
+  resolved "https://registry.yarnpkg.com/motion/-/motion-11.18.2.tgz#17fb372f3ed94fc9ee1384a25a9068e9da1951e7"
+  integrity sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==
+  dependencies:
+    framer-motion "^11.18.2"
+    tslib "^2.4.0"
+
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -15292,6 +15413,13 @@ nuqs@2.8.8:
   dependencies:
     "@standard-schema/spec" "1.0.0"
 
+nuqs@^2.8.9:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/nuqs/-/nuqs-2.8.9.tgz#e2c27d87c0dd0e3b4412fe867bcd0947cc4c998f"
+  integrity sha512-8ou6AEwsxMWSYo2qkfZtYFVzngwbKmg4c00HVxC1fF6CEJv3Fwm6eoZmfVPALB+vw8Udo7KL5uy96PFcYe1BIQ==
+  dependencies:
+    "@standard-schema/spec" "1.0.0"
+
 nwsapi@^2.2.2:
   version "2.2.23"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.23.tgz#59712c3a88e6de2bb0b6ccc1070397267019cf6c"
@@ -16957,6 +17085,11 @@ react-resizable-panels@^3.0.5:
   resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-3.0.5.tgz#50a20645263eed02344de4a70d1319bbc0014bbd"
   integrity sha512-3z1yN25DMTXLg2wfyFrW32r5k4WEcUa3F7cJ2EgtNK07lnOs4mpM8yWLGunCpkhcQRwJX4fqoLcIh/pHPxzlmQ==
 
+react-resizable-panels@^4.7.1:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-4.7.3.tgz#4040aa0f5c5c4cc4bb685cb69973601ccda3b014"
+  integrity sha512-PYcYMLtvJD+Pr0TQNeMvddcnLOwUa/Yb4iNwU7ThNLlHaQYEEC9MIBWHaBGODzYuXIkPRZ/OWe5sbzG1Rzq5ew==
+
 react-resizable@3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz"
@@ -18797,6 +18930,11 @@ tailwind-merge@^2.5.2:
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.6.0.tgz#ac5fb7e227910c038d458f396b7400d93a3142d5"
   integrity sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==
 
+tailwind-merge@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.5.0.tgz#06502f4496ba15151445d97d916a26564d50d1ca"
+  integrity sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==
+
 tailwindcss-animate@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"

pkg/modules/user/config.go

@@ -27,12 +27,7 @@ type OrgConfig struct {
 }
 
 type PasswordConfig struct {
-	Invite InviteConfig `mapstructure:"invite"`
-	Reset  ResetConfig  `mapstructure:"reset"`
-}
-
-type InviteConfig struct {
-	MaxTokenLifetime time.Duration `mapstructure:"max_token_lifetime"`
+	Reset ResetConfig `mapstructure:"reset"`
 }
 
 type ResetConfig struct {
@@ -51,9 +46,6 @@ func newConfig() factory.Config {
 				AllowSelf:        false,
 				MaxTokenLifetime: 6 * time.Hour,
 			},
-			Invite: InviteConfig{
-				MaxTokenLifetime: 48 * time.Hour,
-			},
 		},
 		Root: RootConfig{
 			Enabled: false,
@@ -69,10 +61,6 @@ func (c Config) Validate() error {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::password::reset::max_token_lifetime must be positive")
 	}
 
-	if c.Password.Invite.MaxTokenLifetime <= 0 {
-		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::password::invite::max_token_lifetime must be positive")
-	}
-
 	if c.Root.Enabled {
 		if c.Root.Email.IsZero() {
 			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::email is required when root user is enabled")

pkg/modules/user/impluser/module.go

@@ -203,7 +203,7 @@ func (m *Module) CreateBulkInvite(ctx context.Context, orgID valuer.UUID, userID
 
 		resetLink := userWithToken.ResetPasswordToken.FactorPasswordResetLink(frontendBaseUrl)
 
-		tokenLifetime := m.config.Password.Invite.MaxTokenLifetime
+		tokenLifetime := m.config.Password.Reset.MaxTokenLifetime
 		humanizedTokenLifetime := strings.TrimSpace(humanize.RelTime(time.Now(), time.Now().Add(tokenLifetime), "", ""))
 
 		if err := m.emailing.SendHTML(ctx, userWithToken.User.Email.String(), "You're Invited to Join SigNoz", emailtypes.TemplateNameInvitationEmail, map[string]any{
@@ -460,11 +460,7 @@ func (module *Module) GetOrCreateResetPasswordToken(ctx context.Context, userID
 	}
 
 	// create a new token
-	tokenLifetime := module.config.Password.Reset.MaxTokenLifetime
-	if user.Status == types.UserStatusPendingInvite {
-		tokenLifetime = module.config.Password.Invite.MaxTokenLifetime
-	}
-	resetPasswordToken, err := types.NewResetPasswordToken(password.ID, time.Now().Add(tokenLifetime))
+	resetPasswordToken, err := types.NewResetPasswordToken(password.ID, time.Now().Add(module.config.Password.Reset.MaxTokenLifetime))
 	if err != nil {
 		return nil, err
 	}
@@ -504,9 +500,6 @@ func (module *Module) ForgotPassword(ctx context.Context, orgID valuer.UUID, ema
 	resetLink := token.FactorPasswordResetLink(frontendBaseURL)
 
 	tokenLifetime := module.config.Password.Reset.MaxTokenLifetime
-	if user.Status == types.UserStatusPendingInvite {
-		tokenLifetime = module.config.Password.Invite.MaxTokenLifetime
-	}
 	humanizedTokenLifetime := strings.TrimSpace(humanize.RelTime(time.Now(), time.Now().Add(tokenLifetime), "", ""))
 
 	if err := module.emailing.SendHTML(

pkg/signoz/provider.go

@@ -175,7 +175,6 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewMigrateRulesV4ToV5Factory(sqlstore, telemetryStore),
 		sqlmigration.NewAddStatusUserFactory(sqlstore, sqlschema),
 		sqlmigration.NewDeprecateUserInviteFactory(sqlstore, sqlschema),
-		sqlmigration.NewFixCloudIntegrationUniqueIndexFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/sqlmigration/069_fix_cloud_integration_index.go

@@ -1,264 +0,0 @@
-package sqlmigration
-
-import (
-	"context"
-	"database/sql"
-	"encoding/json"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/uptrace/bun"
-	"github.com/uptrace/bun/migrate"
-)
-
-type fixCloudIntegrationUniqueIndex struct {
-	sqlstore  sqlstore.SQLStore
-	sqlschema sqlschema.SQLSchema
-}
-
-func NewFixCloudIntegrationUniqueIndexFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
-	return factory.NewProviderFactory(
-		factory.MustNewName("fix_cloud_integration_index"),
-		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
-			return &fixCloudIntegrationUniqueIndex{
-				sqlstore:  sqlstore,
-				sqlschema: sqlschema,
-			}, nil
-		},
-	)
-}
-
-func (migration *fixCloudIntegrationUniqueIndex) Register(migrations *migrate.Migrations) error {
-	if err := migrations.Register(migration.Up, migration.Down); err != nil {
-		return err
-	}
-
-	return nil
-}
-
-type cloudIntegrationRow struct {
-	bun.BaseModel `bun:"table:cloud_integration"`
-
-	ID        string    `bun:"id"`
-	AccountID string    `bun:"account_id"`
-	Provider  string    `bun:"provider"`
-	OrgID     string    `bun:"org_id"`
-	Config    string    `bun:"config"`
-	UpdatedAt time.Time `bun:"updated_at"`
-}
-
-type cloudIntegrationAccountConfig struct {
-	Regions []string `json:"regions"`
-}
-
-// duplicateGroup holds the keeper (first element) and losers (rest) for a duplicate (account_id, provider, org_id) group.
-type duplicateGroup struct {
-	keeper *cloudIntegrationRow
-	losers []*cloudIntegrationRow
-}
-
-func (migration *fixCloudIntegrationUniqueIndex) Up(ctx context.Context, db *bun.DB) error {
-	tx, err := db.BeginTx(ctx, nil)
-	if err != nil {
-		return err
-	}
-	defer func() {
-		_ = tx.Rollback()
-	}()
-
-	// Step 1: Drop the wrong index on (id, provider, org_id)
-	dropSqls := migration.sqlschema.Operator().DropIndex(
-		(&sqlschema.UniqueIndex{
-			TableName:   "cloud_integration",
-			ColumnNames: []sqlschema.ColumnName{"id", "provider", "org_id"},
-		}).Named("unique_cloud_integration"),
-	)
-	for _, sql := range dropSqls {
-		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
-			return err
-		}
-	}
-
-	// Step 2: Normalize empty-string account_id to NULL
-	// Older table structure could store "" instead of NULL for unconnected accounts.
-	// Empty strings would violate the partial unique index since '' = '' (unlike NULL != NULL).
-	_, err = tx.NewUpdate().
-		TableExpr("cloud_integration").
-		Set("account_id = NULL").
-		Where("account_id = ''").
-		Exec(ctx)
-	if err != nil {
-		return err
-	}
-
-	// Step 3: Fetch all active rows with non-null account_id, ordered for grouping
-	var activeRows []*cloudIntegrationRow
-	err = tx.NewSelect().
-		Model(&activeRows).
-		Where("removed_at IS NULL").
-		Where("account_id IS NOT NULL").
-		OrderExpr("account_id, provider, org_id, updated_at DESC").
-		Scan(ctx)
-	if err != nil && !errors.Is(err, sql.ErrNoRows) {
-		return err
-	}
-
-	// Group by (account_id, provider, org_id)
-	groups := groupCloudIntegrationRows(activeRows)
-
-	now := time.Now()
-	var loserIDs []string
-
-	for _, group := range groups {
-		if len(group.losers) == 0 {
-			continue
-		}
-
-		// Step 4: Merge config from losers into keeper
-		if err = mergeCloudIntegrationConfigs(ctx, tx, group); err != nil {
-			return err
-		}
-
-		// Step 5: Reassign orphaned cloud_integration_service rows
-		for _, loser := range group.losers {
-			// Delete services from loser that would conflict with keeper's services (same type)
-			_, err = tx.NewDelete().
-				TableExpr("cloud_integration_service").
-				Where("cloud_integration_id = ?", loser.ID).
-				Where("type IN (?)",
-					tx.NewSelect().
-						TableExpr("cloud_integration_service").
-						Column("type").
-						Where("cloud_integration_id = ?", group.keeper.ID),
-				).
-				Exec(ctx)
-			if err != nil {
-				return err
-			}
-
-			// Reassign remaining services to the keeper
-			_, err = tx.ExecContext(ctx,
-				"UPDATE cloud_integration_service SET cloud_integration_id = ? WHERE cloud_integration_id = ?",
-				group.keeper.ID, loser.ID,
-			)
-			if err != nil {
-				return err
-			}
-
-			loserIDs = append(loserIDs, loser.ID)
-		}
-	}
-
-	// Step 6: Soft-delete all loser rows
-	if len(loserIDs) > 0 {
-		_, err = tx.NewUpdate().
-			TableExpr("cloud_integration").
-			Set("removed_at = ?", now).
-			Set("updated_at = ?", now).
-			Where("id IN (?)", bun.In(loserIDs)).
-			Exec(ctx)
-		if err != nil {
-			return err
-		}
-	}
-
-	// Step 7: Create the correct partial unique index on (account_id, provider, org_id) WHERE removed_at IS NULL
-	createSqls := migration.sqlschema.Operator().CreateIndex(
-		&sqlschema.PartialUniqueIndex{
-			TableName:   "cloud_integration",
-			ColumnNames: []sqlschema.ColumnName{"account_id", "provider", "org_id"},
-			Where:       "removed_at IS NULL",
-		},
-	)
-	for _, sql := range createSqls {
-		if _, err = tx.ExecContext(ctx, string(sql)); err != nil {
-			return err
-		}
-	}
-
-	return tx.Commit()
-}
-
-func (migration *fixCloudIntegrationUniqueIndex) Down(ctx context.Context, db *bun.DB) error {
-	return nil
-}
-
-// groupCloudIntegrationRows groups rows by (account_id, provider, org_id).
-// Rows must be pre-sorted by account_id, provider, org_id, updated_at DESC
-// so the first row in each group is the keeper (most recently updated).
-func groupCloudIntegrationRows(rows []*cloudIntegrationRow) []duplicateGroup {
-	if len(rows) == 0 {
-		return nil
-	}
-
-	var groups []duplicateGroup
-	var current duplicateGroup
-	current.keeper = rows[0]
-
-	for i := 1; i < len(rows); i++ {
-		row := rows[i]
-		if row.AccountID == current.keeper.AccountID &&
-			row.Provider == current.keeper.Provider &&
-			row.OrgID == current.keeper.OrgID {
-			current.losers = append(current.losers, row)
-		} else {
-			groups = append(groups, current)
-			current = duplicateGroup{keeper: row}
-		}
-	}
-	groups = append(groups, current)
-
-	return groups
-}
-
-// mergeCloudIntegrationConfigs unions the EnabledRegions from all rows in the group into the keeper's config and updates
-func mergeCloudIntegrationConfigs(ctx context.Context, tx bun.Tx, group duplicateGroup) error {
-	regionSet := make(map[string]struct{})
-
-	// Parse keeper's config
-	parseRegions(group.keeper.Config, regionSet)
-
-	// Parse each loser's config
-	for _, loser := range group.losers {
-		parseRegions(loser.Config, regionSet)
-	}
-
-	// Build merged config
-	mergedRegions := make([]string, 0, len(regionSet))
-	for region := range regionSet {
-		mergedRegions = append(mergedRegions, region)
-	}
-
-	merged := cloudIntegrationAccountConfig{Regions: mergedRegions}
-	mergedJSON, err := json.Marshal(merged)
-	if err != nil {
-		return err
-	}
-
-	// Update keeper's config
-	_, err = tx.NewUpdate().
-		TableExpr("cloud_integration").
-		Set("config = ?", string(mergedJSON)).
-		Where("id = ?", group.keeper.ID).
-		Exec(ctx)
-	return err
-}
-
-// parseRegions unmarshals a config JSON string and adds its regions to the set.
-func parseRegions(configJSON string, regionSet map[string]struct{}) {
-	if configJSON == "" {
-		return
-	}
-
-	var config cloudIntegrationAccountConfig
-	if err := json.Unmarshal([]byte(configJSON), &config); err != nil {
-		return
-	}
-
-	for _, region := range config.Regions {
-		regionSet[region] = struct{}{}
-	}
-}