From e3795977f79ea150a87c9439acebf022faba9ce0 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@tuta.com>
Date: Sat, 31 May 2025 12:58:19 +0200
Subject: [PATCH] Monitoring Settings enhancements

---
 .../cards/settings/MonitoringSettings.tsx     | 134 +++++++++++-------
 hooks/useMonitoring.ts                        | 105 ++++++++------
 2 files changed, 143 insertions(+), 96 deletions(-)

diff --git a/components/cards/settings/MonitoringSettings.tsx b/components/cards/settings/MonitoringSettings.tsx
index 3a46021..6031ca3 100644
--- a/components/cards/settings/MonitoringSettings.tsx
+++ b/components/cards/settings/MonitoringSettings.tsx
@@ -15,20 +15,22 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
   const [generalServerMonitoringSettings, setGeneralServerMonitoringSettings] = useState<any>(null);
 
   const fetchGeneralMonitoringSettings = async () => {
-    const generalApplicationMonitoringSettings = await getGeneralApplicationMonitoringSettings();
-    const generalServerMonitoringSettings = await getGeneralServerMonitoringSettings();
-    if (typeof generalApplicationMonitoringSettings === 'string' || typeof generalServerMonitoringSettings === 'string') {
-      onError(typeof generalApplicationMonitoringSettings === 'string' ? generalApplicationMonitoringSettings : generalServerMonitoringSettings as string);
+    const appSettings = await getGeneralApplicationMonitoringSettings();
+    const serverSettings = await getGeneralServerMonitoringSettings();
+    
+    if (appSettings.error || serverSettings.error) {
+      onError(appSettings.error || serverSettings.error || 'Failed to fetch settings');
       return;
     }
+
     setGeneralApplicationMonitoringSettings(
-      generalApplicationMonitoringSettings || {
+      appSettings.data || {
         frequency: 10,
         checksUntilOffline: 1,
-      } 
+      }
     );
     setGeneralServerMonitoringSettings(
-      generalServerMonitoringSettings || {
+      serverSettings.data || {
         frequency: 10,
         checksUntilOffline: 1,
       }
@@ -52,7 +54,7 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
           </div>
         </div>
       </div>
-
+  
       <div className="space-y-8">
         {/* Server Monitoring Section */}
         <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>
               </div>
             </div>
-
+  
             <div className="space-y-4">
               <div className="card bg-base-200">
                 <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">
-                      <label className="label">
-                        <span className="label-text font-medium">Check Frequency (every x seconds)</span>
-                      </label>
-                      <input
-                        type="number"
-                        className="input input-bordered w-full"
-                        value={generalServerMonitoringSettings?.frequency}
-                        onChange={(e) => setGeneralServerMonitoringSettings({
-                          ...generalServerMonitoringSettings,
-                          frequency: parseInt(e.target.value)
-                        })}
-                        min="1"
-                      />
+                      <div className="flex items-center gap-2 mb-2">
+                        <label className="label-text font-medium">Check Frequency</label>
+                        <div className="tooltip" data-tip="Time between each status check">
+                          <CircleHelp className="w-4 h-4 text-gray-400" />
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <input
+                          type="number"
+                          className="input input-bordered w-full max-w-[120px]"
+                          value={generalServerMonitoringSettings?.frequency}
+                          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 className="flex-1">
-                      <label className="label">
-                        <span className="label-text font-medium">Checks Until Offline</span>
-                      </label>
+                      <div className="flex items-center gap-2 mb-2">
+                        <label className="label-text font-medium">Checks Until Offline</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
                         type="number"
-                        className="input input-bordered w-full"
+                        className="input input-bordered w-full max-w-[120px]"
                         value={generalServerMonitoringSettings?.checksUntilOffline}
                         onChange={(e) => setGeneralServerMonitoringSettings({
                           ...generalServerMonitoringSettings,
@@ -100,6 +115,9 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
                         })}
                         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>
@@ -107,7 +125,7 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
             </div>
           </div>
         </div>
-
+  
         {/* Application Monitoring Section */}
         <div className="card bg-base-100 shadow-lg border border-base-300">
           <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>
               </div>
             </div>
-
+  
             <div className="space-y-4">
               <div className="card bg-base-200">
                 <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">
-                      <label className="label">
-                        <span className="label-text font-medium">Check Frequency (every x seconds)</span>
-                      </label>
-                      <input
-                        type="number"
-                        className="input input-bordered w-full"
-                        value={generalApplicationMonitoringSettings?.frequency}
-                        onChange={(e) => setGeneralApplicationMonitoringSettings({
-                          ...generalApplicationMonitoringSettings,
-                          frequency: parseInt(e.target.value)
-                        })}
-                        min="1"
-                      />
+                      <div className="flex items-center gap-2 mb-2">
+                        <label className="label-text font-medium">Check Frequency</label>
+                        <div className="tooltip" data-tip="Time between each status check">
+                          <CircleHelp className="w-4 h-4 text-gray-400" />
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <input
+                          type="number"
+                          className="input input-bordered w-full max-w-[120px]"
+                          value={generalApplicationMonitoringSettings?.frequency}
+                          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 className="flex-1">
-                      <label className="label">
-                        <span className="label-text font-medium">Checks Until Offline</span>
-                      </label>
+                      <div className="flex items-center gap-2 mb-2">
+                        <label className="label-text font-medium">Checks Until Offline</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
                         type="number"
-                        className="input input-bordered w-full"
+                        className="input input-bordered w-full max-w-[120px]"
                         value={generalApplicationMonitoringSettings?.checksUntilOffline}
                         onChange={(e) => setGeneralApplicationMonitoringSettings({
                           ...generalApplicationMonitoringSettings,
@@ -154,6 +185,9 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
                         })}
                         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>
@@ -161,7 +195,7 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
             </div>
           </div>
         </div>
-
+  
         {/* Save Button */}
         <div className="flex justify-end">
           <button 
@@ -170,8 +204,8 @@ export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsPro
               const serverResponse = await editGeneralServerMonitoringSettings(generalServerMonitoringSettings);
               const appResponse = await editGeneralApplicationMonitoringSettings(generalApplicationMonitoringSettings);
               
-              if (typeof serverResponse === 'string' || typeof appResponse === 'string') {
-                onError(typeof serverResponse === 'string' ? serverResponse : appResponse as string);
+              if (serverResponse.error || appResponse.error) {
+                onError(serverResponse.error || appResponse.error || 'Failed to save settings');
                 return;
               }
               
diff --git a/hooks/useMonitoring.ts b/hooks/useMonitoring.ts
index a6e4793..5529c1b 100644
--- a/hooks/useMonitoring.ts
+++ b/hooks/useMonitoring.ts
@@ -1,62 +1,75 @@
 import { useState, useEffect, useCallback } from "react";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 
 interface MonitoringSettings {
     frequency: number;
     checksUntilOffline: number;
 }
 
+interface ApiResponse<T> {
+    data?: T;
+    error?: string;
+}
 
 const useMonitoring = () => {
-    const getGeneralApplicationMonitoringSettings = (): Promise<any> | string => {
-        return axios.get('/api/monitoring/applications/get_general')
-        .then((response) => {
-            if(response.data) {
-                return response.data
-            } else {
-                return
-            }
-        })
-        .catch((error) => {
-            return error.response.data.error
-        });
-    }
+    const getGeneralApplicationMonitoringSettings = async (): Promise<ApiResponse<MonitoringSettings>> => {
+        try {
+            const response = await axios.get<MonitoringSettings>('/api/monitoring/applications/get_general');
+            return { data: response.data };
+        } catch (error) {
+            const axiosError = error as AxiosError<{ error: string }>;
+            return { 
+                error: axiosError.response?.data?.error || 'Failed to fetch application monitoring settings'
+            };
+        }
+    };
 
-    const getGeneralServerMonitoringSettings = (): Promise<any> | string => {
-        return axios.get('/api/monitoring/servers/get_general')
-        .then((response) => {
-            if(response.data) {
-                return response.data
-            } else {
-                return
-            }
-        })
-        .catch((error) => {
-            return error.response.data.error
-        });
-    }
+    const getGeneralServerMonitoringSettings = async (): Promise<ApiResponse<MonitoringSettings>> => {
+        try {
+            const response = await axios.get<MonitoringSettings>('/api/monitoring/servers/get_general');
+            return { data: response.data };
+        } catch (error) {
+            const axiosError = error as AxiosError<{ error: string }>;
+            return { 
+                error: axiosError.response?.data?.error || 'Failed to fetch server monitoring settings'
+            };
+        }
+    };
 
-    const editGeneralApplicationMonitoringSettings = (settings: MonitoringSettings): Promise<any> | string => {
-        return axios.post('/api/monitoring/applications/edit_general', settings)
-        .then((response) => {
-            return response.data
-        })
-        .catch((error) => {
-            return error.response.data.error
-        });
-    }
+    const editGeneralApplicationMonitoringSettings = async (
+        settings: MonitoringSettings
+    ): Promise<ApiResponse<void>> => {
+        try {
+            await axios.post('/api/monitoring/applications/edit_general', settings);
+            return { data: undefined };
+        } 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 => {
-        return axios.post('/api/monitoring/servers/edit_general', settings)
-        .then((response) => {
-            return response.data
-        })
-        .catch((error) => {
-            return error.response.data.error
-        });
-    }
+    const editGeneralServerMonitoringSettings = async (
+        settings: MonitoringSettings
+    ): Promise<ApiResponse<void>> => {
+        try {
+            await axios.post('/api/monitoring/servers/edit_general', settings);
+            return { data: undefined };
+        } 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;