fix(STAR-1492): show correct status of db even if LIVE_URL is bad

Also added a tooltip for the app version.
OwnZones · Jan 28, 2025 · 20cc338 · 20cc338
1 parent efa2c0f
commit 20cc338
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/src/app/api/syshealth/route.ts b/src/app/api/syshealth/route.ts
@@ -4,49 +4,42 @@ import { connected } from '../../../api/mongoClient/dbClient';
 import { isAuthenticated } from '../../../api/manager/auth';
 import { LIVE_BASE_API_PATH } from '../../../constants';
 
+let liveApiUrl: string;
+if (!process.env.LIVE_URL) {
+  liveApiUrl = 'LIVE_URL is not set in environment variables';
+} else {
+  liveApiUrl = new URL(LIVE_BASE_API_PATH, process.env.LIVE_URL).toString();
+}
+
 export async function GET(): Promise<NextResponse> {
   if (!(await isAuthenticated())) {
     return new NextResponse(`Not Authorized!`, {
       status: 403
     });
   }
+
   const isConnectedToLive = await getIngests()
     .then(() => true)
     .catch(() => false);
 
   const isConnectedToDatabase = await connected().catch(() => false);
 
-  if (isConnectedToLive && isConnectedToDatabase) {
-    return new NextResponse(
-      JSON.stringify({
-        message: 'Connected!',
-        database: {
-          connected: isConnectedToDatabase
-        },
-        liveApi: { connected: isConnectedToLive }
-      }),
-      {
-        status: 200
-      }
-    );
-  }
-
   const databaseUrl = new URL('', process.env.MONGODB_URI);
 
   return new NextResponse(
     JSON.stringify({
-      message: 'Something went wrong with the connection!',
+      message: '',
       liveApi: {
         connected: isConnectedToLive,
-        url: new URL(LIVE_BASE_API_PATH, process.env.LIVE_URL)
+        url: liveApiUrl
       },
       database: {
         connected: isConnectedToDatabase,
         url: databaseUrl.host + databaseUrl.pathname
       }
     }),
     {
-      status: 500
+      status: 200
     }
   );
 }
diff --git a/src/components/sideNav/SideNavConnections.tsx b/src/components/sideNav/SideNavConnections.tsx
@@ -28,26 +28,25 @@ const SideNavConnections = () => {
   const [appHealth, setAppHealth] = useState<IApp>({});
   const [allConnected, setAllConnected] = useState<boolean>(false);
   const t = useTranslate();
+  const [isAppHovered, setIsAppHovered] = useState(false);
 
   // TODO Maybe there is a better way to compare the objects.
   const checkConnections = useCallback(() => {
     checkApiConnections()
       .then((data) => {
-        if (JSON.stringify(data) !== JSON.stringify(connection))
-          setConnection(data);
-        if (loading) setLoading(() => false);
+        setConnection(data);
+        setLoading(false);
       })
       .catch(() => {
-        if (loading) setLoading(false);
+        setLoading(false);
         setConnection({});
       });
   }, []);
 
   const checkApp = useCallback(() => {
     checkAppHealth()
       .then((data) => {
-        if (JSON.stringify(data) !== JSON.stringify(appHealth))
-          setAppHealth(data);
+        setAppHealth(data);
       })
       .catch(() => {
         setAppHealth({});
@@ -89,14 +88,24 @@ const SideNavConnections = () => {
           ) : (
             <>
               <div
-                className={`${
+                className={`relative ${
                   appHealth?.version ? 'text-confirm' : 'text-button-delete'
                 }`}
+                onMouseEnter={() => setIsAppHovered(true)}
+                onMouseLeave={() => setIsAppHovered(false)}
               >
                 {t('application')}
+                {isAppHovered && (
+                  <div
+                    className="absolute top-[-40px] bg-black text-white px-3 py-1 rounded-md text-sm shadow-lg"
+                    style={{ whiteSpace: 'nowrap', width: 'auto' }}
+                  >
+                    Application version: {appHealth?.version}
+                  </div>
+                )}
               </div>
               <div
-                className={`${
+                className={`relative ${
                   connection?.liveApi?.connected
                     ? 'text-confirm'
                     : 'text-button-delete'
@@ -105,7 +114,7 @@ const SideNavConnections = () => {
                 {t('system_controller')}
               </div>
               <div
-                className={`${
+                className={`relative ${
                   connection?.database?.connected
                     ? 'text-confirm'
                     : 'text-button-delete'