feat: implement dynamic EndpointSelect with query-based fetching

gokulvij · gokulvij · commit be88f699b68e · 2025-09-16T14:57:34.000+05:30
diff --git a/thingconnect.pulse.client/src/components/common/ComboboxSelect.tsx b/thingconnect.pulse.client/src/components/common/ComboboxSelect.tsx
@@ -7,13 +7,14 @@ type Option = {
   value: string;
 };
 
-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;
   placeholder?: string;
   isLoading?: boolean;
+  defaultToFirst?: boolean;
 }
 
 export function ComboboxSelect({
@@ -22,14 +23,15 @@ export function ComboboxSelect({
   onChange,
   placeholder = 'Select an option',
   isLoading = false,
+  defaultToFirst = false,
   ...rest
 }: ComboboxProps) {
 
-  const itemsWithAll = useMemo(() => {
-    return items.length > 0 
-      ? [{ label: 'All', value: '' }, ...items] 
+   const itemsWithAll = useMemo(() => {
+    return items.length > 0 && !defaultToFirst
+      ? [{ label: 'All', value: '' }, ...items]
       : items;
-  }, [items]);
+  }, [items, defaultToFirst]);
 
   const { contains } = useFilter({ sensitivity: 'base' });
   const { collection, set, filter } = useListCollection<Option>({
@@ -40,8 +42,14 @@ export function ComboboxSelect({
   });
 
   useEffect(() => {
+    // Always update the collection
     set(itemsWithAll);
-  }, [itemsWithAll, set]);
+
+    // If defaultToFirst is true and nothing is selected yet, pick the first option
+    if (defaultToFirst && !selectedValue && itemsWithAll.length > 0) {
+      onChange(itemsWithAll[0].value);
+    }
+  }, [itemsWithAll, set, defaultToFirst, selectedValue, onChange]);
 
   return (
     <Skeleton loading={isLoading} w='full'>
diff --git a/thingconnect.pulse.client/src/components/common/EndpointSelect.tsx b/thingconnect.pulse.client/src/components/common/EndpointSelect.tsx
@@ -1,123 +1,54 @@
-import { useEffect, useState } from 'react';
-import { Combobox, HStack, Portal, Span, Spinner, Skeleton } from '@chakra-ui/react';
-import { useFilter, useListCollection } from '@chakra-ui/react';
+import { useEffect, useMemo } from 'react';
+import { ComboboxSelect, type ComboboxProps } from './ComboboxSelect';
+import { useQuery } from '@tanstack/react-query';
+import { StatusService } from '@/api/services/status.service';
 
-type EndpointOption = {
-  label: string;
-  value: string;
-};
-
-interface EndpointSelectProps {
-  items: { label: string; value: string }[];
-  selectedValue: string;
-  onChange: (value: string) => void;
-  isLoading?: boolean;
-  error?: boolean;
-  placeholder?: string;
-  optionName?: string;
+interface EndpointSelectProps extends Omit<ComboboxProps, 'items'> {
   defaultToFirst?: boolean;
+  setName?: (name: string) => void;
 }
 
 export function EndpointSelect({
-  items,
   selectedValue,
   onChange,
-  isLoading = false,
-  error = false,
   placeholder = 'Select endpoint...',
-  optionName = '',
+  setName,
   defaultToFirst = false,
+    ...rest
 }: EndpointSelectProps) {
-  const [cleared, setCleared] = useState(false);
-
-  const itemsWithAll: EndpointOption[] =
-    defaultToFirst && items.length > 0
-      ? items
-      : [{ label: `All ${optionName}`, value: '' }, ...items];
 
-      console.log('Items with All option:', itemsWithAll);
-
-  // Filtering
-  const { contains } = useFilter({ sensitivity: 'base' });
-  const { collection, set, filter } = useListCollection<EndpointOption>({
-    initialItems: [],
-    itemToString: item => item.label,
-    itemToValue: item => item.value,
-    filter: contains,
+  // Live endpoints
+  const {
+    data: liveData,
+    isLoading,
+  } = useQuery({
+    queryKey: ['live-status'],
+    queryFn: () => StatusService.getLiveStatus({ pageSize: 100 }),
+    staleTime: 30000,
   });
 
-  // Update collection whenever items change
-  useEffect(() => {
-    set(itemsWithAll);
+  const selectedEndpointName = useMemo(() => {
+    return liveData?.items?.find(item => item.endpoint.id === selectedValue)?.endpoint?.name || 'Unknown Endpoint';
+  }, [liveData, selectedValue]);
 
-    if (defaultToFirst && itemsWithAll.length > 0 && !selectedValue && !cleared) {
-      console.log('Defaulting to first item:', itemsWithAll[0]);
-      onChange(itemsWithAll[0].value);
-
-    } else if (!defaultToFirst && !selectedValue && !cleared) {
-      console.log('Defaulting to "All" option');
-      onChange('');
+  useEffect(() => {
+    if (setName) {
+      setName(selectedEndpointName);
     }
-  }, [items, set, selectedValue, cleared, onChange]);
+  }, [selectedEndpointName, setName]);
 
   return (
-    <Skeleton loading={isLoading} w='md'>
-      <Combobox.Root
-        size='xs'
-        w='xs'
-        collection={collection}
-        // value={selectedValue ? [selectedValue] : []}
-        value={[selectedValue]}
-        onValueChange={e => {
-          onChange(e.value[0] ?? '');
-          setCleared(false);
-        }}
-        onInputValueChange={e => filter(e.inputValue)}
-        onOpenChange={open => {
-          if (open) filter('');
-        }}
-        openOnClick
-      >
-        <Combobox.Control>
-          <Combobox.Input placeholder={placeholder} />
-          <Combobox.IndicatorGroup>
-            <Combobox.ClearTrigger
-              onClick={() => {
-                onChange('');
-                setCleared(true);
-              }}
-            />
-            <Combobox.Trigger />
-          </Combobox.IndicatorGroup>
-        </Combobox.Control>
-        <Portal>
-          <Combobox.Positioner>
-            <Combobox.Content minW='sm'>
-              {isLoading ? (
-                <HStack p='2'>
-                  <Spinner size='xs' borderWidth='1px' />
-                  <Span>Loading endpoints...</Span>
-                </HStack>
-              ) : error ? (
-                <Span p='2' color='fg.error'>
-                  Failed to load endpoints
-                </Span>
-              ) : collection.items.length === 0 ? (
-                <Combobox.Empty>No endpoints found</Combobox.Empty>
-              ) : (
-                collection.items.map(item => (
-                  <Combobox.Item key={item.value} item={item}>
-                    <HStack justify='space-between' textStyle='sm'>
-                      {item.label}
-                    </HStack>
-                    <Combobox.ItemIndicator />
-                  </Combobox.Item>
-                ))
-              )}
-            </Combobox.Content>
-          </Combobox.Positioner>
-        </Portal>
-      </Combobox.Root>
-    </Skeleton>
+    <ComboboxSelect
+      items={liveData?.items.map(item => ({
+        label: item.endpoint.name,
+        value: item.endpoint.id,
+      })) || []}
+      selectedValue={selectedValue}
+      onChange={onChange}
+      isLoading={isLoading}
+      placeholder={placeholder}
+      defaultToFirst={defaultToFirst}
+      {...rest}
+    />
   );
-}
+}
diff --git a/thingconnect.pulse.client/src/pages/History.tsx b/thingconnect.pulse.client/src/pages/History.tsx
@@ -7,16 +7,9 @@ import {
   HStack,
   Button,
   Card,
-  Combobox,
-  Portal,
-  Span,
-  Spinner,
-  useFilter,
-  useListCollection,
   IconButton,
   VStack,
   Tabs,
-  Skeleton,
 } from '@chakra-ui/react';
 import { Download, TrendingUp, AlertCircle, RefreshCw } from 'lucide-react';
 import { Page } from '@/components/layout/Page';
@@ -29,9 +22,9 @@ import type { BucketType } from '@/types/bucket';
 import { AvailabilityChart } from '@/components/AvailabilityChart';
 import { HistoryTable } from '@/components/HistoryTable';
 import { HistoryService } from '@/api/services/history.service';
-import { StatusService } from '@/api/services/status.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() {
@@ -41,7 +34,7 @@ export default function History() {
   const [selectedEndpoint, setSelectedEndpoint] = useState<string>(
     searchParams.get('endpoint') || ''
   );
-  const [cleared, setCleared] = useState(false);
+  const [selectedEndpointName, setSelectedEndpointName] = useState<string>('Unknown Endpoint');
   const [dateRange, setDateRange] = useState<DateRange>(() => {
     const defaultRange = HistoryService.getDefaultDateRange();
     return {
@@ -52,45 +45,6 @@ export default function History() {
   const [bucket, setBucket] = useState<BucketType>('15m');
   const [isExporting, setIsExporting] = useState(false);
 
-  // Live endpoints
-  const {
-    data: liveData,
-    isLoading: isLiveDataLoading,
-    error: liveDataError,
-  } = useQuery({
-    queryKey: ['live-status'],
-    queryFn: () => StatusService.getLiveStatus({ pageSize: 100 }),
-    staleTime: 30000,
-  });
-
-  // Filtering + collection for Combobox
-  // const { contains } = useFilter({ sensitivity: 'base' });
-  // const { collection, set, filter } = useListCollection<{
-  //   label: string;
-  //   value: string;
-  // }>({
-  //   initialItems: [],
-  //   itemToString: item => item.label,
-  //   itemToValue: item => item.value,
-  //   filter: contains,
-  // });
-
-  // // Update collection when liveData changes
-  // useEffect(() => {
-  //   if (liveData?.items) {
-  //     const items = liveData.items.map((item: any) => ({
-  //       label: `${item.endpoint.name} (${item.endpoint.host})`,
-  //       value: item.endpoint.id,
-  //     }));
-  //     set(items);
-
-  //     // fallback only if not cleared manually
-  //     if (!selectedEndpoint && items.length > 0 && !cleared) {
-  //       setSelectedEndpoint(items[0].value);
-  //     }
-  //   }
-  // }, [liveData, set, selectedEndpoint, cleared]);
-
   // Track page view
   useEffect(() => {
     analytics.trackPageView('History', {
@@ -154,10 +108,6 @@ export default function History() {
     }
   };
 
-  const selectedEndpointName =
-    liveData?.items?.find(item => item.endpoint.id === selectedEndpoint)?.endpoint?.name ||
-    'Unknown Endpoint';
-
   return (
     <Page
       title='History'
@@ -170,22 +120,14 @@ export default function History() {
             <Text fontSize='sm' fontWeight='medium'>
               Endpoint
             </Text>
-            <Skeleton loading={isLiveDataLoading} w='md'>
-
-              {/* <EndpointCombobox 
-                items={liveData?.items.map((item: any) => ({
-                  label: `${item.endpoint.name} (${item.endpoint.host})`,
-                  value: item.endpoint.id,
-                })) || []}
-                selectedValue={selectedEndpoint ? selectedEndpoint : ''}
-                onChange={setSelectedEndpoint}
-                isLoading={false}
-                error={undefined}
-                placeholder='Select endpoint...'
-                optionName='Endpoints'
-                defaultToFirst={true}
-              /> */}
-            </Skeleton>
+            <EndpointSelect
+              selectedValue={selectedEndpoint}
+              onChange={setSelectedEndpoint}
+              setName={setSelectedEndpointName}
+              defaultToFirst={true}
+              w={'xs'}
+              size='xs'
+            />
           </VStack>
           <VStack align='start' gap={1}>
             <Text fontSize='sm' fontWeight='medium'>
@@ -223,7 +165,7 @@ export default function History() {
               size='xs'
               colorPalette='blue'
               onClick={() => void handleExportCSV()}
-              loading={isExporting || isHistoryDataLoading || isLiveDataLoading}
+              loading={isExporting || isHistoryDataLoading}
               disabled={!historyData}
             >
               <Download size={16} />
@@ -237,7 +179,7 @@ export default function History() {
         <AvailabilityStats
           data={historyData}
           bucket={bucket}
-          isLoading={isHistoryDataLoading || isLiveDataLoading}
+          isLoading={isHistoryDataLoading }
         />
       </PageSection>
       <Tabs.Root
@@ -270,7 +212,7 @@ export default function History() {
               <AvailabilityChart
                 data={historyData}
                 bucket={bucket}
-                isLoading={isHistoryDataLoading || isLiveDataLoading}
+                isLoading={isHistoryDataLoading}
               />
             </Card.Body>
           </Card.Root>
@@ -293,7 +235,7 @@ export default function History() {
                 data={historyData}
                 bucket={bucket}
                 pageSize={20}
-                isLoading={isHistoryDataLoading || isLiveDataLoading}
+                isLoading={isHistoryDataLoading}
               />
             </Card.Body>
           </Card.Root>
