Support checking API gateway logs for load balancer (#26353)

apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect, useState } from 'react'
-import { Button, IconRewind } from 'ui'
+import { Button } from 'ui'
 
 import {
   Filters,
@@ -23,6 +23,7 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { useSelectedOrganization } from 'hooks'
 import useLogsPreview from 'hooks/analytics/useLogsPreview'
 import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
+import { Rewind } from 'lucide-react'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { LOGS_TABLES, LOG_ROUTES_WITH_REPLICA_SUPPORT } from './Logs.constants'
 import UpgradePrompt from './UpgradePrompt'
@@ -273,7 +274,7 @@ export const LogsPreviewer = ({
           <div className="border-t flex flex-row justify-between p-2">
             <Button
               onClick={loadOlder}
-              icon={<IconRewind />}
+              icon={<Rewind />}
               type="default"
               loading={isLoadingOlder}
               disabled={isLoadingOlder}

apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx

@@ -11,6 +11,7 @@ import { Filters, LogSearchCallback, LogTemplate, PREVIEWER_DATEPICKER_HELPERS }
 import DatePickers from './Logs.DatePickers'
 import { FILTER_OPTIONS, LOG_ROUTES_WITH_REPLICA_SUPPORT, LogsTableName } from './Logs.constants'
 import LogsFilterPopover from './LogsFilterPopover'
+import { useLoadBalancersQuery } from 'data/read-replicas/load-balancers-query'
 
 interface PreviewFilterPanelProps {
   defaultSearchValue?: string
@@ -60,6 +61,8 @@ const PreviewFilterPanel = ({
   const [search, setSearch] = useState('')
   const { project } = useProjectContext()
 
+  const { data: loadBalancers } = useLoadBalancersQuery({ projectRef: project?.ref })
+
   // [Joshen] These are the routes tested that can show replica logs
   const showDatabaseSelector =
     project?.is_read_replicas_enabled && LOG_ROUTES_WITH_REPLICA_SUPPORT.includes(router.pathname)
@@ -215,7 +218,16 @@ const PreviewFilterPanel = ({
               Open query in Logs Explorer
             </TooltipContent_Shadcn_>
           </Tooltip_Shadcn_>
-          <DatabaseSelector onSelectId={onSelectedDatabaseChange} />
+          <DatabaseSelector
+            onSelectId={onSelectedDatabaseChange}
+            additionalOptions={
+              table === LogsTableName.EDGE
+                ? (loadBalancers ?? []).length > 0
+                  ? [{ id: `${project.ref}-all`, name: 'API Load Balancer' }]
+                  : []
+                : []
+            }
+          />
         </div>
       ) : (
         <Button asChild type="default" onClick={onExploreClick}>

apps/studio/components/ui/DatabaseSelector.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { noop } from 'lodash'
-import { Check } from 'lucide-react'
+import { Check, ChevronDown, Loader2, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -10,10 +10,6 @@ import {
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
   Command_Shadcn_,
-  IconCheck,
-  IconChevronDown,
-  IconLoader,
-  IconPlus,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
@@ -72,10 +68,8 @@ const DatabaseSelector = ({
               variant === 'connected-on-left' && 'rounded-l-none border-l-0',
               variant === 'connected-on-both' && 'rounded-none border-x-0'
             )}
-            icon={isLoading && <IconLoader className="animate-spin" />}
-            iconRight={
-              <IconChevronDown className="text-foreground-light" strokeWidth={2} size={12} />
-            }
+            icon={isLoading && <Loader2 className="animate-spin" />}
+            iconRight={<ChevronDown className="text-foreground-light" strokeWidth={2} size={12} />}
           >
             Source:{' '}
             {selectedAdditionalOption ? (
@@ -110,15 +104,17 @@ const DatabaseSelector = ({
                     onSelect={() => {
                       state.setSelectedDatabaseId(option.id)
                       setOpen(false)
+                      onSelectId(option.id)
                     }}
                     onClick={() => {
                       state.setSelectedDatabaseId(option.id)
                       setOpen(false)
+                      onSelectId(option.id)
                     }}
                   >
                     <div className="w-full flex items-center justify-between">
                       <p>{option.name}</p>
-                      {option.id === selectedDatabaseId && <IconCheck />}
+                      {option.id === selectedDatabaseId && <Check size={14} />}
                     </div>
                   </CommandItem_Shadcn_>
                 ))}
@@ -200,7 +196,7 @@ const DatabaseSelector = ({
                   onClick={() => setOpen(false)}
                   className="w-full flex items-center gap-2"
                 >
-                  <IconPlus size={14} strokeWidth={1.5} />
+                  <Plus size={14} strokeWidth={1.5} />
                   <p>Create a new read replica</p>
                 </Link>
               </CommandItem_Shadcn_>