From 922596d452cabec959d96a9ef9a2948a650e5920 Mon Sep 17 00:00:00 2001
From: Zachary Blasczyk <zachary.blasczyk@wandb.com>
Date: Mon, 28 Oct 2024 21:11:28 -0500
Subject: [PATCH 1/4] add badges and fix loadiing

---
 .../_components/JobTableStatusIcon.tsx        |   7 +
 .../[versionId]/PolicyApprovalRow.tsx         |   2 +-
 .../[versionId]/TargetReleaseTable.tsx        | 276 +++++++++++-------
 3 files changed, 175 insertions(+), 110 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/JobTableStatusIcon.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/JobTableStatusIcon.tsx
index f75caf281..4436cfb08 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/JobTableStatusIcon.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/JobTableStatusIcon.tsx
@@ -3,6 +3,7 @@ import {
   IconCircleCheck,
   IconCircleX,
   IconClock,
+  IconExclamationCircle,
   IconLoader2,
 } from "@tabler/icons-react";
 
@@ -31,6 +32,12 @@ export const JobTableStatusIcon: React.FC<{
     return (
       <IconCircleX className={cn("h-4 w-4 text-neutral-400", className)} />
     );
+  if (status === JobStatus.ActionRequired)
+    return (
+      <IconExclamationCircle
+        className={cn("h-4 w-4 text-yellow-400", className)}
+      />
+    );
 
   return <IconClock className={cn("h-4 w-4 text-neutral-400", className)} />;
 };
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx
index 40634f6dd..0c57e361d 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx
@@ -73,7 +73,7 @@ export const PolicyApprovalRow: React.FC<PolicyApprovalRowProps> = ({
       {status === "pending" ? (
         <div className="flex items-center gap-2">
           <Button
-            variant="destructive"
+            variant="secondary"
             className="h-6 px-2"
             onClick={handleReject}
           >
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
index fcfd258d1..ee253216d 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import type { Environment } from "@ctrlplane/db/schema";
+import type { JobStatus } from "@ctrlplane/validators/jobs";
 import React, { Fragment, useState } from "react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import {
   IconChevronRight,
   IconDots,
@@ -14,7 +14,9 @@ import { capitalCase } from "change-case";
 import _ from "lodash";
 
 import { cn } from "@ctrlplane/ui";
+import { Badge } from "@ctrlplane/ui/badge";
 import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import { Skeleton } from "@ctrlplane/ui/skeleton";
 import { Table, TableBody, TableCell, TableRow } from "@ctrlplane/ui/table";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 
@@ -35,33 +37,50 @@ type CollapsibleTableRowProps = {
     version: string;
     name: string;
   };
+  releaseJobTriggerData: Array<{
+    id: string;
+    environmentId: string;
+    job: {
+      id: string;
+      status: JobStatus;
+      metadata: Array<{ key: string; value: string }>;
+      externalId: string | null;
+    };
+    target: {
+      id: string;
+      name: string;
+      lockedAt: Date | null;
+    };
+    type: string;
+  }>;
 };
 
 const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
   environment,
   deploymentName,
   release,
+  releaseJobTriggerData,
 }) => {
-  const { filter } = useJobFilter();
   const { setJobId } = useJobDrawer();
-  const pathname = usePathname();
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const releaseJobTriggerQuery = api.job.config.byReleaseId.useQuery(
-    { releaseId: release.id, filter },
-    { refetchInterval: 5_000, placeholderData: (prev) => prev },
-  );
-  const jobs = releaseJobTriggerQuery.data?.filter(
-    (job) => job.environmentId === environment.id,
-  );
   const approvalsQ = api.environment.policy.approval.byReleaseId.useQuery({
     releaseId: release.id,
   });
+
   const approvals = approvalsQ.data ?? [];
   const environmentApprovals = approvals.filter(
     (approval) => approval.policyId === environment.policyId,
   );
 
+  const jobs = releaseJobTriggerData.filter(
+    (job) => job.environmentId === environment.id,
+  );
+
+  const isOpen = jobs.length < 10 && approvals.length < 3;
+
+  if (jobs.length === 0) return;
+
   return (
     <Fragment>
       <TableRow
@@ -78,6 +97,27 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
                 )}
               />
               {environment.name}
+              <div className="flex items-center gap-1.5">
+                {Object.entries(
+                  jobs.reduce(
+                    (acc, { job }) => {
+                      acc[job.status] = (acc[job.status] || 0) + 1;
+                      return acc;
+                    },
+                    {} as Record<JobStatus, number>,
+                  ),
+                ).map(([status, count]) => (
+                  <Badge
+                    key={status}
+                    variant="outline"
+                    className="rounded-full px-1.5 py-0.5"
+                    title={capitalCase(status).replace("_", " ")}
+                  >
+                    <JobTableStatusIcon status={status as JobStatus} />
+                    <span className="pl-1">{count}</span>
+                  </Badge>
+                ))}
+              </div>
             </div>
             <div className="flex items-center gap-2">
               {environmentApprovals.map((approval) => (
@@ -91,98 +131,92 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
           </div>
         </TableCell>
       </TableRow>
-      {isExpanded && (
-        <>
-          {jobs?.map((job, idx) => {
-            const linksMetadata = job.job.metadata.find(
-              (m) => m.key === String(ReservedMetadataKey.Links),
-            )?.value;
-
-            const links =
-              linksMetadata != null
-                ? (JSON.parse(linksMetadata) as Record<string, string>)
-                : null;
-
-            return (
-              <TableRow
-                key={job.id}
-                className={cn(
-                  "cursor-pointer",
-                  idx !== jobs.length - 1 && "border-b-neutral-800/50",
-                )}
-                onClick={() => setJobId(job.job.id)}
-              >
-                <TableCell>
-                  <Link
-                    href={`${pathname}?target_id=${job.target.id}`}
-                    className="block w-full hover:text-blue-300"
-                  >
-                    {job.target.name}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center gap-1">
-                    <JobTableStatusIcon status={job.job.status} />
-                    {capitalCase(job.job.status)}
-                  </div>
-                </TableCell>
-                <TableCell>{job.type}</TableCell>
-                <TableCell>
-                  {job.job.externalId != null ? (
-                    <code className="font-mono text-xs">
-                      {job.job.externalId}
-                    </code>
-                  ) : (
-                    <span className="text-sm text-muted-foreground">
-                      No external ID
-                    </span>
+      {isExpanded ||
+        (isOpen && (
+          <>
+            {jobs.map((job, idx) => {
+              const linksMetadata = job.job.metadata.find(
+                (m) => m.key === String(ReservedMetadataKey.Links),
+              )?.value;
+
+              const links =
+                linksMetadata != null
+                  ? (JSON.parse(linksMetadata) as Record<string, string>)
+                  : null;
+
+              return (
+                <TableRow
+                  key={job.id}
+                  className={cn(
+                    "cursor-pointer",
+                    idx !== jobs.length - 1 && "border-b-neutral-800/50",
                   )}
-                </TableCell>
-                <TableCell>
-                  {links != null && (
+                  onClick={() => setJobId(job.job.id)}
+                >
+                  <TableCell>{job.target.name}</TableCell>
+                  <TableCell>
                     <div className="flex items-center gap-1">
-                      {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>
-                      ))}
+                      <JobTableStatusIcon status={job.job.status} />
+                      {capitalCase(job.job.status)}
                     </div>
-                  )}
-                </TableCell>
-                <TableCell onClick={(e) => e.stopPropagation()}>
-                  <div className="flex justify-end">
-                    <JobDropdownMenu
-                      release={release}
-                      deploymentName={deploymentName}
-                      target={job.target}
-                      environmentId={job.environmentId}
-                      job={{
-                        id: job.job.id,
-                        status: job.job.status,
-                      }}
-                    >
-                      <Button variant="ghost" size="icon">
-                        <IconDots size={16} />
-                      </Button>
-                    </JobDropdownMenu>
-                  </div>
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </>
-      )}
+                  </TableCell>
+                  <TableCell>{job.type}</TableCell>
+                  <TableCell>
+                    {job.job.externalId != null ? (
+                      <code className="font-mono text-xs">
+                        {job.job.externalId}
+                      </code>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">
+                        No external ID
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell onClick={(e) => e.stopPropagation()}>
+                    {links != null && (
+                      <div className="flex items-center gap-1">
+                        {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>
+                    )}
+                  </TableCell>
+                  <TableCell onClick={(e) => e.stopPropagation()}>
+                    <div className="flex justify-end">
+                      <JobDropdownMenu
+                        release={release}
+                        deploymentName={deploymentName}
+                        target={job.target}
+                        environmentId={job.environmentId}
+                        job={{
+                          id: job.job.id,
+                          status: job.job.status,
+                        }}
+                      >
+                        <Button variant="ghost" size="icon">
+                          <IconDots size={16} />
+                        </Button>
+                      </JobDropdownMenu>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </>
+        ))}
     </Fragment>
   );
 };
@@ -199,6 +233,14 @@ export const TargetReleaseTable: React.FC<TargetReleaseTableProps> = ({
   environments,
 }) => {
   const { filter, setFilter } = useJobFilter();
+  const releaseJobTriggerQuery = api.job.config.byReleaseId.useQuery(
+    { releaseId: release.id, filter },
+    {
+      refetchInterval: 5_000,
+      placeholderData: (prev) => prev,
+      initialData: [],
+    },
+  );
 
   return (
     <>
@@ -212,18 +254,34 @@ export const TargetReleaseTable: React.FC<TargetReleaseTableProps> = ({
           </div>
         </JobConditionDialog>
       </div>
-      <Table className="table-fixed">
-        <TableBody>
-          {environments.map((environment) => (
-            <CollapsibleTableRow
-              key={environment.id}
-              environment={environment}
-              deploymentName={deploymentName}
-              release={release}
+
+      {releaseJobTriggerQuery.data.length == 0 && (
+        <div className="space-y-2 p-4">
+          {_.range(30).map((i) => (
+            <Skeleton
+              key={i}
+              className="h-9 w-full"
+              style={{ opacity: 1 * (1 - i / 10) }}
             />
           ))}
-        </TableBody>
-      </Table>
+        </div>
+      )}
+
+      {releaseJobTriggerQuery.data.length > 0 && (
+        <Table className="table-fixed">
+          <TableBody>
+            {environments.map((environment) => (
+              <CollapsibleTableRow
+                key={environment.id}
+                environment={environment}
+                deploymentName={deploymentName}
+                release={release}
+                releaseJobTriggerData={releaseJobTriggerQuery.data}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </>
   );
 };

From c0c094951f2aa0bd40216c88c9164d22548d6e3e Mon Sep 17 00:00:00 2001
From: Zachary Blasczyk <zachary.blasczyk@wandb.com>
Date: Mon, 28 Oct 2024 21:20:28 -0500
Subject: [PATCH 2/4] fix

---
 .../releases/[versionId]/TargetReleaseTable.tsx           | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
index ee253216d..07826541d 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { Environment } from "@ctrlplane/db/schema";
+import type { Environment, Target } from "@ctrlplane/db/schema";
 import type { JobStatus } from "@ctrlplane/validators/jobs";
 import React, { Fragment, useState } from "react";
 import Link from "next/link";
@@ -46,11 +46,7 @@ type CollapsibleTableRowProps = {
       metadata: Array<{ key: string; value: string }>;
       externalId: string | null;
     };
-    target: {
-      id: string;
-      name: string;
-      lockedAt: Date | null;
-    };
+    target: Target;
     type: string;
   }>;
 };

From 6c17f0407866f3b0eb56f7696aea2aef16e91284 Mon Sep 17 00:00:00 2001
From: Zachary Blasczyk <zachary.blasczyk@wandb.com>
Date: Mon, 28 Oct 2024 22:26:16 -0500
Subject: [PATCH 3/4] fix logic

---
 .../[versionId]/TargetReleaseTable.tsx        | 177 +++++++++---------
 1 file changed, 89 insertions(+), 88 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
index 07826541d..056af54d9 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
@@ -31,6 +31,7 @@ import { PolicyApprovalRow } from "./PolicyApprovalRow";
 
 type CollapsibleTableRowProps = {
   environment: Environment;
+  environmentCount: number;
   deploymentName: string;
   release: {
     id: string;
@@ -53,12 +54,15 @@ type CollapsibleTableRowProps = {
 
 const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
   environment,
+  environmentCount,
   deploymentName,
   release,
   releaseJobTriggerData,
 }) => {
   const { setJobId } = useJobDrawer();
-  const [isExpanded, setIsExpanded] = useState(false);
+  const jobs = releaseJobTriggerData.filter(
+    (job) => job.environmentId === environment.id,
+  );
 
   const approvalsQ = api.environment.policy.approval.byReleaseId.useQuery({
     releaseId: release.id,
@@ -69,13 +73,10 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
     (approval) => approval.policyId === environment.policyId,
   );
 
-  const jobs = releaseJobTriggerData.filter(
-    (job) => job.environmentId === environment.id,
-  );
-
-  const isOpen = jobs.length < 10 && approvals.length < 3;
+  const isOpen = jobs.length < 10 && environmentCount < 3;
+  const [isExpanded, setIsExpanded] = useState(isOpen);
 
-  if (jobs.length === 0) return;
+  if (jobs.length === 0) return null;
 
   return (
     <Fragment>
@@ -127,92 +128,91 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
           </div>
         </TableCell>
       </TableRow>
-      {isExpanded ||
-        (isOpen && (
-          <>
-            {jobs.map((job, idx) => {
-              const linksMetadata = job.job.metadata.find(
-                (m) => m.key === String(ReservedMetadataKey.Links),
-              )?.value;
+      {isExpanded && (
+        <>
+          {jobs.map((job, idx) => {
+            const linksMetadata = job.job.metadata.find(
+              (m) => m.key === String(ReservedMetadataKey.Links),
+            )?.value;
 
-              const links =
-                linksMetadata != null
-                  ? (JSON.parse(linksMetadata) as Record<string, string>)
-                  : null;
+            const links =
+              linksMetadata != null
+                ? (JSON.parse(linksMetadata) as Record<string, string>)
+                : null;
 
-              return (
-                <TableRow
-                  key={job.id}
-                  className={cn(
-                    "cursor-pointer",
-                    idx !== jobs.length - 1 && "border-b-neutral-800/50",
+            return (
+              <TableRow
+                key={job.id}
+                className={cn(
+                  "cursor-pointer",
+                  idx !== jobs.length - 1 && "border-b-neutral-800/50",
+                )}
+                onClick={() => setJobId(job.job.id)}
+              >
+                <TableCell>{job.target.name}</TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-1">
+                    <JobTableStatusIcon status={job.job.status} />
+                    {capitalCase(job.job.status)}
+                  </div>
+                </TableCell>
+                <TableCell>{job.type}</TableCell>
+                <TableCell>
+                  {job.job.externalId != null ? (
+                    <code className="font-mono text-xs">
+                      {job.job.externalId}
+                    </code>
+                  ) : (
+                    <span className="text-sm text-muted-foreground">
+                      No external ID
+                    </span>
                   )}
-                  onClick={() => setJobId(job.job.id)}
-                >
-                  <TableCell>{job.target.name}</TableCell>
-                  <TableCell>
+                </TableCell>
+                <TableCell onClick={(e) => e.stopPropagation()}>
+                  {links != null && (
                     <div className="flex items-center gap-1">
-                      <JobTableStatusIcon status={job.job.status} />
-                      {capitalCase(job.job.status)}
+                      {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>
-                  </TableCell>
-                  <TableCell>{job.type}</TableCell>
-                  <TableCell>
-                    {job.job.externalId != null ? (
-                      <code className="font-mono text-xs">
-                        {job.job.externalId}
-                      </code>
-                    ) : (
-                      <span className="text-sm text-muted-foreground">
-                        No external ID
-                      </span>
-                    )}
-                  </TableCell>
-                  <TableCell onClick={(e) => e.stopPropagation()}>
-                    {links != null && (
-                      <div className="flex items-center gap-1">
-                        {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>
-                    )}
-                  </TableCell>
-                  <TableCell onClick={(e) => e.stopPropagation()}>
-                    <div className="flex justify-end">
-                      <JobDropdownMenu
-                        release={release}
-                        deploymentName={deploymentName}
-                        target={job.target}
-                        environmentId={job.environmentId}
-                        job={{
-                          id: job.job.id,
-                          status: job.job.status,
-                        }}
-                      >
-                        <Button variant="ghost" size="icon">
-                          <IconDots size={16} />
-                        </Button>
-                      </JobDropdownMenu>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </>
-        ))}
+                  )}
+                </TableCell>
+                <TableCell onClick={(e) => e.stopPropagation()}>
+                  <div className="flex justify-end">
+                    <JobDropdownMenu
+                      release={release}
+                      deploymentName={deploymentName}
+                      target={job.target}
+                      environmentId={job.environmentId}
+                      job={{
+                        id: job.job.id,
+                        status: job.job.status,
+                      }}
+                    >
+                      <Button variant="ghost" size="icon">
+                        <IconDots size={16} />
+                      </Button>
+                    </JobDropdownMenu>
+                  </div>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </>
+      )}
     </Fragment>
   );
 };
@@ -270,6 +270,7 @@ export const TargetReleaseTable: React.FC<TargetReleaseTableProps> = ({
               <CollapsibleTableRow
                 key={environment.id}
                 environment={environment}
+                environmentCount={environments.length}
                 deploymentName={deploymentName}
                 release={release}
                 releaseJobTriggerData={releaseJobTriggerQuery.data}

From 5e2e45d636c033b966392a5b31866f66c29124a0 Mon Sep 17 00:00:00 2001
From: Zachary Blasczyk <zachary.blasczyk@wandb.com>
Date: Mon, 28 Oct 2024 22:38:24 -0500
Subject: [PATCH 4/4] fix the job.target.name link

---
 .../[versionId]/TargetReleaseTable.tsx        | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
index 056af54d9..d1285faab 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
@@ -4,6 +4,7 @@ import type { Environment, Target } from "@ctrlplane/db/schema";
 import type { JobStatus } from "@ctrlplane/validators/jobs";
 import React, { Fragment, useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import {
   IconChevronRight,
   IconDots,
@@ -59,6 +60,7 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
   release,
   releaseJobTriggerData,
 }) => {
+  const pathname = usePathname();
   const { setJobId } = useJobDrawer();
   const jobs = releaseJobTriggerData.filter(
     (job) => job.environmentId === environment.id,
@@ -95,25 +97,19 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
               />
               {environment.name}
               <div className="flex items-center gap-1.5">
-                {Object.entries(
-                  jobs.reduce(
-                    (acc, { job }) => {
-                      acc[job.status] = (acc[job.status] || 0) + 1;
-                      return acc;
-                    },
-                    {} as Record<JobStatus, number>,
+                {Object.entries(_.groupBy(jobs, (job) => job.job.status)).map(
+                  ([status, groupedJobs]) => (
+                    <Badge
+                      key={status}
+                      variant="outline"
+                      className="rounded-full px-1.5 py-0.5"
+                      title={capitalCase(status).replace("_", " ")}
+                    >
+                      <JobTableStatusIcon status={status as JobStatus} />
+                      <span className="pl-1">{groupedJobs.length}</span>
+                    </Badge>
                   ),
-                ).map(([status, count]) => (
-                  <Badge
-                    key={status}
-                    variant="outline"
-                    className="rounded-full px-1.5 py-0.5"
-                    title={capitalCase(status).replace("_", " ")}
-                  >
-                    <JobTableStatusIcon status={status as JobStatus} />
-                    <span className="pl-1">{count}</span>
-                  </Badge>
-                ))}
+                )}
               </div>
             </div>
             <div className="flex items-center gap-2">
@@ -149,7 +145,14 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
                 )}
                 onClick={() => setJobId(job.job.id)}
               >
-                <TableCell>{job.target.name}</TableCell>
+                <TableCell onClick={(e) => e.stopPropagation()}>
+                  <Link
+                    href={`${pathname}?target_id=${job.target.id}`}
+                    className="block w-full hover:text-blue-300"
+                  >
+                    {job.target.name}
+                  </Link>
+                </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-1">
                     <JobTableStatusIcon status={job.job.status} />