fix

Author: alrocar

apps/web/src/components/incident-categories-table.tsx

@@ -16,12 +16,13 @@ interface IncidentType {
 
 interface IncidentCategoriesTableProps {
   data: IncidentType[]
-  onPageChange: (page: number) => void
   page: number
+  onPageChange: (page: number) => void
   pageSize: number
+  isLoading: boolean
 }
 
-export default function IncidentCategoriesTable({ data, onPageChange, page, pageSize }: IncidentCategoriesTableProps) {
+export default function IncidentCategoriesTable({ data, onPageChange, page, pageSize, isLoading }: IncidentCategoriesTableProps) {
   const [sortConfig, setSortConfig] = useState<{
     key: keyof IncidentType
     direction: 'asc' | 'desc'
@@ -78,15 +79,23 @@ export default function IncidentCategoriesTable({ data, onPageChange, page, page
             </TableRow>
           </TableHeader>
           <TableBody>
-            {sortedData.map((item) => (
-              <TableRow key={`${item.title}-${item.cloud}-${item.cluster}`}>
-                <TableCell className="truncate max-w-[300px]">{item.title}</TableCell>
-                <TableCell className="truncate max-w-[100px]">{item.cloud}</TableCell>
-                <TableCell className="truncate max-w-[150px]">{item.cluster}</TableCell>
-                <TableCell className="text-right">{item.total_incidents}</TableCell>
-                <TableCell className="text-right">{parseInt(formatPercentage(item.high_urgency_incidents / item.total_incidents * 100))}%</TableCell>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center">
+                  Loading...
+                </TableCell>
               </TableRow>
-            ))}
+            ) : (
+              sortedData.map((item) => (
+                <TableRow key={`${item.title}-${item.cloud}-${item.cluster}`}>
+                  <TableCell className="truncate max-w-[300px]">{item.title}</TableCell>
+                  <TableCell className="truncate max-w-[100px]">{item.cloud}</TableCell>
+                  <TableCell className="truncate max-w-[150px]">{item.cluster}</TableCell>
+                  <TableCell className="text-right">{item.total_incidents}</TableCell>
+                  <TableCell className="text-right">{parseInt(formatPercentage(item.high_urgency_incidents / item.total_incidents * 100))}%</TableCell>
+                </TableRow>
+              ))
+            )}
           </TableBody>
         </Table>
       </CardContent>

apps/web/src/components/tools/pagerduty/dashboard.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useQueryState } from 'nuqs'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { pipe } from '@/lib/tinybird'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { formatDuration, formatNumber, formatPercentage } from '@/lib/utils'
@@ -63,13 +63,9 @@ export default function PagerDutyDashboard() {
   const [page, setPage] = useState(0)
   const pageSize = 10
   const [incidentTypes, setIncidentTypes] = useState<IncidentType[]>([])
-  const [services, setServices] = useState<Array<{
-    service_name: string
-    service_id: string
-  }>>([])
   const [selectedService, setSelectedService] = useState<string>()
 
-  const fetchIncidentTypes = async (newPage: number) => {
+  const fetchIncidentTypes = useCallback(async (newPage: number) => {
     if (!token) return
     setIsTableLoading(true)
     try {
@@ -90,22 +86,14 @@ export default function PagerDutyDashboard() {
     } finally {
       setIsTableLoading(false)
     }
-  }
+  }, [token, dateRange.from, dateRange.to, selectedService, pageSize])
 
   const handlePageChange = async (newPage: number) => {
     setPage(newPage)
     await fetchIncidentTypes(newPage)
   }
 
-  useEffect(() => {
-    fetchMetrics()
-  }, [token, dateRange.from, dateRange.to, selectedService])
-
-  useEffect(() => {
-    fetchIncidentTypes(page)
-  }, [token, dateRange.from, dateRange.to, selectedService, page])
-
-  const fetchMetrics = async () => {
+  const fetchMetrics = useCallback(async () => {
     if (!token) return
     setIsLoading(true)
     try {
@@ -182,27 +170,21 @@ export default function PagerDutyDashboard() {
     } finally {
       setIsLoading(false)
     }
-  }
+  }, [token, dateRange.from, dateRange.to, selectedService])
 
-  const fetchServices = async () => {
-    if (!token) return
-    try {
-      const servicesData = await pipe(token, 'pagerduty_services')
-      setServices(servicesData.data)
-    } catch (error) {
-      console.error('Failed to fetch services:', error)
-    }
-  }
+  useEffect(() => {
+    fetchMetrics()
+  }, [fetchMetrics])
 
   useEffect(() => {
-    fetchServices()
-  }, [token])
+    fetchIncidentTypes(page)
+  }, [fetchIncidentTypes, page])
 
   return (
     <div className="space-y-8">
       <div className="flex justify-end items-center gap-4">
         <Filter
-          token={token}
+          token={token || ''}
           pipeName="pagerduty_services"
           label="Service"
           value={selectedService}
@@ -319,6 +301,7 @@ export default function PagerDutyDashboard() {
             page={page}
             onPageChange={handlePageChange}
             pageSize={pageSize}
+            isLoading={isTableLoading}
           />
         </div>
       </div>