Add dynamic column generation for UnifiedLogs table (supabase#37239)

* Remove 'host' field from UnifiedLogs interface

Eliminated the 'host' field from filter fields, schema definitions, and column configuration in UnifiedLogs. This streamlines the logs interface and removes unused or unnecessary data.

* Add dynamic column generation for UnifiedLogs table

Replaces static column definitions with a dynamic generator that hides columns when all their values are empty. The UnifiedLogs table now adapts its columns based on the current data, improving readability and relevance.

* Update Columns.tsx

* Update Columns.tsx

* Add column width classes to UnifiedLogs columns

Added explicit cell and header class names for column widths in the UnifiedLogs table to ensure consistent sizing and improve layout control.

* Update Columns.tsx

* Refactor dynamic columns to include visibility state

The dynamic columns generator now returns both columns and their visibility state, allowing UnifiedLogs to merge dynamic visibility with existing column visibility. This improves control over which columns are shown based on the data.

Author: MildTomato

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'
@@ -165,13 +165,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,
     },