feat: service status UI

SigNoz · Jan 13, 2025 · a976e18 · a976e18
1 parent b0fb28f
commit a976e18
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 3 deletions.
diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx b/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx
@@ -1,10 +1,50 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, TabsProps } from 'antd';
+import dayjs from 'dayjs';
 import { Wrench } from 'lucide-react';
 
 import CloudServiceDashboards from './CloudServiceDashboards';
 import CloudServiceDataCollected from './CloudServiceDataCollected';
-import { ServiceData } from './types';
+import { IServiceStatus, ServiceData } from './types';
+
+const getStatus = (
+	logsLastReceivedTimestamp: number | undefined,
+	metricsLastReceivedTimestamp: number | undefined,
+): { text: string; className: string } => {
+	if (!logsLastReceivedTimestamp && !metricsLastReceivedTimestamp) {
+		return { text: 'No Data Yet', className: 'service-status--no-data' };
+	}
+
+	const latestTimestamp = Math.max(
+		logsLastReceivedTimestamp || 0,
+		metricsLastReceivedTimestamp || 0,
+	);
+
+	const isStale = dayjs().diff(dayjs(latestTimestamp), 'minute') > 30;
+
+	if (isStale) {
+		return { text: 'Stale Data', className: 'service-status--stale-data' };
+	}
+
+	return { text: 'Connected', className: 'service-status--connected' };
+};
+
+function ServiceStatus({
+	serviceStatus,
+}: {
+	serviceStatus: IServiceStatus | null;
+}): JSX.Element {
+	const logsLastReceivedTimestamp = serviceStatus?.logs?.last_received_ts_ms;
+	const metricsLastReceivedTimestamp =
+		serviceStatus?.metrics?.last_received_ts_ms;
+
+	const { text, className } = getStatus(
+		logsLastReceivedTimestamp,
+		metricsLastReceivedTimestamp,
+	);
+
+	return <div className={`service-status ${className}`}>{text}</div>;
+}
 
 function ServiceDetails({ service }: { service: ServiceData }): JSX.Element {
 	const tabItems: TabsProps['items'] = [
@@ -24,11 +64,13 @@ function ServiceDetails({ service }: { service: ServiceData }): JSX.Element {
 			),
 		},
 	];
+
 	return (
 		<div className="service-details">
 			<div className="service-details__title-bar">
 				<div className="service-details__details-title">Details</div>
 				<div className="service-details__right-actions">
+					{service.status && <ServiceStatus serviceStatus={service.status} />}
 					<Button className="configure-button">
 						<Wrench size={12} color={Color.BG_VANILLA_400} />
 						Configure

diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss b/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss
@@ -107,7 +107,34 @@
 		}
 		.service-details__right-actions {
 			display: flex;
+			align-items: center;
 			gap: 8px;
+			.service-status {
+				display: flex;
+				align-items: center;
+				padding: 2px 8px;
+				font-family: 'Geist Mono';
+				font-size: 12px;
+				font-weight: 500;
+				letter-spacing: 0.54px;
+				border-radius: 2px;
+				line-height: normal;
+				&--connected {
+					border: 1px solid rgba(37, 225, 146, 0.1);
+					background: rgba(37, 225, 146, 0.1);
+					color: var(--bg-forest-400);
+				}
+				&--stale-data {
+					background: rgba(255, 215, 120, 0.1);
+					border: 1px solid rgba(255, 215, 120, 0.1);
+					color: var(--bg-amber-400);
+				}
+				&--no-data {
+					border: 1px solid rgba(234, 109, 113, 0.1);
+					background: rgba(234, 109, 113, 0.1);
+					color: var(--bg-cherry-400);
+				}
+			}
 			.configure-button {
 				display: flex;
 				align-items: center;

diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/types.ts b/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/types.ts
@@ -38,7 +38,7 @@ interface ServiceConfig {
 	metrics: ConfigStatus;
 }
 
-interface ServiceStatus {
+export interface IServiceStatus {
 	logs: DataStatus | null;
 	metrics: DataStatus | null;
 }
@@ -56,7 +56,7 @@ interface ServiceData {
 		metrics: Metric[];
 	};
 	config?: ServiceConfig; // Optional - included only with account_id
-	status?: ServiceStatus; // Optional - included only with account_id
+	status?: IServiceStatus; // Optional - included only with account_id
 }
 
 interface CloudAccountConfig {