lots of cleanup main issue now is snmp checker is refreshing

carverauto · Feb 26, 2025 · 7f49d97 · 7f49d97
1 parent ec006c7
commit 7f49d97
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 28 deletions.
diff --git a/serviceradar-next/src/app/nodes/page.js b/serviceradar-next/src/app/nodes/page.js
@@ -1,16 +1,29 @@
+// src/app/nodes/page.js
 import { Suspense } from 'react';
 import NodeList from '../../components/NodeList';
 
-export const revalidate = 10; // Revalidate this page every 10 seconds
+export const revalidate = 30; // Increase revalidation time from 10 to 30 seconds
 
-// Async function to fetch data on the server
+// Async function to fetch data on the server with API key authentication
 async function fetchNodes() {
     try {
         // When running on the server, use the full backend URL
-        const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8090';
-        const response = await fetch(`${backendUrl}/api/nodes`);
+        const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
+        const apiKey = process.env.API_KEY;
+
+        const response = await fetch(`${backendUrl}/api/nodes`, {
+            headers: {
+                'X-API-Key': apiKey
+            },
+            cache: 'no-store' // Don't cache this request
+        });
 
         if (!response.ok) {
+            console.error('Nodes API fetch failed:', {
+                status: response.status,
+                statusText: response.statusText
+            });
+
             throw new Error(`Nodes API request failed: ${response.status}`);
         }
 
@@ -26,7 +39,9 @@ export default async function NodesPage() {
 
     return (
         <div>
-            <Suspense fallback={<div>Loading nodes...</div>}>
+            <Suspense fallback={<div className="flex justify-center items-center h-64">
+                <div className="text-lg text-gray-600 dark:text-gray-300">Loading nodes...</div>
+            </div>}>
                 <NodeList initialNodes={initialNodes} />
             </Suspense>
         </div>

diff --git a/serviceradar-next/src/app/service/[nodeid]/[servicename]/page.js b/serviceradar-next/src/app/service/[nodeid]/[servicename]/page.js
@@ -1,16 +1,24 @@
+// src/app/service/[nodeid]/[servicename]/page.js
 import { Suspense } from 'react';
 import ServiceDashboard from '../../../../components/ServiceDashboard';
 
-export const revalidate = 10; // Revalidate this page every 10 seconds
+export const revalidate = 30; // Increase revalidation time from 10 to 30 seconds
 
-// Async function to fetch data on the server
+// Async function to fetch data on the server with API key authentication
 async function fetchServiceData(nodeId, serviceName) {
     try {
         // When running on the server, use the full backend URL
-        const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8090';
+        const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
+        const apiKey = process.env.API_KEY;
 
         // Fetch nodes list
-        const nodesResponse = await fetch(`${backendUrl}/api/nodes`);
+        const nodesResponse = await fetch(`${backendUrl}/api/nodes`, {
+            headers: {
+                'X-API-Key': apiKey
+            },
+            next: { revalidate: 30 } // Cache for 30 seconds
+        });
+
         if (!nodesResponse.ok) {
             throw new Error(`Nodes API request failed: ${nodesResponse.status}`);
         }
@@ -30,7 +38,13 @@ async function fetchServiceData(nodeId, serviceName) {
 
         // Fetch metrics data
         try {
-            const metricsResponse = await fetch(`${backendUrl}/api/nodes/${nodeId}/metrics`);
+            const metricsResponse = await fetch(`${backendUrl}/api/nodes/${nodeId}/metrics`, {
+                headers: {
+                    'X-API-Key': apiKey
+                },
+                next: { revalidate: 30 } // Cache for 30 seconds
+            });
+
             if (!metricsResponse.ok) {
                 throw new Error(`Metrics API request failed: ${metricsResponse.status}`);
             }
@@ -52,16 +66,39 @@ async function fetchServiceData(nodeId, serviceName) {
     }
 }
 
-export default async function ServicePage({ params }) {
-    const { nodeId, serviceName } = params;
-    const initialData = await fetchServiceData(nodeId, serviceName);
+// Generate dynamic metadata for the page
+export async function generateMetadata(props) {
+    // Next.js now requires us to await the params object
+    const params = await props.params;
+
+    // Now we can safely destructure
+    const nodeid = params.nodeid;
+    const servicename = params.servicename;
+
+    return {
+        title: `${servicename} on ${nodeid} - ServiceRadar`,
+    };
+}
+
+export default async function Page(props) {
+    // Access params using the props object
+    const params = props.params;
+
+    // Now use the params after they're fully resolved
+    const nodeid = params.nodeid;
+    const servicename = params.servicename;
+
+    // Fetch data
+    const initialData = await fetchServiceData(nodeid, servicename);
 
     return (
         <div>
-            <Suspense fallback={<div>Loading service data...</div>}>
+            <Suspense fallback={<div className="flex justify-center items-center h-64">
+                <div className="text-lg text-gray-600 dark:text-gray-300">Loading service data...</div>
+            </div>}>
                 <ServiceDashboard
-                    nodeId={nodeId}
-                    serviceName={serviceName}
+                    nodeId={nodeid}
+                    serviceName={servicename}
                     initialService={initialData.service}
                     initialMetrics={initialData.metrics}
                     initialError={initialData.error}

diff --git a/serviceradar-next/src/middleware.ts b/serviceradar-next/src/middleware.ts
@@ -1,28 +1,30 @@
+// src/middleware.ts
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
 export function middleware(request: NextRequest) {
-    const url = request.nextUrl.clone();
+    // Only apply to api routes
+    if (request.nextUrl.pathname.startsWith('/api/')) {
+        // Use the API key from environment
+        const apiKey = process.env.API_KEY || '';
 
-    // Only apply to /api/* paths
-    if (url.pathname.startsWith('/api/')) {
+        // Clone the request headers
+        const requestHeaders = new Headers(request.headers);
 
-        const apiKey = process.env.API_KEY || '';
+        // Add the API key header
+        requestHeaders.set('X-API-Key', apiKey);
 
-        // Create a new request with added headers
-        const modifiedRequest = new Request(url, {
-            headers: {
-                ...request.headers,
-                'X-API-Key': apiKey,
+        // Return a new response with the API key header
+        return NextResponse.next({
+            request: {
+                headers: requestHeaders,
             },
         });
-
-        return NextResponse.rewrite(url, { request: modifiedRequest });
     }
 
     return NextResponse.next();
 }
 
 export const config = {
-    matcher: '/api/:path*', // Apply middleware only to /api/* routes
+    matcher: '/api/:path*',
 };