supabase realtime updates on digger runs

diggerhq · Jul 30, 2024 · fa4c629 · fa4c629
1 parent 61dc745
commit fa4c629
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 88 deletions.
diff --git a/...-pages)/org/[organizationId]/(specific-organization-pages)/@navbar/[...catchAll]/page.tsx b/...-pages)/org/[organizationId]/(specific-organization-pages)/@navbar/[...catchAll]/page.tsx
@@ -11,9 +11,6 @@ import { Suspense } from 'react';
 export async function generateMetadata({ params }: { params: unknown }) {
   try {
     const { organizationId } = organizationParamSchema.parse(params);
-    console.log('----------------------------------------')
-    console.log('in [...catchAll]/page organizationId', organizationId)
-    console.log('----------------------------------------')
     const organizationTitle = await getOrganizationTitle(organizationId);
 
     return {

diff --git a/...es)/(application-pages)/project/[projectSlug]/(specific-project-pages)/AllRunsDetails.tsx b/...es)/(application-pages)/project/[projectSlug]/(specific-project-pages)/AllRunsDetails.tsx
@@ -1,11 +1,95 @@
 'use client';
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Tables } from "@/lib/database.types";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getRunsByProjectId } from "@/data/user/runs";
+import { supabaseUserClientComponentClient } from "@/supabase-clients/user/supabaseUserClientComponentClient";
+import { useQuery } from "@tanstack/react-query";
 import { motion } from "framer-motion";
+import { useEffect } from "react";
 import { AllRunsTable } from "./AllRunsTable";
 
-export default function AllRunsDetails({ runs, project }: { runs: Tables<'digger_runs'>[], project: Tables<'projects'> }) {
+export default function AllRunsDetails({
+    projectId,
+    projectSlug
+}: {
+    projectId: string;
+    projectSlug: string;
+}) {
+
+    const { data: runs, refetch, isLoading } = useQuery(
+        ['runs', projectId],
+        async () => {
+            return getRunsByProjectId(projectId);
+        },
+        {
+            refetchOnWindowFocus: false,
+        }
+    );
+
+    useEffect(() => {
+        const channel = supabaseUserClientComponentClient
+            .channel('digger_runs_realtime')
+            .on(
+                'postgres_changes',
+                {
+                    event: 'INSERT',
+                    schema: 'public',
+                    table: 'digger_runs',
+                    filter: `project_id=eq.${projectId}`
+                },
+                (payload) => {
+                    refetch();
+                }
+            )
+            .on(
+                'postgres_changes',
+                {
+                    event: 'UPDATE',
+                    schema: 'public',
+                    table: 'digger_runs',
+                    filter: `project_id=eq.${projectId}`
+                },
+                (payload) => {
+                    refetch();
+                },
+            )
+            .subscribe();
+
+        return () => {
+            channel.unsubscribe();
+        };
+    }, [projectId, refetch]);
+
+    if (isLoading) {
+        return (
+            <div className="w-full">
+                <div className="space-y-4">
+                    {[...Array(3)].map((_, index) => (
+                        <div key={index} className="flex space-x-4">
+                            <Skeleton className="h-12 w-1/4" />
+                            <Skeleton className="h-12 w-1/4" />
+                            <Skeleton className="h-12 w-1/4" />
+                            <Skeleton className="h-12 w-1/4" />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (!runs) {
+        return <Card>
+            <CardHeader>
+                <CardTitle>Project Runs</CardTitle>
+                <CardDescription>View all runs for this project</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <p>No runs found</p>
+            </CardContent>
+        </Card>
+    }
+
     return (
         <motion.div
             initial={{ opacity: 0, y: 10 }}
@@ -32,7 +116,7 @@ export default function AllRunsDetails({ runs, project }: { runs: Tables<'digger
                         animate={{ opacity: 1 }}
                         transition={{ duration: 0.15, delay: 0.2 }}
                     >
-                        <AllRunsTable runs={runs} projectSlug={project.slug} />
+                        <AllRunsTable runs={runs} projectSlug={projectSlug} />
                     </motion.div>
                 </CardContent>
             </Card>

diff --git a/...icated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/page.tsx b/...icated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/page.tsx
@@ -1,8 +1,7 @@
-
-
-import { getProjectById, getSlimProjectBySlug } from "@/data/user/projects";
+import { getSlimProjectBySlug } from "@/data/user/projects";
 import { projectSlugParamSchema } from "@/utils/zod-schemas/params";
 import type { Metadata } from "next";
+import AllRunsDetails from "./AllRunsDetails";
 
 type ProjectPageProps = {
   params: {
@@ -22,84 +21,14 @@ export async function generateMetadata({
   };
 }
 
-
-import { getRunsByProjectId } from "@/data/user/runs";
-import AllRunsDetails from "./AllRunsDetails";
-
-// const dummyRuns: Run[] = [
-//   {
-//     runId: "run-001",
-//     commitId: "abc123",
-//     status: "queued",
-//     date: "2023-06-01",
-//     user: "Alice"
-//   },
-//   {
-//     runId: "run-002",
-//     commitId: "def456",
-//     status: "pending approval",
-//     date: "2023-06-02",
-//     user: "Bob"
-//   },
-//   {
-//     runId: "run-003",
-//     commitId: "ghi789",
-//     status: "running",
-//     date: "2023-06-03",
-//     user: "Charlie"
-//   },
-//   {
-//     runId: "run-004",
-//     commitId: "jkl012",
-//     status: "approved",
-//     date: "2023-06-04",
-//     user: "Diana"
-//   },
-//   {
-//     runId: "run-005",
-//     commitId: "mno345",
-//     status: "succeeded",
-//     date: "2023-06-05",
-//     user: "Ethan"
-//   },
-//   {
-//     runId: "run-006",
-//     commitId: "pqr678",
-//     status: "failed",
-//     date: "2023-06-06",
-//     user: "Fiona"
-//   },
-//   {
-//     runId: "run-007",
-//     commitId: "stu901",
-//     status: "queued",
-//     date: "2023-06-07",
-//     user: "George"
-//   },
-//   {
-//     runId: "run-008",
-//     commitId: "vwx234",
-//     status: "running",
-//     date: "2023-06-08",
-//     user: "Hannah"
-//   }
-// ];
-
-// const runs = dummyRuns;
-
-
 export default async function ProjectPage({ params }: { params: unknown }) {
   const { projectSlug } = projectSlugParamSchema.parse(params);
   const slimProject = await getSlimProjectBySlug(projectSlug);
-  const project = await getProjectById(slimProject.id);
-  const runs = await getRunsByProjectId(slimProject.id);
+
 
   return (
     <div className="flex flex-col space-y-4 max-w-5xl mt-2">
-      <AllRunsDetails
-        project={project}
-        runs={runs}
-      />
+      <AllRunsDetails projectId={slimProject.id} projectSlug={projectSlug} />
     </div>
   );
 };
diff --git a/...cated-pages)/(application-pages)/project/[projectSlug]/runs/[runId]/ProjectRunDetails.tsx b/...cated-pages)/(application-pages)/project/[projectSlug]/runs/[runId]/ProjectRunDetails.tsx
@@ -8,14 +8,15 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { approveRun, rejectRun } from "@/data/user/runs";
 import { useSAToastMutation } from "@/hooks/useSAToastMutation";
 import { ToSnakeCase, ToTitleCase } from "@/lib/utils";
+import { supabaseUserClientComponentClient } from "@/supabase-clients/user/supabaseUserClientComponentClient";
 import { Table } from "@/types";
 import { DotFilledIcon } from "@radix-ui/react-icons";
 import { AnimatePresence, motion } from 'framer-motion';
 import { CheckCircle2, Clock, GitPullRequest, LinkIcon, Loader2, Play, XCircle } from 'lucide-react';
 import Image from 'next/image';
 import Link from "next/link";
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { statusColors } from "../../(specific-project-pages)/AllRunsTable";
 
 
@@ -121,7 +122,7 @@ export const ProjectRunDetails: React.FC<{
     applyTerraformOutput: string | null
     applyWorkflowRunUrl: string | null
     fullRepoName: string | null
-}> = ({ run, loggedInUser, isUserOrgAdmin, tfOutput, workflowRunUrl, applyTerraformOutput, applyWorkflowRunUrl, fullRepoName }) => {
+}> = ({ run: initialRun, loggedInUser, isUserOrgAdmin, tfOutput, workflowRunUrl, applyTerraformOutput, applyWorkflowRunUrl, fullRepoName }) => {
     const router = useRouter();
     const [activeStage, setActiveStage] = useState<'plan' | 'apply'>('plan');
 
@@ -149,6 +150,31 @@ export const ProjectRunDetails: React.FC<{
         }
     );
 
+    const [run, setRun] = useState(initialRun);
+
+
+    useEffect(() => {
+        const channel = supabaseUserClientComponentClient
+            .channel(`digger_run_${run.id}`)
+            .on(
+                'postgres_changes',
+                {
+                    event: 'UPDATE',
+                    schema: 'public',
+                    table: 'digger_runs',
+                    filter: `id=eq.${run.id}`
+                },
+                (payload) => {
+                    setRun(payload.new as Table<'digger_runs'>);
+                }
+            )
+            .subscribe();
+
+        return () => {
+            supabaseUserClientComponentClient.removeChannel(channel);
+        };
+    }, [run.id]);
+
     return (
         <div className="flex rounded-lg bg-background border overflow-hidden h-[calc(100vh-220px)] w-full">
             <motion.div

diff --git a/src/data/user/tfvars.ts b/src/data/user/tfvars.ts
diff --git a/src/supabase-clients/user/supabaseUserClientComponentClient.ts b/src/supabase-clients/user/supabaseUserClientComponentClient.ts
@@ -21,10 +21,5 @@ const optionalCookieOptions: CookieOptions = {
 // createClientComponentClient
 export const supabaseUserClientComponentClient =
   createClientComponentClient<Database>({
-    options: {
-      global: {
-        fetch,
-      },
-    },
     cookieOptions: optionalCookieOptions,
   });
diff --git a/supabase/migrations/20240730102713_realtime-to-digger-runs.sql b/supabase/migrations/20240730102713_realtime-to-digger-runs.sql
@@ -0,0 +1,4 @@
+  ALTER PUBLICATION supabase_realtime ADD TABLE public.digger_runs;
+  ALTER TABLE public.digger_runs REPLICA IDENTITY FULL;
+
+CREATE INDEX ON digger_runs (project_id);