Conversation
JooNiv
commented
Feb 25, 2026
JooNiv
commented
- Add more status options
- In addition to healthcheck also get and display status from device info e.g "booked" or "paused"
- If fetching status from device info fails just display the status from healthcheck
- In addition to healthcheck also get and display status from device info e.g "booked" or "paused"
- Move api base url to src/config.js for quality of life 😄
| <p className="pb-2"><strong>Basis gates:</strong> {deviceData.basis}</p> | ||
| <p className="pb-2"><strong>Topology:</strong> {deviceData.topology}</p> | ||
| </div> | ||
| const status_options = ["offline", "online", "healthy", "unknown"] |
There was a problem hiding this comment.
In what cases would the device be healthy and not online? Or what do these different status represent?
There was a problem hiding this comment.
Maybe :["offline", "online", "maintenance", "booked", "unknown"] instead?
| const isOnline = props.health; | ||
| const { onClick, ...rest } = props | ||
|
|
||
| const status_options = ["offline", "online", "healthy", "unknown"] |
There was a problem hiding this comment.
Same as the comment above
| const { bookingData: bookingData } = useBookings(`${API_BASE_URL}/bookings`) | ||
| const qcs = Array.isArray(props["quantum-computers"]) ? props["quantum-computers"] : []; | ||
| const qcsKey = useMemo( | ||
| () => qcs.map(d => d?.device_id?.toLowerCase()).filter(Boolean).sort().join('|'), |
There was a problem hiding this comment.
what is d in this case? Maybe device or dev instead of d. It's clearer
|
|
||
| qcs.forEach((device) => { | ||
| const id = device.device_id.toLowerCase(); | ||
| fetch(`${API_BASE_URL}/device/${id}`) |
There was a problem hiding this comment.
why fetch for each. why not fetch everything and the filter based on the id?
There was a problem hiding this comment.
Fetching separately because the backend currently has no endpoint for fetching all the devices. Would probably be smart to add one tho
There was a problem hiding this comment.
That's pretty easy to add since we are fetching the list once and then filtering on the backend. We can just add a route to return all or update the controller to return all if no device id is given, otherwise return info for the given device
| const handleCardClick = (qc) => { | ||
| setModalProps({ ...qc, devicesWithStatus }); | ||
|
|
||
| const add_device_status = devicesWithStatus.map(d => d.device_id.toLowerCase() === qc.device_id.toLowerCase() ? { ...d, device_status: device_status_list?.[qc.device_id.toLowerCase()] || "unknown" } : d); |
There was a problem hiding this comment.
also maybe dev or device instead of d? dev for example immediately communicates that the variable is a device. e.g using var instead of using v
| ); | ||
| }) | ||
| .catch(() => { | ||
| if (cancelled) return; |
There was a problem hiding this comment.
what is this catch block trying to do?
There was a problem hiding this comment.
Should be redundant now. Lefover from testing and problems with the useEffect running infinitely
|
Will be replaced with new updates |
2 participants
