tags ui

frontend/src/components/layouts.tsx

@@ -27,7 +27,7 @@ import {
 } from "@ui/card";
 import { Logout, ResourceTypeDropdown, ResourcesDropdown } from "./util";
 import { HeaderUpdates } from "./updates/header";
-import { ManageTags, ResourceTags } from "./tags";
+import { ResourceTags } from "./tags";
 
 export const Layout = () => {
   const type = useResourceParamType();
@@ -173,7 +173,6 @@ export const ResourceCard = ({
         </CardContent>
         <CardFooter className="flex items-center justify-end gap-2">
           <ResourceTags target={{ type, id }} />
-          <ManageTags target={{ type, id }} />
         </CardFooter>
       </Card>
     </Link>

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

@@ -123,6 +123,14 @@ const NewServer = () => {
   );
 };
 
+const DeploymentCountOnServer = ({ id }: { id: string }) => {
+  const { data } = useRead("ListDeployments", {
+    query: { specific: { server_ids: [id] } },
+  });
+
+  return <>{data?.length ?? 0}</>;
+};
+
 export const ServerComponents: RequiredResourceComponents = {
   Name: ({ id }: { id: string }) => <>{useServer(id)?.name}</>,
   Description: ({ id }) => <>{useServer(id)?.info.status}</>,
@@ -136,6 +144,8 @@ export const ServerComponents: RequiredResourceComponents = {
   New: () => <NewServer />,
   Table: () => {
     const servers = useRead("ListServers", {}).data;
+    const all_tags = useRead("ListTags", {}).data;
+
     // const nav = useNavigate();
     return (
       <DataTable
@@ -162,23 +172,16 @@ export const ServerComponents: 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: "Deployments",
-            cell: ({
-              row: {
-                original: { id },
-              },
-            }) => {
-              const count = useRead("ListDeployments", {
-                query: { specific: { server_ids: [id] } },
-              }).data?.length;
-              if (count) {
-                return <>{count}</>;
-              } else {
-                return <>0</>;
-              }
-            },
+            cell: ({ row }) => <DeploymentCountOnServer id={row.original.id} />,
           },
           { header: "Region", accessorKey: "info.region" },
           {

frontend/src/main.tsx

@@ -18,14 +18,14 @@ const query_client = new QueryClient({
 });
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={query_client}>
-      <WebsocketProvider url={UPDATE_WS_URL}>
-        <ThemeProvider>
-          <Router />
-          <Toaster />
-        </ThemeProvider>
-      </WebsocketProvider>
-    </QueryClientProvider>
-  </React.StrictMode>
+  // <React.StrictMode>
+  <QueryClientProvider client={query_client}>
+    <WebsocketProvider url={UPDATE_WS_URL}>
+      <ThemeProvider>
+        <Router />
+        <Toaster />
+      </ThemeProvider>
+    </WebsocketProvider>
+  </QueryClientProvider>
+  // </React.StrictMode>
 );

frontend/src/pages/resource.tsx

@@ -27,7 +27,7 @@ export const Resource = () => {
           <div className="flex gap-8">
             <Components.Info id={id} />
           </div>
-          <div className="flex gap-8">
+          <div className="flex gap-2">
             <ResourceTags target={{ id, type }} />
             <ManageTags target={{ id, type }} />
           </div>

frontend/src/ui/badge.tsx

@@ -1,10 +1,10 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@lib/utils"
+import { cn } from "@lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-sm border px-3 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -21,7 +21,7 @@ const badgeVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

frontend/src/ui/command.tsx

@@ -70,10 +70,13 @@ CommandList.displayName = CommandPrimitive.List.displayName;
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
+>(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
     {...props}
   />
 ));