From a976e18bfefadac6c8f7bf5df5e848b70641ce50 Mon Sep 17 00:00:00 2001 From: ahmadshaheer Date: Mon, 13 Jan 2025 11:48:29 +0430 Subject: [PATCH] feat: service status UI --- .../ServicesSection/ServiceDetails.tsx | 44 ++++++++++++++++++- .../ServicesSection/ServicesTabs.style.scss | 27 ++++++++++++ .../ServicesSection/types.ts | 4 +- 3 files changed, 72 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx b/frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx index c0a68c5ff59..eefcc9db57f 100644 --- 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
{text}
; +} function ServiceDetails({ service }: { service: ServiceData }): JSX.Element { const tabItems: TabsProps['items'] = [ @@ -24,11 +64,13 @@ function ServiceDetails({ service }: { service: ServiceData }): JSX.Element { ), }, ]; + return (
Details
+ {service.status && }