added tooltip for error in table

Author: abishekve

thingconnect.pulse.client/src/components/HistoryTable.tsx

@@ -14,6 +14,7 @@ import {
 import { ChevronLeft, ChevronRight, AlertCircle, CheckCircle, Clock } from 'lucide-react';
 import type { RollupBucket, DailyBucket, RawCheck } from '@/api/types';
 import type { BucketType } from '@/types/bucket';
+import { Tooltip } from './ui/tooltip';
 
 export interface HistoryTableProps {
   data:
@@ -193,18 +194,20 @@ export function HistoryTable({ data, bucket, pageSize = 20, isLoading }: History
                           </Text>
                         </Table.Cell>
                         <Table.Cell>
-                          <Text
-                            fontSize='sm'
-                            color={row.error ? 'red.600' : 'gray.500'}
-                            _dark={{ color: row.error ? 'red.400' : 'gray.400' }}
-                            maxW='200px'
-                            overflow='hidden'
-                            textOverflow='ellipsis'
-                            whiteSpace='nowrap'
-                            title={row.error || undefined}
-                          >
-                            {row.error || '-'}
-                          </Text>
+                          <Tooltip content={row.error || '-'}>
+                            <Text
+                              fontSize='sm'
+                              color={row.error ? 'red.600' : 'gray.500'}
+                              _dark={{ color: row.error ? 'red.400' : 'gray.400' }}
+                              maxW='200px'
+                              overflow='hidden'
+                              textOverflow='ellipsis'
+                              whiteSpace='nowrap'
+                              title={row.error || undefined}
+                            >
+                              {row.error || '-'}
+                            </Text>
+                          </Tooltip>
                         </Table.Cell>
                       </>
                     ) : (

thingconnect.pulse.client/src/components/RecentChecksTable.tsx

@@ -12,6 +12,7 @@ import { ChevronLeft, ChevronRight, CloudOff } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import type { RawCheck } from '@/api/types';
 import { useMemo, useState } from 'react';
+import { Tooltip } from './ui/tooltip';
 interface RecentChecksTableProps {
   checks: RawCheck[];
   pageSize?: number;
@@ -74,9 +75,11 @@ export function RecentChecksTable({ checks, pageSize = 10 }: RecentChecksTablePr
                     <Text fontSize='sm'>{check.rttMs ? `${check.rttMs}ms` : '-'}</Text>
                   </Table.Cell>
                   <Table.Cell w='25%'>
-                    <Text flex='1' fontSize='sm' color='gray.500' lineClamp={1}>
-                      {check.error || '-'}
-                    </Text>
+                    <Tooltip content={check.error || '-'}>
+                      <Text flex='1' fontSize='sm' color='gray.500' lineClamp={1}>
+                        {check.error || '-'}
+                      </Text>
+                    </Tooltip>
                   </Table.Cell>
                 </Table.Row>
               ))}