TagsWithBadge

frontend/src/components/resources/deployment/index.tsx

@@ -20,6 +20,7 @@ import { DeploymentLogs } from "./logs";
 import { Link } from "react-router-dom";
 import { DataTable } from "@ui/data-table";
 import { ResourceComponents } from "..";
+import { TagsWithBadge } from "@components/tags";
 
 export const useDeployment = (id?: string) =>
   useRead("ListDeployments", {}, { refetchInterval: 5000 }).data?.find(
@@ -121,8 +122,6 @@ export const Deployment: RequiredResourceComponents = {
   },
   Table: () => {
     const deployments = useRead("ListDeployments", {}).data;
-    const all_tags = useRead("ListTags", {}).data;
-
     return (
       <DataTable
         data={deployments ?? []}
@@ -147,13 +146,7 @@ export const Deployment: RequiredResourceComponents = {
           //   header: "Description",
           //   accessorKey: "description",
           // },
-          {
-            header: "Tags",
-            accessorFn: ({ tags }) =>
-              tags
-                .map((t) => all_tags?.find((tg) => tg._id?.$oid === t)?.name)
-                .join(", "),
-          },
+
           {
             header: "Server",
             cell: ({ row }) => {
@@ -166,19 +159,19 @@ export const Deployment: RequiredResourceComponents = {
               );
             },
           },
-          {
-            header: "Build",
-            cell: ({ row }) => {
-              const id = row.original.info.build_id;
-              if (!id) return null;
-              return (
-                <Link to={`/builds/${id}`} className="flex items-center gap-2">
-                  <ResourceComponents.Build.Icon id={id} />
-                  <ResourceComponents.Build.Name id={id} />
-                </Link>
-              );
-            },
-          },
+          // {
+          //   header: "Build",
+          //   cell: ({ row }) => {
+          //     const id = row.original.info.build_id;
+          //     if (!id) return null;
+          //     return (
+          //       <Link to={`/builds/${id}`} className="flex items-center gap-2">
+          //         <ResourceComponents.Build.Icon id={id} />
+          //         <ResourceComponents.Build.Name id={id} />
+          //       </Link>
+          //     );
+          //   },
+          // },
           {
             accessorKey: "info.image",
             header: "Image",
@@ -193,6 +186,16 @@ export const Deployment: RequiredResourceComponents = {
               return <div className={color}>{status}</div>;
             },
           },
+          {
+            header: "Tags",
+            cell: ({ row }) => {
+              return (
+                <div className="flex gap-1">
+                  <TagsWithBadge resource_tags={row.original.tags} />
+                </div>
+              );
+            }
+          },
           {
             header: "Created",
             accessorFn: ({ created_at }) =>

frontend/src/components/tags/index.tsx

@@ -19,12 +19,22 @@ type TargetExcludingSystem = Exclude<Types.ResourceTarget, { type: "System" }>;
 export const ResourceTags = ({ target }: { target: TargetExcludingSystem }) => {
   const { type, id } = target;
   const resource = useRead(`List${type}s`, {}).data?.find((d) => d.id === id);
-  const tags = useRead("ListTags", {}).data;
 
+  return <TagsWithBadge resource_tags={resource?.tags} />;
+};
+
+export const TagsWithBadge = ({
+  resource_tags,
+}: {
+  resource_tags?: string[];
+}) => {
+  const all_tags = useRead("ListTags", {}).data;
   return (
     <>
-      {resource?.tags.map((id) => (
-        <Badge key={id}>{tags?.find((t) => t._id?.$oid === id)?.name}</Badge>
+      {resource_tags?.map((tag_id) => (
+        <Badge key={tag_id} variant="secondary" className="px-1.5 py-0.5">
+          {all_tags?.find((t) => t._id?.$oid === tag_id)?.name}
+        </Badge>
       ))}
     </>
   );