feat: improve empty hosts, incorrect metrics and no filter views

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -48,6 +48,8 @@ export interface HostListResponse {
 		records: HostData[];
 		groups: null;
 		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
 	};
 }
 

frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx

@@ -0,0 +1,52 @@
+import { Typography } from 'antd';
+
+export default function HostsEmptyOrIncorrectMetrics({
+	noData,
+	incorrectData,
+}: {
+	noData: boolean;
+	incorrectData: boolean;
+}): JSX.Element {
+	return (
+		<div className="hosts-empty-state-container">
+			<div className="hosts-empty-state-container-content">
+				<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+
+				{noData && (
+					<div className="no-hosts-message">
+						<Typography.Title level={5} className="no-hosts-message-title">
+							No host metrics data received yet.
+						</Typography.Title>
+
+						<Typography.Text className="no-hosts-message-text">
+							Infrastructure monitoring requires the{' '}
+							<a
+								href="https://github.com/open-telemetry/semantic-conventions/blob/main/docs/system/system-metrics.md"
+								target="_blank"
+								rel="noreferrer"
+							>
+								OpenTelemetry system metrics
+							</a>
+							. Please refer to{' '}
+							<a
+								href="https://signoz.io/docs/userguide/hostmetrics"
+								target="_blank"
+								rel="noreferrer"
+							>
+								this
+							</a>{' '}
+							to learn how to send host metrics to SigNoz.
+						</Typography.Text>
+					</div>
+				)}
+
+				{incorrectData && (
+					<Typography.Text className="incorrect-metrics-message">
+						To see host metrics, upgrade to the latest version of SigNoz k8s-infra
+						chart. Please contact support if you need help.
+					</Typography.Text>
+				)}
+			</div>
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -2,6 +2,7 @@ import './InfraMonitoring.styles.scss';
 
 import { LoadingOutlined } from '@ant-design/icons';
 import {
+	Skeleton,
 	Spin,
 	Table,
 	TablePaginationConfig,
@@ -11,15 +12,14 @@ import {
 import { SorterResult } from 'antd/es/table/interface';
 import { HostListPayload } from 'api/infraMonitoring/getHostLists';
 import HostMetricDetail from 'components/HostMetricsDetail';
-import NoLogs from 'container/NoLogs/NoLogs';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import HostsListControls from './HostsListControls';
 import {
 	formatDataForTable,
@@ -28,6 +28,7 @@ import {
 	HostRowData,
 } from './utils';
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function HostsList(): JSX.Element {
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -69,6 +70,16 @@ function HostsList(): JSX.Element {
 		},
 	);
 
+	const sentAnyHostMetricsData = useMemo(
+		() => data?.payload?.data?.sentAnyHostMetricsData || false,
+		[data],
+	);
+
+	const isSendingIncorrectK8SAgentMetrics = useMemo(
+		() => data?.payload?.data?.isSendingK8SAgentMetrics || false,
+		[data],
+	);
+
 	const hostMetricsData = useMemo(() => data?.payload?.data?.records || [], [
 		data,
 	]);
@@ -81,9 +92,6 @@ function HostsList(): JSX.Element {
 
 	const columns = useMemo(() => getHostsListColumns(), []);
 
-	const isDataPresent =
-		!isLoading && !isFetching && !isError && hostMetricsData.length === 0;
-
 	const handleTableChange: TableProps<HostRowData>['onChange'] = useCallback(
 		(
 			pagination: TablePaginationConfig,
@@ -132,23 +140,75 @@ function HostsList(): JSX.Element {
 		setSelectedHostName(null);
 	};
 
+	const showHostsTable =
+		!isError &&
+		sentAnyHostMetricsData &&
+		!isSendingIncorrectK8SAgentMetrics &&
+		!(formattedHostMetricsData.length === 0 && filters.items.length > 0);
+
+	const showNoFilteredHostsMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
+		filters.items.length > 0;
+
+	const showHostsEmptyState =
+		!isFetching &&
+		!isLoading &&
+		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics);
+
 	return (
 		<div className="hosts-list">
 			<HostsListControls handleFiltersChange={handleFiltersChange} />
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
-			{isDataPresent && filters.items.length === 0 && (
-				<NoLogs dataSource={DataSource.METRICS} />
+			{showHostsEmptyState && (
+				<HostsEmptyOrIncorrectMetrics
+					noData={!sentAnyHostMetricsData}
+					incorrectData={isSendingIncorrectK8SAgentMetrics}
+				/>
+			)}
+
+			{showNoFilteredHostsMessage && (
+				<div className="no-filtered-hosts-message-container">
+					<div className="no-filtered-hosts-message-content">
+						<img
+							src="/Icons/emptyState.svg"
+							alt="thinking-emoji"
+							className="empty-state-svg"
+						/>
+
+						<Typography.Text className="no-filtered-hosts-message">
+							This query had no results. Edit your query and try again!
+						</Typography.Text>
+					</div>
+				</div>
 			)}
 
-			{!isFetching &&
-				!isLoading &&
-				formattedHostMetricsData.length === 0 &&
-				filters.items.length > 0 && (
-					<div className="no-hosts-message">No hosts match the applied filters.</div>
-				)}
+			{(isFetching || isLoading) && (
+				<div className="hosts-list-loading-state">
+					<Skeleton.Input
+						className="hosts-list-loading-state-item"
+						size="large"
+						block
+						active
+					/>
+					<Skeleton.Input
+						className="hosts-list-loading-state-item"
+						size="large"
+						block
+						active
+					/>
+					<Skeleton.Input
+						className="hosts-list-loading-state-item"
+						size="large"
+						block
+						active
+					/>
+				</div>
+			)}
 
-			{!isError && (
+			{showHostsTable && (
 				<Table
 					className="hosts-list-table"
 					dataSource={isFetching || isLoading ? [] : formattedHostMetricsData}

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

@@ -10,10 +10,6 @@
 		margin-bottom: 16px;
 	}
 
-	.no-hosts-message {
-		padding: 16px;
-	}
-
 	.hosts-list-controls {
 		padding: 8px;
 
@@ -210,6 +206,68 @@
 	}
 }
 
+.hosts-list-loading-state {
+	padding: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+
+	.hosts-list-loading-state-item {
+		height: 48px;
+		width: 100%;
+	}
+}
+
+.no-filtered-hosts-message-container {
+	height: 30vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	.no-filtered-hosts-message-content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+
+		width: fit-content;
+		padding: 24px;
+	}
+
+	.no-filtered-hosts-message {
+		margin-top: 8px;
+	}
+}
+
+.hosts-empty-state-container {
+	padding: 16px;
+	height: 40vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	.hosts-empty-state-container-content {
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+
+		width: fit-content;
+
+		.no-hosts-message {
+			margin-bottom: 16px;
+
+			.no-hosts-message-title {
+				margin-top: 8px;
+				margin-bottom: 4px;
+			}
+		}
+	}
+}
+
 .lightMode {
 	.infra-monitoring-container {
 		.ant-table-thead > tr > th {

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -16,7 +16,7 @@ export default function NavItem({
 	isActive: boolean;
 	onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }): JSX.Element {
-	const { label, icon, isBeta } = item;
+	const { label, icon, isBeta, isNew } = item;
 
 	return (
 		<div
@@ -36,6 +36,14 @@ export default function NavItem({
 						</Tag>
 					</div>
 				)}
+
+				{isNew && (
+					<div className="nav-item-new">
+						<Tag bordered={false} className="sidenav-new-tag">
+							New
+						</Tag>
+					</div>
+				)}
 			</div>
 		</div>
 	);

frontend/src/container/SideNav/SideNav.styles.scss

@@ -184,10 +184,16 @@
 		display: none;
 	}
 
-	.nav-item-beta {
+	.nav-item-beta,
+	.nav-item-new {
 		display: none;
 	}
 
+	.sidenav-new-tag {
+		background-color: rgba(37, 225, 146, 0.1);
+		color: var(--text-forest-500);
+	}
+
 	&:hover {
 		flex: 0 0 240px;
 		max-width: 240px;
@@ -221,7 +227,8 @@
 			display: block;
 		}
 
-		.nav-item-beta {
+		.nav-item-beta,
+		.nav-item-new {
 			display: block;
 		}
 	}

frontend/src/container/SideNav/menuItems.tsx

@@ -82,6 +82,12 @@ const menuItems: SidebarItem[] = [
 		label: 'Logs',
 		icon: <ScrollText size={16} />,
 	},
+	{
+		key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		label: 'Infra Monitoring',
+		icon: <PackagePlus size={16} />,
+		isNew: true,
+	},
 	{
 		key: ROUTES.ALL_DASHBOARD,
 		label: 'Dashboards',
@@ -91,7 +97,6 @@ const menuItems: SidebarItem[] = [
 		key: ROUTES.MESSAGING_QUEUES,
 		label: 'Messaging Queues',
 		icon: <ListMinus size={16} />,
-		isBeta: true,
 	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,
@@ -119,12 +124,6 @@ const menuItems: SidebarItem[] = [
 		label: 'Billing',
 		icon: <Receipt size={16} />,
 	},
-	{
-		key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		label: 'Infra Monitoring',
-		icon: <PackagePlus size={16} />,
-		isBeta: true,
-	},
 	{
 		key: ROUTES.SETTINGS,
 		label: 'Settings',

frontend/src/container/SideNav/sideNav.types.ts

@@ -13,6 +13,7 @@ export interface SidebarItem {
 	key: string | number;
 	label?: ReactNode;
 	isBeta?: boolean;
+	isNew?: boolean;
 }
 
 export enum SecondaryMenuItemKey {