Phase 3: env masking, image updates, port conflicts, resources, templates (0.3.0)

Backend: - update_service: registry manifest digest check (Docker Hub/ghcr/lscr/private v2 token auth) vs local RepoDigests; in-memory cache + background loop - port_service: parse compose ports, check /proc/net/tcp[6] + docker bindings - template_service + bundled templates (jellyfin/vaultwarden/uptime-kuma/ paperless-ngx/gitea) with {{VAR}} placeholders; custom templates in DB - compose_edit set_resources (deploy.resources.limits/reservations) - routers: images, ports, templates, editor/set-resources - Template model; background update task wired into lifespan Frontend: - EnvEditor (table + raw, sensitive masking, quick-insert) - Images page + UpdateBadge + dashboard 'updates available' banner - PortConflictDialog pre-deploy check on Deploy - ResourcePanel (CPU/RAM sliders) as editor Limits tab - Templates page with per-variable instantiate form Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-07 16:49:38 +00:00
parent b553c1b861
commit 22d9864436
32 changed files with 1728 additions and 21 deletions
@@ -0,0 +1,91 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { RefreshCw, ArrowUpCircle, CheckCircle2, HelpCircle } from "lucide-react";
+import { Button, Card, Spinner } from "@/components/ui";
+import { imagesApi, type ImageRow } from "@/api/images";
+import { apiErrorMessage } from "@/api/client";
+import { formatBytes, relativeTime } from "@/lib/utils";
+import { useAuthStore } from "@/store/auth";
+import { useState } from "react";
+import { toast } from "sonner";
+
+function UpdateBadge({ row }: { row: ImageRow }) {
+  const u = row.update;
+  if (!u) return <span className="inline-flex items-center gap-1 text-xs text-slate-400"><HelpCircle className="h-3.5 w-3.5" /> not checked</span>;
+  if (u.error) return <span className="text-xs text-amber-500">⚠ {u.error}</span>;
+  if (u.update_available)
+    return (
+      <span className="inline-flex items-center gap-1 text-xs font-medium text-amber-600 dark:text-amber-400">
+        <ArrowUpCircle className="h-3.5 w-3.5" /> update available
+      </span>
+    );
+  return (
+    <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+      <CheckCircle2 className="h-3.5 w-3.5" /> up to date
+    </span>
+  );
+}
+
+export function Images() {
+  const isAdmin = useAuthStore((s) => s.user?.role === "admin");
+  const qc = useQueryClient();
+  const [checking, setChecking] = useState(false);
+  const { data, isLoading } = useQuery({ queryKey: ["images"], queryFn: imagesApi.list });
+
+  const check = async () => {
+    setChecking(true);
+    const t = toast.loading("Checking for updates…");
+    try {
+      await imagesApi.check();
+      await qc.invalidateQueries({ queryKey: ["images"] });
+      toast.success("Update check complete", { id: t });
+    } catch (e) {
+      toast.error(apiErrorMessage(e), { id: t });
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  if (isLoading) return <Spinner />;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-slate-500">{data?.length ?? 0} image tags</p>
+        {isAdmin && (
+          <Button onClick={check} loading={checking}>
+            <RefreshCw className="h-4 w-4" /> Check updates
+          </Button>
+        )}
+      </div>
+
+      <Card className="overflow-x-auto p-0">
+        <table className="w-full text-sm">
+          <thead className="border-b border-slate-200 text-left text-xs text-slate-500 dark:border-slate-700">
+            <tr>
+              <th className="p-3">Image</th>
+              <th className="p-3">Used by</th>
+              <th className="p-3">Size</th>
+              <th className="p-3">Created</th>
+              <th className="p-3">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data?.map((row) => (
+              <tr key={row.tag} className="border-b border-slate-100 dark:border-slate-700/50">
+                <td className="p-3 font-mono text-xs">{row.tag}</td>
+                <td className="p-3 text-xs text-slate-500">
+                  {row.stacks.length ? row.stacks.join(", ") : "—"}
+                </td>
+                <td className="p-3 text-xs">{formatBytes(row.size)}</td>
+                <td className="p-3 text-xs text-slate-500">
+                  {row.created ? relativeTime(row.created) : "—"}
+                </td>
+                <td className="p-3"><UpdateBadge row={row} /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
+    </div>
+  );
+}