chore: added frontend changes for properly displaying a - when host name not exists

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -178,7 +178,9 @@ export default function HostsListTable({
 				indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 			}}
 			tableLayout="fixed"
-			rowKey={(record): string => record.hostName}
+			rowKey={(record): string =>
+				(record as HostRowData & { key: string }).key ?? record.hostName
+			}
 			onChange={handleTableChange}
 			onRow={(record): { onClick: () => void; className: string } => ({
 				onClick: (): void => handleRowClick(record),

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -126,7 +126,8 @@
 				background: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value) {
+			.ant-table-cell:has(.hostname-column-value),
+			.ant-table-cell:has(.hostname-cell-missing) {
 				background: var(--bg-ink-400);
 			}
 
@@ -139,6 +140,23 @@
 				letter-spacing: -0.07px;
 			}
 
+			.hostname-cell-missing {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+
+			.hostname-cell-placeholder {
+				color: var(--Vanilla-400, #c0c1c3);
+			}
+
+			.hostname-cell-warning-icon {
+				display: inline-flex;
+				align-items: center;
+				margin-left: 4px;
+				cursor: help;
+			}
+
 			.status-cell {
 				.active-tag {
 					color: var(--bg-forest-500);
@@ -357,7 +375,8 @@
 				color: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value) {
+			.ant-table-cell:has(.hostname-column-value),
+			.ant-table-cell:has(.hostname-cell-missing) {
 				background: var(--bg-vanilla-100);
 			}
 
@@ -365,6 +384,10 @@
 				color: var(--bg-ink-300);
 			}
 
+			.hostname-cell-placeholder {
+				color: var(--text-ink-300);
+			}
+
 			.ant-table-tbody > tr:hover > td {
 				background: rgba(0, 0, 0, 0.04);
 			}

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

@@ -1,13 +1,24 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { HostData, TimeSeries } from 'api/infraMonitoring/getHostLists';
 
-import { formatDataForTable, GetHostsQuickFiltersConfig } from '../utils';
+import {
+	formatDataForTable,
+	GetHostsQuickFiltersConfig,
+	HostnameCell,
+} from '../utils';
 
 const PROGRESS_BAR_CLASS = '.progress-bar';
 
+const emptyTimeSeries: TimeSeries = {
+	labels: {},
+	labelsArray: [],
+	values: [],
+};
+
 describe('InfraMonitoringHosts utils', () => {
 	describe('formatDataForTable', () => {
 		it('should format host data correctly', () => {
-			const mockData = [
+			const mockData: HostData[] = [
 				{
 					hostName: 'test-host',
 					active: true,
@@ -16,8 +27,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.05,
 					load15: 2.5,
 					os: 'linux',
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
 				},
-			] as any;
+			];
 
 			const result = formatDataForTable(mockData);
 
@@ -46,7 +61,7 @@ describe('InfraMonitoringHosts utils', () => {
 		});
 
 		it('should handle inactive hosts', () => {
-			const mockData = [
+			const mockData: HostData[] = [
 				{
 					hostName: 'test-host',
 					active: false,
@@ -55,12 +70,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.02,
 					load15: 1.2,
 					os: 'linux',
-					cpuTimeSeries: [],
-					memoryTimeSeries: [],
-					waitTimeSeries: [],
-					load15TimeSeries: [],
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
 				},
-			] as any;
+			];
 
 			const result = formatDataForTable(mockData);
 
@@ -68,6 +83,65 @@ describe('InfraMonitoringHosts utils', () => {
 			expect(inactiveTag.container.textContent).toBe('INACTIVE');
 			expect(inactiveTag.container.querySelector('.inactive')).toBeTruthy();
 		});
+
+		it('should set hostName to empty string when host has no hostname', () => {
+			const mockData: HostData[] = [
+				{
+					hostName: '',
+					active: true,
+					cpu: 0.5,
+					memory: 0.4,
+					wait: 0.01,
+					load15: 1.0,
+					os: 'linux',
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
+				},
+			];
+
+			const result = formatDataForTable(mockData);
+			expect(result[0].hostName).toBe('');
+			expect(result[0].key).toBe('-0');
+		});
+	});
+
+	describe('HostnameCell', () => {
+		it('should render hostname when present (case A: no icon)', () => {
+			const { container } = render(<HostnameCell hostName="gke-prod-1" />);
+			expect(container.querySelector('.hostname-column-value')).toBeTruthy();
+			expect(container.textContent).toBe('gke-prod-1');
+			expect(container.querySelector('.hostname-cell-missing')).toBeFalsy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeFalsy();
+		});
+
+		it('should render placeholder and icon when hostName is empty (case B)', () => {
+			const { container } = render(<HostnameCell hostName="" />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			const iconWrapper = container.querySelector('.hostname-cell-warning-icon');
+			expect(iconWrapper).toBeTruthy();
+			expect(iconWrapper?.getAttribute('aria-label')).toBe(
+				'Missing host.name metadata',
+			);
+			expect(iconWrapper?.getAttribute('tabindex')).toBe('0');
+			// Tooltip with "Learn how to configure →" link is shown on hover/focus
+		});
+
+		it('should render placeholder and icon when hostName is whitespace only (case C)', () => {
+			const { container } = render(<HostnameCell hostName="   " />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
+
+		it('should render placeholder and icon when hostName is undefined (case D)', () => {
+			const { container } = render(<HostnameCell hostName={undefined} />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag, Tooltip } from 'antd';
+import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
 	HostData,
@@ -14,6 +14,7 @@ import {
 } from 'components/QuickFilters/types';
 import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { TriangleAlert } from 'lucide-react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -24,6 +25,7 @@ import HostsList from './HostsList';
 import './InfraMonitoring.styles.scss';
 
 export interface HostRowData {
+	key?: string;
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -32,6 +34,59 @@ export interface HostRowData {
 	active: React.ReactNode;
 }
 
+const HOSTNAME_DOCS_URL =
+	'https://signoz.io/docs/logs-management/guides/set-resource-attributes-for-logs/';
+
+export function HostnameCell({
+	hostName,
+}: {
+	hostName?: string | null;
+}): React.ReactElement {
+	const isEmpty = !hostName || !hostName.trim();
+	if (!isEmpty) {
+		return <div className="hostname-column-value">{hostName}</div>;
+	}
+	return (
+		<div className="hostname-cell-missing">
+			<Typography.Text type="secondary" className="hostname-cell-placeholder">
+				-
+			</Typography.Text>
+			<Tooltip
+				title={
+					<div>
+						Missing host.name metadata.
+						<br />
+						<a
+							href={HOSTNAME_DOCS_URL}
+							target="_blank"
+							rel="noopener noreferrer"
+							onClick={(e): void => e.stopPropagation()}
+						>
+							Learn how to configure →
+						</a>
+					</div>
+				}
+				trigger={['hover', 'focus']}
+			>
+				<span
+					className="hostname-cell-warning-icon"
+					tabIndex={0}
+					role="img"
+					aria-label="Missing host.name metadata"
+					onClick={(e): void => e.stopPropagation()}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.stopPropagation();
+						}
+					}}
+				>
+					<TriangleAlert size={14} color={Color.BG_CHERRY_500} />
+				</span>
+			</Tooltip>
+		</div>
+	);
+}
+
 export interface HostsListTableProps {
 	isLoading: boolean;
 	isError: boolean;
@@ -75,8 +130,8 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		dataIndex: 'hostName',
 		key: 'hostName',
 		width: 250,
-		render: (value: string): React.ReactNode => (
-			<div className="hostname-column-value">{value}</div>
+		render: (value: string | undefined): React.ReactNode => (
+			<HostnameCell hostName={value ?? ''} />
 		),
 	},
 	{