diff --git a/dash/src/components/applications/app-info.tsx b/dash/src/components/applications/app-info.tsx index 9063705..f54f717 100644 --- a/dash/src/components/applications/app-info.tsx +++ b/dash/src/components/applications/app-info.tsx @@ -265,6 +265,73 @@ export const AppInfo = ({ app, latestCommit }: Props) => { )} + ) : app.appType === 'compose' ? ( + <> + + + {/* Git Repository */} + + {app.gitRepository ? ( + + {app.gitRepository} + + + ) : ( +

Not connected

+ )} + + + {/* Branch */} + + + {app.gitBranch || "Not specified"} + + + + {/* Latest Commit */} + {latestCommit && ( + <> + + +
+ +
+
+ + {latestCommit.sha.slice(0, 7)} + + + {latestCommit.author && ( + + by {latestCommit.author} + + )} + {latestCommit.timestamp && ( + + + {new Date(latestCommit.timestamp).toLocaleString()} + + )} +
+ {latestCommit.message && ( +

{latestCommit.message}

+ )} +
+ +
+ + )} + ) : ( <> {/* Git Configuration Section */} diff --git a/dash/src/components/applications/compose-app-settings.tsx b/dash/src/components/applications/compose-app-settings.tsx new file mode 100644 index 0000000..6f8ae3e --- /dev/null +++ b/dash/src/components/applications/compose-app-settings.tsx @@ -0,0 +1,81 @@ +import { useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Label } from "@/components/ui/label"; +import { toast } from "sonner"; +import { applicationsService } from "@/services"; +import type { App } from "@/types"; + +interface ComposeAppSettingsProps { + app: App; + onUpdate: () => void; +} + +export const ComposeAppSettings = ({ app, onUpdate }: ComposeAppSettingsProps) => { + const [rootDirectory, setRootDirectory] = useState(app.rootDirectory || ""); + const [saving, setSaving] = useState(false); + + const handleSave = async () => { + try { + setSaving(true); + + await applicationsService.update(app.id, { + rootDirectory, + }); + + toast.success("Settings updated successfully"); + onUpdate(); + } catch (error) { + toast.error(error instanceof Error ? error.message : "Failed to update settings"); + } finally { + setSaving(false); + } + }; + + return ( + + +
+ Application Settings + + Configure your compose application settings. + +
+
+ +
+ + +
+ + setRootDirectory(e.target.value)} + /> +

+ The directory containing your docker-compose.yml file +

+
+ +
+

Read-only Configuration

+
+
+ Repository + {app.gitRepository || "Not connected"} +
+
+ Branch + {app.gitBranch} +
+
+
+ + + ); +}; diff --git a/dash/src/components/applications/compose-status.tsx b/dash/src/components/applications/compose-status.tsx new file mode 100644 index 0000000..a838057 --- /dev/null +++ b/dash/src/components/applications/compose-status.tsx @@ -0,0 +1,229 @@ +import { useState, useEffect } from "react" +import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { applicationsService } from "@/services" +import { toast } from "sonner" +import { + Activity, + RefreshCw, + Server, + Loader2, + Power, + Square, + RotateCw, + Box, +} from "lucide-react" + +interface ComposeService { + name: string + status: string + state: string +} + +interface ComposeStatusData { + name: string + status: string + state: string + uptime: string + services: ComposeService[] + error?: string +} + +interface ComposeStatusProps { + appId: number + onStatusChange?: () => void +} + +export const ComposeStatus = ({ appId, onStatusChange }: ComposeStatusProps) => { + const [status, setStatus] = useState(null) + const [loading, setLoading] = useState(false) + const [actionLoading, setActionLoading] = useState(null) + const [lastUpdated, setLastUpdated] = useState(new Date()) + + const fetchStatus = async () => { + try { + setLoading(true) + // We rely on the same endpoint, but it returns different structure for compose + const data = await applicationsService.getContainerStatus(appId) as ComposeStatusData + setStatus(data) + setLastUpdated(new Date()) + } catch (error) { + console.error("Failed to fetch compose status:", error) + } finally { + setLoading(false) + } + } + + useEffect(() => { + fetchStatus() + const interval = setInterval(fetchStatus, 15000) + return () => clearInterval(interval) + }, [appId]) + + const handleStart = async () => { + try { + setActionLoading("start") + await applicationsService.startContainer(appId) + toast.success("Stack start triggered successfully") + await fetchStatus() + onStatusChange?.() + } catch (error) { + toast.error(error instanceof Error ? error.message : "Failed to start stack") + } finally { + setActionLoading(null) + } + } + + const handleStop = async () => { + try { + setActionLoading("stop") + await applicationsService.stopContainer(appId) + toast.success("Stack stop triggered successfully") + await fetchStatus() + onStatusChange?.() + } catch (error) { + toast.error(error instanceof Error ? error.message : "Failed to stop stack") + } finally { + setActionLoading(null) + } + } + + const handleRestart = async () => { + try { + setActionLoading("restart") + await applicationsService.restartContainer(appId) + toast.success("Stack restart triggered successfully") + await fetchStatus() + onStatusChange?.() + } catch (error) { + toast.error(error instanceof Error ? error.message : "Failed to restart stack") + } finally { + setActionLoading(null) + } + } + + const getOverallStateBadge = () => { + if (!status) return null + if (status.error) return Error + + switch (status.state) { + case "running": + return Running + case "stopped": + return Stopped + case "partial": + return Partial + default: + return {status.state} + } + } + + return ( + + +
+ + + Stack Status + + +
+ + + + {!status && loading && ( +
+ + Checking status... +
+ )} + + {status && ( +
+ {/* Controls */} +
+ + + +
+ + {/* Overall Status */} +
+
+ + Overall Status +
+
+ {getOverallStateBadge()} + ({status.status}) +
+
+ + {/* Services List */} + {status.services && status.services.length > 0 && ( +
+

+ Services +

+
+ {status.services.map((svc, idx) => ( +
+ {svc.name} + + {svc.state} + +
+ ))} +
+
+ )} + + {status.error && ( +
+ Error: {status.error} +
+ )} + +
+ Last updated: {lastUpdated.toLocaleTimeString()} +
+
+ )} + + + ) +} diff --git a/dash/src/features/applications/AppPage.tsx b/dash/src/features/applications/AppPage.tsx index 3e53a9c..1b89ce0 100644 --- a/dash/src/features/applications/AppPage.tsx +++ b/dash/src/features/applications/AppPage.tsx @@ -7,6 +7,7 @@ import { useApplication } from "@/hooks"; import { TabsList, Tabs, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { AppInfo, GitProviderTab, EnvironmentVariables, Domains, AppSettings, LiveLogsViewer, AppStats, Volumes, ContainerStats } from "@/components/applications"; import { DeploymentsTab } from "@/components/deployments"; +import { ComposeAppPage } from "./ComposeAppPage"; export const AppPage = () => { @@ -67,6 +68,10 @@ export const AppPage = () => { if (!app) return null; + if (app.appType === 'compose') { + return ; + } + return (
{/* Header */} @@ -91,14 +96,14 @@ export const AppPage = () => {
- Info - {app.appType !== 'database' && Git} - Environment - {app.appType === 'web' && Domains} - Deployments - Stats - Logs - Settings + Info + {app.appType !== 'database' && Git} + Environment + {app.appType === 'web' && Domains} + Deployments + Stats + Logs + Settings
diff --git a/dash/src/features/applications/ComposeAppPage.tsx b/dash/src/features/applications/ComposeAppPage.tsx new file mode 100644 index 0000000..17c2cf8 --- /dev/null +++ b/dash/src/features/applications/ComposeAppPage.tsx @@ -0,0 +1,158 @@ +import { FormModal } from "@/components/common/form-modal"; +import { FullScreenLoading } from "@/components/common"; +import { Button } from "@/components/ui/button"; +import { useMemo, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { useApplication } from "@/hooks"; +import { TabsList, Tabs, TabsTrigger, TabsContent } from "@/components/ui/tabs"; +import { AppInfo, GitProviderTab, EnvironmentVariables, LiveLogsViewer, Volumes } from "@/components/applications"; +import { ComposeStatus } from "@/components/applications/compose-status"; +import { ComposeAppSettings } from "@/components/applications/compose-app-settings"; +import { DeploymentsTab } from "@/components/deployments"; + + +export const ComposeAppPage = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [activeTab, setActiveTab] = useState("info"); + + const params = useParams(); + const navigate = useNavigate(); + + const appId = useMemo(() => Number(params.appId), [params.appId]); + const projectId = useMemo(() => Number(params.projectId), [params.projectId]) + + const { + app, + loading, + error, + latestCommit, + updateApp, + deleteApp, + refreshApp, + } = useApplication({ + appId, + autoFetch: true, + projectId + }); + + const deleteAppHandler = async () => { + const success = await deleteApp(); + if (success) { + navigate(-1); + } + }; + + const handleUpdateApp = async (appData: { + name: string; + description: string; + }) => { + const result = await updateApp(appData); + if (result) { + setIsModalOpen(false); + } + }; + + if (loading) return ; + + if (error) + return ( +
+
+ {error} +
+
+ ); + + if (!app) return null; + + return ( +
+ {/* Header */} +
+
+
+

{app.name}

+ Compose +
+

{app.description}

+
+ +
+ + +
+
+ + {/* App Info */} +
+ +
+ + Info + Git + Environment + Deployments + Logs + Settings + +
+ + {/* ✅ INFO TAB */} + +
+
+ +
+
+ +
+
+ + + + + + + {/* ✅ ENVIRONMENT TAB */} + + + + + {/* ✅ DEPLOYMENTS TAB */} + + + + + {/* Stats tab removed as requested ("keep the stats if its possible to get the compose stats" -> we put compose stats in info/status card for now as overall stats. Detailed container stats are hard for multiple containers yet. User said 'keep only the necessary things') */} + {/* Actually user said "keep the stats if its possible to get the compose stats". But our backend currently doesn't provide resource stats for compose. */} + {/* I will hide the stats tab for now. */} + + + + + + + + + + +
+ + {/* Edit Modal */} + setIsModalOpen(false)} + title="Edit App" + fields={[ + { label: "App Name", name: "name", type: "text", defaultValue: app.name }, + { label: "Description", name: "description", type: "textarea", defaultValue: app.description || "" }, + ]} + onSubmit={(data) => handleUpdateApp(data as { name: string; description: string })} + /> +
+ ); +}; diff --git a/dash/src/features/projects/components/AppTypeSelection.tsx b/dash/src/features/projects/components/AppTypeSelection.tsx index 6a75f52..3cedd32 100644 --- a/dash/src/features/projects/components/AppTypeSelection.tsx +++ b/dash/src/features/projects/components/AppTypeSelection.tsx @@ -1,4 +1,4 @@ -import { Globe, Cog, Database } from "lucide-react"; +import { Globe, Cog, Database, Container } from "lucide-react"; import { Card } from "@/components/ui/card"; import type { AppType } from "@/types/app"; @@ -29,6 +29,13 @@ export function AppTypeSelection({ onSelect }: AppTypeSelectionProps) { description: "Pre-configured databases and services deployed from official Docker images", examples: "PostgreSQL, Redis, MySQL, MongoDB, RabbitMQ", }, + { + type: "compose" as AppType, + icon: Container, + title: "Docker Compose", + description: "Deploy complex multi-container applications using docker-compose", + examples: "Full stack apps, microservices", + }, ]; return ( diff --git a/dash/src/features/projects/components/ComposeAppForm.tsx b/dash/src/features/projects/components/ComposeAppForm.tsx new file mode 100644 index 0000000..7c38db8 --- /dev/null +++ b/dash/src/features/projects/components/ComposeAppForm.tsx @@ -0,0 +1,75 @@ +import { useState } from "react"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import type { CreateAppRequest } from "@/types/app"; + +interface ComposeAppFormProps { + projectId: number; + onSubmit: (data: CreateAppRequest) => void; + onBack: () => void; +} + +export function ComposeAppForm({ projectId, onSubmit, onBack }: ComposeAppFormProps) { + const [formData, setFormData] = useState({ + name: "", + description: "", + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + onSubmit({ + projectId, + appType: "compose", + name: formData.name, + description: formData.description || undefined, + }); + }; + + return ( +
+
+

Create Compose Application

+

+ Deploy complex multi-container applications using docker-compose +

+
+ +
+
+ + setFormData({ ...formData, name: e.target.value })} + placeholder="my-compose-app" + required + className="mt-1" + /> +

+ Lowercase letters, numbers, and hyphens only +

+
+ +
+ +