fix(uplotV2): tooltip list clips last row and over-scrolls (#11883)

The Virtuoso scroller height was set to min(totalListHeight, 300), but the
scroll viewport adds 8px top + 8px bottom padding that totalListHeight does
not account for. The box was therefore ~16px shorter than its content,
clipping the last row and showing a scrollbar even when every row would fit.

Add the viewport's vertical padding back into the computed height so it only
scrolls once content genuinely exceeds the max height.

docs/api/openapi.yml

@@ -2553,17 +2553,6 @@ components:
         url:
           type: string
       type: object
-    DashboardTextVariableSpec:
-      properties:
-        constant:
-          type: boolean
-        display:
-          $ref: '#/components/schemas/VariableDisplay'
-        name:
-          type: string
-        value:
-          type: string
-      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2761,24 +2750,23 @@ components:
     DashboardtypesDatasourcePlugin:
       discriminator:
         mapping:
-          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
         propertyName: kind
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
       type: object
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
       type: string
-    DashboardtypesDatasourcePluginVariantStruct:
+    DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec:
       properties:
         kind:
           enum:
           - signoz/Datasource
           type: string
         spec:
-          nullable: true
-          type: object
+          $ref: '#/components/schemas/DashboardtypesSigNozDatasourceSpec'
       required:
       - kind
       - spec
@@ -2944,9 +2932,15 @@ components:
             type: string
           nullable: true
           type: object
+        mode:
+          $ref: '#/components/schemas/DashboardtypesLegendMode'
         position:
           $ref: '#/components/schemas/DashboardtypesLegendPosition'
       type: object
+    DashboardtypesLegendMode:
+      enum:
+      - list
+      type: string
     DashboardtypesLegendPosition:
       enum:
       - bottom
@@ -2993,19 +2987,30 @@ components:
         customAllValue:
           type: string
         defaultValue:
-          $ref: '#/components/schemas/VariableDefaultValue'
+          $ref: '#/components/schemas/DashboardtypesVariableDefaultValue'
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
+          minLength: 1
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesVariablePlugin'
         sort:
-          nullable: true
-          type: string
+          $ref: '#/components/schemas/DashboardtypesListVariableSpecSort'
       required:
       - display
+      - name
       type: object
+    DashboardtypesListVariableSpecSort:
+      enum:
+      - none
+      - alphabetical-asc
+      - alphabetical-desc
+      - numerical-asc
+      - numerical-desc
+      - alphabetical-ci-asc
+      - alphabetical-ci-desc
+      type: string
     DashboardtypesListableDashboardForUserV2:
       properties:
         dashboards:
@@ -3303,7 +3308,6 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
-          nullable: true
           type: array
       required:
       - display
@@ -3506,6 +3510,8 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesSigNozDatasourceSpec:
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -3515,8 +3521,13 @@ components:
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
+          description: The maximum gap size to connect when fillOnlyBelow is true.
+            Gaps larger than this duration are left disconnected.
           type: string
         fillOnlyBelow:
+          description: Controls whether lines connect across null values. When false
+            (default), all gaps are connected. When true, only gaps smaller than fillLessThan
+            are connected.
           type: boolean
       type: object
     DashboardtypesStorableDashboardData:
@@ -3564,6 +3575,22 @@ components:
       - color
       - columnName
       type: object
+    DashboardtypesTextVariableSpec:
+      properties:
+        constant:
+          type: boolean
+        display:
+          $ref: '#/components/schemas/DashboardtypesDisplay'
+        name:
+          minLength: 1
+          type: string
+        value:
+          type: string
+      required:
+      - display
+      - value
+      - name
+      type: object
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -3583,7 +3610,6 @@ components:
       required:
       - value
       - color
-      - label
       type: object
     DashboardtypesTimePreference:
       enum:
@@ -3668,24 +3694,18 @@ components:
       discriminator:
         mapping:
           ListVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
       type: object
-    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
-      properties:
-        kind:
-          enum:
-          - TextVariable
+    DashboardtypesVariableDefaultValue:
+      oneOf:
+      - type: string
+      - items:
           type: string
-        spec:
-          $ref: '#/components/schemas/DashboardTextVariableSpec'
-      required:
-      - kind
-      - spec
-      type: object
+        type: array
     DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec:
       properties:
         kind:
@@ -3698,6 +3718,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec:
+      properties:
+        kind:
+          enum:
+          - TextVariable
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTextVariableSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesVariablePlugin:
       discriminator:
         mapping:
@@ -3771,15 +3803,12 @@ components:
         type:
           type: string
         url:
-          nullable: true
           type: string
       required:
       - type
       - code
       - message
-      - url
       - errors
-      - retry
       - suggestions
       type: object
     ErrorsResponseerroradditional:
@@ -3795,7 +3824,6 @@ components:
       - suggestions
       type: object
     ErrorsResponseretryjson:
-      nullable: true
       properties:
         delay:
           $ref: '#/components/schemas/TimeDuration'
@@ -8144,17 +8172,6 @@ components:
       required:
       - id
       type: object
-    VariableDefaultValue:
-      type: object
-    VariableDisplay:
-      properties:
-        description:
-          type: string
-        hidden:
-          type: boolean
-        name:
-          type: string
-      type: object
     ZeustypesGettableHost:
       properties:
         hosts:

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2185,14 +2185,9 @@ export interface ErrorsResponseerroradditionalDTO {
 	suggestions: string[];
 }
 
-export type ErrorsResponseretryjsonDTOAnyOf = {
+export interface ErrorsResponseretryjsonDTO {
 	delay: TimeDurationDTO;
-};
-
-/**
- * @nullable
- */
-export type ErrorsResponseretryjsonDTO = ErrorsResponseretryjsonDTOAnyOf | null;
+}
 
 export interface ErrorsJSONDTO {
 	/**
@@ -2207,7 +2202,7 @@ export interface ErrorsJSONDTO {
 	 * @type string
 	 */
 	message: string;
-	retry: ErrorsResponseretryjsonDTO | null;
+	retry?: ErrorsResponseretryjsonDTO;
 	/**
 	 * @type array
 	 */
@@ -2217,9 +2212,9 @@ export interface ErrorsJSONDTO {
 	 */
 	type: string;
 	/**
-	 * @type string,null
+	 * @type string
 	 */
-	url: string | null;
+	url?: string;
 }
 
 export interface AuthtypesOrgSessionContextDTO {
@@ -3271,37 +3266,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface VariableDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	hidden?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
-export interface DashboardTextVariableSpecDTO {
-	/**
-	 * @type boolean
-	 */
-	constant?: boolean;
-	display?: VariableDisplayDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	value?: string;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3333,6 +3297,9 @@ export interface DashboardtypesPanelFormattingDTO {
 	unit?: string;
 }
 
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
 export enum DashboardtypesLegendPositionDTO {
 	bottom = 'bottom',
 	right = 'right',
@@ -3352,6 +3319,7 @@ export interface DashboardtypesLegendDTO {
 	 * @type object,null
 	 */
 	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
 	position?: DashboardtypesLegendPositionDTO;
 }
 
@@ -3363,7 +3331,7 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	/**
 	 * @type string
 	 */
-	label: string;
+	label?: string;
 	/**
 	 * @type string
 	 */
@@ -3973,33 +3941,24 @@ export interface DashboardtypesDashboardPanelRefDTO {
 	panelName: string;
 }
 
-export enum DashboardtypesDatasourcePluginVariantStructDTOKind {
+export enum DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind {
 	'signoz/Datasource' = 'signoz/Datasource',
 }
-export type DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf = {
+export interface DashboardtypesSigNozDatasourceSpecDTO {
 	[key: string]: unknown;
-};
+}
 
-/**
- * @nullable
- */
-export type DashboardtypesDatasourcePluginVariantStructDTOSpec =
-	DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf | null;
-
-export interface DashboardtypesDatasourcePluginVariantStructDTO {
+export interface DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO {
 	/**
 	 * @enum signoz/Datasource
 	 * @type string
 	 */
-	kind: DashboardtypesDatasourcePluginVariantStructDTOKind;
-	/**
-	 * @type object,null
-	 */
-	spec: DashboardtypesDatasourcePluginVariantStructDTOSpec;
+	kind: DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind;
+	spec: DashboardtypesSigNozDatasourceSpecDTO;
 }
 
 export type DashboardtypesDatasourcePluginDTO =
-	DashboardtypesDatasourcePluginVariantStructDTO;
+	DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO;
 
 export interface DashboardtypesDatasourceSpecDTO {
 	/**
@@ -4049,10 +4008,12 @@ export enum DashboardtypesLineStyleDTO {
 export interface DashboardtypesSpanGapsDTO {
 	/**
 	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
 	 */
 	fillLessThan?: string;
 	/**
 	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
 	 */
 	fillOnlyBelow?: boolean;
 }
@@ -4592,9 +4553,9 @@ export interface DashboardtypesPanelSpecDTO {
 	links?: DashboardLinkDTO[];
 	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	queries: DashboardtypesQueryDTO[] | null;
+	queries: DashboardtypesQueryDTO[];
 }
 
 export interface DashboardtypesPanelDTO {
@@ -4624,9 +4585,7 @@ export type DashboardtypesLayoutDTO =
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
 }
-export interface VariableDefaultValueDTO {
-	[key: string]: unknown;
-}
+export type DashboardtypesVariableDefaultValueDTO = string | string[];
 
 export enum DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind {
 	'signoz/DynamicVariable' = 'signoz/DynamicVariable',
@@ -4684,6 +4643,15 @@ export type DashboardtypesVariablePluginDTO =
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTO
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTO;
 
+export enum DashboardtypesListVariableSpecSortDTO {
+	none = 'none',
+	'alphabetical-asc' = 'alphabetical-asc',
+	'alphabetical-desc' = 'alphabetical-desc',
+	'numerical-asc' = 'numerical-asc',
+	'numerical-desc' = 'numerical-desc',
+	'alphabetical-ci-asc' = 'alphabetical-ci-asc',
+	'alphabetical-ci-desc' = 'alphabetical-ci-desc',
+}
 export interface DashboardtypesListVariableSpecDTO {
 	/**
 	 * @type boolean
@@ -4701,17 +4669,15 @@ export interface DashboardtypesListVariableSpecDTO {
 	 * @type string
 	 */
 	customAllValue?: string;
-	defaultValue?: VariableDefaultValueDTO;
+	defaultValue?: DashboardtypesVariableDefaultValueDTO;
 	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
+	 * @minLength 1
 	 */
-	name?: string;
+	name: string;
 	plugin?: DashboardtypesVariablePluginDTO;
-	/**
-	 * @type string,null
-	 */
-	sort?: string | null;
+	sort?: DashboardtypesListVariableSpecSortDTO;
 }
 
 export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO {
@@ -4723,21 +4689,38 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
+export interface DashboardtypesTextVariableSpecDTO {
+	/**
+	 * @type boolean
+	 */
+	constant?: boolean;
+	display: DashboardtypesDisplayDTO;
+	/**
+	 * @type string
+	 * @minLength 1
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
-	spec: DashboardTextVariableSpecDTO;
+	kind: DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind;
+	spec: DashboardtypesTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -48,6 +48,48 @@ describe('getAutoContexts', () => {
 		]);
 	});
 
+	it('includes the query in alert edit context', () => {
+		const ruleId = 'rule-edit';
+		const query = { queryType: 'builder', builder: { queryData: [] } };
+		const compositeQuery = encodeURIComponent(JSON.stringify(query));
+		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.compositeQuery}=${compositeQuery}`;
+
+		const contexts = getAutoContexts(ROUTES.EDIT_ALERTS, search);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: ruleId,
+				metadata: {
+					page: 'alert_edit',
+					ruleId,
+					query,
+				},
+			},
+		]);
+	});
+
+	it('includes the query in alert new context (no ruleId)', () => {
+		const query = { queryType: 'builder', builder: { queryData: [] } };
+		const compositeQuery = encodeURIComponent(JSON.stringify(query));
+		const search = `?${QueryParams.compositeQuery}=${compositeQuery}`;
+
+		const contexts = getAutoContexts(ROUTES.ALERTS_NEW, search);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: {
+					page: 'alert_new',
+					query,
+				},
+			},
+		]);
+	});
+
 	it('returns triggered alerts context on alert history without ruleId', () => {
 		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, '');
 

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -124,7 +124,9 @@ export function getAutoContexts(
 		}
 	}
 
-	// Alert edit — `/alerts/edit?ruleId=…`.
+	// Alert edit — `/alerts/edit?ruleId=…`. The form syncs its query-builder
+	// state to the URL (`useShareBuilderUrl`), so shared metadata carries the
+	// alert's query + time range, mirroring the dashboard panel editor.
 	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
@@ -133,19 +135,21 @@ export function getAutoContexts(
 					source: 'auto',
 					type: 'alert',
 					resourceId: ruleId,
-					metadata: { page: 'alert_edit', ruleId },
+					metadata: { page: 'alert_edit', ruleId, ...sharedMetadata },
 				},
 			];
 		}
 	}
 
+	// Alert new — `/alerts/new`. No rule id yet (draft), but the query-builder
+	// state is on the URL, so shared metadata carries the in-progress query.
 	if (matchPath(pathname, { path: ROUTES.ALERTS_NEW, exact: true })) {
 		return [
 			{
 				source: 'auto',
 				type: 'alert',
 				resourceId: null,
-				metadata: { page: 'alert_new' },
+				metadata: { page: 'alert_new', ...sharedMetadata },
 			},
 		];
 	}

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx

@@ -26,12 +26,7 @@ jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
 
 describe('Should check if the edit alert channel is properly displayed', () => {
 	beforeEach(() => {
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={editAlertChannelInitialValue}
-			/>,
-		);
+		render(<EditAlertChannels initialValue={editAlertChannelInitialValue} />);
 	});
 	afterEach(() => {
 		jest.clearAllMocks();

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannelSave.test.tsx

@@ -1,81 +0,0 @@
-import EditAlertChannels from 'container/EditAlertChannels';
-import { editAlertChannelInitialValue } from 'mocks-server/__mockdata__/alerts';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: { success: jest.fn(), error: jest.fn() },
-	})),
-}));
-
-jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
-	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
-}));
-
-interface EditRequest {
-	id: string;
-	body: { name: string; slack_configs: { send_resolved: boolean }[] };
-}
-
-// Captures the PUT /channels/:id request the edit form fires, so assertions can
-// run against the real HTTP payload instead of a hand-mocked api client.
-function mockEditChannel(): { calls: EditRequest[] } {
-	const result: { calls: EditRequest[] } = { calls: [] };
-	server.use(
-		rest.put('http://localhost/api/v1/channels/:id', async (req, res, ctx) => {
-			result.calls.push({
-				id: req.params.id as string,
-				body: await req.json(),
-			});
-			return res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: 'channel updated' }),
-			);
-		}),
-	);
-	return result;
-}
-
-describe('EditAlertChannels save', () => {
-	afterEach(() => jest.clearAllMocks());
-
-	it('sends the channelId in the edit request (regression: empty id)', async () => {
-		const edit = mockEditChannel();
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={editAlertChannelInitialValue}
-			/>,
-		);
-
-		const user = userEvent.setup();
-		await user.click(screen.getByTestId('save-channel-button'));
-
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-		expect(edit.calls[0].id).toBe('3');
-	});
-
-	it('persists send_resolved toggle in the edit request', async () => {
-		const edit = mockEditChannel();
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={editAlertChannelInitialValue}
-			/>,
-		);
-
-		const user = userEvent.setup();
-		const sendResolved = screen.getByTestId('field-send-resolved-checkbox');
-		expect(sendResolved).toBeChecked();
-
-		await user.click(sendResolved);
-		await user.click(screen.getByTestId('save-channel-button'));
-
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-		expect(edit.calls[0].id).toBe('3');
-		expect(edit.calls[0].body.slack_configs[0].send_resolved).toBe(false);
-	});
-});

frontend/src/container/EditAlertChannels/index.tsx

@@ -32,7 +32,6 @@ import APIError from 'types/api/error';
 
 function EditAlertChannels({
 	initialValue,
-	channelId: id,
 }: EditAlertChannelsProps): JSX.Element {
 	// init namespace for translations
 	const { t } = useTranslation('channels');
@@ -54,6 +53,11 @@ function EditAlertChannels({
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
+	// Extract channelId from URL pathname since useParams doesn't work in nested routing
+	const { pathname } = window.location;
+	const channelIdMatch = pathname.match(/\/settings\/channels\/edit\/([^/]+)/);
+	const id = channelIdMatch ? channelIdMatch[1] : '';
+
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
 	);
@@ -516,7 +520,6 @@ interface EditAlertChannelsProps {
 	initialValue: {
 		[x: string]: unknown;
 	};
-	channelId: string;
 }
 
 export default EditAlertChannels;

frontend/src/container/FormAlertChannels/index.tsx

@@ -136,7 +136,6 @@ function FormAlertChannels({
 
 				<Form.Item>
 					<Button
-						data-testid="save-channel-button"
 						disabled={savingState}
 						loading={savingState}
 						type="primary"
@@ -145,7 +144,6 @@ function FormAlertChannels({
 						{t('button_save_channel')}
 					</Button>
 					<Button
-						data-testid="test-channel-button"
 						disabled={testingState}
 						loading={testingState}
 						onClick={(): void => onTestHandler(type)}
@@ -153,7 +151,6 @@ function FormAlertChannels({
 						{t('button_test_channel')}
 					</Button>
 					<Button
-						data-testid="return-button"
 						onClick={(): void => {
 							history.replace(ROUTES.ALL_CHANNELS);
 						}}

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -13,6 +13,9 @@
 }
 
 .pageHeaderTitle {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
 	.title {
 		margin: 0;
 		font-size: var(--font-size-xl);

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,3 +1,7 @@
+import { Tabs } from '@signozhq/ui/tabs';
+import { Typography } from '@signozhq/ui/typography';
+
+import ModelCostTabPanel from './ModelCostTabPanel';
 import styles from './LLMObservabilityModelPricing.module.scss';
 
 function LLMObservabilityModelPricing(): JSX.Element {
@@ -8,12 +12,34 @@ function LLMObservabilityModelPricing(): JSX.Element {
 		>
 			<header className={styles.pageHeader}>
 				<div className={styles.pageHeaderTitle}>
-					<h1 className={styles.title}>Configuration</h1>
-					<p className={styles.subtitle}>
+					<Typography.Text as="h1" size="large" weight="semibold">
+						Configuration
+					</Typography.Text>
+					<Typography.Text color="muted">
 						Model pricing and cost estimation settings
-					</p>
+					</Typography.Text>
 				</div>
 			</header>
+
+			<Tabs
+				// Model costs is the only enabled tab for now, so default to it. When
+				// the unpriced-models tab lands, this can become a URL-backed param.
+				defaultValue="model-costs"
+				items={[
+					{
+						key: 'model-costs',
+						label: 'Model costs',
+						children: <ModelCostTabPanel />,
+					},
+					{
+						// Unpriced-models tab lands in a later PR.
+						key: 'unpriced-models',
+						label: 'Unpriced models',
+						disabled: true,
+						children: null,
+					},
+				]}
+			/>
 		</div>
 	);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss

@@ -0,0 +1,7 @@
+.pageError {
+	padding: var(--spacing-6) var(--spacing-8);
+	border-radius: var(--radius-2);
+	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
+	color: var(--text-cherry-400);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
+import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
+import { useTableParams } from 'components/TanStackTableView';
+import { Typography } from '@signozhq/ui/typography';
+
+import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
+import styles from './ModelCostTabPanel.module.scss';
+import ModelCostsTable from './components/ModelCostsTable';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+function ModelCostTabPanel(): JSX.Element {
+	const { page, limit } = useTableParams(
+		{ page: PAGE_KEY, limit: LIMIT_KEY },
+		{ page: 1, limit: PAGE_SIZE },
+	);
+
+	// Search + source filters are intentionally omitted for now — the list API
+	// doesn't honour them yet. They'll be reintroduced here once it does.
+	const listParams: ListLLMPricingRulesParams = {
+		offset: (page - 1) * limit,
+		limit,
+	};
+
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
+
+	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
+		() => data?.data?.items || [],
+		[data],
+	);
+	const total = data?.data?.total ?? 0;
+
+	return (
+		<>
+			{isError && (
+				<div className={styles.pageError} role="alert">
+					Failed to load pricing rules. Please try again.
+				</div>
+			)}
+
+			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
+			<ModelCostsTable
+				rules={rules}
+				isLoading={isLoading}
+				total={total}
+				selectedRuleId={null}
+				canManage={false}
+				onEdit={(): void => undefined}
+				onDelete={(): void => undefined}
+			/>
+
+			<footer>
+				<Typography.Text color="muted" size="small">
+					All prices per 1M tokens (USD)
+				</Typography.Text>
+			</footer>
+		</>
+	);
+}
+
+export default ModelCostTabPanel;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.module.scss

@@ -0,0 +1,8 @@
+.actionButton {
+	opacity: 0.7;
+	transition: opacity 0.15s ease;
+
+	&:hover {
+		opacity: 1;
+	}
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { Ellipsis } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './ModelCostActionsMenu.module.scss';
+
+interface ModelCostActionsMenuProps {
+	rule: LlmpricingruletypesLLMPricingRuleDTO;
+	canManage: boolean;
+	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+}
+
+// Per-row kebab menu for the model-costs table. Only manage users get actions
+// (Edit + Delete); view-only users have nothing to act on, so the cell stays
+// empty rather than showing a single-item menu.
+function ModelCostActionsMenu({
+	rule,
+	canManage,
+	onEdit,
+	onDelete,
+}: ModelCostActionsMenuProps): JSX.Element | null {
+	const menuItems = useMemo<MenuItem[]>(
+		() => [
+			{
+				key: 'edit',
+				label: 'Edit',
+				onClick: (): void => onEdit(rule),
+			},
+			{
+				key: 'delete',
+				label: 'Delete',
+				danger: true,
+				onClick: (): void => onDelete(rule),
+			},
+		],
+		[onEdit, onDelete, rule],
+	);
+
+	if (!canManage) {
+		return null;
+	}
+
+	return (
+		<DropdownMenuSimple menu={{ items: menuItems }} align="end">
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="icon"
+				className={styles.actionButton}
+				testId={`model-cost-actions-${rule.id}`}
+			>
+				<Ellipsis size={16} />
+			</Button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default ModelCostActionsMenu;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss

@@ -0,0 +1,20 @@
+.modelCostsTable {
+	margin-top: var(--spacing-8);
+	--tanstack-table-row-height: 48px;
+	height: calc(100vh - 250px);
+	overflow-y: auto;
+
+	:global(table) tbody tr {
+		cursor: default;
+	}
+}
+
+.modelCostsEmpty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: var(--spacing-8);
+	min-height: 400px;
+	color: var(--text-vanilla-400);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+
+import {
+	LIMIT_KEY,
+	PAGE_KEY,
+	PAGE_SIZE,
+	SKELETON_ROW_COUNT,
+} from '../../../constants';
+import styles from './ModelCostsTable.module.scss';
+import { getModelCostsColumns } from './TableConfig';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+interface ModelCostsTableProps {
+	rules: LlmpricingruletypesLLMPricingRuleDTO[];
+	isLoading: boolean;
+	total: number;
+	selectedRuleId: string | null;
+	canManage: boolean;
+	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+}
+
+// The table owns its own pagination URL state (page/limit) via enableQueryParams;
+// ModelCostsTab reads the same keys to build the list request. Virtual scroll is
+// disabled: a plain table renders fine at our page sizes (up to 100 rows) and the
+// fixed-height scroll viewport (.modelCostsTable) keeps large pages scrolling
+// inside the table.
+function ModelCostsTable({
+	rules,
+	isLoading,
+	total,
+	selectedRuleId,
+	canManage,
+	onEdit,
+	onDelete,
+}: ModelCostsTableProps): JSX.Element {
+	const columns = useMemo(
+		() => getModelCostsColumns({ canManage, onEdit, onDelete }),
+		[canManage, onEdit, onDelete],
+	);
+
+	if (!isLoading && rules.length === 0) {
+		return (
+			<div className={styles.modelCostsEmpty} data-testid="model-costs-empty">
+				No model costs yet.
+			</div>
+		);
+	}
+
+	return (
+		<TanStackTable<LlmpricingruletypesLLMPricingRuleDTO>
+			className={styles.modelCostsTable}
+			data={rules}
+			columns={columns}
+			isLoading={isLoading}
+			skeletonRowCount={SKELETON_ROW_COUNT}
+			getRowKey={(row): string => row.id}
+			isRowActive={(row): boolean => row.id === selectedRuleId}
+			disableVirtualScroll
+			testId="model-costs-table"
+			enableQueryParams={{ page: PAGE_KEY, limit: LIMIT_KEY }}
+			pagination={{
+				total,
+				defaultLimit: PAGE_SIZE,
+				showTotalCount: true,
+				totalCountLabel: 'models',
+			}}
+		/>
+	);
+}
+
+export default ModelCostsTable;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/index.ts

@@ -0,0 +1 @@
+export { getModelCostsColumns } from './table.config';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/table.config.tsx

@@ -0,0 +1,161 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import { startCase } from 'lodash-es';
+
+import styles from './tableConfig.module.scss';
+import ModelCostActionsMenu from '../ModelCostActionsMenu';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	formatPricePerMillion,
+	getCanonicalId,
+	getExtraBuckets,
+	getRelativeLastSeen,
+	getSourceLabel,
+} from '../../../../utils';
+
+interface ColumnsConfig {
+	canManage: boolean;
+	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+}
+
+// Column definitions for the model-costs TanStackTable. Sorting is intentionally
+// off across the board — the list API only accepts offset/limit, so there's no
+// server-side ordering to back a sortable header yet.
+export function getModelCostsColumns({
+	canManage,
+	onEdit,
+	onDelete,
+}: ColumnsConfig): TableColumnDef<LlmpricingruletypesLLMPricingRuleDTO>[] {
+	return [
+		{
+			id: 'model',
+			header: 'Model',
+			accessorFn: (row): string => row.modelName ?? '',
+			// Flexes to absorb spare width alongside Extra buckets so the row fills
+			// the container instead of leaving a gap on the right.
+			width: { min: 240, default: '100%' },
+			enableMove: false,
+			enableRemove: false,
+			cell: ({ row }): JSX.Element => (
+				<div className={styles.modelCell}>
+					<Typography.Text
+						weight="semibold"
+						truncate={1}
+						testId={`model-cell-name-${row.id}`}
+					>
+						{row.modelName}
+					</Typography.Text>
+
+					<Typography.Text truncate={1}>{getCanonicalId(row)}</Typography.Text>
+				</div>
+			),
+		},
+		{
+			id: 'provider',
+			header: 'Provider',
+			accessorKey: 'provider',
+			width: { min: 140 },
+			enableMove: false,
+			cell: ({ row }): string => row.provider ?? '',
+		},
+		{
+			id: 'input',
+			header: 'Input / 1M',
+			width: { min: 120 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Typography.Text>
+					{formatPricePerMillion(row.pricing?.input)}
+				</Typography.Text>
+			),
+		},
+		{
+			id: 'output',
+			header: 'Output / 1M',
+			width: { min: 120 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Typography.Text>
+					{formatPricePerMillion(row.pricing?.output)}
+				</Typography.Text>
+			),
+		},
+		{
+			id: 'extraBuckets',
+			header: 'Extra buckets',
+			width: { min: 200, default: '100%' },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => {
+				const buckets = getExtraBuckets(row);
+				if (buckets.length === 0) {
+					return (
+						<Typography.Text color="muted" as="span">
+							—
+						</Typography.Text>
+					);
+				}
+				return (
+					<div className={styles.extraBuckets}>
+						{buckets.map((bucket) => (
+							<Badge
+								key={bucket.key}
+								color="vanilla"
+								variant="outline"
+								className={styles.extraBucketsChip}
+							>
+								<Typography.Text as="span" size="small">
+									{startCase(bucket.key)}
+								</Typography.Text>
+								<Typography.Text as="span" size="small" weight="semibold">
+									{formatPricePerMillion(bucket.pricePerMillion)}
+								</Typography.Text>
+							</Badge>
+						))}
+					</div>
+				);
+			},
+		},
+		{
+			id: 'source',
+			header: 'Source',
+			width: { min: 130 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Badge
+					color={row.isOverride ? 'amber' : 'robin'}
+					variant="outline"
+					className={styles.sourceBadge}
+					data-testid={`source-badge-${row.id}`}
+				>
+					{getSourceLabel(row)}
+				</Badge>
+			),
+		},
+		{
+			id: 'lastSeen',
+			header: 'Last seen',
+			width: { min: 120 },
+			enableMove: false,
+			cell: ({ row }): string => getRelativeLastSeen(row),
+		},
+		{
+			id: 'actions',
+			header: '',
+			width: { fixed: '56px', ignoreLastColumnFill: true },
+			pin: 'right',
+			enableMove: false,
+			enableRemove: false,
+			cell: ({ row }): JSX.Element | null => (
+				<ModelCostActionsMenu
+					rule={row}
+					canManage={canManage}
+					onEdit={onEdit}
+					onDelete={onDelete}
+				/>
+			),
+		},
+	];
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/tableConfig.module.scss

@@ -0,0 +1,26 @@
+.modelCell {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	min-width: 0;
+}
+
+.extraBuckets {
+	display: flex;
+	// Keep chips on a single line so the row stays at the table's fixed row
+	// height; the column flexes to 100% so there's room for both.
+	flex-wrap: nowrap;
+	gap: var(--spacing-3);
+	overflow: hidden;
+}
+
+.extraBucketsChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	margin: 0;
+}
+
+.sourceBadge {
+	margin: 0;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/index.ts

@@ -0,0 +1 @@
+export { default } from './ModelCostsTable';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './ModelCostTabPanel';

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -0,0 +1,6 @@
+export const PAGE_SIZE = 20;
+
+export const PAGE_KEY = 'page';
+export const LIMIT_KEY = 'limit';
+
+export const SKELETON_ROW_COUNT = PAGE_SIZE;

frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts

@@ -0,0 +1,4 @@
+export interface ExtraBucket {
+	key: string;
+	pricePerMillion: number;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts

@@ -0,0 +1,60 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import type { ExtraBucket } from './types';
+import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+dayjs.extend(relativeTime);
+
+const getRelativeTime = (
+	timestamp: string | number | Date | null | undefined,
+): string => {
+	const parsed = timestamp != null ? dayjs(timestamp) : null;
+	return parsed?.isValid() ? parsed.fromNow() : '—';
+};
+
+// ─── Display helpers ─────────────────────────────────────────────────────────
+
+export const formatPricePerMillion = (value: number | undefined): string => {
+	if (value === undefined || value === null) {
+		return '—';
+	}
+	// 2dp is enough for per-1M pricing. we can update this later we models have sub-cent pricing.
+	return `$${value.toFixed(2)}`;
+};
+
+export const getExtraBuckets = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): ExtraBucket[] => {
+	const cache = rule.pricing?.cache;
+	if (!cache) {
+		return [];
+	}
+	const buckets: ExtraBucket[] = [];
+	if (typeof cache.read === 'number' && cache.read > 0) {
+		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
+	}
+	if (typeof cache.write === 'number' && cache.write > 0) {
+		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
+	}
+	return buckets;
+};
+
+export const getSourceLabel = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
+
+export const getRelativeLastSeen = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
+
+// Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
+// are lower-cased so the id is consistently normalised (providers/models can
+// arrive with mixed casing).
+export const getCanonicalId = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): string => {
+	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
+	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
+	return `${provider}:${model}`;
+};

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

@@ -177,7 +177,8 @@ describe('Tooltip', () => {
 		renderTooltip({ uPlotInstance, content });
 
 		const list = screen.getByTestId('uplot-tooltip-list');
-		expect(list).toHaveStyle({ height: '200px' });
+		// Measured height (200) + the scroll viewport's vertical padding (16)
+		expect(list).toHaveStyle({ height: '216px' });
 	});
 
 	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {
@@ -188,8 +189,8 @@ describe('Tooltip', () => {
 		renderTooltip({ uPlotInstance, content });
 
 		const list = screen.getByTestId('uplot-tooltip-list');
-		// Falls back to content length: 2 items * 38px = 76px
-		expect(list).toHaveStyle({ height: '76px' });
+		// Falls back to content length (2 * 38 = 76) + vertical padding (16) = 92px
+		expect(list).toHaveStyle({ height: '92px' });
 	});
 });
 

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

@@ -13,6 +13,11 @@ import Styles from './TooltipList.module.scss';
 // Fallback per-item height before Virtuoso reports the real total.
 const TOOLTIP_ITEM_HEIGHT = 38;
 const LIST_MAX_HEIGHT = 300;
+// Vertical padding (spacing-4 top + bottom) the SCSS applies to the scroll
+// viewport. Virtuoso's reported height covers only the items, so it must be
+// added back — otherwise the box is short by this amount, clipping the last
+// row and showing a scrollbar even when every row would fit.
+const LIST_VERTICAL_PADDING = 16;
 
 interface TooltipListProps {
 	id: string;
@@ -30,13 +35,13 @@ export default function TooltipList({
 	// Use the measured height from Virtuoso when available; fall back to a
 	// per-item estimate on first render. Math.ceil prevents a 1 px
 	// subpixel rounding gap from triggering a spurious scrollbar.
-	const height = useMemo(
-		() =>
-			totalListHeight > 0
-				? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
-				: Math.min(content.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT),
-		[totalListHeight, content.length],
-	);
+	const height = useMemo(() => {
+		const contentHeight =
+			totalListHeight > 0 ? totalListHeight : content.length * TOOLTIP_ITEM_HEIGHT;
+		return Math.ceil(
+			Math.min(contentHeight + LIST_VERTICAL_PADDING, LIST_MAX_HEIGHT),
+		);
+	}, [totalListHeight, content.length]);
 
 	const handleScroll = useCallback(() => {
 		if (!isScrollEventTriggered.current) {

frontend/src/pages/ChannelsEdit/index.tsx

@@ -2,7 +2,6 @@
 
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
 import { Typography } from '@signozhq/ui/typography';
 import get from 'api/channels/get';
 import AlertBreadcrumb from 'components/AlertBreadcrumb';
@@ -25,10 +24,10 @@ import './ChannelsEdit.styles.scss';
 function ChannelsEdit(): JSX.Element {
 	const { t } = useTranslation();
 
-	const { pathname } = useLocation();
-	const channelId = matchPath<{ channelId: string }>(pathname, {
-		path: ROUTES.CHANNELS_EDIT,
-	})?.params?.channelId;
+	// Extract channelId from URL pathname
+	const { pathname } = window.location;
+	const channelIdMatch = pathname.match(/\/alerts\/channels\/edit\/([^/]+)/);
+	const channelId = channelIdMatch ? channelIdMatch[1] : undefined;
 
 	const { isFetching, isError, data, error } = useQuery<
 		SuccessResponseV2<Channels>,
@@ -148,7 +147,6 @@ function ChannelsEdit(): JSX.Element {
 			<div className="edit-alert-channels-container">
 				<EditAlertChannels
 					{...{
-						channelId: channelId || '',
 						initialValue: {
 							...target.channel,
 							type: target.type,

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/useVariableForm.ts

@@ -150,7 +150,7 @@ export function useVariableForm({
 		const next: VariableFormModel = {
 			...model,
 			name: trimmedName,
-			defaultValue: defaultValue ? { value: defaultValue } : undefined,
+			defaultValue: defaultValue || undefined,
 		};
 
 		const cycle = detectVariableCycle([...siblings, next]);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -1,5 +1,5 @@
 import {
-	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind as TextEnvelopeKind,
 	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
@@ -9,7 +9,7 @@ import type {
 	DashboardtypesListVariableSpecDTO,
 	DashboardtypesVariableDTO,
 	DashboardtypesVariablePluginDTO,
-	DashboardTextVariableSpecDTO,
+	DashboardtypesTextVariableSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 import {
@@ -19,7 +19,6 @@ import {
 	signalForApi,
 	VARIABLE_SORT_DISABLED,
 	type VariableFormModel,
-	type VariableSort,
 } from './variableFormModel';
 
 /** DTO envelope → flat form model (for display / editing). */
@@ -37,7 +36,7 @@ export function dtoToFormModel(
 
 	// Text variable — a distinct envelope (no list plugin).
 	if (dto.kind === TextEnvelopeKind.TextVariable) {
-		const spec = dto.spec as DashboardTextVariableSpecDTO;
+		const spec = dto.spec as DashboardtypesTextVariableSpecDTO;
 		return {
 			...common,
 			type: 'TEXT',
@@ -52,7 +51,7 @@ export function dtoToFormModel(
 		...common,
 		multiSelect: spec.allowMultiple ?? false,
 		showAllOption: spec.allowAllValue ?? false,
-		sort: (spec.sort as VariableSort) ?? VARIABLE_SORT_DISABLED,
+		sort: spec.sort ?? VARIABLE_SORT_DISABLED,
 		defaultValue: spec.defaultValue,
 	};
 	const plugin = spec.plugin;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableFormModel.ts

@@ -1,5 +1,8 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesListVariableSpecSortDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesVariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
 import { sortBy } from 'lodash-es';
 
 /**
@@ -24,19 +27,19 @@ export const DYNAMIC_SIGNAL_ALL = 'all' as const;
 export type DynamicSignalOption = TelemetrySignal | typeof DYNAMIC_SIGNAL_ALL;
 
 /**
- * Sort order for list-variable values. The wire (Perses) validates `sort`
- * against a fixed method set. There is no generated TS enum for it
- * (`DashboardtypesListOrderDTO` is the query-builder order, a different field),
- * so we mirror the Perses `Sort` tokens here.
+ * Sort order for list-variable values, keyed by the generated wire enum so the
+ * form model and the DTO `sort` field share one source of truth. The friendly
+ * keys (`DISABLED` / `ASC` / …) are UI-facing; the values are the Perses `Sort`
+ * tokens the wire validates against.
  */
 export const VARIABLE_SORT = {
-	DISABLED: 'none',
-	ASC: 'alphabetical-asc',
-	DESC: 'alphabetical-desc',
-	NUMERICAL_ASC: 'numerical-asc',
-	NUMERICAL_DESC: 'numerical-desc',
-	CI_ASC: 'alphabetical-ci-asc',
-	CI_DESC: 'alphabetical-ci-desc',
+	DISABLED: DashboardtypesListVariableSpecSortDTO.none,
+	ASC: DashboardtypesListVariableSpecSortDTO['alphabetical-asc'],
+	DESC: DashboardtypesListVariableSpecSortDTO['alphabetical-desc'],
+	NUMERICAL_ASC: DashboardtypesListVariableSpecSortDTO['numerical-asc'],
+	NUMERICAL_DESC: DashboardtypesListVariableSpecSortDTO['numerical-desc'],
+	CI_ASC: DashboardtypesListVariableSpecSortDTO['alphabetical-ci-asc'],
+	CI_DESC: DashboardtypesListVariableSpecSortDTO['alphabetical-ci-desc'],
 } as const;
 
 export type VariableSort = (typeof VARIABLE_SORT)[keyof typeof VARIABLE_SORT];
@@ -133,7 +136,7 @@ export interface VariableFormModel {
 	 * Runtime-selected default, not editable in the management tab yet; carried
 	 * through edits so saving a definition doesn't clobber it.
 	 */
-	defaultValue?: VariableDefaultValueDTO;
+	defaultValue?: DashboardtypesVariableDefaultValueDTO;
 }
 
 export function emptyVariableFormModel(): VariableFormModel {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/__tests__/utils.test.ts

@@ -30,7 +30,6 @@ describe('panelStatusFromError', () => {
 				{ message: 'missing aggregation', suggestions: [] },
 				{ message: 'bad filter', suggestions: [] },
 			],
-			retry: null,
 			suggestions: [],
 			type: '',
 		});
@@ -59,7 +58,6 @@ describe('panelStatusFromError', () => {
 				message: 'y',
 				url: '',
 				errors: [],
-				retry: null,
 				suggestions: [],
 				type: '',
 			},

pkg/errors/http.go

@@ -7,12 +7,12 @@ import (
 )
 
 type JSON struct {
-	Type        string                    `json:"type" required:"true"`
-	Code        string                    `json:"code" required:"true"`
-	Message     string                    `json:"message" required:"true"`
-	Url         string                    `json:"url" required:"true" nullable:"true"`
+	Type        string                    `json:"type" required:"true" nullable:"false"`
+	Code        string                    `json:"code" required:"true" nullable:"false"`
+	Message     string                    `json:"message" required:"true" nullable:"false"`
+	Url         string                    `json:"url,omitempty" required:"false"`
 	Errors      []responseerroradditional `json:"errors" required:"true" nullable:"false"`
-	Retry       *responseretryjson        `json:"retry" required:"true" nullable:"true"`
+	Retry       *responseretryjson        `json:"retry,omitempty" required:"false"`
 	Suggestions []string                  `json:"suggestions" required:"true" nullable:"false"`
 }
 
@@ -21,7 +21,7 @@ type responseretryjson struct {
 }
 
 type responseerroradditional struct {
-	Message     string   `json:"message" required:"true"`
+	Message     string   `json:"message" required:"true" nullable:"false"`
 	Suggestions []string `json:"suggestions" required:"true" nullable:"false"`
 }
 

pkg/http/render/render.go

@@ -130,6 +130,7 @@ func Error(rw http.ResponseWriter, cause error) {
 		rw.Header().Set("Retry-After", strconv.Itoa(int(math.Ceil(d.Seconds()))))
 	}
 
+	rw.Header().Set("Content-Type", "application/json")
 	rw.WriteHeader(httpCode)
 	_, _ = rw.Write(body)
 }

pkg/http/render/render_test.go

@@ -99,13 +99,13 @@ func TestError(t *testing.T) {
 			name:       "AlreadyExists",
 			statusCode: http.StatusConflict,
 			err:        errors.New(errors.TypeAlreadyExists, errors.MustNewCode("already_exists"), "already exists").WithUrl("https://already_exists"),
-			expected:   []byte(`{"status":"error","error":{"type":"already-exists","code":"already_exists","message":"already exists","url":"https://already_exists","errors":[],"retry":null,"suggestions":[]}}`),
+			expected:   []byte(`{"status":"error","error":{"type":"already-exists","code":"already_exists","message":"already exists","url":"https://already_exists","errors":[],"suggestions":[]}}`),
 		},
 		"/unauthenticated": {
 			name:       "Unauthenticated",
 			statusCode: http.StatusUnauthorized,
 			err:        errors.New(errors.TypeUnauthenticated, errors.MustNewCode("not_allowed"), "not allowed").WithUrl("https://unauthenticated").WithAdditional("a1", "a2"),
-			expected:   []byte(`{"status":"error","error":{"type":"unauthenticated","code":"not_allowed","message":"not allowed","url":"https://unauthenticated","errors":[{"message":"a1","suggestions":[]},{"message":"a2","suggestions":[]}],"retry":null,"suggestions":[]}}`),
+			expected:   []byte(`{"status":"error","error":{"type":"unauthenticated","code":"not_allowed","message":"not allowed","url":"https://unauthenticated","errors":[{"message":"a1","suggestions":[]},{"message":"a2","suggestions":[]}],"suggestions":[]}}`),
 		},
 	}
 
@@ -177,8 +177,7 @@ func TestErrorRetryAfterHeader(t *testing.T) {
 			name:                "BareErrorNoHeaderNoRetryBlock",
 			err:                 errors.New(errors.TypeInternal, errors.MustNewCode("boom"), "boom"),
 			wantRetryAfter:      "",
-			wantBodyContains:    `"retry":null`,
-			wantBodyNotContains: `"delay"`,
+			wantBodyNotContains: `"retry"`, // omitempty drops the nil retry block entirely
 		},
 	}
 

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -38,7 +38,7 @@ func newTestDashboardV2(t *testing.T, orgID valuer.UUID, source Source) *Dashboa
 								FillMode:          FillModeSolid,
 								SpanGaps:          SpanGaps{FillLessThan: valuer.MustParseTextDuration("60s")},
 							},
-							Legend: Legend{Position: LegendPositionBottom},
+							Legend: Legend{Position: LegendPositionBottom, Mode: LegendModeList},
 						},
 					},
 					Queries: []Query{

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -48,7 +48,42 @@ func (d *DashboardSpec) UnmarshalJSON(data []byte) error {
 // ══════════════════════════════════════════════
 
 func (d *DashboardSpec) Validate() error {
+	if err := d.validateVariables(); err != nil {
+		return err
+	}
+	if err := d.validatePanels(); err != nil {
+		return err
+	}
+	return d.validateLayouts()
+}
+
+// validateVariables rejects two variables sharing the same name.
+func (d *DashboardSpec) validateVariables() error {
+	seen := make(map[string]struct{}, len(d.Variables))
+	for i, v := range d.Variables {
+		var name string
+		switch s := v.Spec.(type) {
+		case *ListVariableSpec:
+			name = s.Name
+		case *TextVariableSpec:
+			name = s.Name
+		default:
+			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
+			return errors.NewInternalf(errors.CodeInternal, "spec.variables[%d].spec: unexpected variable spec type %T", i, v.Spec)
+		}
+		if _, dup := seen[name]; dup {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.variables[%d]: duplicate variable name %q", i, name)
+		}
+		seen[name] = struct{}{}
+	}
+	return nil
+}
+
+func (d *DashboardSpec) validatePanels() error {
 	for key, panel := range d.Panels {
+		if err := common.ValidateID(key); err != nil {
+			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "spec.panels: %s", err.Error())
+		}
 		if panel == nil {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
 		}
@@ -69,6 +104,13 @@ func (d *DashboardSpec) Validate() error {
 }
 
 func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
+	compositeSubQueryTypeToPluginKind := map[qb.QueryType]QueryPluginKind{
+		qb.QueryTypeBuilder:       QueryKindBuilder,
+		qb.QueryTypeFormula:       QueryKindFormula,
+		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
+		qb.QueryTypePromQL:        QueryKindPromQL,
+		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
+	}
 	if !slices.Contains(allowed, plugin.Kind) {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
 			"%s: query kind %q is not supported by panel kind %q", path, plugin.Kind, panelKind)
@@ -96,12 +138,35 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-var (
-	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
-		qb.QueryTypeBuilder:       QueryKindBuilder,
-		qb.QueryTypeFormula:       QueryKindFormula,
-		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
-		qb.QueryTypePromQL:        QueryKindPromQL,
-		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
+// validateLayouts rejects grid items referencing a panel that doesn't exist.
+func (d *DashboardSpec) validateLayouts() error {
+	for li, layout := range d.Layouts {
+		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
+		if !ok {
+			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
+			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
+		}
+		for ii, item := range grid.Items {
+			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
+			if item.Content == nil {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: content reference is required", path)
+			}
+			key, err := panelKeyFromRef(item.Content.Path, item.Content.Ref, path)
+			if err != nil {
+				return err
+			}
+			if _, ok := d.Panels[key]; !ok {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
+			}
+		}
 	}
-)
+	return nil
+}
+
+// panelKeyFromRef extracts <key> from a "#/spec/panels/<key>" content ref.
+func panelKeyFromRef(refPath []string, ref string, path string) (string, error) {
+	if len(refPath) != 3 || refPath[0] != "spec" || refPath[1] != "panels" {
+		return "", errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: %q must reference a panel as \"#/spec/panels/<key>\"", path, ref)
+	}
+	return refPath[2], nil
+}

pkg/types/dashboardtypes/perses_dashboard_patch.go

@@ -73,7 +73,7 @@ func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdatableDashboardV
 	}
 	patched, err := p.patch.ApplyWithOptions(raw, &jsonpatch.ApplyOptions{AllowMissingPathOnRemove: true, EnsurePathExistsOnAdd: true})
 	if err != nil {
-		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard")
+		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard").WithAdditional(err.Error())
 	}
 	out := &UpdatableDashboardV2{}
 	if err := json.Unmarshal(patched, out); err != nil {

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -405,6 +405,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 		out, err := decode(t, `[
 			{"op": "replace", "path": "/spec/display/name", "value": "Multi-step"},
 			{"op": "remove",  "path": "/spec/panels/p2"},
+			{"op": "remove",  "path": "/spec/layouts/0/spec/items/1"},
 			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
 		]`).Apply(base)
 		require.NoError(t, err)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -112,6 +112,174 @@ func TestValidateOnlyVariables(t *testing.T) {
 	require.NoError(t, err, "expected valid")
 }
 
+func TestInvalidateDuplicateVariableNames(t *testing.T) {
+	data := []byte(`{
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {"name": "env", "value": "prod"}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "env",
+					"allowAllValue": false,
+					"allowMultiple": false,
+					"plugin": {
+						"kind": "signoz/DynamicVariable",
+						"spec": {"name": "service.name", "signal": "metrics"}
+					}
+				}
+			}
+		],
+		"layouts": []
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err, "expected error for duplicate variable name")
+	require.Contains(t, err.Error(), `duplicate variable name "env"`)
+}
+
+func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
+	listVarWithName := func(name string) []byte {
+		return []byte(`{
+			"variables": [
+				{
+					"kind": "ListVariable",
+					"spec": {
+						"name": "` + name + `",
+						"allowAllValue": false,
+						"allowMultiple": false,
+						"plugin": {
+							"kind": "signoz/DynamicVariable",
+							"spec": {"name": "service.name", "signal": "metrics"}
+						}
+					}
+				}
+			],
+			"layouts": []
+		}`)
+	}
+	for _, name := range []string{"my var", "cost$", "bad!", "a/b"} {
+		t.Run(name, func(t *testing.T) {
+			_, err := unmarshalDashboard(listVarWithName(name))
+			require.Error(t, err, "expected error for invalid variable name %q", name)
+			require.Contains(t, err.Error(), "is not a correct name")
+		})
+	}
+	for _, name := range []string{"service", "my_var", "MY_VAR", "MixedCase9", "with-hyphen", "with.dot"} {
+		t.Run(name, func(t *testing.T) {
+			_, err := unmarshalDashboard(listVarWithName(name))
+			require.NoError(t, err, "expected valid variable name %q", name)
+		})
+	}
+	t.Run("digits only", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVarWithName("123"))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "cannot contain only digits")
+	})
+}
+
+func TestInvalidatePanelKey(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"bad key!": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+					"queries": [{
+						"kind": "time_series",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]
+						}}}
+					}]
+				}
+			}
+		},
+		"layouts": []
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err, "expected error for invalid panel key")
+	require.Contains(t, err.Error(), "is not a correct name")
+}
+
+func TestInvalidateListVariableCrossFields(t *testing.T) {
+	listVar := func(specFields string) []byte {
+		return []byte(`{
+			"variables": [
+				{
+					"kind": "ListVariable",
+					"spec": {
+						"name": "service",
+						` + specFields + `
+						"plugin": {
+							"kind": "signoz/DynamicVariable",
+							"spec": {"name": "service.name", "signal": "metrics"}
+						}
+					}
+				}
+			],
+			"layouts": []
+		}`)
+	}
+
+	t.Run("customAllValue without allowAllValue", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "customAllValue": "*",`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "customAllValue cannot be set")
+	})
+
+	t.Run("list defaultValue without allowMultiple", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["a", "b"],`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "allowMultiple")
+	})
+
+	t.Run("single-element list default without allowMultiple", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["only"],`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "allowMultiple")
+	})
+
+	t.Run("valid sort is accepted", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"sort": "alphabetical-asc",`))
+		require.NoError(t, err)
+	})
+
+	t.Run("unknown sort is rejected", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"sort": "bogus",`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "unknown sort")
+	})
+}
+
+func TestInvalidateEmptyVariableName(t *testing.T) {
+	cases := map[string][]byte{
+		"text variable": []byte(`{
+			"variables": [{"kind": "TextVariable", "spec": {"name": "", "value": "x"}}],
+			"layouts": []
+		}`),
+		"list variable": []byte(`{
+			"variables": [{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "",
+					"allowAllValue": false,
+					"allowMultiple": false,
+					"plugin": {"kind": "signoz/DynamicVariable", "spec": {"name": "service.name", "signal": "metrics"}}
+				}
+			}],
+			"layouts": []
+		}`),
+	}
+	for name, data := range cases {
+		t.Run(name, func(t *testing.T) {
+			_, err := unmarshalDashboard(data)
+			require.Error(t, err, "expected error for empty variable name")
+			require.Contains(t, err.Error(), "name cannot be empty")
+		})
+	}
+}
+
 func TestInvalidateUnknownPluginKind(t *testing.T) {
 	tests := []struct {
 		name        string
@@ -270,6 +438,65 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
 
+func TestInvalidateLayoutPanelReferences(t *testing.T) {
+	validPanels := `"panels": {
+		"p1": {
+			"kind": "Panel",
+			"spec": {
+				"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+				"queries": [{
+					"kind": "time_series",
+					"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+						"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]
+					}}}
+				}]
+			}
+		}
+	}`
+	layout := func(items string) []byte {
+		return []byte(`{` + validPanels + `, "layouts": [{"kind": "Grid", "spec": {"items": [` + items + `]}}]}`)
+	}
+
+	tests := []struct {
+		name        string
+		data        []byte
+		wantContain string
+	}{
+		{
+			name:        "reference to unknown panel",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/ghost"}}`),
+			wantContain: `references unknown panel "ghost"`,
+		},
+		{
+			name:        "reference not pointing at a panel",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/variables/p1"}}`),
+			wantContain: "must reference a panel",
+		},
+		{
+			name:        "reference missing spec prefix",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/panels/p1"}}`),
+			wantContain: "must reference a panel",
+		},
+		{
+			name:        "valid reference",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}`),
+			wantContain: "",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			_, err := unmarshalDashboard(tt.data)
+			if tt.wantContain == "" {
+				require.NoError(t, err)
+				return
+			}
+			require.Error(t, err)
+			require.Contains(t, err.Error(), tt.wantContain)
+		})
+	}
+}
+
 func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 	tests := []struct {
 		name        string
@@ -569,6 +796,24 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 			}`,
 			wantContain: "legend position",
 		},
+		{
+			name: "bad legend mode",
+			data: `{
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"plugin": {
+								"kind": "signoz/BarChartPanel",
+								"spec": {"legend": {"mode": "grid"}}
+							}
+						}
+					}
+				},
+				"layouts": []
+			}`,
+			wantContain: "legend mode",
+		},
 		{
 			name: "bad threshold format",
 			data: `{
@@ -634,6 +879,39 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 	}
 }
 
+// Label on ThresholdWithLabel is optional — the backend never reads it, so a
+// threshold with an omitted or empty label must validate cleanly.
+func TestThresholdLabelOptional(t *testing.T) {
+	for _, tt := range []struct {
+		name      string
+		threshold string
+	}{
+		{name: "label omitted", threshold: `{"value": 100, "color": "Red"}`},
+		{name: "label empty", threshold: `{"value": 100, "color": "Red", "label": ""}`},
+	} {
+		t.Run(tt.name, func(t *testing.T) {
+			data := []byte(`{
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {"thresholds": [` + tt.threshold + `]}},
+							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+						}
+					}
+				},
+				"layouts": []
+			}`)
+			d, err := unmarshalDashboard(data)
+			require.NoError(t, err, "threshold without a label should validate")
+
+			spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
+			require.Len(t, spec.Thresholds, 1)
+			require.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
+		})
+	}
+}
+
 func TestInvalidatePanelWithoutQueries(t *testing.T) {
 	data := []byte(`{
 		"panels": {
@@ -749,11 +1027,6 @@ func TestValidateRequiredFields(t *testing.T) {
 			data:        wrapPanel("signoz/TimeSeriesPanel", `{"thresholds": [{"value": 100, "label": "high", "color": ""}]}`),
 			wantContain: "Color",
 		},
-		{
-			name:        "ThresholdWithLabel missing label",
-			data:        wrapPanel("signoz/TimeSeriesPanel", `{"thresholds": [{"value": 100, "color": "Red", "label": ""}]}`),
-			wantContain: "Label",
-		},
 		{
 			name:        "ComparisonThreshold missing value",
 			data:        wrapPanel("signoz/NumberPanel", `{"thresholds": [{"operator": "above", "format": "text", "color": "Red"}]}`),
@@ -811,10 +1084,11 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	require.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
 	require.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
 	require.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
-	require.Equal(t, "solid", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default solid")
+	require.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
 	require.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
 	require.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
 	require.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+	require.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
 
 	// Re-marshal the full dashboard (what we'd store in DB / return in API response)
 	// and verify the output contains the default values.
@@ -825,9 +1099,10 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 		"decimalPrecision":  `"2"`,
 		"lineInterpolation": `"spline"`,
 		"lineStyle":         `"solid"`,
-		"fillMode":          `"solid"`,
+		"fillMode":          `"none"`,
 		"timePreference":    `"global_time"`,
 		"position":          `"bottom"`,
+		"mode":              `"list"`,
 	} {
 		assert.Contains(t, outputStr, `"`+field+`":`+want, "expected stored/response JSON to contain %s:%s", field, want)
 	}
@@ -930,7 +1205,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Equal(t, "2", tsSpec.Formatting.DecimalPrecision.ValueOrDefault())
 	assert.Equal(t, "spline", tsSpec.ChartAppearance.LineInterpolation.ValueOrDefault())
 	assert.Equal(t, "solid", tsSpec.ChartAppearance.LineStyle.ValueOrDefault())
-	assert.Equal(t, "solid", tsSpec.ChartAppearance.FillMode.ValueOrDefault())
+	assert.Equal(t, "none", tsSpec.ChartAppearance.FillMode.ValueOrDefault())
 	assert.Equal(t, "global_time", tsSpec.Visualization.TimePreference.ValueOrDefault())
 	assert.Equal(t, "bottom", tsSpec.Legend.Position.ValueOrDefault())
 	numSpec := d.Panels["p2"].Spec.Plugin.Spec.(*NumberPanelSpec)
@@ -950,7 +1225,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Equal(t, "2", tsLoaded.Formatting.DecimalPrecision.ValueOrDefault(), "after load")
 	assert.Equal(t, "spline", tsLoaded.ChartAppearance.LineInterpolation.ValueOrDefault(), "after load")
 	assert.Equal(t, "solid", tsLoaded.ChartAppearance.LineStyle.ValueOrDefault(), "after load")
-	assert.Equal(t, "solid", tsLoaded.ChartAppearance.FillMode.ValueOrDefault(), "after load")
+	assert.Equal(t, "none", tsLoaded.ChartAppearance.FillMode.ValueOrDefault(), "after load")
 	assert.Equal(t, "global_time", tsLoaded.Visualization.TimePreference.ValueOrDefault(), "after load")
 	assert.Equal(t, "bottom", tsLoaded.Legend.Position.ValueOrDefault(), "after load")
 	numLoaded := loaded.Panels["p2"].Spec.Plugin.Spec.(*NumberPanelSpec)
@@ -966,7 +1241,7 @@ func TestStorageRoundTrip(t *testing.T) {
 		"decimalPrecision":  `"2"`,
 		"lineInterpolation": `"spline"`,
 		"lineStyle":         `"solid"`,
-		"fillMode":          `"solid"`,
+		"fillMode":          `"none"`,
 		"timePreference":    `"global_time"`,
 		"position":          `"bottom"`,
 		"format":            `"text"`,

pkg/types/dashboardtypes/perses_drift_test.go

@@ -30,6 +30,7 @@ func TestDashboardSpecMatchesPerses(t *testing.T) {
 		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[datasource.Spec]()},
 		{"Variable", typeOf[Variable](), typeOf[dashboard.Variable]()},
 		{"ListVariableSpec", typeOf[ListVariableSpec](), typeOf[dashboard.ListVariableSpec]()},
+		{"TextVariableSpec", typeOf[TextVariableSpec](), typeOf[dashboard.TextVariableSpec]()},
 		{"Layout", typeOf[Layout](), typeOf[dashboard.Layout]()},
 	}
 

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -51,7 +51,7 @@ func (p *PanelPlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = PanelPluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -110,7 +110,7 @@ func (p *QueryPlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = QueryPluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -165,7 +165,7 @@ func (p *VariablePlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = VariablePluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -197,7 +197,7 @@ type DatasourcePlugin struct {
 
 func (DatasourcePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
-		string(DatasourceKindSigNoz): schemaRef("DashboardtypesDatasourcePluginVariantStruct"),
+		string(DatasourceKindSigNoz): schemaRef("DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec"),
 	})
 }
 
@@ -215,13 +215,13 @@ func (p *DatasourcePlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = DatasourcePluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
 func (DatasourcePlugin) JSONSchemaOneOf() []any {
 	return []any{
-		DatasourcePluginVariant[struct{}]{Kind: string(DatasourceKindSigNoz)},
+		DatasourcePluginVariant[SigNozDatasourceSpec]{Kind: string(DatasourceKindSigNoz)},
 	}
 }
 
@@ -262,7 +262,7 @@ var (
 		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
 	}
 	datasourcePluginSpecs = map[DatasourcePluginKind]func() any{
-		DatasourceKindSigNoz: func() any { return new(struct{}) },
+		DatasourceKindSigNoz: func() any { return new(SigNozDatasourceSpec) },
 	}
 
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
@@ -297,8 +297,7 @@ func extractKindAndSpec(data []byte) (string, []byte, error) {
 	return head.Kind, head.Spec, nil
 }
 
-// decodeSpec strict-decodes a spec JSON into target and runs struct-tag validation (go-playground/validator).
-func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
+func decodeSpec[T any](specJSON []byte, target T, kind string) (*T, error) {
 	if len(specJSON) == 0 {
 		return nil, errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "kind %q: spec is required", kind)
 	}
@@ -310,7 +309,12 @@ func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
 	if err := validator.New().Struct(target); err != nil {
 		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: spec failed validation", kind)
 	}
-	return target, nil
+	if v, ok := any(target).(interface{ validate() error }); ok {
+		if err := v.validate(); err != nil {
+			return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: %s", kind, err.Error())
+		}
+	}
+	return &target, nil
 }
 
 // signozDiscriminatorKey is the extension key that signoz.attachDiscriminators

pkg/types/dashboardtypes/perses_replicas.go

@@ -4,9 +4,11 @@ import (
 	"encoding/json"
 	"maps"
 	"slices"
+	"strconv"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/perses/spec/go/common"
 	"github.com/perses/spec/go/dashboard"
 	"github.com/perses/spec/go/dashboard/variable"
@@ -61,7 +63,7 @@ func (k *PanelKind) UnmarshalJSON(data []byte) error {
 type PanelSpec struct {
 	Display Display          `json:"display" required:"true"`
 	Plugin  PanelPlugin      `json:"plugin" required:"true"`
-	Queries []Query          `json:"queries" required:"true"`
+	Queries []Query          `json:"queries" required:"true" nullable:"false"`
 	Links   []dashboard.Link `json:"links,omitempty"`
 }
 
@@ -84,7 +86,7 @@ type QuerySpec struct {
 // ══════════════════════════════════════════════
 
 // Variable is the list/text sum type. Spec is set to *ListVariableSpec or
-// *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
+// *TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
 // discriminated oneOf (see JSONSchemaOneOf).
 type Variable struct {
 	Kind variable.Kind `json:"kind" required:"true"`
@@ -94,7 +96,7 @@ type Variable struct {
 func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(variable.KindList): schemaRef("DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec"),
-		string(variable.KindText): schemaRef("DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec"),
+		string(variable.KindText): schemaRef("DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec"),
 	})
 }
 
@@ -110,14 +112,14 @@ func (v *Variable) UnmarshalJSON(data []byte) error {
 			return err
 		}
 		v.Kind = variable.KindList
-		v.Spec = spec
+		v.Spec = *spec
 	case string(variable.KindText):
-		spec, err := decodeSpec(specJSON, new(dashboard.TextVariableSpec), kind)
+		spec, err := decodeSpec(specJSON, new(TextVariableSpec), kind)
 		if err != nil {
 			return err
 		}
 		v.Kind = variable.KindText
-		v.Spec = spec
+		v.Spec = *spec
 	default:
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable kind %q; allowed values: %s", kind, allowedValuesForKind([]variable.Kind{variable.KindList, variable.KindText}))
 	}
@@ -127,7 +129,7 @@ func (v *Variable) UnmarshalJSON(data []byte) error {
 func (Variable) JSONSchemaOneOf() []any {
 	return []any{
 		VariableEnvelope[ListVariableSpec]{Kind: string(variable.KindList)},
-		VariableEnvelope[dashboard.TextVariableSpec]{Kind: string(variable.KindText)},
+		VariableEnvelope[TextVariableSpec]{Kind: string(variable.KindText)},
 	}
 }
 
@@ -143,15 +145,137 @@ func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
 // fields + Name) but with a typed VariablePlugin replacing common.Plugin.
 type ListVariableSpec struct {
-	Display         Display                `json:"display" required:"true"`
-	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
-	AllowAllValue   bool                   `json:"allowAllValue"`
-	AllowMultiple   bool                   `json:"allowMultiple"`
-	CustomAllValue  string                 `json:"customAllValue,omitempty"`
-	CapturingRegexp string                 `json:"capturingRegexp,omitempty"`
-	Sort            *variable.Sort         `json:"sort,omitempty"`
-	Plugin          VariablePlugin         `json:"plugin"`
-	Name            string                 `json:"name"`
+	Display         Display               `json:"display" required:"true"`
+	DefaultValue    *VariableDefaultValue `json:"defaultValue,omitempty"`
+	AllowAllValue   bool                  `json:"allowAllValue"`
+	AllowMultiple   bool                  `json:"allowMultiple"`
+	CustomAllValue  string                `json:"customAllValue,omitempty"`
+	CapturingRegexp string                `json:"capturingRegexp,omitempty"`
+	Sort            ListVariableSpecSort  `json:"sort,omitzero"`
+	Plugin          VariablePlugin        `json:"plugin"`
+	Name            string                `json:"name" required:"true" minLength:"1"`
+}
+
+// VariableDefaultValue is a list variable's defaultValue: the string | []string
+// union. It subclasses the perses variable.DefaultValue (which marshals as a
+// scalar-or-array) so SigNoz can attach the oneOf schema to it as a named
+// component.
+//
+// Emitting it as a named oneOf component (and having defaultValue $ref it),
+// instead of inlining the union onto the property, gives downstream codegen a
+// hook to canonicalize: oapi-codegen generates the union's Marshal/UnmarshalJSON
+// and skaff's scalar-union pre-pass flattens it to a string attribute. An inline
+// oneOf has no such named component to hook.
+type VariableDefaultValue struct {
+	variable.DefaultValue
+}
+
+// PrepareJSONSchema shapes the component as the string | []string oneOf; the
+// reflected struct shape (a bare object) is wrong because the value marshals as
+// a scalar-or-array, not an object.
+func (VariableDefaultValue) PrepareJSONSchema(s *jsonschema.Schema) error {
+	stringItem := jsonschema.String.ToSchemaOrBool()
+	s.Type = nil
+	s.Properties = nil
+	s.WithOneOf(
+		jsonschema.String.ToSchemaOrBool(),
+		(&jsonschema.Schema{}).
+			WithType(jsonschema.Array.Type()).
+			WithItems(jsonschema.Items{SchemaOrBool: &stringItem}).
+			ToSchemaOrBool(),
+	)
+	return nil
+}
+
+// validate mirrors perses ListVariableSpec validation (plus the digits-only name
+// check perses only applies to text variables); run by decodeSpec on unmarshal.
+func (s *ListVariableSpec) validate() error {
+	if err := common.ValidateID(s.Name); err != nil {
+		return err
+	}
+	if _, err := strconv.Atoi(s.Name); err == nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
+	}
+	if s.CustomAllValue != "" && !s.AllowAllValue {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "customAllValue cannot be set if allowAllValue is not set to true")
+	}
+	if s.DefaultValue != nil && len(s.DefaultValue.SliceValues) > 0 && !s.AllowMultiple {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "defaultValue cannot be a list if allowMultiple is not set to true")
+	}
+	return nil
+}
+
+// ListVariableSpecSort is the value-list sort method, mirrored from Perses as a
+// stable enum so the allowed values surface in the generated OpenAPI schema.
+type ListVariableSpecSort struct{ valuer.String }
+
+var (
+	SortNone                            = ListVariableSpecSort{valuer.NewString("none")}
+	SortAlphabeticalAsc                 = ListVariableSpecSort{valuer.NewString("alphabetical-asc")}
+	SortAlphabeticalDesc                = ListVariableSpecSort{valuer.NewString("alphabetical-desc")}
+	SortNumericalAsc                    = ListVariableSpecSort{valuer.NewString("numerical-asc")}
+	SortNumericalDesc                   = ListVariableSpecSort{valuer.NewString("numerical-desc")}
+	SortAlphabeticalCaseInsensitiveAsc  = ListVariableSpecSort{valuer.NewString("alphabetical-ci-asc")}
+	SortAlphabeticalCaseInsensitiveDesc = ListVariableSpecSort{valuer.NewString("alphabetical-ci-desc")}
+)
+
+func (ListVariableSpecSort) Enum() []any {
+	return []any{
+		SortNone,
+		SortAlphabeticalAsc,
+		SortAlphabeticalDesc,
+		SortNumericalAsc,
+		SortNumericalDesc,
+		SortAlphabeticalCaseInsensitiveAsc,
+		SortAlphabeticalCaseInsensitiveDesc,
+	}
+}
+
+func (s ListVariableSpecSort) IsValid() bool {
+	return slices.ContainsFunc(s.Enum(), func(v any) bool { return v == s })
+}
+
+// UnmarshalJSON validates against the enum on decode (valuer.String alone
+// accepts any string). An empty value is allowed and means "no sort", matching
+// Perses.
+func (s *ListVariableSpecSort) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid sort: must be a string, one of `none`, `alphabetical-asc`, `alphabetical-desc`, `numerical-asc`, `numerical-desc`, `alphabetical-ci-asc`, or `alphabetical-ci-desc`")
+	}
+	if v == "" {
+		*s = ListVariableSpecSort{}
+		return nil
+	}
+	sort := ListVariableSpecSort{valuer.NewString(v)}
+	if !sort.IsValid() {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown sort %q: must be `none`, `alphabetical-asc`, `alphabetical-desc`, `numerical-asc`, `numerical-desc`, `alphabetical-ci-asc`, or `alphabetical-ci-desc`", v)
+	}
+	*s = sort
+	return nil
+}
+
+// TextVariableSpec replicates dashboard.TextVariableSpec so name can carry the
+// required/non-empty schema tags perses leaves off.
+type TextVariableSpec struct {
+	Display  Display `json:"display" required:"true"`
+	Value    string  `json:"value" required:"true"`
+	Constant bool    `json:"constant,omitempty"`
+	Name     string  `json:"name" required:"true" minLength:"1"`
+}
+
+// validate mirrors perses TextVariableSpec validation; run by decodeSpec on unmarshal.
+func (s *TextVariableSpec) validate() error {
+	if err := common.ValidateID(s.Name); err != nil {
+		return err
+	}
+	if _, err := strconv.Atoi(s.Name); err == nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
+	}
+	if s.Value == "" && s.Constant {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "value for a constant text variable cannot be empty")
+	}
+	return nil
 }
 
 // ══════════════════════════════════════════════
@@ -194,7 +318,7 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	l.Kind = dashboard.LayoutKind(kind)
-	l.Spec = spec
+	l.Spec = *spec
 	return nil
 }
 

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -146,6 +146,11 @@ func (DatasourcePluginKind) Enum() []any {
 	return []any{DatasourceKindSigNoz}
 }
 
+// SigNozDatasourceSpec is the (empty) signoz/Datasource plugin spec. Naming the
+// type gives the variant a concrete, non-nullable spec schema instead of an
+// inline free-form one.
+type SigNozDatasourceSpec struct{}
+
 type TimeSeriesPanelSpec struct {
 	Visualization   TimeSeriesVisualization   `json:"visualization"`
 	Formatting      PanelFormatting           `json:"formatting"`
@@ -241,6 +246,7 @@ type TableFormatting struct {
 
 type Legend struct {
 	Position     LegendPosition    `json:"position"`
+	Mode         LegendMode        `json:"mode"`
 	CustomColors map[string]string `json:"customColors"`
 }
 
@@ -248,7 +254,7 @@ type ThresholdWithLabel struct {
 	Value float64 `json:"value" validate:"required" required:"true"`
 	Unit  string  `json:"unit"`
 	Color string  `json:"color" validate:"required" required:"true"`
-	Label string  `json:"label" validate:"required" required:"true"`
+	Label string  `json:"label"`
 }
 
 type ComparisonThreshold struct {
@@ -358,6 +364,47 @@ func (l *LegendPosition) UnmarshalJSON(data []byte) error {
 	}
 }
 
+type LegendMode struct{ valuer.String }
+
+var (
+	LegendModeList  = LegendMode{valuer.NewString("list")} // default
+	LegendModeTable = LegendMode{valuer.NewString("table")}
+)
+
+func (LegendMode) Enum() []any {
+	return []any{LegendModeList} // others are not supported in UI yet
+}
+
+func (m LegendMode) ValueOrDefault() string {
+	if m.IsZero() {
+		return LegendModeList.StringValue()
+	}
+	return m.StringValue()
+}
+
+func (m LegendMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(m.ValueOrDefault())
+}
+
+func (m *LegendMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid legend mode: must be a string, one of `list` or `table`")
+	}
+	if v == "" {
+		*m = LegendModeList
+		return nil
+	}
+	lm := LegendMode{valuer.NewString(v)}
+	switch lm {
+	case LegendModeList, LegendModeTable:
+		*m = lm
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid legend mode %q: must be `list` or `table`", v)
+	}
+}
+
 type ThresholdFormat struct{ valuer.String }
 
 var (
@@ -534,9 +581,9 @@ func (ls *LineStyle) UnmarshalJSON(data []byte) error {
 type FillMode struct{ valuer.String }
 
 var (
-	FillModeSolid    = FillMode{valuer.NewString("solid")} // default
+	FillModeSolid    = FillMode{valuer.NewString("solid")}
 	FillModeGradient = FillMode{valuer.NewString("gradient")}
-	FillModeNone     = FillMode{valuer.NewString("none")}
+	FillModeNone     = FillMode{valuer.NewString("none")} // default
 )
 
 func (FillMode) Enum() []any {
@@ -545,7 +592,7 @@ func (FillMode) Enum() []any {
 
 func (fm FillMode) ValueOrDefault() string {
 	if fm.IsZero() {
-		return FillModeSolid.StringValue()
+		return FillModeNone.StringValue()
 	}
 	return fm.StringValue()
 }
@@ -560,7 +607,7 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fill mode: must be a string, one of `solid`, `gradient`, or `none`")
 	}
 	if v == "" {
-		*fm = FillModeSolid
+		*fm = FillModeNone
 		return nil
 	}
 	val := FillMode{valuer.NewString(v)}
@@ -573,12 +620,9 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 	}
 }
 
-// SpanGaps controls whether lines connect across null values.
-// When FillOnlyBelow is false (default), all gaps are connected.
-// When FillOnlyBelow is true, only gaps smaller than FillLessThan are connected.
 type SpanGaps struct {
-	FillOnlyBelow bool                `json:"fillOnlyBelow"`
-	FillLessThan  valuer.TextDuration `json:"fillLessThan"`
+	FillOnlyBelow bool                `json:"fillOnlyBelow" description:"Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected."`
+	FillLessThan  valuer.TextDuration `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`
 }
 
 type PrecisionOption struct{ valuer.String }