feat(deployments): anlık durum ve log izleme özelliği ekle

- Socket.IO tabanlı gerçek zamanlı deployment log ve durum bildirimleri ekle - deployment:subscribe ve deployment:unsubscribe soket olaylarını destekle - DeploymentService'e anlık durum ve log yayınlama özelliği ekle - Deployment silinirken docker kaynaklarını temizle - Ortam değişkenlerini tek bir .env.example dosyasında birleştir - Docker compose yapılandırmasını güncelle (PWD ve DEPLOYMENTS_ROOT kullan) - Repo URL'sinden proje adını otomatik öner - Güvensiz bağlamlar için clipboard kopya fallback mekanizması ekle - Socket.IO path'ini /api/socket.io olarak ayarla
2026-01-19 15:11:45 +03:00
parent a87baa653a
commit e7a5690d98
14 changed files with 257 additions and 35 deletions
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1,3 +0,0 @@
-VITE_API_URL=http://localhost:4000/api
-# Prod için izin verilecek host(lar), virgülle ayırabilirsiniz. Örn:
-# ALLOWED_HOSTS=wisecolt-ci-frontend-ft2pzo-1c0eb3-188-245-185-248.traefik.me
--- a/frontend/src/pages/DeploymentDetailPage.tsx
+++ b/frontend/src/pages/DeploymentDetailPage.tsx
@@ -7,6 +7,8 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 import { JobStatusBadge } from "../components/JobStatusBadge";
 import { DeploymentProject, DeploymentRun, fetchDeployment, runDeployment } from "../api/deployments";
+import { useDeploymentStream } from "../providers/live-provider";
+import { useSocket } from "../providers/socket-provider";

 export function DeploymentDetailPage() {
  const { id } = useParams<{ id: string }>();
@@ -15,6 +17,8 @@ export function DeploymentDetailPage() {
  const [runs, setRuns] = useState<DeploymentRun[]>([]);
  const [loading, setLoading] = useState(true);
  const [triggering, setTriggering] = useState(false);
+  const stream = useDeploymentStream(id || "");
+  const socket = useSocket();

  useEffect(() => {
    if (!id) return;
@@ -27,12 +31,36 @@ export function DeploymentDetailPage() {
      .finally(() => setLoading(false));
  }, [id]);

+  useEffect(() => {
+    if (!socket || !id) return;
+    socket.emit("deployment:subscribe", { deploymentId: id });
+    const handleRunUpdate = ({ deploymentId, run }: { deploymentId: string; run: DeploymentRun }) => {
+      if (deploymentId !== id) return;
+      setRuns((prev) => {
+        const existingIndex = prev.findIndex((item) => item._id === run._id);
+        if (existingIndex >= 0) {
+          const next = [...prev];
+          next[existingIndex] = { ...next[existingIndex], ...run };
+          return next;
+        }
+        return [run, ...prev];
+      });
+    };
+    socket.on("deployment:run", handleRunUpdate);
+    return () => {
+      socket.emit("deployment:unsubscribe", { deploymentId: id });
+      socket.off("deployment:run", handleRunUpdate);
+    };
+  }, [socket, id]);
+
  const webhookUrl = useMemo(() => {
    if (!project) return "";
    return `${window.location.origin}/api/deployments/webhook/${project.webhookToken}`;
  }, [project]);

  const latestRun = runs[0];
+  const effectiveStatus = stream.status || project?.lastStatus || latestRun?.status || "idle";
+  const currentLogs = stream.logs.length > 0 ? stream.logs : latestRun?.logs || [];

  const decorateLogLine = (line: string) => {
    const lower = line.toLowerCase();
@@ -56,7 +84,20 @@ export function DeploymentDetailPage() {

  const handleCopy = async () => {
    try {
-      await navigator.clipboard.writeText(webhookUrl);
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(webhookUrl);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = webhookUrl;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        if (!ok) throw new Error("copy failed");
+      }
      toast.success("Webhook URL kopyalandı");
    } catch {
      toast.error("Webhook URL kopyalanamadı");
@@ -121,7 +162,7 @@ export function DeploymentDetailPage() {
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Genel Bilgiler</CardTitle>
-          <JobStatusBadge status={project.lastStatus} />
+          <JobStatusBadge status={effectiveStatus} />
        </CardHeader>
        <CardContent className="grid gap-4 text-sm text-muted-foreground">
          <div className="flex flex-wrap items-center gap-3">
@@ -204,8 +245,8 @@ export function DeploymentDetailPage() {
        </CardHeader>
        <CardContent>
          <div className="max-h-72 overflow-auto rounded-md border border-border bg-black px-3 py-2 font-mono text-xs text-green-100">
-            {latestRun?.logs?.length ? (
-              latestRun.logs.map((line, idx) => (
+            {currentLogs.length ? (
+              currentLogs.map((line, idx) => (
                <div key={idx} className="whitespace-pre-wrap">
                  {decorateLogLine(line)}
                </div>
--- a/frontend/src/pages/DeploymentsPage.tsx
+++ b/frontend/src/pages/DeploymentsPage.tsx
@@ -25,6 +25,7 @@ import {
  updateDeployment
 } from "../api/deployments";
 import { JobStatusBadge } from "../components/JobStatusBadge";
+import { useLiveData } from "../providers/live-provider";

 type FormState = {
  _id?: string;
@@ -46,6 +47,7 @@ const defaultForm: FormState = {
 export function DeploymentsPage() {
  const navigate = useNavigate();
  const location = useLocation();
+  const { deploymentStreams } = useLiveData();
  const apiBase = (import.meta.env.VITE_API_URL || "").replace(/\/$/, "");
  const [deployments, setDeployments] = useState<DeploymentProject[]>([]);
  const [loading, setLoading] = useState(false);
@@ -84,6 +86,14 @@ export function DeploymentsPage() {
      setComposeOptions([]);
      return;
    }
+    if (!form._id && !form.name) {
+      const normalized = repoUrl.replace(/\/+$/, "");
+      const lastPart = normalized.split("/").pop() || "";
+      const name = lastPart.replace(/\.git$/i, "");
+      if (name) {
+        setForm((prev) => ({ ...prev, name }));
+      }
+    }
    const timer = setTimeout(async () => {
      setBranchLoading(true);
      try {
@@ -292,7 +302,9 @@ export function DeploymentsPage() {
                      </div>
                    </div>
                    <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
-                      <JobStatusBadge status={deployment.lastStatus} />
+                      <JobStatusBadge
+                        status={deploymentStreams[deployment._id]?.status || deployment.lastStatus}
+                      />
                      <span className="rounded-md bg-muted px-2 py-1 text-xs font-semibold text-foreground/80">
                        {deployment.env.toUpperCase()}
                      </span>
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -23,7 +23,20 @@ export function SettingsPage() {

  const handleCopy = async (value: string, label: string) => {
    try {
-      await navigator.clipboard.writeText(value);
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(value);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = value;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        if (!ok) throw new Error("copy failed");
+      }
      toast.success(`${label} kopyalandı`);
    } catch {
      toast.error(`${label} kopyalanamadı`);
--- a/frontend/src/providers/live-provider.tsx
+++ b/frontend/src/providers/live-provider.tsx
@@ -12,6 +12,7 @@ type JobStream = {

 type LiveContextValue = {
  jobStreams: Record<string, JobStream>;
+  deploymentStreams: Record<string, JobStream>;
 };

 const LiveContext = createContext<LiveContextValue | undefined>(undefined);
@@ -19,6 +20,7 @@ const LiveContext = createContext<LiveContextValue | undefined>(undefined);
 export const LiveProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const socket = useSocket();
  const [jobStreams, setJobStreams] = useState<Record<string, JobStream>>({});
+  const [deploymentStreams, setDeploymentStreams] = useState<Record<string, JobStream>>({});

  useEffect(() => {
    if (!socket) return;
@@ -54,20 +56,59 @@ export const LiveProvider: React.FC<{ children: React.ReactNode }> = ({ children
      });
    };

+    const handleDeploymentLog = ({ deploymentId, line }: { deploymentId: string; line: string }) => {
+      if (!deploymentId) return;
+      setDeploymentStreams((prev) => {
+        const current = prev[deploymentId] || { logs: [] };
+        const nextLogs = [...current.logs, line].slice(-200);
+        return { ...prev, [deploymentId]: { ...current, logs: nextLogs } };
+      });
+    };
+
+    const handleDeploymentStatus = ({
+      deploymentId,
+      status,
+      lastRunAt,
+      lastMessage,
+      runCount,
+      lastDurationMs
+    }: {
+      deploymentId: string;
+      status?: string;
+      lastRunAt?: string;
+      lastMessage?: string;
+      runCount?: number;
+      lastDurationMs?: number;
+    }) => {
+      if (!deploymentId) return;
+      setDeploymentStreams((prev) => {
+        const current = prev[deploymentId] || { logs: [] };
+        return {
+          ...prev,
+          [deploymentId]: { ...current, status, lastRunAt, lastMessage, runCount, lastDurationMs }
+        };
+      });
+    };
+
    socket.on("job:log", handleJobLog);
    socket.on("job:status", handleJobStatus);
+    socket.on("deployment:log", handleDeploymentLog);
+    socket.on("deployment:status", handleDeploymentStatus);

    return () => {
      socket.off("job:log", handleJobLog);
      socket.off("job:status", handleJobStatus);
+      socket.off("deployment:log", handleDeploymentLog);
+      socket.off("deployment:status", handleDeploymentStatus);
    };
  }, [socket]);

  const value = useMemo(
    () => ({
-      jobStreams
+      jobStreams,
+      deploymentStreams
    }),
-    [jobStreams]
+    [jobStreams, deploymentStreams]
  );

  return <LiveContext.Provider value={value}>{children}</LiveContext.Provider>;
@@ -87,3 +128,12 @@ export function useJobStream(jobId: string) {
    [ctx.jobStreams, jobId]
  );
 }
+
+export function useDeploymentStream(deploymentId: string) {
+  const ctx = useContext(LiveContext);
+  if (!ctx) throw new Error("useDeploymentStream LiveProvider içinde kullanılmalı");
+  return useMemo(
+    () => ctx.deploymentStreams[deploymentId] || { logs: [], status: "idle", runCount: 0 },
+    [ctx.deploymentStreams, deploymentId]
+  );
+}
--- a/frontend/src/providers/socket-provider.tsx
+++ b/frontend/src/providers/socket-provider.tsx
@@ -10,7 +10,7 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ childr
  const socketRef = useRef<Socket | null>(null);
  const [ready, setReady] = useState(false);

-  const baseUrl = useMemo(() => apiClient.defaults.baseURL || window.location.origin, []);
+  const baseUrl = useMemo(() => window.location.origin, []);

  useEffect(() => {
    if (!token) {
@@ -22,6 +22,7 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ childr

    const socket = io(baseUrl, {
      auth: { token },
+      path: "/api/socket.io",
      transports: ["websocket", "polling"]
    });