update tags in deployment table

frontend/src/components/layouts.tsx

@@ -39,7 +39,7 @@ export const Layout = () => {
             <Link to={"/"} className="text-2xl tracking-widest">
               MONITOR
             </Link>
-            <div className="flex gap-4">
+            <div className="flex gap-2">
               <ResourceTypeDropdown />
               {type && <ResourcesDropdown />}
             </div>
@@ -171,7 +171,7 @@ export const ResourceCard = ({
         <CardContent className="text-sm text-muted-foreground">
           <Components.Info id={id} />
         </CardContent>
-        <CardFooter className="flex items-center justify-end gap-2">
+        <CardFooter className="flex items-center gap-2">
           <ResourceTags target={{ type, id }} />
         </CardFooter>
       </Card>

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

@@ -121,6 +121,8 @@ export const Deployment: RequiredResourceComponents = {
   },
   Table: () => {
     const deployments = useRead("ListDeployments", {}).data;
+    const all_tags = useRead("ListTags", {}).data;
+
     return (
       <DataTable
         data={deployments ?? []}
@@ -145,7 +147,13 @@ export const Deployment: RequiredResourceComponents = {
           //   header: "Description",
           //   accessorKey: "description",
           // },
-          { header: "Tags", accessorFn: ({ tags }) => tags.join(", ") },
+          {
+            header: "Tags",
+            accessorFn: ({ tags }) =>
+              tags
+                .map((t) => all_tags?.find((tg) => tg._id?.$oid === t)?.name)
+                .join(", "),
+          },
           {
             header: "Server",
             cell: ({ row }) => {