Updates/web cleanup

serviceradar-next/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import './globals.css';
 import { Inter } from 'next/font/google';
 import { Providers } from './providers';
-import { ReactNode } from 'react'; // Import ReactNode
+import { ReactNode } from 'react';
 
 const inter = Inter({ subsets: ['latin'] });
 

serviceradar-next/src/app/page.tsx

@@ -2,9 +2,6 @@
 import { Suspense } from 'react';
 import Dashboard from '../components/Dashboard';
 
-export const revalidate = 0; // Revalidate this page every 30 seconds
-
-// Async function to fetch data on the server
 async function fetchStatus() {
     try {
         // When running on the server, use the full backend URL

serviceradar-next/src/components/DuskDashboard.jsx

@@ -1,12 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import {
   LineChart,
-  Line,
-  XAxis,
-  YAxis,
   CartesianGrid,
-  Tooltip,
-  Legend,
   ResponsiveContainer,
 } from 'recharts';
 
@@ -82,7 +77,6 @@ const DuskDashboard = () => {
   }
 
   const details = nodeStatus?.details || {};
-  console.log('Node details:', details);
 
   return (
       <div className="space-y-6 transition-colors">

serviceradar-next/src/components/NetworkSweepView.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ExportButton from './ExportButton';
 
 const compareIPAddresses = (ip1, ip2) => {

serviceradar-next/src/components/NodeList.jsx

@@ -3,8 +3,6 @@
 
 import React, { useState, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import _ from 'lodash';
-import NodeTimeline from './NodeTimeline';
 import ServiceSparkline from "./ServiceSparkline";
 import { useAPIData } from '@/lib/api';
 
@@ -15,7 +13,6 @@ function NodeList({ initialNodes = [] }) {
   const [nodesPerPage] = useState(10);
   const [sortBy, setSortBy] = useState('name');
   const [sortOrder, setSortOrder] = useState('asc');
-  const [viewMode, setViewMode] = useState('table');
 
   // Use the improved API client with 30 second polling instead of 10
   const { data: nodes, error, isLoading } = useAPIData('/api/nodes', initialNodes, 30000);
@@ -182,7 +179,7 @@ function NodeList({ initialNodes = [] }) {
         )}
 
         {/* Main content */}
-        {viewMode === 'table' && renderTableView()}
+        {renderTableView()}
 
         {/* Pagination */}
         {pageCount > 1 && (
@@ -205,34 +202,6 @@ function NodeList({ initialNodes = [] }) {
       </div>
   );
 
-  function ServiceStatus({ service, nodeId, onServiceClick }) {
-    return (
-        <div
-            className="flex items-center gap-2 bg-gray-50 dark:bg-gray-700 rounded p-2 cursor-pointer
-               hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
-            onClick={() => onServiceClick(nodeId, service.name)}
-        >
-          <div className="flex items-center gap-1">
-          <span
-              className={`w-1.5 h-1.5 rounded-full ${
-                  service.available ? 'bg-green-500' : 'bg-red-500'
-              }`}
-          />
-            <span className="font-medium text-gray-800 dark:text-gray-100">
-            {service.name || 'unknown'}
-          </span>
-            <span className="text-gray-500 dark:text-gray-400">
-            ({service.type})
-          </span>
-          </div>
-          <ServiceSparkline
-              nodeId={nodeId}
-              serviceName={service.name}
-          />
-        </div>
-    );
-  }
-
   function renderTableView() {
     return (
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-x-auto transition-colors">

serviceradar-next/src/components/SNMPDashboard.jsx

@@ -1,8 +1,5 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import {
-    LineChart, Line, XAxis, YAxis, CartesianGrid,
-    Tooltip, Legend, ResponsiveContainer
-} from 'recharts';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
 
 const SNMPDashboard = ({ nodeId, serviceName }) => {
     const [snmpData, setSNMPData] = useState([]);
@@ -18,22 +15,14 @@ const SNMPDashboard = ({ nodeId, serviceName }) => {
     const fetchingRef = useRef(false);
     const timerId = useRef(null);
 
-    // Calculate rate between two counter values
-    const calculateRate = useCallback((current, previous, timeDiff) => {
-        if (!previous || !current || timeDiff <= 0) return 0;
-
-        const valueDiff = current - previous;
-        return valueDiff / timeDiff;
-    }, []);
-
     // Process SNMP counter data to show rates instead of raw values
     const processCounterData = useCallback((data) => {
         if (!data || data.length < 2) return data || [];
 
         try {
             // Process the data points to calculate rates
-            const processedData = data.map((point, index) => {
-                if (index === 0) return { ...point, rate: 0 };
+            return data.map((point, index) => {
+                if (index === 0) return {...point, rate: 0};
 
                 const prevPoint = data[index - 1];
                 const timeDiff = (new Date(point.timestamp) - new Date(prevPoint.timestamp)) / 1000;
@@ -56,8 +45,6 @@ const SNMPDashboard = ({ nodeId, serviceName }) => {
                     rate: rate
                 };
             });
-
-            return processedData;
         } catch (error) {
             console.error("Error processing counter data:", error);
             return data;

serviceradar-next/src/components/ServiceDashboard.jsx

@@ -1,21 +1,20 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import {
-    LineChart,
-    Line,
     XAxis,
     YAxis,
-    CartesianGrid,
     Tooltip,
     Legend,
+    Line,
+    LineChart,
+    CartesianGrid,
     ResponsiveContainer,
 } from 'recharts';
 import NetworkSweepView from './NetworkSweepView';
 import { PingStatus } from './NetworkStatus';
 import SNMPDashboard from './SNMPDashboard';
-import { fetchWithCache } from '../lib/api';
 
 const ServiceDashboard = ({
                               nodeId,
@@ -26,68 +25,14 @@ const ServiceDashboard = ({
                               initialError = null,
                           }) => {
     const router = useRouter();
-    const [serviceData, setServiceData] = useState(initialService);
-    const [metricsData, setMetricsData] = useState(initialMetrics);
-    const [snmpData, setSnmpData] = useState(initialSnmpData);
-    const [loading, setLoading] = useState(!initialService && !initialError);
-    const [error, setError] = useState(initialError);
+    const [serviceData ] = useState(initialService);
+    const [metricsData] = useState(initialMetrics);
+    const [snmpData] = useState(initialSnmpData);
+    const [loading] = useState(!initialService && !initialError);
+    const [error] = useState(initialError);
     const [selectedTimeRange, setSelectedTimeRange] = useState('1h');
 
-    const refreshInterval = 30000;
-
-    const fetchData = useCallback(async () => {
-        try {
-            if (initialService && initialMetrics.length > 0 && initialSnmpData.length > 0 && !initialError) {
-                setServiceData(initialService);
-                setMetricsData(initialMetrics);
-                setSnmpData(initialSnmpData);
-                setLoading(false);
-                return;
-            }
-
-            setLoading(true);
-
-            console.log("Fetching nodes...");
-            const nodes = await fetchWithCache('/api/nodes');
-            console.log("Nodes fetched:", nodes.length);
-
-            const node = nodes.find((n) => n.node_id === nodeId);
-            if (!node) throw new Error('Node not found');
-
-            const service = node.services?.find((s) => s.name === serviceName);
-            if (!service) throw new Error('Service not found');
-
-            setServiceData(service);
-
-            console.log("Fetching metrics...");
-            const metrics = await fetchWithCache(`/api/nodes/${nodeId}/metrics`);
-            const serviceMetrics = metrics.filter((m) => m.service_name === serviceName);
-            console.log("Metrics fetched:", serviceMetrics.length);
-            setMetricsData(serviceMetrics);
-
-            if (service.type === 'snmp') {
-                console.log("Fetching SNMP data...");
-                const end = new Date();
-                const start = new Date();
-                start.setHours(end.getHours() - 1);
-                const snmpResponse = await fetchWithCache(
-                    `/api/nodes/${nodeId}/snmp?start=${start.toISOString()}&end=${end.toISOString()}`
-                );
-                console.log("SNMP data fetched:", snmpResponse.length);
-                setSnmpData(snmpResponse);
-            }
-
-            setLoading(false);
-            setError(null);
-        } catch (err) {
-            console.error('Error fetching data:', err);
-            setError(err.message);
-            setLoading(false);
-        }
-    }, [nodeId, serviceName, initialService, initialMetrics, initialSnmpData, initialError]);
-
     useEffect(() => {
-        console.log("ServiceDashboard mounted", { nodeId, serviceName, snmpDataLength: initialSnmpData.length });
         return () => console.log("ServiceDashboard unmounted");
     }, [nodeId, serviceName, initialSnmpData]);
 
@@ -286,8 +231,6 @@ const ServiceDashboard = ({
         );
     }
 
-    console.log("ServiceDashboard rendered", { snmpDataLength: snmpData.length });
-
     return (
         <div className="space-y-6 transition-colors">
             <div className="flex justify-between items-center">