GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-26 07:34:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: some cleanups in plumbing for integration connection status (#4716)

Browse Source
This commit is contained in:
Raj Kamal Singh 2024-03-18 15:22:31 +05:30 committed by GitHub
parent 43f9830e8d
commit 01bb39da6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 19 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/hooks/Integrations/useGetIntegrationStatus.ts
View File

@ -8,13 +8,12 @@ import {
export const useGetIntegrationStatus = ({ export const useGetIntegrationStatus = ({
integrationId, integrationId,
enabled,
}: GetIntegrationPayloadProps): UseQueryResult< }: GetIntegrationPayloadProps): UseQueryResult<
AxiosResponse<GetIntegrationStatusProps>, AxiosResponse<GetIntegrationStatusProps>,
AxiosError AxiosError
> => > =>
useQuery<AxiosResponse<GetIntegrationStatusProps>, AxiosError>({ useQuery<AxiosResponse<GetIntegrationStatusProps>, AxiosError>({
queryKey: ['Integration', integrationId, Date.now()], queryKey: ['integration-connection-status', integrationId],
queryFn: () => getIntegrationStatus({ integrationId }), queryFn: () => getIntegrationStatus({ integrationId }),
enabled, refetchInterval: 5000,
}); });

4
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx
View File

@ -9,7 +9,7 @@ import { useNotifications } from 'hooks/useNotifications';
import { ArrowLeftRight, Check } from 'lucide-react'; import { ArrowLeftRight, Check } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';
import { IntegrationStatusProps } from 'types/api/integrations/types'; import { IntegrationConnectionStatus } from 'types/api/integrations/types';
import TestConnection, { ConnectionStates } from './TestConnection'; import TestConnection, { ConnectionStates } from './TestConnection';
@ -20,7 +20,7 @@ interface IntegrationDetailHeaderProps {
icon: string; icon: string;
refetchIntegrationDetails: () => void; refetchIntegrationDetails: () => void;
connectionState: ConnectionStates; connectionState: ConnectionStates;
connectionData: IntegrationStatusProps['connection_status']; connectionData: IntegrationConnectionStatus;
} }
function IntegrationDetailHeader( function IntegrationDetailHeader(
props: IntegrationDetailHeaderProps, props: IntegrationDetailHeaderProps,

25
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx
View File

@ -9,7 +9,6 @@ import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus'; import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus';
import { defaultTo } from 'lodash-es'; import { defaultTo } from 'lodash-es';
import { ArrowLeft, MoveUpRight, RotateCw } from 'lucide-react'; import { ArrowLeft, MoveUpRight, RotateCw } from 'lucide-react';
import { useEffect } from 'react';
import { isCloudUser } from 'utils/app'; import { isCloudUser } from 'utils/app';
import { handleContactSupport } from '../utils'; import { handleContactSupport } from '../utils';
@ -41,11 +40,9 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
const { const {
data: integrationStatus, data: integrationStatus,
refetch: refetchStatus,
isLoading: isStatusLoading, isLoading: isStatusLoading,
} = useGetIntegrationStatus({ } = useGetIntegrationStatus({
integrationId: selectedIntegration, integrationId: selectedIntegration,
enabled: false,
}); });
const loading = isLoading || isFetching || isRefetching || isStatusLoading; const loading = isLoading || isFetching || isRefetching || isStatusLoading;
@ -54,23 +51,11 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
const connectionStatus = getConnectionStatesFromConnectionStatus( const connectionStatus = getConnectionStatesFromConnectionStatus(
integrationData?.installation, integrationData?.installation,
defaultTo( defaultTo(
integrationStatus?.data.data.connection_status, integrationStatus?.data.data,
defaultTo(integrationData?.connection_status, { logs: null, metrics: null }), defaultTo(integrationData?.connection_status, { logs: null, metrics: null }),
), ),
); );
useEffect(() => {
// we should once get data on load and then keep polling every 5 seconds
refetchStatus();
const timer = setInterval(() => {
refetchStatus();
}, 5000);
return (): void => {
clearInterval(timer);
};
}, [refetchStatus]);
return ( return (
<div className="integration-detail-content"> <div className="integration-detail-content">
<Button <Button
@ -128,10 +113,10 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
description={defaultTo(integrationData?.description, '')} description={defaultTo(integrationData?.description, '')}
icon={defaultTo(integrationData?.icon, '')} icon={defaultTo(integrationData?.icon, '')}
connectionState={connectionStatus} connectionState={connectionStatus}
connectionData={defaultTo( connectionData={defaultTo(integrationStatus?.data.data, {
integrationStatus?.data.data.connection_status, logs: null,
{ logs: null, metrics: null }, metrics: null,
)} })}
refetchIntegrationDetails={refetch} refetchIntegrationDetails={refetch}
/> />
<IntegrationDetailContent <IntegrationDetailContent

22
frontend/src/types/api/integrations/types.ts
View File

@ -65,21 +65,19 @@ export interface GetIntegrationProps {
data: IntegrationDetailedProps; data: IntegrationDetailedProps;
} }
export interface IntegrationStatusProps { export interface IntegrationConnectionStatus {
connection_status: { logs: {
logs: { last_received_ts_ms: number;
last_received_ts_ms: number; last_received_from: string;
last_received_from: string; } | null;
} | null; metrics: {
metrics: { last_received_ts_ms: number;
last_received_ts_ms: number; last_received_from: string;
last_received_from: string; } | null;
} | null;
};
} }
export interface GetIntegrationStatusProps { export interface GetIntegrationStatusProps {
data: IntegrationStatusProps; data: IntegrationConnectionStatus;
} }
export interface GetIntegrationPayloadProps { export interface GetIntegrationPayloadProps {