fix: Target variables in job drawer

ctrlplanedev · Oct 25, 2024 · 9570fdc · 9570fdc
1 parent 87b5e1b
commit 9570fdc
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 1 deletion.
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/Job.ts b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/Job.ts
@@ -5,6 +5,7 @@ export type Job = SCHEMA.ReleaseJobTrigger & {
   job: Omit<SCHEMA.Job, "status"> & {
     metadata: SCHEMA.JobMetadata[];
     status: JobStatus;
+    variables: SCHEMA.JobVariable[];
   };
   jobAgent: SCHEMA.JobAgent;
   target: SCHEMA.Target;

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
@@ -18,6 +18,7 @@ import { api } from "~/trpc/react";
 import { JobAgent } from "./JobAgent";
 import { JobMetadata } from "./JobMetadata";
 import { JobPropertiesTable } from "./JobProperties";
+import { JobVariables } from "./JobVariables";
 import { DependenciesDiagram } from "./RelationshipsDiagramDependencies";
 import { useJobDrawer } from "./useJobDrawer";
 
@@ -107,7 +108,14 @@ export const JobDrawer: React.FC = () => {
                   </div>
                 </div>
 
-                <JobMetadata job={job} />
+                <div className="grid grid-cols-2 gap-6">
+                  <div className="col-span-1">
+                    <JobVariables job={job} />
+                  </div>
+                  <div className="col-span-1">
+                    <JobMetadata job={job} />
+                  </div>
+                </div>
 
                 <DependenciesDiagram
                   targetId={job.target.id}

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobVariables.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobVariables.tsx
@@ -0,0 +1,61 @@
+import { Input } from "@ctrlplane/ui/input";
+
+import type { Job } from "./Job";
+import { useMatchSorterWithSearch } from "~/utils/useMatchSorter";
+
+type JobVariablesProps = {
+  job: Job;
+};
+
+export const JobVariables: React.FC<JobVariablesProps> = ({ job }) => {
+  const sortedVariables = job.job.variables
+    .map((v) => {
+      const key = String(v.key);
+      const sensitive = v.sensitive ?? false;
+      const value = sensitive ? "*****" : String(v.value);
+      const searchableValue = sensitive ? "" : value;
+      return [key, value, sensitive, searchableValue] as [
+        string,
+        string,
+        boolean,
+        string,
+      ];
+    })
+    .sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+  const { search, setSearch, result } = useMatchSorterWithSearch(
+    sortedVariables,
+    { keys: ["0", "4"] },
+  );
+
+  return (
+    <div className="space-y-2">
+      <span className="text-sm">Variables ({sortedVariables.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 variables found
+            </div>
+          )}
+          {result.map(([key, value, sensitive]) => (
+            <div className="text-nowrap font-mono" key={key}>
+              <span className="text-red-400">{key}:</span>
+              {sensitive && (
+                <span className="text-muted-foreground"> {value}</span>
+              )}
+              {!sensitive && <span className="text-green-300"> {value}</span>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/api/src/router/job.ts b/packages/api/src/router/job.ts
@@ -7,6 +7,7 @@ import type {
   Job,
   JobAgent,
   JobMetadata,
+  JobVariable,
   Release,
   ReleaseDependency,
   ReleaseJobTrigger,
@@ -37,6 +38,7 @@ import {
   job,
   jobAgent,
   jobMetadata,
+  jobVariable,
   release,
   releaseDependency,
   releaseJobTrigger,
@@ -84,6 +86,7 @@ const processReleaseJobTriggerWithAdditionalDataRows = (
     user?: User | null;
     release_dependency?: ReleaseDependency | null;
     deployment_name?: { deploymentName: string; deploymentId: string } | null;
+    job_variable?: JobVariable | null;
   }>,
 ) =>
   _.chain(rows)
@@ -95,6 +98,7 @@ const processReleaseJobTriggerWithAdditionalDataRows = (
         ...v[0]!.job,
         metadata: v.map((t) => t.job_metadata).filter(isPresent),
         status: v[0]!.job.status as JobStatus,
+        variables: v.map((t) => t.job_variable).filter(isPresent),
       },
       jobAgent: v[0]!.job_agent,
       target: v[0]!.target,
@@ -315,6 +319,7 @@ const releaseJobTriggerRouter = createTRPCRouter({
       const data = await releaseJobTriggerQuery(ctx.db)
         .leftJoin(user, eq(releaseJobTrigger.causedById, user.id))
         .leftJoin(jobMetadata, eq(jobMetadata.jobId, job.id))
+        .leftJoin(jobVariable, eq(jobVariable.jobId, job.id))
         .leftJoin(
           environmentPolicy,
           eq(environment.policyId, environmentPolicy.id),