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

frontend/public/locales/en-GB/infraMonitoring.json

@@ -2,6 +2,7 @@
 	"containers_visualization_message": "The ability to visualise containers is in active development and should be available to you soon.",
 	"processes_visualization_message": "The ability to visualise processes is in active development and should be available to you soon.",
 	"working_message": "We're working to extend infrastructure monitoring to take care of a bunch of different cases. Thank you for your patience.",
-	"waitlist_message": "Join the waitlist for early access or contact support.",
+	"waitlist_message": "Join the waitlist for early access.",
+	"waitlist_success_message": "We have received your request for early access. We will get back to you as soon as we launch the feature.",
 	"contact_support": "Contact Support"
 }

frontend/public/locales/en/infraMonitoring.json

@@ -2,6 +2,7 @@
 	"containers_visualization_message": "The ability to visualise containers is in active development and should be available to you soon.",
 	"processes_visualization_message": "The ability to visualise processes is in active development and should be available to you soon.",
 	"working_message": "We're working to extend infrastructure monitoring to take care of a bunch of different cases. Thank you for your patience.",
-	"waitlist_message": "Join the waitlist for early access or contact support.",
+	"waitlist_message": "Join the waitlist for early access.",
+	"waitlist_success_message": "We have received your request for early access. We will get back to you as soon as we launch the feature.",
 	"contact_support": "Contact Support"
 }

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/components/HostMetricsDetail/Containers/Containers.styles.scss

@@ -1,7 +1,24 @@
 .host-containers {
-	max-width: 600px;
-	margin: 150px auto;
-	padding: 0 16px;
+	gap: 24px;
+	height: 60vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	margin: 0 auto;
+	box-sizing: border-box;
+
+	.infra-container-card-container {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.dev-status-container {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
 
 	.infra-container-card {
 		display: flex;
@@ -17,6 +34,7 @@
 		width: 400px;
 		font-family: 'Inter';
 		margin-top: 12px;
+		font-weight: 300;
 	}
 
 	.infra-container-working-msg {

frontend/src/components/HostMetricsDetail/Containers/Containers.tsx

@@ -3,31 +3,39 @@ import './Containers.styles.scss';
 import { Space, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
 
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
 const { Text } = Typography;
 
 function Containers(): JSX.Element {
 	const { t } = useTranslation(['infraMonitoring']);
 
 	return (
 		<Space direction="vertical" className="host-containers" size={24}>
-			<div className="infra-container-card">
-				<img
-					src="/Icons/infraContainers.svg"
-					alt="infra-container"
-					width={32}
-					height={32}
-				/>
-
-				<Text className="infra-container-card-text">
-					{t('containers_visualization_message')}
-				</Text>
-			</div>
+			<div className="infra-container-card-container">
+				<div className="dev-status-container">
+					<div className="infra-container-card">
+						<img
+							src="/Icons/infraContainers.svg"
+							alt="infra-container"
+							width={32}
+							height={32}
+						/>
+
+						<Text className="infra-container-card-text">
+							{t('containers_visualization_message')}
+						</Text>
+					</div>
+
+					<div className="infra-container-working-msg">
+						<Space>
+							<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
+							<Text className="infra-container-card-text">{t('working_message')}</Text>
+						</Space>
+					</div>
+				</div>
 
-			<div className="infra-container-working-msg">
-				<Space>
-					<img src="/Icons/broom.svg" alt="broom" width={16} height={16} />
-					<Text className="infra-container-card-text">{t('working_message')}</Text>
-				</Space>
+				<WaitlistFragment entityType="containers" />
 			</div>
 		</Space>
 	);

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -11,6 +11,7 @@ import {
 	Typography,
 } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -118,6 +119,13 @@ function HostMetricsDetails({
 		initialFilters,
 	);
 
+	useEffect(() => {
+		logEvent('Infra Monitoring: Hosts list details page visited', {
+			host: host?.hostName,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	useEffect(() => {
 		setLogFilters(initialFilters);
 		setTracesFilters(initialFilters);
@@ -143,6 +151,7 @@ function HostMetricsDetails({
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
 			setSelectedInterval(interval as Time);
+
 			if (interval === 'custom' && dateTimeRange) {
 				setModalTimeRange({
 					startTime: Math.floor(dateTimeRange[0] / 1000),
@@ -156,7 +165,13 @@ function HostMetricsDetails({
 					endTime: Math.floor(maxTime / 1000000000),
 				});
 			}
+
+			logEvent('Infra Monitoring: Hosts list details time updated', {
+				host: host?.hostName,
+				interval,
+			});
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[],
 	);
 
@@ -171,6 +186,10 @@ function HostMetricsDetails({
 					(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
 				);
 
+				logEvent('Infra Monitoring: Hosts list details logs filters applied', {
+					host: host?.hostName,
+				});
+
 				return {
 					op: 'AND',
 					items: [
@@ -181,6 +200,7 @@ function HostMetricsDetails({
 				};
 			});
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[],
 	);
 
@@ -190,6 +210,11 @@ function HostMetricsDetails({
 				const hostNameFilter = prevFilters.items.find(
 					(item) => item.key?.key === 'host.name',
 				);
+
+				logEvent('Infra Monitoring: Hosts list details traces filters applied', {
+					host: host?.hostName,
+				});
+
 				return {
 					op: 'AND',
 					items: [
@@ -199,6 +224,7 @@ function HostMetricsDetails({
 				};
 			});
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[],
 	);
 
@@ -211,6 +237,11 @@ function HostMetricsDetails({
 			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
 		}
 
+		logEvent('Infra Monitoring: Hosts list details explore clicked', {
+			host: host?.hostName,
+			view: selectedView,
+		});
+
 		if (selectedView === VIEW_TYPES.LOGS) {
 			const filtersWithoutPagination = {
 				...logFilters,

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

@@ -1,7 +1,24 @@
 .host-processes {
-	max-width: 600px;
-	margin: 150px auto;
-	padding: 0 16px;
+	gap: 24px;
+	height: 60vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	margin: 0 auto;
+	box-sizing: border-box;
+
+	.infra-container-card-container {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.dev-status-container {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
 
 	.infra-container-card {
 		display: flex;
@@ -17,6 +34,7 @@
 		width: 400px;
 		font-family: 'Inter';
 		margin-top: 12px;
+		font-weight: 300;
 	}
 
 	.infra-container-working-msg {

frontend/src/components/HostMetricsDetail/Processes/Processes.tsx

@@ -3,30 +3,38 @@ import './Processes.styles.scss';
 import { Space, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
 
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
 const { Text } = Typography;
 
 function Processes(): JSX.Element {
 	const { t } = useTranslation(['infraMonitoring']);
 
 	return (
 		<Space direction="vertical" className="host-processes" size={24}>
-			<div className="infra-container-card">
-				<img
-					src="/Icons/infraContainers.svg"
-					alt="infra-container"
-					width={32}
-					height={32}
-				/>
-				<Text className="infra-container-card-text">
-					{t('processes_visualization_message')}
-				</Text>
-			</div>
+			<div className="infra-container-card-container">
+				<div className="dev-status-container">
+					<div className="infra-container-card">
+						<img
+							src="/Icons/infraContainers.svg"
+							alt="infra-container"
+							width={32}
+							height={32}
+						/>
+						<Text className="infra-container-card-text">
+							{t('processes_visualization_message')}
+						</Text>
+					</div>
+
+					<div className="infra-container-working-msg">
+						<Space>
+							<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
+							<Text className="infra-container-card-text">{t('working_message')}</Text>
+						</Space>
+					</div>
+				</div>
 
-			<div className="infra-container-working-msg">
-				<Space>
-					<img src="/Icons/broom.svg" alt="broom" width={16} height={16} />
-					<Text className="infra-container-card-text">{t('working_message')}</Text>
-				</Space>
+				<WaitlistFragment entityType="processes" />
 			</div>
 		</Space>
 	);

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

@@ -0,0 +1,15 @@
+.wait-list-container {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	.wait-list-text {
+		font-weight: 300;
+	}
+
+	.join-waitlist-btn {
+		width: 160px;
+		border-radius: 2px;
+		background: var(--slate-500);
+	}
+}

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -0,0 +1,75 @@
+import './WaitListFragment.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useNotifications } from 'hooks/useNotifications';
+import { CheckCircle2, HandPlatter } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
+
+export default function WaitlistFragment({
+	entityType,
+}: {
+	entityType: string;
+}): JSX.Element {
+	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { t } = useTranslation(['infraMonitoring']);
+	const { notifications } = useNotifications();
+
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isSuccess, setIsSuccess] = useState(false);
+
+	const handleJoinWaitlist = (): void => {
+		if (!user || !user.email) return;
+
+		setIsSubmitting(true);
+
+		logEvent('Infra Monitoring: Get Early Access Clicked', {
+			entity_type: entityType,
+			userEmail: user.email,
+		})
+			.then(() => {
+				notifications.success({
+					message: t('waitlist_success_message'),
+				});
+
+				setIsSubmitting(false);
+				setIsSuccess(true);
+
+				setTimeout(() => {
+					setIsSuccess(false);
+				}, 4000);
+			})
+			.catch((error) => {
+				console.error('Error logging event:', error);
+			});
+	};
+
+	return (
+		<div className="wait-list-container">
+			<Typography.Text className="wait-list-text">
+				{t('waitlist_message')}
+			</Typography.Text>
+
+			<Button
+				className="periscope-btn join-waitlist-btn"
+				type="default"
+				loading={isSubmitting}
+				icon={
+					isSuccess ? (
+						<CheckCircle2 size={16} color={Color.BG_FOREST_500} />
+					) : (
+						<HandPlatter size={16} />
+					)
+				}
+				onClick={handleJoinWaitlist}
+			>
+				Get early access
+			</Button>
+		</div>
+	);
+}