fix: Add links and variables to job tables

apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx

@@ -16,12 +16,15 @@ import {
   TableHeader,
   TableRow,
 } from "@ctrlplane/ui/table";
+import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 import { JobStatusReadable } from "@ctrlplane/validators/jobs";
 
 import { NoFilterMatch } from "~/app/[workspaceSlug]/(app)/_components/filter/NoFilterMatch";
 import { JobConditionBadge } from "~/app/[workspaceSlug]/(app)/_components/job-condition/JobConditionBadge";
 import { JobConditionDialog } from "~/app/[workspaceSlug]/(app)/_components/job-condition/JobConditionDialog";
 import { useJobDrawer } from "~/app/[workspaceSlug]/(app)/_components/job-drawer/useJobDrawer";
+import { JobLinksCell } from "~/app/[workspaceSlug]/(app)/_components/job-table/JobLinksCell";
+import { VariableCell } from "~/app/[workspaceSlug]/(app)/_components/job-table/VariableCell";
 import { JobTableStatusIcon } from "~/app/[workspaceSlug]/(app)/_components/JobTableStatusIcon";
 import { useFilter } from "~/app/[workspaceSlug]/(app)/_components/useFilter";
 import { api } from "~/trpc/react";
@@ -98,14 +101,16 @@ export const JobTable: React.FC<JobTableProps> = ({ workspaceId }) => {
 
       {releaseJobTriggers.isSuccess && releaseJobTriggers.data.total > 0 && (
         <div className="h-[calc(100%-41px)] overflow-auto">
-          <Table>
+          <Table className="table-fixed">
             <TableHeader>
               <TableRow>
-                <TableHead>Target</TableHead>
+                <TableHead>Resource</TableHead>
                 <TableHead>Environment</TableHead>
                 <TableHead>Deployment</TableHead>
-                <TableHead>Status</TableHead>
                 <TableHead>Release Version</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Links</TableHead>
+                <TableHead>Variables</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -118,13 +123,19 @@ export const JobTable: React.FC<JobTableProps> = ({ workspaceId }) => {
                   <TableCell>{job.resource.name}</TableCell>
                   <TableCell>{job.environment.name}</TableCell>
                   <TableCell>{job.release.deployment.name}</TableCell>
+                  <TableCell>{job.release.version}</TableCell>
                   <TableCell>
                     <div className="flex items-center gap-1">
                       <JobTableStatusIcon status={job.job.status} />
                       {JobStatusReadable[job.job.status]}
                     </div>
                   </TableCell>
-                  <TableCell>{job.release.version}</TableCell>
+                  <JobLinksCell
+                    linksMetadata={job.job.metadata.find(
+                      (m) => m.key === String(ReservedMetadataKey.Links),
+                    )}
+                  />
+                  <VariableCell variables={job.job.variables} />
                 </TableRow>
               ))}
             </TableBody>

apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/TableRow.tsx

@@ -2,39 +2,28 @@ import type { RouterOutputs } from "@ctrlplane/api";
 import type * as SCHEMA from "@ctrlplane/db/schema";
 import type { JobStatus } from "@ctrlplane/validators/jobs";
 import { useState } from "react";
-import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
-import {
-  IconChevronRight,
-  IconDots,
-  IconExternalLink,
-  IconLoader2,
-} from "@tabler/icons-react";
+import { IconChevronRight, IconDots } from "@tabler/icons-react";
 import { formatDistanceToNowStrict } from "date-fns";
 
 import { cn } from "@ctrlplane/ui";
-import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import { Button } from "@ctrlplane/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@ctrlplane/ui/collapsible";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@ctrlplane/ui/hover-card";
 import { TableCell, TableRow } from "@ctrlplane/ui/table";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 import { JobStatusReadable } from "@ctrlplane/validators/jobs";
 
-import { api } from "~/trpc/react";
 import { JobDropdownMenu } from "../../systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
 import { DeployButton } from "../../systems/[systemSlug]/deployments/DeployButton";
+import { JobLinksCell } from "../job-table/JobLinksCell";
 import { JobTableStatusIcon } from "../JobTableStatusIcon";
 
 type ReleaseJobTrigger = SCHEMA.ReleaseJobTrigger & {
-  job: SCHEMA.Job;
+  job: SCHEMA.Job & { metadata: SCHEMA.JobMetadata[] };
 };
 
 type StatusCellProps = {
@@ -88,117 +77,6 @@ const CreatedCell: React.FC<CreatedCellProps> = ({ releaseJobTrigger }) => (
   </TableCell>
 );
 
-type LinksCellProps = {
-  releaseJobTrigger?: ReleaseJobTrigger;
-};
-
-const LinksCell: React.FC<LinksCellProps> = ({ releaseJobTrigger }) => {
-  const jobQ = api.job.config.byId.useQuery(releaseJobTrigger?.job.id ?? "", {
-    enabled: releaseJobTrigger != null,
-    refetchInterval: 5_000,
-  });
-  const job = jobQ.data;
-  const linksMetadata = job?.job.metadata.find(
-    (m) => m.key === String(ReservedMetadataKey.Links),
-  );
-  const links =
-    linksMetadata != null
-      ? (JSON.parse(linksMetadata.value) as Record<string, string>)
-      : null;
-
-  if (jobQ.isLoading)
-    return (
-      <TableCell>
-        <IconLoader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-      </TableCell>
-    );
-
-  if (links == null) return <TableCell />;
-
-  const numLinks = Object.keys(links).length;
-  if (numLinks <= 3)
-    return (
-      <TableCell className="py-0">
-        <div
-          className="flex flex-wrap gap-2"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {Object.entries(links).map(([label, url]) => (
-            <Link
-              key={label}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={cn(
-                buttonVariants({
-                  variant: "secondary",
-                  size: "sm",
-                }),
-                "h-6 max-w-20 gap-1 truncate px-2 py-0",
-              )}
-            >
-              <IconExternalLink className="h-4 w-4" />
-              {label}
-            </Link>
-          ))}
-        </div>
-      </TableCell>
-    );
-
-  const firstThreeLinks = Object.entries(links).slice(0, 3);
-  const remainingLinks = Object.entries(links).slice(3);
-
-  return (
-    <TableCell className="py-0">
-      <div
-        className="flex flex-wrap gap-2"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {firstThreeLinks.map(([label, url]) => (
-          <Link
-            key={label}
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={cn(
-              buttonVariants({
-                variant: "secondary",
-                size: "sm",
-              }),
-            )}
-          >
-            <IconExternalLink className="h-4 w-4" />
-            {label}
-          </Link>
-        ))}
-        <HoverCard>
-          <HoverCardTrigger asChild>
-            <Button variant="secondary" size="sm" className="h-6">
-              +{remainingLinks.length} more
-            </Button>
-          </HoverCardTrigger>
-          <HoverCardContent
-            className="flex max-w-40 flex-col gap-1 p-2"
-            align="start"
-          >
-            {remainingLinks.map(([label, url]) => (
-              <Link
-                key={label}
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="truncate text-sm underline-offset-1 hover:underline"
-              >
-                {label}
-              </Link>
-            ))}
-          </HoverCardContent>
-        </HoverCard>
-      </div>
-    </TableCell>
-  );
-};
-
 type DropdownCellProps = {
   releaseJobTrigger?: ReleaseJobTrigger;
   release: SCHEMA.Release;
@@ -306,7 +184,11 @@ const ReleaseJobTriggerParentRow: React.FC<ReleaseJobTriggerParentRowProps> = ({
         environmentId={environment.id}
       />
       <CreatedCell releaseJobTrigger={releaseJobTrigger} />
-      <LinksCell releaseJobTrigger={releaseJobTrigger} />
+      <JobLinksCell
+        linksMetadata={releaseJobTrigger?.job.metadata.find(
+          (m) => m.key === String(ReservedMetadataKey.Links),
+        )}
+      />
       <DropdownCell
         releaseJobTrigger={releaseJobTrigger}
         release={release}
@@ -345,7 +227,11 @@ const ReleaseJobTriggerChildRow: React.FC<ReleaseJobTriggerRowProps> = ({
         environmentId={environment.id}
       />
       <CreatedCell releaseJobTrigger={releaseJobTrigger} />
-      <LinksCell releaseJobTrigger={releaseJobTrigger} />
+      <JobLinksCell
+        linksMetadata={releaseJobTrigger?.job.metadata.find(
+          (m) => m.key === String(ReservedMetadataKey.Links),
+        )}
+      />
       <DropdownCell
         releaseJobTrigger={releaseJobTrigger}
         release={release}

apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-table/JobLinksCell.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { IconExternalLink } from "@tabler/icons-react";
+
+import { cn } from "@ctrlplane/ui";
+import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@ctrlplane/ui/hover-card";
+import { TableCell } from "@ctrlplane/ui/table";
+
+type JobLinksCellProps = {
+  linksMetadata?: SCHEMA.JobMetadata;
+};
+
+export const JobLinksCell: React.FC<JobLinksCellProps> = ({
+  linksMetadata,
+}) => {
+  const links =
+    linksMetadata != null
+      ? (JSON.parse(linksMetadata.value) as Record<string, string>)
+      : null;
+
+  if (links == null) return <TableCell />;
+
+  const numLinks = Object.keys(links).length;
+  if (numLinks <= 3)
+    return (
+      <TableCell className="py-0">
+        <div
+          className="flex flex-wrap gap-2"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {Object.entries(links).map(([label, url]) => (
+            <Link
+              key={label}
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                buttonVariants({
+                  variant: "secondary",
+                  size: "sm",
+                }),
+                "h-6 max-w-20 gap-1 truncate px-2 py-0",
+              )}
+            >
+              <IconExternalLink className="h-4 w-4" />
+              {label}
+            </Link>
+          ))}
+        </div>
+      </TableCell>
+    );
+
+  const firstThreeLinks = Object.entries(links).slice(0, 3);
+  const remainingLinks = Object.entries(links).slice(3);
+
+  return (
+    <TableCell className="py-0">
+      <div
+        className="flex flex-wrap gap-2"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {firstThreeLinks.map(([label, url]) => (
+          <Link
+            key={label}
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              buttonVariants({
+                variant: "secondary",
+                size: "sm",
+              }),
+              "h-6 max-w-20 gap-1 truncate px-2 py-0",
+            )}
+          >
+            <IconExternalLink className="h-4 w-4" />
+            {label}
+          </Link>
+        ))}
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <Button variant="secondary" size="sm" className="h-6">
+              +{remainingLinks.length} more
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent
+            className="flex max-w-40 flex-col gap-1 p-2"
+            align="start"
+          >
+            {remainingLinks.map(([label, url]) => (
+              <Link
+                key={label}
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="truncate text-sm underline-offset-1 hover:underline"
+              >
+                {label}
+              </Link>
+            ))}
+          </HoverCardContent>
+        </HoverCard>
+      </div>
+    </TableCell>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-table/VariableCell.tsx

@@ -0,0 +1,39 @@
+import type * as schema from "@ctrlplane/db/schema";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@ctrlplane/ui/hover-card";
+import { TableCell } from "@ctrlplane/ui/table";
+
+type VariableCellProps = {
+  variables: schema.JobVariable[];
+};
+
+export const VariableCell: React.FC<VariableCellProps> = ({ variables }) => {
+  return (
+    <TableCell className="py-0">
+      {variables.length > 0 && (
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <Button variant="secondary" size="sm" className="h-6 px-2 py-0">
+              {variables.length} variable{variables.length !== 1 ? "s" : ""}
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent
+            align="center"
+            className="flex max-w-60 flex-col gap-1 p-2"
+          >
+            {variables.map((v) => (
+              <div key={v.id} className="text-xs">
+                {v.key}: {String(v.value)}
+              </div>
+            ))}
+          </HoverCardContent>
+        </HoverCard>
+      )}
+    </TableCell>
+  );
+};