update available deployment table

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

@@ -1,7 +1,7 @@
 import { useLocalStorage, useRead } from "@lib/hooks";
 import { Types } from "komodo_client";
 import { RequiredResourceComponents } from "@types";
-import { HardDrive, Rocket, Server } from "lucide-react";
+import { CircleArrowUp, HardDrive, Rocket, Server } from "lucide-react";
 import { cn } from "@lib/utils";
 import { useServer } from "../server";
 import {
@@ -200,34 +200,7 @@ export const DeploymentComponents: RequiredResourceComponents = {
   },
 
   Status: {
-    UpdateAvailable: ({ id }) => {
-      const info = useDeployment(id)?.info;
-      const state = info?.state ?? Types.DeploymentState.Unknown;
-      if (
-        !info ||
-        !info?.update_available ||
-        [
-          Types.DeploymentState.NotDeployed,
-          Types.DeploymentState.Unknown,
-        ].includes(state)
-      ) {
-        return null;
-      }
-      return (
-        <HoverCard openDelay={200}>
-          <HoverCardTrigger asChild>
-            <Card className="px-3 py-2 border-blue-400 hover:border-blue-500 transition-colors cursor-pointer">
-              <div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
-                Update Available
-              </div>
-            </Card>
-          </HoverCardTrigger>
-          <HoverCardContent align="start" className="w-fit text-sm">
-            There is a newer image available
-          </HoverCardContent>
-        </HoverCard>
-      );
-    },
+    UpdateAvailable: ({ id }) => <UpdateAvailable id={id} />,
   },
 
   Info: {
@@ -327,3 +300,45 @@ export const DeploymentComponents: RequiredResourceComponents = {
     );
   },
 };
+
+export const UpdateAvailable = ({
+  id,
+  small,
+}: {
+  id: string;
+  small?: boolean;
+}) => {
+  const info = useDeployment(id)?.info;
+  const state = info?.state ?? Types.DeploymentState.Unknown;
+  if (
+    !info ||
+    !info?.update_available ||
+    [Types.DeploymentState.NotDeployed, Types.DeploymentState.Unknown].includes(
+      state
+    )
+  ) {
+    return null;
+  }
+  return (
+    <HoverCard openDelay={200}>
+      <HoverCardTrigger asChild>
+        <Card
+          className={cn(
+            "border-blue-400 hover:border-blue-500 transition-colors cursor-pointer flex items-center gap-2",
+            small ? "px-2 py-1" : "px-3 py-2"
+          )}
+        >
+          <CircleArrowUp className="w-4 h-4" />
+          {!small && (
+            <div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
+              Update Available
+            </div>
+          )}
+        </Card>
+      </HoverCardTrigger>
+      <HoverCardContent align="start" className="w-fit text-sm">
+        There is a newer image available
+      </HoverCardContent>
+    </HoverCard>
+  );
+};

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

@@ -3,7 +3,7 @@ import { Types } from "komodo_client";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { useRead, useSelectedResources } from "@lib/hooks";
 import { ResourceLink } from "../common";
-import { DeploymentComponents } from ".";
+import { DeploymentComponents, UpdateAvailable } from ".";
 import { HardDrive } from "lucide-react";
 import { useCallback } from "react";
 
@@ -35,7 +35,10 @@ export const DeploymentTable = ({
             <SortableHeader column={column} title="Name" />
           ),
           cell: ({ row }) => (
-            <ResourceLink type="Deployment" id={row.original.id} />
+            <div className="flex items-center justify-between gap-2">
+              <ResourceLink type="Deployment" id={row.original.id} />
+              <UpdateAvailable id={row.original.id} small />
+            </div>
           ),
           size: 200,
         },

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

@@ -468,15 +468,23 @@ export const UpdateAvailable = ({
   return (
     <HoverCard openDelay={200}>
       <HoverCardTrigger asChild>
-        <Card className="px-3 py-2 border-blue-400 hover:border-blue-500 transition-colors cursor-pointer flex items-center gap-2">
+        <Card
+          className={cn(
+            "border-blue-400 hover:border-blue-500 transition-colors cursor-pointer flex items-center gap-2",
+            small ? "px-2 py-1" : "px-3 py-2"
+          )}
+        >
           <CircleArrowUp className="w-4 h-4" />
-          <div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
-            Update
-            {(info?.services.filter((s) => s.update_available).length ?? 0) > 1
-              ? "s"
-              : ""}{" "}
-            {!small && "Available"}
-          </div>
+          {!small && (
+            <div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
+              Update
+              {(info?.services.filter((s) => s.update_available).length ?? 0) >
+              1
+                ? "s"
+                : ""}{" "}
+              Available
+            </div>
+          )}
         </Card>
       </HoverCardTrigger>
       <HoverCardContent align="start" className="flex flex-col gap-2 w-fit">