admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor + new account sync metrics + isolating health status inside folder admin-panel > health-status (#10314)

Browse Source 
closes https://github.com/twentyhq/core-team-issues/issues/444
https://github.com/twentyhq/core-team-issues/issues/443
https://github.com/twentyhq/core-team-issues/issues/442
This commit is contained in:
nitin
2025-02-21 14:18:47 +05:30
committed by GitHub
parent 41bbb4b47f
commit c46f7848b7
57 changed files with 1441 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminIndicatorHealthStatus.tsx
View File

@ -1,65 +1,34 @@
import { SettingsAdminQueueExpandableContainer } from '@/settings/admin-panel/components/SettingsAdminQueueExpandableContainer';
import { SettingsAdminQueueHealthButtons } from '@/settings/admin-panel/components/SettingsAdminQueueHealthButtons';
import { SettingsAdminHealthStatusRightContainer } from '@/settings/admin-panel/health-status/components/SettingsAdminHealthStatusRightContainer';
import { SettingsAdminIndicatorHealthStatusContent } from '@/settings/admin-panel/health-status/components/SettingsAdminIndicatorHealthStatusContent';
import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/health-status/contexts/SettingsAdminIndicatorHealthContext';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { H2Title, Section, Status } from 'twenty-ui';
import { H2Title, Section } from 'twenty-ui';
import {
AdminPanelHealthServiceStatus,
AdminPanelIndicatorHealthStatusInputEnum,
HealthIndicatorId,
useGetIndicatorHealthStatusQuery,
} from '~/generated/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledStatusContainer = styled.div``;
const StyledTitleContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;
const StyledErrorMessage = styled.div`
color: ${({ theme }) => theme.color.red};
const StyledH2Title = styled(H2Title)`
margin-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledDetailsContainer = styled.pre`
background-color: ${({ theme }) => theme.background.quaternary};
padding: ${({ theme }) => theme.spacing(6)};
border-radius: ${({ theme }) => theme.border.radius.sm};
white-space: pre-wrap;
font-size: ${({ theme }) => theme.font.size.sm};
`;
export const SettingsAdminIndicatorHealthStatus = () => {
const { t } = useLingui();
const { indicatorName } = useParams();
const { indicatorId } = useParams();
const { data, loading } = useGetIndicatorHealthStatusQuery({
variables: {
indicatorName: indicatorName as AdminPanelIndicatorHealthStatusInputEnum,
indicatorId: indicatorId as HealthIndicatorId,
},
fetchPolicy: 'network-only',
});
const formattedDetails = data?.getIndicatorHealthStatus.details
? JSON.stringify(JSON.parse(data.getIndicatorHealthStatus.details), null, 2)
: null;
const isWorkerDown =
!data?.getIndicatorHealthStatus.status ||
data?.getIndicatorHealthStatus.status ===
AdminPanelHealthServiceStatus.OUTAGE;
const [selectedQueue, setSelectedQueue] = useState<string | null>(null);
const toggleQueueVisibility = (queueName: string) => {
setSelectedQueue(selectedQueue === queueName ? null : queueName);
};
return (
<SubMenuTopBarContainer
links={[
@ -75,62 +44,40 @@ export const SettingsAdminIndicatorHealthStatus = () => {
children: t`Health Status`,
href: getSettingsPath(SettingsPath.AdminPanelHealthStatus),
},
{ children: `${indicatorName}` },
{ children: `${data?.getIndicatorHealthStatus?.label}` },
]}
>
<SettingsPageContainer>
<Section>
<H2Title title={`${indicatorName}`} description="Health status" />
<StyledStatusContainer>
{data?.getIndicatorHealthStatus.status ===
AdminPanelHealthServiceStatus.OPERATIONAL && (
<Status color="green" text="Operational" weight="medium" />
)}
{data?.getIndicatorHealthStatus.status ===
AdminPanelHealthServiceStatus.OUTAGE && (
<Status color="red" text="Outage" weight="medium" />
)}
</StyledStatusContainer>
</Section>
{indicatorName === AdminPanelIndicatorHealthStatusInputEnum.WORKER ? (
<SettingsAdminIndicatorHealthContext.Provider
value={{
indicatorHealth: {
id: data?.getIndicatorHealthStatus?.id ?? '',
label: data?.getIndicatorHealthStatus?.label ?? '',
description: data?.getIndicatorHealthStatus?.description ?? '',
status:
data?.getIndicatorHealthStatus?.status ??
AdminPanelHealthServiceStatus.OUTAGE,
details: data?.getIndicatorHealthStatus?.details,
queues: data?.getIndicatorHealthStatus?.queues,
},
loading: loading,
}}
>
<Section>
<StyledTitleContainer>
<H2Title
title="Queue Status"
description="Background job processing status and metrics"
/>
</StyledTitleContainer>
{isWorkerDown && !loading ? (
<StyledErrorMessage>
Queue information is not available because the worker is down
</StyledErrorMessage>
) : (
<>
<SettingsAdminQueueHealthButtons
queues={data?.getIndicatorHealthStatus.queues ?? []}
selectedQueue={selectedQueue}
toggleQueueVisibility={toggleQueueVisibility}
<StyledH2Title
title={`${data?.getIndicatorHealthStatus?.label}`}
description={data?.getIndicatorHealthStatus?.description}
/>
{indicatorId !== HealthIndicatorId.connectedAccount &&
data?.getIndicatorHealthStatus?.status && (
<SettingsAdminHealthStatusRightContainer
status={data?.getIndicatorHealthStatus.status}
/>
<SettingsAdminQueueExpandableContainer
queues={data?.getIndicatorHealthStatus.queues ?? []}
selectedQueue={selectedQueue}
/>
</>
)}
)}
</Section>
) : null}
{indicatorName === AdminPanelIndicatorHealthStatusInputEnum.DATABASE ||
indicatorName === AdminPanelIndicatorHealthStatusInputEnum.REDIS ? (
<Section>
{formattedDetails && (
<StyledDetailsContainer>
{formattedDetails}
</StyledDetailsContainer>
)}
</Section>
) : null}
<SettingsAdminIndicatorHealthStatusContent />
</SettingsAdminIndicatorHealthContext.Provider>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);