Admin panel: App health check

packages/twenty-front/src/generated/graphql.tsx

@@ -29,6 +29,7 @@ export type AdminPanelHealthServiceData = {
   __typename?: 'AdminPanelHealthServiceData';
   description: Scalars['String'];
   details?: Maybe<Scalars['String']>;
+  errorMessage?: Maybe<Scalars['String']>;
   id: Scalars['String'];
   label: Scalars['String'];
   queues?: Maybe<Array<AdminPanelWorkerQueueHealth>>;
@@ -625,6 +626,7 @@ export type GlobalSearchRecord = {
 };
 
 export enum HealthIndicatorId {
+  app = 'app',
   connectedAccount = 'connectedAccount',
   database = 'database',
   redis = 'redis',
@@ -2415,7 +2417,7 @@ export type GetIndicatorHealthStatusQueryVariables = Exact<{
 }>;
 
 
-export type GetIndicatorHealthStatusQuery = { __typename?: 'Query', getIndicatorHealthStatus: { __typename?: 'AdminPanelHealthServiceData', id: string, label: string, description: string, status: AdminPanelHealthServiceStatus, details?: string | null, queues?: Array<{ __typename?: 'AdminPanelWorkerQueueHealth', id: string, queueName: string, status: AdminPanelHealthServiceStatus }> | null } };
+export type GetIndicatorHealthStatusQuery = { __typename?: 'Query', getIndicatorHealthStatus: { __typename?: 'AdminPanelHealthServiceData', id: string, label: string, description: string, status: AdminPanelHealthServiceStatus, errorMessage?: string | null, details?: string | null, queues?: Array<{ __typename?: 'AdminPanelWorkerQueueHealth', id: string, queueName: string, status: AdminPanelHealthServiceStatus }> | null } };
 
 export type GetQueueMetricsQueryVariables = Exact<{
   queueName: Scalars['String'];
@@ -4265,6 +4267,7 @@ export const GetIndicatorHealthStatusDocument = gql`
     label
     description
     status
+    errorMessage
     details
     queues {
       id

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -450,13 +450,13 @@ export const SettingsRoutes = ({
 
       {isAdminPageEnabled && (
         <>
-          <Route path={SettingsPath.AdminPanel} element={<SettingsAdmin />} />
+          <Route path={SettingsPath.ServerAdmin} element={<SettingsAdmin />} />
           <Route
             path={SettingsPath.FeatureFlags}
             element={<SettingsAdminContent />}
           />
           <Route
-            path={SettingsPath.AdminPanelIndicatorHealthStatus}
+            path={SettingsPath.ServerAdminIndicatorHealthStatus}
             element={<SettingsAdminIndicatorHealthStatus />}
           />
         </>

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/ConnectedAccountHealthStatus.tsx

@@ -17,11 +17,13 @@ export const ConnectedAccountHealthStatus = () => {
   }
 
   const parsedDetails = JSON.parse(details);
+  const serviceDetails = parsedDetails.details;
 
   const isMessageSyncDown =
-    parsedDetails.messageSync?.status === AdminPanelHealthServiceStatus.OUTAGE;
+    serviceDetails.messageSync?.status === AdminPanelHealthServiceStatus.OUTAGE;
   const isCalendarSyncDown =
-    parsedDetails.calendarSync?.status === AdminPanelHealthServiceStatus.OUTAGE;
+    serviceDetails.calendarSync?.status ===
+    AdminPanelHealthServiceStatus.OUTAGE;
 
   const errorMessages = [];
   if (isMessageSyncDown) {
@@ -39,16 +41,16 @@ export const ConnectedAccountHealthStatus = () => {
         </StyledErrorMessage>
       )}
 
-      {!isMessageSyncDown && parsedDetails.messageSync?.details && (
+      {!isMessageSyncDown && serviceDetails.messageSync?.details && (
         <SettingsAdminHealthAccountSyncCountersTable
-          details={parsedDetails.messageSync.details}
+          details={serviceDetails.messageSync.details}
           title="Message Sync Status"
         />
       )}
 
-      {!isCalendarSyncDown && parsedDetails.calendarSync?.details && (
+      {!isCalendarSyncDown && serviceDetails.calendarSync?.details && (
         <SettingsAdminHealthAccountSyncCountersTable
-          details={parsedDetails.calendarSync.details}
+          details={serviceDetails.calendarSync.details}
           title="Calendar Sync Status"
         />
       )}

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/JsonDataIndicatorHealthStatus.tsx

@@ -0,0 +1,49 @@
+import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/health-status/contexts/SettingsAdminIndicatorHealthContext';
+import { JsonTree } from '@/workflow/components/json-visualizer/components/JsonTree';
+import styled from '@emotion/styled';
+import { useContext } from 'react';
+import { Section } from 'twenty-ui';
+import { AdminPanelHealthServiceStatus } from '~/generated/graphql';
+
+const StyledDetailsContainer = styled.div`
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(4)};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  white-space: pre-wrap;
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+const StyledErrorMessage = styled.div`
+  color: ${({ theme }) => theme.color.red};
+  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const JsonDataIndicatorHealthStatus = () => {
+  const { indicatorHealth } = useContext(SettingsAdminIndicatorHealthContext);
+
+  const parsedDetails = indicatorHealth.details
+    ? JSON.parse(indicatorHealth.details)
+    : null;
+
+  const isDown =
+    !indicatorHealth.status ||
+    indicatorHealth.status === AdminPanelHealthServiceStatus.OUTAGE;
+
+  return (
+    <Section>
+      {isDown && (
+        <StyledErrorMessage>
+          {indicatorHealth.errorMessage ||
+            `${indicatorHealth.label} service is unreachable`}
+        </StyledErrorMessage>
+      )}
+      {parsedDetails && (
+        <StyledDetailsContainer>
+          <JsonTree value={parsedDetails} />
+        </StyledDetailsContainer>
+      )}
+    </Section>
+  );
+};

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminIndicatorHealthStatusContent.tsx

@@ -1,5 +1,5 @@
 import { ConnectedAccountHealthStatus } from '@/settings/admin-panel/health-status/components/ConnectedAccountHealthStatus';
-import { DatabaseAndRedisHealthStatus } from '@/settings/admin-panel/health-status/components/DatabaseAndRedisHealthStatus';
+import { JsonDataIndicatorHealthStatus } from '@/settings/admin-panel/health-status/components/JsonDataIndicatorHealthStatus';
 import { WorkerHealthStatus } from '@/settings/admin-panel/health-status/components/WorkerHealthStatus';
 import { useParams } from 'react-router-dom';
 import { HealthIndicatorId } from '~/generated/graphql';
@@ -10,11 +10,13 @@ export const SettingsAdminIndicatorHealthStatusContent = () => {
   switch (indicatorId) {
     case HealthIndicatorId.database:
     case HealthIndicatorId.redis:
-      return <DatabaseAndRedisHealthStatus />;
+    case HealthIndicatorId.app:
+      return <JsonDataIndicatorHealthStatus />;
     case HealthIndicatorId.worker:
       return <WorkerHealthStatus />;
     case HealthIndicatorId.connectedAccount:
       return <ConnectedAccountHealthStatus />;
+
     default:
       return null;
   }

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsHealthStatusListCard.tsx

@@ -20,7 +20,7 @@ export const SettingsHealthStatusListCard = ({
         <SettingsAdminHealthStatusRightContainer status={service.status} />
       )}
       to={(service) =>
-        getSettingsPath(SettingsPath.AdminPanelIndicatorHealthStatus, {
+        getSettingsPath(SettingsPath.ServerAdminIndicatorHealthStatus, {
           indicatorId: service.id,
         })
       }

packages/twenty-front/src/modules/settings/admin-panel/health-status/contexts/SettingsAdminIndicatorHealthContext.tsx

@@ -14,6 +14,7 @@ export const SettingsAdminIndicatorHealthContext =
       id: '',
       label: '',
       description: '',
+      errorMessage: '',
       status: AdminPanelHealthServiceStatus.OPERATIONAL,
       details: '',
       queues: [],

packages/twenty-front/src/modules/settings/admin-panel/health-status/graphql/queries/getIndicatorHealthStatus.ts

@@ -7,6 +7,7 @@ export const GET_INDICATOR_HEALTH_STATUS = gql`
       label
       description
       status
+      errorMessage
       details
       queues {
         id

packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx

@@ -179,7 +179,7 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
       items: [
         {
           label: t`Server Admin`,
-          path: SettingsPath.AdminPanel,
+          path: SettingsPath.ServerAdmin,
           Icon: IconServer,
           isHidden: !isAdminEnabled,
         },

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -34,10 +34,10 @@ export enum SettingsPath {
   DevelopersNewWebhook = 'developers/webhooks/new',
   DevelopersNewWebhookDetail = 'developers/webhooks/:webhookId',
   Releases = 'releases',
-  AdminPanel = 'admin-panel',
-  FeatureFlags = 'admin-panel/feature-flags',
-  AdminPanelHealthStatus = 'admin-panel#health-status',
-  AdminPanelIndicatorHealthStatus = 'admin-panel/health-status/:indicatorId',
+  ServerAdmin = 'server-admin',
+  FeatureFlags = 'server-admin/feature-flags',
+  ServerAdminHealthStatus = 'server-admin#health-status',
+  ServerAdminIndicatorHealthStatus = 'server-admin/health-status/:indicatorId',
   Lab = 'lab',
   Roles = 'roles',
   RoleDetail = 'roles/:roleId',

packages/twenty-front/src/pages/settings/admin-panel/SettingsAdmin.tsx

@@ -14,9 +14,9 @@ export const SettingsAdmin = () => {
       links={[
         {
           children: t`Other`,
-          href: getSettingsPath(SettingsPath.AdminPanel),
+          href: getSettingsPath(SettingsPath.ServerAdmin),
         },
-        { children: t`Server Admin Panel` },
+        { children: t`Server Admin` },
       ]}
     >
       <SettingsPageContainer>

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

@@ -40,15 +40,15 @@ export const SettingsAdminIndicatorHealthStatus = () => {
       links={[
         {
           children: t`Other`,
-          href: getSettingsPath(SettingsPath.AdminPanel),
+          href: getSettingsPath(SettingsPath.ServerAdmin),
         },
         {
-          children: t`Server Admin Panel`,
-          href: getSettingsPath(SettingsPath.AdminPanel),
+          children: t`Server Admin`,
+          href: getSettingsPath(SettingsPath.ServerAdmin),
         },
         {
           children: t`Health Status`,
-          href: getSettingsPath(SettingsPath.AdminPanelHealthStatus),
+          href: getSettingsPath(SettingsPath.ServerAdminHealthStatus),
         },
         { children: `${data?.getIndicatorHealthStatus?.label}` },
       ]}
@@ -60,6 +60,7 @@ export const SettingsAdminIndicatorHealthStatus = () => {
               id: data?.getIndicatorHealthStatus?.id ?? '',
               label: data?.getIndicatorHealthStatus?.label ?? '',
               description: data?.getIndicatorHealthStatus?.description ?? '',
+              errorMessage: data?.getIndicatorHealthStatus?.errorMessage,
               status:
                 data?.getIndicatorHealthStatus?.status ??
                 AdminPanelHealthServiceStatus.OUTAGE,