Monitoring Settings enhancements

This commit is contained in:
headlessdev 2025-05-31 12:58:19 +02:00
parent 6c1fca1377
commit e3795977f7
2 changed files with 143 additions and 96 deletions

View File

@ -15,20 +15,22 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
const [generalServerMonitoringSettings, setGeneralServerMonitoringSettings] = useState<any>(null); const [generalServerMonitoringSettings, setGeneralServerMonitoringSettings] = useState<any>(null);
const fetchGeneralMonitoringSettings = async () => { const fetchGeneralMonitoringSettings = async () => {
const generalApplicationMonitoringSettings = await getGeneralApplicationMonitoringSettings(); const appSettings = await getGeneralApplicationMonitoringSettings();
const generalServerMonitoringSettings = await getGeneralServerMonitoringSettings(); const serverSettings = await getGeneralServerMonitoringSettings();
if (typeof generalApplicationMonitoringSettings === 'string' || typeof generalServerMonitoringSettings === 'string') {
onError(typeof generalApplicationMonitoringSettings === 'string' ? generalApplicationMonitoringSettings : generalServerMonitoringSettings as string); if (appSettings.error || serverSettings.error) {
onError(appSettings.error || serverSettings.error || 'Failed to fetch settings');
return; return;
} }
setGeneralApplicationMonitoringSettings( setGeneralApplicationMonitoringSettings(
generalApplicationMonitoringSettings || { appSettings.data || {
frequency: 10, frequency: 10,
checksUntilOffline: 1, checksUntilOffline: 1,
} }
); );
setGeneralServerMonitoringSettings( setGeneralServerMonitoringSettings(
generalServerMonitoringSettings || { serverSettings.data || {
frequency: 10, frequency: 10,
checksUntilOffline: 1, checksUntilOffline: 1,
} }
@ -52,7 +54,7 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-8"> <div className="space-y-8">
{/* Server Monitoring Section */} {/* Server Monitoring Section */}
<div className="card bg-base-100 shadow-lg border border-base-300"> <div className="card bg-base-100 shadow-lg border border-base-300">
@ -66,33 +68,46 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
<p className="text-sm opacity-70">Configure server monitoring frequency and thresholds</p> <p className="text-sm opacity-70">Configure server monitoring frequency and thresholds</p>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<div className="card bg-base-200"> <div className="card bg-base-200">
<div className="card-body p-4"> <div className="card-body p-4">
<div className="flex flex-col lg:flex-row lg:items-center gap-4"> <div className="flex flex-col lg:flex-row lg:items-center gap-6">
<div className="flex-1"> <div className="flex-1">
<label className="label"> <div className="flex items-center gap-2 mb-2">
<span className="label-text font-medium">Check Frequency (every x seconds)</span> <label className="label-text font-medium">Check Frequency</label>
</label> <div className="tooltip" data-tip="Time between each status check">
<input <CircleHelp className="w-4 h-4 text-gray-400" />
type="number" </div>
className="input input-bordered w-full" </div>
value={generalServerMonitoringSettings?.frequency} <div className="flex items-center gap-3">
onChange={(e) => setGeneralServerMonitoringSettings({ <input
...generalServerMonitoringSettings, type="number"
frequency: parseInt(e.target.value) className="input input-bordered w-full max-w-[120px]"
})} value={generalServerMonitoringSettings?.frequency}
min="1" onChange={(e) => setGeneralServerMonitoringSettings({
/> ...generalServerMonitoringSettings,
frequency: parseInt(e.target.value)
})}
min="1"
/>
<span className="text-sm opacity-75">seconds</span>
</div>
<p className="text-xs text-gray-500 mt-2">
Checks will be performed every {generalServerMonitoringSettings?.frequency} seconds
</p>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<label className="label"> <div className="flex items-center gap-2 mb-2">
<span className="label-text font-medium">Checks Until Offline</span> <label className="label-text font-medium">Checks Until Offline</label>
</label> <div className="tooltip" data-tip="Consecutive failed checks before marking as offline">
<CircleHelp className="w-4 h-4 text-gray-400" />
</div>
</div>
<input <input
type="number" type="number"
className="input input-bordered w-full" className="input input-bordered w-full max-w-[120px]"
value={generalServerMonitoringSettings?.checksUntilOffline} value={generalServerMonitoringSettings?.checksUntilOffline}
onChange={(e) => setGeneralServerMonitoringSettings({ onChange={(e) => setGeneralServerMonitoringSettings({
...generalServerMonitoringSettings, ...generalServerMonitoringSettings,
@ -100,6 +115,9 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
})} })}
min="1" min="1"
/> />
<p className="text-xs text-gray-500 mt-2">
System will mark as offline after {generalServerMonitoringSettings?.checksUntilOffline} consecutive failures
</p>
</div> </div>
</div> </div>
</div> </div>
@ -107,7 +125,7 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
</div> </div>
</div> </div>
</div> </div>
{/* Application Monitoring Section */} {/* Application Monitoring Section */}
<div className="card bg-base-100 shadow-lg border border-base-300"> <div className="card bg-base-100 shadow-lg border border-base-300">
<div className="card-body p-6"> <div className="card-body p-6">
@ -120,33 +138,46 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
<p className="text-sm opacity-70">Configure application monitoring frequency and thresholds</p> <p className="text-sm opacity-70">Configure application monitoring frequency and thresholds</p>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<div className="card bg-base-200"> <div className="card bg-base-200">
<div className="card-body p-4"> <div className="card-body p-4">
<div className="flex flex-col lg:flex-row lg:items-center gap-4"> <div className="flex flex-col lg:flex-row lg:items-center gap-6">
<div className="flex-1"> <div className="flex-1">
<label className="label"> <div className="flex items-center gap-2 mb-2">
<span className="label-text font-medium">Check Frequency (every x seconds)</span> <label className="label-text font-medium">Check Frequency</label>
</label> <div className="tooltip" data-tip="Time between each status check">
<input <CircleHelp className="w-4 h-4 text-gray-400" />
type="number" </div>
className="input input-bordered w-full" </div>
value={generalApplicationMonitoringSettings?.frequency} <div className="flex items-center gap-3">
onChange={(e) => setGeneralApplicationMonitoringSettings({ <input
...generalApplicationMonitoringSettings, type="number"
frequency: parseInt(e.target.value) className="input input-bordered w-full max-w-[120px]"
})} value={generalApplicationMonitoringSettings?.frequency}
min="1" onChange={(e) => setGeneralApplicationMonitoringSettings({
/> ...generalApplicationMonitoringSettings,
frequency: parseInt(e.target.value)
})}
min="1"
/>
<span className="text-sm opacity-75">seconds</span>
</div>
<p className="text-xs text-gray-500 mt-2">
Checks will be performed every {generalApplicationMonitoringSettings?.frequency} seconds
</p>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<label className="label"> <div className="flex items-center gap-2 mb-2">
<span className="label-text font-medium">Checks Until Offline</span> <label className="label-text font-medium">Checks Until Offline</label>
</label> <div className="tooltip" data-tip="Consecutive failed checks before marking as offline">
<CircleHelp className="w-4 h-4 text-gray-400" />
</div>
</div>
<input <input
type="number" type="number"
className="input input-bordered w-full" className="input input-bordered w-full max-w-[120px]"
value={generalApplicationMonitoringSettings?.checksUntilOffline} value={generalApplicationMonitoringSettings?.checksUntilOffline}
onChange={(e) => setGeneralApplicationMonitoringSettings({ onChange={(e) => setGeneralApplicationMonitoringSettings({
...generalApplicationMonitoringSettings, ...generalApplicationMonitoringSettings,
@ -154,6 +185,9 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
})} })}
min="1" min="1"
/> />
<p className="text-xs text-gray-500 mt-2">
System will mark as offline after {generalApplicationMonitoringSettings?.checksUntilOffline} consecutive failures
</p>
</div> </div>
</div> </div>
</div> </div>
@ -161,7 +195,7 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
</div> </div>
</div> </div>
</div> </div>
{/* Save Button */} {/* Save Button */}
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
@ -170,8 +204,8 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
const serverResponse = await editGeneralServerMonitoringSettings(generalServerMonitoringSettings); const serverResponse = await editGeneralServerMonitoringSettings(generalServerMonitoringSettings);
const appResponse = await editGeneralApplicationMonitoringSettings(generalApplicationMonitoringSettings); const appResponse = await editGeneralApplicationMonitoringSettings(generalApplicationMonitoringSettings);
if (typeof serverResponse === 'string' || typeof appResponse === 'string') { if (serverResponse.error || appResponse.error) {
onError(typeof serverResponse === 'string' ? serverResponse : appResponse as string); onError(serverResponse.error || appResponse.error || 'Failed to save settings');
return; return;
} }

View File

@ -1,62 +1,75 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import axios from "axios"; import axios, { AxiosError } from "axios";
interface MonitoringSettings { interface MonitoringSettings {
frequency: number; frequency: number;
checksUntilOffline: number; checksUntilOffline: number;
} }
interface ApiResponse<T> {
data?: T;
error?: string;
}
const useMonitoring = () => { const useMonitoring = () => {
const getGeneralApplicationMonitoringSettings = (): Promise<any> | string => { const getGeneralApplicationMonitoringSettings = async (): Promise<ApiResponse<MonitoringSettings>> => {
return axios.get('/api/monitoring/applications/get_general') try {
.then((response) => { const response = await axios.get<MonitoringSettings>('/api/monitoring/applications/get_general');
if(response.data) { return { data: response.data };
return response.data } catch (error) {
} else { const axiosError = error as AxiosError<{ error: string }>;
return return {
} error: axiosError.response?.data?.error || 'Failed to fetch application monitoring settings'
}) };
.catch((error) => { }
return error.response.data.error };
});
}
const getGeneralServerMonitoringSettings = (): Promise<any> | string => { const getGeneralServerMonitoringSettings = async (): Promise<ApiResponse<MonitoringSettings>> => {
return axios.get('/api/monitoring/servers/get_general') try {
.then((response) => { const response = await axios.get<MonitoringSettings>('/api/monitoring/servers/get_general');
if(response.data) { return { data: response.data };
return response.data } catch (error) {
} else { const axiosError = error as AxiosError<{ error: string }>;
return return {
} error: axiosError.response?.data?.error || 'Failed to fetch server monitoring settings'
}) };
.catch((error) => { }
return error.response.data.error };
});
}
const editGeneralApplicationMonitoringSettings = (settings: MonitoringSettings): Promise<any> | string => { const editGeneralApplicationMonitoringSettings = async (
return axios.post('/api/monitoring/applications/edit_general', settings) settings: MonitoringSettings
.then((response) => { ): Promise<ApiResponse<void>> => {
return response.data try {
}) await axios.post('/api/monitoring/applications/edit_general', settings);
.catch((error) => { return { data: undefined };
return error.response.data.error } catch (error) {
}); const axiosError = error as AxiosError<{ error: string }>;
} return {
error: axiosError.response?.data?.error || 'Failed to update application monitoring settings'
};
}
};
const editGeneralServerMonitoringSettings = (settings: MonitoringSettings): Promise<any> | string => { const editGeneralServerMonitoringSettings = async (
return axios.post('/api/monitoring/servers/edit_general', settings) settings: MonitoringSettings
.then((response) => { ): Promise<ApiResponse<void>> => {
return response.data try {
}) await axios.post('/api/monitoring/servers/edit_general', settings);
.catch((error) => { return { data: undefined };
return error.response.data.error } catch (error) {
}); const axiosError = error as AxiosError<{ error: string }>;
} return {
error: axiosError.response?.data?.error || 'Failed to update server monitoring settings'
};
}
};
return { getGeneralApplicationMonitoringSettings, getGeneralServerMonitoringSettings, editGeneralApplicationMonitoringSettings, editGeneralServerMonitoringSettings }; return {
getGeneralApplicationMonitoringSettings,
getGeneralServerMonitoringSettings,
editGeneralApplicationMonitoringSettings,
editGeneralServerMonitoringSettings
};
}; };
export default useMonitoring; export default useMonitoring;