Guard cloud integration dashboard nil pointers

.github/CODEOWNERS

@@ -127,15 +127,12 @@
 /frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
 /frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
 
-# Dashboard Widget Page
-/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
-/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
-
 ## Dashboard Page
 
 /frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
 /frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
 /frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 

frontend/src/AppRoutes/index.tsx

@@ -29,6 +29,7 @@ import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
 import { CmdKProvider } from 'providers/cmdKProvider';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
@@ -383,26 +384,28 @@ function App(): JSX.Element {
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>
-												<KeyboardHotkeysProvider>
-													<AppLayout>
-														<PreferenceContextProvider>
-															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Switch>
-																	{routes.map(({ path, component, exact }) => (
-																		<Route
-																			key={`${path}`}
-																			exact={exact}
-																			path={path}
-																			component={component}
-																		/>
-																	))}
-																	<Route exact path="/" component={Home} />
-																	<Route path="*" component={NotFound} />
-																</Switch>
-															</Suspense>
-														</PreferenceContextProvider>
-													</AppLayout>
-												</KeyboardHotkeysProvider>
+												<DashboardProvider>
+													<KeyboardHotkeysProvider>
+														<AppLayout>
+															<PreferenceContextProvider>
+																<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																	<Switch>
+																		{routes.map(({ path, component, exact }) => (
+																			<Route
+																				key={`${path}`}
+																				exact={exact}
+																				path={path}
+																				component={component}
+																			/>
+																		))}
+																		<Route exact path="/" component={Home} />
+																		<Route path="*" component={NotFound} />
+																	</Switch>
+																</Suspense>
+															</PreferenceContextProvider>
+														</AppLayout>
+													</KeyboardHotkeysProvider>
+												</DashboardProvider>
 											</QueryBuilderProvider>
 										</ResourceProvider>
 									</PrivateRoute>

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -297,11 +297,7 @@ function CustomTimePicker({
 		resetErrorStatus();
 	};
 
-	const handleInputPressEnter = (
-		event?: React.KeyboardEvent<HTMLInputElement>,
-	): void => {
-		event?.preventDefault();
-		event?.stopPropagation();
+	const handleInputPressEnter = (): void => {
 		// check if the entered time is in the format of 1m, 2h, 3d, 4w
 		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
 

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -34,6 +34,11 @@ const mockSafeNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
+	useRouteMatch: jest.fn().mockReturnValue({
+		params: {
+			dashboardId: 4,
+		},
+	}),
 }));
 
 jest.mock(
@@ -64,7 +69,7 @@ describe('Dashboard landing page actions header tests', () => {
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 		const { getByTestId } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider dashboardId="4">
+				<DashboardProvider>
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -105,7 +110,7 @@ describe('Dashboard landing page actions header tests', () => {
 		);
 		const { getByTestId } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider dashboardId="4">
+				<DashboardProvider>
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -144,7 +149,7 @@ describe('Dashboard landing page actions header tests', () => {
 
 		const { getByText } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider dashboardId="4">
+				<DashboardProvider>
 					<DashboardDescription
 						handle={{
 							active: false,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,6 +9,7 @@ import {
 } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	enqueueDescendantsOfVariable,
@@ -29,7 +30,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		updateLocalStorageDashboardVariables,
 	} = useDashboard();
 
-	const { updateUrlVariable } = useVariablesFromUrl();
+	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
 	const dashboardId = useDashboardVariablesSelector(
@@ -49,6 +50,15 @@ function DashboardVariableSelection(): JSX.Element | null {
 		(state) => state.globalTime,
 	);
 
+	useEffect(() => {
+		// Initialize variables with default values if not in URL
+		initializeDefaultVariables(
+			dashboardVariables,
+			getUrlVariables,
+			updateUrlVariable,
+		);
+	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
+
 	// Memoize the order key to avoid unnecessary triggers
 	const variableOrderKey = useMemo(() => {
 		const queryVariableOrderKey = dependencyData?.order?.join(',') ?? '';

frontend/src/container/LogsPanelTable/__tests__/LogsPanelComponent.test.tsx

@@ -5,6 +5,7 @@ import NewWidget from 'container/NewWidget';
 import { logsPaginationQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import i18n from 'ReactI18';
 import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
@@ -103,13 +104,15 @@ describe('LogsPanelComponent', () => {
 	const renderComponent = async (): Promise<void> => {
 		render(
 			<I18nextProvider i18n={i18n}>
-				<PreferenceContextProvider>
-					<NewWidget
-						dashboardId=""
-						selectedDashboard={undefined}
-						selectedGraph={PANEL_TYPES.LIST}
-					/>
-				</PreferenceContextProvider>
+				<DashboardProvider>
+					<PreferenceContextProvider>
+						<NewWidget
+							selectedGraph={PANEL_TYPES.LIST}
+							fillSpans={undefined}
+							yAxisUnit={undefined}
+						/>
+					</PreferenceContextProvider>
+				</DashboardProvider>
 			</I18nextProvider>,
 		);
 

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -8,15 +8,28 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
-import { PANEL_TYPE_TO_QUERY_TYPES } from 'container/NewWidget/utils';
+import {
+	getDefaultWidgetData,
+	PANEL_TYPE_TO_QUERY_TYPES,
+} from 'container/NewWidget/utils';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+// import { QueryBuilder } from 'container/QueryBuilder';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { defaultTo, isUndefined } from 'lodash-es';
 import { Atom, Terminal } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import {
+	getNextWidgets,
+	getPreviousWidgets,
+	getSelectedWidgetIndex,
+} from 'providers/Dashboard/util';
 import { Widgets } from 'types/api/dashboard/getAll';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 
 import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
@@ -27,25 +40,77 @@ function QuerySection({
 	selectedGraph,
 	queryRangeKey,
 	isLoadingQueries,
-	selectedWidget,
-	dashboardVersion,
-	dashboardId,
-	dashboardName,
-	isNewPanel,
 }: QueryProps): JSX.Element {
 	const {
 		currentQuery,
 		handleRunQuery: handleRunQueryFromQueryBuilder,
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
+	const urlQuery = useUrlQuery();
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
+	const { selectedDashboard, setSelectedDashboard } = useDashboard();
+
 	const isDarkMode = useIsDarkMode();
 
+	const { widgets } = selectedDashboard?.data || {};
+
+	const getWidget = useCallback(() => {
+		const widgetId = urlQuery.get('widgetId');
+		return defaultTo(
+			widgets?.find((e) => e.id === widgetId),
+			getDefaultWidgetData(widgetId || '', selectedGraph),
+		);
+	}, [urlQuery, widgets, selectedGraph]);
+
+	const selectedWidget = getWidget() as Widgets;
+
 	const { query } = selectedWidget;
 
 	useShareBuilderUrl({ defaultValue: query });
 
+	const handleStageQuery = useCallback(
+		(query: Query): void => {
+			if (selectedDashboard === undefined) {
+				return;
+			}
+
+			const selectedWidgetIndex = getSelectedWidgetIndex(
+				selectedDashboard,
+				selectedWidget.id,
+			);
+
+			const previousWidgets = getPreviousWidgets(
+				selectedDashboard,
+				selectedWidgetIndex,
+			);
+
+			const nextWidgets = getNextWidgets(selectedDashboard, selectedWidgetIndex);
+
+			setSelectedDashboard({
+				...selectedDashboard,
+				data: {
+					...selectedDashboard?.data,
+					widgets: [
+						...previousWidgets,
+						{
+							...selectedWidget,
+							query,
+						},
+						...nextWidgets,
+					],
+				},
+			});
+			handleRunQueryFromQueryBuilder();
+		},
+		[
+			selectedDashboard,
+			selectedWidget,
+			setSelectedDashboard,
+			handleRunQueryFromQueryBuilder,
+		],
+	);
+
 	const handleQueryCategoryChange = useCallback(
 		(qCategory: string): void => {
 			const currentQueryType = qCategory as EQueryType;
@@ -58,16 +123,19 @@ function QuerySection({
 	);
 
 	const handleRunQuery = (): void => {
+		const widgetId = urlQuery.get('widgetId');
+		const isNewPanel = isUndefined(widgets?.find((e) => e.id === widgetId));
+
 		logEvent('Panel Edit: Stage and run query', {
 			dataSource: currentQuery.builder?.queryData?.[0]?.dataSource,
 			panelType: selectedWidget.panelTypes,
 			queryType: currentQuery.queryType,
 			widgetId: selectedWidget.id,
-			dashboardId,
-			dashboardName,
+			dashboardId: selectedDashboard?.id,
+			dashboardName: selectedDashboard?.data.title,
 			isNewPanel,
 		});
-		handleRunQueryFromQueryBuilder();
+		handleStageQuery(currentQuery);
 	};
 
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
@@ -96,7 +164,7 @@ function QuerySection({
 							panelType={selectedGraph}
 							filterConfigs={filterConfigs}
 							showTraceOperator={selectedGraph !== PANEL_TYPES.LIST}
-							version={dashboardVersion || 'v3'}
+							version={selectedDashboard?.data?.version || 'v3'}
 							isListViewPanel={selectedGraph === PANEL_TYPES.LIST}
 							queryComponents={queryComponents}
 							signalSourceChangeEnabled
@@ -136,7 +204,7 @@ function QuerySection({
 		queryComponents,
 		selectedGraph,
 		filterConfigs,
-		dashboardVersion,
+		selectedDashboard?.data?.version,
 		isDarkMode,
 	]);
 
@@ -193,11 +261,6 @@ interface QueryProps {
 	selectedGraph: PANEL_TYPES;
 	queryRangeKey?: QueryKey;
 	isLoadingQueries?: boolean;
-	selectedWidget: Widgets;
-	dashboardVersion?: string;
-	dashboardId?: string;
-	dashboardName?: string;
-	isNewPanel?: boolean;
 }
 
 export default QuerySection;

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

@@ -30,8 +30,6 @@ function LeftContainer({
 	setRequestData,
 	setQueryResponse,
 	enableDrillDown = false,
-	selectedDashboard,
-	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
 
@@ -77,11 +75,6 @@ function LeftContainer({
 					selectedGraph={selectedGraph}
 					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
-					selectedWidget={selectedWidget}
-					dashboardVersion={ENTITY_VERSION_V5}
-					dashboardId={selectedDashboard?.id}
-					dashboardName={selectedDashboard?.data.title}
-					isNewPanel={isNewPanel}
 				/>
 				{selectedGraph === PANEL_TYPES.LIST && (
 					<ExplorerColumnsRenderer

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

@@ -1,7 +1,5 @@
 .column-unit-selector {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
+	margin-top: 16px;
 
 	.heading {
 		color: var(--bg-vanilla-400);
@@ -32,11 +30,6 @@
 			width: 100%;
 		}
 	}
-	&-content {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
 }
 
 .lightMode {

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

@@ -72,24 +72,22 @@ export function ColumnUnitSelector(
 	return (
 		<section className="column-unit-selector">
 			<Typography.Text className="heading">Column Units</Typography.Text>
-			<div className="column-unit-selector-content">
-				{aggregationQueries.map(({ value, label }) => {
-					const baseQueryName = value.split('.')[0];
-					return (
-						<YAxisUnitSelectorV2
-							value={columnUnits[value] || ''}
-							onSelect={(unitValue: string): void =>
-								handleColumnUnitSelect(value, unitValue)
-							}
-							fieldLabel={label}
-							key={value}
-							selectedQueryName={baseQueryName}
-							// Update the column unit value automatically only in create mode
-							shouldUpdateYAxisUnit={isNewDashboard}
-						/>
-					);
-				})}
-			</div>
+			{aggregationQueries.map(({ value, label }) => {
+				const baseQueryName = value.split('.')[0];
+				return (
+					<YAxisUnitSelectorV2
+						value={columnUnits[value] || ''}
+						onSelect={(unitValue: string): void =>
+							handleColumnUnitSelect(value, unitValue)
+						}
+						fieldLabel={label}
+						key={value}
+						selectedQueryName={baseQueryName}
+						// Update the column unit value automatically only in create mode
+						shouldUpdateYAxisUnit={isNewDashboard}
+					/>
+				);
+			})}
 		</section>
 	);
 }

frontend/src/container/NewWidget/RightContainer/ContextLinks/__test__/ContextLinks.test.tsx

@@ -56,6 +56,9 @@ describe('ContextLinks Component', () => {
 				/>,
 			);
 
+			// Check that the component renders
+			expect(screen.getByText('Context Links')).toBeInTheDocument();
+
 			// Check that the add button is present
 			expect(
 				screen.getByRole('button', { name: /context link/i }),

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

@@ -14,7 +14,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal } from 'antd';
+import { Button, Modal, Typography } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react';
 import {
@@ -134,16 +134,11 @@ function ContextLinks({
 
 	return (
 		<div className="context-links-container">
+			<Typography.Text className="context-links-text">
+				Context Links
+			</Typography.Text>
+
 			<div className="context-links-list">
-				<Button
-					type="default"
-					className="add-context-link-button"
-					icon={<Plus size={12} />}
-					style={{ width: '100%' }}
-					onClick={handleAddContextLink}
-				>
-					Add Context Link
-				</Button>
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -165,6 +160,16 @@ function ContextLinks({
 						</SortableContext>
 					</DndContext>
 				</OverlayScrollbar>
+
+				{/* button to add context link */}
+				<Button
+					type="primary"
+					className="add-context-link-button"
+					icon={<Plus size={12} />}
+					onClick={handleAddContextLink}
+				>
+					Context Link
+				</Button>
 			</div>
 
 			<Modal

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

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
+	margin: 12px;
 }
 
 .context-links-text {
@@ -109,7 +110,10 @@
 }
 
 .add-context-link-button {
-	width: 100%;
+	display: flex;
+	align-items: center;
+	margin: auto;
+	width: fit-content;
 }
 
 .lightMode {

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

@@ -24,14 +24,14 @@
 			letter-spacing: -0.07px;
 		}
 	}
-	.control-container {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
 
 	.name-description {
-		padding: 0 0 4px 0;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		border-top: 1px solid var(--bg-slate-500);
+		border-bottom: 1px solid var(--bg-slate-500);
+		gap: 8px;
 
 		.typography {
 			color: var(--bg-vanilla-400);
@@ -88,6 +88,9 @@
 	.panel-config {
 		display: flex;
 		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		gap: 8px;
+		border-bottom: 1px solid var(--bg-slate-500);
 
 		.typography {
 			color: var(--bg-vanilla-400);
@@ -101,7 +104,6 @@
 		}
 
 		.panel-type-select {
-			width: 100%;
 			.ant-select-selector {
 				display: flex;
 				height: 32px;
@@ -135,6 +137,7 @@
 		}
 
 		.fill-gaps {
+			margin-top: 16px;
 			display: flex;
 			padding: 12px;
 			justify-content: space-between;
@@ -153,24 +156,31 @@
 				letter-spacing: 0.52px;
 				text-transform: uppercase;
 			}
-			.fill-gaps-text-description {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				opacity: 0.6;
-				line-height: 16px; /* 133.333% */
-			}
 		}
 
 		.log-scale,
-		.decimal-precision-selector,
-		.legend-position {
+		.decimal-precision-selector {
+			margin-top: 16px;
+			display: flex;
 			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.legend-position {
+			margin-top: 16px;
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.legend-colors {
+			margin-top: 16px;
 		}
 
 		.panel-time-text {
+			margin-top: 16px;
 			color: var(--bg-vanilla-400);
 			font-family: 'Space Mono';
 			font-size: 13px;
@@ -183,6 +193,7 @@
 
 		.y-axis-unit-selector,
 		.y-axis-unit-selector-v2 {
+			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
 			gap: 8px;
@@ -267,8 +278,11 @@
 		}
 
 		.stack-chart {
-			flex-direction: row;
+			margin-top: 16px;
+			display: flex;
 			justify-content: space-between;
+			gap: 8px;
+
 			.label {
 				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono';
@@ -282,6 +296,11 @@
 		}
 
 		.bucket-config {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
 			.label {
 				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono';
@@ -333,13 +352,16 @@
 		}
 	}
 
+	.context-links {
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
 	.alerts {
 		display: flex;
+		padding: 12px;
 		align-items: center;
 		justify-content: space-between;
-		padding: 12px;
-		min-height: 44px;
-		border-top: 1px solid var(--bg-slate-500);
+		border-bottom: 1px solid var(--bg-slate-500);
 		cursor: pointer;
 
 		.left-section {
@@ -365,16 +387,6 @@
 			color: var(--bg-vanilla-400);
 		}
 	}
-
-	.context-links {
-		padding: 12px 12px 16px 12px;
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-
-	.thresholds-section {
-		padding: 12px 12px 16px 12px;
-		border-top: 1px solid var(--bg-slate-500);
-	}
 }
 
 .select-option {
@@ -406,6 +418,9 @@
 		}
 
 		.name-description {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -426,6 +441,8 @@
 		}
 
 		.panel-config {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -461,9 +478,6 @@
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
-				.fill-gaps-text-description {
-					color: var(--bg-ink-400);
-				}
 			}
 
 			.bucket-config {
@@ -516,7 +530,7 @@
 		}
 
 		.alerts {
-			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
 
 			.left-section {
 				.bell-icon {
@@ -535,10 +549,6 @@
 		.context-links {
 			border-bottom: 1px solid var(--bg-vanilla-300);
 		}
-
-		.thresholds-section {
-			border-top: 1px solid var(--bg-vanilla-300);
-		}
 	}
 
 	.select-option {

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

@@ -1,4 +1,5 @@
 .threshold-selector-container {
+	padding: 12px;
 	padding-bottom: 80px;
 
 	.threshold-select {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Button } from 'antd';
+import { Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryLabels } from 'hooks/useGetQueryLabels';
-import { Plus } from 'lucide-react';
+import { Antenna, Plus } from 'lucide-react';
 import { v4 as uuid } from 'uuid';
 
 import Threshold from './Threshold';
@@ -68,14 +68,11 @@ function ThresholdSelector({
 		<DndProvider backend={HTML5Backend}>
 			<div className="threshold-selector-container">
 				<div className="threshold-select" onClick={addThresholdHandler}>
-					<Button
-						type="default"
-						icon={<Plus size={14} />}
-						style={{ width: '100%' }}
-						onClick={addThresholdHandler}
-					>
-						Add Threshold
-					</Button>
+					<div className="left-section">
+						<Antenna size={14} className="icon" />
+						<Typography.Text className="text">Thresholds</Typography.Text>
+					</div>
+					<Plus size={14} onClick={addThresholdHandler} className="icon" />
 				</div>
 				{thresholds.map((threshold, idx) => (
 					<Threshold

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

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import configureStore from 'redux-mock-store';
@@ -95,7 +96,9 @@ const render = (ui: React.ReactElement): ReturnType<typeof rtlRender> =>
 				<Provider store={createMockStore()}>
 					<AppContext.Provider value={createMockAppContext() as IAppContext}>
 						<ErrorModalProvider>
-							<QueryBuilderProvider>{ui}</QueryBuilderProvider>
+							<DashboardProvider>
+								<QueryBuilderProvider>{ui}</QueryBuilderProvider>
+							</DashboardProvider>
 						</ErrorModalProvider>
 					</AppContext.Provider>
 				</Provider>

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

@@ -1,68 +0,0 @@
-.settings-section {
-	border-top: 1px solid var(--bg-slate-500);
-}
-
-.settings-section-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: 12px 12px;
-	min-height: 44px;
-	background: transparent;
-	border: none;
-	outline: none;
-	cursor: pointer;
-
-	.settings-section-title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--bg-vanilla-400);
-		font-family: 'Space Mono';
-		font-size: 13px;
-		font-weight: 400;
-		text-transform: uppercase;
-	}
-
-	.chevron-icon {
-		color: var(--bg-vanilla-400);
-		transition: transform 0.2s ease-in-out;
-
-		&.open {
-			transform: rotate(180deg);
-		}
-	}
-}
-
-.settings-section-content {
-	padding: 0 12px 0 12px;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	max-height: 0;
-	overflow: hidden;
-	opacity: 0;
-	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
-
-	&.open {
-		padding-bottom: 24px;
-		max-height: 1000px;
-		opacity: 1;
-	}
-}
-
-.lightMode {
-	.settings-section-header {
-		.chevron-icon {
-			color: var(--bg-ink-400);
-		}
-		.settings-section-title {
-			color: var(--bg-ink-400);
-		}
-	}
-
-	.settings-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-	}
-}

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

@@ -1,51 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-
-import './SettingsSection.styles.scss';
-
-export interface SettingsSectionProps {
-	title: string;
-	defaultOpen?: boolean;
-	children: ReactNode;
-	icon?: ReactNode;
-}
-
-function SettingsSection({
-	title,
-	defaultOpen = false,
-	children,
-	icon,
-}: SettingsSectionProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(defaultOpen);
-
-	const toggleOpen = (): void => {
-		setIsOpen((prev) => !prev);
-	};
-
-	return (
-		<section className="settings-section">
-			<button
-				type="button"
-				className="settings-section-header"
-				onClick={toggleOpen}
-			>
-				<span className="settings-section-title">
-					{icon ? icon : null} {title}
-				</span>
-				<ChevronDown
-					size={16}
-					className={isOpen ? 'chevron-icon open' : 'chevron-icon'}
-				/>
-			</button>
-			<div
-				className={
-					isOpen ? 'settings-section-content open' : 'settings-section-content'
-				}
-			>
-				{children}
-			</div>
-		</section>
-	);
-}
-
-export default SettingsSection;

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

@@ -14,6 +14,7 @@ import {
 	Input,
 	InputNumber,
 	Select,
+	Space,
 	Switch,
 	Typography,
 } from 'antd';
@@ -27,16 +28,9 @@ import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
-	Antenna,
-	Axis3D,
 	ConciergeBell,
-	Layers,
-	LayoutDashboard,
 	LineChart,
-	Link,
-	Pencil,
 	Plus,
-	SlidersHorizontal,
 	Spline,
 	SquareArrowOutUpRight,
 } from 'lucide-react';
@@ -52,7 +46,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
-import SettingsSection from './components/SettingsSection/SettingsSection';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
@@ -185,21 +178,6 @@ function RightContainer({
 		}));
 	}, [dashboardVariables]);
 
-	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
-		allowSoftMinMax,
-		allowLogScale,
-	]);
-
-	const isFormattingSectionVisible = useMemo(
-		() => allowYAxisUnit || allowDecimalPrecision || allowPanelColumnPreference,
-		[allowYAxisUnit, allowDecimalPrecision, allowPanelColumnPreference],
-	);
-
-	const isLegendSectionVisible = useMemo(
-		() => allowLegendPosition || allowLegendColors,
-		[allowLegendPosition, allowLegendColors],
-	);
-
 	const updateCursorAndDropdown = (value: string, pos: number): void => {
 		setCursorPos(pos);
 		const lastDollar = value.lastIndexOf('$', pos - 1);
@@ -215,15 +193,6 @@ function RightContainer({
 		}, 0);
 	};
 
-	const decimapPrecisionOptions = useMemo(() => {
-		return [
-			{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
-			{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
-			{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
-			{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
-		];
-	}, []);
-
 	const handleInputCursor = (): void => {
 		const pos = inputRef.current?.input?.selectionStart ?? 0;
 		updateCursorAndDropdown(inputValue, pos);
@@ -294,297 +263,269 @@ function RightContainer({
 		<div className="right-container">
 			<section className="header">
 				<div className="purple-dot" />
-				<Typography.Text className="header-text">Panel Settings</Typography.Text>
+				<Typography.Text className="header-text">Panel details</Typography.Text>
 			</section>
-
-			<SettingsSection title="General" defaultOpen icon={<Pencil size={14} />}>
-				<section className="name-description control-container">
-					<Typography.Text className="typography">Name</Typography.Text>
-					<AutoComplete
-						options={dashboardVariableOptions}
-						value={inputValue}
-						onChange={onInputChange}
-						onSelect={onSelect}
-						filterOption={filterOption}
-						style={{ width: '100%' }}
-						getPopupContainer={popupContainer}
-						placeholder="Enter the panel name here..."
-						open={autoCompleteOpen}
-					>
-						<Input
-							rootClassName="name-input"
-							ref={inputRef}
-							onSelect={handleInputCursor}
-							onClick={handleInputCursor}
-							onBlur={(): void => setAutoCompleteOpen(false)}
-						/>
-					</AutoComplete>
-					<Typography.Text className="typography">Description</Typography.Text>
-					<TextArea
-						placeholder="Enter the panel description here..."
-						bordered
-						allowClear
-						value={description}
-						onChange={(event): void =>
-							onChangeHandler(setDescription, event.target.value)
-						}
-						rootClassName="description-input"
-					/>
-				</section>
-			</SettingsSection>
-
-			<section className="panel-config">
-				<SettingsSection
-					title="Visualization"
-					defaultOpen
-					icon={<LayoutDashboard size={14} />}
+			<section className="name-description">
+				<Typography.Text className="typography">Name</Typography.Text>
+				<AutoComplete
+					options={dashboardVariableOptions}
+					value={inputValue}
+					onChange={onInputChange}
+					onSelect={onSelect}
+					filterOption={filterOption}
+					style={{ width: '100%' }}
+					getPopupContainer={popupContainer}
+					placeholder="Enter the panel name here..."
+					open={autoCompleteOpen}
 				>
-					<section className="panel-type control-container">
-						<Typography.Text className="typography">Panel Type</Typography.Text>
-						<Select
-							onChange={setGraphHandler}
-							value={selectedGraph}
-							className="panel-type-select"
-							data-testid="panel-change-select"
-							data-stacking-state={stackedBarChart ? 'true' : 'false'}
-						>
-							{graphTypes.map((item) => (
-								<Option key={item.name} value={item.name}>
-									<div className="select-option">
-										<div className="icon">{item.icon}</div>
-										<Typography.Text className="display">{item.display}</Typography.Text>
-									</div>
-								</Option>
-							))}
-						</Select>
-					</section>
-
-					{allowPanelTimePreference && (
-						<section className="panel-time-preference control-container">
-							<Typography.Text className="panel-time-text">
-								Panel Time Preference
-							</Typography.Text>
-							<TimePreference
-								{...{
-									selectedTime,
-									setSelectedTime,
-								}}
-							/>
-						</section>
-					)}
-
-					{allowStackingBarChart && (
-						<section className="stack-chart control-container">
-							<Typography.Text className="label">Stack series</Typography.Text>
-							<Switch
-								checked={stackedBarChart}
-								size="small"
-								onChange={(checked): void => setStackedBarChart(checked)}
-							/>
-						</section>
-					)}
-
-					{allowFillSpans && (
-						<section className="fill-gaps">
-							<div className="fill-gaps-text-container">
-								<Typography className="fill-gaps-text">Fill gaps</Typography>
-								<Typography.Text className="fill-gaps-text-description">
-									Fill gaps in data with 0 for continuity
-								</Typography.Text>
+					<Input
+						rootClassName="name-input"
+						ref={inputRef}
+						onSelect={handleInputCursor}
+						onClick={handleInputCursor}
+						onBlur={(): void => setAutoCompleteOpen(false)}
+					/>
+				</AutoComplete>
+				<Typography.Text className="typography">Description</Typography.Text>
+				<TextArea
+					placeholder="Enter the panel description here..."
+					bordered
+					allowClear
+					value={description}
+					onChange={(event): void =>
+						onChangeHandler(setDescription, event.target.value)
+					}
+					rootClassName="description-input"
+				/>
+			</section>
+			<section className="panel-config">
+				<Typography.Text className="typography">Panel Type</Typography.Text>
+				<Select
+					onChange={setGraphHandler}
+					value={selectedGraph}
+					style={{ width: '100%' }}
+					className="panel-type-select"
+					data-testid="panel-change-select"
+					data-stacking-state={stackedBarChart ? 'true' : 'false'}
+				>
+					{graphTypes.map((item) => (
+						<Option key={item.name} value={item.name}>
+							<div className="select-option">
+								<div className="icon">{item.icon}</div>
+								<Typography.Text className="display">{item.display}</Typography.Text>
 							</div>
-							<Switch
-								checked={isFillSpans}
-								size="small"
-								onChange={(checked): void => setIsFillSpans(checked)}
+						</Option>
+					))}
+				</Select>
+
+				{allowFillSpans && (
+					<Space className="fill-gaps">
+						<Typography className="fill-gaps-text">Fill gaps</Typography>
+						<Switch
+							checked={isFillSpans}
+							size="small"
+							onChange={(checked): void => setIsFillSpans(checked)}
+						/>
+					</Space>
+				)}
+
+				{allowPanelTimePreference && (
+					<>
+						<Typography.Text className="panel-time-text">
+							Panel Time Preference
+						</Typography.Text>
+						<TimePreference
+							{...{
+								selectedTime,
+								setSelectedTime,
+							}}
+						/>
+					</>
+				)}
+
+				{allowPanelColumnPreference && (
+					<ColumnUnitSelector
+						columnUnits={columnUnits}
+						setColumnUnits={setColumnUnits}
+						isNewDashboard={isNewDashboard}
+					/>
+				)}
+
+				{allowYAxisUnit && (
+					<DashboardYAxisUnitSelectorWrapper
+						onSelect={setYAxisUnit}
+						value={yAxisUnit || ''}
+						fieldLabel={
+							selectedGraphType === PanelDisplay.VALUE ||
+							selectedGraphType === PanelDisplay.PIE
+								? 'Unit'
+								: 'Y Axis Unit'
+						}
+						// Only update the y-axis unit value automatically in create mode
+						shouldUpdateYAxisUnit={isNewDashboard}
+					/>
+				)}
+
+				{allowDecimalPrecision && (
+					<section className="decimal-precision-selector">
+						<Typography.Text className="typography">
+							Decimal Precision
+						</Typography.Text>
+						<Select
+							options={[
+								{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
+								{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
+								{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
+								{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
+								{ label: '4 decimals', value: PrecisionOptionsEnum.FOUR },
+								{ label: 'Full Precision', value: PrecisionOptionsEnum.FULL },
+							]}
+							value={decimalPrecision}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={PrecisionOptionsEnum.TWO}
+							onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
+						/>
+					</section>
+				)}
+
+				{allowSoftMinMax && (
+					<section className="soft-min-max">
+						<section className="container">
+							<Typography.Text className="text">Soft Min</Typography.Text>
+							<InputNumber
+								type="number"
+								value={softMin}
+								onChange={softMinHandler}
+								rootClassName="input"
 							/>
 						</section>
-					)}
-				</SettingsSection>
-
-				{isFormattingSectionVisible && (
-					<SettingsSection
-						title="Formatting & Units"
-						icon={<SlidersHorizontal size={14} />}
-					>
-						{allowYAxisUnit && (
-							<DashboardYAxisUnitSelectorWrapper
-								onSelect={setYAxisUnit}
-								value={yAxisUnit || ''}
-								fieldLabel={
-									selectedGraphType === PanelDisplay.VALUE ||
-									selectedGraphType === PanelDisplay.PIE
-										? 'Unit'
-										: 'Y Axis Unit'
-								}
-								// Only update the y-axis unit value automatically in create mode
-								shouldUpdateYAxisUnit={isNewDashboard}
+						<section className="container">
+							<Typography.Text className="text">Soft Max</Typography.Text>
+							<InputNumber
+								value={softMax}
+								type="number"
+								rootClassName="input"
+								onChange={softMaxHandler}
 							/>
-						)}
-
-						{allowDecimalPrecision && (
-							<section className="decimal-precision-selector control-container">
-								<Typography.Text className="typography">
-									Decimal Precision
-								</Typography.Text>
-								<Select
-									options={decimapPrecisionOptions}
-									value={decimalPrecision}
-									style={{ width: '100%' }}
-									className="panel-type-select"
-									defaultValue={PrecisionOptionsEnum.TWO}
-									onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
-								/>
-							</section>
-						)}
-
-						{allowPanelColumnPreference && (
-							<ColumnUnitSelector
-								columnUnits={columnUnits}
-								setColumnUnits={setColumnUnits}
-								isNewDashboard={isNewDashboard}
-							/>
-						)}
-					</SettingsSection>
+						</section>
+					</section>
 				)}
 
-				{isAxisSectionVisible && (
-					<SettingsSection title="Axes" icon={<Axis3D size={14} />}>
-						{allowSoftMinMax && (
-							<section className="soft-min-max">
-								<section className="container">
-									<Typography.Text className="text">Soft Min</Typography.Text>
-									<InputNumber
-										type="number"
-										value={softMin}
-										onChange={softMinHandler}
-										rootClassName="input"
-									/>
-								</section>
-								<section className="container">
-									<Typography.Text className="text">Soft Max</Typography.Text>
-									<InputNumber
-										value={softMax}
-										type="number"
-										rootClassName="input"
-										onChange={softMaxHandler}
-									/>
-								</section>
-							</section>
-						)}
-
-						{allowLogScale && (
-							<section className="log-scale control-container">
-								<Typography.Text className="typography">Y Axis Scale</Typography.Text>
-								<Select
-									onChange={(value): void =>
-										setIsLogScale(value === LogScale.LOGARITHMIC)
-									}
-									value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
-									style={{ width: '100%' }}
-									className="panel-type-select"
-									defaultValue={LogScale.LINEAR}
-								>
-									<Option value={LogScale.LINEAR}>
-										<div className="select-option">
-											<div className="icon">
-												<LineChart size={16} />
-											</div>
-											<Typography.Text className="display">Linear</Typography.Text>
-										</div>
-									</Option>
-									<Option value={LogScale.LOGARITHMIC}>
-										<div className="select-option">
-											<div className="icon">
-												<Spline size={16} />
-											</div>
-											<Typography.Text className="display">Logarithmic</Typography.Text>
-										</div>
-									</Option>
-								</Select>
-							</section>
-						)}
-					</SettingsSection>
-				)}
-
-				{isLegendSectionVisible && (
-					<SettingsSection title="Legend" icon={<Layers size={14} />}>
-						{allowLegendPosition && (
-							<section className="legend-position control-container">
-								<Typography.Text className="typography">Position</Typography.Text>
-								<Select
-									onChange={(value: LegendPosition): void => setLegendPosition(value)}
-									value={legendPosition}
-									style={{ width: '100%' }}
-									className="panel-type-select"
-									defaultValue={LegendPosition.BOTTOM}
-								>
-									<Option value={LegendPosition.BOTTOM}>
-										<div className="select-option">
-											<Typography.Text className="display">Bottom</Typography.Text>
-										</div>
-									</Option>
-									<Option value={LegendPosition.RIGHT}>
-										<div className="select-option">
-											<Typography.Text className="display">Right</Typography.Text>
-										</div>
-									</Option>
-								</Select>
-							</section>
-						)}
-
-						{allowLegendColors && (
-							<section className="legend-colors">
-								<LegendColors
-									customLegendColors={customLegendColors}
-									setCustomLegendColors={setCustomLegendColors}
-									queryResponse={queryResponse}
-								/>
-							</section>
-						)}
-					</SettingsSection>
+				{allowStackingBarChart && (
+					<section className="stack-chart">
+						<Typography.Text className="label">Stack series</Typography.Text>
+						<Switch
+							checked={stackedBarChart}
+							size="small"
+							onChange={(checked): void => setStackedBarChart(checked)}
+						/>
+					</section>
 				)}
 
 				{allowBucketConfig && (
-					<SettingsSection title="Histogram / Buckets">
-						<section className="bucket-config control-container">
-							<Typography.Text className="label">Number of buckets</Typography.Text>
-							<InputNumber
-								value={bucketCount || null}
-								type="number"
-								min={0}
-								rootClassName="bucket-input"
-								placeholder="Default: 30"
-								onChange={(val): void => {
-									setBucketCount(val || 0);
-								}}
-							/>
-							<Typography.Text className="label bucket-size-label">
-								Bucket width
+					<section className="bucket-config">
+						<Typography.Text className="label">Number of buckets</Typography.Text>
+						<InputNumber
+							value={bucketCount || null}
+							type="number"
+							min={0}
+							rootClassName="bucket-input"
+							placeholder="Default: 30"
+							onChange={(val): void => {
+								setBucketCount(val || 0);
+							}}
+						/>
+						<Typography.Text className="label bucket-size-label">
+							Bucket width
+						</Typography.Text>
+						<InputNumber
+							value={bucketWidth || null}
+							type="number"
+							precision={2}
+							placeholder="Default: Auto"
+							step={0.1}
+							min={0.0}
+							rootClassName="bucket-input"
+							onChange={(val): void => {
+								setBucketWidth(val || 0);
+							}}
+						/>
+						<section className="combine-hist">
+							<Typography.Text className="label">
+								Merge all series into one
 							</Typography.Text>
-							<InputNumber
-								value={bucketWidth || null}
-								type="number"
-								precision={2}
-								placeholder="Default: Auto"
-								step={0.1}
-								min={0.0}
-								rootClassName="bucket-input"
-								onChange={(val): void => {
-									setBucketWidth(val || 0);
-								}}
+							<Switch
+								checked={combineHistogram}
+								size="small"
+								onChange={(checked): void => setCombineHistogram(checked)}
 							/>
-							<section className="combine-hist">
-								<Typography.Text className="label">
-									Merge all series into one
-								</Typography.Text>
-								<Switch
-									checked={combineHistogram}
-									size="small"
-									onChange={(checked): void => setCombineHistogram(checked)}
-								/>
-							</section>
 						</section>
-					</SettingsSection>
+					</section>
+				)}
+
+				{allowLogScale && (
+					<section className="log-scale">
+						<Typography.Text className="typography">Y Axis Scale</Typography.Text>
+						<Select
+							onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
+							value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LogScale.LINEAR}
+						>
+							<Option value={LogScale.LINEAR}>
+								<div className="select-option">
+									<div className="icon">
+										<LineChart size={16} />
+									</div>
+									<Typography.Text className="display">Linear</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LogScale.LOGARITHMIC}>
+								<div className="select-option">
+									<div className="icon">
+										<Spline size={16} />
+									</div>
+									<Typography.Text className="display">Logarithmic</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
+
+				{allowLegendPosition && (
+					<section className="legend-position">
+						<Typography.Text className="typography">Legend Position</Typography.Text>
+						<Select
+							onChange={(value: LegendPosition): void => setLegendPosition(value)}
+							value={legendPosition}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LegendPosition.BOTTOM}
+						>
+							<Option value={LegendPosition.BOTTOM}>
+								<div className="select-option">
+									<Typography.Text className="display">Bottom</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LegendPosition.RIGHT}>
+								<div className="select-option">
+									<Typography.Text className="display">Right</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
+
+				{allowLegendColors && (
+					<section className="legend-colors">
+						<LegendColors
+							customLegendColors={customLegendColors}
+							setCustomLegendColors={setCustomLegendColors}
+							queryResponse={queryResponse}
+						/>
+					</section>
 				)}
 			</section>
 
@@ -600,25 +541,17 @@ function RightContainer({
 			)}
 
 			{allowContextLinks && (
-				<SettingsSection
-					title="Context Links"
-					icon={<Link size={14} />}
-					defaultOpen={!!contextLinks.linksData.length}
-				>
+				<section className="context-links">
 					<ContextLinks
 						contextLinks={contextLinks}
 						setContextLinks={setContextLinks}
 						selectedWidget={selectedWidget}
 					/>
-				</SettingsSection>
+				</section>
 			)}
 
 			{allowThreshold && (
-				<SettingsSection
-					title="Thresholds"
-					icon={<Antenna size={14} />}
-					defaultOpen={!!thresholds.length}
-				>
+				<section>
 					<ThresholdSelector
 						thresholds={thresholds}
 						setThresholds={setThresholds}
@@ -626,7 +559,7 @@ function RightContainer({
 						selectedGraph={selectedGraph}
 						columnUnits={columnUnits}
 					/>
-				</SettingsSection>
+				</section>
 			)}
 		</div>
 	);

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -36,7 +36,7 @@ const checkStackSeriesState = (
 	expect(getByTextUtil(container, 'Stack series')).toBeInTheDocument();
 
 	const stackSeriesSection = container.querySelector(
-		'.stack-chart',
+		'section > .stack-chart',
 	) as HTMLElement;
 	expect(stackSeriesSection).toBeInTheDocument();
 
@@ -310,12 +310,12 @@ describe('Stacking bar in new panel', () => {
 
 		const { container, getByText } = render(
 			<I18nextProvider i18n={i18n}>
-				<DashboardProvider dashboardId="">
+				<DashboardProvider>
 					<PreferenceContextProvider>
 						<NewWidget
-							dashboardId=""
-							selectedDashboard={undefined}
 							selectedGraph={PANEL_TYPES.BAR}
+							fillSpans={undefined}
+							yAxisUnit={undefined}
 						/>
 					</PreferenceContextProvider>
 				</DashboardProvider>
@@ -326,7 +326,7 @@ describe('Stacking bar in new panel', () => {
 		expect(getByText('Stack series')).toBeInTheDocument();
 
 		// Verify section exists
-		const section = container.querySelector('.stack-chart');
+		const section = container.querySelector('section > .stack-chart');
 		expect(section).toBeInTheDocument();
 
 		// Verify switch is present and enabled (ant-switch-checked)
@@ -356,11 +356,11 @@ describe('when switching to BAR panel type', () => {
 
 	it('should preserve saved stacking value of true', async () => {
 		const { getByTestId, getByText, container } = render(
-			<DashboardProvider dashboardId="">
+			<DashboardProvider>
 				<NewWidget
-					dashboardId=""
-					selectedDashboard={undefined}
 					selectedGraph={PANEL_TYPES.BAR}
+					fillSpans={undefined}
+					yAxisUnit={undefined}
 				/>
 			</DashboardProvider>,
 		);

frontend/src/container/NewWidget/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { generatePath } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router-dom';
 import { WarningOutlined } from '@ant-design/icons';
 import { Button, Flex, Modal, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -32,6 +32,8 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
+import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
 import {
 	clearSelectedRowWidgetId,
@@ -81,8 +83,6 @@ import {
 import './NewWidget.styles.scss';
 
 function NewWidget({
-	selectedDashboard,
-	dashboardId,
 	selectedGraph,
 	enableDrillDown = false,
 }: NewWidgetProps): JSX.Element {
@@ -90,6 +90,11 @@ function NewWidget({
 	const setToScrollWidgetId = useScrollToWidgetIdStore(
 		(s) => s.setToScrollWidgetId,
 	);
+	const {
+		selectedDashboard,
+		setSelectedDashboard,
+		columnWidths,
+	} = useDashboard();
 
 	const { dashboardVariables } = useDashboardVariables();
 
@@ -134,6 +139,8 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
+	const { dashboardId } = useParams<DashboardWidgetPageParams>();
+
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -279,10 +286,11 @@ function NewWidget({
 				isLogScale,
 				legendPosition,
 				customLegendColors,
-				columnWidths: selectedWidget.columnWidths,
+				columnWidths: columnWidths?.[selectedWidget?.id],
 				contextLinks,
 			};
 		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		columnUnits,
 		currentQuery,
@@ -305,8 +313,8 @@ function NewWidget({
 		isLogScale,
 		legendPosition,
 		customLegendColors,
+		columnWidths,
 		contextLinks,
-		selectedWidget.columnWidths,
 	]);
 
 	const closeModal = (): void => {
@@ -439,19 +447,6 @@ function NewWidget({
 		globalSelectedInterval,
 	]);
 
-	const navigateToDashboardPage = useCallback(() => {
-		const params = new URLSearchParams();
-
-		const urlVariablesQueryString = query.get(QueryParams.variables);
-		if (urlVariablesQueryString) {
-			params.set(QueryParams.variables, urlVariablesQueryString);
-		}
-
-		const search = params.toString() ? `?${params.toString()}` : '';
-
-		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }) + search);
-	}, [dashboardId, query, safeNavigate]);
-
 	const onClickSaveHandler = useCallback(() => {
 		if (!selectedDashboard) {
 			return;
@@ -565,9 +560,12 @@ function NewWidget({
 		};
 
 		updateDashboardMutation.mutateAsync(dashboard, {
-			onSuccess: () => {
+			onSuccess: (updatedDashboard) => {
+				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
-				navigateToDashboardPage();
+				safeNavigate({
+					pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
+				});
 			},
 		});
 	}, [
@@ -582,8 +580,9 @@ function NewWidget({
 		preWidgets,
 		updateDashboardMutation,
 		widgets,
+		setSelectedDashboard,
 		setToScrollWidgetId,
-		navigateToDashboardPage,
+		safeNavigate,
 		dashboardId,
 	]);
 
@@ -592,12 +591,12 @@ function NewWidget({
 			setDiscardModal(true);
 			return;
 		}
-		navigateToDashboardPage();
-	}, [isQueryModified, navigateToDashboardPage]);
+		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
+	}, [dashboardId, isQueryModified, safeNavigate]);
 
 	const discardChanges = useCallback(() => {
-		navigateToDashboardPage();
-	}, [navigateToDashboardPage]);
+		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
+	}, [dashboardId, safeNavigate]);
 
 	const setGraphHandler = (type: PANEL_TYPES): void => {
 		setIsLoadingPanelData(true);
@@ -631,25 +630,22 @@ function NewWidget({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query]);
 
-	const isNewPanel = useMemo(() => {
-		const widgetId = query.get('widgetId');
-		const selectedWidget = widgets?.find((e) => e.id === widgetId);
-		return isUndefined(selectedWidget);
-	}, [query, widgets]);
-
 	const onSaveDashboard = useCallback((): void => {
+		const widgetId = query.get('widgetId');
+		const selectWidget = widgets?.find((e) => e.id === widgetId);
+
 		logEvent('Panel Edit: Save changes', {
 			panelType: selectedWidget.panelTypes,
 			dashboardId: selectedDashboard?.id,
 			widgetId: selectedWidget.id,
 			dashboardName: selectedDashboard?.data.title,
 			queryType: currentQuery.queryType,
-			isNewPanel,
+			isNewPanel: isUndefined(selectWidget),
 			dataSource: currentQuery?.builder?.queryData?.[0]?.dataSource,
 		});
 		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel]);
+	}, []);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -739,14 +735,12 @@ function NewWidget({
 		}
 		const widgetId = query.get('widgetId') || '';
 		const graphType = query.get('graphType') || '';
-		const variables = query.get(QueryParams.variables) || '';
 		const queryParams = {
 			[QueryParams.expandedWidgetId]: widgetId,
 			[QueryParams.graphType]: graphType,
 			[QueryParams.compositeQuery]: encodeURIComponent(
 				JSON.stringify(currentQuery),
 			),
-			[QueryParams.variables]: variables,
 		};
 
 		const updatedSearch = createQueryParams(queryParams);
@@ -827,8 +821,6 @@ function NewWidget({
 								isLoadingPanelData={isLoadingPanelData}
 								setQueryResponse={setQueryResponse}
 								enableDrillDown={enableDrillDown}
-								selectedDashboard={selectedDashboard}
-								isNewPanel={isNewPanel}
 							/>
 						)}
 					</OverlayScrollbar>

frontend/src/container/NewWidget/types.ts

@@ -2,7 +2,6 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { IDashboardContext } from 'providers/Dashboard/types';
 import { SuccessResponse, Warning } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -10,9 +9,9 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { timePreferance } from './RightContainer/timeItems';
 
 export interface NewWidgetProps {
-	dashboardId: string;
-	selectedDashboard: IDashboardContext['selectedDashboard'];
 	selectedGraph: PANEL_TYPES;
+	yAxisUnit: Widgets['yAxisUnit'];
+	fillSpans: Widgets['fillSpans'];
 	enableDrillDown?: boolean;
 }
 
@@ -35,8 +34,6 @@ export interface WidgetGraphProps {
 		>
 	>;
 	enableDrillDown?: boolean;
-	selectedDashboard: IDashboardContext['selectedDashboard'];
-	isNewPanel?: boolean;
 }
 
 export type WidgetGraphContainerProps = {

frontend/src/hooks/dashboard/__test__/useTransformDashboardVariables.test.tsx

@@ -1,339 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
-import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
-
-jest.mock('hooks/dashboard/useDashboardFromLocalStorage');
-jest.mock('hooks/dashboard/useVariablesFromUrl');
-
-const mockUseDashboardVariablesFromLocalStorage = useDashboardVariablesFromLocalStorage as jest.MockedFunction<
-	typeof useDashboardVariablesFromLocalStorage
->;
-const mockUseVariablesFromUrl = useVariablesFromUrl as jest.MockedFunction<
-	typeof useVariablesFromUrl
->;
-
-const makeVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: 'existing-id',
-	name: 'env',
-	description: '',
-	type: 'QUERY',
-	sort: 'DISABLED',
-	multiSelect: false,
-	showALLOption: false,
-	selectedValue: 'prod',
-	...overrides,
-});
-
-const makeDashboard = (
-	variables: Record<string, IDashboardVariable>,
-): Dashboard => ({
-	id: 'dash-1',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'Test',
-		variables,
-	},
-});
-
-const setupHook = (
-	currentDashboard: Record<string, any> = {},
-	urlVariables: Record<string, any> = {},
-): ReturnType<typeof useTransformDashboardVariables> => {
-	mockUseDashboardVariablesFromLocalStorage.mockReturnValue({
-		currentDashboard,
-		updateLocalStorageDashboardVariables: jest.fn(),
-	});
-	mockUseVariablesFromUrl.mockReturnValue({
-		getUrlVariables: () => urlVariables,
-		setUrlVariables: jest.fn(),
-		updateUrlVariable: jest.fn(),
-	});
-
-	const { result } = renderHook(() => useTransformDashboardVariables('dash-1'));
-	return result.current;
-};
-
-describe('useTransformDashboardVariables', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	describe('order assignment', () => {
-		it('assigns order starting from 0 to variables that have none', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'v1', order: undefined }),
-				v2: makeVariable({ id: 'id2', name: 'v2', order: undefined }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			const orders = Object.values(result.data.variables).map((v) => v.order);
-			expect(orders).toContain(0);
-			expect(orders).toContain(1);
-		});
-
-		it('preserves existing order values', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'v1', order: 5 }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.order).toBe(5);
-		});
-
-		it('assigns unique orders across multiple variables that all lack an order', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'v1', order: undefined }),
-				v2: makeVariable({ id: 'id2', name: 'v2', order: undefined }),
-				v3: makeVariable({ id: 'id3', name: 'v3', order: undefined }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			const orders = Object.values(result.data.variables).map((v) => v.order);
-			// All three newly assigned orders must be distinct
-			expect(new Set(orders).size).toBe(3);
-		});
-	});
-
-	describe('ID assignment', () => {
-		it('assigns a UUID to variables that have no id', () => {
-			const { transformDashboardVariables } = setupHook();
-			const variable = makeVariable({ name: 'v1' });
-			(variable as any).id = undefined;
-			const dashboard = makeDashboard({ v1: variable });
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.id).toMatch(
-				/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
-			);
-		});
-
-		it('preserves existing IDs', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'keep-me', name: 'v1' }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.id).toBe('keep-me');
-		});
-	});
-
-	describe('TEXTBOX backward compatibility', () => {
-		it('copies textboxValue to defaultValue when defaultValue is missing', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'v1',
-					type: 'TEXTBOX',
-					textboxValue: 'hello',
-					defaultValue: undefined,
-					order: undefined,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.defaultValue).toBe('hello');
-		});
-
-		it('does not overwrite an existing defaultValue', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'v1',
-					type: 'TEXTBOX',
-					textboxValue: 'old',
-					defaultValue: 'keep',
-					order: undefined,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.defaultValue).toBe('keep');
-		});
-	});
-
-	describe('localStorage merge', () => {
-		it('applies localStorage selectedValue over DB value', () => {
-			const { transformDashboardVariables } = setupHook({
-				env: { selectedValue: 'staging', allSelected: false },
-			});
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('staging');
-		});
-
-		it('applies localStorage allSelected over DB value', () => {
-			const { transformDashboardVariables } = setupHook({
-				env: { selectedValue: undefined, allSelected: true },
-			});
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					allSelected: false,
-					showALLOption: true,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.allSelected).toBe(true);
-		});
-	});
-
-	describe('URL variable override', () => {
-		it('sets allSelected=true when URL value is __ALL__', () => {
-			const { transformDashboardVariables } = setupHook(
-				{ env: { selectedValue: 'prod', allSelected: false } },
-				{ env: '__ALL__' },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					showALLOption: true,
-					allSelected: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.allSelected).toBe(true);
-		});
-
-		it('sets selectedValue from URL and clears allSelected when showALLOption is true', () => {
-			const { transformDashboardVariables } = setupHook(
-				{ env: { selectedValue: undefined, allSelected: true } },
-				{ env: 'dev' },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					showALLOption: true,
-					allSelected: true,
-					multiSelect: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('dev');
-			expect(result.data.variables.v1.allSelected).toBe(false);
-		});
-
-		it('does not set allSelected=false when showALLOption is false', () => {
-			const { transformDashboardVariables } = setupHook(
-				{ env: { selectedValue: undefined, allSelected: true } },
-				{ env: 'dev' },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					showALLOption: false,
-					allSelected: true,
-					multiSelect: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('dev');
-			expect(result.data.variables.v1.allSelected).toBe(true);
-		});
-
-		it('normalizes array URL value to single value for single-select variable', () => {
-			const { transformDashboardVariables } = setupHook(
-				{},
-				{ env: ['prod', 'dev'] },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					multiSelect: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('prod');
-		});
-
-		it('wraps single URL value in array for multi-select variable', () => {
-			const { transformDashboardVariables } = setupHook({}, { env: 'prod' });
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					multiSelect: true,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toEqual(['prod']);
-		});
-
-		it('looks up URL variable by variable id when name is absent', () => {
-			const { transformDashboardVariables } = setupHook(
-				{},
-				{ 'var-uuid': 'fallback' },
-			);
-			const variable = makeVariable({ id: 'var-uuid', multiSelect: false });
-			delete variable.name;
-			const dashboard = makeDashboard({ v1: variable });
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('fallback');
-		});
-	});
-
-	describe('edge cases', () => {
-		it('returns data unchanged when there are no variables', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables).toEqual({});
-		});
-
-		it('does not mutate the original dashboard', () => {
-			const { transformDashboardVariables } = setupHook({
-				env: { selectedValue: 'staging', allSelected: false },
-			});
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
-			});
-			const originalValue = dashboard.data.variables.v1.selectedValue;
-
-			transformDashboardVariables(dashboard);
-
-			expect(dashboard.data.variables.v1.selectedValue).toBe(originalValue);
-		});
-	});
-});

frontend/src/hooks/dashboard/useDashboardFromLocalStorage.tsx

@@ -15,7 +15,7 @@ interface DashboardLocalStorageVariables {
 	[id: string]: LocalStoreDashboardVariables;
 }
 
-export interface UseDashboardVariablesFromLocalStorageReturn {
+interface UseDashboardVariablesFromLocalStorageReturn {
 	currentDashboard: LocalStoreDashboardVariables;
 	updateLocalStorageDashboardVariables: (
 		id: string,

frontend/src/hooks/dashboard/useTransformDashboardVariables.ts

@@ -1,128 +0,0 @@
-import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import {
-	useDashboardVariablesFromLocalStorage,
-	UseDashboardVariablesFromLocalStorageReturn,
-} from 'hooks/dashboard/useDashboardFromLocalStorage';
-import useVariablesFromUrl, {
-	UseVariablesFromUrlReturn,
-} from 'hooks/dashboard/useVariablesFromUrl';
-import { isEmpty } from 'lodash-es';
-import { normalizeUrlValueForVariable } from 'providers/Dashboard/normalizeUrlValue';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
-import { v4 as generateUUID } from 'uuid';
-
-export function useTransformDashboardVariables(
-	dashboardId: string,
-): Pick<UseVariablesFromUrlReturn, 'getUrlVariables' | 'updateUrlVariable'> &
-	UseDashboardVariablesFromLocalStorageReturn & {
-		transformDashboardVariables: (data: Dashboard) => Dashboard;
-	} {
-	const {
-		currentDashboard,
-		updateLocalStorageDashboardVariables,
-	} = useDashboardVariablesFromLocalStorage(dashboardId);
-	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
-
-	const mergeDBWithLocalStorage = (
-		data: Dashboard,
-		localStorageVariables: any,
-	): Dashboard => {
-		const updatedData = data;
-		if (data && localStorageVariables) {
-			const updatedVariables = data.data.variables;
-			const variablesFromUrl = getUrlVariables();
-			Object.keys(data.data.variables).forEach((variable) => {
-				const variableData = data.data.variables[variable];
-
-				// values from url
-				const urlVariable = variableData?.name
-					? variablesFromUrl[variableData?.name] || variablesFromUrl[variableData.id]
-					: variablesFromUrl[variableData.id];
-
-				let updatedVariable = {
-					...data.data.variables[variable],
-					...localStorageVariables[variableData.name as any],
-				};
-
-				// respect the url variable if it is set, override the others
-				if (!isEmpty(urlVariable)) {
-					if (urlVariable === ALL_SELECTED_VALUE) {
-						updatedVariable = {
-							...updatedVariable,
-							allSelected: true,
-						};
-					} else {
-						// Normalize URL value to match variable's multiSelect configuration
-						const normalizedValue = normalizeUrlValueForVariable(
-							urlVariable,
-							variableData,
-						);
-
-						updatedVariable = {
-							...updatedVariable,
-							selectedValue: normalizedValue,
-							// Only set allSelected to false if showALLOption is available
-							...(updatedVariable?.showALLOption && { allSelected: false }),
-						};
-					}
-				}
-
-				updatedVariables[variable] = updatedVariable;
-			});
-			updatedData.data.variables = updatedVariables;
-		}
-		return updatedData;
-	};
-
-	// As we do not have order and ID's in the variables object, we have to process variables to add order and ID if they do not exist in the variables object
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const transformDashboardVariables = (data: Dashboard): Dashboard => {
-		if (data && data.data && data.data.variables) {
-			const clonedDashboardData = mergeDBWithLocalStorage(
-				JSON.parse(JSON.stringify(data)),
-				currentDashboard,
-			);
-			const { variables } = clonedDashboardData.data;
-			const existingOrders: Set<number> = new Set();
-
-			for (const key in variables) {
-				// eslint-disable-next-line no-prototype-builtins
-				if (variables.hasOwnProperty(key)) {
-					const variable: IDashboardVariable = variables[key];
-
-					// Check if 'order' property doesn't exist or is undefined
-					if (variable.order === undefined) {
-						// Find a unique order starting from 0
-						let order = 0;
-						while (existingOrders.has(order)) {
-							order += 1;
-						}
-
-						variable.order = order;
-						existingOrders.add(order);
-						// ! BWC - Specific case for backward compatibility where textboxValue was used instead of defaultValue
-						if (variable.type === 'TEXTBOX' && !variable.defaultValue) {
-							variable.defaultValue = variable.textboxValue || '';
-						}
-					}
-
-					if (variable.id === undefined) {
-						variable.id = generateUUID();
-					}
-				}
-			}
-
-			return clonedDashboardData;
-		}
-
-		return data;
-	};
-
-	return {
-		transformDashboardVariables,
-		getUrlVariables,
-		updateUrlVariable,
-		currentDashboard,
-		updateLocalStorageDashboardVariables,
-	};
-}

frontend/src/hooks/dashboard/useVariablesFromUrl.tsx

@@ -11,7 +11,7 @@ export interface LocalStoreDashboardVariables {
 		| IDashboardVariable['selectedValue'];
 }
 
-export interface UseVariablesFromUrlReturn {
+interface UseVariablesFromUrlReturn {
 	getUrlVariables: () => LocalStoreDashboardVariables;
 	setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
 	updateUrlVariable: (

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -107,6 +107,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 		queryRangeMutation,
 		dashboardVariables,
 		dashboardDynamicVariables,
+		selectedDashboard?.data.version,
 		widget,
 	]);
 };

frontend/src/pages/DashboardPage/index.tsx

@@ -1,16 +1,3 @@
-import { useParams } from 'react-router-dom';
-import { DashboardProvider } from 'providers/Dashboard/Dashboard';
-
 import DashboardPage from './DashboardPage';
 
-function DashboardPageWithProvider(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	return (
-		<DashboardProvider dashboardId={dashboardId}>
-			<DashboardPage />
-		</DashboardProvider>
-	);
-}
-
-export default DashboardPageWithProvider;
+export default DashboardPage;

frontend/src/pages/DashboardWidget/__tests__/DashboardWidget.test.tsx

@@ -1,146 +0,0 @@
-import { Route } from 'react-router-dom';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import DashboardWidget from '../index';
-
-const DASHBOARD_ID = 'dash-1';
-const WIDGET_ID = 'widget-abc';
-
-const mockDashboardResponse = {
-	status: 'success',
-	data: {
-		id: DASHBOARD_ID,
-		createdAt: '2024-01-01T00:00:00Z',
-		createdBy: 'test',
-		updatedAt: '2024-01-01T00:00:00Z',
-		updatedBy: 'test',
-		isLocked: false,
-		data: {
-			collapsableRowsMigrated: true,
-			description: '',
-			name: '',
-			panelMap: {},
-			tags: [],
-			title: 'Test Dashboard',
-			uploadedGrafana: false,
-			uuid: '',
-			version: '',
-			variables: {},
-			widgets: [],
-			layout: [],
-		},
-	},
-};
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('container/NewWidget', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="new-widget">NewWidget</div>,
-}));
-
-// nuqs's useQueryState doesn't read from MemoryRouter, so we mock it to return
-// controlled values via the `mockQueryState` map below.
-const mockQueryState: Record<string, string | null> = {};
-
-jest.mock('nuqs', () => ({
-	...jest.requireActual('nuqs'),
-	useQueryState: (key: string): [string | null, jest.Mock] => [
-		mockQueryState[key] ?? null,
-		jest.fn(),
-	],
-}));
-
-// Wrap component in a Route so useParams can resolve dashboardId
-function renderAtRoute(
-	queryState: Record<string, string | null> = {},
-): ReturnType<typeof render> {
-	Object.assign(mockQueryState, queryState);
-	return render(
-		<Route path="/dashboard/:dashboardId/new">
-			<DashboardWidget />
-		</Route>,
-		undefined,
-		{ initialRoute: `/dashboard/${DASHBOARD_ID}/new` },
-	);
-}
-
-beforeEach(() => {
-	mockSafeNavigate.mockClear();
-	Object.keys(mockQueryState).forEach((k) => delete mockQueryState[k]);
-});
-
-describe('DashboardWidget', () => {
-	it('redirects to dashboard when widgetId is missing', async () => {
-		renderAtRoute({ graphType: PANEL_TYPES.TIME_SERIES });
-
-		await waitFor(() => {
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		const [navigatedTo] = mockSafeNavigate.mock.calls[0];
-		expect(navigatedTo).toContain(`/dashboard/${DASHBOARD_ID}`);
-	});
-
-	it('redirects to dashboard when graphType is missing', async () => {
-		renderAtRoute({ widgetId: WIDGET_ID });
-
-		await waitFor(() => {
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		const [navigatedTo] = mockSafeNavigate.mock.calls[0];
-		expect(navigatedTo).toContain(`/dashboard/${DASHBOARD_ID}`);
-	});
-
-	it('shows spinner while dashboard is loading', () => {
-		server.use(
-			rest.get(
-				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
-				(_req, res, ctx) => res(ctx.delay('infinite')),
-			),
-		);
-
-		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
-
-		expect(screen.getByRole('img', { name: 'loading' })).toBeInTheDocument();
-	});
-
-	it('shows error message when dashboard fetch fails', async () => {
-		server.use(
-			rest.get(
-				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
-				(_req, res, ctx) => res(ctx.status(500), ctx.json({ status: 'error' })),
-			),
-		);
-
-		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
-
-		await waitFor(() => {
-			expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-		});
-	});
-
-	it('renders NewWidget when dashboard loads successfully', async () => {
-		server.use(
-			rest.get(
-				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
-				(_req, res, ctx) => res(ctx.status(200), ctx.json(mockDashboardResponse)),
-			),
-		);
-
-		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
-
-		await waitFor(() => {
-			expect(screen.getByTestId('new-widget')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/pages/DashboardWidget/index.tsx

@@ -1,98 +1,50 @@
 import { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
-import { generatePath, useParams } from 'react-router-dom';
+import { generatePath, useLocation, useParams } from 'react-router-dom';
 import { Card, Typography } from 'antd';
-import getDashboard from 'api/v1/dashboards/id/get';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import NewWidget from 'container/NewWidget';
 import { isDrilldownEnabled } from 'container/QueryTable/Drilldown/drilldownUtils';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { parseAsStringEnum, useQueryState } from 'nuqs';
-import { setDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { Widgets } from 'types/api/dashboard/getAll';
 
 function DashboardWidget(): JSX.Element | null {
-	const { dashboardId } = useParams<{
-		dashboardId: string;
-	}>();
-	const [widgetId] = useQueryState('widgetId');
-	const [graphType] = useQueryState(
-		'graphType',
-		parseAsStringEnum<PANEL_TYPES>(Object.values(PANEL_TYPES)),
-	);
-
+	const { search } = useLocation();
+	const { dashboardId } = useParams<DashboardWidgetPageParams>();
 	const { safeNavigate } = useSafeNavigate();
 
+	const [selectedGraph, setSelectedGraph] = useState<PANEL_TYPES>();
+
+	const { selectedDashboard, dashboardResponse } = useDashboard();
+
+	const params = useUrlQuery();
+
+	const widgetId = params.get('widgetId');
+	const { data } = selectedDashboard || {};
+	const { widgets } = data || {};
+
+	const selectedWidget = widgets?.find((e) => e.id === widgetId) as Widgets;
+
 	useEffect(() => {
-		if (!graphType || !widgetId) {
+		const params = new URLSearchParams(search);
+		const graphType = params.get('graphType') as PANEL_TYPES | null;
+
+		if (graphType === null) {
 			safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
-		} else if (!dashboardId) {
-			safeNavigate(ROUTES.HOME);
+		} else {
+			setSelectedGraph(graphType);
 		}
-	}, [graphType, widgetId, dashboardId, safeNavigate]);
+	}, [dashboardId, safeNavigate, search]);
 
-	if (!widgetId || !graphType) {
-		return null;
-	}
-
-	return (
-		<DashboardWidgetInternal
-			dashboardId={dashboardId}
-			widgetId={widgetId}
-			graphType={graphType}
-		/>
-	);
-}
-
-function DashboardWidgetInternal({
-	dashboardId,
-	widgetId,
-	graphType,
-}: {
-	dashboardId: string;
-	widgetId: string;
-	graphType: PANEL_TYPES;
-}): JSX.Element | null {
-	const [selectedDashboard, setSelectedDashboard] = useState<
-		Dashboard | undefined
-	>(undefined);
-
-	const { transformDashboardVariables } = useTransformDashboardVariables(
-		dashboardId,
-	);
-
-	const {
-		isFetching: isFetchingDashboardResponse,
-		isError: isErrorDashboardResponse,
-	} = useQuery([REACT_QUERY_KEY.DASHBOARD_BY_ID, dashboardId, widgetId], {
-		enabled: true,
-		queryFn: async () =>
-			await getDashboard({
-				id: dashboardId,
-			}),
-		refetchOnWindowFocus: false,
-		cacheTime: DASHBOARD_CACHE_TIME,
-		onSuccess: (response) => {
-			const updatedDashboardData = transformDashboardVariables(response.data);
-			setSelectedDashboard(updatedDashboardData);
-			setDashboardVariablesStore({
-				dashboardId,
-				variables: updatedDashboardData.data.variables,
-			});
-		},
-	});
-
-	if (isFetchingDashboardResponse) {
+	if (selectedGraph === undefined || dashboardResponse.isLoading) {
 		return <Spinner tip="Loading.." />;
 	}
 
-	if (isErrorDashboardResponse) {
+	if (dashboardResponse.isError) {
 		return (
 			<Card>
 				<Typography>{SOMETHING_WENT_WRONG}</Typography>
@@ -102,11 +54,16 @@ function DashboardWidgetInternal({
 
 	return (
 		<NewWidget
-			dashboardId={dashboardId}
-			selectedGraph={graphType}
+			yAxisUnit={selectedWidget?.yAxisUnit}
+			selectedGraph={selectedGraph}
+			fillSpans={selectedWidget?.fillSpans}
 			enableDrillDown={isDrilldownEnabled()}
-			selectedDashboard={selectedDashboard}
 		/>
 	);
 }
+
+export interface DashboardWidgetPageParams {
+	dashboardId: string;
+}
+
 export default DashboardWidget;

frontend/src/pages/DashboardsListPage/__tests__/DashboardListPage.test.tsx

@@ -8,6 +8,7 @@ import {
 } from 'mocks-server/__mockdata__/dashboards';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { fireEvent, render, waitFor } from 'tests/test-utils';
 
 jest.mock('container/DashboardContainer/DashboardDescription/utils', () => ({
@@ -18,6 +19,11 @@ jest.mock('container/DashboardContainer/DashboardDescription/utils', () => ({
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
+	useRouteMatch: jest.fn().mockReturnValue({
+		params: {
+			dashboardId: 4,
+		},
+	}),
 }));
 
 const mockWindowOpen = jest.fn();
@@ -41,7 +47,9 @@ describe('dashboard list page', () => {
 			<MemoryRouter
 				initialEntries={['/dashbords?columnKey=asgard&order=stones&page=1']}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -63,7 +71,9 @@ describe('dashboard list page', () => {
 			<MemoryRouter
 				initialEntries={['/dashbords?columnKey=createdAt&order=descend&page=1']}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -82,7 +92,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -123,7 +135,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -150,7 +164,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -180,7 +196,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -14,21 +14,26 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery, UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import { useRouteMatch } from 'react-router-dom';
 import { Modal } from 'antd';
 import getDashboard from 'api/v1/dashboards/id/get';
 import locked from 'api/v1/dashboards/id/lock';
+import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ROUTES from 'constants/routes';
 import dayjs, { Dayjs } from 'dayjs';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
+import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
+import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import useTabVisibility from 'hooks/useTabFocus';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
 import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-import { defaultTo } from 'lodash-es';
+import { defaultTo, isEmpty } from 'lodash-es';
 import isEqual from 'lodash-es/isEqual';
 import isUndefined from 'lodash-es/isUndefined';
 import omitBy from 'lodash-es/omitBy';
 import { useAppContext } from 'providers/App/App';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
+import { normalizeUrlValueForVariable } from 'providers/Dashboard/normalizeUrlValue';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 // eslint-disable-next-line no-restricted-imports
 import { Dispatch } from 'redux';
@@ -36,9 +41,10 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
 import { SuccessResponseV2 } from 'types/api';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { v4 as generateUUID } from 'uuid';
 
 import {
 	DASHBOARD_CACHE_TIME,
@@ -77,11 +83,14 @@ export const DashboardContext = createContext<IDashboardContext>({
 	setColumnWidths: () => {},
 });
 
+interface Props {
+	dashboardId: string;
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function DashboardProvider({
 	children,
-	dashboardId,
-}: PropsWithChildren<{ dashboardId: string }>): JSX.Element {
+}: PropsWithChildren): JSX.Element {
 	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
 
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
@@ -91,6 +100,11 @@ export function DashboardProvider({
 		setDashboardQueryRangeCalled,
 	] = useState<boolean>(false);
 
+	const isDashboardPage = useRouteMatch<Props>({
+		path: ROUTES.DASHBOARD,
+		exact: true,
+	});
+
 	const { showErrorModal } = useErrorModal();
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -101,6 +115,11 @@ export function DashboardProvider({
 
 	const [onModal, Content] = Modal.useModal();
 
+	const isDashboardWidgetPage = useRouteMatch<Props>({
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+	});
+
 	const [layouts, setLayouts] = useState<Layout[]>([]);
 
 	const [panelMap, setPanelMap] = useState<
@@ -109,6 +128,11 @@ export function DashboardProvider({
 
 	const { isLoggedIn } = useAppContext();
 
+	const dashboardId =
+		(isDashboardPage
+			? isDashboardPage.params.dashboardId
+			: isDashboardWidgetPage?.params.dashboardId) || '';
+
 	const [selectedDashboard, setSelectedDashboard] = useState<Dashboard>();
 	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
 	const savedDashboardId = useDashboardVariablesSelector((s) => s.dashboardId);
@@ -133,10 +157,9 @@ export function DashboardProvider({
 	const {
 		currentDashboard,
 		updateLocalStorageDashboardVariables,
-		getUrlVariables,
-		updateUrlVariable,
-		transformDashboardVariables,
-	} = useTransformDashboardVariables(dashboardId);
+	} = useDashboardVariablesFromLocalStorage(dashboardId);
+
+	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
 
 	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
 	const modalRef = useRef<any>(null);
@@ -148,14 +171,108 @@ export function DashboardProvider({
 
 	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(false);
 
+	const mergeDBWithLocalStorage = (
+		data: Dashboard,
+		localStorageVariables: any,
+	): Dashboard => {
+		const updatedData = data;
+		if (data && localStorageVariables) {
+			const updatedVariables = data.data.variables;
+			const variablesFromUrl = getUrlVariables();
+			Object.keys(data.data.variables).forEach((variable) => {
+				const variableData = data.data.variables[variable];
+
+				// values from url
+				const urlVariable = variableData?.name
+					? variablesFromUrl[variableData?.name] || variablesFromUrl[variableData.id]
+					: variablesFromUrl[variableData.id];
+
+				let updatedVariable = {
+					...data.data.variables[variable],
+					...localStorageVariables[variableData.name as any],
+				};
+
+				// respect the url variable if it is set, override the others
+				if (!isEmpty(urlVariable)) {
+					if (urlVariable === ALL_SELECTED_VALUE) {
+						updatedVariable = {
+							...updatedVariable,
+							allSelected: true,
+						};
+					} else {
+						// Normalize URL value to match variable's multiSelect configuration
+						const normalizedValue = normalizeUrlValueForVariable(
+							urlVariable,
+							variableData,
+						);
+
+						updatedVariable = {
+							...updatedVariable,
+							selectedValue: normalizedValue,
+							// Only set allSelected to false if showALLOption is available
+							...(updatedVariable?.showALLOption && { allSelected: false }),
+						};
+					}
+				}
+
+				updatedVariables[variable] = updatedVariable;
+			});
+			updatedData.data.variables = updatedVariables;
+		}
+		return updatedData;
+	};
+	// As we do not have order and ID's in the variables object, we have to process variables to add order and ID if they do not exist in the variables object
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const transformDashboardVariables = (data: Dashboard): Dashboard => {
+		if (data && data.data && data.data.variables) {
+			const clonedDashboardData = mergeDBWithLocalStorage(
+				JSON.parse(JSON.stringify(data)),
+				currentDashboard,
+			);
+			const { variables } = clonedDashboardData.data;
+			const existingOrders: Set<number> = new Set();
+
+			for (const key in variables) {
+				// eslint-disable-next-line no-prototype-builtins
+				if (variables.hasOwnProperty(key)) {
+					const variable: IDashboardVariable = variables[key];
+
+					// Check if 'order' property doesn't exist or is undefined
+					if (variable.order === undefined) {
+						// Find a unique order starting from 0
+						let order = 0;
+						while (existingOrders.has(order)) {
+							order += 1;
+						}
+
+						variable.order = order;
+						existingOrders.add(order);
+						// ! BWC - Specific case for backward compatibility where textboxValue was used instead of defaultValue
+						if (variable.type === 'TEXTBOX' && !variable.defaultValue) {
+							variable.defaultValue = variable.textboxValue || '';
+						}
+					}
+
+					if (variable.id === undefined) {
+						variable.id = generateUUID();
+					}
+				}
+			}
+
+			return clonedDashboardData;
+		}
+
+		return data;
+	};
 	const dashboardResponse = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			isDashboardPage?.params,
 			dashboardId,
 			globalTime.isAutoRefreshDisabled,
 		],
 		{
-			enabled: !!dashboardId && isLoggedIn,
+			enabled: (!!isDashboardPage || !!isDashboardWidgetPage) && isLoggedIn,
 			queryFn: async () => {
 				setIsDashboardFetching(true);
 				try {
@@ -178,14 +295,13 @@ export function DashboardProvider({
 			},
 
 			onSuccess: (data: SuccessResponseV2<Dashboard>) => {
-				const updatedDashboardData = transformDashboardVariables(data?.data);
-
-				// initialize URL variables after dashboard state is set to avoid race conditions
-				const variables = updatedDashboardData?.data?.variables;
+				// if the url variable is not set for any variable, set it to the default value
+				const variables = data?.data?.data?.variables;
 				if (variables) {
 					initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
 				}
 
+				const updatedDashboardData = transformDashboardVariables(data?.data);
 				const updatedDate = dayjs(updatedDashboardData?.updatedAt);
 
 				setIsDashboardLocked(updatedDashboardData?.locked || false);
@@ -276,7 +392,11 @@ export function DashboardProvider({
 
 	useEffect(() => {
 		// make the call on tab visibility only if the user is on dashboard / widget page
-		if (isVisible && updatedTimeRef.current && !!dashboardId) {
+		if (
+			isVisible &&
+			updatedTimeRef.current &&
+			(!!isDashboardPage || !!isDashboardWidgetPage)
+		) {
 			dashboardResponse.refetch();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/providers/Dashboard/__tests__/Dashboard.test.tsx

@@ -2,10 +2,11 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import getDashboard from 'api/v1/dashboards/id/get';
 import { DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED } from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ROUTES from 'constants/routes';
 import { DashboardProvider, useDashboard } from 'providers/Dashboard/Dashboard';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
@@ -18,28 +19,30 @@ jest.mock('api/v1/dashboards/id/get');
 jest.mock('api/v1/dashboards/id/lock');
 const mockGetDashboard = jest.mocked(getDashboard);
 
+// Mock useRouteMatch to simulate different route scenarios
+const mockUseRouteMatch = jest.fn();
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useRouteMatch: (): any => mockUseRouteMatch(),
+}));
+
 // Mock other dependencies
 jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
 	}),
 }));
 
 // Mock only the essential dependencies for Dashboard provider
 jest.mock('providers/App/App', () => ({
-	useAppContext: (): {
-		isLoggedIn: boolean;
-		user: { email: string; role: string };
-	} => ({
+	useAppContext: (): any => ({
 		isLoggedIn: true,
 		user: { email: 'test@example.com', role: 'ADMIN' },
 	}),
 }));
 
 jest.mock('providers/ErrorModalProvider', () => ({
-	useErrorModal: (): { showErrorModal: jest.Mock } => ({
-		showErrorModal: jest.fn(),
-	}),
+	useErrorModal: (): any => ({ showErrorModal: jest.fn() }),
 }));
 
 jest.mock('react-redux', () => ({
@@ -57,10 +60,11 @@ jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));
 function TestComponent(): JSX.Element {
 	const { dashboardResponse, selectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
+	const dashboardId = selectedDashboard?.id;
 
 	return (
 		<div>
-			<div data-testid="dashboard-id">{selectedDashboard?.id}</div>
+			<div data-testid="dashboard-id">{dashboardId}</div>
 			<div data-testid="query-status">{dashboardResponse.status}</div>
 			<div data-testid="is-loading">{dashboardResponse.isLoading.toString()}</div>
 			<div data-testid="is-fetching">
@@ -90,15 +94,27 @@ function createTestQueryClient(): QueryClient {
 
 // Helper to render with dashboard provider
 function renderWithDashboardProvider(
-	dashboardId = 'test-dashboard-id',
-): RenderResult {
+	initialRoute = '/dashboard/test-dashboard-id',
+	routeMatchParams?: { dashboardId: string } | null,
+): any {
 	const queryClient = createTestQueryClient();
-	const initialRoute = dashboardId ? `/dashboard/${dashboardId}` : '/dashboard';
+
+	// Mock the route match
+	mockUseRouteMatch.mockReturnValue(
+		routeMatchParams
+			? {
+					path: ROUTES.DASHBOARD,
+					url: `/dashboard/${routeMatchParams.dashboardId}`,
+					isExact: true,
+					params: routeMatchParams,
+			  }
+			: null,
+	);
 
 	return render(
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
-				<DashboardProvider dashboardId={dashboardId}>
+				<DashboardProvider>
 					<TestComponent />
 				</DashboardProvider>
 			</MemoryRouter>
@@ -172,7 +188,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 	describe('Query Key Behavior', () => {
 		it('should include route params in query key when on dashboard page', async () => {
 			const dashboardId = 'test-dashboard-id';
-			renderWithDashboardProvider(dashboardId);
+			renderWithDashboardProvider(`/dashboard/${dashboardId}`, { dashboardId });
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId });
@@ -187,17 +203,30 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const newDashboardId = 'new-dashboard-id';
 
 			// First render with initial dashboard ID
-			const { rerender } = renderWithDashboardProvider(initialDashboardId);
+			const { rerender } = renderWithDashboardProvider(
+				`/dashboard/${initialDashboardId}`,
+				{
+					dashboardId: initialDashboardId,
+				},
+			);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: initialDashboardId });
 			});
 
-			// Rerender with new dashboard ID prop
+			// Change route params to simulate navigation
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${newDashboardId}`,
+				isExact: true,
+				params: { dashboardId: newDashboardId },
+			});
+
+			// Rerender with new route
 			rerender(
 				<QueryClientProvider client={createTestQueryClient()}>
 					<MemoryRouter initialEntries={[`/dashboard/${newDashboardId}`]}>
-						<DashboardProvider dashboardId={newDashboardId}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -212,24 +241,50 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			expect(mockGetDashboard).toHaveBeenCalledTimes(2);
 		});
 
-		it('should not fetch when no dashboardId is provided', () => {
-			renderWithDashboardProvider('');
+		it('should not fetch when not on dashboard page', () => {
+			// Mock no route match (not on dashboard page)
+			mockUseRouteMatch.mockReturnValue(null);
+
+			renderWithDashboardProvider('/some-other-page', null);
 
 			// Should not call the API
 			expect(mockGetDashboard).not.toHaveBeenCalled();
 		});
+
+		it('should handle undefined route params gracefully', async () => {
+			// Mock route match with undefined params
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: '/dashboard/undefined',
+				isExact: true,
+				params: undefined,
+			});
+
+			renderWithDashboardProvider('/dashboard/undefined');
+
+			// Should not call API when params are undefined
+			expect(mockGetDashboard).not.toHaveBeenCalled();
+		});
 	});
 
 	describe('Cache Behavior', () => {
-		it('should create separate cache entries for different dashboardIds', async () => {
+		it('should create separate cache entries for different route params', async () => {
 			const queryClient = createTestQueryClient();
 			const dashboardId1 = 'dashboard-1';
 			const dashboardId2 = 'dashboard-2';
 
+			// First dashboard
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId1}`,
+				isExact: true,
+				params: { dashboardId: dashboardId1 },
+			});
+
 			const { rerender } = render(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId1}`]}>
-						<DashboardProvider dashboardId={dashboardId1}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -240,10 +295,18 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId1 });
 			});
 
+			// Second dashboard
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId2}`,
+				isExact: true,
+				params: { dashboardId: dashboardId2 },
+			});
+
 			rerender(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId2}`]}>
-						<DashboardProvider dashboardId={dashboardId2}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -262,11 +325,13 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			expect(cacheKeys).toHaveLength(2);
 			expect(cacheKeys[0]).toEqual([
 				REACT_QUERY_KEY.DASHBOARD_BY_ID,
+				{ dashboardId: dashboardId1 },
 				dashboardId1,
 				true, // globalTime.isAutoRefreshDisabled
 			]);
 			expect(cacheKeys[1]).toEqual([
 				REACT_QUERY_KEY.DASHBOARD_BY_ID,
+				{ dashboardId: dashboardId2 },
 				dashboardId2,
 				true, // globalTime.isAutoRefreshDisabled
 			]);
@@ -283,10 +348,17 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const queryClient = createTestQueryClient();
 			const dashboardId = 'auto-refresh-dashboard';
 
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId}`,
+				isExact: true,
+				params: { dashboardId },
+			});
+
 			render(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId}`]}>
-						<DashboardProvider dashboardId={dashboardId}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -303,7 +375,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 				.find(
 					(query) =>
 						query.queryKey[0] === REACT_QUERY_KEY.DASHBOARD_BY_ID &&
-						query.queryKey[2] === false,
+						query.queryKey[3] === false,
 				);
 			expect(dashboardQuery).toBeDefined();
 			expect((dashboardQuery as { cacheTime: number }).cacheTime).toBe(
@@ -365,7 +437,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			// Empty URL variables - tests initialization flow
 			mockGetUrlVariables.mockReturnValue({});
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -381,7 +455,6 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 							multiSelect: false,
 							allSelected: false,
 							showALLOption: true,
-							order: 0,
 						},
 						services: {
 							id: 'svc-id',
@@ -389,7 +462,6 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 							multiSelect: true,
 							allSelected: false,
 							showALLOption: true,
-							order: 1,
 						},
 					},
 					mockGetUrlVariables,
@@ -421,7 +493,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['db', 'cache']);
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -481,7 +555,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 
 			mockGetUrlVariables.mockReturnValue(urlVariables);
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -517,7 +593,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['api']);
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				// Verify normalization was called with the specific values and variable configs
@@ -584,7 +662,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -626,7 +706,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -669,7 +751,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -711,7 +795,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });

pkg/modules/cloudintegration/cloudintegration.go

@@ -0,0 +1,62 @@
+package cloudintegration
+
+import (
+	"context"
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Module interface {
+	GetName() cloudintegrationtypes.CloudProviderType
+
+	// AgentCheckIn is called by agent to heartbeat and get latest config in response.
+	AgentCheckIn(ctx context.Context, req *cloudintegrationtypes.PostableAgentCheckInPayload) (any, error)
+
+	GenerateConnectionParams(ctx context.Context) (*cloudintegrationtypes.GettableCloudIntegrationConnectionParams, error)
+	// GenerateConnectionArtifact generates cloud provider specific connection information, client side handles how this information is shown
+	GenerateConnectionArtifact(ctx context.Context, req *cloudintegrationtypes.PostableConnectionArtifact) (any, error)
+	// GetAccountStatus returns agent connection status for a cloud integration account
+	GetAccountStatus(ctx context.Context, orgID, accountID string) (*cloudintegrationtypes.GettableAccountStatus, error)
+	// ListConnectedAccounts lists accounts where agent is connected
+	ListConnectedAccounts(ctx context.Context, orgID string) (*cloudintegrationtypes.GettableConnectedAccountsList, error)
+
+	// LIstServices return list of services for a cloud provider attached with the accountID. This just returns a summary
+	ListServices(ctx context.Context, orgID string, accountID *string) (any, error) // returns either GettableAWSServices or GettableAzureServices
+	// GetServiceDetails returns service definition details for a serviceId. This returns config and other details required to show in service details page on client.
+	GetServiceDetails(ctx context.Context, req *cloudintegrationtypes.GetServiceDetailsReq) (any, error)
+
+	// GetDashboard returns dashboard json for a give cloud integration service dashboard.
+	// this only returns the dashboard when account is connected and service is enabled
+	GetDashboard(ctx context.Context, id string, orgID valuer.UUID) (*dashboardtypes.Dashboard, error)
+	// GetAvailableDashboards returns list of available dashboards across all connected cloud integration accounts in the org.
+	// this list gets added to dashboard list page
+	GetAvailableDashboards(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error)
+
+	// UpdateAccountConfig updates cloud integration account config
+	UpdateAccountConfig(ctx context.Context, orgId valuer.UUID, accountId string, config []byte) (any, error)
+	// UpdateServiceConfig updates cloud integration service config
+	UpdateServiceConfig(ctx context.Context, serviceId string, orgID valuer.UUID, config []byte) (any, error)
+
+	// DisconnectAccount soft deletes/removes a cloud integration account.
+	DisconnectAccount(ctx context.Context, orgID, accountID string) (*cloudintegrationtypes.CloudIntegration, error)
+}
+
+type Handler interface {
+	AgentCheckIn(http.ResponseWriter, *http.Request)
+
+	GenerateConnectionParams(http.ResponseWriter, *http.Request)
+	GenerateConnectionArtifact(http.ResponseWriter, *http.Request)
+
+	ListConnectedAccounts(http.ResponseWriter, *http.Request)
+	GetAccountStatus(http.ResponseWriter, *http.Request)
+	ListServices(http.ResponseWriter, *http.Request)
+	GetServiceDetails(http.ResponseWriter, *http.Request)
+
+	UpdateAccountConfig(http.ResponseWriter, *http.Request)
+	UpdateServiceConfig(http.ResponseWriter, *http.Request)
+
+	DisconnectAccount(http.ResponseWriter, *http.Request)
+}

pkg/types/cloudintegrationtypes/cloudintegration.go

@@ -0,0 +1,643 @@
+// NOTE:
+//   - When Account keyword is used in struct names, it refers cloud integration account. CloudIntegration refers to DB schema.
+//   - When Account Config keyword is used in struct names, it refers to configuration for cloud integration accounts
+//   - When Service keyword is used in struct names, it refers to cloud integration service. CloudIntegrationService refers to DB schema.
+//     where `service` is services provided by each cloud provider like AWS S3, Azure BlobStorage etc.
+//   - When Service Config keyword is used in struct names, it refers to configuration for cloud integration services
+package cloudintegrationtypes
+
+import (
+	"database/sql/driver"
+	"encoding/json"
+	"strings"
+	"time"
+
+	"github.com/uptrace/bun"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// CloudProviderType type alias
+type CloudProviderType struct{ valuer.String }
+
+var (
+	CloudProviderTypeAWS   = valuer.NewString("aws")
+	CloudProviderTypeAzure = valuer.NewString("azure")
+)
+
+var ErrCodeCloudProviderInvalidInput = errors.MustNewCode("invalid_cloud_provider")
+
+// NewCloudProvider returns a new CloudProviderType from a string. It validates the input and returns an error if the input is not valid.
+func NewCloudProvider(provider string) (CloudProviderType, error) {
+	switch provider {
+	case CloudProviderTypeAWS.String():
+		return CloudProviderType{CloudProviderTypeAWS}, nil
+	case CloudProviderTypeAzure.String():
+		return CloudProviderType{CloudProviderTypeAzure}, nil
+	default:
+		return CloudProviderType{}, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider)
+	}
+}
+
+var (
+	AWSIntegrationUserEmail   = valuer.MustNewEmail("aws-integration@signoz.io")
+	AzureIntegrationUserEmail = valuer.MustNewEmail("azure-integration@signoz.io")
+)
+
+// CloudIntegrationUserEmails is the list of valid emails for Cloud One Click integrations.
+// This is used for validation and restrictions in different contexts, across codebase.
+var CloudIntegrationUserEmails = []valuer.Email{
+	AWSIntegrationUserEmail,
+	AzureIntegrationUserEmail,
+}
+
+func IsCloudIntegrationDashboardUuid(dashboardUuid string) bool {
+	parts := strings.SplitN(dashboardUuid, "--", 4)
+	if len(parts) != 4 {
+		return false
+	}
+
+	return parts[0] == "cloud-integration"
+}
+
+// GetCloudIntegrationDashboardID returns the cloud provider from dashboard id, if it's a cloud integration dashboard id.
+// throws an error if invalid format or invalid cloud provider is provided in the dashboard id.
+func GetCloudProviderFromDashboardID(dashboardUuid string) (CloudProviderType, error) {
+	parts := strings.SplitN(dashboardUuid, "--", 4)
+	if len(parts) != 4 {
+		return CloudProviderType{}, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid dashboard uuid: %s", dashboardUuid)
+	}
+
+	providerStr := parts[1]
+
+	cloudProvider, err := NewCloudProvider(providerStr)
+	if err != nil {
+		return CloudProviderType{}, err
+	}
+
+	return cloudProvider, nil
+}
+
+// Generic utility functions for JSON serialization/deserialization
+// this is helpful to return right errors from a common place and avoid repeating the same code in multiple places.
+// UnmarshalJSON is a generic function to unmarshal JSON data into any type
+func UnmarshalJSON[T any](src []byte, target *T) error {
+	err := json.Unmarshal(src, target)
+	if err != nil {
+		return errors.WrapInternalf(
+			err, errors.CodeInternal, "couldn't deserialize JSON",
+		)
+	}
+	return nil
+}
+
+// MarshalJSON is a generic function to marshal any type to JSON
+func MarshalJSON[T any](source *T) ([]byte, error) {
+	if source == nil {
+		return nil, errors.NewInternalf(errors.CodeInternal, "source is nil")
+	}
+
+	serialized, err := json.Marshal(source)
+	if err != nil {
+		return nil, errors.WrapInternalf(
+			err, errors.CodeInternal, "couldn't serialize to JSON",
+		)
+	}
+	return serialized, nil
+}
+
+// GettableConnectedAccountsList is the response for listing connected accounts for a cloud provider.
+type GettableConnectedAccountsList struct {
+	Accounts []*Account `json:"accounts"`
+}
+
+// SigNozAgentConfig represents parameters required for agent deployment in cloud provider accounts
+// these represent parameters passed during agent deployment, how they are passed might change for each cloud provider but the purpose is same.
+type SigNozAgentConfig struct {
+	Region string `json:"region,omitempty"` // AWS-specific: The region in which SigNoz agent should be installed
+
+	IngestionUrl string `json:"ingestion_url"`
+	IngestionKey string `json:"ingestion_key"`
+	SigNozAPIUrl string `json:"signoz_api_url"`
+	SigNozAPIKey string `json:"signoz_api_key"`
+
+	Version string `json:"version,omitempty"`
+}
+
+// PostableConnectionArtifact represent request body for generating connection artifact API.
+// Data is request body raw bytes since each cloud provider will have have different request body structure and generics hardly help in such cases.
+// Artifact is a generic name for different types of connection methods like connection URL for AWS, connection command for Azure etc.
+type PostableConnectionArtifact struct {
+	OrgID string
+	Data  []byte // either PostableAWSConnectionUrl or PostableAzureConnectionCommand
+}
+
+// PostableAWSConnectionUrl is request body for AWS connection artifact API
+type PostableAWSConnectionUrl struct {
+	AgentConfig   *SigNozAgentConfig `json:"agent_config"`
+	AccountConfig *AWSAccountConfig  `json:"account_config"`
+}
+
+// PostableAzureConnectionCommand is request body for Azure connection artifact API
+type PostableAzureConnectionCommand struct {
+	AgentConfig   *SigNozAgentConfig  `json:"agent_config"`
+	AccountConfig *AzureAccountConfig `json:"account_config"`
+}
+
+// GettableAzureConnectionArtifact is Azure specific connection artifact which contains connection commands for agent deployment
+type GettableAzureConnectionArtifact struct {
+	AzureShellConnectionCommand string `json:"az_shell_connection_command"`
+	AzureCliConnectionCommand   string `json:"az_cli_connection_command"`
+}
+
+// GettableAWSConnectionUrl is AWS specific connection artifact which contains connection url for agent deployment
+type GettableAWSConnectionUrl struct {
+	AccountId     string `json:"account_id"`
+	ConnectionUrl string `json:"connection_url"`
+}
+
+// GettableAzureConnectionCommand is Azure specific connection artifact which contains connection commands for agent deployment
+type GettableAzureConnectionCommand struct {
+	AccountId                   string `json:"account_id"`
+	AzureShellConnectionCommand string `json:"az_shell_connection_command"`
+	AzureCliConnectionCommand   string `json:"az_cli_connection_command"`
+}
+
+// GettableAccountStatus is cloud integration account status response
+type GettableAccountStatus struct {
+	Id             string        `json:"id"`
+	CloudAccountId *string       `json:"cloud_account_id,omitempty"`
+	Status         AccountStatus `json:"status"`
+}
+
+// PostableAgentCheckInPayload is request body for agent check-in API.
+// This is used by agent to send heartbeat.
+type PostableAgentCheckInPayload struct {
+	ID        string `json:"account_id"`
+	AccountID string `json:"cloud_account_id"`
+	// Arbitrary cloud specific Agent data
+	Data  map[string]any `json:"data,omitempty"`
+	OrgID string         `json:"-"`
+}
+
+// AWSAgentIntegrationConfig is used by agent for deploying infra to send telemetry to SigNoz
+type AWSAgentIntegrationConfig struct {
+	EnabledRegions              []string               `json:"enabled_regions"`
+	TelemetryCollectionStrategy *AWSCollectionStrategy `json:"telemetry,omitempty"`
+}
+
+// AzureAgentIntegrationConfig is used by agent for deploying infra to send telemetry to SigNoz
+type AzureAgentIntegrationConfig struct {
+	DeploymentRegion      string   `json:"deployment_region"` // will not be changed once set
+	EnabledResourceGroups []string `json:"resource_groups"`
+	// TelemetryCollectionStrategy is map of service to telemetry config
+	TelemetryCollectionStrategy map[string]*AzureCollectionStrategy `json:"telemetry,omitempty"`
+}
+
+// GettableAgentCheckInRes is generic response from agent check-in API.
+// AWSAgentIntegrationConfig and AzureAgentIntegrationConfig these configs are used by agent to deploy the infra and send telemetry to SigNoz
+type GettableAgentCheckInRes[AgentConfigT any] struct {
+	AccountId         string       `json:"account_id"`
+	CloudAccountId    string       `json:"cloud_account_id"`
+	RemovedAt         *time.Time   `json:"removed_at"`
+	IntegrationConfig AgentConfigT `json:"integration_config"`
+}
+
+// UpdatableServiceConfig is generic
+type UpdatableServiceConfig[ServiceConfigT any] struct {
+	CloudAccountId string         `json:"cloud_account_id"`
+	Config         ServiceConfigT `json:"config"`
+}
+
+// ServiceConfigTyped is a generic interface for cloud integration service's configuration
+// this is generic interface to define helper functions for CloudIntegrationService.Config field.
+type ServiceConfigTyped[definition Definition] interface {
+	Validate(def definition) error
+	IsMetricsEnabled() bool
+	IsLogsEnabled() bool
+}
+
+type AWSServiceConfig struct {
+	Logs    *AWSServiceLogsConfig    `json:"logs,omitempty"`
+	Metrics *AWSServiceMetricsConfig `json:"metrics,omitempty"`
+}
+
+type AWSServiceLogsConfig struct {
+	Enabled   bool                `json:"enabled"`
+	S3Buckets map[string][]string `json:"s3_buckets,omitempty"`
+}
+
+type AWSServiceMetricsConfig struct {
+	Enabled bool `json:"enabled"`
+}
+
+// IsMetricsEnabled returns true if metrics collection is configured and enabled
+func (a *AWSServiceConfig) IsMetricsEnabled() bool {
+	return a.Metrics != nil && a.Metrics.Enabled
+}
+
+// IsLogsEnabled returns true if logs collection is configured and enabled
+func (a *AWSServiceConfig) IsLogsEnabled() bool {
+	return a.Logs != nil && a.Logs.Enabled
+}
+
+type AzureServiceConfig struct {
+	Logs    []*AzureServiceLogsConfig    `json:"logs,omitempty"`
+	Metrics []*AzureServiceMetricsConfig `json:"metrics,omitempty"`
+}
+
+// AzureServiceLogsConfig is Azure specific service config for logs
+type AzureServiceLogsConfig struct {
+	Enabled bool   `json:"enabled"`
+	Name    string `json:"name"`
+}
+
+// AzureServiceMetricsConfig is Azure specific service config for metrics
+type AzureServiceMetricsConfig struct {
+	Enabled bool   `json:"enabled"`
+	Name    string `json:"name"`
+}
+
+// IsMetricsEnabled returns true if any metric is configured and enabled
+func (a *AzureServiceConfig) IsMetricsEnabled() bool {
+	if a.Metrics == nil {
+		return false
+	}
+	for _, m := range a.Metrics {
+		if m.Enabled {
+			return true
+		}
+	}
+	return false
+}
+
+// IsLogsEnabled returns true if any log is configured and enabled
+func (a *AzureServiceConfig) IsLogsEnabled() bool {
+	if a.Logs == nil {
+		return false
+	}
+	for _, l := range a.Logs {
+		if l.Enabled {
+			return true
+		}
+	}
+	return false
+}
+
+func (a *AWSServiceConfig) Validate(def *AWSDefinition) error {
+	if def.Id != S3Sync.String() && a.Logs != nil && a.Logs.S3Buckets != nil {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "s3 buckets can only be added to service-type[%s]", S3Sync)
+	} else if def.Id == S3Sync.String() && a.Logs != nil && a.Logs.S3Buckets != nil {
+		for region := range a.Logs.S3Buckets {
+			if _, found := ValidAWSRegions[region]; !found {
+				return errors.NewInvalidInputf(CodeInvalidCloudRegion, "invalid cloud region: %s", region)
+			}
+		}
+	}
+
+	return nil
+}
+
+func (a *AzureServiceConfig) Validate(def *AzureDefinition) error {
+	logsMap := make(map[string]bool)
+	metricsMap := make(map[string]bool)
+
+	if def.Strategy != nil && def.Strategy.Logs != nil {
+		for _, log := range def.Strategy.Logs {
+			logsMap[log.Name] = true
+		}
+	}
+
+	if def.Strategy != nil && def.Strategy.Metrics != nil {
+		for _, metric := range def.Strategy.Metrics {
+			metricsMap[metric.Name] = true
+		}
+	}
+
+	for _, log := range a.Logs {
+		if _, found := logsMap[log.Name]; !found {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid log name: %s", log.Name)
+		}
+	}
+
+	for _, metric := range a.Metrics {
+		if _, found := metricsMap[metric.Name]; !found {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid metric name: %s", metric.Name)
+		}
+	}
+
+	return nil
+}
+
+// UpdatableServiceConfigRes is response for UpdateServiceConfig API
+// TODO: find a better way to name this
+type UpdatableServiceConfigRes struct {
+	ServiceId string `json:"id"`
+	Config    any    `json:"config"`
+}
+
+// UpdatableAccountConfigTyped is a generic struct for updating cloud integration account config used in UpdateAccountConfig API
+type UpdatableAccountConfigTyped[AccountConfigT any] struct {
+	Config *AccountConfigT `json:"config"`
+}
+
+type (
+	UpdatableAWSAccountConfig   = UpdatableAccountConfigTyped[AWSAccountConfig]
+	UpdatableAzureAccountConfig = UpdatableAccountConfigTyped[AzureAccountConfig]
+)
+
+// AWSAccountConfig is the configuration for AWS cloud integration account
+type AWSAccountConfig struct {
+	EnabledRegions []string `json:"regions"`
+}
+
+// AzureAccountConfig is the configuration for Azure cloud integration account
+type AzureAccountConfig struct {
+	DeploymentRegion      string   `json:"deployment_region,omitempty"`
+	EnabledResourceGroups []string `json:"resource_groups,omitempty"`
+}
+
+// GettableServices is a generic struct for listing services of a cloud integration account used in ListServices API
+type GettableServices[ServiceSummaryT any] struct {
+	Services []ServiceSummaryT `json:"services"`
+}
+
+type (
+	GettableAWSServices   = GettableServices[AWSServiceSummary]
+	GettableAzureServices = GettableServices[AzureServiceSummary]
+)
+
+// GetServiceDetailsReq is a req struct for getting service definition details
+type GetServiceDetailsReq struct {
+	OrgID          valuer.UUID
+	ServiceId      string
+	CloudAccountID *string
+}
+
+// ServiceSummary is a generic struct for service summary used in ListServices API
+type ServiceSummary[ServiceConfigT any] struct {
+	DefinitionMetadata
+	Config *ServiceConfigT `json:"config"`
+}
+
+type (
+	AWSServiceSummary   = ServiceSummary[AWSServiceConfig]
+	AzureServiceSummary = ServiceSummary[AzureServiceConfig]
+)
+
+// GettableServiceDetails is a generic struct for service details used in GetServiceDetails API
+type GettableServiceDetails[DefinitionT any, ServiceConfigT any] struct {
+	Definition       DefinitionT              `json:",inline"`
+	Config           ServiceConfigT           `json:"config"`
+	ConnectionStatus *ServiceConnectionStatus `json:"status,omitempty"`
+}
+
+type (
+	GettableAWSServiceDetails   = GettableServiceDetails[AWSDefinition, *AWSServiceConfig]
+	GettableAzureServiceDetails = GettableServiceDetails[AzureDefinition, *AzureServiceConfig]
+)
+
+// ServiceConnectionStatus represents integration connection status for a particular service
+// this struct helps to check ingested data and determines connection status by whether data was ingested or not.
+// this is composite struct for both metrics and logs
+type ServiceConnectionStatus struct {
+	Logs    []*SignalConnectionStatus `json:"logs"`
+	Metrics []*SignalConnectionStatus `json:"metrics"`
+}
+
+// SignalConnectionStatus represents connection status for a particular signal type (logs or metrics) for a service
+// this struct is used in API responses for clients to show relevant information about the connection status.
+type SignalConnectionStatus struct {
+	CategoryID           string `json:"category"`
+	CategoryDisplayName  string `json:"category_display_name"`
+	LastReceivedTsMillis int64  `json:"last_received_ts_ms"` // epoch milliseconds
+	LastReceivedFrom     string `json:"last_received_from"`  // resource identifier
+}
+
+// GettableCloudIntegrationConnectionParams is response for connection params API
+type GettableCloudIntegrationConnectionParams struct {
+	IngestionUrl string `json:"ingestion_url,omitempty"`
+	IngestionKey string `json:"ingestion_key,omitempty"`
+	SigNozAPIUrl string `json:"signoz_api_url,omitempty"`
+	SigNozAPIKey string `json:"signoz_api_key,omitempty"`
+}
+
+// GettableIngestionKey is a struct for ingestion key returned from gateway
+type GettableIngestionKey struct {
+	Name  string `json:"name"`
+	Value string `json:"value"`
+	// other attributes from gateway response not included here since they are not being used.
+}
+
+// GettableIngestionKeysSearch is a struct for response of ingestion keys search API on gateway
+type GettableIngestionKeysSearch struct {
+	Status string                 `json:"status"`
+	Data   []GettableIngestionKey `json:"data"`
+	Error  string                 `json:"error"`
+}
+
+// GettableCreateIngestionKey is a struct for response of create ingestion key API on gateway
+type GettableCreateIngestionKey struct {
+	Status string               `json:"status"`
+	Data   GettableIngestionKey `json:"data"`
+	Error  string               `json:"error"`
+}
+
+// GettableDeployment is response struct for deployment details fetched from Zeus
+type GettableDeployment struct {
+	Name        string `json:"name"`
+	ClusterInfo struct {
+		Region struct {
+			DNS string `json:"dns"`
+		} `json:"region"`
+	} `json:"cluster"`
+}
+
+// --------------------------------------------------------------------------
+// Cloud integration uses the cloud_integration table
+// and cloud_integrations_service table
+// --------------------------------------------------------------------------
+
+type CloudIntegration struct {
+	bun.BaseModel `bun:"table:cloud_integration"`
+
+	types.Identifiable
+	types.TimeAuditable
+	Provider        string         `json:"provider" bun:"provider,type:text,unique:provider_id"`
+	Config          *AccountConfig `json:"config" bun:"config,type:text"`
+	AccountID       *string        `json:"account_id" bun:"account_id,type:text"`
+	LastAgentReport *AgentReport   `json:"last_agent_report" bun:"last_agent_report,type:text"`
+	RemovedAt       *time.Time     `json:"removed_at" bun:"removed_at,type:timestamp,nullzero"`
+	OrgID           string         `bun:"org_id,type:text,unique:provider_id"`
+}
+
+func (a *CloudIntegration) Status() AccountStatus {
+	status := AccountStatus{}
+	if a.LastAgentReport != nil {
+		lastHeartbeat := a.LastAgentReport.TimestampMillis
+		status.Integration.LastHeartbeatTsMillis = &lastHeartbeat
+	}
+	return status
+}
+
+func (a *CloudIntegration) Account() Account {
+	ca := Account{Id: a.ID.StringValue(), Status: a.Status()}
+
+	if a.AccountID != nil {
+		ca.CloudAccountId = *a.AccountID
+	}
+
+	if a.Config != nil {
+		ca.Config = *a.Config
+	} else {
+		ca.Config = DefaultAccountConfig()
+	}
+	return ca
+}
+
+type Account struct {
+	Id             string        `json:"id"`
+	CloudAccountId string        `json:"cloud_account_id"`
+	Config         AccountConfig `json:"config"`
+	Status         AccountStatus `json:"status"`
+}
+
+type AccountStatus struct {
+	Integration AccountIntegrationStatus `json:"integration"`
+}
+
+type AccountIntegrationStatus struct {
+	LastHeartbeatTsMillis *int64 `json:"last_heartbeat_ts_ms"`
+}
+
+func DefaultAccountConfig() AccountConfig {
+	return AccountConfig{
+		EnabledRegions: []string{},
+	}
+}
+
+type AccountConfig struct {
+	EnabledRegions []string `json:"regions"`
+}
+
+// For serializing from db
+func (c *AccountConfig) Scan(src any) error {
+	var data []byte
+	switch v := src.(type) {
+	case []byte:
+		data = v
+	case string:
+		data = []byte(v)
+	default:
+		return errors.NewInternalf(errors.CodeInternal, "tried to scan from %T instead of string or bytes", src)
+	}
+
+	return json.Unmarshal(data, c)
+}
+
+// For serializing to db
+func (c *AccountConfig) Value() (driver.Value, error) {
+	if c == nil {
+		return nil, errors.NewInternalf(errors.CodeInternal, "cloud account config is nil")
+	}
+
+	serialized, err := json.Marshal(c)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't serialize cloud account config to JSON")
+	}
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
+}
+
+type AgentReport struct {
+	TimestampMillis int64          `json:"timestamp_millis"`
+	Data            map[string]any `json:"data"`
+}
+
+// For serializing from db
+func (r *AgentReport) Scan(src any) error {
+	var data []byte
+	switch v := src.(type) {
+	case []byte:
+		data = v
+	case string:
+		data = []byte(v)
+	default:
+		return errors.NewInternalf(errors.CodeInternal, "tried to scan from %T instead of string or bytes", src)
+	}
+
+	return json.Unmarshal(data, r)
+}
+
+// For serializing to db
+func (r *AgentReport) Value() (driver.Value, error) {
+	if r == nil {
+		return nil, errors.NewInternalf(errors.CodeInternal, "agent report is nil")
+	}
+
+	serialized, err := json.Marshal(r)
+	if err != nil {
+		return nil, errors.WrapInternalf(
+			err, errors.CodeInternal, "couldn't serialize agent report to JSON",
+		)
+	}
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
+}
+
+type CloudIntegrationService struct {
+	bun.BaseModel `bun:"table:cloud_integration_service,alias:cis"`
+
+	types.Identifiable
+	types.TimeAuditable
+	Type               string             `bun:"type,type:text,notnull,unique:cloud_integration_id_type"`
+	Config             CloudServiceConfig `bun:"config,type:text"`
+	CloudIntegrationID string             `bun:"cloud_integration_id,type:text,notnull,unique:cloud_integration_id_type,references:cloud_integrations(id),on_delete:cascade"`
+}
+
+type CloudServiceLogsConfig struct {
+	Enabled   bool                `json:"enabled"`
+	S3Buckets map[string][]string `json:"s3_buckets,omitempty"`
+}
+
+type CloudServiceMetricsConfig struct {
+	Enabled bool `json:"enabled"`
+}
+
+type CloudServiceConfig struct {
+	Logs    *CloudServiceLogsConfig    `json:"logs,omitempty"`
+	Metrics *CloudServiceMetricsConfig `json:"metrics,omitempty"`
+}
+
+// For serializing from db
+func (c *CloudServiceConfig) Scan(src any) error {
+	var data []byte
+	switch src := src.(type) {
+	case []byte:
+		data = src
+	case string:
+		data = []byte(src)
+	default:
+		return errors.NewInternalf(errors.CodeInternal, "tried to scan from %T instead of string or bytes", src)
+	}
+
+	return json.Unmarshal(data, c)
+}
+
+// For serializing to db
+func (c *CloudServiceConfig) Value() (driver.Value, error) {
+	if c == nil {
+		return nil, errors.NewInternalf(errors.CodeInternal, "cloud service config is nil")
+	}
+
+	serialized, err := json.Marshal(c)
+	if err != nil {
+		return nil, errors.WrapInternalf(
+			err, errors.CodeInternal, "couldn't serialize cloud service config to JSON",
+		)
+	}
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
+}

pkg/types/cloudintegrationtypes/regions.go

@@ -0,0 +1,103 @@
+package cloudintegrationtypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+var (
+	CodeInvalidCloudRegion    = errors.MustNewCode("invalid_cloud_region")
+	CodeMismatchCloudProvider = errors.MustNewCode("cloud_provider_mismatch")
+)
+
+// List of all valid cloud regions on Amazon Web Services
+var ValidAWSRegions = map[string]bool{
+	"af-south-1":     true, // Africa (Cape Town).
+	"ap-east-1":      true, // Asia Pacific (Hong Kong).
+	"ap-northeast-1": true, // Asia Pacific (Tokyo).
+	"ap-northeast-2": true, // Asia Pacific (Seoul).
+	"ap-northeast-3": true, // Asia Pacific (Osaka).
+	"ap-south-1":     true, // Asia Pacific (Mumbai).
+	"ap-south-2":     true, // Asia Pacific (Hyderabad).
+	"ap-southeast-1": true, // Asia Pacific (Singapore).
+	"ap-southeast-2": true, // Asia Pacific (Sydney).
+	"ap-southeast-3": true, // Asia Pacific (Jakarta).
+	"ap-southeast-4": true, // Asia Pacific (Melbourne).
+	"ca-central-1":   true, // Canada (Central).
+	"ca-west-1":      true, // Canada West (Calgary).
+	"eu-central-1":   true, // Europe (Frankfurt).
+	"eu-central-2":   true, // Europe (Zurich).
+	"eu-north-1":     true, // Europe (Stockholm).
+	"eu-south-1":     true, // Europe (Milan).
+	"eu-south-2":     true, // Europe (Spain).
+	"eu-west-1":      true, // Europe (Ireland).
+	"eu-west-2":      true, // Europe (London).
+	"eu-west-3":      true, // Europe (Paris).
+	"il-central-1":   true, // Israel (Tel Aviv).
+	"me-central-1":   true, // Middle East (UAE).
+	"me-south-1":     true, // Middle East (Bahrain).
+	"sa-east-1":      true, // South America (Sao Paulo).
+	"us-east-1":      true, // US East (N. Virginia).
+	"us-east-2":      true, // US East (Ohio).
+	"us-west-1":      true, // US West (N. California).
+	"us-west-2":      true, // US West (Oregon).
+}
+
+// List of all valid cloud regions for Microsoft Azure
+var ValidAzureRegions = map[string]bool{
+	"australiacentral":   true, // Australia Central
+	"australiacentral2":  true, // Australia Central 2
+	"australiaeast":      true, // Australia East
+	"australiasoutheast": true, // Australia Southeast
+	"austriaeast":        true, // Austria East
+	"belgiumcentral":     true, // Belgium Central
+	"brazilsouth":        true, // Brazil South
+	"brazilsoutheast":    true, // Brazil Southeast
+	"canadacentral":      true, // Canada Central
+	"canadaeast":         true, // Canada East
+	"centralindia":       true, // Central India
+	"centralus":          true, // Central US
+	"chilecentral":       true, // Chile Central
+	"denmarkeast":        true, // Denmark East
+	"eastasia":           true, // East Asia
+	"eastus":             true, // East US
+	"eastus2":            true, // East US 2
+	"francecentral":      true, // France Central
+	"francesouth":        true, // France South
+	"germanynorth":       true, // Germany North
+	"germanywestcentral": true, // Germany West Central
+	"indonesiacentral":   true, // Indonesia Central
+	"israelcentral":      true, // Israel Central
+	"italynorth":         true, // Italy North
+	"japaneast":          true, // Japan East
+	"japanwest":          true, // Japan West
+	"koreacentral":       true, // Korea Central
+	"koreasouth":         true, // Korea South
+	"malaysiawest":       true, // Malaysia West
+	"mexicocentral":      true, // Mexico Central
+	"newzealandnorth":    true, // New Zealand North
+	"northcentralus":     true, // North Central US
+	"northeurope":        true, // North Europe
+	"norwayeast":         true, // Norway East
+	"norwaywest":         true, // Norway West
+	"polandcentral":      true, // Poland Central
+	"qatarcentral":       true, // Qatar Central
+	"southafricanorth":   true, // South Africa North
+	"southafricawest":    true, // South Africa West
+	"southcentralus":     true, // South Central US
+	"southindia":         true, // South India
+	"southeastasia":      true, // Southeast Asia
+	"spaincentral":       true, // Spain Central
+	"swedencentral":      true, // Sweden Central
+	"switzerlandnorth":   true, // Switzerland North
+	"switzerlandwest":    true, // Switzerland West
+	"uaecentral":         true, // UAE Central
+	"uaenorth":           true, // UAE North
+	"uksouth":            true, // UK South
+	"ukwest":             true, // UK West
+	"westcentralus":      true, // West Central US
+	"westeurope":         true, // West Europe
+	"westindia":          true, // West India
+	"westus":             true, // West US
+	"westus2":            true, // West US 2
+	"westus3":            true, // West US 3
+}

pkg/types/cloudintegrationtypes/servicedefinitions.go

@@ -0,0 +1,267 @@
+package cloudintegrationtypes
+
+import (
+	"fmt"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+var S3Sync = valuer.NewString("s3sync")
+
+// Generic interface for cloud service definition.
+// This is implemented by AWSDefinition and AzureDefinition, which represent service definitions for AWS and Azure respectively.
+// Generics work well so far because service definitions share a similar logic.
+// We dont want to over-do generics as well, if the service definitions functionally diverge in the future consider breaking generics.
+type Definition interface {
+	GetId() string
+	Validate() error
+	PopulateDashboardURLs(cloudProvider CloudProviderType, svcId string)
+	GetIngestionStatusCheck() *IngestionStatusCheck
+	GetAssets() Assets
+}
+
+// AWSDefinition represents AWS Service definition, which includes collection strategy, dashboards and meta info for integration
+type AWSDefinition = ServiceDefinition[AWSCollectionStrategy]
+
+// AzureDefinition represents Azure Service definition, which includes collection strategy, dashboards and meta info for integration
+type AzureDefinition = ServiceDefinition[AzureCollectionStrategy]
+
+// Making AWSDefinition and AzureDefinition satisfy Definition interface, so that they can be used in a generic way
+var (
+	_ Definition = &AWSDefinition{}
+	_ Definition = &AzureDefinition{}
+)
+
+// ServiceDefinition represents generic struct for cloud service, regardless of the cloud provider.
+// this struct must satify Definition interface.
+// StrategyT is of either AWSCollectionStrategy or AzureCollectionStrategy, depending on the cloud provider.
+type ServiceDefinition[StrategyT any] struct {
+	DefinitionMetadata
+	Overview             string                `json:"overview"` // markdown
+	Assets               Assets                `json:"assets"`
+	SupportedSignals     SupportedSignals      `json:"supported_signals"`
+	DataCollected        DataCollected         `json:"data_collected"`
+	IngestionStatusCheck *IngestionStatusCheck `json:"ingestion_status_check,omitempty"`
+	Strategy             *StrategyT            `json:"telemetry_collection_strategy"`
+}
+
+// Following methods are quite self explanatory, they are just to satisfy the Definition interface and provide some utility functions for service definitions.
+func (def *ServiceDefinition[StrategyT]) GetId() string {
+	return def.Id
+}
+
+func (def *ServiceDefinition[StrategyT]) Validate() error {
+	seenDashboardIds := map[string]interface{}{}
+
+	if def.Strategy == nil {
+		return errors.NewInternalf(errors.CodeInternal, "telemetry_collection_strategy is required")
+	}
+
+	for _, dd := range def.Assets.Dashboards {
+		if _, seen := seenDashboardIds[dd.Id]; seen {
+			return errors.NewInternalf(errors.CodeInternal, "multiple dashboards found with id %s", dd.Id)
+		}
+		seenDashboardIds[dd.Id] = nil
+	}
+
+	return nil
+}
+
+func (def *ServiceDefinition[StrategyT]) PopulateDashboardURLs(cloudProvider CloudProviderType, svcId string) {
+	for i := range def.Assets.Dashboards {
+		dashboardId := def.Assets.Dashboards[i].Id
+		url := "/dashboard/" + GetCloudIntegrationDashboardID(cloudProvider, svcId, dashboardId)
+		def.Assets.Dashboards[i].Url = url
+	}
+}
+
+func (def *ServiceDefinition[StrategyT]) GetIngestionStatusCheck() *IngestionStatusCheck {
+	return def.IngestionStatusCheck
+}
+
+func (def *ServiceDefinition[StrategyT]) GetAssets() Assets {
+	return def.Assets
+}
+
+// DefinitionMetadata represents service definition metadata. This is useful for showing service overview
+type DefinitionMetadata struct {
+	Id    string `json:"id"`
+	Title string `json:"title"`
+	Icon  string `json:"icon"`
+}
+
+// IngestionStatusCheckCategory represents a category of ingestion status check. Applies for both metrics and logs.
+// A category can be "Overview" of metrics or "Enhanced" Metrics for AWS, and "Transaction" or "Capacity" metrics for Azure.
+// Each category can have multiple checks (AND logic), if all checks pass,
+// then we can be sure that data is being ingested for that category of the signal
+type IngestionStatusCheckCategory struct {
+	Category    string                           `json:"category"`
+	DisplayName string                           `json:"display_name"`
+	Checks      []*IngestionStatusCheckAttribute `json:"checks"`
+}
+
+// IngestionStatusCheckAttribute represents a check or condition for ingestion status.
+// Key can be metric name or part of log message
+type IngestionStatusCheckAttribute struct {
+	Key        string                                 `json:"key"` // OPTIONAL search key (metric name or log message)
+	Attributes []*IngestionStatusCheckAttributeFilter `json:"attributes"`
+}
+
+// IngestionStatusCheck represents combined checks for metrics and logs for a service
+type IngestionStatusCheck struct {
+	Metrics []*IngestionStatusCheckCategory `json:"metrics"`
+	Logs    []*IngestionStatusCheckCategory `json:"logs"`
+}
+
+// IngestionStatusCheckAttributeFilter represents filter for a check, which can be used to filter specific log messages or metrics with specific attributes.
+// For example, we can use it to filter logs with specific log level or metrics with specific dimensions.
+type IngestionStatusCheckAttributeFilter struct {
+	Name     string `json:"name"`
+	Operator string `json:"operator"`
+	Value    string `json:"value"` // OPTIONAL
+}
+
+// Assets represents the collection of dashboards
+type Assets struct {
+	Dashboards []Dashboard `json:"dashboards"`
+}
+
+// SupportedSignals for cloud provider's service
+type SupportedSignals struct {
+	Logs    bool `json:"logs"`
+	Metrics bool `json:"metrics"`
+}
+
+// DataCollected is curated static list of metrics and logs, this is shown as part of service overview
+type DataCollected struct {
+	Logs    []CollectedLogAttribute `json:"logs"`
+	Metrics []CollectedMetric       `json:"metrics"`
+}
+
+// CollectedLogAttribute represents a log attribute that is present in all log entries for a service,
+// this is shown as part of service overview
+type CollectedLogAttribute struct {
+	Name string `json:"name"`
+	Path string `json:"path"`
+	Type string `json:"type"`
+}
+
+// CollectedMetric represents a metric that is collected for a service, this is shown as part of service overview
+type CollectedMetric struct {
+	Name        string `json:"name"`
+	Type        string `json:"type"`
+	Unit        string `json:"unit"`
+	Description string `json:"description"`
+}
+
+// AWSCollectionStrategy represents signal collection strategy for AWS services.
+// this is AWS specific.
+type AWSCollectionStrategy struct {
+	Metrics   *AWSMetricsStrategy `json:"aws_metrics,omitempty"`
+	Logs      *AWSLogsStrategy    `json:"aws_logs,omitempty"`
+	S3Buckets map[string][]string `json:"s3_buckets,omitempty"` // Only available in S3 Sync Service Type in AWS
+}
+
+// AzureCollectionStrategy represents signal collection strategy for Azure services.
+// this is Azure specific.
+type AzureCollectionStrategy struct {
+	Metrics []*AzureMetricsStrategy `json:"azure_metrics,omitempty"`
+	Logs    []*AzureLogsStrategy    `json:"azure_logs,omitempty"`
+}
+
+// AWSMetricsStrategy represents metrics collection strategy for AWS services.
+// this is AWS specific.
+type AWSMetricsStrategy struct {
+	// to be used as https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-resource-cloudwatch-metricstream.html#cfn-cloudwatch-metricstream-includefilters
+	StreamFilters []struct {
+		// json tags here are in the shape expected by AWS API as detailed at
+		// https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-cloudwatch-metricstream-metricstreamfilter.html
+		Namespace   string   `json:"Namespace"`
+		MetricNames []string `json:"MetricNames,omitempty"`
+	} `json:"cloudwatch_metric_stream_filters"`
+}
+
+// AWSLogsStrategy represents logs collection strategy for AWS services.
+// this is AWS specific.
+type AWSLogsStrategy struct {
+	Subscriptions []struct {
+		// subscribe to all logs groups with specified prefix.
+		// eg: `/aws/rds/`
+		LogGroupNamePrefix string `json:"log_group_name_prefix"`
+
+		// https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/FilterAndPatternSyntax.html
+		// "" implies no filtering is required.
+		FilterPattern string `json:"filter_pattern"`
+	} `json:"cloudwatch_logs_subscriptions"`
+}
+
+// AzureMetricsStrategy represents metrics collection strategy for Azure services.
+// this is Azure specific.
+type AzureMetricsStrategy struct {
+	CategoryType string `json:"category_type"`
+	Name         string `json:"name"`
+}
+
+// AzureLogsStrategy represents logs collection strategy for Azure services.
+// this is Azure specific. Even though this is similar to AzureMetricsStrategy, keeping it separate for future flexibility and clarity.
+type AzureLogsStrategy struct {
+	CategoryType string `json:"category_type"`
+	Name         string `json:"name"`
+}
+
+// Dashboard represents a dashboard definition for cloud integration.
+type Dashboard struct {
+	Id          string                                `json:"id"`
+	Url         string                                `json:"url"`
+	Title       string                                `json:"title"`
+	Description string                                `json:"description"`
+	Image       string                                `json:"image"`
+	Definition  *dashboardtypes.StorableDashboardData `json:"definition,omitempty"`
+}
+
+// UTILS
+
+// GetCloudIntegrationDashboardID returns the dashboard id for a cloud integration, given the cloud provider, service id, and dashboard id.
+// This is used to generate unique dashboard ids for cloud integration, and also to parse the dashboard id to get the cloud provider and service id when needed.
+func GetCloudIntegrationDashboardID(cloudProvider CloudProviderType, svcId, dashboardId string) string {
+	return fmt.Sprintf("cloud-integration--%s--%s--%s", cloudProvider, svcId, dashboardId)
+}
+
+// GetDashboardsFromAssets returns the list of dashboards for the cloud provider service from definition
+func GetDashboardsFromAssets(
+	svcId string,
+	orgID valuer.UUID,
+	cloudProvider CloudProviderType,
+	createdAt time.Time,
+	assets Assets,
+) []*dashboardtypes.Dashboard {
+	dashboards := make([]*dashboardtypes.Dashboard, 0)
+
+	for _, d := range assets.Dashboards {
+		if d.Definition == nil {
+			continue
+		}
+
+		author := fmt.Sprintf("%s-integration", cloudProvider)
+		dashboards = append(dashboards, &dashboardtypes.Dashboard{
+			ID:     GetCloudIntegrationDashboardID(cloudProvider, svcId, d.Id),
+			Locked: true,
+			OrgID:  orgID,
+			Data:   *d.Definition,
+			TimeAuditable: types.TimeAuditable{
+				CreatedAt: createdAt,
+				UpdatedAt: createdAt,
+			},
+			UserAuditable: types.UserAuditable{
+				CreatedBy: author,
+				UpdatedBy: author,
+			},
+		})
+	}
+
+	return dashboards
+}

pkg/types/cloudintegrationtypes/store.go

@@ -0,0 +1,42 @@
+package cloudintegrationtypes
+
+import (
+	"context"
+	"time"
+)
+
+type CloudIntegrationAccountStore interface {
+	ListConnected(ctx context.Context, orgId string, provider string) ([]CloudIntegration, error)
+
+	Get(ctx context.Context, orgId string, provider string, id string) (*CloudIntegration, error)
+
+	GetConnectedCloudAccount(ctx context.Context, orgId, provider string, accountID string) (*CloudIntegration, error)
+
+	// Insert an account or update it by (cloudProvider, id)
+	// for specified non-empty fields
+	Upsert(
+		ctx context.Context,
+		orgId string,
+		provider string,
+		id *string,
+		config []byte,
+		accountId *string,
+		agentReport *AgentReport,
+		removedAt *time.Time,
+	) (*CloudIntegration, error)
+}
+
+type CloudIntegrationServiceStore interface {
+	Get(ctx context.Context, orgID, cloudAccountId, serviceType string) ([]byte, error)
+
+	Upsert(
+		ctx context.Context,
+		orgID,
+		cloudProvider,
+		cloudAccountId,
+		serviceId string,
+		config []byte,
+	) ([]byte, error)
+
+	GetAllForAccount(ctx context.Context, orgID, cloudAccountId string) (map[string][]byte, error)
+}