[Fix] Realtime Event Filtering

resources/js/hooks/use-socket-events.ts

@@ -95,16 +95,22 @@ export function useRealtimeRecord<T extends { id: number }>(initial: T | null |
 /**
  * Manages paginated Inertia data with realtime socket updates.
  *
- * Listens for socket events matching `{eventPrefix}.updated` (replace row),
- * and `{eventPrefix}.deleted` (remove row) automatically.
+ * Listens for socket events matching `{eventPrefix}.created` (prepend row),
+ * `{eventPrefix}.updated` (replace row), and `{eventPrefix}.deleted` (remove row) automatically.
+ *
+ * Socket events are broadcast project-wide, so pass a `scope` of field/value pairs
+ * (e.g. `{ server_id: server.id }`) that created records must match before trigger refreshes
  *
  * Returns the live data and setter for custom handling.
  */
 export function useRealtime<T extends { id: number }>(
   initialData: PaginatedData<T>,
   eventPrefix: string,
+  scope?: Partial<T>,
 ): [PaginatedData<T>, Dispatch<SetStateAction<PaginatedData<T>>>] {
   const [data, setData] = useState<PaginatedData<T>>(initialData);
+  const scopeRef = useRef(scope);
+  scopeRef.current = scope;
 
   useEffect(() => {
     setData(initialData);
@@ -122,6 +128,9 @@ export function useRealtime<T extends { id: number }>(
 
         switch (action) {
           case 'created':
+            if (!Object.entries(scopeRef.current ?? {}).every(([key, value]) => (eventData as Record<string, unknown>)[key] === value)) {
+              break;
+            }
             setData((prev) => ({
               ...prev,
               data: [eventData as unknown as T, ...prev.data],

resources/js/pages/backups/files.tsx

@@ -21,7 +21,7 @@ type Page = {
 
 export default function Files() {
   const page = usePage<Page>();
-  const [files] = useRealtime<BackupFile>(page.props.files, 'backup-file');
+  const [files] = useRealtime<BackupFile>(page.props.files, 'backup-file', { backup_id: page.props.backup.id });
 
   const runBackupForm = useForm();
   const runBackup = () => {

resources/js/pages/backups/index.tsx

@@ -20,7 +20,7 @@ type Page = {
 
 export default function Backups() {
   const page = usePage<Page>();
-  const [backups] = useRealtime<Backup>(page.props.backups, 'backup');
+  const [backups] = useRealtime<Backup>(page.props.backups, 'backup', { server_id: page.props.server.id });
 
   return (
     <ServerLayout>

resources/js/pages/commands/show.tsx

@@ -23,7 +23,7 @@ type Page = {
 
 export default function Show() {
   const page = usePage<Page>();
-  const [executions] = useRealtime<CommandExecution>(page.props.executions, 'command-execution');
+  const [executions] = useRealtime<CommandExecution>(page.props.executions, 'command-execution', { command_id: page.props.command.id });
 
   const breadcrumbs: BreadcrumbItem[] = [
     {

resources/js/pages/php/index.tsx

@@ -19,7 +19,7 @@ export default function PHP() {
     installedVersions: PaginatedData<Service>;
   }>();
 
-  const [installedVersions] = useRealtime<Service>(page.props.installedVersions, 'service');
+  const [installedVersions] = useRealtime<Service>(page.props.installedVersions, 'service', { server_id: page.props.server.id, type: 'php' });
 
   return (
     <ServerLayout>

resources/js/pages/redirects/index.tsx

@@ -22,7 +22,7 @@ export default function Redirects() {
     redirects: PaginatedData<Redirect>;
   }>();
 
-  const [redirects] = useRealtime<Redirect>(page.props.redirects, 'redirect');
+  const [redirects] = useRealtime<Redirect>(page.props.redirects, 'redirect', { site_id: page.props.site.id });
 
   return (
     <ServerLayout>

resources/js/pages/scripts/show.tsx

@@ -18,7 +18,7 @@ type Page = {
 
 export default function Show() {
   const page = usePage<Page>();
-  const [executions] = useRealtime<ScriptExecution>(page.props.executions, 'script-execution');
+  const [executions] = useRealtime<ScriptExecution>(page.props.executions, 'script-execution', { script_id: page.props.script.id });
 
   const breadcrumbs: BreadcrumbItem[] = [
     {

resources/js/pages/server-logs/components/logs.tsx

@@ -11,7 +11,7 @@ export default function Logs({ server, site }: { server: Server; site?: Site })
   const [currentPage, setCurrentPage] = useState(1);
 
   const query = useQuery({
-    queryKey: ['serverLogs', currentPage],
+    queryKey: ['serverLogs', server.id, site?.id, currentPage],
     queryFn: async () => {
       return (
         await axios.get(route('logs.json', { server: server.id, site: site?.id }), {

resources/js/pages/server-logs/index.tsx

@@ -18,10 +18,13 @@ export default function ServerLogs() {
     title: string;
     server: Server;
     logs: PaginatedData<ServerLog>;
-    remote: boolean;
+    remote?: boolean;
   }>();
 
-  const [logs] = useRealtime<ServerLog>(page.props.logs, 'server-log');
+  const [logs] = useRealtime<ServerLog>(page.props.logs, 'server-log', {
+    server_id: page.props.server.id,
+    is_remote: !!page.props.remote,
+  });
 
   return (
     <ServerLayout>

resources/js/pages/server-ssls/index.tsx

@@ -21,7 +21,7 @@ export default function ServerSsls() {
     domains: Domain[];
   }>();
 
-  const [ssls] = useRealtime<SSL>(page.props.ssls, 'ssl');
+  const [ssls] = useRealtime<SSL>(page.props.ssls, 'ssl', { server_id: page.props.server.id, site_id: null });
 
   return (
     <ServerLayout>

resources/js/pages/servers/installing.tsx

@@ -14,7 +14,7 @@ export default function InstallingServer() {
     logs: PaginatedData<ServerLog>;
   }>();
 
-  const [logs] = useRealtime<ServerLog>(page.props.logs, 'server-log');
+  const [logs] = useRealtime<ServerLog>(page.props.logs, 'server-log', { server_id: page.props.server.id });
 
   return (
     <Container className="max-w-5xl">

resources/js/pages/services/index.tsx

@@ -19,7 +19,7 @@ export default function WorkerIndex() {
     services: PaginatedData<Service>;
   }>();
 
-  const [services] = useRealtime<Service>(page.props.services, 'service');
+  const [services] = useRealtime<Service>(page.props.services, 'service', { server_id: page.props.server.id });
 
   return (
     <ServerLayout>

resources/js/pages/sites/logs.tsx

@@ -10,6 +10,7 @@ import { PaginatedData } from '@/types';
 import { ServerLog } from '@/types/server-log';
 import { DataTable } from '@/components/data-table';
 import { columns } from '@/pages/server-logs/components/columns';
+import { useRealtime } from '@/hooks/use-socket-events';
 
 type Page = {
   server: Server;
@@ -19,6 +20,7 @@ type Page = {
 
 export default function ShowSite() {
   const page = usePage<Page>();
+  const [logs] = useRealtime<ServerLog>(page.props.logs, 'server-log', { site_id: page.props.site.id });
 
   return (
     <ServerLayout>
@@ -31,7 +33,7 @@ export default function ShowSite() {
 
         <SiteBanners site={page.props.site} />
 
-        <DataTable columns={columns} paginatedData={page.props.logs} searchable />
+        <DataTable columns={columns} paginatedData={logs} searchable />
       </Container>
     </ServerLayout>
   );

resources/js/pages/workers/index.tsx

@@ -24,7 +24,11 @@ export default function WorkerIndex() {
   }>();
   const dialog = useDialog();
 
-  const [workers] = useRealtime<Worker>(page.props.workers, 'worker');
+  const [workers] = useRealtime<Worker>(
+    page.props.workers,
+    'worker',
+    page.props.site ? { site_id: page.props.site.id } : { server_id: page.props.server.id },
+  );
 
   return (
     <ServerLayout>

resources/js/types/server-log.d.ts

@@ -1,7 +1,7 @@
 export interface ServerLog {
   id: number;
   server_id: number;
-  site_id?: number;
+  site_id: number | null;
   type: string;
   name: string;
   disk: string;