frontend/hooks/useMonitoring.js

"use client";

import {useEffect,useState} from "react";
import monitoring from "../services/monitoring/client";

export default function useMonitoring(interval=5000){

const [data,setData]=useState({});
const [loading,setLoading]=useState(true);

async function refresh(){

setLoading(true);

try{

const [
overview,
metrics,
system,
health
]=await Promise.all([
monitoring.overview(),
monitoring.metrics(),
monitoring.system(),
monitoring.health()
]);

setData({
overview:overview.data,
metrics:metrics.data,
system:system.data,
health:health.data
});

}finally{
setLoading(false);
}

}

useEffect(()=>{
refresh();
const id=setInterval(refresh,interval);
return()=>clearInterval(id);
},[interval]);

return{
loading,
data,
refresh
};

}