[pull] master from supabase:master

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -2357,6 +2357,10 @@ export const telemetry: NavMenuConstant = {
           name: 'Log drains',
           url: '/guides/telemetry/log-drains',
         },
+        {
+          name: 'Reports',
+          url: '/guides/telemetry/reports',
+        },
         {
           name: 'Metrics',
           url: '/guides/telemetry/metrics',

apps/docs/content/guides/database/connection-management.mdx

@@ -23,6 +23,32 @@ These numbers are generalizations and depends on other Supabase products that yo
 
 ### Capturing historical usage
 
+#### Dashboard monitoring charts
+
+<Image
+  alt="Database client connections chart"
+  zoomable
+  src={{
+    dark: '/docs/img/database/reports/db-connections-chart-dark.png',
+    light: '/docs/img/database/reports/db-connections-chart-light.png',
+  }}
+/>
+
+For Teams and Enterprise plans, Supabase provides Advanced Telemetry charts directly within the Dashboard. The `Database client connections` chart displays historical connection data broken down by connection type:
+
+- **Postgres**: Direct connections from your application
+- **PostgREST**: Connections from the PostgREST API layer
+- **Reserved**: Administrative connections for Supabase services
+- **Auth**: Connections from Supabase Auth service
+- **Storage**: Connections from Supabase Storage service
+- **Other roles**: Miscellaneous database connections
+
+This chart helps you monitor connection pool usage, identify connection leaks, and plan capacity. It also shows a reference line for your compute size's maximum connection limit.
+
+For more details on using these monitoring charts, see the [Reports guide](/docs/guides/telemetry/reports#advanced-telemetry).
+
+#### Grafana Dashboard
+
 Supabase offers a Grafana Dashboard that records and visualizes over 200 project metrics, including connections. For setup instructions, check the [metrics docs](/docs/guides/platform/metrics).
 
 Its "Client Connections" graph displays connections for both Supavisor and Postgres

apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx

@@ -24,7 +24,9 @@ export const BranchManagementSection = ({
       <div className="bg-surface-100 shadow-sm flex justify-between items-center px-4 py-3 rounded-t-lg text-xs font-mono uppercase">
         {typeof header === 'string' ? <span>{header}</span> : header}
       </div>
-      <div className="bg-surface border-t shadow-sm rounded-b-lg text-sm divide-y">{children}</div>
+      <div className="bg-surface border-t shadow-sm rounded-b-lg text-sm divide-y px-4">
+        {children}
+      </div>
       {footer !== undefined && <div className="bg-surface-100 px-6 py-1 border-t">{footer}</div>}
     </div>
   )

apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx

@@ -6,6 +6,8 @@ import { BranchSelector } from './BranchSelector'
 import { DocsButton } from 'components/ui/DocsButton'
 import { Button } from 'ui'
 
+const EMPTY_STATE_CONTAINER = 'flex items-center flex-col justify-center w-full py-10 px-4'
+
 export const PullRequestsEmptyState = ({
   url,
   projectRef,
@@ -24,9 +26,9 @@ export const PullRequestsEmptyState = ({
   gitlessBranching: boolean
 }) => {
   return (
-    <div className="flex items-center flex-col justify-center w-full py-10">
+    <div className={EMPTY_STATE_CONTAINER}>
       <p>No merge requests</p>
-      <p className="text-foreground-light">
+      <p className="text-foreground-light text-center">
         Create your first merge request to merge changes back to the main branch
       </p>
       <div className="flex items-center space-x-2 mt-4">
@@ -60,9 +62,9 @@ export const PreviewBranchesEmptyState = ({
   onSelectCreateBranch: () => void
 }) => {
   return (
-    <div className="flex items-center flex-col justify-center w-full py-10">
+    <div className={EMPTY_STATE_CONTAINER}>
       <p>Create your first preview branch</p>
-      <p className="text-foreground-light mb-4">
+      <p className="text-foreground-light text-center mb-4">
         Preview branches are short-lived environments that let you safely experiment with changes to
         your database schema without affecting your main database.
       </p>

apps/studio/components/interfaces/BranchManagement/Overview.tsx

@@ -16,14 +16,14 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
+import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
 import { useBranchQuery } from 'data/branches/branch-query'
 import { useBranchResetMutation } from 'data/branches/branch-reset-mutation'
 import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
 import type { Branch } from 'data/branches/branches-query'
 import { branchKeys } from 'data/branches/keys'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import {
   Button,
   DropdownMenu,
@@ -32,10 +32,10 @@ import {
   DropdownMenuTrigger,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { BranchLoader, BranchManagementSection, BranchRow, BranchRowLoader } from './BranchPanels'
 import { EditBranchModal } from './EditBranchModal'
 import { PreviewBranchesEmptyState } from './EmptyStates'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface OverviewProps {
   isLoading: boolean
@@ -99,7 +99,7 @@ export const Overview = ({
         {isSuccess && persistentBranches.length === 0 && (
           <div className="flex items-center flex-col justify-center w-full py-10">
             <p>No persistent branches</p>
-            <p className="text-foreground-light">
+            <p className="text-foreground-light text-center">
               Persistent branches are long-lived, cannot be reset, and are ideal for staging
               environments.
             </p>

apps/studio/components/interfaces/Reports/ReportChart.tsx

@@ -49,7 +49,6 @@ const ReportChart = ({
   const {
     data,
     isLoading: isLoadingChart,
-    chartAttributes,
     highlightedValue,
   } = useChartData({
     attributes: chart.attributes,
@@ -72,9 +71,7 @@ const ReportChart = ({
   const { data: filledData, isError: isFillError } = useFillTimeseriesSorted(
     chartDataArray,
     'period_start',
-    (chartAttributes.length > 0 ? chartAttributes : chart.attributes).map(
-      (attr: any) => attr.attribute
-    ),
+    chart.attributes.map((attr: any) => attr.attribute),
     0,
     startDate,
     endDate,
@@ -159,9 +156,7 @@ const ReportChart = ({
   return (
     <LogChartHandler
       {...chart}
-      attributes={
-        (chartAttributes.length > 0 ? chartAttributes : chart.attributes) as MultiAttribute[]
-      }
+      attributes={chart.attributes as MultiAttribute[]}
       data={finalData}
       isLoading={isLoadingChart || isLoading}
       highlightedValue={highlightedValue as any}

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

@@ -11,6 +11,7 @@ import TimeSplitInput from 'components/ui/DatePicker/TimeSplitInput'
 import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import {
   Button,
+  ButtonProps,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
@@ -31,9 +32,17 @@ interface Props {
   value: DatePickerValue
   helpers: DatetimeHelper[]
   onSubmit: (value: DatePickerValue) => void
+  buttonTriggerProps?: ButtonProps
+  popoverContentProps?: typeof PopoverContent_Shadcn_
 }
 
-export const LogsDatePicker = ({ onSubmit, helpers, value }: PropsWithChildren<Props>) => {
+export const LogsDatePicker = ({
+  onSubmit,
+  helpers,
+  value,
+  buttonTriggerProps,
+  popoverContentProps,
+}: PropsWithChildren<Props>) => {
   const [open, setOpen] = useState(false)
 
   // Reset the state when the popover closes
@@ -230,7 +239,7 @@ export const LogsDatePicker = ({ onSubmit, helpers, value }: PropsWithChildren<P
   return (
     <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
       <PopoverTrigger_Shadcn_ asChild>
-        <Button type="default" icon={<Clock size={12} />}>
+        <Button type="default" icon={<Clock size={12} />} {...buttonTriggerProps}>
           {value.isHelper
             ? value.text
             : `${dayjs(value.from).format('DD MMM, HH:mm')} - ${dayjs(value.to || new Date()).format('DD MMM, HH:mm')}`}
@@ -239,8 +248,9 @@ export const LogsDatePicker = ({ onSubmit, helpers, value }: PropsWithChildren<P
       <PopoverContent_Shadcn_
         className="flex w-full p-0"
         side="bottom"
-        align="center"
+        align="end"
         portal={true}
+        {...popoverContentProps}
       >
         <RadioGroup
           onValueChange={handleHelperChange}

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx

@@ -98,22 +98,6 @@ export const filterFields = [
       )
     },
   },
-  {
-    label: 'Host',
-    value: 'host',
-    type: 'checkbox',
-    defaultOpen: false,
-    options: [],
-    hasDynamicOptions: true,
-    hasAsyncSearch: true,
-    component: (props: Option) => {
-      return (
-        <span className="truncate block text-[0.75rem]" title={props.value as string}>
-          {props.value}
-        </span>
-      )
-    },
-  },
   {
     label: 'Pathname',
     value: 'pathname',
@@ -196,12 +180,6 @@ export const sheetFields = [
     ),
     skeletonClassName: 'w-56',
   },
-  {
-    id: 'host',
-    label: 'Host',
-    type: 'input',
-    skeletonClassName: 'w-24',
-  },
   {
     id: 'pathname',
     label: 'Pathname',

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.schema.ts

@@ -11,7 +11,6 @@ export const columnSchema = z.object({
   id: z.string(),
   log_type: z.enum(LOG_TYPES),
   method: z.enum(METHODS),
-  host: z.string(),
   pathname: z.string(),
   level: z.enum(LEVELS),
   status: z.number(),
@@ -36,7 +35,6 @@ export const columnFilterSchema = z.object({
     .transform((val) => val.split(ARRAY_DELIMITER))
     .pipe(z.enum(METHODS).array())
     .optional(),
-  host: z.string().optional(),
   pathname: z.string().optional(),
   status: z
     .string()

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -41,7 +41,7 @@ import {
   Separator,
 } from 'ui'
 import { RefreshButton } from '../../ui/DataTable/RefreshButton'
-import { UNIFIED_LOGS_COLUMNS } from './components/Columns'
+import { generateDynamicColumns, UNIFIED_LOGS_COLUMNS } from './components/Columns'
 import { DownloadLogsButton } from './components/DownloadLogsButton'
 import { LogsListPanel } from './components/LogsListPanel'
 import { ServiceFlowPanel } from './ServiceFlowPanel'
@@ -100,6 +100,8 @@ export const UnifiedLogs = () => {
     data: unifiedLogsData,
     isLoading,
     isFetching,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
     hasNextPage,
     refetch: refetchLogs,
     fetchNextPage,
@@ -131,6 +133,9 @@ export const UnifiedLogs = () => {
 
   const isRefetchingData = isFetching || isFetchingCounts || isFetchingCharts
 
+  // Only fade when filtering (not when loading more data or live mode)
+  const isFetchingButNotPaginating = isFetching && !isFetchingNextPage && !isFetchingPreviousPage
+
   const rawFlatData = useMemo(() => {
     return unifiedLogsData?.pages?.flatMap((page) => page.data ?? []) ?? []
   }, [unifiedLogsData?.pages])
@@ -165,13 +170,18 @@ export const UnifiedLogs = () => {
     return cn(levelClassName, isPast ? 'opacity-50' : 'opacity-100', 'h-[30px]')
   }
 
+  // Generate dynamic columns based on current data
+  const { columns: dynamicColumns, columnVisibility: dynamicColumnVisibility } = useMemo(() => {
+    return generateDynamicColumns(flatData)
+  }, [flatData])
+
   const table: Table<any> = useReactTable({
     data: flatData,
-    columns: UNIFIED_LOGS_COLUMNS,
+    columns: dynamicColumns,
     state: {
       columnFilters,
       sorting,
-      columnVisibility,
+      columnVisibility: { ...columnVisibility, ...dynamicColumnVisibility },
       rowSelection,
       columnOrder,
     },
@@ -331,7 +341,10 @@ export const UnifiedLogs = () => {
               />
               <TimelineChart
                 data={unifiedLogsChart}
-                className="-mb-2"
+                className={cn(
+                  '-mb-2',
+                  isFetchingCharts && 'opacity-60 transition-opacity duration-150'
+                )}
                 columnId="timestamp"
                 chartConfig={filteredChartConfig}
               />
@@ -346,7 +359,14 @@ export const UnifiedLogs = () => {
                 className="h-full"
               >
                 <ResizablePanelGroup key="main-logs" direction="vertical" className="h-full">
-                  <ResizablePanel defaultSize={100} minSize={30} className="bg">
+                  <ResizablePanel
+                    defaultSize={100}
+                    minSize={30}
+                    className={cn(
+                      'bg',
+                      isFetchingButNotPaginating && 'opacity-60 transition-opacity duration-150'
+                    )}
+                  >
                     <DataTableInfinite
                       columns={UNIFIED_LOGS_COLUMNS}
                       totalRows={totalDBRowCount}