From d30071339a15951abefa9dff751e20e222a74d45 Mon Sep 17 00:00:00 2001
From: Modupe <falodunmodupeola@gmail.com>
Date: Wed, 18 Jun 2025 14:04:16 +0300
Subject: [PATCH 1/2] add status check for devices

---
 content/_data/constants.yml      |  4 +++-
 src/components/ServiceStatus.jsx | 23 ++++++++++++++----
 src/hooks/useStatus.jsx          | 40 +++++++++++++-------------------
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/content/_data/constants.yml b/content/_data/constants.yml
index efb3da17993c..ac8437bea84f 100644
--- a/content/_data/constants.yml
+++ b/content/_data/constants.yml
@@ -213,9 +213,11 @@ header_nav:
       basis: "PRX, CZ"
       topology: "Star"
       status_url: FIXME
+      device_id: "Q5"
 
     - name: VTT Q50
       qubits: 50
       basis: "PRX, CZ"
       topology: "Square grid"
-      status_url: FIXME
\ No newline at end of file
+      status_url: FIXME
+      device_id: "Q50"
\ No newline at end of file
diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx
index ede90385a28b..88acb991ecc3 100644
--- a/src/components/ServiceStatus.jsx
+++ b/src/components/ServiceStatus.jsx
@@ -1,10 +1,13 @@
 import React from 'react'
+import { useMemo } from 'react';
+
 
 import { useStatus } from '../hooks/useStatus'
 import { CCard, CCardTitle, CCardContent, CStatus } from '@cscfi/csc-ui-react';
 // import { StatusIndicator } from './StatusIndicator'
 
 const StatusCard = (props) => {
+  const isOnline = props.health;
   return (
     <CCard className='border-[0.2px] border-gray-100 rounded-none shadow-md hover:shadow-xl col-span-1 h-[236px]'>
       <CCardTitle className='font-bold text-on-white text-[18px]'>
@@ -19,7 +22,7 @@ const StatusCard = (props) => {
 
         <div className='flex flex-col gap-0 text-[14px]'>
           <strong>Service status:</strong>
-          {status === "available" ? (
+          {isOnline ? (
             <div className='text-center text-[#204303] bg-[#B9DC9C] border-[0.5px] border-[#204303] rounded-[100px] w-[88px] h-[25px]'>
               <p className='font-bold text-[14px]'>Online</p>
             </div>
@@ -35,8 +38,20 @@ const StatusCard = (props) => {
 }
 
 export const ServiceStatus = (props) => {
-  const status = useStatus('https://fiqci-backend-fiqci-workspace.2.rahtiapp.fi/healthcheck')
+  const { status: statusList } = useStatus("https://fiqci-backend.2.rahtiapp.fi/devices/healthcheck");
   const qcs = props["quantum-computers"] || [];
+
+  const devicesWithStatus = (qcs.length === 0 || !Array.isArray(statusList))
+    ? qcs
+    : qcs.map(device => {
+        const deviceStatus = statusList.find(({ name }) => name === device.device_id);
+        return {
+          ...device,
+          health: deviceStatus?.health ?? false,
+        };
+      });
+
+
   return (
     <div className="flex gap-6 flex-col sm:flex-col items-stretch text-on-white">
 
@@ -52,8 +67,8 @@ export const ServiceStatus = (props) => {
         </p>
       </div>
       <div className='pt-[24px] pb-[60px] grid grid-cols-1 min-[450px]:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 min-[2600px]:grid-cols-4 w-full gap-[24px]'>
-        {qcs.map((qc, index) => (
-          <StatusCard key={index} {...qc} />
+        {devicesWithStatus.map((qc, index) => (
+          <StatusCard key={qc.device_id || index} {...qc} />
         ))}
       </div>
     </div>
diff --git a/src/hooks/useStatus.jsx b/src/hooks/useStatus.jsx
index 2181b29b1770..c8c2b22bb8b3 100644
--- a/src/hooks/useStatus.jsx
+++ b/src/hooks/useStatus.jsx
@@ -1,33 +1,25 @@
 import { useEffect, useState } from 'react'
 
-const logResult = result => {
-  const { status: fetchStatus, message: fetchMessage } = result
-  const logStream = fetchStatus === 'Success' ? console.log : console.warn
-  
-  logStream(fetchMessage)
-}
-
-export const useStatus = statusUrl => {
-  const [status, setStatus] = useState(null)
-
+export const useStatus = (statusUrl)  => {
+  const [status, setStatus] = useState([])
+  const [error, setError] = useState(null);
 
   useEffect(() => {
-    let ignore = false
-
-    const fetchStatus = async url => {
-      const response = await fetch(url)
-      const result = await response.json()
-
-      if (!ignore) {
-        logResult(result)
-        !!result?.data && setStatus(result.data.status)
+    const fetchStatus = async () => {
+    const url = statusUrl;
+    try {
+        const resp = await fetch (url);
+        const result = await resp.json();
+        const device_status = result.data
+        setStatus(result?.data || []);
+      } catch (err) {
+        console.error(err);
+        setError(err);
       }
     }
 
-    fetchStatus(statusUrl)
-
-    return () => { ignore = true }
-  }, [statusUrl])
+  fetchStatus();
+}, [statusUrl]);
 
-  return status
+  return { status, error };
 }

From db16673514ec37e9e211da091747a76afbb3746a Mon Sep 17 00:00:00 2001
From: Modupe <falodunmodupeola@gmail.com>
Date: Wed, 18 Jun 2025 14:47:24 +0300
Subject: [PATCH 2/2] remove unused vars

---
 src/components/ServiceStatus.jsx | 2 --
 src/hooks/useStatus.jsx          | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx
index 88acb991ecc3..11325a16f5f3 100644
--- a/src/components/ServiceStatus.jsx
+++ b/src/components/ServiceStatus.jsx
@@ -1,6 +1,4 @@
 import React from 'react'
-import { useMemo } from 'react';
-
 
 import { useStatus } from '../hooks/useStatus'
 import { CCard, CCardTitle, CCardContent, CStatus } from '@cscfi/csc-ui-react';
diff --git a/src/hooks/useStatus.jsx b/src/hooks/useStatus.jsx
index c8c2b22bb8b3..b1e68505b31a 100644
--- a/src/hooks/useStatus.jsx
+++ b/src/hooks/useStatus.jsx
@@ -10,7 +10,6 @@ export const useStatus = (statusUrl)  => {
     try {
         const resp = await fetch (url);
         const result = await resp.json();
-        const device_status = result.data
         setStatus(result?.data || []);
       } catch (err) {
         console.error(err);