feat: integrate the status api calls and polling logic

frontend/src/api/Integrations/getIntegrationStatus.ts

@@ -0,0 +1,11 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+ GetIntegrationPayloadProps,
+ GetIntegrationStatusProps,
+} from 'types/api/integrations/types';
+
+export const getIntegrationStatus = (
+ props: GetIntegrationPayloadProps,
+): Promise<AxiosResponse<GetIntegrationStatusProps>> =>
+ axios.get(`/integrations/${props.integrationId}/connection_status`);

frontend/src/hooks/Integrations/useGetIntegrationStatus.ts

@@ -0,0 +1,18 @@
+import { getIntegrationStatus } from 'api/Integrations/getIntegrationStatus';
+import { AxiosError, AxiosResponse } from 'axios';
+import { useQuery, UseQueryResult } from 'react-query';
+import {
+ GetIntegrationPayloadProps,
+ GetIntegrationStatusProps,
+} from 'types/api/integrations/types';
+
+export const useGetIntegrationStatus = ({
+ integrationId,
+}: GetIntegrationPayloadProps): UseQueryResult<
+ AxiosResponse<GetIntegrationStatusProps>,
+ AxiosError
+> =>
+ useQuery<AxiosResponse<GetIntegrationStatusProps>, AxiosError>({
+ queryKey: ['Integration', integrationId, Date.now()],
+ queryFn: () => getIntegrationStatus({ integrationId }),
+ });

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx

@@ -10,20 +10,14 @@ import { useState } from 'react';
 import { useMutation } from 'react-query';
 
 import TestConnection, { ConnectionStates } from './TestConnection';
-import { getConnectionStatesFromConnectionStatus } from './utils';
 
 interface IntegrationDetailHeaderProps {
  id: string;
  title: string;
  description: string;
  icon: string;
  refetchIntegrationDetails: () => void;
- connectionStatus:
- | {
- last_received_ts: number;
- last_received_from: string;
- }
- | undefined;
+ connectionState: ConnectionStates;
 }
 function IntegrationDetailHeader(
  props: IntegrationDetailHeaderProps,
@@ -33,16 +27,11 @@ function IntegrationDetailHeader(
  title,
  icon,
  description,
- connectionStatus,
+ connectionState,
  refetchIntegrationDetails,
  } = props;
  const [isModalOpen, setIsModalOpen] = useState(false);
 
- const [connectionState] = useState<ConnectionStates>(
- (): ConnectionStates =>
- getConnectionStatesFromConnectionStatus(connectionStatus),
- );
-
  const { notifications } = useNotifications();
 
  const showModal = (): void => {

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -6,9 +6,12 @@ import './IntegrationDetailPage.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Typography } from 'antd';
 import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
+import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus';
+import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { defaultTo } from 'lodash-es';
 import { ArrowLeft, MoveUpRight, RotateCw } from 'lucide-react';
+import { useEffect } from 'react';
 import { isCloudUser } from 'utils/app';
 
 import IntegrationDetailContent from './IntegrationDetailContent';
@@ -26,6 +29,8 @@ interface IntegrationDetailPageProps {
 function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
  const { selectedIntegration, setSelectedIntegration, activeDetailTab } = props;
 
+ const isVisible = useTabVisibility();
+
  const handleContactSupport = (): void => {
  if (isCloudUser()) {
  history.push('/support');
@@ -44,8 +49,36 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
  integrationId: selectedIntegration,
  });
 
+ const {
+ data: integrationStatus,
+ refetch: refetchStatus,
+ } = useGetIntegrationStatus({
+ integrationId: selectedIntegration,
+ });
+
  const loading = isLoading || isFetching || isRefetching;
  const integrationData = data?.data.data;
+
+ const connectionStatus = getConnectionStatesFromConnectionStatus(
+ integrationData?.installation,
+ defaultTo(
+ integrationStatus?.data.data.connection_status,
+ defaultTo(integrationData?.connection_status, { logs: null, metrics: null }),
+ ),
+ );
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ if (isVisible) {
+ refetchStatus();
+ }
+ }, 1000);
+
+ return (): void => {
+ clearTimeout(timer);
+ };
+ }, [refetchStatus, isVisible]);
+
  return (
  <div className="integration-detail-content">
  <Button
@@ -99,17 +132,15 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
  title={defaultTo(integrationData?.title, '')}
  description={defaultTo(integrationData?.description, '')}
  icon={defaultTo(integrationData?.icon, '')}
- connectionStatus={integrationData?.connection_status}
+ connectionState={connectionStatus}
  refetchIntegrationDetails={refetch}
  />
  <IntegrationDetailContent
  activeDetailTab={activeDetailTab}
  integrationData={integrationData}
  />
 
- {getConnectionStatesFromConnectionStatus(
- integrationData.connection_status,
- ) !== ConnectionStates.NotInstalled && (
+ {connectionStatus !== ConnectionStates.NotInstalled && (
  <IntergrationsUninstallBar
  integrationTitle={defaultTo(integrationData?.title, '')}
  integrationId={selectedIntegration}

frontend/src/pages/Integrations/IntegrationDetailPage/TestConnection.tsx

@@ -5,15 +5,13 @@ import cx from 'classnames';
 export enum ConnectionStates {
  Connected = 'connected',
  TestingConnection = 'testingConnection',
- ConnectionFailed = 'connectionFailed',
  NoDataSinceLong = 'noDataSinceLong',
  NotInstalled = 'notInstalled',
 }
 
 const ConnectionStatesLabelMap = {
  [ConnectionStates.Connected]: 'This integration is working properly',
  [ConnectionStates.TestingConnection]: 'Listening for data...',
- [ConnectionStates.ConnectionFailed]: 'Something went wrong :/',
  [ConnectionStates.NoDataSinceLong]:
  'This integration has not received data in a while :/',
  [ConnectionStates.NotInstalled]: '',

frontend/src/pages/Integrations/IntegrationDetailPage/utils.ts

@@ -1,17 +1,56 @@
-import { isUndefined } from 'lodash-es';
+import dayjs from 'dayjs';
+import { isNull, isUndefined } from 'lodash-es';
 
 import { ConnectionStates } from './TestConnection';
 
 export function getConnectionStatesFromConnectionStatus(
- connectionStatus:
+ installation:
  | {
- last_received_ts: number;
- last_received_from: string;
+ installed_at: string;
  }
+ | null
  | undefined,
+ connection_status: {
+ logs:
+ | {
+ last_received_ts: number;
+ last_received_from: string;
+ }
+ | null
+ | undefined;
+ metrics:
+ | {
+ last_received_ts: number;
+ last_received_from: string;
+ }
+ | null
+ | undefined;
+ },
 ): ConnectionStates {
- if (isUndefined(connectionStatus)) {
+ console.log(installation, connection_status);
+ if (isNull(installation) || isUndefined(installation)) {
  return ConnectionStates.NotInstalled;
  }
+ if (
+ (isNull(connection_status.logs) || isUndefined(connection_status.logs)) &&
+ (isNull(connection_status.metrics) || isUndefined(connection_status.metrics))
+ ) {
+ const installationDate = dayjs(installation.installed_at);
+ if (installationDate.isBefore(dayjs().subtract(7, 'days'))) {
+ return ConnectionStates.NoDataSinceLong;
+ }
+ return ConnectionStates.TestingConnection;
+ }
+
+ const logsDate = dayjs(connection_status.logs?.last_received_ts);
+ const metricsDate = dayjs(connection_status.metrics?.last_received_ts);
+
+ if (
+ logsDate.isBefore(dayjs().subtract(7, 'days')) &&
+ metricsDate.isBefore(dayjs().subtract(7, 'days'))
+ ) {
+ return ConnectionStates.NoDataSinceLong;
+ }
+
  return ConnectionStates.Connected;
 }

frontend/src/types/api/integrations/types.ts

@@ -21,8 +21,9 @@ export interface AllIntegrationsProps {
 export interface IntegrationDetailedProps {
  description: string;
  id: string;
- // check for the correct type here
- installation: null;
+ installation: {
+ installed_at: string;
+ } | null;
  title: string;
  author: {
  email: string;
@@ -31,12 +32,16 @@ export interface IntegrationDetailedProps {
  };
  icon: string;
  connection_status: {
- last_received_ts: number;
- last_received_from: string;
+ logs: {
+ last_received_ts: number;
+ last_received_from: string;
+ } | null;
+ metrics: {
+ last_received_ts: number;
+ last_received_from: string;
+ } | null;
  };
- // check for the correct type here
  categories: string[];
- // check for the correct type here
  assets: {
  logs: {
  pipelines: [];
@@ -51,7 +56,6 @@ export interface IntegrationDetailedProps {
  instructions: string;
  },
  ];
- // check for the correct type heres
  data_collected: {
  logs: string[];
  metrics: string[];
@@ -61,13 +65,29 @@ export interface GetIntegrationProps {
  data: IntegrationDetailedProps;
 }
 
+export interface IntegrationStatusProps {
+ connection_status: {
+ logs: {
+ last_received_ts: number;
+ last_received_from: string;
+ } | null;
+ metrics: {
+ last_received_ts: number;
+ last_received_from: string;
+ } | null;
+ };
+}
+
+export interface GetIntegrationStatusProps {
+ data: IntegrationStatusProps;
+}
+
 export interface GetIntegrationPayloadProps {
  integrationId: string;
 }
 
 export interface InstallIntegrationKeyProps {
  integration_id: string;
- // TODO exact object for config
  config: any;
 }