chore: remove dashboard provider from the root (#10526)

* chore: remove dashboard provider from the root

* chore: fix tests

* chore: fix tests

* chore: remove dashboardId from provider

* chore: remove old instances of dashboard provider

* chore: separate dashboard widget fully

* chore: fix tests

* chore: resolve self comments

docs/api/openapi.yml

@@ -1768,19 +1768,19 @@ components:
         createdAt:
           format: date-time
           type: string
-        expires_at:
+        expiresAt:
           minimum: 0
           type: integer
         id:
           type: string
         key:
           type: string
-        last_used:
+        lastObservedAt:
           format: date-time
           type: string
         name:
           type: string
-        service_account_id:
+        serviceAccountId:
           type: string
         updatedAt:
           format: date-time
@@ -1788,9 +1788,9 @@ components:
       required:
       - id
       - key
-      - expires_at
-      - last_used
-      - service_account_id
+      - expiresAt
+      - lastObservedAt
+      - serviceAccountId
       type: object
     ServiceaccounttypesGettableFactorAPIKeyWithKey:
       properties:
@@ -1804,14 +1804,14 @@ components:
       type: object
     ServiceaccounttypesPostableFactorAPIKey:
       properties:
-        expires_at:
+        expiresAt:
           minimum: 0
           type: integer
         name:
           type: string
       required:
       - name
-      - expires_at
+      - expiresAt
       type: object
     ServiceaccounttypesPostableServiceAccount:
       properties:
@@ -1833,13 +1833,16 @@ components:
         createdAt:
           format: date-time
           type: string
+        deletedAt:
+          format: date-time
+          type: string
         email:
           type: string
         id:
           type: string
         name:
           type: string
-        orgID:
+        orgId:
           type: string
         roles:
           items:
@@ -1856,18 +1859,19 @@ components:
       - email
       - roles
       - status
-      - orgID
+      - orgId
+      - deletedAt
       type: object
     ServiceaccounttypesUpdatableFactorAPIKey:
       properties:
-        expires_at:
+        expiresAt:
           minimum: 0
           type: integer
         name:
           type: string
       required:
       - name
-      - expires_at
+      - expiresAt
       type: object
     ServiceaccounttypesUpdatableServiceAccount:
       properties:

frontend/src/AppRoutes/index.tsx

@@ -29,7 +29,6 @@ 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';
@@ -384,28 +383,26 @@ function App(): JSX.Element {
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>
-												<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>
+												<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>
 											</QueryBuilderProvider>
 										</ResourceProvider>
 									</PrivateRoute>

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

@@ -2100,7 +2100,7 @@ export interface ServiceaccounttypesFactorAPIKeyDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	expires_at: number;
+	expiresAt: number;
 	/**
 	 * @type string
 	 */
@@ -2113,7 +2113,7 @@ export interface ServiceaccounttypesFactorAPIKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	last_used: Date;
+	lastObservedAt: Date;
 	/**
 	 * @type string
 	 */
@@ -2121,7 +2121,7 @@ export interface ServiceaccounttypesFactorAPIKeyDTO {
 	/**
 	 * @type string
 	 */
-	service_account_id: string;
+	serviceAccountId: string;
 	/**
 	 * @type string
 	 * @format date-time
@@ -2145,7 +2145,7 @@ export interface ServiceaccounttypesPostableFactorAPIKeyDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	expires_at: number;
+	expiresAt: number;
 	/**
 	 * @type string
 	 */
@@ -2173,6 +2173,11 @@ export interface ServiceaccounttypesServiceAccountDTO {
 	 * @format date-time
 	 */
 	createdAt?: Date;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	deletedAt: Date;
 	/**
 	 * @type string
 	 */
@@ -2188,7 +2193,7 @@ export interface ServiceaccounttypesServiceAccountDTO {
 	/**
 	 * @type string
 	 */
-	orgID: string;
+	orgId: string;
 	/**
 	 * @type array
 	 */
@@ -2209,7 +2214,7 @@ export interface ServiceaccounttypesUpdatableFactorAPIKeyDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	expires_at: number;
+	expiresAt: number;
 	/**
 	 * @type string
 	 */

frontend/src/components/SettingsSection/SettingsSection.styles.scss

@@ -1,67 +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 24px 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;
-
-	&.open {
-		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/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/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

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

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

@@ -5,7 +5,6 @@ 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';
@@ -104,15 +103,13 @@ describe('LogsPanelComponent', () => {
 	const renderComponent = async (): Promise<void> => {
 		render(
 			<I18nextProvider i18n={i18n}>
-				<DashboardProvider>
-					<PreferenceContextProvider>
-						<NewWidget
-							selectedGraph={PANEL_TYPES.LIST}
-							fillSpans={undefined}
-							yAxisUnit={undefined}
-						/>
-					</PreferenceContextProvider>
-				</DashboardProvider>
+				<PreferenceContextProvider>
+					<NewWidget
+						dashboardId=""
+						selectedDashboard={undefined}
+						selectedGraph={PANEL_TYPES.LIST}
+					/>
+				</PreferenceContextProvider>
 			</I18nextProvider>,
 		);
 

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

@@ -8,28 +8,15 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
-import {
-	getDefaultWidgetData,
-	PANEL_TYPE_TO_QUERY_TYPES,
-} from 'container/NewWidget/utils';
+import { 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';
@@ -40,77 +27,25 @@ 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;
@@ -123,19 +58,16 @@ 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: selectedDashboard?.id,
-			dashboardName: selectedDashboard?.data.title,
+			dashboardId,
+			dashboardName,
 			isNewPanel,
 		});
-		handleStageQuery(currentQuery);
+		handleRunQueryFromQueryBuilder();
 	};
 
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
@@ -164,7 +96,7 @@ function QuerySection({
 							panelType={selectedGraph}
 							filterConfigs={filterConfigs}
 							showTraceOperator={selectedGraph !== PANEL_TYPES.LIST}
-							version={selectedDashboard?.data?.version || 'v3'}
+							version={dashboardVersion || 'v3'}
 							isListViewPanel={selectedGraph === PANEL_TYPES.LIST}
 							queryComponents={queryComponents}
 							signalSourceChangeEnabled
@@ -204,7 +136,7 @@ function QuerySection({
 		queryComponents,
 		selectedGraph,
 		filterConfigs,
-		selectedDashboard?.data?.version,
+		dashboardVersion,
 		isDarkMode,
 	]);
 
@@ -261,6 +193,11 @@ 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,6 +30,8 @@ function LeftContainer({
 	setRequestData,
 	setQueryResponse,
 	enableDrillDown = false,
+	selectedDashboard,
+	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
 
@@ -75,6 +77,11 @@ 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 12px 32px 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 {
@@ -429,6 +441,8 @@
 		}
 
 		.panel-config {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -464,9 +478,6 @@
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
-				.fill-gaps-text-description {
-					color: var(--bg-ink-400);
-				}
 			}
 
 			.bucket-config {
@@ -519,7 +530,7 @@
 		}
 
 		.alerts {
-			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
 
 			.left-section {
 				.bell-icon {
@@ -538,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,7 +8,6 @@ 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';
@@ -96,9 +95,7 @@ const render = (ui: React.ReactElement): ReturnType<typeof rtlRender> =>
 				<Provider store={createMockStore()}>
 					<AppContext.Provider value={createMockAppContext() as IAppContext}>
 						<ErrorModalProvider>
-							<DashboardProvider>
-								<QueryBuilderProvider>{ui}</QueryBuilderProvider>
-							</DashboardProvider>
+							<QueryBuilderProvider>{ui}</QueryBuilderProvider>
 						</ErrorModalProvider>
 					</AppContext.Provider>
 				</Provider>

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

@@ -14,11 +14,11 @@ import {
 	Input,
 	InputNumber,
 	Select,
+	Space,
 	Switch,
 	Typography,
 } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
 import GraphTypes, {
@@ -28,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';
@@ -185,16 +178,6 @@ function RightContainer({
 		}));
 	}, [dashboardVariables]);
 
-	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
-		allowSoftMinMax,
-		allowLogScale,
-	]);
-
-	const isLegendSectionVisible = useMemo(
-		() => allowLegendPosition || allowLegendColors,
-		[allowLegendPosition, allowLegendColors],
-	);
-
 	const updateCursorAndDropdown = (value: string, pos: number): void => {
 		setCursorPos(pos);
 		const lastDollar = value.lastIndexOf('$', pos - 1);
@@ -210,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);
@@ -289,295 +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 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}
+				>
+					<Input
+						rootClassName="name-input"
+						ref={inputRef}
+						onSelect={handleInputCursor}
+						onClick={handleInputCursor}
+						onBlur={(): void => setAutoCompleteOpen(false)}
 					/>
-				</section>
-			</SettingsSection>
-
+				</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">
-				<SettingsSection
-					title="Visualization"
-					defaultOpen
-					icon={<LayoutDashboard size={14} />}
+				<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'}
 				>
-					<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>
+					{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)}
-							/>
-						</section>
-					)}
-				</SettingsSection>
+						</Option>
+					))}
+				</Select>
 
-				<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}
+				{allowFillSpans && (
+					<Space className="fill-gaps">
+						<Typography className="fill-gaps-text">Fill gaps</Typography>
+						<Switch
+							checked={isFillSpans}
+							size="small"
+							onChange={(checked): void => setIsFillSpans(checked)}
 						/>
-					)}
-
-					{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>
-
-				{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>
+					</Space>
 				)}
 
-				{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>
-						)}
+				{allowPanelTimePreference && (
+					<>
+						<Typography.Text className="panel-time-text">
+							Panel Time Preference
+						</Typography.Text>
+						<TimePreference
+							{...{
+								selectedTime,
+								setSelectedTime,
+							}}
+						/>
+					</>
+				)}
 
-						{allowLegendColors && (
-							<section className="legend-colors">
-								<LegendColors
-									customLegendColors={customLegendColors}
-									setCustomLegendColors={setCustomLegendColors}
-									queryResponse={queryResponse}
-								/>
-							</section>
-						)}
-					</SettingsSection>
+				{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>
+						<section className="container">
+							<Typography.Text className="text">Soft Max</Typography.Text>
+							<InputNumber
+								value={softMax}
+								type="number"
+								rootClassName="input"
+								onChange={softMaxHandler}
+							/>
+						</section>
+					</section>
+				)}
+
+				{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>
 
@@ -593,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}
@@ -619,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>
+				<DashboardProvider dashboardId="">
 					<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>
+			<DashboardProvider dashboardId="">
 				<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, useParams } from 'react-router-dom';
+import { generatePath } 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,8 +32,6 @@ 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,
@@ -83,6 +81,8 @@ import {
 import './NewWidget.styles.scss';
 
 function NewWidget({
+	selectedDashboard,
+	dashboardId,
 	selectedGraph,
 	enableDrillDown = false,
 }: NewWidgetProps): JSX.Element {
@@ -90,11 +90,6 @@ function NewWidget({
 	const setToScrollWidgetId = useScrollToWidgetIdStore(
 		(s) => s.setToScrollWidgetId,
 	);
-	const {
-		selectedDashboard,
-		setSelectedDashboard,
-		columnWidths,
-	} = useDashboard();
 
 	const { dashboardVariables } = useDashboardVariables();
 
@@ -139,8 +134,6 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
-	const { dashboardId } = useParams<DashboardWidgetPageParams>();
-
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -286,11 +279,10 @@ function NewWidget({
 				isLogScale,
 				legendPosition,
 				customLegendColors,
-				columnWidths: columnWidths?.[selectedWidget?.id],
+				columnWidths: selectedWidget.columnWidths,
 				contextLinks,
 			};
 		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		columnUnits,
 		currentQuery,
@@ -313,8 +305,8 @@ function NewWidget({
 		isLogScale,
 		legendPosition,
 		customLegendColors,
-		columnWidths,
 		contextLinks,
+		selectedWidget.columnWidths,
 	]);
 
 	const closeModal = (): void => {
@@ -560,8 +552,7 @@ function NewWidget({
 		};
 
 		updateDashboardMutation.mutateAsync(dashboard, {
-			onSuccess: (updatedDashboard) => {
-				setSelectedDashboard(updatedDashboard.data);
+			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
 				safeNavigate({
 					pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
@@ -580,7 +571,6 @@ function NewWidget({
 		preWidgets,
 		updateDashboardMutation,
 		widgets,
-		setSelectedDashboard,
 		setToScrollWidgetId,
 		safeNavigate,
 		dashboardId,
@@ -630,22 +620,25 @@ function NewWidget({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query]);
 
-	const onSaveDashboard = useCallback((): void => {
+	const isNewPanel = useMemo(() => {
 		const widgetId = query.get('widgetId');
-		const selectWidget = widgets?.find((e) => e.id === widgetId);
+		const selectedWidget = widgets?.find((e) => e.id === widgetId);
+		return isUndefined(selectedWidget);
+	}, [query, widgets]);
 
+	const onSaveDashboard = useCallback((): void => {
 		logEvent('Panel Edit: Save changes', {
 			panelType: selectedWidget.panelTypes,
 			dashboardId: selectedDashboard?.id,
 			widgetId: selectedWidget.id,
 			dashboardName: selectedDashboard?.data.title,
 			queryType: currentQuery.queryType,
-			isNewPanel: isUndefined(selectWidget),
+			isNewPanel,
 			dataSource: currentQuery?.builder?.queryData?.[0]?.dataSource,
 		});
 		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [isNewPanel]);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -821,6 +814,8 @@ function NewWidget({
 								isLoadingPanelData={isLoadingPanelData}
 								setQueryResponse={setQueryResponse}
 								enableDrillDown={enableDrillDown}
+								selectedDashboard={selectedDashboard}
+								isNewPanel={isNewPanel}
 							/>
 						)}
 					</OverlayScrollbar>

frontend/src/container/NewWidget/types.ts

@@ -2,6 +2,7 @@ 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';
@@ -9,9 +10,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;
 }
 
@@ -34,6 +35,8 @@ export interface WidgetGraphProps {
 		>
 	>;
 	enableDrillDown?: boolean;
+	selectedDashboard: IDashboardContext['selectedDashboard'];
+	isNewPanel?: boolean;
 }
 
 export type WidgetGraphContainerProps = {

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

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

frontend/src/pages/DashboardPage/index.tsx

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

frontend/src/pages/DashboardWidget/index.tsx

@@ -1,50 +1,91 @@
-import { useEffect, useState } from 'react';
-import { generatePath, useLocation, useParams } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { generatePath, 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 { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { parseAsStringEnum, useQueryState } from 'nuqs';
+import { setDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 
 function DashboardWidget(): JSX.Element | null {
-	const { search } = useLocation();
-	const { dashboardId } = useParams<DashboardWidgetPageParams>();
+	const { dashboardId } = useParams<{
+		dashboardId: string;
+	}>();
+	const [widgetId] = useQueryState('widgetId');
+	const [graphType] = useQueryState(
+		'graphType',
+		parseAsStringEnum<PANEL_TYPES>(Object.values(PANEL_TYPES)),
+	);
+
 	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(() => {
-		const params = new URLSearchParams(search);
-		const graphType = params.get('graphType') as PANEL_TYPES | null;
-
-		if (graphType === null) {
+		if (!graphType || !widgetId) {
 			safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
-		} else {
-			setSelectedGraph(graphType);
+		} else if (!dashboardId) {
+			safeNavigate(ROUTES.HOME);
 		}
-	}, [dashboardId, safeNavigate, search]);
+	}, [graphType, widgetId, dashboardId, safeNavigate]);
 
-	if (selectedGraph === undefined || dashboardResponse.isLoading) {
+	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 {
+		data: dashboardResponse,
+		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) => {
+			setDashboardVariablesStore({
+				dashboardId,
+				variables: response.data.data.variables,
+			});
+		},
+	});
+
+	const selectedDashboard = useMemo(() => dashboardResponse?.data, [
+		dashboardResponse?.data,
+	]);
+
+	if (isFetchingDashboardResponse) {
 		return <Spinner tip="Loading.." />;
 	}
 
-	if (dashboardResponse.isError) {
+	if (isErrorDashboardResponse) {
 		return (
 			<Card>
 				<Typography>{SOMETHING_WENT_WRONG}</Typography>
@@ -54,16 +95,11 @@ function DashboardWidget(): JSX.Element | null {
 
 	return (
 		<NewWidget
-			yAxisUnit={selectedWidget?.yAxisUnit}
-			selectedGraph={selectedGraph}
-			fillSpans={selectedWidget?.fillSpans}
+			dashboardId={dashboardId}
+			selectedGraph={graphType}
 			enableDrillDown={isDrilldownEnabled()}
+			selectedDashboard={selectedDashboard}
 		/>
 	);
 }
-
-export interface DashboardWidgetPageParams {
-	dashboardId: string;
-}
-
 export default DashboardWidget;

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

@@ -8,7 +8,6 @@ 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', () => ({
@@ -19,11 +18,6 @@ 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();
@@ -47,9 +41,7 @@ describe('dashboard list page', () => {
 			<MemoryRouter
 				initialEntries={['/dashbords?columnKey=asgard&order=stones&page=1']}
 			>
-				<DashboardProvider>
-					<DashboardsList />
-				</DashboardProvider>
+				<DashboardsList />
 			</MemoryRouter>,
 		);
 
@@ -71,9 +63,7 @@ describe('dashboard list page', () => {
 			<MemoryRouter
 				initialEntries={['/dashbords?columnKey=createdAt&order=descend&page=1']}
 			>
-				<DashboardProvider>
-					<DashboardsList />
-				</DashboardProvider>
+				<DashboardsList />
 			</MemoryRouter>,
 		);
 
@@ -92,9 +82,7 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardProvider>
-					<DashboardsList />
-				</DashboardProvider>
+				<DashboardsList />
 			</MemoryRouter>,
 		);
 
@@ -135,9 +123,7 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardProvider>
-					<DashboardsList />
-				</DashboardProvider>
+				<DashboardsList />
 			</MemoryRouter>,
 		);
 
@@ -164,9 +150,7 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardProvider>
-					<DashboardsList />
-				</DashboardProvider>
+				<DashboardsList />
 			</MemoryRouter>,
 		);
 
@@ -196,9 +180,7 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardProvider>
-					<DashboardsList />
-				</DashboardProvider>
+				<DashboardsList />
 			</MemoryRouter>,
 		);
 

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -14,13 +14,11 @@ 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 { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
@@ -83,14 +81,11 @@ export const DashboardContext = createContext<IDashboardContext>({
 	setColumnWidths: () => {},
 });
 
-interface Props {
-	dashboardId: string;
-}
-
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function DashboardProvider({
 	children,
-}: PropsWithChildren): JSX.Element {
+	dashboardId,
+}: PropsWithChildren<{ dashboardId: string }>): JSX.Element {
 	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
 
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
@@ -100,11 +95,6 @@ export function DashboardProvider({
 		setDashboardQueryRangeCalled,
 	] = useState<boolean>(false);
 
-	const isDashboardPage = useRouteMatch<Props>({
-		path: ROUTES.DASHBOARD,
-		exact: true,
-	});
-
 	const { showErrorModal } = useErrorModal();
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -115,11 +105,6 @@ 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<
@@ -128,11 +113,6 @@ 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);
@@ -267,12 +247,11 @@ export function DashboardProvider({
 	const dashboardResponse = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			isDashboardPage?.params,
 			dashboardId,
 			globalTime.isAutoRefreshDisabled,
 		],
 		{
-			enabled: (!!isDashboardPage || !!isDashboardWidgetPage) && isLoggedIn,
+			enabled: !!dashboardId && isLoggedIn,
 			queryFn: async () => {
 				setIsDashboardFetching(true);
 				try {
@@ -392,11 +371,7 @@ export function DashboardProvider({
 
 	useEffect(() => {
 		// make the call on tab visibility only if the user is on dashboard / widget page
-		if (
-			isVisible &&
-			updatedTimeRef.current &&
-			(!!isDashboardPage || !!isDashboardWidgetPage)
-		) {
+		if (isVisible && updatedTimeRef.current && !!dashboardId) {
 			dashboardResponse.refetch();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -2,11 +2,10 @@ 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, screen, waitFor } from '@testing-library/react';
+import { render, RenderResult, 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';
 
@@ -19,30 +18,28 @@ 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: (): any => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
 		safeNavigate: jest.fn(),
 	}),
 }));
 
 // Mock only the essential dependencies for Dashboard provider
 jest.mock('providers/App/App', () => ({
-	useAppContext: (): any => ({
+	useAppContext: (): {
+		isLoggedIn: boolean;
+		user: { email: string; role: string };
+	} => ({
 		isLoggedIn: true,
 		user: { email: 'test@example.com', role: 'ADMIN' },
 	}),
 }));
 
 jest.mock('providers/ErrorModalProvider', () => ({
-	useErrorModal: (): any => ({ showErrorModal: jest.fn() }),
+	useErrorModal: (): { showErrorModal: jest.Mock } => ({
+		showErrorModal: jest.fn(),
+	}),
 }));
 
 jest.mock('react-redux', () => ({
@@ -60,11 +57,10 @@ 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">{dashboardId}</div>
+			<div data-testid="dashboard-id">{selectedDashboard?.id}</div>
 			<div data-testid="query-status">{dashboardResponse.status}</div>
 			<div data-testid="is-loading">{dashboardResponse.isLoading.toString()}</div>
 			<div data-testid="is-fetching">
@@ -94,27 +90,15 @@ function createTestQueryClient(): QueryClient {
 
 // Helper to render with dashboard provider
 function renderWithDashboardProvider(
-	initialRoute = '/dashboard/test-dashboard-id',
-	routeMatchParams?: { dashboardId: string } | null,
-): any {
+	dashboardId = 'test-dashboard-id',
+): RenderResult {
 	const queryClient = createTestQueryClient();
-
-	// Mock the route match
-	mockUseRouteMatch.mockReturnValue(
-		routeMatchParams
-			? {
-					path: ROUTES.DASHBOARD,
-					url: `/dashboard/${routeMatchParams.dashboardId}`,
-					isExact: true,
-					params: routeMatchParams,
-			  }
-			: null,
-	);
+	const initialRoute = dashboardId ? `/dashboard/${dashboardId}` : '/dashboard';
 
 	return render(
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
-				<DashboardProvider>
+				<DashboardProvider dashboardId={dashboardId}>
 					<TestComponent />
 				</DashboardProvider>
 			</MemoryRouter>
@@ -188,7 +172,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(`/dashboard/${dashboardId}`, { dashboardId });
+			renderWithDashboardProvider(dashboardId);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId });
@@ -203,30 +187,17 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const newDashboardId = 'new-dashboard-id';
 
 			// First render with initial dashboard ID
-			const { rerender } = renderWithDashboardProvider(
-				`/dashboard/${initialDashboardId}`,
-				{
-					dashboardId: initialDashboardId,
-				},
-			);
+			const { rerender } = renderWithDashboardProvider(initialDashboardId);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: initialDashboardId });
 			});
 
-			// Change route params to simulate navigation
-			mockUseRouteMatch.mockReturnValue({
-				path: ROUTES.DASHBOARD,
-				url: `/dashboard/${newDashboardId}`,
-				isExact: true,
-				params: { dashboardId: newDashboardId },
-			});
-
-			// Rerender with new route
+			// Rerender with new dashboard ID prop
 			rerender(
 				<QueryClientProvider client={createTestQueryClient()}>
 					<MemoryRouter initialEntries={[`/dashboard/${newDashboardId}`]}>
-						<DashboardProvider>
+						<DashboardProvider dashboardId={newDashboardId}>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -241,50 +212,24 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			expect(mockGetDashboard).toHaveBeenCalledTimes(2);
 		});
 
-		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);
+		it('should not fetch when no dashboardId is provided', () => {
+			renderWithDashboardProvider('');
 
 			// 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 route params', async () => {
+		it('should create separate cache entries for different dashboardIds', 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>
+						<DashboardProvider dashboardId={dashboardId1}>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -295,18 +240,10 @@ 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>
+						<DashboardProvider dashboardId={dashboardId2}>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -325,13 +262,11 @@ 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
 			]);
@@ -348,17 +283,10 @@ 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>
+						<DashboardProvider dashboardId={dashboardId}>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -375,7 +303,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 				.find(
 					(query) =>
 						query.queryKey[0] === REACT_QUERY_KEY.DASHBOARD_BY_ID &&
-						query.queryKey[3] === false,
+						query.queryKey[2] === false,
 				);
 			expect(dashboardQuery).toBeDefined();
 			expect((dashboardQuery as { cacheTime: number }).cacheTime).toBe(
@@ -437,9 +365,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			// Empty URL variables - tests initialization flow
 			mockGetUrlVariables.mockReturnValue({});
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -493,9 +419,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['db', 'cache']);
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -555,9 +479,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 
 			mockGetUrlVariables.mockReturnValue(urlVariables);
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -593,9 +515,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['api']);
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				// Verify normalization was called with the specific values and variable configs
@@ -662,9 +582,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -706,9 +624,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -751,9 +667,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -795,9 +709,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
-				dashboardId: DASHBOARD_ID,
-			});
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });

pkg/modules/serviceaccount/implserviceaccount/handler.go

@@ -111,7 +111,12 @@ func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	serviceAccount.Update(req.Name, req.Email, req.Roles)
+	err = serviceAccount.Update(req.Name, req.Email, req.Roles)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
 	err = handler.module.Update(ctx, valuer.MustNewUUID(claims.OrgID), serviceAccount)
 	if err != nil {
 		render.Error(rw, err)
@@ -147,7 +152,12 @@ func (handler *handler) UpdateStatus(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	serviceAccount.UpdateStatus(req.Status)
+	err = serviceAccount.UpdateStatus(req.Status)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
 	err = handler.module.UpdateStatus(ctx, valuer.MustNewUUID(claims.OrgID), serviceAccount)
 	if err != nil {
 		render.Error(rw, err)
@@ -290,7 +300,7 @@ func (handler *handler) UpdateFactorAPIKey(rw http.ResponseWriter, r *http.Reque
 	}
 
 	factorAPIKey.Update(req.Name, req.ExpiresAt)
-	err = handler.module.UpdateFactorAPIKey(ctx, serviceAccount.ID, factorAPIKey)
+	err = handler.module.UpdateFactorAPIKey(ctx, valuer.MustNewUUID(claims.OrgID), serviceAccount.ID, factorAPIKey)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/modules/serviceaccount/implserviceaccount/module.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/emailing"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -60,6 +61,24 @@ func (module *module) Create(ctx context.Context, orgID valuer.UUID, serviceAcco
 	return nil
 }
 
+func (module *module) GetOrCreate(ctx context.Context, serviceAccount *serviceaccounttypes.ServiceAccount) (*serviceaccounttypes.ServiceAccount, error) {
+	existingServiceAccount, err := module.store.GetActiveByOrgIDAndName(ctx, serviceAccount.OrgID, serviceAccount.Name)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return nil, err
+	}
+
+	if existingServiceAccount != nil {
+		return serviceAccount, nil
+	}
+
+	err = module.Create(ctx, serviceAccount.OrgID, serviceAccount)
+	if err != nil {
+		return nil, err
+	}
+
+	return serviceAccount, nil
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*serviceaccounttypes.ServiceAccount, error) {
 	storableServiceAccount, err := module.store.Get(ctx, orgID, id)
 	if err != nil {
@@ -171,26 +190,28 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, input *serv
 }
 
 func (module *module) UpdateStatus(ctx context.Context, orgID valuer.UUID, input *serviceaccounttypes.ServiceAccount) error {
-	serviceAccount, err := module.Get(ctx, orgID, input.ID)
+	err := module.authz.Revoke(ctx, orgID, input.Roles, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, input.ID.String(), orgID, nil))
 	if err != nil {
 		return err
 	}
 
-	if input.Status == serviceAccount.Status {
-		return nil
-	}
+	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
+		// revoke all the API keys on disable
+		err := module.store.RevokeAllFactorAPIKeys(ctx, input.ID)
+		if err != nil {
+			return err
+		}
 
-	switch input.Status {
-	case serviceaccounttypes.StatusActive:
-		err := module.activateServiceAccount(ctx, orgID, input)
-		if err != nil {
-			return err
-		}
-	case serviceaccounttypes.StatusDisabled:
-		err := module.disableServiceAccount(ctx, orgID, input)
+		// update the status but do not delete the role mappings as we will use them for audits
+		err = module.store.Update(ctx, orgID, serviceaccounttypes.NewStorableServiceAccount(input))
 		if err != nil {
 			return err
 		}
+
+		return nil
+	})
+	if err != nil {
+		return err
 	}
 
 	return nil
@@ -276,8 +297,13 @@ func (module *module) ListFactorAPIKey(ctx context.Context, serviceAccountID val
 	return serviceaccounttypes.NewFactorAPIKeyFromStorables(storables), nil
 }
 
-func (module *module) UpdateFactorAPIKey(ctx context.Context, serviceAccountID valuer.UUID, factorAPIKey *serviceaccounttypes.FactorAPIKey) error {
-	return module.store.UpdateFactorAPIKey(ctx, serviceAccountID, serviceaccounttypes.NewStorableFactorAPIKey(factorAPIKey))
+func (module *module) UpdateFactorAPIKey(ctx context.Context, _ valuer.UUID, serviceAccountID valuer.UUID, factorAPIKey *serviceaccounttypes.FactorAPIKey) error {
+	err := module.store.UpdateFactorAPIKey(ctx, serviceAccountID, serviceaccounttypes.NewStorableFactorAPIKey(factorAPIKey))
+	if err != nil {
+		return err
+	}
+
+	return nil
 }
 
 func (module *module) RevokeFactorAPIKey(ctx context.Context, serviceAccountID valuer.UUID, id valuer.UUID) error {
@@ -307,45 +333,3 @@ func (module *module) RevokeFactorAPIKey(ctx context.Context, serviceAccountID v
 
 	return nil
 }
-
-func (module *module) disableServiceAccount(ctx context.Context, orgID valuer.UUID, input *serviceaccounttypes.ServiceAccount) error {
-	err := module.authz.Revoke(ctx, orgID, input.Roles, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, input.ID.String(), orgID, nil))
-	if err != nil {
-		return err
-	}
-
-	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		// revoke all the API keys on disable
-		err := module.store.RevokeAllFactorAPIKeys(ctx, input.ID)
-		if err != nil {
-			return err
-		}
-
-		// update the status but do not delete the role mappings as we will reuse them on activation.
-		err = module.Update(ctx, orgID, input)
-		if err != nil {
-			return err
-		}
-
-		return nil
-	})
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (module *module) activateServiceAccount(ctx context.Context, orgID valuer.UUID, input *serviceaccounttypes.ServiceAccount) error {
-	err := module.authz.Grant(ctx, orgID, input.Roles, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, input.ID.String(), orgID, nil))
-	if err != nil {
-		return err
-	}
-
-	err = module.Update(ctx, orgID, input)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}

pkg/modules/serviceaccount/implserviceaccount/store.go

@@ -48,6 +48,25 @@ func (store *store) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID)
 	return storable, nil
 }
 
+func (store *store) GetActiveByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*serviceaccounttypes.StorableServiceAccount, error) {
+	storable := new(serviceaccounttypes.StorableServiceAccount)
+
+	err := store.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(storable).
+		Where("org_id = ?", orgID).
+		Where("name = ?", name).
+		Where("status = ?", serviceaccounttypes.StatusActive).
+		Scan(ctx)
+	if err != nil {
+		return nil, store.sqlstore.WrapNotFoundErrf(err, serviceaccounttypes.ErrCodeServiceAccountNotFound, "service account with name: %s doesn't exist in org: %s", name, orgID.String())
+	}
+
+	return storable, nil
+}
+
 func (store *store) GetByID(ctx context.Context, id valuer.UUID) (*serviceaccounttypes.StorableServiceAccount, error) {
 	storable := new(serviceaccounttypes.StorableServiceAccount)
 
@@ -188,7 +207,7 @@ func (store *store) CreateFactorAPIKey(ctx context.Context, storable *serviceacc
 		Model(storable).
 		Exec(ctx)
 	if err != nil {
-		return store.sqlstore.WrapAlreadyExistsErrf(err, serviceaccounttypes.ErrCodeServiceAccountFactorAPIKeyAlreadyExists, "api key with name: %s already exists for service account: %s", storable.Name, storable.ServiceAccountID)
+		return store.sqlstore.WrapAlreadyExistsErrf(err, serviceaccounttypes.ErrCodeAPIKeyAlreadyExists, "api key with name: %s already exists for service account: %s", storable.Name, storable.ServiceAccountID)
 	}
 
 	return nil
@@ -206,7 +225,7 @@ func (store *store) GetFactorAPIKey(ctx context.Context, serviceAccountID valuer
 		Where("service_account_id = ?", serviceAccountID).
 		Scan(ctx)
 	if err != nil {
-		return nil, store.sqlstore.WrapNotFoundErrf(err, serviceaccounttypes.ErrCodeServiceAccounFactorAPIKeytNotFound, "api key with id: %s doesn't exist for service account: %s", id, serviceAccountID)
+		return nil, store.sqlstore.WrapNotFoundErrf(err, serviceaccounttypes.ErrCodeAPIKeytNotFound, "api key with id: %s doesn't exist for service account: %s", id, serviceAccountID)
 	}
 
 	return storable, nil

pkg/modules/serviceaccount/serviceaccount.go

@@ -15,6 +15,9 @@ type Module interface {
 	// Gets a service account by id.
 	Get(context.Context, valuer.UUID, valuer.UUID) (*serviceaccounttypes.ServiceAccount, error)
 
+	// Gets or creates a service account by name
+	GetOrCreate(context.Context, *serviceaccounttypes.ServiceAccount) (*serviceaccounttypes.ServiceAccount, error)
+
 	// Gets a service account by id without fetching roles.
 	GetWithoutRoles(context.Context, valuer.UUID, valuer.UUID) (*serviceaccounttypes.ServiceAccount, error)
 
@@ -40,7 +43,7 @@ type Module interface {
 	ListFactorAPIKey(context.Context, valuer.UUID) ([]*serviceaccounttypes.FactorAPIKey, error)
 
 	// Updates an existing API key for a service account
-	UpdateFactorAPIKey(context.Context, valuer.UUID, *serviceaccounttypes.FactorAPIKey) error
+	UpdateFactorAPIKey(context.Context, valuer.UUID, valuer.UUID, *serviceaccounttypes.FactorAPIKey) error
 
 	// Revokes an existing API key for a service account
 	RevokeFactorAPIKey(context.Context, valuer.UUID, valuer.UUID) error

pkg/types/serviceaccounttypes/factor_api_key.go

@@ -11,20 +11,22 @@ import (
 )
 
 var (
-	ErrCodeServiceAccountFactorAPIkeyInvalidInput  = errors.MustNewCode("service_account_factor_api_key_invalid_input")
-	ErrCodeServiceAccountFactorAPIKeyAlreadyExists = errors.MustNewCode("service_account_factor_api_key_already_exists")
-	ErrCodeServiceAccounFactorAPIKeytNotFound      = errors.MustNewCode("service_account_factor_api_key_not_found")
+	ErrCodeAPIkeyInvalidInput        = errors.MustNewCode("service_account_factor_api_key_invalid_input")
+	ErrCodeAPIKeyAlreadyExists       = errors.MustNewCode("service_account_factor_api_key_already_exists")
+	ErrCodeAPIKeytNotFound           = errors.MustNewCode("service_account_factor_api_key_not_found")
+	ErrCodeAPIKeyExpired             = errors.MustNewCode("api_key_expired")
+	ErrCodeAPIkeyOlderLastObservedAt = errors.MustNewCode("api_key_older_last_observed_at")
 )
 
 type StorableFactorAPIKey struct {
-	bun.BaseModel `bun:"table:factor_api_key"`
+	bun.BaseModel `bun:"table:factor_api_key,alias:factor_api_key"`
 
 	types.Identifiable
 	types.TimeAuditable
 	Name             string    `bun:"name"`
 	Key              string    `bun:"key"`
 	ExpiresAt        uint64    `bun:"expires_at"`
-	LastUsed         time.Time `bun:"last_used"`
+	LastObservedAt   time.Time `bun:"last_observed_at"`
 	ServiceAccountID string    `bun:"service_account_id"`
 }
 
@@ -33,9 +35,9 @@ type FactorAPIKey struct {
 	types.TimeAuditable
 	Name             string      `json:"name" requrired:"true"`
 	Key              string      `json:"key" required:"true"`
-	ExpiresAt        uint64      `json:"expires_at" required:"true"`
-	LastUsed         time.Time   `json:"last_used" required:"true"`
-	ServiceAccountID valuer.UUID `json:"service_account_id" required:"true"`
+	ExpiresAt        uint64      `json:"expiresAt" required:"true"`
+	LastObservedAt   time.Time   `json:"lastObservedAt" required:"true"`
+	ServiceAccountID valuer.UUID `json:"serviceAccountId" required:"true"`
 }
 
 type GettableFactorAPIKeyWithKey struct {
@@ -47,19 +49,19 @@ type GettableFactorAPIKey struct {
 	types.Identifiable
 	types.TimeAuditable
 	Name             string      `json:"name" requrired:"true"`
-	ExpiresAt        uint64      `json:"expires_at" required:"true"`
-	LastUsed         time.Time   `json:"last_used" required:"true"`
-	ServiceAccountID valuer.UUID `json:"service_account_id" required:"true"`
+	ExpiresAt        uint64      `json:"expiresAt" required:"true"`
+	LastObservedAt   time.Time   `json:"lastObservedAt" required:"true"`
+	ServiceAccountID valuer.UUID `json:"serviceAccountId" required:"true"`
 }
 
 type PostableFactorAPIKey struct {
 	Name      string `json:"name" required:"true"`
-	ExpiresAt uint64 `json:"expires_at" required:"true"`
+	ExpiresAt uint64 `json:"expiresAt" required:"true"`
 }
 
 type UpdatableFactorAPIKey struct {
 	Name      string `json:"name" required:"true"`
-	ExpiresAt uint64 `json:"expires_at" required:"true"`
+	ExpiresAt uint64 `json:"expiresAt" required:"true"`
 }
 
 func NewFactorAPIKeyFromStorable(storable *StorableFactorAPIKey) *FactorAPIKey {
@@ -69,7 +71,7 @@ func NewFactorAPIKeyFromStorable(storable *StorableFactorAPIKey) *FactorAPIKey {
 		Name:             storable.Name,
 		Key:              storable.Key,
 		ExpiresAt:        storable.ExpiresAt,
-		LastUsed:         storable.LastUsed,
+		LastObservedAt:   storable.LastObservedAt,
 		ServiceAccountID: valuer.MustNewUUID(storable.ServiceAccountID),
 	}
 }
@@ -91,7 +93,7 @@ func NewStorableFactorAPIKey(factorAPIKey *FactorAPIKey) *StorableFactorAPIKey {
 		Name:             factorAPIKey.Name,
 		Key:              factorAPIKey.Key,
 		ExpiresAt:        factorAPIKey.ExpiresAt,
-		LastUsed:         factorAPIKey.LastUsed,
+		LastObservedAt:   factorAPIKey.LastObservedAt,
 		ServiceAccountID: factorAPIKey.ServiceAccountID.String(),
 	}
 }
@@ -105,7 +107,7 @@ func NewGettableFactorAPIKeys(keys []*FactorAPIKey) []*GettableFactorAPIKey {
 			TimeAuditable:    key.TimeAuditable,
 			Name:             key.Name,
 			ExpiresAt:        key.ExpiresAt,
-			LastUsed:         key.LastUsed,
+			LastObservedAt:   key.LastObservedAt,
 			ServiceAccountID: key.ServiceAccountID,
 		}
 	}
@@ -128,6 +130,29 @@ func (apiKey *FactorAPIKey) Update(name string, expiresAt uint64) {
 	apiKey.UpdatedAt = time.Now()
 }
 
+func (apiKey *FactorAPIKey) IsExpired() error {
+	if apiKey.ExpiresAt == 0 {
+		return nil
+	}
+
+	if time.Now().After(time.Unix(int64(apiKey.ExpiresAt), 0)) {
+		return errors.New(errors.TypeUnauthenticated, ErrCodeAPIKeyExpired, "api key has been expired")
+	}
+
+	return nil
+}
+
+func (apiKey *FactorAPIKey) UpdateLastObservedAt(lastObservedAt time.Time) error {
+	if lastObservedAt.Before(apiKey.LastObservedAt) {
+		return errors.New(errors.TypeInvalidInput, ErrCodeAPIkeyOlderLastObservedAt, "last observed at is before the current last observed at")
+	}
+
+	apiKey.LastObservedAt = lastObservedAt
+	apiKey.UpdatedAt = time.Now()
+
+	return nil
+}
+
 func (key *PostableFactorAPIKey) UnmarshalJSON(data []byte) error {
 	type Alias PostableFactorAPIKey
 
@@ -137,7 +162,7 @@ func (key *PostableFactorAPIKey) UnmarshalJSON(data []byte) error {
 	}
 
 	if temp.Name == "" {
-		return errors.New(errors.TypeInvalidInput, ErrCodeServiceAccountFactorAPIkeyInvalidInput, "name cannot be empty")
+		return errors.New(errors.TypeInvalidInput, ErrCodeAPIkeyInvalidInput, "name cannot be empty")
 	}
 
 	*key = PostableFactorAPIKey(temp)
@@ -153,7 +178,7 @@ func (key *UpdatableFactorAPIKey) UnmarshalJSON(data []byte) error {
 	}
 
 	if temp.Name == "" {
-		return errors.New(errors.TypeInvalidInput, ErrCodeServiceAccountFactorAPIkeyInvalidInput, "name cannot be empty")
+		return errors.New(errors.TypeInvalidInput, ErrCodeAPIkeyInvalidInput, "name cannot be empty")
 	}
 
 	*key = UpdatableFactorAPIKey(temp)

pkg/types/serviceaccounttypes/service_acccount.go

@@ -4,7 +4,7 @@ import (
 	"crypto/rand"
 	"encoding/base64"
 	"encoding/json"
-	"slices"
+	"regexp"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -15,10 +15,11 @@ import (
 )
 
 var (
-	ErrCodeServiceAccountInvalidInput      = errors.MustNewCode("service_account_invalid_input")
-	ErrCodeServiceAccountAlreadyExists     = errors.MustNewCode("service_account_already_exists")
-	ErrCodeServiceAccountNotFound          = errors.MustNewCode("service_account_not_found")
-	ErrCodeServiceAccountRoleAlreadyExists = errors.MustNewCode("service_account_role_already_exists")
+	ErrCodeServiceAccountInvalidInput         = errors.MustNewCode("service_account_invalid_input")
+	ErrCodeServiceAccountAlreadyExists        = errors.MustNewCode("service_account_already_exists")
+	ErrCodeServiceAccountNotFound             = errors.MustNewCode("service_account_not_found")
+	ErrCodeServiceAccountRoleAlreadyExists    = errors.MustNewCode("service_account_role_already_exists")
+	ErrCodeServiceAccountOperationUnsupported = errors.MustNewCode("service_account_operation_unsupported")
 )
 
 var (
@@ -27,25 +28,31 @@ var (
 	ValidStatus    = []valuer.String{StatusActive, StatusDisabled}
 )
 
+var (
+	serviceAccountNameRegex = regexp.MustCompile("^[a-z-]{1,50}$")
+)
+
 type StorableServiceAccount struct {
 	bun.BaseModel `bun:"table:service_account,alias:service_account"`
 
 	types.Identifiable
 	types.TimeAuditable
-	Name   string        `bun:"name"`
-	Email  string        `bun:"email"`
-	Status valuer.String `bun:"status"`
-	OrgID  string        `bun:"org_id"`
+	Name      string        `bun:"name"`
+	Email     string        `bun:"email"`
+	Status    valuer.String `bun:"status"`
+	OrgID     string        `bun:"org_id"`
+	DeletedAt time.Time     `bun:"deleted_at"`
 }
 
 type ServiceAccount struct {
 	types.Identifiable
 	types.TimeAuditable
-	Name   string        `json:"name" required:"true"`
-	Email  valuer.Email  `json:"email" required:"true"`
-	Roles  []string      `json:"roles" required:"true" nullable:"false"`
-	Status valuer.String `json:"status" required:"true"`
-	OrgID  valuer.UUID   `json:"orgID" required:"true"`
+	Name      string        `json:"name" required:"true"`
+	Email     valuer.Email  `json:"email" required:"true"`
+	Roles     []string      `json:"roles" required:"true" nullable:"false"`
+	Status    valuer.String `json:"status" required:"true"`
+	OrgID     valuer.UUID   `json:"orgId" required:"true"`
+	DeletedAt time.Time     `json:"deletedAt" required:"true"`
 }
 
 type PostableServiceAccount struct {
@@ -73,11 +80,12 @@ func NewServiceAccount(name string, email valuer.Email, roles []string, status v
 			CreatedAt: time.Now(),
 			UpdatedAt: time.Now(),
 		},
-		Name:   name,
-		Email:  email,
-		Roles:  roles,
-		Status: status,
-		OrgID:  orgID,
+		Name:      name,
+		Email:     email,
+		Roles:     roles,
+		Status:    status,
+		OrgID:     orgID,
+		DeletedAt: time.Time{},
 	}
 }
 
@@ -90,6 +98,7 @@ func NewServiceAccountFromStorables(storableServiceAccount *StorableServiceAccou
 		Roles:         roles,
 		Status:        storableServiceAccount.Status,
 		OrgID:         valuer.MustNewUUID(storableServiceAccount.OrgID),
+		DeletedAt:     storableServiceAccount.DeletedAt,
 	}
 }
 
@@ -126,22 +135,46 @@ func NewStorableServiceAccount(serviceAccount *ServiceAccount) *StorableServiceA
 		Email:         serviceAccount.Email.String(),
 		Status:        serviceAccount.Status,
 		OrgID:         serviceAccount.OrgID.String(),
+		DeletedAt:     serviceAccount.DeletedAt,
 	}
 }
 
-func (sa *ServiceAccount) Update(name string, email valuer.Email, roles []string) {
+func (sa *ServiceAccount) Update(name string, email valuer.Email, roles []string) error {
+	if err := sa.ErrIfDisabled(); err != nil {
+		return err
+	}
+
 	sa.Name = name
 	sa.Email = email
 	sa.Roles = roles
 	sa.UpdatedAt = time.Now()
+	return nil
 }
 
-func (sa *ServiceAccount) UpdateStatus(status valuer.String) {
+func (sa *ServiceAccount) UpdateStatus(status valuer.String) error {
+	if err := sa.ErrIfDisabled(); err != nil {
+		return err
+	}
+
 	sa.Status = status
 	sa.UpdatedAt = time.Now()
+	sa.DeletedAt = time.Now()
+	return nil
+}
+
+func (sa *ServiceAccount) ErrIfDisabled() error {
+	if sa.Status == StatusDisabled {
+		return errors.New(errors.TypeUnsupported, ErrCodeServiceAccountOperationUnsupported, "this operation is not supported for disabled service account")
+	}
+
+	return nil
 }
 
 func (sa *ServiceAccount) NewFactorAPIKey(name string, expiresAt uint64) (*FactorAPIKey, error) {
+	if err := sa.ErrIfDisabled(); err != nil {
+		return nil, err
+	}
+
 	key := make([]byte, 32)
 	_, err := rand.Read(key)
 	if err != nil {
@@ -161,7 +194,7 @@ func (sa *ServiceAccount) NewFactorAPIKey(name string, expiresAt uint64) (*Facto
 		Name:             name,
 		Key:              encodedKey,
 		ExpiresAt:        expiresAt,
-		LastUsed:         time.Now(),
+		LastObservedAt:   time.Now(),
 		ServiceAccountID: sa.ID,
 	}, nil
 }
@@ -204,8 +237,8 @@ func (sa *PostableServiceAccount) UnmarshalJSON(data []byte) error {
 		return err
 	}
 
-	if temp.Name == "" {
-		return errors.New(errors.TypeInvalidInput, ErrCodeServiceAccountInvalidInput, "name cannot be empty")
+	if match := serviceAccountNameRegex.MatchString(temp.Name); !match {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeServiceAccountInvalidInput, "name must conform to the regex: %s", serviceAccountNameRegex.String())
 	}
 
 	if len(temp.Roles) == 0 {
@@ -224,8 +257,8 @@ func (sa *UpdatableServiceAccount) UnmarshalJSON(data []byte) error {
 		return err
 	}
 
-	if temp.Name == "" {
-		return errors.New(errors.TypeInvalidInput, ErrCodeServiceAccountInvalidInput, "name cannot be empty")
+	if match := serviceAccountNameRegex.MatchString(temp.Name); !match {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeServiceAccountInvalidInput, "name must conform to the regex: %s", serviceAccountNameRegex.String())
 	}
 
 	if len(temp.Roles) == 0 {
@@ -244,8 +277,8 @@ func (sa *UpdatableServiceAccountStatus) UnmarshalJSON(data []byte) error {
 		return err
 	}
 
-	if !slices.Contains(ValidStatus, temp.Status) {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeServiceAccountInvalidInput, "invalid status: %s, allowed status are: %v", temp.Status, ValidStatus)
+	if temp.Status != StatusDisabled {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeServiceAccountInvalidInput, "invalid status: %s, allowed status are: %v", temp.Status, StatusDisabled)
 	}
 
 	*sa = UpdatableServiceAccountStatus(temp)

pkg/types/serviceaccounttypes/store.go

@@ -10,6 +10,7 @@ type Store interface {
 	// Service Account
 	Create(context.Context, *StorableServiceAccount) error
 	Get(context.Context, valuer.UUID, valuer.UUID) (*StorableServiceAccount, error)
+	GetActiveByOrgIDAndName(context.Context, valuer.UUID, string) (*StorableServiceAccount, error)
 	GetByID(context.Context, valuer.UUID) (*StorableServiceAccount, error)
 	List(context.Context, valuer.UUID) ([]*StorableServiceAccount, error)
 	Update(context.Context, valuer.UUID, *StorableServiceAccount) error