diff --git a/serviceradar-next/src/components/NetworkSweepView.jsx b/serviceradar-next/src/components/NetworkSweepView.jsx
index e1a96fe..9ac09f4 100644
--- a/serviceradar-next/src/components/NetworkSweepView.jsx
+++ b/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) => {
diff --git a/serviceradar-next/src/components/NodeList.jsx b/serviceradar-next/src/components/NodeList.jsx
index 4a5f8c0..901d250 100644
--- a/serviceradar-next/src/components/NodeList.jsx
+++ b/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 = [] }) {
);
- function ServiceStatus({ service, nodeId, onServiceClick }) {
- return (
-
diff --git a/serviceradar-next/src/components/SNMPDashboard.jsx b/serviceradar-next/src/components/SNMPDashboard.jsx
index ebd961f..d4275fa 100644
--- a/serviceradar-next/src/components/SNMPDashboard.jsx
+++ b/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;
diff --git a/serviceradar-next/src/components/ServiceDashboard.jsx b/serviceradar-next/src/components/ServiceDashboard.jsx
index f00f57b..04d959f 100644
--- a/serviceradar-next/src/components/ServiceDashboard.jsx
+++ b/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 (