Health monitor status for admin panel (#10186)
# Health Monitoring for Self-Hosted Instances
This PR implements basic health monitoring for self-hosted instances in
the admin panel.
## Service Status Checks
We're adding real-time health checks for:
- Redis Connection
- Database Connection
- Worker Status
- Message Sync Status
## Existing Functionality
We already have message sync and captcha counters that store aggregated
metrics in cache within a configurable time window (default: 5 minutes).
## New Endpoints
1. `/healthz` - Basic server health check for Kubernetes pod monitoring
2. `/healthz/{serviceName}` - Individual service health checks (returns
200 if healthy)
3. `/metricsz/{metricName}` - Time-windowed metrics (message sync,
captcha)
4. GraphQL resolver in admin panel for UI consumption
All endpoints use the same underlying service, with different
presentation layers for infrastructure and UI needs.
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
nitin
@ -25,6 +25,33 @@ export type ActivateWorkspaceInput = {
|
||||
displayName?: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export type AdminPanelHealthServiceData = {
|
||||
__typename?: 'AdminPanelHealthServiceData';
|
||||
details?: Maybe<Scalars['String']>;
|
||||
queues?: Maybe<Array<AdminPanelWorkerQueueHealth>>;
|
||||
status: AdminPanelHealthServiceStatus;
|
||||
};
|
||||
|
||||
export enum AdminPanelHealthServiceStatus {
|
||||
OPERATIONAL = 'OPERATIONAL',
|
||||
OUTAGE = 'OUTAGE'
|
||||
}
|
||||
|
||||
export enum AdminPanelIndicatorHealthStatusInputEnum {
|
||||
DATABASE = 'DATABASE',
|
||||
MESSAGE_SYNC = 'MESSAGE_SYNC',
|
||||
REDIS = 'REDIS',
|
||||
WORKER = 'WORKER'
|
||||
}
|
||||
|
||||
export type AdminPanelWorkerQueueHealth = {
|
||||
__typename?: 'AdminPanelWorkerQueueHealth';
|
||||
metrics: WorkerQueueMetrics;
|
||||
name: Scalars['String'];
|
||||
status: AdminPanelHealthServiceStatus;
|
||||
workers: Scalars['Float'];
|
||||
};
|
||||
|
||||
export type Analytics = {
|
||||
__typename?: 'Analytics';
|
||||
/** Boolean that confirms query was dispatched */
|
||||
@ -1232,11 +1259,13 @@ export type Query = {
|
||||
findWorkspaceInvitations: Array<WorkspaceInvitation>;
|
||||
getAvailablePackages: Scalars['JSON'];
|
||||
getEnvironmentVariablesGrouped: EnvironmentVariablesOutput;
|
||||
getIndicatorHealthStatus: AdminPanelHealthServiceData;
|
||||
getPostgresCredentials?: Maybe<PostgresCredentials>;
|
||||
getProductPrices: BillingProductPricesOutput;
|
||||
getPublicWorkspaceDataByDomain: PublicWorkspaceDataOutput;
|
||||
getRoles: Array<Role>;
|
||||
getServerlessFunctionSourceCode?: Maybe<Scalars['JSON']>;
|
||||
getSystemHealthStatus: SystemHealth;
|
||||
getTimelineCalendarEventsFromCompanyId: TimelineCalendarEventsWithTotal;
|
||||
getTimelineCalendarEventsFromPersonId: TimelineCalendarEventsWithTotal;
|
||||
getTimelineThreadsFromCompanyId: TimelineThreadsWithTotal;
|
||||
@ -1287,6 +1316,11 @@ export type QueryGetAvailablePackagesArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type QueryGetIndicatorHealthStatusArgs = {
|
||||
indicatorName: AdminPanelIndicatorHealthStatusInputEnum;
|
||||
};
|
||||
|
||||
|
||||
export type QueryGetProductPricesArgs = {
|
||||
product: Scalars['String'];
|
||||
};
|
||||
@ -1605,6 +1639,14 @@ export type Support = {
|
||||
supportFrontChatId?: Maybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export type SystemHealth = {
|
||||
__typename?: 'SystemHealth';
|
||||
database: AdminPanelHealthServiceData;
|
||||
messageSync: AdminPanelHealthServiceData;
|
||||
redis: AdminPanelHealthServiceData;
|
||||
worker: AdminPanelHealthServiceData;
|
||||
};
|
||||
|
||||
export type TimelineCalendarEvent = {
|
||||
__typename?: 'TimelineCalendarEvent';
|
||||
conferenceLink: LinksMetadata;
|
||||
@ -1854,6 +1896,16 @@ export type ValidatePasswordResetToken = {
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
export type WorkerQueueMetrics = {
|
||||
__typename?: 'WorkerQueueMetrics';
|
||||
active: Scalars['Float'];
|
||||
completed: Scalars['Float'];
|
||||
delayed: Scalars['Float'];
|
||||
failed: Scalars['Float'];
|
||||
prioritized: Scalars['Float'];
|
||||
waiting: Scalars['Float'];
|
||||
};
|
||||
|
||||
export type WorkflowAction = {
|
||||
__typename?: 'WorkflowAction';
|
||||
id: Scalars['UUID'];
|
||||
@ -2250,6 +2302,18 @@ export type GetEnvironmentVariablesGroupedQueryVariables = Exact<{ [key: string]
|
||||
|
||||
export type GetEnvironmentVariablesGroupedQuery = { __typename?: 'Query', getEnvironmentVariablesGrouped: { __typename?: 'EnvironmentVariablesOutput', groups: Array<{ __typename?: 'EnvironmentVariablesGroupData', name: EnvironmentVariablesGroup, description: string, isHiddenOnLoad: boolean, variables: Array<{ __typename?: 'EnvironmentVariable', name: string, description: string, value: string, sensitive: boolean }> }> } };
|
||||
|
||||
export type GetIndicatorHealthStatusQueryVariables = Exact<{
|
||||
indicatorName: AdminPanelIndicatorHealthStatusInputEnum;
|
||||
}>;
|
||||
|
||||
|
||||
export type GetIndicatorHealthStatusQuery = { __typename?: 'Query', getIndicatorHealthStatus: { __typename?: 'AdminPanelHealthServiceData', status: AdminPanelHealthServiceStatus, details?: string | null, queues?: Array<{ __typename?: 'AdminPanelWorkerQueueHealth', name: string, status: AdminPanelHealthServiceStatus, workers: number, metrics: { __typename?: 'WorkerQueueMetrics', failed: number, completed: number, waiting: number, active: number, delayed: number, prioritized: number } }> | null } };
|
||||
|
||||
export type GetSystemHealthStatusQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type GetSystemHealthStatusQuery = { __typename?: 'Query', getSystemHealthStatus: { __typename?: 'SystemHealth', database: { __typename?: 'AdminPanelHealthServiceData', status: AdminPanelHealthServiceStatus, details?: string | null }, redis: { __typename?: 'AdminPanelHealthServiceData', status: AdminPanelHealthServiceStatus, details?: string | null }, worker: { __typename?: 'AdminPanelHealthServiceData', status: AdminPanelHealthServiceStatus, queues?: Array<{ __typename?: 'AdminPanelWorkerQueueHealth', name: string, workers: number, status: AdminPanelHealthServiceStatus, metrics: { __typename?: 'WorkerQueueMetrics', failed: number, completed: number, waiting: number, active: number, delayed: number, prioritized: number } }> | null }, messageSync: { __typename?: 'AdminPanelHealthServiceData', status: AdminPanelHealthServiceStatus, details?: string | null } } };
|
||||
|
||||
export type UpdateLabPublicFeatureFlagMutationVariables = Exact<{
|
||||
input: UpdateLabPublicFeatureFlagInput;
|
||||
}>;
|
||||
@ -3960,6 +4024,116 @@ export function useGetEnvironmentVariablesGroupedLazyQuery(baseOptions?: Apollo.
|
||||
export type GetEnvironmentVariablesGroupedQueryHookResult = ReturnType<typeof useGetEnvironmentVariablesGroupedQuery>;
|
||||
export type GetEnvironmentVariablesGroupedLazyQueryHookResult = ReturnType<typeof useGetEnvironmentVariablesGroupedLazyQuery>;
|
||||
export type GetEnvironmentVariablesGroupedQueryResult = Apollo.QueryResult<GetEnvironmentVariablesGroupedQuery, GetEnvironmentVariablesGroupedQueryVariables>;
|
||||
export const GetIndicatorHealthStatusDocument = gql`
|
||||
query GetIndicatorHealthStatus($indicatorName: AdminPanelIndicatorHealthStatusInputEnum!) {
|
||||
getIndicatorHealthStatus(indicatorName: $indicatorName) {
|
||||
status
|
||||
details
|
||||
queues {
|
||||
name
|
||||
status
|
||||
workers
|
||||
metrics {
|
||||
failed
|
||||
completed
|
||||
waiting
|
||||
active
|
||||
delayed
|
||||
prioritized
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* __useGetIndicatorHealthStatusQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useGetIndicatorHealthStatusQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useGetIndicatorHealthStatusQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||
* you can use to render your UI.
|
||||
*
|
||||
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, error } = useGetIndicatorHealthStatusQuery({
|
||||
* variables: {
|
||||
* indicatorName: // value for 'indicatorName'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useGetIndicatorHealthStatusQuery(baseOptions: Apollo.QueryHookOptions<GetIndicatorHealthStatusQuery, GetIndicatorHealthStatusQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useQuery<GetIndicatorHealthStatusQuery, GetIndicatorHealthStatusQueryVariables>(GetIndicatorHealthStatusDocument, options);
|
||||
}
|
||||
export function useGetIndicatorHealthStatusLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetIndicatorHealthStatusQuery, GetIndicatorHealthStatusQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useLazyQuery<GetIndicatorHealthStatusQuery, GetIndicatorHealthStatusQueryVariables>(GetIndicatorHealthStatusDocument, options);
|
||||
}
|
||||
export type GetIndicatorHealthStatusQueryHookResult = ReturnType<typeof useGetIndicatorHealthStatusQuery>;
|
||||
export type GetIndicatorHealthStatusLazyQueryHookResult = ReturnType<typeof useGetIndicatorHealthStatusLazyQuery>;
|
||||
export type GetIndicatorHealthStatusQueryResult = Apollo.QueryResult<GetIndicatorHealthStatusQuery, GetIndicatorHealthStatusQueryVariables>;
|
||||
export const GetSystemHealthStatusDocument = gql`
|
||||
query GetSystemHealthStatus {
|
||||
getSystemHealthStatus {
|
||||
database {
|
||||
status
|
||||
details
|
||||
}
|
||||
redis {
|
||||
status
|
||||
details
|
||||
}
|
||||
worker {
|
||||
status
|
||||
queues {
|
||||
name
|
||||
workers
|
||||
status
|
||||
metrics {
|
||||
failed
|
||||
completed
|
||||
waiting
|
||||
active
|
||||
delayed
|
||||
prioritized
|
||||
}
|
||||
}
|
||||
}
|
||||
messageSync {
|
||||
status
|
||||
details
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* __useGetSystemHealthStatusQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useGetSystemHealthStatusQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useGetSystemHealthStatusQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||
* you can use to render your UI.
|
||||
*
|
||||
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, error } = useGetSystemHealthStatusQuery({
|
||||
* variables: {
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useGetSystemHealthStatusQuery(baseOptions?: Apollo.QueryHookOptions<GetSystemHealthStatusQuery, GetSystemHealthStatusQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useQuery<GetSystemHealthStatusQuery, GetSystemHealthStatusQueryVariables>(GetSystemHealthStatusDocument, options);
|
||||
}
|
||||
export function useGetSystemHealthStatusLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSystemHealthStatusQuery, GetSystemHealthStatusQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useLazyQuery<GetSystemHealthStatusQuery, GetSystemHealthStatusQueryVariables>(GetSystemHealthStatusDocument, options);
|
||||
}
|
||||
export type GetSystemHealthStatusQueryHookResult = ReturnType<typeof useGetSystemHealthStatusQuery>;
|
||||
export type GetSystemHealthStatusLazyQueryHookResult = ReturnType<typeof useGetSystemHealthStatusLazyQuery>;
|
||||
export type GetSystemHealthStatusQueryResult = Apollo.QueryResult<GetSystemHealthStatusQuery, GetSystemHealthStatusQueryVariables>;
|
||||
export const UpdateLabPublicFeatureFlagDocument = gql`
|
||||
mutation UpdateLabPublicFeatureFlag($input: UpdateLabPublicFeatureFlagInput!) {
|
||||
updateLabPublicFeatureFlag(input: $input) {
|
||||
|
||||
@ -248,6 +248,14 @@ const SettingsAdminContent = lazy(() =>
|
||||
),
|
||||
);
|
||||
|
||||
const SettingsAdminIndicatorHealthStatus = lazy(() =>
|
||||
import(
|
||||
'~/pages/settings/admin-panel/SettingsAdminIndicatorHealthStatus'
|
||||
).then((module) => ({
|
||||
default: module.SettingsAdminIndicatorHealthStatus,
|
||||
})),
|
||||
);
|
||||
|
||||
const SettingsLab = lazy(() =>
|
||||
import('~/pages/settings/lab/SettingsLab').then((module) => ({
|
||||
default: module.SettingsLab,
|
||||
@ -407,6 +415,10 @@ export const SettingsRoutes = ({
|
||||
path={SettingsPath.FeatureFlags}
|
||||
element={<SettingsAdminContent />}
|
||||
/>
|
||||
<Route
|
||||
path={SettingsPath.AdminPanelIndicatorHealthStatus}
|
||||
element={<SettingsAdminIndicatorHealthStatus />}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Route path={SettingsPath.Lab} element={<SettingsLab />} />
|
||||
|
||||
@ -3,7 +3,7 @@ import { SETTINGS_ADMIN_TABS } from '@/settings/admin-panel/constants/SettingsAd
|
||||
import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminTabsId';
|
||||
import { TabList } from '@/ui/layout/tab/components/TabList';
|
||||
import styled from '@emotion/styled';
|
||||
import { IconSettings2, IconVariable } from 'twenty-ui';
|
||||
import { IconHeart, IconSettings2, IconVariable } from 'twenty-ui';
|
||||
|
||||
const StyledTabListContainer = styled.div`
|
||||
align-items: center;
|
||||
@ -25,6 +25,11 @@ export const SettingsAdminContent = () => {
|
||||
title: 'Env Variables',
|
||||
Icon: IconVariable,
|
||||
},
|
||||
{
|
||||
id: SETTINGS_ADMIN_TABS.HEALTH_STATUS,
|
||||
title: 'Health Status',
|
||||
Icon: IconHeart,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@ -15,6 +15,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { getImageAbsoluteURI, isDefined } from 'twenty-shared';
|
||||
import {
|
||||
Button,
|
||||
GithubVersionLink,
|
||||
H1Title,
|
||||
H1TitleFontColor,
|
||||
H2Title,
|
||||
@ -24,6 +25,8 @@ import {
|
||||
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
||||
import { useUserLookupAdminPanelMutation } from '~/generated/graphql';
|
||||
|
||||
import packageJson from '../../../../../package.json';
|
||||
|
||||
const StyledLinkContainer = styled.div`
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
@ -120,6 +123,11 @@ export const SettingsAdminGeneral = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section>
|
||||
<H2Title title="About" description="Version of the application" />
|
||||
<GithubVersionLink version={packageJson.version} />
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<H2Title
|
||||
title={
|
||||
@ -176,6 +184,7 @@ export const SettingsAdminGeneral = () => {
|
||||
behaveAsLinks={false}
|
||||
/>
|
||||
</StyledTabListContainer>
|
||||
|
||||
<StyledContentContainer>
|
||||
<SettingsAdminWorkspaceContent activeWorkspace={activeWorkspace} />
|
||||
</StyledContentContainer>
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
import { Table } from '@/ui/layout/table/components/Table';
|
||||
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
||||
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
|
||||
export const SettingsAdminHealthMessageSyncCountersTable = ({
|
||||
details,
|
||||
}: {
|
||||
details: string | null | undefined;
|
||||
}) => {
|
||||
const parsedDetails = details ? JSON.parse(details) : null;
|
||||
if (!parsedDetails) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<TableRow>
|
||||
<TableHeader>Status</TableHeader>
|
||||
<TableHeader align="right">Count</TableHeader>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Message Not Synced</TableCell>
|
||||
<TableCell align="right">{parsedDetails.counters.NOT_SYNCED}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Message Sync Ongoing</TableCell>
|
||||
<TableCell align="right">{parsedDetails.counters.ONGOING}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Total Jobs</TableCell>
|
||||
<TableCell align="right">{parsedDetails.totalJobs}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Failed Jobs</TableCell>
|
||||
<TableCell align="right">{parsedDetails.failedJobs}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Failure Rate</TableCell>
|
||||
<TableCell align="right">{parsedDetails.failureRate}%</TableCell>
|
||||
</TableRow>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import { SettingsAdminHealthMessageSyncCountersTable } from '@/settings/admin-panel/components/SettingsAdminHealthMessageSyncCountersTable';
|
||||
import { SettingsHealthStatusListCard } from '@/settings/admin-panel/components/SettingsHealthStatusListCard';
|
||||
import { AdminHealthService } from '@/settings/admin-panel/types/AdminHealthService';
|
||||
import styled from '@emotion/styled';
|
||||
import { H2Title, Section } from 'twenty-ui';
|
||||
import {
|
||||
AdminPanelHealthServiceStatus,
|
||||
useGetSystemHealthStatusQuery,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
const StyledErrorMessage = styled.div`
|
||||
color: ${({ theme }) => theme.color.red};
|
||||
margin-top: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
export const SettingsAdminHealthStatus = () => {
|
||||
const { data, loading } = useGetSystemHealthStatusQuery({
|
||||
fetchPolicy: 'network-only',
|
||||
});
|
||||
|
||||
const services = [
|
||||
{
|
||||
id: 'DATABASE',
|
||||
name: 'Database Status',
|
||||
...data?.getSystemHealthStatus.database,
|
||||
},
|
||||
{ id: 'REDIS', name: 'Redis Status', ...data?.getSystemHealthStatus.redis },
|
||||
{
|
||||
id: 'WORKER',
|
||||
name: 'Worker Status',
|
||||
status: data?.getSystemHealthStatus.worker.status,
|
||||
queues: data?.getSystemHealthStatus.worker.queues,
|
||||
},
|
||||
].filter((service): service is AdminHealthService => !!service.status);
|
||||
|
||||
const isMessageSyncCounterDown =
|
||||
!data?.getSystemHealthStatus.messageSync.status ||
|
||||
data?.getSystemHealthStatus.messageSync.status ===
|
||||
AdminPanelHealthServiceStatus.OUTAGE;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section>
|
||||
<H2Title title="Health Status" description="How your system is doing" />
|
||||
<SettingsHealthStatusListCard services={services} loading={loading} />
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Message Sync Status"
|
||||
description="How your message sync is doing"
|
||||
/>
|
||||
{isMessageSyncCounterDown ? (
|
||||
<StyledErrorMessage>
|
||||
{data?.getSystemHealthStatus.messageSync.details ||
|
||||
'Message sync status is unavailable'}
|
||||
</StyledErrorMessage>
|
||||
) : (
|
||||
<SettingsAdminHealthMessageSyncCountersTable
|
||||
details={data?.getSystemHealthStatus.messageSync.details}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
import { AdminHealthService } from '@/settings/admin-panel/types/AdminHealthService';
|
||||
import styled from '@emotion/styled';
|
||||
import { Status } from 'twenty-ui';
|
||||
import { AdminPanelHealthServiceStatus } from '~/generated/graphql';
|
||||
|
||||
const StyledRowRightContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export const SettingsAdminHealthStatusRightContainer = ({
|
||||
service,
|
||||
}: {
|
||||
service: AdminHealthService;
|
||||
}) => {
|
||||
return (
|
||||
<StyledRowRightContainer>
|
||||
{service.status === AdminPanelHealthServiceStatus.OPERATIONAL && (
|
||||
<Status color="green" text="Operational" weight="medium" />
|
||||
)}
|
||||
{service.status === AdminPanelHealthServiceStatus.OUTAGE && (
|
||||
<Status color="red" text="Outage" weight="medium" />
|
||||
)}
|
||||
</StyledRowRightContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,103 @@
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { Table } from '@/ui/layout/table/components/Table';
|
||||
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
import styled from '@emotion/styled';
|
||||
import { AnimatedExpandableContainer, Status } from 'twenty-ui';
|
||||
import {
|
||||
AdminPanelHealthServiceStatus,
|
||||
AdminPanelWorkerQueueHealth,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
const StyledExpandedContent = styled.div`
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(3)};
|
||||
padding-left: ${({ theme }) => theme.spacing(3)};
|
||||
padding-right: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.spacing(3)};
|
||||
margin-top: ${({ theme }) => theme.spacing(5)};
|
||||
`;
|
||||
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
height: ${({ theme }) => theme.spacing(6)};
|
||||
`;
|
||||
|
||||
const StyledQueueMetricsTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(3)};
|
||||
padding-left: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
export const SettingsAdminQueueExpandableContainer = ({
|
||||
queues,
|
||||
selectedQueue,
|
||||
}: {
|
||||
queues: AdminPanelWorkerQueueHealth[];
|
||||
selectedQueue: string | null;
|
||||
}) => {
|
||||
const selectedQueueData = queues.find(
|
||||
(queue) => queue.name === selectedQueue,
|
||||
);
|
||||
|
||||
return (
|
||||
<AnimatedExpandableContainer
|
||||
isExpanded={!!selectedQueue}
|
||||
mode="fit-content"
|
||||
>
|
||||
{selectedQueueData && (
|
||||
<>
|
||||
<StyledContainer>
|
||||
<SettingsListCard
|
||||
items={[{ ...selectedQueueData, id: selectedQueueData.name }]}
|
||||
getItemLabel={(
|
||||
item: AdminPanelWorkerQueueHealth & { id: string },
|
||||
) => item.name}
|
||||
isLoading={false}
|
||||
RowRightComponent={({
|
||||
item,
|
||||
}: {
|
||||
item: AdminPanelWorkerQueueHealth;
|
||||
}) => (
|
||||
<Status
|
||||
color={
|
||||
item.status === AdminPanelHealthServiceStatus.OPERATIONAL
|
||||
? 'green'
|
||||
: 'red'
|
||||
}
|
||||
text={item.status.toLowerCase()}
|
||||
weight="medium"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</StyledContainer>
|
||||
<StyledQueueMetricsTitle> Metrics:</StyledQueueMetricsTitle>
|
||||
<StyledExpandedContent>
|
||||
<Table>
|
||||
<StyledTableRow>
|
||||
<TableCell align="left">Workers</TableCell>
|
||||
<TableCell align="right">{selectedQueueData.workers}</TableCell>
|
||||
</StyledTableRow>
|
||||
{Object.entries(selectedQueueData.metrics)
|
||||
.filter(([key]) => key !== '__typename')
|
||||
.map(([key, value]) => (
|
||||
<StyledTableRow key={key}>
|
||||
<TableCell align="left">
|
||||
{key.charAt(0).toUpperCase() + key.slice(1)}
|
||||
</TableCell>
|
||||
<TableCell align="right">{value}</TableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</Table>
|
||||
</StyledExpandedContent>
|
||||
</>
|
||||
)}
|
||||
</AnimatedExpandableContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Button } from 'twenty-ui';
|
||||
import {
|
||||
AdminPanelHealthServiceStatus,
|
||||
AdminPanelWorkerQueueHealth,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
const StyledQueueButtonsRow = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
margin-top: ${({ theme }) => theme.spacing(6)};
|
||||
`;
|
||||
|
||||
const StyledQueueHealthButton = styled(Button)<{
|
||||
isSelected?: boolean;
|
||||
status: AdminPanelHealthServiceStatus;
|
||||
}>`
|
||||
${({ isSelected, theme, status }) =>
|
||||
isSelected &&
|
||||
`
|
||||
background-color: ${
|
||||
status === AdminPanelHealthServiceStatus.OPERATIONAL
|
||||
? theme.tag.background.green
|
||||
: theme.tag.background.red
|
||||
};
|
||||
`}
|
||||
`;
|
||||
export const SettingsAdminQueueHealthButtons = ({
|
||||
queues,
|
||||
selectedQueue,
|
||||
toggleQueueVisibility,
|
||||
}: {
|
||||
queues: AdminPanelWorkerQueueHealth[];
|
||||
selectedQueue: string | null;
|
||||
toggleQueueVisibility: (queueName: string) => void;
|
||||
}) => {
|
||||
return (
|
||||
<StyledQueueButtonsRow>
|
||||
{queues.map((queue) => (
|
||||
<StyledQueueHealthButton
|
||||
key={queue.name}
|
||||
onClick={() => toggleQueueVisibility(queue.name)}
|
||||
title={queue.name}
|
||||
variant="secondary"
|
||||
isSelected={selectedQueue === queue.name}
|
||||
status={queue.status}
|
||||
/>
|
||||
))}
|
||||
</StyledQueueButtonsRow>
|
||||
);
|
||||
};
|
||||
@ -1,5 +1,6 @@
|
||||
import { SettingsAdminEnvVariables } from '@/settings/admin-panel/components/SettingsAdminEnvVariables';
|
||||
import { SettingsAdminGeneral } from '@/settings/admin-panel/components/SettingsAdminGeneral';
|
||||
import { SettingsAdminHealthStatus } from '@/settings/admin-panel/components/SettingsAdminHealthStatus';
|
||||
import { SETTINGS_ADMIN_TABS } from '@/settings/admin-panel/constants/SettingsAdminTabs';
|
||||
import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminTabsId';
|
||||
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
|
||||
@ -12,6 +13,8 @@ export const SettingsAdminTabContent = () => {
|
||||
return <SettingsAdminGeneral />;
|
||||
case SETTINGS_ADMIN_TABS.ENV_VARIABLES:
|
||||
return <SettingsAdminEnvVariables />;
|
||||
case SETTINGS_ADMIN_TABS.HEALTH_STATUS:
|
||||
return <SettingsAdminHealthStatus />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
import { AdminHealthService } from '@/settings/admin-panel/types/AdminHealthService';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
|
||||
import { SettingsListCard } from '../../components/SettingsListCard';
|
||||
import { SettingsAdminHealthStatusRightContainer } from './SettingsAdminHealthStatusRightContainer';
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
export const SettingsHealthStatusListCard = ({
|
||||
services,
|
||||
loading,
|
||||
}: {
|
||||
services: Array<AdminHealthService>;
|
||||
loading?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{services.map((service) => (
|
||||
<>
|
||||
<StyledLink
|
||||
to={getSettingsPath(SettingsPath.AdminPanelIndicatorHealthStatus, {
|
||||
indicatorName: service.id,
|
||||
})}
|
||||
>
|
||||
<SettingsListCard
|
||||
items={[service]}
|
||||
getItemLabel={(service) => service.name}
|
||||
isLoading={loading}
|
||||
RowRightComponent={({ item: service }) => (
|
||||
<SettingsAdminHealthStatusRightContainer service={service} />
|
||||
)}
|
||||
/>
|
||||
</StyledLink>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,5 @@
|
||||
export const SETTINGS_ADMIN_TABS = {
|
||||
GENERAL: 'general',
|
||||
ENV_VARIABLES: 'env-variables',
|
||||
HEALTH_STATUS: 'health-status',
|
||||
};
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const GET_INDICATOR_HEALTH_STATUS = gql`
|
||||
query GetIndicatorHealthStatus(
|
||||
$indicatorName: AdminPanelIndicatorHealthStatusInputEnum!
|
||||
) {
|
||||
getIndicatorHealthStatus(indicatorName: $indicatorName) {
|
||||
status
|
||||
details
|
||||
queues {
|
||||
name
|
||||
status
|
||||
workers
|
||||
metrics {
|
||||
failed
|
||||
completed
|
||||
waiting
|
||||
active
|
||||
delayed
|
||||
prioritized
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,36 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const GET_SYSTEM_HEALTH_STATUS = gql`
|
||||
query GetSystemHealthStatus {
|
||||
getSystemHealthStatus {
|
||||
database {
|
||||
status
|
||||
details
|
||||
}
|
||||
redis {
|
||||
status
|
||||
details
|
||||
}
|
||||
worker {
|
||||
status
|
||||
queues {
|
||||
name
|
||||
workers
|
||||
status
|
||||
metrics {
|
||||
failed
|
||||
completed
|
||||
waiting
|
||||
active
|
||||
delayed
|
||||
prioritized
|
||||
}
|
||||
}
|
||||
}
|
||||
messageSync {
|
||||
status
|
||||
details
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,12 @@
|
||||
import { useGetSystemHealthStatusQuery } from '~/generated/graphql';
|
||||
|
||||
export const useGetUptoDateHealthStatus = () => {
|
||||
const { data, loading } = useGetSystemHealthStatusQuery({
|
||||
fetchPolicy: 'network-only',
|
||||
});
|
||||
|
||||
return {
|
||||
healthStatus: data?.getSystemHealthStatus,
|
||||
healthStatusLoading: loading,
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
import {
|
||||
AdminPanelHealthServiceData,
|
||||
AdminPanelWorkerQueueHealth,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
type AdminWorkerService = AdminPanelHealthServiceData & {
|
||||
id: string;
|
||||
name: string;
|
||||
queues: AdminPanelWorkerQueueHealth[] | null | undefined;
|
||||
};
|
||||
|
||||
export type AdminHealthService = AdminWorkerService;
|
||||
@ -34,6 +34,8 @@ export enum SettingsPath {
|
||||
Releases = 'releases',
|
||||
AdminPanel = 'admin-panel',
|
||||
FeatureFlags = 'admin-panel/feature-flags',
|
||||
AdminPanelHealthStatus = 'admin-panel#health-status',
|
||||
AdminPanelIndicatorHealthStatus = 'admin-panel/health-status/:indicatorName',
|
||||
Lab = 'lab',
|
||||
Roles = 'roles',
|
||||
RoleDetail = 'roles/:roleId',
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import {
|
||||
GithubVersionLink,
|
||||
H2Title,
|
||||
IconWorld,
|
||||
Section,
|
||||
UndecoratedLink,
|
||||
} from 'twenty-ui';
|
||||
import { H2Title, IconWorld, Section, UndecoratedLink } from 'twenty-ui';
|
||||
|
||||
import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
|
||||
import { SettingsCard } from '@/settings/components/SettingsCard';
|
||||
@ -18,7 +12,6 @@ import { WorkspaceLogoUploader } from '@/settings/workspace/components/Workspace
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
|
||||
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
|
||||
import packageJson from '../../../package.json';
|
||||
|
||||
export const SettingsWorkspace = () => {
|
||||
const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
|
||||
@ -70,9 +63,6 @@ export const SettingsWorkspace = () => {
|
||||
<Section>
|
||||
<DeleteWorkspace />
|
||||
</Section>
|
||||
<Section>
|
||||
<GithubVersionLink version={packageJson.version} />
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
|
||||
@ -0,0 +1,137 @@
|
||||
import { SettingsAdminQueueExpandableContainer } from '@/settings/admin-panel/components/SettingsAdminQueueExpandableContainer';
|
||||
import { SettingsAdminQueueHealthButtons } from '@/settings/admin-panel/components/SettingsAdminQueueHealthButtons';
|
||||
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 {
|
||||
AdminPanelHealthServiceStatus,
|
||||
AdminPanelIndicatorHealthStatusInputEnum,
|
||||
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};
|
||||
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 { data, loading } = useGetIndicatorHealthStatusQuery({
|
||||
variables: {
|
||||
indicatorName: indicatorName as AdminPanelIndicatorHealthStatusInputEnum,
|
||||
},
|
||||
});
|
||||
|
||||
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={[
|
||||
{
|
||||
children: t`Other`,
|
||||
href: getSettingsPath(SettingsPath.AdminPanel),
|
||||
},
|
||||
{
|
||||
children: t`Server Admin Panel`,
|
||||
href: getSettingsPath(SettingsPath.AdminPanel),
|
||||
},
|
||||
{
|
||||
children: t`Health Status`,
|
||||
href: getSettingsPath(SettingsPath.AdminPanelHealthStatus),
|
||||
},
|
||||
{ children: `${indicatorName}` },
|
||||
]}
|
||||
>
|
||||
<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 ? (
|
||||
<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}
|
||||
/>
|
||||
<SettingsAdminQueueExpandableContainer
|
||||
queues={data?.getIndicatorHealthStatus.queues ?? []}
|
||||
selectedQueue={selectedQueue}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Section>
|
||||
) : null}
|
||||
|
||||
{indicatorName === AdminPanelIndicatorHealthStatusInputEnum.DATABASE ||
|
||||
indicatorName === AdminPanelIndicatorHealthStatusInputEnum.REDIS ? (
|
||||
<Section>
|
||||
{formattedDetails && (
|
||||
<StyledDetailsContainer>
|
||||
{formattedDetails}
|
||||
</StyledDetailsContainer>
|
||||
)}
|
||||
</Section>
|
||||
) : null}
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user