moved most api stuff to web-api and built out a better monitoring solution for web-app

apps/stock/web-app/src/features/monitoring/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Monitoring hooks exports
+ */
+
+export * from './useMonitoring';

apps/stock/web-app/src/features/monitoring/hooks/useMonitoring.ts

@@ -0,0 +1,123 @@
+/**
+ * Custom hook for monitoring data
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { monitoringApi } from '../services/monitoringApi';
+import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
+
+export function useSystemHealth(refreshInterval: number = 5000) {
+  const [data, setData] = useState<SystemHealth | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const health = await monitoringApi.getSystemHealth();
+      setData(health);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch system health');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useCacheStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<CacheStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const stats = await monitoringApi.getCacheStats();
+      setData(stats);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch cache stats');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useQueueStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<QueueStats[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await monitoringApi.getQueueStats();
+      setData(result.queues);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch queue stats');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useDatabaseStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<DatabaseStats[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await monitoringApi.getDatabaseStats();
+      setData(result.databases);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch database stats');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}