Merge branch 'main' into feat/infra_disk_usage

conf/example.yaml

@@ -320,4 +320,3 @@ user:
     # The name of the organization to create or look up for the root user.
     org:
       name: default
-      id: 00000000-0000-0000-0000-000000000000

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -39,6 +39,7 @@ export interface HostData {
 	waitTimeSeries: TimeSeries;
 	load15: number;
 	load15TimeSeries: TimeSeries;
+	filesystem: number;
 }
 
 export interface HostListResponse {

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -0,0 +1,26 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -48,7 +48,7 @@
 			.labels-row,
 			.values-row {
 				display: grid;
-				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr 1.5fr;
 				gap: 30px;
 				align-items: center;
 			}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -426,6 +426,12 @@ function HostMetricsDetails({
 								>
 									MEMORY USAGE
 								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									DISK USAGE
+								</Typography.Text>
 							</div>
 
 							<div className="values-row">
@@ -478,6 +484,23 @@ function HostMetricsDetails({
 										className="progress-bar"
 									/>
 								</div>
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.filesystem * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+											if (filesystemPercent >= 90) {
+												return Color.BG_CHERRY_500;
+											}
+											if (filesystemPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
 							</div>
 						</div>
 					</div>

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -11,6 +11,7 @@ import {
 	startCompletion,
 } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
@@ -563,7 +564,15 @@ function QuerySearch({
 		const lastPos = lastPosRef.current;
 
 		if (newPos.line !== lastPos.line || newPos.ch !== lastPos.ch) {
-			setCursorPos(newPos);
+			setCursorPos((lastPos) => {
+				if (newPos.ch !== lastPos.ch && newPos.ch === 0) {
+					Sentry.captureEvent({
+						message: `Cursor jumped to start of line from ${lastPos.ch} to ${newPos.ch}`,
+						level: 'warning',
+					});
+				}
+				return newPos;
+			});
 			lastPosRef.current = newPos;
 
 			if (doc) {

frontend/src/components/ValueGraph/index.tsx

@@ -40,7 +40,6 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
-	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -88,7 +87,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
 
 	return (
 		<div
@@ -156,7 +155,6 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
-	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,10 +1,9 @@
-import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function doesValueSatisfyThreshold(
+function compareThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
-	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -12,14 +11,31 @@ function doesValueSatisfyThreshold(
 	) {
 		return false;
 	}
+	switch (threshold.thresholdOperator) {
+		case '>':
+			return rawValue > threshold.thresholdValue;
+		case '>=':
+			return rawValue >= threshold.thresholdValue;
+		case '<':
+			return rawValue < threshold.thresholdValue;
+		case '<=':
+			return rawValue <= threshold.thresholdValue;
+		case '=':
+			return rawValue === threshold.thresholdValue;
+		default:
+			return false;
+	}
+}
 
-	return evaluateThresholdWithConvertedValue(
-		rawValue,
-		threshold.thresholdValue,
-		threshold.thresholdOperator,
-		threshold.thresholdUnit,
-		yAxisUnit,
-	);
+function extractNumbersFromString(inputString: string): number[] {
+	const regex = /[+-]?\d+(\.\d+)?/g;
+	const matches = inputString.match(regex);
+
+	if (matches) {
+		return matches.map(Number);
+	}
+
+	return [];
 }
 
 function getHighestPrecedenceThreshold(
@@ -44,32 +60,21 @@ function getHighestPrecedenceThreshold(
 	return highestPrecedenceThreshold;
 }
 
-function extractNumbersFromString(inputString: string): number[] {
-	const regex = /[+-]?\d+(\.\d+)?/g;
-	const matches = inputString.match(regex);
-
-	if (matches) {
-		return matches.map(Number);
-	}
-
-	return [];
-}
-
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
-	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
-	const matchingThresholds = thresholds.filter((threshold) => {
-		const numbers = extractNumbersFromString(rawValue.toString());
-		if (numbers.length === 0) {
-			return false;
-		}
-		return doesValueSatisfyThreshold(numbers[0], threshold, yAxisUnit);
-	});
+	const matchingThresholds = thresholds.filter((threshold) =>
+		compareThreshold(
+			extractNumbersFromString(
+				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
+			)[0],
+			threshold,
+		),
+	);
 
 	if (matchingThresholds.length === 0) {
 		return {

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -22,8 +22,6 @@ function YAxisUnitSelector({
 	'data-testid': dataTestId,
 	source,
 	initialValue,
-	categoriesOverride,
-	containerClassName,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
@@ -68,14 +66,10 @@ function YAxisUnitSelector({
 		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
-	const categoriesToRender = useMemo(() => {
-		return categoriesOverride || getYAxisCategories(source);
-	}, [categoriesOverride, source]);
+	const categories = getYAxisCategories(source);
 
 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className="y-axis-unit-selector-component">
 			<Select
 				showSearch
 				value={universalUnit}
@@ -96,7 +90,7 @@ function YAxisUnitSelector({
 				data-testid={dataTestId}
 				allowClear
 			>
-				{categoriesToRender.map((category) => (
+				{categories.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
 							<Select.Option key={unit.id} value={unit.id}>

frontend/src/components/YAxisUnitSelector/__tests__/YAxisUnitSelector.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { YAxisCategoryNames } from '../constants';
-import { UniversalYAxisUnit, YAxisSource } from '../types';
+import { YAxisSource } from '../types';
 import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
@@ -124,34 +123,4 @@ describe('YAxisUnitSelector', () => {
 		const warningIcon = screen.queryByLabelText('warning');
 		expect(warningIcon).not.toBeInTheDocument();
 	});
-
-	it('uses categories override to render custom units', () => {
-		const customCategories = [
-			{
-				name: YAxisCategoryNames.Data,
-				units: [
-					{
-						id: UniversalYAxisUnit.BYTES,
-						name: 'Custom Bytes (B)',
-					},
-				],
-			},
-		];
-
-		render(
-			<YAxisUnitSelector
-				value=""
-				onChange={mockOnChange}
-				source={YAxisSource.ALERTS}
-				categoriesOverride={customCategories}
-			/>,
-		);
-
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
-
-		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
-		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
-	});
 });

frontend/src/components/YAxisUnitSelector/types.ts

@@ -9,8 +9,6 @@ export interface YAxisUnitSelectorProps {
 	'data-testid'?: string;
 	source: YAxisSource;
 	initialValue?: string;
-	categoriesOverride?: YAxisCategory[];
-	containerClassName?: string;
 }
 
 export enum UniversalYAxisUnit {

frontend/src/container/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-export function evaluateThresholdWithConvertedValue(
+function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,7 +99,6 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
-					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -24,6 +24,7 @@ describe('InfraMonitoringHosts utils', () => {
 					active: true,
 					cpu: 0.95,
 					memory: 0.85,
+					filesystem: 0.65,
 					wait: 0.05,
 					load15: 2.5,
 					os: 'linux',
@@ -67,6 +68,7 @@ describe('InfraMonitoringHosts utils', () => {
 					active: false,
 					cpu: 0.3,
 					memory: 0.4,
+					filesystem: 0.2,
 					wait: 0.02,
 					load15: 1.2,
 					os: 'linux',
@@ -91,6 +93,7 @@ describe('InfraMonitoringHosts utils', () => {
 					active: true,
 					cpu: 0.5,
 					memory: 0.4,
+					filesystem: 0.5,
 					wait: 0.01,
 					load15: 1.0,
 					os: 'linux',

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -29,6 +29,7 @@ export interface HostRowData {
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
+	filesystem: React.ReactNode;
 	wait: string;
 	load15: number;
 	active: React.ReactNode;
@@ -163,6 +164,14 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		sorter: true,
 		align: 'right',
 	},
+	{
+		title: <div className="column-header-right">Disk Usage</div>,
+		dataIndex: 'filesystem',
+		key: 'filesystem',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
 	{
 		title: <div className="column-header-right">IOWait</div>,
 		dataIndex: 'wait',
@@ -233,6 +242,26 @@ export const formatDataForTable = (data: HostData[]): HostRowData[] =>
 				/>
 			</div>
 		),
+		filesystem: (
+			<div className="progress-container">
+				<Progress
+					percent={Number((host.filesystem * 100).toFixed(1))}
+					strokeLinecap="butt"
+					size="small"
+					strokeColor={((): string => {
+						const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+						if (filesystemPercent >= 90) {
+							return Color.BG_CHERRY_500;
+						}
+						if (filesystemPercent >= 60) {
+							return Color.BG_AMBER_500;
+						}
+						return Color.BG_FOREST_500;
+					})()}
+					className="progress-bar"
+				/>
+			</div>
+		),
 		wait: `${Number((host.wait * 100).toFixed(1))}%`,
 		load15: host.load15,
 	}));

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1583,6 +1583,8 @@ export const getNodeQueryPayload = (
 	];
 };
 
+// We intentionally set stepInterval to 0 so backend computes the effective step from the selected time range.
+// TODO: Remove stepInterval usage from IBuilderQuery and all places where it is used.
 export const getHostQueryPayload = (
 	hostName: string,
 	start: number,
@@ -1623,6 +1625,9 @@ export const getHostQueryPayload = (
 	const diskPendingKey = dotMetricsEnabled
 		? 'system.disk.pending_operations'
 		: 'system_disk_pending_operations';
+	const fsUsageKey = dotMetricsEnabled
+		? 'system.filesystem.usage'
+		: 'system_filesystem_usage';
 
 	return [
 		{
@@ -1677,7 +1682,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 						{
@@ -1718,7 +1723,7 @@ export const getHostQueryPayload = (
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -1794,7 +1799,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 					],
@@ -1855,7 +1860,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 						{
@@ -1896,7 +1901,7 @@ export const getHostQueryPayload = (
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 						{
@@ -1937,7 +1942,7 @@ export const getHostQueryPayload = (
 							queryName: 'C',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 					],
@@ -2019,7 +2024,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2095,7 +2100,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2171,7 +2176,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2247,7 +2252,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2323,7 +2328,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 					],
@@ -2384,7 +2389,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2466,7 +2471,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2483,6 +2488,143 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'fs_f1',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+									{
+										id: 'fs_f2',
+										key: {
+											dataType: DataTypes.String,
+											id: 'state--string--tag--false',
+
+											key: 'state',
+											type: 'tag',
+										},
+										op: '=',
+										value: 'used',
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 0,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'fs_f3',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 0,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [
+						{
+							disabled: false,
+							expression: 'A/B',
+							legend: '{{mountpoint}}',
+							queryName: 'F1',
+						},
+					],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
 		{
 			selectedTime: 'GLOBAL_TIME',
 			graphType: PANEL_TYPES.TIME_SERIES,
@@ -2541,7 +2683,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'max',
 						},
 					],
@@ -2631,6 +2773,6 @@ export const hostWidgetInfo = [
 	{ title: 'Network connections', yAxisUnit: 'short' },
 	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
+	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'Disk operations time', yAxisUnit: 's' },
 ];

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -87,7 +87,7 @@ function Explorer(): JSX.Element {
 	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
 
 	const unitsLength = useMemo(() => units.length, [units]);
-	const firstUnit = useMemo(() => units[0], [units]);
+	const firstUnit = useMemo(() => units?.[0], [units]);
 
 	useEffect(() => {
 		// Set the y axis unit to the first metric unit if

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,13 +1,8 @@
 import { useMemo } from 'react';
-import { useQueries, useQueryClient } from 'react-query';
+import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { toast } from '@signozhq/sonner';
-import { Button, Tooltip, Typography } from 'antd';
-import {
-	invalidateGetMetricMetadata,
-	useUpdateMetricMetadata,
-} from 'api/generated/services/metrics';
+import { Tooltip, Typography } from 'antd';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
@@ -28,10 +23,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { TimeSeriesProps } from './types';
-import {
-	buildUpdateMetricYAxisUnitPayload,
-	splitQueryIntoOneChartPerQuery,
-} from './utils';
+import { splitQueryIntoOneChartPerQuery } from './utils';
 
 function TimeSeries({
 	showOneChartPerQuery,
@@ -43,7 +35,6 @@ function TimeSeries({
 	yAxisUnit,
 	setYAxisUnit,
 	showYAxisUnitSelector,
-	metrics,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -51,7 +42,6 @@ function TimeSeries({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -148,51 +138,54 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
+	// TODO: Enable once we have resolved all related metrics v2 api issues
 	// Show the save unit button if
 	// 1. There is only one metric
 	// 2. The metric has no saved unit
 	// 3. The user has selected a unit
-	const showSaveUnitButton = useMemo(
-		() =>
-			metricUnits.length === 1 &&
-			Boolean(metrics[0]) &&
-			!metricUnits[0] &&
-			yAxisUnit,
-		[metricUnits, metrics, yAxisUnit],
-	);
+	// const showSaveUnitButton = useMemo(
+	// 	() =>
+	// 		metricUnits.length === 1 &&
+	// 		Boolean(metrics?.[0]) &&
+	// 		!metricUnits[0] &&
+	// 		yAxisUnit,
+	// 	[metricUnits, metrics, yAxisUnit],
+	// );
 
-	const {
-		mutate: updateMetricMetadata,
-		isLoading: isUpdatingMetricMetadata,
-	} = useUpdateMetricMetadata();
+	// const {
+	// 	mutate: updateMetricMetadata,
+	// 	isLoading: isUpdatingMetricMetadata,
+	// } = useUpdateMetricMetadata();
 
-	const handleSaveUnit = (): void => {
-		if (metrics[0] && yAxisUnit) {
-			updateMetricMetadata(
-				{
-					pathParams: {
-						metricName: metricNames[0],
-					},
-					data: buildUpdateMetricYAxisUnitPayload(
-						metricNames[0],
-						metrics[0],
-						yAxisUnit,
-					),
-				},
-				{
-					onSuccess: () => {
-						toast.success('Unit saved successfully');
-						invalidateGetMetricMetadata(queryClient, {
-							metricName: metricNames[0],
-						});
-					},
-					onError: () => {
-						toast.error('Failed to save unit');
-					},
-				},
-			);
-		}
-	};
+	// const handleSaveUnit = (): void => {
+	// 	updateMetricMetadata(
+	// 		{
+	// 			metricName: metricNames[0],
+	// 			payload: {
+	// 				unit: yAxisUnit,
+	// 				description: metrics[0]?.description ?? '',
+	// 				metricType: metrics[0]?.type as MetricType,
+	// 				temporality: metrics[0]?.temporality,
+	// 			},
+	// 		},
+	// 		{
+	// 			onSuccess: () => {
+	// 				notifications.success({
+	// 					message: 'Unit saved successfully',
+	// 				});
+	// 				queryClient.invalidateQueries([
+	// 					REACT_QUERY_KEY.GET_METRIC_DETAILS,
+	// 					metricNames[0],
+	// 				]);
+	// 			},
+	// 			onError: () => {
+	// 				notifications.error({
+	// 					message: 'Failed to save unit',
+	// 				});
+	// 			},
+	// 		},
+	// 	);
+	// };
 
 	return (
 		<>
@@ -205,7 +198,8 @@ function TimeSeries({
 							source={YAxisSource.EXPLORER}
 							data-testid="y-axis-unit-selector"
 						/>
-						{showSaveUnitButton && (
+						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
+						{/* {showSaveUnitButton && (
 							<div className="save-unit-container">
 								<Typography.Text>
 									Save the selected unit for this metric?
@@ -219,7 +213,7 @@ function TimeSeries({
 									<Typography.Paragraph>Yes</Typography.Paragraph>
 								</Button>
 							</div>
-						)}
+						)} */}
 					</>
 				)}
 			</div>

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -3,10 +3,8 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
@@ -16,12 +14,12 @@ import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import * as timezoneHooks from 'providers/Timezone';
 import store from 'store';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import Explorer from '../Explorer';
 import * as useGetMetricsHooks from '../utils';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
 const mockSetSearchParams = jest.fn();
 const queryClient = new QueryClient();
@@ -137,6 +135,14 @@ jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 
 const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
 
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
 function renderExplorer(): void {
 	render(
 		<QueryClientProvider client={queryClient}>
@@ -184,7 +190,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -201,7 +207,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -214,7 +220,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 		});
 
 		renderExplorer();
@@ -231,7 +237,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -244,7 +250,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -263,10 +269,10 @@ describe('Explorer', () => {
 			isError: false,
 			metrics: [
 				{
-					type: MetrictypesTypeDTO.sum,
+					type: MetricType.SUM,
 					description: 'metric1 description',
 					unit: '',
-					temporality: MetrictypesTemporalityDTO.cumulative,
+					temporality: Temporality.CUMULATIVE,
 					isMonotonic: true,
 				},
 			],
@@ -283,7 +289,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 		});
 
 		renderExplorer();
@@ -318,7 +324,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -1,19 +1,29 @@
+import { UseMutationResult } from 'react-query';
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataResponse } from 'api/metricsExplorer/updateMetricMetadata';
+import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { UseUpdateMetricMetadataProps } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
-const mockUpdateMetricMetadata = jest.fn();
-const updateMetricMetadataSpy = jest.spyOn(
-	metricsExplorerHooks,
-	'useUpdateMetricMetadata',
-);
-type UseUpdateMetricMetadataReturnType = ReturnType<
-	typeof metricsExplorerHooks.useUpdateMetricMetadata
+type MockUpdateMetricMetadata = UseMutationResult<
+	SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse,
+	Error,
+	UseUpdateMetricMetadataProps
 >;
+const mockUpdateMetricMetadata = jest.fn();
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue(({
+		mutate: mockUpdateMetricMetadata,
+		isLoading: false,
+	} as Partial<MockUpdateMetricMetadata>) as MockUpdateMetricMetadata);
 
 jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
 	__esModule: true,
@@ -50,6 +60,14 @@ jest.mock('react-redux', () => ({
 	}),
 }));
 
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
 const mockSetWarning = jest.fn();
 const mockSetIsMetricDetailsOpen = jest.fn();
 const mockSetYAxisUnit = jest.fn();
@@ -78,13 +96,6 @@ function renderTimeSeries(
 }
 
 describe('TimeSeries', () => {
-	beforeEach(() => {
-		updateMetricMetadataSpy.mockReturnValue(({
-			mutate: mockUpdateMetricMetadata,
-			isLoading: false,
-		} as Partial<UseUpdateMetricMetadataReturnType>) as UseUpdateMetricMetadataReturnType);
-	});
-
 	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
 		const user = userEvent.setup();
 		const { container } = renderTimeSeries({
@@ -107,7 +118,7 @@ describe('TimeSeries', () => {
 		const { container } = renderTimeSeries({
 			metricUnits: ['', 'count'],
 			metricNames: ['metric1', 'metric2'],
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 			yAxisUnit: 'seconds',
 		});
 
@@ -122,17 +133,18 @@ describe('TimeSeries', () => {
 		);
 	});
 
-	it('shows Save unit button when metric had no unit but one is selected', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
 		const { findByText, getByRole } = renderTimeSeries({
 			metricUnits: [undefined],
 			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		expect(
-			await findByText('Save the selected unit for this metric?'),
+			findByText('Save the selected unit for this metric?'),
 		).toBeInTheDocument();
 
 		const yesButton = getByRole('button', { name: 'Yes' });
@@ -140,25 +152,24 @@ describe('TimeSeries', () => {
 		expect(yesButton).toBeEnabled();
 	});
 
-	it('clicking on save unit button shoould upated metric metadata', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('clicking on save unit button shoould upated metric metadata', () => {
 		const user = userEvent.setup();
 		const { getByRole } = renderTimeSeries({
 			metricUnits: [''],
 			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		const yesButton = getByRole('button', { name: /Yes/i });
-		await user.click(yesButton);
+		user.click(yesButton);
 
 		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
 			{
-				pathParams: {
-					metricName: 'metric1',
-				},
-				data: expect.objectContaining({ unit: 'seconds' }),
+				metricName: 'metric1',
+				payload: expect.objectContaining({ unit: 'seconds' }),
 			},
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/container/MetricsExplorer/Explorer/__tests__/testUtils.ts

@@ -1,13 +0,0 @@
-import {
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export const MOCK_METRIC_METADATA: MetricsexplorertypesMetricMetadataDTO = {
-	type: MetrictypesTypeDTO.sum,
-	description: 'metric1 description',
-	unit: 'metric1 unit',
-	temporality: MetrictypesTemporalityDTO.cumulative,
-	isMonotonic: true,
-};

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -1,8 +1,14 @@
 import { UseQueryResult } from 'react-query';
 import { renderHook } from '@testing-library/react';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import * as useGetMultipleMetricsHook from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	MetricMetadata,
+	MetricMetadataResponse,
+} from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderFormula,
@@ -16,7 +22,6 @@ import {
 	splitQueryIntoOneChartPerQuery,
 	useGetMetrics,
 } from '../utils';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
 const MOCK_QUERY_DATA_1: IBuilderQuery = {
 	...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
@@ -86,19 +91,32 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 	});
 });
 
+const MOCK_METRIC_METADATA: MetricMetadata = {
+	description: 'Metric 1 description',
+	unit: 'unit1',
+	type: MetricType.GAUGE,
+	temporality: Temporality.DELTA,
+	isMonotonic: true,
+};
+
 describe('useGetMetrics', () => {
 	beforeEach(() => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: false,
 					isError: false,
 					data: {
-						data: MOCK_METRIC_METADATA,
-						status: 'success',
+						httpStatusCode: 200,
+						data: {
+							status: 'success',
+							data: MOCK_METRIC_METADATA,
+						},
 					},
-				} as UseQueryResult<GetMetricMetadata200, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 	});
 
@@ -115,11 +133,12 @@ describe('useGetMetrics', () => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: true,
 					isError: false,
-					data: undefined,
-				} as UseQueryResult<GetMetricMetadata200, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 		const { result } = renderHook(() => useGetMetrics(['metric1']));
 		expect(result.current.metrics).toHaveLength(1);

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { RelatedMetric } from 'api/metricsExplorer/getRelatedMetrics';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 export enum ExplorerTabs {
 	TIME_SERIES = 'time-series',
@@ -18,7 +18,7 @@ export interface TimeSeriesProps {
 	isMetricUnitsError: boolean;
 	metricUnits: (string | undefined)[];
 	metricNames: string[];
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 	handleOpenMetricDetails: (metricName: string) => void;
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;

frontend/src/container/MetricsExplorer/Explorer/utils.tsx

@@ -1,12 +1,9 @@
-import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { mapMetricUnitToUniversalUnit } from 'components/YAxisUnitSelector/utils';
 import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { determineIsMonotonic } from '../MetricDetails/utils';
-
 /**
  * Split a query with multiple queryData to multiple distinct queries, each with a single queryData.
  * @param query - The query to split
@@ -71,14 +68,16 @@ export function useGetMetrics(
 ): {
 	isLoading: boolean;
 	isError: boolean;
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 } {
 	const metricsData = useGetMultipleMetrics(metricNames, {
 		enabled: metricNames.length > 0 && isEnabled,
 	});
 	return {
 		isLoading: metricsData.some((metric) => metric.isLoading),
-		metrics: metricsData.map((metric) => metric.data?.data),
+		metrics: metricsData
+			.map((metric) => metric.data?.data)
+			.map((data) => data?.data),
 		isError: metricsData.some((metric) => metric.isError),
 	};
 }
@@ -90,24 +89,9 @@ export function useGetMetrics(
  * @returns The units of the metrics, can be undefined if the metric has no unit
  */
 export function getMetricUnits(
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[],
+	metrics: (MetricMetadata | undefined)[],
 ): (string | undefined)[] {
 	return metrics
 		.map((metric) => metric?.unit)
 		.map((unit) => mapMetricUnitToUniversalUnit(unit) || undefined);
 }
-
-export function buildUpdateMetricYAxisUnitPayload(
-	metricName: string,
-	metric: MetricsexplorertypesMetricMetadataDTO,
-	yAxisUnit: string,
-): UpdateMetricMetadataMutationBody {
-	return {
-		metricName,
-		type: metric.type,
-		description: metric.description,
-		unit: yAxisUnit || '',
-		temporality: metric.temporality,
-		isMonotonic: determineIsMonotonic(metric?.type, metric?.temporality),
-	};
-}

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

@@ -1,131 +0,0 @@
-import { ColorPickerProps } from 'antd';
-import { Color } from 'antd/es/color-picker';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import LegendColors from './LegendColors';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	__esModule: true,
-	useQueryBuilder: (): { currentQuery: unknown } => ({
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						queryName: 'A',
-						legend: '{service.name}',
-					},
-				],
-			},
-		},
-	}),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	return {
-		...actual,
-		ColorPicker: ({ onChange, children }: ColorPickerProps): JSX.Element => (
-			<button
-				type="button"
-				data-testid="legend-color-picker"
-				onClick={(): void =>
-					onChange!({ toHexString: (): string => '#ffffff' } as Color, '#ffffff')
-				}
-			>
-				{children}
-			</button>
-		),
-	};
-});
-
-describe('LegendColors', () => {
-	it('renders legend colors panel and items', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={jest.fn()}
-				queryResponse={undefined}
-			/>,
-		);
-
-		expect(screen.getByText('Legend Colors')).toBeInTheDocument();
-
-		// Expand the collapse to reveal legend items
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		expect(screen.getByText('{service.name}')).toBeInTheDocument();
-	});
-
-	it('calls setCustomLegendColors when color is changed', async () => {
-		const user = userEvent.setup();
-		const setCustomLegendColors = jest.fn();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={setCustomLegendColors}
-				queryResponse={undefined}
-			/>,
-		);
-
-		// Expand to render the mocked ColorPicker button
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		const colorTrigger = screen.getByTestId('legend-color-picker');
-
-		await user.click(colorTrigger);
-
-		expect(setCustomLegendColors).toHaveBeenCalled();
-	});
-
-	it('throttles rapid color changes', async () => {
-		jest.useFakeTimers();
-		const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-		const setCustomLegendColors = jest.fn();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={setCustomLegendColors}
-				queryResponse={undefined}
-			/>,
-		);
-
-		// Expand panel to render the mocked ColorPicker button
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		const colorTrigger = screen.getByTestId('legend-color-picker');
-
-		// Fire multiple rapid changes
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-
-		// Flush pending throttled calls
-		jest.advanceTimersByTime(500);
-
-		// Throttling should ensure we don't invoke the setter once per click
-		expect(setCustomLegendColors).toHaveBeenCalledTimes(2);
-
-		jest.useRealTimers();
-	});
-});

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

@@ -14,7 +14,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import throttle from 'lodash-es/throttle';
 import { Palette } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -96,24 +95,13 @@ function LegendColors({
 		);
 	};
 
-	// Handle color change (throttled to avoid excessive updates)
-	const handleColorChange = useMemo(
-		() =>
-			throttle((label: string, color: string): void => {
-				setCustomLegendColors((prev) => ({
-					...prev,
-					[label]: color,
-				}));
-			}, 200), // 200ms is a good compromise between responsiveness and performance
-		[setCustomLegendColors],
-	);
-
-	// Clean up throttled handler on unmount
-	useEffect(() => {
-		return (): void => {
-			handleColorChange.cancel();
-		};
-	}, [handleColorChange]);
+	// Handle color change
+	const handleColorChange = (label: string, color: string): void => {
+		setCustomLegendColors((prev) => ({
+			...prev,
+			[label]: color,
+		}));
+	};
 
 	// Reset to default color
 	const resetToDefault = (label: string): void => {

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

@@ -169,10 +169,6 @@
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
 
-				.ant-select {
-					width: 100%;
-				}
-
 				.ant-select-selector {
 					border: none;
 					height: unset;

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

@@ -2,9 +2,6 @@
 import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
-import YAxisUnitSelector from 'components/YAxisUnitSelector';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { unitOptions } from 'container/NewWidget/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -207,18 +204,6 @@ function Threshold({
 		return unit !== 'none' && convertUnit(value, unit, toUnitId) === null;
 	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits, unit, value]);
 
-	const unitSelectCategories = useMemo(() => {
-		return unitOptions(
-			selectedGraph === PANEL_TYPES.TABLE
-				? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
-				: yAxisUnit || '',
-		);
-	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits]);
-
-	const unitLabel = useMemo(() => {
-		return Y_AXIS_UNIT_NAMES[unit as keyof typeof Y_AXIS_UNIT_NAMES];
-	}, [unit]);
-
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -328,17 +313,19 @@ function Threshold({
 						<ShowCaseValue value={value} className="unit-input" />
 					)}
 					{isEditMode ? (
-						<YAxisUnitSelector
-							value={unit}
+						<Select
+							defaultValue={unit}
+							options={unitOptions(
+								selectedGraph === PANEL_TYPES.TABLE
+									? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
+									: yAxisUnit || '',
+							)}
 							onChange={handleUnitChange}
-							placeholder="Select unit"
-							source={YAxisSource.DASHBOARDS}
-							initialValue={unit}
-							categoriesOverride={unitSelectCategories}
-							containerClassName="unit-selection"
+							showSearch
+							className="unit-selection"
 						/>
 					) : (
-						<ShowCaseValue value={unitLabel} className="unit-selection-prev" />
+						<ShowCaseValue value={unit} className="unit-selection-prev" />
 					)}
 				</div>
 				<div className="thresholds-color-selector">
@@ -369,10 +356,7 @@ function Threshold({
 					)}
 				</div>
 				{isInvalidUnitComparison && (
-					<Typography.Text
-						className="invalid-unit"
-						data-testid="invalid-unit-comparison"
-					>
+					<Typography.Text className="invalid-unit">
 						Threshold unit ({unit}) is not valid in comparison with the{' '}
 						{selectedGraph === PANEL_TYPES.TABLE ? 'column' : 'y-axis'} unit (
 						{selectedGraph === PANEL_TYPES.TABLE

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

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { render, screen } from 'tests/test-utils';
 
@@ -16,26 +14,12 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 	),
 }));
 
-// Mock the unitOptions function to return YAxisCategory-shaped data
+// Mock the unitOptions function
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
-		{
-			name: 'Mock Category',
-			units: [
-				{
-					id: UniversalYAxisUnit.NONE,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
-				},
-				{
-					id: UniversalYAxisUnit.PERCENT,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
-				},
-				{
-					id: UniversalYAxisUnit.MILLISECONDS,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
-				},
-			],
-		},
+		{ value: 'none', label: 'None' },
+		{ value: '%', label: 'Percent (0 - 100)' },
+		{ value: 'ms', label: 'Milliseconds (ms)' },
 	]),
 }));
 
@@ -44,7 +28,7 @@ const defaultProps = {
 	keyIndex: 0,
 	thresholdOperator: '>' as const,
 	thresholdValue: 50,
-	thresholdUnit: UniversalYAxisUnit.NONE,
+	thresholdUnit: 'none',
 	thresholdColor: 'Red',
 	thresholdFormat: 'Text' as const,
 	isEditEnabled: true,
@@ -54,11 +38,8 @@ const defaultProps = {
 		{ value: 'memory_usage', label: 'Memory Usage' },
 	],
 	thresholdTableOptions: 'cpu_usage',
-	columnUnits: {
-		cpu_usage: UniversalYAxisUnit.PERCENT,
-		memory_usage: UniversalYAxisUnit.BYTES,
-	},
-	yAxisUnit: UniversalYAxisUnit.PERCENT,
+	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
+	yAxisUnit: '%',
 	moveThreshold: jest.fn(),
 };
 
@@ -87,27 +68,28 @@ describe('Threshold Component Unit Validation', () => {
 	it('should show validation error when threshold unit is not "none" and units are incompatible', () => {
 		// Act - Render component with incompatible units (ms vs percent)
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
+			thresholdUnit: 'ms',
 			thresholdValue: 50,
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(ms\) is not valid in comparison with the column unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit matches column unit', () => {
 		// Act - Render component with matching units
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.PERCENT,
+			thresholdUnit: 'percent',
 			thresholdValue: 50,
 		});
 
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
@@ -115,16 +97,17 @@ describe('Threshold Component Unit Validation', () => {
 		// Act - Render component for time series with incompatible units
 		renderThreshold({
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
-			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
+			thresholdUnit: 'ms',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the y-axis unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(ms\) is not valid in comparison with the y-axis unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 
 	it('should not show validation error for time series graph when threshold unit is "none"', () => {
@@ -133,39 +116,43 @@ describe('Threshold Component Unit Validation', () => {
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
 			thresholdUnit: 'none',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
+
+		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit is compatible with column unit', () => {
 		// Act - Render component with compatible units (both in same category - Time)
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.SECONDS,
+			thresholdUnit: 's',
 			thresholdValue: 100,
-			columnUnits: { cpu_usage: UniversalYAxisUnit.MILLISECONDS },
+			columnUnits: { cpu_usage: 'ms' },
 			thresholdTableOptions: 'cpu_usage',
 		});
+
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
 	it('should show validation error when threshold unit is in different category than column unit', () => {
 		// Act - Render component with units from different categories
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.BYTES,
+			thresholdUnit: 'bytes',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.BYTES}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(bytes\) is not valid in comparison with the column unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 });

frontend/src/container/NewWidget/utils.ts

@@ -1,12 +1,9 @@
 import { Layout } from 'react-grid-layout';
+import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
-import {
-	UniversalYAxisUnit,
-	YAxisCategory,
-	YAxisSource,
-} from 'components/YAxisUnitSelector/types';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -609,7 +606,7 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  */
 export const getCategorySelectOptionByName = (
 	name?: YAxisCategoryNames,
-): { name: string; id: UniversalYAxisUnit }[] => {
+): DefaultOptionType[] => {
 	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
 	if (!categories.length) {
 		return [];
@@ -618,8 +615,8 @@ export const getCategorySelectOptionByName = (
 		categories
 			.find((category) => category.name === name)
 			?.units.map((unit) => ({
-				name: unit.name,
-				id: unit.id,
+				label: unit.name,
+				value: unit.id,
 			})) || []
 	);
 };
@@ -631,19 +628,19 @@ export const getCategorySelectOptionByName = (
  * select options. If a valid category is found, it filters the supported categories
  * to return only the options for the matched category.
  */
-export const unitOptions = (columnUnit: string): YAxisCategory[] => {
+export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
 	const category = getCategoryName(columnUnit);
 	if (isEmpty(category)) {
 		return categoryToSupport.map((category) => ({
-			name: category,
-			units: getCategorySelectOptionByName(category),
+			label: category,
+			options: getCategorySelectOptionByName(category),
 		}));
 	}
 	return categoryToSupport
 		.filter((supportedCategory) => supportedCategory === category)
 		.map((filteredCategory) => ({
-			name: filteredCategory,
-			units: getCategorySelectOptionByName(filteredCategory),
+			label: filteredCategory,
+			options: getCategorySelectOptionByName(filteredCategory),
 		}));
 };
 

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -1,37 +1,32 @@
 import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
-import {
-	getGetMetricMetadataQueryKey,
-	getMetricMetadata,
-} from 'api/generated/services/metrics';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
-type QueryResult = UseQueryResult<GetMetricMetadata200, Error>;
+type QueryResult = UseQueryResult<
+	SuccessResponseV2<MetricMetadataResponse>,
+	Error
+>;
 
 type UseGetMultipleMetrics = (
 	metricNames: string[],
-	options?: UseQueryOptions<GetMetricMetadata200, Error>,
+	options?: UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>,
 	headers?: Record<string, string>,
 ) => QueryResult[];
 
 export const useGetMultipleMetrics: UseGetMultipleMetrics = (
 	metricNames,
 	options,
+	headers,
 ) =>
 	useQueries(
 		metricNames.map(
 			(metricName) =>
 				({
-					queryKey: getGetMetricMetadataQueryKey({
-						metricName,
-					}),
-					queryFn: ({ signal }) =>
-						getMetricMetadata(
-							{
-								metricName,
-							},
-							signal,
-						),
+					queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
+					queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
 					...options,
-				} as UseQueryOptions<GetMetricMetadata200, Error>),
+				} as UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>),
 		),
 	);

frontend/src/hooks/useGetYAxisUnit.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { useGetMetrics } from 'container/MetricsExplorer/Explorer/utils';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
@@ -24,13 +24,13 @@ const mockUseGetMetrics = useGetMetrics as jest.MockedFunction<
 
 const MOCK_METRIC_1 = {
 	unit: UniversalYAxisUnit.BYTES,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_2 = {
 	unit: UniversalYAxisUnit.SECONDS,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_3 = {
 	unit: '',
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 
 function createMockCurrentQuery(
 	queryType: EQueryType,

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -1,22 +1,14 @@
 .tooltip-plugin-container {
 	top: 0;
 	left: 0;
-	width: 100%;
 	z-index: 1070;
 	white-space: pre;
 	border-radius: 4px;
 	position: fixed;
 	overflow: auto;
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
-	opacity: 0;
-	pointer-events: none;
 
 	&.pinned {
 		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 	}
-
-	&.visible {
-		opacity: 1;
-		pointer-events: all;
-	}
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -339,9 +339,8 @@ export default function TooltipPlugin({
 			return;
 		}
 		const layout = layoutRef.current;
-		layout.observer.disconnect();
-
 		if (containerRef.current) {
+			layout.observer.disconnect();
 			layout.observer.observe(containerRef.current);
 			const { width, height } = containerRef.current.getBoundingClientRect();
 			layout.width = width;
@@ -352,28 +351,24 @@ export default function TooltipPlugin({
 		}
 	}, [isHovering, plot]);
 
-	if (!plot) {
+	if (!plot || !isHovering) {
 		return null;
 	}
 
 	return createPortal(
 		<div
-			className={cx('tooltip-plugin-container', {
-				pinned: isPinned,
-				visible: isHovering,
-			})}
+			className={cx('tooltip-plugin-container', { pinned: isPinned })}
 			style={{
 				...style,
 				maxWidth: `${maxWidth}px`,
 				maxHeight: `${maxHeight}px`,
+				width: '100%',
 			}}
 			aria-live="polite"
 			aria-atomic="true"
-			aria-hidden={!isHovering}
 			ref={containerRef}
-			data-testid="tooltip-plugin-container"
 		>
-			{isHovering ? contents : null}
+			{contents}
 		</div>,
 		portalRoot.current,
 	);

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -187,7 +187,9 @@ describe('TooltipPlugin', () => {
 				canPinTooltip: true,
 			});
 
-			const container = screen.getByTestId('tooltip-plugin-container');
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
 			expect(container.classList.contains('pinned')).toBe(false);
 
 			act(() => {
@@ -195,9 +197,11 @@ describe('TooltipPlugin', () => {
 			});
 
 			return waitFor(() => {
-				const updated = screen.getByTestId('tooltip-plugin-container');
-				expect(updated).toBeInTheDocument();
-				expect(updated.classList.contains('pinned')).toBe(true);
+				const updated = document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement | null;
+				expect(updated).not.toBeNull();
+				expect(updated?.classList.contains('pinned')).toBe(true);
 			});
 		});
 
@@ -245,13 +249,7 @@ describe('TooltipPlugin', () => {
 			await user.click(button);
 
 			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-				expect(container.textContent).toBe('');
+				expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 			});
 		});
 
@@ -294,16 +292,12 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container).toBeInTheDocument();
-			expect(container.getAttribute('aria-hidden')).toBe('true');
-			expect(container.classList.contains('visible')).toBe(false);
-			expect(container.classList.contains('pinned')).toBe(false);
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip on outside mousedown', async () => {
+		it('unpins the tooltip on outside mousedown', () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -341,19 +335,12 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip on outside keydown', async () => {
+		it('unpins the tooltip on outside keydown', () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -393,13 +380,7 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});

pkg/modules/user/config.go

@@ -22,8 +22,7 @@ type RootConfig struct {
 }
 
 type OrgConfig struct {
-	ID   valuer.UUID `mapstructure:"id"`
-	Name string      `mapstructure:"name"`
+	Name string `mapstructure:"name"`
 }
 
 type PasswordConfig struct {

pkg/modules/user/impluser/service.go

@@ -78,43 +78,6 @@ func (s *service) Stop(ctx context.Context) error {
 }
 
 func (s *service) reconcile(ctx context.Context) error {
-	if !s.config.Org.ID.IsZero() {
-		return s.reconcileWithOrgID(ctx)
-	}
-
-	return s.reconcileByName(ctx)
-}
-
-func (s *service) reconcileWithOrgID(ctx context.Context) error {
-	org, err := s.orgGetter.Get(ctx, s.config.Org.ID)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return err // something really went wrong
-		}
-
-		// org was not found using id check if we can find an org using name
-
-		existingOrgByName, nameErr := s.orgGetter.GetByName(ctx, s.config.Org.Name)
-		if nameErr != nil && !errors.Ast(nameErr, errors.TypeNotFound) {
-			return nameErr // something really went wrong
-		}
-
-		// we found an org using name
-		if existingOrgByName != nil {
-			// the existing org has the same name as config but org id is different inform user with actionable message
-			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "organization with name %q already exists with a different ID %s (expected %s)", s.config.Org.Name, existingOrgByName.ID.StringValue(), s.config.Org.ID.StringValue())
-		}
-
-		// default - we did not found any org using id and name both - create a new org
-		newOrg := types.NewOrganizationWithID(s.config.Org.ID, s.config.Org.Name, s.config.Org.Name)
-		_, err = s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
-		return err
-	}
-
-	return s.reconcileRootUser(ctx, org.ID)
-}
-
-func (s *service) reconcileByName(ctx context.Context) error {
 	org, err := s.orgGetter.GetByName(ctx, s.config.Org.Name)
 	if err != nil {
 		if errors.Ast(err, errors.TypeNotFound) {

pkg/query-service/app/clickhouseReader/reader.go

@@ -5419,7 +5419,7 @@ func (r *ClickHouseReader) ListSummaryMetrics(ctx context.Context, orgID valuer.
 		    t.metric_name AS metric_name,
 		    ANY_VALUE(t.description) AS description,
 		    ANY_VALUE(t.type) AS metric_type,
-		    argMax(t.unit, unix_milli) AS metric_unit,
+		    ANY_VALUE(t.unit) AS metric_unit,
 		    uniq(t.fingerprint) AS timeseries,
 			uniq(metric_name) OVER() AS total
 		FROM %s.%s AS t

pkg/query-service/app/inframetrics/common.go

@@ -10,6 +10,7 @@ import (
 )
 
 var dotMetricMap = map[string]string{
+	"system_filesystem_usage":               "system.filesystem.usage",
 	"system_cpu_time":                       "system.cpu.time",
 	"system_memory_usage":                   "system.memory.usage",
 	"system_cpu_load_average_15m":           "system.cpu.load_average.15m",

pkg/query-service/app/inframetrics/hosts.go

@@ -53,10 +53,11 @@ var (
 	}
 
 	queryNamesForTopHosts = map[string][]string{
-		"cpu":    {"A", "B", "F1"},
-		"memory": {"C", "D", "F2"},
-		"wait":   {"E", "F", "F3"},
-		"load15": {"G"},
+		"cpu":        {"A", "B", "F1"},
+		"memory":     {"C", "D", "F2"},
+		"wait":       {"E", "F", "F3"},
+		"load15":     {"G"},
+		"filesystem": {"H", "I", "F4"},
 	}
 
 	// TODO(srikanthccv): remove hardcoded metric name and support keys from any system metric
@@ -67,10 +68,11 @@ var (
 		GetDotMetrics("os_type"),
 	}
 	metricNamesForHosts = map[string]string{
-		"cpu":    GetDotMetrics("system_cpu_time"),
-		"memory": GetDotMetrics("system_memory_usage"),
-		"load15": GetDotMetrics("system_cpu_load_average_15m"),
-		"wait":   GetDotMetrics("system_cpu_time"),
+		"cpu":        GetDotMetrics("system_cpu_time"),
+		"memory":     GetDotMetrics("system_memory_usage"),
+		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
+		"wait":       GetDotMetrics("system_cpu_time"),
+		"filesystem": GetDotMetrics("system_filesystem_usage"),
 	}
 )
 
@@ -494,10 +496,11 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 	for _, result := range formattedResponse {
 		for _, row := range result.Table.Rows {
 			record := model.HostListRecord{
-				CPU:    -1,
-				Memory: -1,
-				Wait:   -1,
-				Load15: -1,
+				CPU:        -1,
+				Memory:     -1,
+				Wait:       -1,
+				Load15:     -1,
+				Filesystem: -1,
 			}
 
 			if hostName, ok := row.Data[hostNameAttrKey].(string); ok {
@@ -516,6 +519,9 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 			if load15, ok := row.Data["G"].(float64); ok {
 				record.Load15 = load15
 			}
+			if filesystem, ok := row.Data["F4"].(float64); ok {
+				record.Filesystem = filesystem
+			}
 			record.Meta = map[string]string{}
 			if _, ok := hostAttrs[record.HostName]; ok {
 				record.Meta = hostAttrs[record.HostName]

pkg/query-service/app/inframetrics/hosts_query.go

@@ -269,42 +269,130 @@ var HostsTableListQuery = v3.QueryRangeParamsV3{
 					Items:    []v3.FilterItem{},
 				},
 			},
-			"G": {
-				QueryName:  "G",
-				DataSource: v3.DataSourceMetrics,
-				AggregateAttribute: v3.AttributeKey{
-					Key:      metricNamesForHosts["load15"],
-					DataType: v3.AttributeKeyDataTypeFloat64,
-				},
-				Temporality: v3.Unspecified,
-				Filters: &v3.FilterSet{
-					Operator: "AND",
-					Items: []v3.FilterItem{
-						{
-							Key: v3.AttributeKey{
-								Key:      hostNameAttrKey,
-								DataType: v3.AttributeKeyDataTypeString,
-								Type:     v3.AttributeKeyTypeResource,
-							},
-							Operator: v3.FilterOperatorNotContains,
-							Value:    agentNameToIgnore,
-						},
-					},
-				},
-				GroupBy: []v3.AttributeKey{
-					{
-						Key:      hostNameAttrKey,
-						DataType: v3.AttributeKeyDataTypeString,
-						Type:     v3.AttributeKeyTypeResource,
-					},
-				},
-				Expression:       "G",
-				ReduceTo:         v3.ReduceToOperatorAvg,
-				TimeAggregation:  v3.TimeAggregationAvg,
-				SpaceAggregation: v3.SpaceAggregationSum,
-				Disabled:         false,
-				Legend:           "CPU Load Average (15m)",
+		"G": {
+			QueryName:  "G",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["load15"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
 			},
+			Temporality: v3.Unspecified,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "G",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         false,
+			Legend:           "CPU Load Average (15m)",
+		},
+		"H": {
+			QueryName:  "H",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["filesystem"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
+			},
+			Temporality: v3.Cumulative,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      "state",
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeTag,
+						},
+						Operator: v3.FilterOperatorEqual,
+						Value:    "used",
+					},
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "H",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         true,
+		},
+		"I": {
+			QueryName:  "I",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["filesystem"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
+			},
+			Temporality: v3.Cumulative,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "I",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         true,
+		},
+		"F4": {
+			QueryName:  "F4",
+			Expression: "H/I",
+			Legend:     "Disk Usage (%)",
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items:    []v3.FilterItem{},
+			},
+		},
 		},
 		PanelType: v3.PanelTypeTable,
 		QueryType: v3.QueryTypeBuilder,

pkg/query-service/model/infra.go

@@ -26,14 +26,15 @@ type HostListRequest struct {
 }
 
 type HostListRecord struct {
-	HostName string            `json:"hostName"`
-	Active   bool              `json:"active"`
-	OS       string            `json:"os"`
-	CPU      float64           `json:"cpu"`
-	Memory   float64           `json:"memory"`
-	Wait     float64           `json:"wait"`
-	Load15   float64           `json:"load15"`
-	Meta     map[string]string `json:"meta"`
+	HostName   string            `json:"hostName"`
+	Active     bool              `json:"active"`
+	OS         string            `json:"os"`
+	CPU        float64           `json:"cpu"`
+	Memory     float64           `json:"memory"`
+	Wait       float64           `json:"wait"`
+	Load15     float64           `json:"load15"`
+	Filesystem float64           `json:"filesystem"`
+	Meta       map[string]string `json:"meta"`
 }
 
 type HostListResponse struct {
@@ -64,6 +65,10 @@ func (r *HostListResponse) SortBy(orderBy *v3.OrderBy) {
 		sort.Slice(r.Records, func(i, j int) bool {
 			return r.Records[i].Wait > r.Records[j].Wait
 		})
+	case "filesystem":
+		sort.Slice(r.Records, func(i, j int) bool {
+			return r.Records[i].Filesystem > r.Records[j].Filesystem
+		})
 	}
 	// the default is descending
 	if orderBy.Order == v3.DirectionAsc {

pkg/types/organization.go

@@ -41,21 +41,6 @@ func NewOrganization(displayName string, name string) *Organization {
 	}
 }
 
-func NewOrganizationWithID(id valuer.UUID, displayName string, name string) *Organization {
-	return &Organization{
-		Identifiable: Identifiable{
-			ID: id,
-		},
-		TimeAuditable: TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-		Name:        name,
-		DisplayName: displayName,
-		Key:         NewOrganizationKey(id),
-	}
-}
-
 func NewOrganizationKey(orgID valuer.UUID) uint32 {
 	hasher := fnv.New32a()