refactor: clean up and format components

Author: gokulvij

thingconnect.pulse.client/src/components/common/ComboboxSelect.tsx

@@ -7,8 +7,11 @@ type Option = {
   value: string;
 };
 
-export interface ComboboxProps extends Omit<ComponentProps<typeof Combobox.Root>, 'onChange' | 'children' | 'value' | 'collection'
-> {
+export interface ComboboxProps
+  extends Omit<
+    ComponentProps<typeof Combobox.Root>,
+    'onChange' | 'children' | 'value' | 'collection'
+  > {
   items: Option[];
   selectedValue?: string;
   onChange: (value: string) => void;
@@ -26,11 +29,8 @@ export function ComboboxSelect({
   defaultToFirst = false,
   ...rest
 }: ComboboxProps) {
-
-   const itemsWithAll = useMemo(() => {
-    return items.length > 0 && !defaultToFirst
-      ? [{ label: 'All', value: '' }, ...items]
-      : items;
+  const itemsWithAll = useMemo(() => {
+    return items.length > 0 && !defaultToFirst ? [{ label: 'All', value: '' }, ...items] : items;
   }, [items, defaultToFirst]);
 
   const { contains } = useFilter({ sensitivity: 'base' });
@@ -70,11 +70,9 @@ export function ComboboxSelect({
         {...rest}
       >
         <Combobox.Control>
-          <Combobox.Input 
-            placeholder={placeholder || 'Select an option'} 
-            value={
-              collection.items.find((item) => item.value === selectedValue)?.label || ''
-            }
+          <Combobox.Input
+            placeholder={placeholder || 'Select an option'}
+            value={collection.items.find(item => item.value === selectedValue)?.label || ''}
           />
           <Combobox.IndicatorGroup>
             <Combobox.ClearTrigger
@@ -111,4 +109,4 @@ export function ComboboxSelect({
       </Combobox.Root>
     </Skeleton>
   );
-}
+}

thingconnect.pulse.client/src/components/common/EndpointSelect.tsx

@@ -14,21 +14,20 @@ export function EndpointSelect({
   placeholder = 'Select endpoint...',
   setName,
   defaultToFirst = false,
-    ...rest
+  ...rest
 }: EndpointSelectProps) {
-
   // Live endpoints
-  const {
-    data: liveData,
-    isLoading,
-  } = useQuery({
+  const { data: liveData, isLoading } = useQuery({
     queryKey: ['live-status'],
     queryFn: () => StatusService.getLiveStatus({ pageSize: 100 }),
     staleTime: 30000,
   });
 
   const selectedEndpointName = useMemo(() => {
-    return liveData?.items?.find(item => item.endpoint.id === selectedValue)?.endpoint?.name || 'Unknown Endpoint';
+    return (
+      liveData?.items?.find(item => item.endpoint.id === selectedValue)?.endpoint?.name ||
+      'Unknown Endpoint'
+    );
   }, [liveData, selectedValue]);
 
   useEffect(() => {
@@ -39,10 +38,12 @@ export function EndpointSelect({
 
   return (
     <ComboboxSelect
-      items={liveData?.items.map(item => ({
-        label: item.endpoint.name,
-        value: item.endpoint.id,
-      })) || []}
+      items={
+        liveData?.items.map(item => ({
+          label: item.endpoint.name,
+          value: item.endpoint.id,
+        })) || []
+      }
       selectedValue={selectedValue}
       onChange={onChange}
       isLoading={isLoading}
@@ -51,4 +52,4 @@ export function EndpointSelect({
       {...rest}
     />
   );
-}
+}

thingconnect.pulse.client/src/pages/History.tsx

@@ -2,15 +2,7 @@ import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useAnalytics } from '@/hooks/useAnalytics';
 import { useQuery } from '@tanstack/react-query';
-import {
-  Text,
-  HStack,
-  Button,
-  Card,
-  IconButton,
-  VStack,
-  Tabs,
-} from '@chakra-ui/react';
+import { Text, HStack, Button, Card, IconButton, VStack, Tabs } from '@chakra-ui/react';
 import { Download, TrendingUp, AlertCircle, RefreshCw } from 'lucide-react';
 import { Page } from '@/components/layout/Page';
 import { PageSection } from '@/components/layout/PageSection';
@@ -25,7 +17,6 @@ import { HistoryService } from '@/api/services/history.service';
 import { Tooltip } from '@/components/ui/tooltip';
 import { AvailabilityStats } from '@/components/AvailabilityStats';
 import { EndpointSelect } from '@/components/common/EndpointSelect';
-// import { EndpointCombobox } from '@/components/common/ComboboxSelect';
 
 export default function History() {
   const analytics = useAnalytics();
@@ -50,8 +41,11 @@ export default function History() {
     analytics.trackPageView('History', {
       view_type: 'history_analysis',
       has_endpoint_filter: !!selectedEndpoint,
-      date_range_days: Math.ceil((new Date(dateRange.to).getTime() - new Date(dateRange.from).getTime()) / (1000 * 60 * 60 * 24)),
-      bucket_granularity: bucket
+      date_range_days: Math.ceil(
+        (new Date(dateRange.to).getTime() - new Date(dateRange.from).getTime()) /
+          (1000 * 60 * 60 * 24)
+      ),
+      bucket_granularity: bucket,
     });
   }, []);
 
@@ -176,11 +170,7 @@ export default function History() {
       </PageSection>
       {/* History Data */}
       <PageSection title='Performance Summary' testId='availability-stats'>
-        <AvailabilityStats
-          data={historyData}
-          bucket={bucket}
-          isLoading={isHistoryDataLoading }
-        />
+        <AvailabilityStats data={historyData} bucket={bucket} isLoading={isHistoryDataLoading} />
       </PageSection>
       <Tabs.Root
         defaultValue='chart'