Guard cloud integration dashboard nil pointers

* feat(serviceaccount): domain type changes

* feat(serviceaccount): domain type changes

* feat(serviceaccount): domain type changes

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/package.json

@@ -64,7 +64,7 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "0.0.1",
+    "@signozhq/toggle-group": "^0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",

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/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -224,7 +224,7 @@ describe('TimeSeriesPanel utils', () => {
 			});
 		});
 
-		it('uses DrawStyle.Line and showPoints false when series has multiple valid points', () => {
+		it('uses DrawStyle.Line and VisibilityMode.Never when series has multiple valid points', () => {
 			const apiResponse = createApiResponse([
 				{
 					metric: {},

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

@@ -10,9 +10,9 @@ import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
 	DrawStyle,
-	FillMode,
 	LineInterpolation,
 	LineStyle,
+	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
@@ -124,12 +124,12 @@ export const prepareUPlotConfig = ({
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
-			lineStyle: widget.lineStyle || LineStyle.Solid,
-			lineInterpolation: widget.lineInterpolation || LineInterpolation.Spline,
-			showPoints:
-				widget.showPoints || hasSingleValidPoint ? true : !!widget.showPoints,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: hasSingleValidPoint
+				? VisibilityMode.Always
+				: VisibilityMode.Never,
 			pointSize: 5,
-			fillMode: widget.fillMode || FillMode.None,
 			isDarkMode,
 		});
 	});

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

@@ -2,17 +2,6 @@
 	display: flex;
 	flex-direction: column;
 
-	.section-heading {
-		font-family: 'Space Mono';
-		color: var(--bg-vanilla-400);
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 138.462% */
-		letter-spacing: 0.52px;
-		text-transform: uppercase;
-	}
-
 	.header {
 		display: flex;
 		padding: 14px 14px 14px 12px;
@@ -35,35 +24,86 @@
 			letter-spacing: -0.07px;
 		}
 	}
-	.control-container {
+
+	.name-description {
 		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);
+			font-family: 'Space Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 138.462% */
+			letter-spacing: 0.52px;
+			text-transform: uppercase;
+		}
+
+		.name-input {
+			display: flex;
+			padding: 6px 6px 6px 8px;
+			align-items: center;
+			gap: 4px;
+			flex: 1 0 0;
+			align-self: stretch;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			color: var(--bg-vanilla-100);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 128.571% */
+			letter-spacing: -0.07px;
+		}
+
+		.description-input {
+			border-style: unset;
+			.ant-input {
+				display: flex;
+				height: 80px;
+				padding: 6px 6px 6px 8px;
+				align-items: flex-start;
+				gap: 4px;
+				border-radius: 2px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+				color: var(--bg-vanilla-100);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				letter-spacing: -0.07px;
+			}
+		}
 	}
 
 	.panel-config {
 		display: flex;
 		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		gap: 8px;
+		border-bottom: 1px solid var(--bg-slate-500);
 
-		.toggle-card {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-			padding: 12px;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-400);
-		}
-
-		.toggle-card-text-container {
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
+		.typography {
+			color: var(--bg-vanilla-400);
+			font-family: 'Space Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 138.462% */
+			letter-spacing: 0.52px;
+			text-transform: uppercase;
 		}
 
 		.panel-type-select {
-			width: 100%;
 			.ant-select-selector {
 				display: flex;
 				height: 32px;
@@ -75,32 +115,98 @@
 				border: 1px solid var(--bg-slate-400);
 				background: var(--bg-ink-300);
 			}
+
+			.select-option {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				.icon {
+					display: flex;
+					align-items: center;
+				}
+
+				.display {
+					color: var(--bg-vanilla-100);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 16px; /* 133.333% */
+				}
+			}
 		}
 
-		.toggle-card-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% */
+		.fill-gaps {
+			margin-top: 16px;
+			display: flex;
+			padding: 12px;
+			justify-content: space-between;
+			align-items: center;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
+
+			.fill-gaps-text {
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
+			}
 		}
 
 		.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;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 138.462% */
+			letter-spacing: 0.52px;
+			text-transform: uppercase;
 		}
 
 		.y-axis-unit-selector,
 		.y-axis-unit-selector-v2 {
+			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
 			gap: 8px;
 
 			.heading {
-				@extend .section-heading;
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
 			}
 
 			.input {
@@ -153,6 +259,7 @@
 
 				.text {
 					color: var(--bg-vanilla-400);
+					font-family: 'Space Mono';
 					font-size: 12px;
 					font-style: normal;
 					font-weight: 400;
@@ -171,8 +278,113 @@
 		}
 
 		.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';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
+			}
+		}
+
+		.bucket-config {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.label {
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
+			}
+
+			.bucket-size-label {
+				margin-top: 8px;
+			}
+
+			.bucket-input {
+				display: flex;
+				width: 100%;
+				height: 32px;
+				padding: 6px 6px 6px 8px;
+				align-items: center;
+				gap: 4px;
+				align-self: stretch;
+				border-radius: 2px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+
+				.ant-input {
+					background: var(--bg-ink-300);
+				}
+			}
+
+			.combine-hist {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 8px;
+
+				.label {
+					color: var(--bg-vanilla-400);
+					font-family: 'Space Mono';
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 138.462% */
+					letter-spacing: 0.52px;
+					text-transform: uppercase;
+				}
+			}
+		}
+	}
+
+	.context-links {
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
+	.alerts {
+		display: flex;
+		padding: 12px;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1px solid var(--bg-slate-500);
+		cursor: pointer;
+
+		.left-section {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.bell-icon {
+				color: var(--bg-vanilla-400);
+			}
+
+			.alerts-text {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: 0.14px;
+			}
+		}
+		.plus-icon {
+			color: var(--bg-vanilla-400);
 		}
 	}
 }
@@ -199,16 +411,42 @@
 .lightMode {
 	.right-container {
 		background-color: var(--bg-vanilla-100);
-		.section-heading {
-			color: var(--bg-ink-400);
-		}
 		.header {
 			.header-text {
 				color: var(--bg-ink-400);
 			}
 		}
 
+		.name-description {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.typography {
+				color: var(--bg-ink-400);
+			}
+
+			.name-input {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-300);
+			}
+
+			.description-input {
+				.ant-input {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-300);
+					color: var(--bg-ink-300);
+				}
+			}
+		}
+
 		.panel-config {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.typography {
+				color: var(--bg-ink-400);
+			}
+
 			.panel-type-select {
 				.ant-select-selector {
 					border: 1px solid var(--bg-vanilla-300);
@@ -233,16 +471,28 @@
 				}
 			}
 
-			.toggle-card {
+			.fill-gaps {
 				border: 1px solid var(--bg-vanilla-300);
 				background: var(--bg-vanilla-300);
 
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
-				.toggle-card-description {
+			}
+
+			.bucket-config {
+				.label {
 					color: var(--bg-ink-400);
 				}
+
+				.bucket-input {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-300);
+
+					.ant-input {
+						background: var(--bg-vanilla-300);
+					}
+				}
 			}
 
 			.panel-time-text {
@@ -278,6 +528,27 @@
 				}
 			}
 		}
+
+		.alerts {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.left-section {
+				.bell-icon {
+					color: var(--bg-ink-300);
+				}
+
+				.alerts-text {
+					color: var(--bg-ink-300);
+				}
+			}
+			.plus-icon {
+				color: var(--bg-ink-300);
+			}
+		}
+
+		.context-links {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+		}
 	}
 
 	.select-option {

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

@@ -1,50 +0,0 @@
-.alerts-section {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 12px 12px 32px 12px;
-	min-height: 44px;
-	border-top: 1px solid var(--bg-slate-500);
-	cursor: pointer;
-
-	.alerts-section__left {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		.alerts-section__bell-icon {
-			color: var(--bg-vanilla-400);
-		}
-
-		.alerts-section__text {
-			color: var(--bg-vanilla-400);
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: 0.14px;
-		}
-	}
-	.alerts-section__plus-icon {
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.alerts-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-
-		.alerts-section__left {
-			.alerts-section__bell-icon {
-				color: var(--bg-ink-300);
-			}
-
-			.alerts-section__text {
-				color: var(--bg-ink-300);
-			}
-		}
-		.alerts-section__plus-icon {
-			color: var(--bg-ink-300);
-		}
-	}
-}

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

@@ -1,23 +0,0 @@
-import { Typography } from 'antd';
-import { ConciergeBell, Plus, SquareArrowOutUpRight } from 'lucide-react';
-
-import './AlertsSection.styles.scss';
-
-interface AlertsSectionProps {
-	onCreateAlertsHandler: () => void;
-}
-
-export function AlertsSection({
-	onCreateAlertsHandler,
-}: AlertsSectionProps): JSX.Element {
-	return (
-		<section className="alerts-section" onClick={onCreateAlertsHandler}>
-			<div className="alerts-section__left">
-				<ConciergeBell size={14} className="alerts-section__bell-icon" />
-				<Typography.Text className="alerts-section__text">Alerts</Typography.Text>
-				<SquareArrowOutUpRight size={10} className="info-icon" />
-			</div>
-			<Plus size={14} className="alerts-section__plus-icon" />
-		</section>
-	);
-}

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

@@ -1,98 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Select, Typography } from 'antd';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import { Axis3D, LineChart, Spline } from 'lucide-react';
-
-enum LogScale {
-	LINEAR = 'linear',
-	LOGARITHMIC = 'logarithmic',
-}
-
-const { Option } = Select;
-
-interface AxesSectionProps {
-	allowSoftMinMax: boolean;
-	allowLogScale: boolean;
-	softMin: number | null;
-	softMax: number | null;
-	setSoftMin: Dispatch<SetStateAction<number | null>>;
-	setSoftMax: Dispatch<SetStateAction<number | null>>;
-	isLogScale: boolean;
-	setIsLogScale: Dispatch<SetStateAction<boolean>>;
-}
-
-export function AxesSection({
-	allowSoftMinMax,
-	allowLogScale,
-	softMin,
-	softMax,
-	setSoftMin,
-	setSoftMax,
-	isLogScale,
-	setIsLogScale,
-}: AxesSectionProps): JSX.Element {
-	const softMinHandler = (value: number | null): void => {
-		setSoftMin(value);
-	};
-
-	const softMaxHandler = (value: number | null): void => {
-		setSoftMax(value);
-	};
-
-	return (
-		<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="section-heading">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>
-	);
-}

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

@@ -1,71 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Switch, Typography } from 'antd';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-import { Paintbrush } from 'lucide-react';
-
-import { FillModeSelector } from '../../components/FillModeSelector/FillModeSelector';
-import { LineInterpolationSelector } from '../../components/LineInterpolationSelector/LineInterpolationSelector';
-import { LineStyleSelector } from '../../components/LineStyleSelector/LineStyleSelector';
-
-interface ChartAppearanceSectionProps {
-	fillMode: FillMode;
-	setFillMode: Dispatch<SetStateAction<FillMode>>;
-	lineStyle: LineStyle;
-	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
-	lineInterpolation: LineInterpolation;
-	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
-	showPoints: boolean;
-	setShowPoints: Dispatch<SetStateAction<boolean>>;
-	allowFillMode: boolean;
-	allowLineStyle: boolean;
-	allowLineInterpolation: boolean;
-	allowShowPoints: boolean;
-}
-
-export function ChartAppearanceSection({
-	fillMode,
-	setFillMode,
-	lineStyle,
-	setLineStyle,
-	lineInterpolation,
-	setLineInterpolation,
-	showPoints,
-	setShowPoints,
-	allowFillMode,
-	allowLineStyle,
-	allowLineInterpolation,
-	allowShowPoints,
-}: ChartAppearanceSectionProps): JSX.Element {
-	return (
-		<SettingsSection title="Chart Appearance" icon={<Paintbrush size={14} />}>
-			{allowFillMode && (
-				<FillModeSelector value={fillMode} onChange={setFillMode} />
-			)}
-			{allowLineStyle && (
-				<LineStyleSelector value={lineStyle} onChange={setLineStyle} />
-			)}
-			{allowLineInterpolation && (
-				<LineInterpolationSelector
-					value={lineInterpolation}
-					onChange={setLineInterpolation}
-				/>
-			)}
-			{allowShowPoints && (
-				<section className="show-points toggle-card">
-					<div className="toggle-card-text-container">
-						<Typography.Text className="section-heading">Show points</Typography.Text>
-						<Typography.Text className="toggle-card-description">
-							Display individual data points on the chart
-						</Typography.Text>
-					</div>
-					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

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

@@ -1,10 +0,0 @@
-.context-links-section {
-	padding: 12px 12px 16px 12px;
-	border-bottom: 1px solid var(--bg-slate-500);
-}
-
-.lightMode {
-	.context-links-section {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-	}
-}

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

@@ -1,36 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import { Link as LinkIcon } from 'lucide-react';
-import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-
-import ContextLinks from '../../ContextLinks';
-
-import './ContextLinksSection.styles.scss';
-
-interface ContextLinksSectionProps {
-	contextLinks: ContextLinksData;
-	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
-	selectedWidget?: Widgets;
-}
-
-export function ContextLinksSection({
-	contextLinks,
-	setContextLinks,
-	selectedWidget,
-}: ContextLinksSectionProps): JSX.Element {
-	return (
-		<SettingsSection
-			title="Context Links"
-			icon={<LinkIcon size={14} />}
-			defaultOpen={!!contextLinks.linksData.length}
-		>
-			<div className="context-links-section">
-				<ContextLinks
-					contextLinks={contextLinks}
-					setContextLinks={setContextLinks}
-					selectedWidget={selectedWidget}
-				/>
-			</div>
-		</SettingsSection>
-	);
-}

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

@@ -1,92 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { Select, Typography } from 'antd';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import { PanelDisplay } from 'constants/queryBuilder';
-import { SlidersHorizontal } from 'lucide-react';
-import { ColumnUnit } from 'types/api/dashboard/getAll';
-
-import { ColumnUnitSelector } from '../../ColumnUnitSelector/ColumnUnitSelector';
-import DashboardYAxisUnitSelectorWrapper from '../../DashboardYAxisUnitSelectorWrapper';
-
-interface FormattingUnitsSectionProps {
-	selectedGraphType: PanelDisplay | '';
-	yAxisUnit: string;
-	setYAxisUnit: Dispatch<SetStateAction<string>>;
-	isNewDashboard: boolean;
-	decimalPrecision: PrecisionOption;
-	setDecimalPrecision: Dispatch<SetStateAction<PrecisionOption>>;
-	columnUnits: ColumnUnit;
-	setColumnUnits: Dispatch<SetStateAction<ColumnUnit>>;
-	allowYAxisUnit: boolean;
-	allowDecimalPrecision: boolean;
-	allowPanelColumnPreference: boolean;
-}
-
-export function FormattingUnitsSection({
-	selectedGraphType,
-	yAxisUnit,
-	setYAxisUnit,
-	isNewDashboard,
-	decimalPrecision,
-	setDecimalPrecision,
-	columnUnits,
-	setColumnUnits,
-	allowYAxisUnit,
-	allowDecimalPrecision,
-	allowPanelColumnPreference,
-}: FormattingUnitsSectionProps): JSX.Element {
-	const decimapPrecisionOptions = useMemo(
-		() => [
-			{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
-			{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
-			{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
-			{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
-		],
-		[],
-	);
-	return (
-		<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'
-					}
-					shouldUpdateYAxisUnit={isNewDashboard}
-				/>
-			)}
-
-			{allowDecimalPrecision && (
-				<section className="decimal-precision-selector control-container">
-					<Typography.Text className="section-heading">
-						Decimal Precision
-					</Typography.Text>
-					<Select
-						options={decimapPrecisionOptions}
-						value={decimalPrecision}
-						style={{ width: '100%' }}
-						className="panel-type-select"
-						defaultValue={decimapPrecisionOptions[0]?.value}
-						onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
-					/>
-				</section>
-			)}
-
-			{allowPanelColumnPreference && (
-				<ColumnUnitSelector
-					columnUnits={columnUnits}
-					setColumnUnits={setColumnUnits}
-					isNewDashboard={isNewDashboard}
-				/>
-			)}
-		</SettingsSection>
-	);
-}

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

@@ -1,64 +0,0 @@
-.general-settings__name-description {
-	padding: 0 0 4px 0;
-
-	.general-settings__name-input {
-		display: flex;
-		padding: 6px 6px 6px 8px;
-		align-items: center;
-		gap: 4px;
-		flex: 1 0 0;
-		align-self: stretch;
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-		color: var(--bg-vanilla-100);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-
-	.general-settings__description-input {
-		border-style: unset;
-		.ant-input {
-			display: flex;
-			height: 80px;
-			padding: 6px 6px 6px 8px;
-			align-items: flex-start;
-			gap: 4px;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			color: var(--bg-vanilla-100);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 128.571% */
-			letter-spacing: -0.07px;
-		}
-	}
-}
-
-.lightMode {
-	.general-settings__name-description {
-		border-top: 1px solid var(--bg-vanilla-300);
-		border-bottom: 1px solid var(--bg-vanilla-300);
-
-		.general-settings__name-input {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-300);
-			color: var(--bg-ink-300);
-		}
-
-		.general-settings__description-input {
-			.ant-input {
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-300);
-				color: var(--bg-ink-300);
-			}
-		}
-	}
-}

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

@@ -1,147 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import type { InputRef } from 'antd';
-import { AutoComplete, Input, Typography } from 'antd';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import './GeneralSettingsSection.styles.scss';
-
-const { TextArea } = Input;
-
-interface VariableOption {
-	value: string;
-	label: string;
-}
-
-interface GeneralSettingsSectionProps {
-	title: string;
-	setTitle: Dispatch<SetStateAction<string>>;
-	description: string;
-	setDescription: Dispatch<SetStateAction<string>>;
-	dashboardVariables: Record<string, { name?: string }>;
-}
-
-export function GeneralSettingsSection({
-	title,
-	setTitle,
-	description,
-	setDescription,
-	dashboardVariables,
-}: GeneralSettingsSectionProps): JSX.Element {
-	const [inputValue, setInputValue] = useState(title);
-	const [autoCompleteOpen, setAutoCompleteOpen] = useState(false);
-	const [cursorPos, setCursorPos] = useState(0);
-	const inputRef = useRef<InputRef>(null);
-
-	const onChangeHandler = useCallback(
-		(setFunc: Dispatch<SetStateAction<string>>, value: string) => {
-			setFunc(value);
-		},
-		[],
-	);
-
-	const dashboardVariableOptions = useMemo<VariableOption[]>(() => {
-		return Object.entries(dashboardVariables).map(([, value]) => ({
-			value: value.name || '',
-			label: value.name || '',
-		}));
-	}, [dashboardVariables]);
-
-	const updateCursorAndDropdown = (value: string, pos: number): void => {
-		setCursorPos(pos);
-		const lastDollar = value.lastIndexOf('$', pos - 1);
-		setAutoCompleteOpen(lastDollar !== -1 && pos >= lastDollar + 1);
-	};
-
-	const onInputChange = (value: string): void => {
-		setInputValue(value);
-		onChangeHandler(setTitle, value);
-		setTimeout(() => {
-			const pos = inputRef.current?.input?.selectionStart ?? 0;
-			updateCursorAndDropdown(value, pos);
-		}, 0);
-	};
-
-	const onSelect = (selectedValue: string): void => {
-		const pos = cursorPos;
-		const value = inputValue;
-		const lastDollar = value.lastIndexOf('$', pos - 1);
-		const textBeforeDollar = value.substring(0, lastDollar);
-		const textAfterDollar = value.substring(lastDollar + 1);
-		const match = textAfterDollar.match(/^([a-zA-Z0-9_.]*)/);
-		const rest = textAfterDollar.substring(match ? match[1].length : 0);
-		const newValue = `${textBeforeDollar}$${selectedValue}${rest}`;
-		setInputValue(newValue);
-		onChangeHandler(setTitle, newValue);
-		setAutoCompleteOpen(false);
-		setTimeout(() => {
-			const newCursor = `${textBeforeDollar}$${selectedValue}`.length;
-			inputRef.current?.input?.setSelectionRange(newCursor, newCursor);
-			setCursorPos(newCursor);
-		}, 0);
-	};
-
-	const filterOption = (
-		currentInputValue: string,
-		option?: VariableOption,
-	): boolean => {
-		const pos = cursorPos;
-		const value = currentInputValue;
-		const lastDollar = value.lastIndexOf('$', pos - 1);
-		if (lastDollar === -1) {
-			return false;
-		}
-		const afterDollar = value.substring(lastDollar + 1, pos).toLowerCase();
-		return option?.value.toLowerCase().startsWith(afterDollar) || false;
-	};
-
-	const handleInputCursor = (): void => {
-		const pos = inputRef.current?.input?.selectionStart ?? 0;
-		updateCursorAndDropdown(inputValue, pos);
-	};
-
-	return (
-		<SettingsSection title="General" defaultOpen icon={null}>
-			<section className="general-settings__name-description control-container">
-				<Typography.Text className="section-heading">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="general-settings__name-input"
-						ref={inputRef}
-						onSelect={handleInputCursor}
-						onClick={handleInputCursor}
-						onBlur={(): void => setAutoCompleteOpen(false)}
-					/>
-				</AutoComplete>
-				<Typography.Text className="section-heading">Description</Typography.Text>
-				<TextArea
-					placeholder="Enter the panel description here..."
-					bordered
-					allowClear
-					value={description}
-					onChange={(event): void =>
-						onChangeHandler(setDescription, event.target.value)
-					}
-					rootClassName="general-settings__description-input"
-				/>
-			</section>
-		</SettingsSection>
-	);
-}

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

@@ -1,55 +0,0 @@
-.histogram-settings__bucket-config {
-	.histogram-settings__bucket-size-label {
-		margin-top: 8px;
-	}
-
-	.histogram-settings__bucket-input {
-		display: flex;
-		width: 100%;
-		height: 32px;
-		padding: 6px 6px 6px 8px;
-		align-items: center;
-		gap: 4px;
-		align-self: stretch;
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-
-		.ant-input {
-			background: var(--bg-ink-300);
-		}
-	}
-
-	.histogram-settings__combine-hist {
-		display: flex;
-		justify-content: space-between;
-		margin-top: 8px;
-
-		.histogram-settings__merge-label {
-			color: var(--bg-vanilla-400);
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 138.462% */
-			letter-spacing: 0.52px;
-			text-transform: uppercase;
-		}
-	}
-}
-
-.lightMode {
-	.histogram-settings__bucket-config {
-		.histogram-settings__merge-label {
-			color: var(--bg-ink-400);
-		}
-
-		.histogram-settings__bucket-input {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-300);
-
-			.ant-input {
-				background: var(--bg-vanilla-300);
-			}
-		}
-	}
-}

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

@@ -1,70 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Switch, Typography } from 'antd';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-
-import './HistogramBucketsSection.styles.scss';
-
-interface HistogramBucketsSectionProps {
-	bucketCount: number;
-	setBucketCount: Dispatch<SetStateAction<number>>;
-	bucketWidth: number;
-	setBucketWidth: Dispatch<SetStateAction<number>>;
-	combineHistogram: boolean;
-	setCombineHistogram: Dispatch<SetStateAction<boolean>>;
-}
-
-export function HistogramBucketsSection({
-	bucketCount,
-	setBucketCount,
-	bucketWidth,
-	setBucketWidth,
-	combineHistogram,
-	setCombineHistogram,
-}: HistogramBucketsSectionProps): JSX.Element {
-	return (
-		<SettingsSection title="Histogram / Buckets">
-			<section className="histogram-settings__bucket-config control-container">
-				<Typography.Text className="section-heading">
-					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="section-heading histogram-settings__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="histogram-settings__bucket-input"
-					onChange={(val): void => {
-						setBucketWidth(val || 0);
-					}}
-				/>
-				<section className="histogram-settings__combine-hist">
-					<Typography.Text className="section-heading">
-						<span className="histogram-settings__merge-label">
-							Merge all series into one
-						</span>
-					</Typography.Text>
-					<Switch
-						checked={combineHistogram}
-						size="small"
-						onChange={(checked): void => setCombineHistogram(checked)}
-					/>
-				</section>
-			</section>
-		</SettingsSection>
-	);
-}

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

@@ -1,73 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import type { UseQueryResult } from 'react-query';
-import { Select, Typography } from 'antd';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import { Layers } from 'lucide-react';
-import { SuccessResponse } from 'types/api';
-import { LegendPosition } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import LegendColors from '../../LegendColors/LegendColors';
-
-const { Option } = Select;
-
-interface LegendSectionProps {
-	allowLegendPosition: boolean;
-	allowLegendColors: boolean;
-	legendPosition: LegendPosition;
-	setLegendPosition: Dispatch<SetStateAction<LegendPosition>>;
-	customLegendColors: Record<string, string>;
-	setCustomLegendColors: Dispatch<SetStateAction<Record<string, string>>>;
-	queryResponse?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
-}
-
-export function LegendSection({
-	allowLegendPosition,
-	allowLegendColors,
-	legendPosition,
-	setLegendPosition,
-	customLegendColors,
-	setCustomLegendColors,
-	queryResponse,
-}: LegendSectionProps): JSX.Element {
-	return (
-		<SettingsSection title="Legend" icon={<Layers size={14} />}>
-			{allowLegendPosition && (
-				<section className="legend-position control-container">
-					<Typography.Text className="section-heading">Position</Typography.Text>
-					<Select
-						onChange={(value: LegendPosition): void => setLegendPosition(value)}
-						value={legendPosition}
-						style={{ width: '100%' }}
-						className="panel-type-select"
-						defaultValue={LegendPosition.BOTTOM}
-					>
-						<Option value={LegendPosition.BOTTOM}>
-							<div className="select-option">
-								<Typography.Text className="display">Bottom</Typography.Text>
-							</div>
-						</Option>
-						<Option value={LegendPosition.RIGHT}>
-							<div className="select-option">
-								<Typography.Text className="display">Right</Typography.Text>
-							</div>
-						</Option>
-					</Select>
-				</section>
-			)}
-
-			{allowLegendColors && (
-				<section className="legend-colors">
-					<LegendColors
-						customLegendColors={customLegendColors}
-						setCustomLegendColors={setCustomLegendColors}
-						queryResponse={queryResponse}
-					/>
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

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

@@ -1,10 +0,0 @@
-.thresholds-section {
-	padding: 12px 12px 16px 12px;
-	border-top: 1px solid var(--bg-slate-500);
-}
-
-.lightMode {
-	.thresholds-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-	}
-}

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

@@ -1,42 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Antenna } from 'lucide-react';
-import { ColumnUnit } from 'types/api/dashboard/getAll';
-
-import ThresholdSelector from '../../Threshold/ThresholdSelector';
-import { ThresholdProps } from '../../Threshold/types';
-
-import './ThresholdsSection.styles.scss';
-
-interface ThresholdsSectionProps {
-	thresholds: ThresholdProps[];
-	setThresholds: Dispatch<SetStateAction<ThresholdProps[]>>;
-	yAxisUnit: string;
-	selectedGraph: PANEL_TYPES;
-	columnUnits: ColumnUnit;
-}
-
-export function ThresholdsSection({
-	thresholds,
-	setThresholds,
-	yAxisUnit,
-	selectedGraph,
-	columnUnits,
-}: ThresholdsSectionProps): JSX.Element {
-	return (
-		<SettingsSection
-			title="Thresholds"
-			icon={<Antenna size={14} />}
-			defaultOpen={!!thresholds.length}
-		>
-			<ThresholdSelector
-				thresholds={thresholds}
-				setThresholds={setThresholds}
-				yAxisUnit={yAxisUnit}
-				selectedGraph={selectedGraph}
-				columnUnits={columnUnits}
-			/>
-		</SettingsSection>
-	);
-}

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

@@ -1,129 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Select, Switch, Typography } from 'antd';
-import SettingsSection from 'components/SettingsSection/SettingsSection';
-import TimePreference from 'components/TimePreferenceDropDown';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import GraphTypes, {
-	ItemsProps,
-} from 'container/DashboardContainer/ComponentsSlider/menuItems';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { LayoutDashboard } from 'lucide-react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { timePreferance } from '../../timeItems';
-
-const { Option } = Select;
-
-interface VisualizationSettingsSectionProps {
-	selectedGraph: PANEL_TYPES;
-	setGraphHandler: (type: PANEL_TYPES) => void;
-	selectedTime: timePreferance;
-	setSelectedTime: Dispatch<SetStateAction<timePreferance>>;
-	stackedBarChart: boolean;
-	setStackedBarChart: Dispatch<SetStateAction<boolean>>;
-	isFillSpans: boolean;
-	setIsFillSpans: Dispatch<SetStateAction<boolean>>;
-	allowPanelTimePreference: boolean;
-	allowStackingBarChart: boolean;
-	allowFillSpans: boolean;
-}
-
-export function VisualizationSettingsSection({
-	selectedGraph,
-	setGraphHandler,
-	selectedTime,
-	setSelectedTime,
-	stackedBarChart,
-	setStackedBarChart,
-	isFillSpans,
-	setIsFillSpans,
-	allowPanelTimePreference,
-	allowStackingBarChart,
-	allowFillSpans,
-}: VisualizationSettingsSectionProps): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
-	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
-
-	useEffect(() => {
-		const queryContainsMetricsDataSource = currentQuery.builder.queryData.some(
-			(query) => query.dataSource === DataSource.METRICS,
-		);
-
-		if (queryContainsMetricsDataSource) {
-			setGraphTypes((prev) =>
-				prev.filter((graph) => graph.name !== PANEL_TYPES.LIST),
-			);
-		} else {
-			setGraphTypes(GraphTypes);
-		}
-	}, [currentQuery]);
-
-	return (
-		<SettingsSection
-			title="Visualization"
-			defaultOpen
-			icon={<LayoutDashboard size={14} />}
-		>
-			<section className="panel-type control-container">
-				<Typography.Text className="section-heading">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="section-heading">
-						Panel Time Preference
-					</Typography.Text>
-					<TimePreference
-						{...{
-							selectedTime,
-							setSelectedTime,
-						}}
-					/>
-				</section>
-			)}
-
-			{allowStackingBarChart && (
-				<section className="stack-chart control-container">
-					<Typography.Text className="section-heading">Stack series</Typography.Text>
-					<Switch
-						checked={stackedBarChart}
-						size="small"
-						onChange={(checked): void => setStackedBarChart(checked)}
-					/>
-				</section>
-			)}
-
-			{allowFillSpans && (
-				<section className="fill-gaps toggle-card">
-					<div className="toggle-card-text-container">
-						<Typography className="section-heading">Fill gaps</Typography>
-						<Typography.Text className="toggle-card-description">
-							Fill gaps in data with 0 for continuity
-						</Typography.Text>
-					</div>
-					<Switch
-						checked={isFillSpans}
-						size="small"
-						onChange={(checked): void => setIsFillSpans(checked)}
-					/>
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

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

@@ -6,11 +6,6 @@ import { MemoryRouter } from 'react-router-dom';
 import { render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
@@ -173,14 +168,6 @@ describe('RightContainer - Alerts Section', () => {
 		setContextLinks: jest.fn(),
 		enableDrillDown: false,
 		isNewDashboard: false,
-		lineInterpolation: LineInterpolation.Spline,
-		fillMode: FillMode.None,
-		lineStyle: LineStyle.Solid,
-		setLineInterpolation: jest.fn(),
-		setFillMode: jest.fn(),
-		setLineStyle: jest.fn(),
-		showPoints: false,
-		setShowPoints: jest.fn(),
 	};
 
 	beforeEach(() => {

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

@@ -1,22 +0,0 @@
-.fill-mode-selector {
-	.fill-mode-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.fill-mode-label {
-		text-transform: uppercase;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.fill-mode-selector {
-		.fill-mode-label {
-			color: var(--bg-ink-400);
-		}
-	}
-}
-

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

@@ -1,92 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { FillMode } from 'lib/uPlotV2/config/types';
-
-import './FillModeSelector.styles.scss';
-
-interface FillModeSelectorProps {
-	value: FillMode;
-	onChange: (value: FillMode) => void;
-}
-
-export function FillModeSelector({
-	value,
-	onChange,
-}: FillModeSelectorProps): JSX.Element {
-	return (
-		<section className="fill-mode-selector control-container">
-			<Typography.Text className="fill-mode-label">Fill mode</Typography.Text>
-			<ToggleGroup
-				type="single"
-				value={value}
-				variant="outline"
-				size="lg"
-				onValueChange={(newValue): void => {
-					if (newValue) {
-						onChange(newValue as FillMode);
-					}
-				}}
-			>
-				<ToggleGroupItem value={FillMode.None} aria-label="None" title="None">
-					<svg
-						className="fill-mode-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<rect x="8" y="16" width="32" height="16" stroke="#888" fill="none" />
-					</svg>
-					None
-				</ToggleGroupItem>
-				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid" title="Solid">
-					<svg
-						className="fill-mode-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<rect x="8" y="16" width="32" height="16" fill="#888" />
-					</svg>
-					Solid
-				</ToggleGroupItem>
-				<ToggleGroupItem
-					value={FillMode.Gradient}
-					aria-label="Gradient"
-					title="Gradient"
-				>
-					<svg
-						className="fill-mode-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<defs>
-							<linearGradient id="fill-gradient" x1="0" y1="0" x2="1" y2="0">
-								<stop offset="0%" stopColor="#888" stopOpacity="0.2" />
-								<stop offset="100%" stopColor="#888" stopOpacity="0.8" />
-							</linearGradient>
-						</defs>
-						<rect
-							x="8"
-							y="16"
-							width="32"
-							height="16"
-							fill="url(#fill-gradient)"
-							stroke="#888"
-						/>
-					</svg>
-					Gradient
-				</ToggleGroupItem>
-			</ToggleGroup>
-		</section>
-	);
-}

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

@@ -1,21 +0,0 @@
-.line-interpolation-selector {
-	.line-interpolation-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.line-interpolation-label {
-		text-transform: uppercase;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.line-interpolation-selector {
-		.line-interpolation-label {
-			color: var(--bg-ink-400);
-		}
-	}
-}

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

@@ -1,110 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { LineInterpolation } from 'lib/uPlotV2/config/types';
-
-import './LineInterpolationSelector.styles.scss';
-
-interface LineInterpolationSelectorProps {
-	value: LineInterpolation;
-	onChange: (value: LineInterpolation) => void;
-}
-
-export function LineInterpolationSelector({
-	value,
-	onChange,
-}: LineInterpolationSelectorProps): JSX.Element {
-	return (
-		<section className="line-interpolation-selector control-container">
-			<Typography.Text className="line-interpolation-label">
-				Line interpolation
-			</Typography.Text>
-			<ToggleGroup
-				type="single"
-				value={value}
-				variant="outline"
-				size="lg"
-				onValueChange={(newValue): void => {
-					if (newValue) {
-						onChange(newValue as LineInterpolation);
-					}
-				}}
-			>
-				<ToggleGroupItem
-					value={LineInterpolation.Linear}
-					aria-label="Linear"
-					title="Linear"
-				>
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 L24 16 L40 32" stroke="#888" />
-					</svg>
-				</ToggleGroupItem>
-				<ToggleGroupItem value={LineInterpolation.Spline} aria-label="Spline">
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 C16 8, 32 8, 40 32" />
-					</svg>
-				</ToggleGroupItem>
-				<ToggleGroupItem
-					value={LineInterpolation.StepAfter}
-					aria-label="Step After"
-				>
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 V16 H24 V32 H40" />
-					</svg>
-				</ToggleGroupItem>
-
-				<ToggleGroupItem
-					value={LineInterpolation.StepBefore}
-					aria-label="Step Before"
-				>
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 H24 V16 H40 V32" />
-					</svg>
-				</ToggleGroupItem>
-			</ToggleGroup>
-		</section>
-	);
-}

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

@@ -1,22 +0,0 @@
-.line-style-selector {
-	.line-style-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.line-style-label {
-		text-transform: uppercase;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.line-style-selector {
-		.line-style-label {
-			color: var(--bg-ink-400);
-		}
-	}
-}
-

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

@@ -1,66 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { LineStyle } from 'lib/uPlotV2/config/types';
-
-import './LineStyleSelector.styles.scss';
-
-interface LineStyleSelectorProps {
-	value: LineStyle;
-	onChange: (value: LineStyle) => void;
-}
-
-export function LineStyleSelector({
-	value,
-	onChange,
-}: LineStyleSelectorProps): JSX.Element {
-	return (
-		<section className="line-style-selector control-container">
-			<Typography.Text className="line-style-label">Line style</Typography.Text>
-			<ToggleGroup
-				type="single"
-				value={value}
-				variant="outline"
-				size="lg"
-				onValueChange={(newValue): void => {
-					if (newValue) {
-						onChange(newValue as LineStyle);
-					}
-				}}
-			>
-				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid" title="Solid">
-					<svg
-						className="line-style-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<path d="M8 24 L40 24" />
-					</svg>
-					Solid
-				</ToggleGroupItem>
-				<ToggleGroupItem
-					value={LineStyle.Dashed}
-					aria-label="Dashed"
-					title="Dashed"
-				>
-					<svg
-						className="line-style-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeDasharray="6 4"
-					>
-						<path d="M8 24 L40 24" />
-					</svg>
-					Dashed
-				</ToggleGroupItem>
-			</ToggleGroup>
-		</section>
-	);
-}

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

@@ -206,59 +206,3 @@ export const panelTypeVsDecimalPrecision: {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
-
-export const panelTypeVsLineInterpolation: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;
-
-export const panelTypeVsLineStyle: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;
-
-export const panelTypeVsFillMode: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;
-
-export const panelTypeVsShowPoints: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;

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

@@ -1,16 +1,39 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { UseQueryResult } from 'react-query';
-import { Typography } from 'antd';
-import { PrecisionOption } from 'components/Graph/types';
+import type { InputRef } from 'antd';
+import {
+	AutoComplete,
+	Input,
+	InputNumber,
+	Select,
+	Space,
+	Switch,
+	Typography,
+} from 'antd';
+import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
+import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
-import GraphTypes from 'container/DashboardContainer/ComponentsSlider/menuItems';
+import GraphTypes, {
+	ItemsProps,
+} from 'container/DashboardContainer/ComponentsSlider/menuItems';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
+	ConciergeBell,
+	LineChart,
+	Plus,
+	Spline,
+	SquareArrowOutUpRight,
+} from 'lucide-react';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
@@ -19,55 +42,55 @@ import {
 	Widgets,
 } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { DataSource } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
+import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
 	panelTypeVsContextLinks,
 	panelTypeVsCreateAlert,
 	panelTypeVsDecimalPrecision,
-	panelTypeVsFillMode,
 	panelTypeVsFillSpan,
 	panelTypeVsLegendColors,
 	panelTypeVsLegendPosition,
-	panelTypeVsLineInterpolation,
-	panelTypeVsLineStyle,
 	panelTypeVsLogScale,
 	panelTypeVsPanelTimePreferences,
-	panelTypeVsShowPoints,
 	panelTypeVsSoftMinMax,
 	panelTypeVsStackingChartPreferences,
 	panelTypeVsThreshold,
 	panelTypeVsYAxisUnit,
 } from './constants';
-import { AlertsSection } from './SettingSections/AlertsSection/AlertsSection';
-import { AxesSection } from './SettingSections/AxesSection/AxesSection';
-import { ChartAppearanceSection } from './SettingSections/ChartAppearanceSection/ChartAppearanceSection';
-import { ContextLinksSection } from './SettingSections/ContextLinksSection/ContextLinksSection';
-import { FormattingUnitsSection } from './SettingSections/FormattingUnitsSection/FormattingUnitsSection';
-import { GeneralSettingsSection } from './SettingSections/GeneralSettingsSection/GeneralSettingsSection';
-import { HistogramBucketsSection } from './SettingSections/HistogramBucketsSection/HistogramBucketsSection';
-import { LegendSection } from './SettingSections/LegendSection/LegendSection';
-import { ThresholdsSection } from './SettingSections/ThresholdsSection/ThresholdsSection';
-import { VisualizationSettingsSection } from './SettingSections/VisualizationSettingsSection/VisualizationSettingsSection';
+import ContextLinks from './ContextLinks';
+import DashboardYAxisUnitSelectorWrapper from './DashboardYAxisUnitSelectorWrapper';
+import LegendColors from './LegendColors/LegendColors';
+import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
 import { timePreferance } from './timeItems';
 
 import './RightContainer.styles.scss';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+enum LogScale {
+	LINEAR = 'linear',
+	LOGARITHMIC = 'logarithmic',
+}
+
+interface VariableOption {
+	value: string;
+	label: string;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function RightContainer({
 	description,
 	setDescription,
 	setTitle,
 	title,
 	selectedGraph,
-	lineInterpolation,
-	setLineInterpolation,
-	fillMode,
-	setFillMode,
-	lineStyle,
-	setLineStyle,
-	showPoints,
-	setShowPoints,
 	bucketCount,
 	bucketWidth,
 	stackedBarChart,
@@ -107,9 +130,20 @@ function RightContainer({
 	isNewDashboard,
 }: RightContainerProps): JSX.Element {
 	const { dashboardVariables } = useDashboardVariables();
+	const [inputValue, setInputValue] = useState(title);
+	const [autoCompleteOpen, setAutoCompleteOpen] = useState(false);
+	const [cursorPos, setCursorPos] = useState(0);
+	const inputRef = useRef<InputRef>(null);
 
-	const selectedGraphType = GraphTypes.find((e) => e.name === selectedGraph)
-		?.display as PanelDisplay;
+	const onChangeHandler = useCallback(
+		(setFunc: Dispatch<SetStateAction<string>>, value: string) => {
+			setFunc(value);
+		},
+		[],
+	);
+
+	const selectedGraphType =
+		GraphTypes.find((e) => e.name === selectedGraph)?.display || '';
 
 	const onCreateAlertsHandler = useCreateAlerts(selectedWidget, 'panelView');
 
@@ -133,145 +167,399 @@ function RightContainer({
 		panelTypeVsContextLinks[selectedGraph] && enableDrillDown;
 	const allowDecimalPrecision = panelTypeVsDecimalPrecision[selectedGraph];
 
-	const allowLineInterpolation = panelTypeVsLineInterpolation[selectedGraph];
-	const allowLineStyle = panelTypeVsLineStyle[selectedGraph];
-	const allowFillMode = panelTypeVsFillMode[selectedGraph];
-	const allowShowPoints = panelTypeVsShowPoints[selectedGraph];
+	const { currentQuery } = useQueryBuilder();
 
-	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
-		allowSoftMinMax,
-		allowLogScale,
-	]);
+	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
 
-	const isLegendSectionVisible = useMemo(
-		() => allowLegendPosition || allowLegendColors,
-		[allowLegendPosition, allowLegendColors],
+	const dashboardVariableOptions = useMemo<VariableOption[]>(() => {
+		return Object.entries(dashboardVariables).map(([, value]) => ({
+			value: value.name || '',
+			label: value.name || '',
+		}));
+	}, [dashboardVariables]);
+
+	const updateCursorAndDropdown = (value: string, pos: number): void => {
+		setCursorPos(pos);
+		const lastDollar = value.lastIndexOf('$', pos - 1);
+		setAutoCompleteOpen(lastDollar !== -1 && pos >= lastDollar + 1);
+	};
+
+	const onInputChange = (value: string): void => {
+		setInputValue(value);
+		onChangeHandler(setTitle, value);
+		setTimeout(() => {
+			const pos = inputRef.current?.input?.selectionStart ?? 0;
+			updateCursorAndDropdown(value, pos);
+		}, 0);
+	};
+
+	const handleInputCursor = (): void => {
+		const pos = inputRef.current?.input?.selectionStart ?? 0;
+		updateCursorAndDropdown(inputValue, pos);
+	};
+
+	const onSelect = (selectedValue: string): void => {
+		const pos = cursorPos;
+		const value = inputValue;
+		const lastDollar = value.lastIndexOf('$', pos - 1);
+		const textBeforeDollar = value.substring(0, lastDollar);
+		const textAfterDollar = value.substring(lastDollar + 1);
+		const match = textAfterDollar.match(/^([a-zA-Z0-9_.]*)/);
+		const rest = textAfterDollar.substring(match ? match[1].length : 0);
+		const newValue = `${textBeforeDollar}$${selectedValue}${rest}`;
+		setInputValue(newValue);
+		onChangeHandler(setTitle, newValue);
+		setAutoCompleteOpen(false);
+		setTimeout(() => {
+			const newCursor = `${textBeforeDollar}$${selectedValue}`.length;
+			inputRef.current?.input?.setSelectionRange(newCursor, newCursor);
+			setCursorPos(newCursor);
+		}, 0);
+	};
+
+	const filterOption = (
+		inputValue: string,
+		option?: VariableOption,
+	): boolean => {
+		const pos = cursorPos;
+		const value = inputValue;
+		const lastDollar = value.lastIndexOf('$', pos - 1);
+		if (lastDollar === -1) {
+			return false;
+		}
+		const afterDollar = value.substring(lastDollar + 1, pos).toLowerCase();
+		return option?.value.toLowerCase().startsWith(afterDollar) || false;
+	};
+
+	useEffect(() => {
+		const queryContainsMetricsDataSource = currentQuery.builder.queryData.some(
+			(query) => query.dataSource === DataSource.METRICS,
+		);
+
+		if (queryContainsMetricsDataSource) {
+			setGraphTypes((prev) =>
+				prev.filter((graph) => graph.name !== PANEL_TYPES.LIST),
+			);
+		} else {
+			setGraphTypes(GraphTypes);
+		}
+	}, [currentQuery]);
+
+	const softMinHandler = useCallback(
+		(value: number | null) => {
+			setSoftMin(value);
+		},
+		[setSoftMin],
 	);
 
-	const isChartAppearanceSectionVisible = useMemo(
-		() =>
-			allowFillMode || allowLineStyle || allowLineInterpolation || allowShowPoints,
-		[allowFillMode, allowLineStyle, allowLineInterpolation, allowShowPoints],
+	const softMaxHandler = useCallback(
+		(value: number | null) => {
+			setSoftMax(value);
+		},
+		[setSoftMax],
 	);
 
 	return (
 		<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>
+			<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)}
+					/>
+				</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>
-
-			<GeneralSettingsSection
-				title={title}
-				setTitle={setTitle}
-				description={description}
-				setDescription={setDescription}
-				dashboardVariables={dashboardVariables}
-			/>
-
 			<section className="panel-config">
-				<VisualizationSettingsSection
-					selectedGraph={selectedGraph}
-					setGraphHandler={setGraphHandler}
-					selectedTime={selectedTime}
-					setSelectedTime={setSelectedTime}
-					stackedBarChart={stackedBarChart}
-					setStackedBarChart={setStackedBarChart}
-					isFillSpans={isFillSpans}
-					setIsFillSpans={setIsFillSpans}
-					allowPanelTimePreference={allowPanelTimePreference}
-					allowStackingBarChart={allowStackingBarChart}
-					allowFillSpans={allowFillSpans}
-				/>
+				<Typography.Text className="typography">Panel Type</Typography.Text>
+				<Select
+					onChange={setGraphHandler}
+					value={selectedGraph}
+					style={{ width: '100%' }}
+					className="panel-type-select"
+					data-testid="panel-change-select"
+					data-stacking-state={stackedBarChart ? 'true' : 'false'}
+				>
+					{graphTypes.map((item) => (
+						<Option key={item.name} value={item.name}>
+							<div className="select-option">
+								<div className="icon">{item.icon}</div>
+								<Typography.Text className="display">{item.display}</Typography.Text>
+							</div>
+						</Option>
+					))}
+				</Select>
 
-				<FormattingUnitsSection
-					selectedGraphType={selectedGraphType}
-					yAxisUnit={yAxisUnit}
-					setYAxisUnit={setYAxisUnit}
-					isNewDashboard={isNewDashboard}
-					decimalPrecision={decimalPrecision}
-					setDecimalPrecision={setDecimalPrecision}
-					columnUnits={columnUnits}
-					setColumnUnits={setColumnUnits}
-					allowYAxisUnit={allowYAxisUnit}
-					allowDecimalPrecision={allowDecimalPrecision}
-					allowPanelColumnPreference={allowPanelColumnPreference}
-				/>
+				{allowFillSpans && (
+					<Space className="fill-gaps">
+						<Typography className="fill-gaps-text">Fill gaps</Typography>
+						<Switch
+							checked={isFillSpans}
+							size="small"
+							onChange={(checked): void => setIsFillSpans(checked)}
+						/>
+					</Space>
+				)}
 
-				{isChartAppearanceSectionVisible && (
-					<ChartAppearanceSection
-						fillMode={fillMode}
-						setFillMode={setFillMode}
-						lineStyle={lineStyle}
-						setLineStyle={setLineStyle}
-						lineInterpolation={lineInterpolation}
-						setLineInterpolation={setLineInterpolation}
-						showPoints={showPoints}
-						setShowPoints={setShowPoints}
-						allowFillMode={allowFillMode}
-						allowLineStyle={allowLineStyle}
-						allowLineInterpolation={allowLineInterpolation}
-						allowShowPoints={allowShowPoints}
+				{allowPanelTimePreference && (
+					<>
+						<Typography.Text className="panel-time-text">
+							Panel Time Preference
+						</Typography.Text>
+						<TimePreference
+							{...{
+								selectedTime,
+								setSelectedTime,
+							}}
+						/>
+					</>
+				)}
+
+				{allowPanelColumnPreference && (
+					<ColumnUnitSelector
+						columnUnits={columnUnits}
+						setColumnUnits={setColumnUnits}
+						isNewDashboard={isNewDashboard}
 					/>
 				)}
 
-				{isAxisSectionVisible && (
-					<AxesSection
-						allowSoftMinMax={allowSoftMinMax}
-						allowLogScale={allowLogScale}
-						softMin={softMin}
-						softMax={softMax}
-						setSoftMin={setSoftMin}
-						setSoftMax={setSoftMax}
-						isLogScale={isLogScale}
-						setIsLogScale={setIsLogScale}
+				{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}
 					/>
 				)}
 
-				{isLegendSectionVisible && (
-					<LegendSection
-						allowLegendPosition={allowLegendPosition}
-						allowLegendColors={allowLegendColors}
-						legendPosition={legendPosition}
-						setLegendPosition={setLegendPosition}
-						customLegendColors={customLegendColors}
-						setCustomLegendColors={setCustomLegendColors}
-						queryResponse={queryResponse}
-					/>
+				{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 && (
-					<HistogramBucketsSection
-						bucketCount={bucketCount}
-						setBucketCount={setBucketCount}
-						bucketWidth={bucketWidth}
-						setBucketWidth={setBucketWidth}
-						combineHistogram={combineHistogram}
-						setCombineHistogram={setCombineHistogram}
-					/>
+					<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>
+							<Switch
+								checked={combineHistogram}
+								size="small"
+								onChange={(checked): void => setCombineHistogram(checked)}
+							/>
+						</section>
+					</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>
 
 			{allowCreateAlerts && (
-				<AlertsSection onCreateAlertsHandler={onCreateAlertsHandler} />
+				<section className="alerts" onClick={onCreateAlertsHandler}>
+					<div className="left-section">
+						<ConciergeBell size={14} className="bell-icon" />
+						<Typography.Text className="alerts-text">Alerts</Typography.Text>
+						<SquareArrowOutUpRight size={10} className="info-icon" />
+					</div>
+					<Plus size={14} className="plus-icon" />
+				</section>
 			)}
 
 			{allowContextLinks && (
-				<ContextLinksSection
-					contextLinks={contextLinks}
-					setContextLinks={setContextLinks}
-					selectedWidget={selectedWidget}
-				/>
+				<section className="context-links">
+					<ContextLinks
+						contextLinks={contextLinks}
+						setContextLinks={setContextLinks}
+						selectedWidget={selectedWidget}
+					/>
+				</section>
 			)}
 
 			{allowThreshold && (
-				<ThresholdsSection
-					thresholds={thresholds}
-					setThresholds={setThresholds}
-					yAxisUnit={yAxisUnit}
-					selectedGraph={selectedGraph}
-					columnUnits={columnUnits}
-				/>
+				<section>
+					<ThresholdSelector
+						thresholds={thresholds}
+						setThresholds={setThresholds}
+						yAxisUnit={yAxisUnit}
+						selectedGraph={selectedGraph}
+						columnUnits={columnUnits}
+					/>
+				</section>
 			)}
 		</div>
 	);
@@ -327,14 +615,6 @@ export interface RightContainerProps {
 	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
 	enableDrillDown?: boolean;
 	isNewDashboard: boolean;
-	lineInterpolation: LineInterpolation;
-	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
-	fillMode: FillMode;
-	setFillMode: Dispatch<SetStateAction<FillMode>>;
-	lineStyle: LineStyle;
-	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
-	showPoints: boolean;
-	setShowPoints: Dispatch<SetStateAction<boolean>>;
 }
 
 RightContainer.defaultProps = {

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();
 
@@ -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)

frontend/src/container/NewWidget/index.tsx

@@ -30,11 +30,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
 import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
@@ -216,18 +211,6 @@ function NewWidget({
 	const [legendPosition, setLegendPosition] = useState<LegendPosition>(
 		selectedWidget?.legendPosition || LegendPosition.BOTTOM,
 	);
-	const [lineInterpolation, setLineInterpolation] = useState<LineInterpolation>(
-		selectedWidget?.lineInterpolation || LineInterpolation.Spline,
-	);
-	const [fillMode, setFillMode] = useState<FillMode>(
-		selectedWidget?.fillMode || FillMode.None,
-	);
-	const [lineStyle, setLineStyle] = useState<LineStyle>(
-		selectedWidget?.lineStyle || LineStyle.Solid,
-	);
-	const [showPoints, setShowPoints] = useState<boolean>(
-		selectedWidget?.showPoints ?? false,
-	);
 	const [customLegendColors, setCustomLegendColors] = useState<
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
@@ -293,10 +276,6 @@ function NewWidget({
 				softMin,
 				softMax,
 				fillSpans: isFillSpans,
-				lineInterpolation,
-				fillMode,
-				lineStyle,
-				showPoints,
 				columnUnits,
 				bucketCount,
 				stackedBarChart,
@@ -333,10 +312,6 @@ function NewWidget({
 		stackedBarChart,
 		isLogScale,
 		legendPosition,
-		lineInterpolation,
-		fillMode,
-		lineStyle,
-		showPoints,
 		customLegendColors,
 		columnWidths,
 		contextLinks,
@@ -861,14 +836,6 @@ function NewWidget({
 							setDescription={setDescription}
 							stackedBarChart={stackedBarChart}
 							setStackedBarChart={setStackedBarChart}
-							lineInterpolation={lineInterpolation}
-							setLineInterpolation={setLineInterpolation}
-							fillMode={fillMode}
-							setFillMode={setFillMode}
-							lineStyle={lineStyle}
-							setLineStyle={setLineStyle}
-							showPoints={showPoints}
-							setShowPoints={setShowPoints}
 							opacity={opacity}
 							yAxisUnit={yAxisUnit}
 							columnUnits={columnUnits}

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

@@ -3,15 +3,14 @@ import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
-import { generateGradientFill } from '../utils/generateGradientFill';
 import {
 	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
-	FillMode,
 	LineInterpolation,
 	LineStyle,
 	SeriesProps,
+	VisibilityMode,
 } from './types';
 
 /**
@@ -53,7 +52,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap, fillColor, fillMode } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? DEFAULT_LINE_WIDTH,
@@ -67,19 +66,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			lineConfig.cap = lineCap;
 		}
 
-		const finalFillColor = fillColor ?? resolvedLineColor;
-
-		if (this.props.drawStyle === DrawStyle.Bar) {
-			lineConfig.fill = finalFillColor;
+		if (fillColor) {
+			lineConfig.fill = fillColor;
+		} else if (this.props.drawStyle === DrawStyle.Bar) {
+			lineConfig.fill = resolvedLineColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
-			lineConfig.fill = `${finalFillColor}40`;
-		} else if (fillMode && fillMode !== FillMode.None) {
-			if (fillMode === FillMode.Solid) {
-				lineConfig.fill = finalFillColor;
-			} else if (fillMode === FillMode.Gradient) {
-				lineConfig.fill = (self: uPlot): CanvasGradient =>
-					generateGradientFill(self, finalFillColor, 'rgba(0, 0, 0, 0)');
-			}
+			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
 		return lineConfig;
@@ -167,8 +159,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			pointsConfig.show = pointsBuilder;
 		} else if (drawStyle === DrawStyle.Points) {
 			pointsConfig.show = true;
+		} else if (showPoints === VisibilityMode.Never) {
+			pointsConfig.show = false;
+		} else if (showPoints === VisibilityMode.Always) {
+			pointsConfig.show = true;
 		} else {
-			pointsConfig.show = !!showPoints;
+			pointsConfig.show = false; // default to hidden
 		}
 
 		return pointsConfig;

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

@@ -2,7 +2,12 @@ import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
 import type { SeriesProps } from '../types';
-import { DrawStyle, LineInterpolation, LineStyle } from '../types';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
@@ -163,17 +168,17 @@ describe('UPlotSeriesBuilder', () => {
 		expect(config.points?.show).toBe(pointsBuilder);
 	});
 
-	it('respects showPoints for point visibility when no custom pointsBuilder is given', () => {
+	it('respects VisibilityMode for point visibility when no custom pointsBuilder is given', () => {
 		const neverPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				drawStyle: DrawStyle.Line,
-				showPoints: false,
+				showPoints: VisibilityMode.Never,
 			}),
 		);
 		const alwaysPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				drawStyle: DrawStyle.Line,
-				showPoints: true,
+				showPoints: VisibilityMode.Always,
 			}),
 		);
 

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

@@ -122,6 +122,12 @@ export enum LineInterpolation {
 	StepBefore = 'stepBefore',
 }
 
+export enum VisibilityMode {
+	Always = 'always',
+	Auto = 'auto',
+	Never = 'never',
+}
+
 /**
  * Props for configuring lines
  */
@@ -157,13 +163,7 @@ export interface BarConfig {
 export interface PointsConfig {
 	pointColor?: string;
 	pointSize?: number;
-	showPoints?: boolean;
-}
-
-export enum FillMode {
-	Solid = 'solid',
-	Gradient = 'gradient',
-	None = 'none',
+	showPoints?: VisibilityMode;
 }
 
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
@@ -177,7 +177,6 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	show?: boolean;
 	spanGaps?: boolean;
 	fillColor?: string;
-	fillMode?: FillMode;
 	isDarkMode?: boolean;
 	stepInterval?: number;
 }

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

@@ -1,18 +0,0 @@
-import uPlot from 'uplot';
-
-export function generateGradientFill(
-	uPlotInstance: uPlot,
-	startColor: string,
-	endColor: string,
-): CanvasGradient {
-	const g = uPlotInstance.ctx.createLinearGradient(
-		0,
-		0,
-		0,
-		uPlotInstance.bbox.height,
-	);
-	g.addColorStop(0, startColor);
-	g.addColorStop(0.4, startColor);
-	g.addColorStop(1, endColor);
-	return g;
-}

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

@@ -5,11 +5,6 @@ import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { QueryTableProps } from 'container/QueryTable/QueryTable.intefaces';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { IField } from '../logs/fields';
@@ -137,10 +132,6 @@ export interface IBaseWidget {
 	legendPosition?: LegendPosition;
 	customLegendColors?: Record<string, string>;
 	contextLinks?: ContextLinksData;
-	lineInterpolation?: LineInterpolation;
-	showPoints?: boolean;
-	lineStyle?: LineStyle;
-	fillMode?: FillMode;
 }
 export interface Widgets extends IBaseWidget {
 	query: Query;

frontend/yarn.lock

@@ -5646,7 +5646,7 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/toggle-group@0.0.1":
+"@signozhq/toggle-group@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@signozhq/toggle-group/-/toggle-group-0.0.1.tgz#c82ff1da34e77b24da53c2d595ad6b4a0d1b1de4"
   integrity sha512-871bQayL5MaqsuNOFHKexidu9W2Hlg1y4xmH8C5mGmlfZ4bd0ovJ9OweQrM6Puys3jeMwi69xmJuesYCfKQc1g==

pkg/modules/cloudintegration/cloudintegration.go

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

pkg/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/cloudintegrationtypes/cloudintegration.go

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

pkg/types/cloudintegrationtypes/regions.go

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

pkg/types/cloudintegrationtypes/servicedefinitions.go

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

pkg/types/cloudintegrationtypes/store.go

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

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