fix: Job drawer

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

@@ -43,8 +43,8 @@ export default async function JobsPage({
         <TableBody>
           {releaseJobTriggers.map((job) => (
             <TableRow key={job.id}>
-              <TableCell>{job.environment?.name ?? "N/A"}</TableCell>
-              <TableCell>{job.target?.name ?? "N/A"}</TableCell>
+              <TableCell>{job.environment.name}</TableCell>
+              <TableCell>{job.target.name}</TableCell>
               <TableCell>{job.release.version}</TableCell>
               <TableCell>{job.type}</TableCell>
               <TableCell>{format(new Date(job.createdAt), "PPpp")}</TableCell>

apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/page.tsx

@@ -38,7 +38,7 @@ const DeploymentsTable: React.FC<{ targetId: string }> = ({ targetId }) => {
                 j.job.status === JobStatus.Completed ||
                 j.job.status === JobStatus.Pending,
             )
-            .find((j) => j.deployment?.id === deployment.id);
+            .find((j) => j.deployment.id === deployment.id);
 
           return (
             <TableRow key={deployment.id}>

apps/webservice/src/app/[workspaceSlug]/_components/ConfigEditor.tsx

@@ -32,7 +32,7 @@ export const ConfigEditor: React.FC<{
           value={value}
           theme="vs-dark-custom"
           onChange={(v) => onChange?.(v ?? "")}
-          options={{ readOnly }}
+          options={{ readOnly, minimap: { enabled: false } }}
         />
       </div>
     </Card>

apps/webservice/src/app/[workspaceSlug]/_components/JobTableStatusIcon.tsx

@@ -6,23 +6,27 @@ import {
   IconLoader2,
 } from "@tabler/icons-react";
 
+import { cn } from "@ctrlplane/ui";
 import { JobStatus } from "@ctrlplane/validators/jobs";
 
-export const JobTableStatusIcon: React.FC<{ status?: schema.JobStatus }> = ({
-  status,
-}) => {
+export const JobTableStatusIcon: React.FC<{
+  status?: schema.JobStatus;
+  className?: string;
+}> = ({ status, className }) => {
   if (status === JobStatus.Completed)
-    return <IconCircleCheck className="h-4 w-4 text-green-400" />;
+    return (
+      <IconCircleCheck className={cn("h-4 w-4 text-green-400", className)} />
+    );
   if (status === JobStatus.Failure || status === JobStatus.InvalidJobAgent)
-    return <IconCircleX className="h-4 w-4 text-red-400" />;
+    return <IconCircleX className={cn("h-4 w-4 text-red-400", className)} />;
   if (status === JobStatus.Pending)
-    return <IconClock className="h-4 w-4 text-neutral-400" />;
+    return <IconClock className={cn("h-4 w-4 text-neutral-400", className)} />;
   if (status === JobStatus.InProgress)
     return (
       <div className="animate-spin rounded-full text-blue-400">
-        <IconLoader2 className="h-4 w-4" />
+        <IconLoader2 className={cn("h-4 w-4", className)} />
       </div>
     );
 
-  return <IconClock className="h-4 w-4 text-neutral-400" />;
+  return <IconClock className={cn("h-4 w-4 text-neutral-400", className)} />;
 };

apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/Job.ts

@@ -0,0 +1,15 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { JobStatus } from "@ctrlplane/validators/jobs";
+
+export type Job = SCHEMA.ReleaseJobTrigger & {
+  job: Omit<SCHEMA.Job, "status"> & {
+    metadata: SCHEMA.JobMetadata[];
+    status: JobStatus;
+  };
+  jobAgent: SCHEMA.JobAgent;
+  target: SCHEMA.Target;
+  release: SCHEMA.Release & { deployment: SCHEMA.Deployment };
+  environment: SCHEMA.Environment;
+  rolloutDate: Date | null;
+  causedBy?: SCHEMA.User | null;
+};

apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobAgent.tsx

@@ -0,0 +1,35 @@
+import * as yaml from "js-yaml";
+
+import type { Job } from "./Job";
+import { ConfigEditor } from "../ConfigEditor";
+
+type JobAgentProps = {
+  job: Job;
+};
+
+export const JobAgent: React.FC<JobAgentProps> = ({ job }) => (
+  <div className="space-y-2">
+    <div className="text-sm">Agent</div>
+    <table width="100%" className="table-fixed text-xs">
+      <tbody>
+        <tr>
+          <td className="w-[110px] p-1 pr-2 text-muted-foreground">Name</td>
+          <td>{job.jobAgent.name}</td>
+        </tr>
+        <tr>
+          <td className="w-[110px] p-1 pr-2 text-muted-foreground">Type</td>
+          <td>{job.jobAgent.type}</td>
+        </tr>
+        <tr>
+          <td className="w-[110px] p-1 pr-2 align-top text-muted-foreground">
+            Job Config
+          </td>
+          <td />
+        </tr>
+      </tbody>
+    </table>
+    <div className="scrollbar-none max-h-[250px] overflow-auto">
+      <ConfigEditor value={yaml.dump(job.job.jobAgentConfig)} readOnly />
+    </div>
+  </div>
+);

apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type React from "react";
+import Link from "next/link";
+import {
+  IconDotsVertical,
+  IconExternalLink,
+  IconLoader2,
+  IconRocket,
+} from "@tabler/icons-react";
+
+import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import { Drawer, DrawerContent, DrawerTitle } from "@ctrlplane/ui/drawer";
+import { ReservedMetadataKey } from "@ctrlplane/validators/targets";
+
+import { JobDropdownMenu } from "~/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
+import { api } from "~/trpc/react";
+import { JobAgent } from "./JobAgent";
+import { JobMetadata } from "./JobMetadata";
+import { JobPropertiesTable } from "./JobProperties";
+import { useJobDrawer } from "./useJobDrawer";
+
+export const JobDrawer: React.FC = () => {
+  const { jobId, removeJobId } = useJobDrawer();
+  const isOpen = jobId != null && jobId != "";
+  const setIsOpen = removeJobId;
+
+  const jobQ = api.job.config.byId.useQuery(jobId ?? "", {
+    enabled: isOpen,
+    refetchInterval: 10_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;
+
+  return (
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
+      <DrawerContent
+        showBar={false}
+        className="left-auto right-0 top-0 mt-0 h-screen w-1/3 overflow-auto rounded-none focus-visible:outline-none"
+      >
+        {jobQ.isLoading && (
+          <div className="flex h-full w-full items-center justify-center">
+            <IconLoader2 className="h-8 w-8 animate-spin" />
+          </div>
+        )}
+        {!jobQ.isLoading && (
+          <>
+            <DrawerTitle className="border-b p-6">
+              <div className="flex items-center gap-2 ">
+                <div className="flex flex-shrink-0 items-center gap-2 rounded bg-blue-500/20 p-1 text-blue-400">
+                  <IconRocket className="h-4 w-4" />
+                </div>
+                Job
+                {job != null && (
+                  <JobDropdownMenu
+                    release={job.release}
+                    environmentId={job.environment.id}
+                    target={job.target}
+                    deploymentName={job.release.deployment.name}
+                    job={job.job}
+                  >
+                    <Button variant="ghost" size="icon" className="h-6 w-6">
+                      <IconDotsVertical className="h-3 w-3" />
+                    </Button>
+                  </JobDropdownMenu>
+                )}
+              </div>
+              {links != null && (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  <>
+                    {Object.entries(links).map(([label, url]) => (
+                      <Link
+                        key={label}
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={buttonVariants({
+                          variant: "secondary",
+                          size: "sm",
+                          className: "gap-1",
+                        })}
+                      >
+                        <IconExternalLink className="h-4 w-4" />
+                        {label}
+                      </Link>
+                    ))}
+                  </>
+                </div>
+              )}
+            </DrawerTitle>
+            {job != null && (
+              <div className="flex w-full flex-col gap-6 p-6">
+                <JobPropertiesTable job={job} />
+                <JobMetadata job={job} />
+                <JobAgent job={job} />
+              </div>
+            )}
+          </>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobMetadata.tsx

@@ -0,0 +1,56 @@
+import { IconSparkles } from "@tabler/icons-react";
+
+import { Input } from "@ctrlplane/ui/input";
+import { ReservedMetadataKey } from "@ctrlplane/validators/targets";
+
+import type { Job } from "./Job";
+import { useMatchSorterWithSearch } from "~/utils/useMatchSorter";
+
+type JobMetadataProps = {
+  job: Job;
+};
+
+export const JobMetadata: React.FC<JobMetadataProps> = ({ job }) => {
+  const sortedMetadata = job.job.metadata
+    .map(({ key, value }) => [key, value] as [string, string])
+    .sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+  const { search, setSearch, result } = useMatchSorterWithSearch(
+    sortedMetadata,
+    { keys: ["0", "1"] },
+  );
+  return (
+    <div className="space-y-2">
+      <span className="text-sm">Metadata ({sortedMetadata.length})</span>
+      <div className="text-xs">
+        <Input
+          className="w-full rounded-b-none text-xs"
+          placeholder="Search ..."
+          aria-label="Search metadata"
+          role="searchbox"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
+          {result.length === 0 && (
+            <div className="text-center text-muted-foreground">
+              No matching metadata found
+            </div>
+          )}
+          {result.map(([key, value]) => (
+            <div className="text-nowrap font-mono" key={key}>
+              <span>
+                {Object.values(ReservedMetadataKey).includes(
+                  key as ReservedMetadataKey,
+                ) && (
+                  <IconSparkles className="inline-block h-3 w-3 text-yellow-300" />
+                )}{" "}
+              </span>
+              <span className="text-red-400">{key}:</span>
+              <span className="text-green-300"> {value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobProperties.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { capitalCase } from "change-case";
+import { format } from "date-fns";
+
+import { JobStatusReadable } from "@ctrlplane/validators/jobs";
+import { ReservedMetadataKey } from "@ctrlplane/validators/targets";
+
+import type { Job } from "./Job";
+import { JobTableStatusIcon } from "../JobTableStatusIcon";
+
+type JobPropertiesTableProps = {
+  job: Job;
+};
+
+export const JobPropertiesTable: React.FC<JobPropertiesTableProps> = ({
+  job,
+}) => {
+  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;
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm">Properties</div>
+      <table width="100%" className="table-fixed text-xs">
+        <tbody>
+          <tr>
+            <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+              Job Status
+            </td>
+            <td>
+              <div className="flex items-center gap-2">
+                <JobTableStatusIcon
+                  status={job.job.status}
+                  className="h-3 w-3"
+                />
+                {JobStatusReadable[job.job.status]}
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+              Environment
+            </td>
+            <td>{job.environment.name}</td>
+          </tr>
+          <tr>
+            <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+              Deployment
+            </td>
+            <td>{capitalCase(job.release.deployment.name)}</td>
+          </tr>
+          <tr>
+            <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+              Release
+            </td>
+            <td>{job.release.name}</td>
+          </tr>
+          {job.causedBy != null && (
+            <tr>
+              <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+                Caused by
+              </td>
+              <td>{job.causedBy.name}</td>
+            </tr>
+          )}
+          <tr>
+            <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+              Created at
+            </td>
+            <td>{format(job.job.createdAt, "MMM d, yyyy 'at' h:mm a")}</td>
+          </tr>
+
+          <tr>
+            <td className="w-[110px] p-1 pr-2 text-muted-foreground">
+              Updated at
+            </td>
+            <td>{format(job.job.updatedAt, "MMM d, yyyy 'at' h:mm a")}</td>
+          </tr>
+
+          <tr>
+            <td className="p-1 pr-2 align-top text-muted-foreground">Links</td>
+            <td>
+              {links == null ? (
+                <span className="cursor-help italic text-gray-500">
+                  Not set
+                </span>
+              ) : (
+                <div className="pt-1">
+                  {Object.entries(links).map(([name, url]) => (
+                    <a
+                      key={name}
+                      referrerPolicy="no-referrer"
+                      href={url}
+                      className="inline-block w-full overflow-hidden text-ellipsis text-nowrap text-blue-300 hover:text-blue-400"
+                    >
+                      {name}
+                    </a>
+                  ))}
+                </div>
+              )}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};