fix: type issues

Author: VipinDevelops

backend/analytics_server/app.py

@@ -8,6 +8,7 @@
 
 from mhq.store import configure_db_with_app
 from mhq.api.hello import app as core_api
+from mhq.api.health import app as core_api
 from mhq.api.settings import app as settings_api
 from mhq.api.pull_requests import app as pull_requests_api
 from mhq.api.incidents import app as incidents_api

backend/analytics_server/mhq/api/health.py

@@ -0,0 +1,10 @@
+from flask import Blueprint
+
+app = Blueprint("health", __name__)
+
+@app.route("/health", methods=["GET"])
+def health_check():
+    return {
+        "message": "server is up and running",
+        "status": "healthy"
+    }

backend/analytics_server/sync_app.py

@@ -8,6 +8,7 @@
 
 from mhq.store import configure_db_with_app
 from mhq.api.hello import app as core_api
+from mhq.api.health import app as core_api
 from mhq.api.sync import app as sync_api
 
 SYNC_SERVER_PORT = getenv("SYNC_SERVER_PORT")

web-server/app/api/stream/route.ts

@@ -29,8 +29,8 @@ const checkServiceStatus = async (
   try {
     switch (serviceName) {
       case ServiceNames.API_SERVER:
-        const apiResponse = await handleRequest('');
-        return apiResponse.message.includes('hello world');
+        const apiResponse = await handleRequest('/health');
+        return apiResponse.status.includes('healthy');
 
       case ServiceNames.REDIS:
         const redisPingResponse = await execPromise(
@@ -45,8 +45,8 @@ const checkServiceStatus = async (
         return postgresResponse.includes('accepting connections');
 
       case ServiceNames.SYNC_SERVER:
-        const syncServerResponse = await handleSyncServerRequest('');
-        return syncServerResponse.message.includes('hello world');
+        const syncServerResponse = await handleSyncServerRequest('/health');
+        return syncServerResponse.status.includes('healthy');
 
       default:
         console.warn(`Service ${serviceName} not recognized.`);

web-server/pages/system.tsx

@@ -1,4 +1,5 @@
 import { Authenticated } from 'src/components/Authenticated';
+
 import { FlexBox } from '@/components/FlexBox';
 import Loader from '@/components/Loader';
 import { SystemStatus } from '@/components/Service/SystemStatus';
@@ -28,11 +29,11 @@ function Service() {
     <PageWrapper
       title={
         <FlexBox gap={1} alignCenter>
-          System
+          System logs
         </FlexBox>
       }
       hideAllSelectors
-      pageTitle="System"
+      pageTitle="System logs"
       showEvenIfNoTeamSelected={true}
       isLoading={isLoading}
     >

web-server/src/components/Service/SystemStatus.tsx

@@ -1,10 +1,11 @@
-import { Box, CircularProgress, Divider } from '@mui/material';
+import { Box, CircularProgress, Divider, useTheme } from '@mui/material';
 import { FC, useEffect } from 'react';
+import { alpha } from '@mui/material/styles';
 
 import { ServiceNames } from '@/constants/service';
 import { StreamEventType } from '@/constants/stream';
 import { CardRoot } from '@/content/DoraMetrics/DoraCards/sharedComponents';
-import { serviceSlice, ServiceStatusState } from '@/slices/service';
+import { serviceSlice } from '@/slices/service';
 import { useDispatch, useSelector } from '@/store';
 
 import { FlexBox } from '../FlexBox';
@@ -14,13 +15,13 @@ import { Line } from '../Text';
 export const SystemStatus: FC = () => {
   const dispatch = useDispatch();
   const loading = useSelector((state) => state.service.loading);
-  const services = useSelector(
-    (state: { service: { services: ServiceStatusState } }) =>
-      state.service.services
-  );
+  const services = useSelector((state) => state.service.services);
+
   console.log('Status Page render');
+  const theme = useTheme();
   useEffect(() => {
     const eventSource = new EventSource(`/api/stream`);
+
     eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data);
 
@@ -56,12 +57,13 @@ export const SystemStatus: FC = () => {
 
   const { addPage } = useOverlayPage();
 
-  const ServiceTitle: { [key: string]: string } = {
+  const ServiceTitle: Record<ServiceNames, string> = {
     [ServiceNames.API_SERVER]: 'Backend Server',
     [ServiceNames.REDIS]: 'Redis Database',
     [ServiceNames.POSTGRES]: 'Postgres Database',
     [ServiceNames.SYNC_SERVER]: 'Sync Server'
   };
+
   return (
     <FlexBox col gap={2} sx={{ padding: '16px' }}>
       <Line bold white fontSize="24px" sx={{ mb: 2 }}>
@@ -84,17 +86,16 @@ export const SystemStatus: FC = () => {
           {Object.keys(services).map((serviceName) => {
             const serviceKey = serviceName as ServiceNames;
             const { isUp } = services[serviceKey];
+
             return (
               <CardRoot
                 key={serviceName}
                 onClick={() => {
                   addPage({
                     page: {
                       ui: 'system_logs',
-                      title: `${ServiceTitle[serviceName]} Logs`,
-                      props: {
-                        serviceName: serviceName
-                      }
+                      title: `${ServiceTitle[serviceKey]} Logs`,
+                      props: { serviceName }
                     }
                   });
                 }}
@@ -106,7 +107,9 @@ export const SystemStatus: FC = () => {
                   backgroundColor: 'rgba(255, 255, 255, 0.05)',
                   borderRadius: '12px',
                   border: `1px solid ${
-                    isUp ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)'
+                    isUp
+                      ? alpha(theme.colors.success.main, 0.3)
+                      : alpha(theme.colors.error.main, 0.3)
                   }`,
                   padding: '16px',
                   cursor: 'pointer',
@@ -125,7 +128,7 @@ export const SystemStatus: FC = () => {
                         alignItems: 'center'
                       }}
                     >
-                      {ServiceTitle[serviceName]}
+                      {ServiceTitle[serviceKey]}
                       <Box
                         component="span"
                         sx={{
@@ -134,9 +137,11 @@ export const SystemStatus: FC = () => {
                           width: '10px',
                           height: '10px',
                           borderRadius: '50%',
-                          backgroundColor: isUp ? '#28a745' : '#dc3545'
+                          backgroundColor: isUp
+                            ? theme.colors.success.main
+                            : theme.colors.error.main
                         }}
-                      ></Box>
+                      />
                     </Line>
                   </FlexBox>
 

web-server/src/constants/stream.ts

@@ -5,9 +5,7 @@ type LogFile = {
   serviceName: ServiceNames;
 };
 
-type ServiceStatus = {
-  [key in ServiceNames]: { isUp: boolean };
-};
+type ServiceStatus = Record<ServiceNames, { isUp: boolean }>;
 
 const UPDATE_INTERVAL = 10000;
 

web-server/src/content/Service/SystemLogs.tsx

@@ -3,17 +3,13 @@ import { useRouter } from 'next/router';
 import { useEffect, useRef, useMemo } from 'react';
 
 import { ServiceNames } from '@/constants/service';
-import { ServiceStatusState } from '@/slices/service';
 import { useSelector } from '@/store';
 
 export const SystemLogs = ({ serviceName }: { serviceName: ServiceNames }) => {
   const router = useRouter();
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const services = useSelector(
-    (state: { service: { services: ServiceStatusState } }) =>
-      state.service.services
-  );
+  const services = useSelector((state) => state.service.services);
 
   const logs = useMemo(() => {
     return serviceName ? services[serviceName]?.logs || [] : [];

web-server/src/slices/service.ts

@@ -11,14 +11,12 @@ type Service = {
   logs: string[];
 };
 
-export type ServiceStatusState = {
-  [key in ServiceNames]: Service;
-};
+export type ServiceStatusState = Record<ServiceNames, Service>;
 
 type State = {
   services: ServiceStatusState;
   loading: boolean;
-  error?: string;
+  error: string | null;
 };
 
 const initialState: State = {
@@ -29,11 +27,11 @@ const initialState: State = {
     [ServiceNames.SYNC_SERVER]: { isUp: false, logs: [] }
   },
   loading: true,
-  error: undefined
+  error: null
 };
 
 type SetStatusPayload = {
-  statuses: { [key in ServiceNames]: Status };
+  statuses: Record<ServiceNames, Status>;
 };
 
 export const serviceSlice = createSlice({
@@ -47,11 +45,14 @@ export const serviceSlice = createSlice({
       state.loading = false;
       const { statuses } = action.payload;
 
-      for (const [serviceName, { isUp }] of Object.entries(statuses)) {
-        if (state.services[serviceName as ServiceNames]) {
-          state.services[serviceName as ServiceNames].isUp = isUp;
+      Object.entries(statuses).forEach(([serviceNameKey, { isUp }]) => {
+        const serviceName = serviceNameKey as ServiceNames;
+        const service = state.services[serviceName];
+
+        if (service) {
+          service.isUp = isUp;
         }
-      }
+      });
     },
     setServiceLogs: (
       state,