SirBlob/Clickploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

API and Database Deployment Update

Browse Source
This commit is contained in:
default
2026-02-04 06:53:46 +00:00
parent 1d0ccca7d1
commit e902e5f320
27 changed files with 2156 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
backend/cmd/server/main.go
View File

@@ -1,32 +1,25 @@
package main
import (
"log"
"time"
"github.com/gin-contrib/cors"
"github.com/gin-gonic/gin"
"clickploy/internal/api"
"clickploy/internal/builder"
"clickploy/internal/db"
"clickploy/internal/deployer"
"clickploy/internal/ports"
)
func main() {
db.Init(".")
pm := ports.NewManager(4000, 5000)
pm := ports.NewManager(2000, 60000)
buildr := builder.NewBuilder()
dply, err := deployer.NewDeployer()
if err != nil {
log.Fatalf("Failed to create deployer: %v", err)
}
handler := api.NewHandler(buildr, dply, pm)
r := gin.Default()
r.Use(cors.New(cors.Config{
AllowOrigins: []string{"*"},
AllowMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
@@ -35,7 +28,6 @@ func main() {
AllowCredentials: true,
MaxAge: 12 * time.Hour,
}))
handler.RegisterRoutes(r)
handler.RegisterAuthRoutes(r)
handler.RegisterUserRoutes(r)
@@ -44,7 +36,6 @@ func main() {
handler.RegisterSystemRoutes(r)
handler.RegisterStorageRoutes(r)
handler.RegisterAdminRoutes(r)
log.Println("Starting Clickploy Backend on :8080")
if err := r.Run(":8080"); err != nil {
log.Fatalf("Server failed: %v", err)

9
backend/internal/api/admin.go
View File

@@ -1,14 +1,10 @@
package api
import (
"net/http"
"clickploy/internal/db"
"clickploy/internal/models"
"github.com/gin-gonic/gin"
)
func (h *Handler) RegisterAdminRoutes(r *gin.Engine) {
admin := r.Group("/api/admin", AuthMiddleware(), AdminMiddleware())
{
@@ -17,7 +13,6 @@ func (h *Handler) RegisterAdminRoutes(r *gin.Engine) {
admin.GET("/stats", h.adminGetStats)
}
}
func (h *Handler) adminListUsers(c *gin.Context) {
var users []models.User
if err := db.DB.Preload("Projects").Find(&users).Error; err != nil {
@@ -26,7 +21,6 @@ func (h *Handler) adminListUsers(c *gin.Context) {
}
c.JSON(http.StatusOK, users)
}
func (h *Handler) adminDeleteUser(c *gin.Context) {
id := c.Param("id")
if err := db.DB.Where("id = ?", id).Delete(&models.User{}).Error; err != nil {
@@ -35,16 +29,13 @@ func (h *Handler) adminDeleteUser(c *gin.Context) {
}
c.JSON(http.StatusOK, gin.H{"status": "deleted"})
}
func (h *Handler) adminGetStats(c *gin.Context) {
var userCount int64
var projectCount int64
var deploymentCount int64
db.DB.Model(&models.User{}).Count(&userCount)
db.DB.Model(&models.Project{}).Count(&projectCount)
db.DB.Model(&models.Deployment{}).Count(&deploymentCount)
c.JSON(http.StatusOK, gin.H{
"users": userCount,
"projects": projectCount,

53
backend/internal/api/api.go
View File

@@ -1,15 +1,16 @@
package api
import (
"clickploy/internal/builder"
"clickploy/internal/deployer"
"clickploy/internal/ports"
"fmt"
"io"
"net"
"net/http"
"os"
"github.com/gin-gonic/gin"
"clickploy/internal/builder"
"clickploy/internal/deployer"
"clickploy/internal/ports"
)
type Handler struct {
@@ -32,7 +33,6 @@ type DeployRequest struct {
Port int `json:"port"`
GitToken string `json:"git_token"`
}
type DeployResponse struct {
Status string `json:"status"`
AppName string `json:"app_name"`
@@ -45,32 +45,27 @@ func (h *Handler) RegisterRoutes(r *gin.Engine) {
r.POST("/deploy", h.handleDeploy)
h.RegisterStreamRoutes(r)
}
func (h *Handler) handleDeploy(c *gin.Context) {
var req DeployRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
imageName, _, err := h.builder.Build(req.Repo, req.Name, req.GitToken, "", "", "", "", nil, os.Stdout)
imageName, _, err := h.builder.Build(req.Repo, "", req.Name, req.GitToken, "", "", "", "", nil, os.Stdout)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Build failed: %v", err)})
return
}
port, err := h.ports.GetPort(req.Name, req.Port)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Port allocation failed: %v", err)})
return
}
_, err = h.deployer.RunContainer(c.Request.Context(), imageName, req.Name, port, nil)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Deployment failed: %v", err)})
return
}
c.JSON(http.StatusOK, DeployResponse{
Status: "success",
AppName: req.Name,
@@ -79,14 +74,42 @@ func (h *Handler) handleDeploy(c *gin.Context) {
Message: "Container started successfully",
})
}
func (h *Handler) RegisterSystemRoutes(r *gin.Engine) {
r.GET("/api/system/status", h.handleSystemStatus)
}
func (h *Handler) handleSystemStatus(c *gin.Context) {
localIP := GetLocalIP()
publicIP := GetPublicIP()
c.JSON(http.StatusOK, gin.H{
"version": "v0.1.0",
"status": "All systems normal",
"version": "v0.1.0",
"status": "All systems normal",
"local_ip": localIP,
"public_ip": publicIP,
})
}
func GetLocalIP() string {
addrs, err := net.InterfaceAddrs()
if err != nil {
return "Unknown"
}
for _, address := range addrs {
if ipnet, ok := address.(*net.IPNet); ok && !ipnet.IP.IsLoopback() {
if ipnet.IP.To4() != nil {
return ipnet.IP.String()
}
}
}
return "Unknown"
}
func GetPublicIP() string {
resp, err := http.Get("https://api.ipify.org?format=text")
if err != nil {
return "Unknown"
}
defer resp.Body.Close()
ip, err := io.ReadAll(resp.Body)
if err != nil {
return "Unknown"
}
return string(ip)
}

55
backend/internal/api/auth.go
View File

@@ -1,11 +1,12 @@
package api
import (
"net/http"
"clickploy/internal/auth"
"clickploy/internal/db"
"clickploy/internal/models"
"crypto/rand"
"encoding/hex"
"net/http"
"github.com/gin-gonic/gin"
gonanoid "github.com/matoous/go-nanoid/v2"
@@ -16,7 +17,6 @@ type AuthRequest struct {
Password string `json:"password" binding:"required,min=6"`
Name string `json:"name"`
}
type AuthResponse struct {
Token string `json:"token"`
User models.User `json:"user"`
@@ -29,126 +29,131 @@ func (h *Handler) RegisterAuthRoutes(r *gin.Engine) {
authGroup.POST("/login", h.login)
}
}
func (h *Handler) register(c *gin.Context) {
var req AuthRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
hashed, err := auth.HashPassword(req.Password)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to hash password"})
return
}
var count int64
db.DB.Model(&models.User{}).Count(&count)
apiKeyBytes := make([]byte, 32)
rand.Read(apiKeyBytes)
apiKey := "cp_" + hex.EncodeToString(apiKeyBytes)
userID, _ := gonanoid.Generate("abcdefghijklmnopqrstuvwxyz0123456789", 10)
user := models.User{
ID: userID,
Email: req.Email,
Password: hashed,
Name: req.Name,
Avatar: "https://github.com/shadcn.png",
Avatar: "https://ui-avatars.com/api/?name=" + req.Name,
IsAdmin: count == 0,
APIKey: apiKey,
}
if result := db.DB.Create(&user); result.Error != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": "Email already exists"})
return
}
token, _ := auth.GenerateToken(user.ID, user.Email)
c.JSON(http.StatusCreated, AuthResponse{Token: token, User: user})
}
func (h *Handler) login(c *gin.Context) {
var req AuthRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var user models.User
if result := db.DB.Where("email = ?", req.Email).First(&user); result.Error != nil {
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid credentials"})
return
}
if !auth.CheckPassword(req.Password, user.Password) {
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid credentials"})
return
}
token, _ := auth.GenerateToken(user.ID, user.Email)
c.JSON(http.StatusOK, AuthResponse{Token: token, User: user})
}
func (h *Handler) RegisterUserRoutes(r *gin.Engine) {
userGroup := r.Group("/api/user", AuthMiddleware())
{
userGroup.GET("/", h.getMe)
userGroup.PUT("/profile", h.updateProfile)
userGroup.PUT("/password", h.updatePassword)
userGroup.POST("/key", h.regenerateAPIKey)
}
}
func (h *Handler) updateProfile(c *gin.Context) {
userID, _ := c.Get("userID")
var req struct {
Name string `json:"name"`
Email string `json:"email"`
}
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var user models.User
if result := db.DB.Where("id = ?", userID).First(&user); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
return
}
if req.Name != "" {
user.Name = req.Name
}
if req.Email != "" {
user.Email = req.Email
}
db.DB.Save(&user)
c.JSON(http.StatusOK, user)
}
func (h *Handler) updatePassword(c *gin.Context) {
userID, _ := c.Get("userID")
var req struct {
OldPassword string `json:"old_password" binding:"required"`
NewPassword string `json:"new_password" binding:"required,min=6"`
}
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var user models.User
if result := db.DB.Where("id = ?", userID).First(&user); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
return
}
if !auth.CheckPassword(req.OldPassword, user.Password) {
c.JSON(http.StatusUnauthorized, gin.H{"error": "Incorrect old password"})
return
}
hashed, _ := auth.HashPassword(req.NewPassword)
user.Password = hashed
db.DB.Save(&user)
c.JSON(http.StatusOK, gin.H{"message": "Password updated"})
}
func (h *Handler) getMe(c *gin.Context) {
userID, _ := c.Get("userID")
var user models.User
if result := db.DB.Where("id = ?", userID).First(&user); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
return
}
c.JSON(http.StatusOK, user)
}
func (h *Handler) regenerateAPIKey(c *gin.Context) {
userID, _ := c.Get("userID")
apiKeyBytes := make([]byte, 32)
rand.Read(apiKeyBytes)
apiKey := "cp_" + hex.EncodeToString(apiKeyBytes)
if err := db.DB.Model(&models.User{}).Where("id = ?", userID).Update("api_key", apiKey).Error; err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to update API key"})
return
}
c.JSON(http.StatusOK, gin.H{"api_key": apiKey})
}

17
backend/internal/api/middleware.go
View File

@@ -1,16 +1,12 @@
package api
import (
"net/http"
"strings"
"clickploy/internal/auth"
"clickploy/internal/db"
"clickploy/internal/models"
"github.com/gin-gonic/gin"
)
func AuthMiddleware() gin.HandlerFunc {
return func(c *gin.Context) {
authHeader := c.GetHeader("Authorization")
@@ -19,21 +15,25 @@ func AuthMiddleware() gin.HandlerFunc {
c.Abort()
return
}
tokenString := strings.TrimPrefix(authHeader, "Bearer ")
claims, err := auth.ValidateToken(tokenString)
if err != nil {
var user models.User
if result := db.DB.Where("api_key = ?", tokenString).First(&user); result.Error == nil {
c.Set("userID", user.ID)
c.Set("email", user.Email)
c.Next()
return
}
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid token"})
c.Abort()
return
}
c.Set("userID", claims.UserID)
c.Set("email", claims.Email)
c.Next()
}
}
func AdminMiddleware() gin.HandlerFunc {
return func(c *gin.Context) {
userID, exists := c.Get("userID")
@@ -42,20 +42,17 @@ func AdminMiddleware() gin.HandlerFunc {
c.Abort()
return
}
var user models.User
if err := db.DB.Where("id = ?", userID).First(&user).Error; err != nil {
c.JSON(http.StatusUnauthorized, gin.H{"error": "User not found"})
c.Abort()
return
}
if !user.IsAdmin {
c.JSON(http.StatusForbidden, gin.H{"error": "Admin privileges required"})
c.Abort()
return
}
c.Next()
}
}

166
backend/internal/api/project.go
View File

@@ -2,14 +2,15 @@ package api
import (
"bytes"
"clickploy/internal/db"
"clickploy/internal/models"
"context"
"crypto/rand"
"encoding/hex"
"fmt"
"io"
"net/http"
"clickploy/internal/db"
"clickploy/internal/models"
"strings"
"github.com/gin-gonic/gin"
gonanoid "github.com/matoous/go-nanoid/v2"
@@ -22,16 +23,51 @@ func (h *Handler) RegisterProjectRoutes(r *gin.Engine) {
protected.POST("/projects", h.createProject)
protected.GET("/projects", h.listProjects)
protected.GET("/projects/:id", h.getProject)
protected.PUT("/projects/:id", h.updateProject)
protected.PUT("/projects/:id/env", h.updateProjectEnv)
protected.POST("/projects/:id/redeploy", h.redeployProject)
protected.GET("/activity", h.getActivity)
}
}
func (h *Handler) updateProject(c *gin.Context) {
userID, _ := c.Get("userID")
projectID := c.Param("id")
var req struct {
Name string `json:"name"`
BuildCommand string `json:"build_command"`
StartCommand string `json:"start_command"`
InstallCommand string `json:"install_command"`
Runtime string `json:"runtime"`
GitToken string `json:"git_token"`
RepoURL string `json:"repo_url"`
}
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var project models.Project
if result := db.DB.Where("id = ? AND owner_id = ?", projectID, userID).First(&project); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Project not found"})
return
}
project.Name = req.Name
project.BuildCommand = req.BuildCommand
project.StartCommand = req.StartCommand
project.InstallCommand = req.InstallCommand
project.Runtime = req.Runtime
project.RepoURL = req.RepoURL
if req.GitToken != "" {
project.GitToken = req.GitToken
}
if err := db.DB.Save(&project).Error; err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to update project"})
return
}
c.JSON(http.StatusOK, project)
}
func (h *Handler) updateProjectEnv(c *gin.Context) {
userID, _ := c.Get("userID")
projectID := c.Param("id")
var req struct {
EnvVars map[string]string `json:"env_vars"`
}
@@ -39,20 +75,17 @@ func (h *Handler) updateProjectEnv(c *gin.Context) {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var project models.Project
if result := db.DB.Where("id = ? AND owner_id = ?", projectID, userID).First(&project); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Project not found"})
return
}
tx := db.DB.Begin()
if err := tx.Where("project_id = ?", project.ID).Delete(&models.EnvVar{}).Error; err != nil {
tx.Rollback()
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to update env vars"})
return
}
for k, v := range req.EnvVars {
envVar := models.EnvVar{
ProjectID: project.ID,
@@ -65,99 +98,93 @@ func (h *Handler) updateProjectEnv(c *gin.Context) {
return
}
}
tx.Commit()
c.JSON(http.StatusOK, gin.H{"status": "updated"})
}
func (h *Handler) redeployProject(c *gin.Context) {
userID, _ := c.Get("userID")
projectID := c.Param("id")
var req struct {
Commit string `json:"commit"`
}
c.ShouldBindJSON(&req)
var project models.Project
if result := db.DB.Preload("EnvVars").Where("id = ? AND owner_id = ?", projectID, userID).First(&project); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Project not found"})
return
}
depID, _ := gonanoid.Generate("abcdefghijklmnopqrstuvwxyz0123456789", 10)
initialCommit := "MANUAL"
if req.Commit != "" {
initialCommit = req.Commit
}
deployment := models.Deployment{
ID: depID,
ProjectID: project.ID,
Status: "building",
Commit: "MANUAL",
Logs: "Starting manual redeploy...",
Commit: initialCommit,
Logs: fmt.Sprintf("Starting redeploy for commit %s...", initialCommit),
}
db.DB.Create(&deployment)
envMap := make(map[string]string)
for _, env := range project.EnvVars {
envMap[env.Key] = env.Value
}
resolvedEnv, err := h.resolveEnvVars(c.Request.Context(), userID.(string), envMap)
if err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
go func() {
var logBuffer bytes.Buffer
streamer := &StreamWriter{DeploymentID: deployment.ID}
multi := io.MultiWriter(&logBuffer, streamer)
envMap := make(map[string]string)
for _, env := range project.EnvVars {
envMap[env.Key] = env.Value
}
imageName, commitHash, err := h.builder.Build(project.RepoURL, project.Name, project.GitToken, project.BuildCommand, project.StartCommand, project.InstallCommand, project.Runtime, envMap, multi)
imageName, commitHash, err := h.builder.Build(project.RepoURL, req.Commit, project.Name, project.GitToken, project.BuildCommand, project.StartCommand, project.InstallCommand, project.Runtime, resolvedEnv, multi)
deployment.Logs = logBuffer.String()
if err != nil {
deployment.Status = "failed"
deployment.Logs += fmt.Sprintf("\n\nBuild Error: %v", err)
db.DB.Save(&deployment)
return
}
// Update commit hash if we got one
if commitHash != "" {
deployment.Commit = commitHash
}
var envStrings []string
for _, env := range project.EnvVars {
envStrings = append(envStrings, fmt.Sprintf("%s=%s", env.Key, env.Value))
for k, v := range resolvedEnv {
envStrings = append(envStrings, fmt.Sprintf("%s=%s", k, v))
}
containerID, err := h.deployer.RunContainer(c.Request.Context(), imageName, project.Name, project.Port, envStrings)
containerID, err := h.deployer.RunContainer(context.Background(), imageName, project.Name, project.Port, envStrings)
if err != nil {
deployment.Status = "failed"
deployment.Logs += fmt.Sprintf("\n\nContainer Error: %v", err)
db.DB.Save(&deployment)
return
}
deployment.Status = "live"
deployment.URL = fmt.Sprintf("http://localhost:%d", project.Port)
deployment.Logs += fmt.Sprintf("\n\nContainer ID: %s", containerID)
db.DB.Save(&deployment)
}()
c.JSON(http.StatusOK, gin.H{"status": "redeployment_started", "deployment_id": deployment.ID})
}
func (h *Handler) getActivity(c *gin.Context) {
userID, _ := c.Get("userID")
var deployments []models.Deployment
err := db.DB.Joins("JOIN projects ON projects.id = deployments.project_id").
Where("projects.owner_id = ?", userID).
Order("deployments.created_at desc").
Limit(20).
Preload("Project").
Find(&deployments).Error
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to fetch activity"})
return
}
c.JSON(http.StatusOK, deployments)
}
func (h *Handler) createProject(c *gin.Context) {
userID, _ := c.Get("userID")
var req struct {
DeployRequest
EnvVars map[string]string `json:"env_vars"`
@@ -166,31 +193,28 @@ func (h *Handler) createProject(c *gin.Context) {
InstallCommand string `json:"install_command"`
Runtime string `json:"runtime"`
}
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
port, err := h.ports.GetPort(req.Name, req.Port)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Port allocation failed: %v", err)})
return
}
resolvedEnv, err := h.resolveEnvVars(c.Request.Context(), userID.(string), req.EnvVars)
if err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var envVarsModel []models.EnvVar
var envStrings []string
for k, v := range req.EnvVars {
envStrings = append(envStrings, fmt.Sprintf("%s=%s", k, v))
envVarsModel = append(envVarsModel, models.EnvVar{Key: k, Value: v})
}
secretBytes := make([]byte, 16)
rand.Read(secretBytes)
webhookSecret := hex.EncodeToString(secretBytes)
id, _ := gonanoid.Generate("abcdefghijklmnopqrstuvwxyz0123456789", 10)
project := models.Project{
ID: id,
Name: req.Name,
@@ -205,12 +229,10 @@ func (h *Handler) createProject(c *gin.Context) {
InstallCommand: req.InstallCommand,
Runtime: req.Runtime,
}
if result := db.DB.Create(&project); result.Error != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to save project to DB"})
return
}
depID, _ := gonanoid.Generate("abcdefghijklmnopqrstuvwxyz0123456789", 10)
deployment := models.Deployment{
ID: depID,
@@ -220,45 +242,71 @@ func (h *Handler) createProject(c *gin.Context) {
Logs: "Starting build...",
}
db.DB.Create(&deployment)
go func() {
var logBuffer bytes.Buffer
streamer := &StreamWriter{DeploymentID: deployment.ID}
multi := io.MultiWriter(&logBuffer, streamer)
imageName, commitHash, err := h.builder.Build(req.Repo, req.Name, req.GitToken, req.BuildCommand, req.StartCommand, req.InstallCommand, req.Runtime, req.EnvVars, multi)
imageName, commitHash, err := h.builder.Build(req.Repo, "", req.Name, req.GitToken, req.BuildCommand, req.StartCommand, req.InstallCommand, req.Runtime, resolvedEnv, multi)
deployment.Logs = logBuffer.String()
if err != nil {
deployment.Status = "failed"
deployment.Logs += fmt.Sprintf("\n\nBuild Error: %v", err)
db.DB.Save(&deployment)
return
}
// Update commit hash
if commitHash != "" {
deployment.Commit = commitHash
}
containerID, err := h.deployer.RunContainer(c.Request.Context(), imageName, req.Name, port, envStrings)
var envStrings []string
for k, v := range resolvedEnv {
envStrings = append(envStrings, fmt.Sprintf("%s=%s", k, v))
}
containerID, err := h.deployer.RunContainer(context.Background(), imageName, req.Name, port, envStrings)
if err != nil {
deployment.Status = "failed"
deployment.Logs += fmt.Sprintf("\n\nContainer Error: %v", err)
db.DB.Save(&deployment)
return
}
deployment.Status = "live"
deployment.URL = fmt.Sprintf("http://localhost:%d", port)
deployment.Logs += fmt.Sprintf("\n\nContainer ID: %s", containerID)
db.DB.Save(&deployment)
}()
project.Deployments = []models.Deployment{deployment}
c.JSON(http.StatusOK, project)
}
func (h *Handler) resolveEnvVars(ctx context.Context, userID string, envVars map[string]string) (map[string]string, error) {
resolved := make(map[string]string)
for k, v := range envVars {
if strings.HasPrefix(v, "$DB:") {
dbName := strings.TrimPrefix(v, "$DB:")
var database models.Database
if err := db.DB.Where("name = ? AND owner_id = ?", dbName, userID).First(&database).Error; err != nil {
return nil, fmt.Errorf("database '%s' not found", dbName)
}
if database.Type != "mongodb" {
return nil, fmt.Errorf("database '%s' is not a mongodb instance (auto-resolution only supported for mongo)", dbName)
}
env, err := h.deployer.GetContainerEnv(ctx, database.ContainerID)
if err != nil {
return nil, fmt.Errorf("failed to get env for database '%s': %v", dbName, err)
}
var user, pass string
for _, e := range env {
if len(e) > 25 && e[:25] == "MONGO_INITDB_ROOT_USERNAME=" {
user = e[25:]
} else if len(e) > 25 && e[:25] == "MONGO_INITDB_ROOT_PASSWORD=" {
pass = e[25:]
}
}
resolved[k] = fmt.Sprintf("mongodb://%s:%s@172.17.0.1:%d/?authSource=admin", user, pass, database.Port)
} else {
resolved[k] = v
}
}
return resolved, nil
}
func (h *Handler) listProjects(c *gin.Context) {
userID, _ := c.Get("userID")
var projects []models.Project
@@ -268,11 +316,9 @@ func (h *Handler) listProjects(c *gin.Context) {
}
c.JSON(http.StatusOK, projects)
}
func (h *Handler) getProject(c *gin.Context) {
userID, _ := c.Get("userID")
projectID := c.Param("id")
var project models.Project
if result := db.DB.Order("created_at desc").Preload("Deployments", func(db *gorm.DB) *gorm.DB {
return db.Order("deployments.created_at desc")

318
backend/internal/api/storage.go
View File

@@ -1,23 +1,23 @@
package api
import (
"clickploy/internal/db"
"clickploy/internal/models"
"fmt"
"net/http"
"os"
"path/filepath"
"syscall"
"clickploy/internal/db"
"clickploy/internal/models"
"github.com/gin-gonic/gin"
gonanoid "github.com/matoous/go-nanoid/v2"
)
type CreateDatabaseRequest struct {
Name string `json:"name" binding:"required"`
Type string `json:"type" binding:"required,oneof=sqlite"`
Type string `json:"type" binding:"required,oneof=sqlite mongodb"`
Port int `json:"port"`
}
type StorageStatsResponse struct {
TotalMB float64 `json:"total_mb"`
UsedMB float64 `json:"used_mb"`
@@ -30,28 +30,67 @@ func (h *Handler) RegisterStorageRoutes(r *gin.Engine) {
api.GET("/stats", h.handleGetStorageStats)
api.GET("/databases", h.handleListDatabases)
api.POST("/databases", h.handleCreateDatabase)
api.PUT("/databases/:id", h.handleUpdateDatabase)
api.DELETE("/databases/:id", h.handleDeleteDatabase)
api.GET("/databases/:id/credentials", h.handleGetDatabaseCredentials)
api.PUT("/databases/:id/credentials", h.handleUpdateDatabaseCredentials)
api.POST("/databases/:id/stop", h.handleStopDatabase)
api.POST("/databases/:id/restart", h.handleRestartDatabase)
}
}
func (h *Handler) handleUpdateDatabase(c *gin.Context) {
userId := c.GetString("userID")
dbId := c.Param("id")
var req struct {
Port int `json:"port"`
}
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var database models.Database
if err := db.DB.Where("id = ? AND owner_id = ?", dbId, userId).First(&database).Error; err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Database not found"})
return
}
if database.Type == "mongodb" && req.Port != 0 && req.Port != database.Port {
envVars, err := h.deployer.GetContainerEnv(c.Request.Context(), database.ContainerID)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve current container configuration"})
return
}
wd, _ := os.Getwd()
volumePath := filepath.Join(wd, "data", "volumes", fmt.Sprintf("%s_%s", userId, database.Name))
containerName := fmt.Sprintf("mongo_%s_%s", userId, database.Name)
newId, err := h.deployer.StartDatabaseContainer(c.Request.Context(), "mongo:latest", containerName, req.Port, volumePath, envVars)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to restart container: %v", err)})
return
}
database.Port = req.Port
database.ContainerID = newId
if err := db.DB.Save(&database).Error; err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to update database record"})
return
}
}
c.JSON(http.StatusOK, database)
}
func (h *Handler) handleGetStorageStats(c *gin.Context) {
var stat syscall.Statfs_t
wd, _ := os.Getwd()
if err := syscall.Statfs(wd, &stat); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to get disk stats"})
return
}
totalBytes := stat.Blocks * uint64(stat.Bsize)
availBytes := stat.Bavail * uint64(stat.Bsize)
usedBytes := totalBytes - availBytes
c.JSON(http.StatusOK, StorageStatsResponse{
TotalMB: float64(totalBytes) / 1024 / 1024,
UsedMB: float64(usedBytes) / 1024 / 1024,
})
}
func (h *Handler) handleListDatabases(c *gin.Context) {
userId := c.GetString("userID")
var dbs []models.Database
@@ -61,7 +100,6 @@ func (h *Handler) handleListDatabases(c *gin.Context) {
}
c.JSON(http.StatusOK, dbs)
}
func (h *Handler) handleCreateDatabase(c *gin.Context) {
userId := c.GetString("userID")
var req CreateDatabaseRequest
@@ -69,7 +107,6 @@ func (h *Handler) handleCreateDatabase(c *gin.Context) {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
newDB := models.Database{
Name: req.Name,
Type: req.Type,
@@ -77,22 +114,257 @@ func (h *Handler) handleCreateDatabase(c *gin.Context) {
OwnerID: userId,
SizeMB: 0,
}
dataDir := "./data/user_dbs"
os.MkdirAll(dataDir, 0755)
dbPath := filepath.Join(dataDir, fmt.Sprintf("%s_%s.db", userId, req.Name))
file, err := os.Create(dbPath)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create database file"})
if req.Type == "sqlite" {
dataDir := "./data/user_dbs"
os.MkdirAll(dataDir, 0755)
dbPath := filepath.Join(dataDir, fmt.Sprintf("%s_%s.db", userId, req.Name))
file, err := os.Create(dbPath)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create database file"})
return
}
file.Close()
} else if req.Type == "mongodb" {
port := 27017
if req.Port != 0 {
p, err := h.ports.GetPort(req.Name, req.Port)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Port %d is not available", req.Port)})
return
}
port = p
} else {
p, err := h.ports.GetPort(req.Name, 27017)
if err == nil {
port = p
} else {
p, err := h.ports.GetPort(req.Name, 0)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to allocate port"})
return
}
port = p
}
}
newDB.Port = port
username := "root"
password, _ := gonanoid.Generate("abcdefghijklmnopqrstuvwxyz0123456789", 16)
wd, _ := os.Getwd()
volumePath := filepath.Join(wd, "data", "volumes", fmt.Sprintf("%s_%s", userId, req.Name))
os.MkdirAll(volumePath, 0755)
containerName := fmt.Sprintf("mongo_%s_%s", userId, req.Name)
envVars := []string{
fmt.Sprintf("MONGO_INITDB_ROOT_USERNAME=%s", username),
fmt.Sprintf("MONGO_INITDB_ROOT_PASSWORD=%s", password),
}
id, err := h.deployer.StartDatabaseContainer(c.Request.Context(), "mongo:latest", containerName, port, volumePath, envVars)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to start database container: %v", err)})
return
}
newDB.ContainerID = id
newDB.Status = "running"
c.JSON(http.StatusOK, gin.H{
"database": newDB,
"username": username,
"password": password,
"uri": fmt.Sprintf("mongodb://%s:%s@localhost:%d/?authSource=admin", username, password, port),
})
if err := db.DB.Create(&newDB).Error; err != nil {
fmt.Printf("Failed to save DB record: %v\n", err)
}
return
}
file.Close()
if err := db.DB.Create(&newDB).Error; err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to save database record"})
return
}
c.JSON(http.StatusOK, newDB)
}
func (h *Handler) handleDeleteDatabase(c *gin.Context) {
userId := c.GetString("userID")
dbId := c.Param("id")
var database models.Database
if err := db.DB.Where("id = ? AND owner_id = ?", dbId, userId).First(&database).Error; err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Database not found"})
return
}
if database.Type == "sqlite" {
dataDir := "./data/user_dbs"
dbPath := filepath.Join(dataDir, fmt.Sprintf("%s_%s.db", userId, database.Name))
if err := os.Remove(dbPath); err != nil && !os.IsNotExist(err) {
fmt.Printf("Failed to delete database file: %v\n", err)
}
} else if database.Type == "mongodb" {
if database.ContainerID != "" {
if err := h.deployer.RemoveContainer(c.Request.Context(), database.ContainerID); err != nil {
fmt.Printf("Failed to remove container: %v\n", err)
}
}
wd, _ := os.Getwd()
volumePath := filepath.Join(wd, "data", "volumes", fmt.Sprintf("%s_%s", userId, database.Name))
os.RemoveAll(volumePath)
}
if err := db.DB.Delete(&database).Error; err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to delete database record"})
return
}
c.JSON(http.StatusOK, gin.H{"status": "deleted"})
}
func (h *Handler) handleGetDatabaseCredentials(c *gin.Context) {
userId := c.GetString("userID")
dbId := c.Param("id")
var database models.Database
if err := db.DB.Where("id = ? AND owner_id = ?", dbId, userId).First(&database).Error; err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Database not found"})
return
}
if database.Type != "mongodb" {
c.JSON(http.StatusBadRequest, gin.H{"error": "Credential management only supported for MongoDB"})
return
}
envVars, err := h.deployer.GetContainerEnv(c.Request.Context(), database.ContainerID)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve container configuration"})
return
}
var username, password string
for _, env := range envVars {
if len(env) > 25 && env[:25] == "MONGO_INITDB_ROOT_USERNAME=" {
username = env[25:]
} else if len(env) > 25 && env[:25] == "MONGO_INITDB_ROOT_PASSWORD=" {
password = env[25:]
}
}
uri := fmt.Sprintf("mongodb://%s:%s@localhost:%d/?authSource=admin", username, password, database.Port)
publicUri := fmt.Sprintf("mongodb://%s:%s@<HOST>:%d/?authSource=admin", username, password, database.Port)
c.JSON(http.StatusOK, gin.H{
"username": username,
"password": password,
"uri": uri,
"public_uri": publicUri,
})
}
func (h *Handler) handleUpdateDatabaseCredentials(c *gin.Context) {
userId := c.GetString("userID")
dbId := c.Param("id")
var req struct {
Username string `json:"username" binding:"required"`
Password string `json:"password" binding:"required"`
}
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
var database models.Database
if err := db.DB.Where("id = ? AND owner_id = ?", dbId, userId).First(&database).Error; err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Database not found"})
return
}
if database.Type != "mongodb" {
c.JSON(http.StatusBadRequest, gin.H{"error": "Credential management only supported for MongoDB"})
return
}
envVars, err := h.deployer.GetContainerEnv(c.Request.Context(), database.ContainerID)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve container configuration"})
return
}
var currentUser, currentPass string
var otherEnv []string
for _, env := range envVars {
if len(env) > 25 && env[:25] == "MONGO_INITDB_ROOT_USERNAME=" {
currentUser = env[25:]
} else if len(env) > 25 && env[:25] == "MONGO_INITDB_ROOT_PASSWORD=" {
currentPass = env[25:]
} else {
otherEnv = append(otherEnv, env)
}
}
if currentUser == "" || currentPass == "" {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Could not determine current credentials from container"})
return
}
ctx := c.Request.Context()
needsRestart := false
if req.Username != currentUser {
createCmd := fmt.Sprintf("db.getSiblingDB('admin').createUser({user: '%s', pwd: '%s', roles: ['root']})", req.Username, req.Password)
if err := h.deployer.ExecContainer(ctx, database.ContainerID, []string{"mongosh", "admin", "-u", currentUser, "-p", currentPass, "--eval", createCmd}); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to create new user: %v", err)})
return
}
dropCmd := fmt.Sprintf("db.getSiblingDB('admin').dropUser('%s')", currentUser)
if err := h.deployer.ExecContainer(ctx, database.ContainerID, []string{"mongosh", "admin", "-u", req.Username, "-p", req.Password, "--eval", dropCmd}); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to drop old user: %v", err)})
return
}
needsRestart = true
} else if req.Password != currentPass {
changeCmd := fmt.Sprintf("db.getSiblingDB('admin').changeUserPassword('%s', '%s')", currentUser, req.Password)
if err := h.deployer.ExecContainer(ctx, database.ContainerID, []string{"mongosh", "admin", "-u", currentUser, "-p", currentPass, "--eval", changeCmd}); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to change password: %v", err)})
return
}
needsRestart = true
}
if needsRestart {
newEnv := append(otherEnv,
fmt.Sprintf("MONGO_INITDB_ROOT_USERNAME=%s", req.Username),
fmt.Sprintf("MONGO_INITDB_ROOT_PASSWORD=%s", req.Password),
)
wd, _ := os.Getwd()
volumePath := filepath.Join(wd, "data", "volumes", fmt.Sprintf("%s_%s", userId, database.Name))
containerName := fmt.Sprintf("mongo_%s_%s", userId, database.Name)
newId, err := h.deployer.StartDatabaseContainer(ctx, "mongo:latest", containerName, database.Port, volumePath, newEnv)
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to restart container with new creds: %v", err)})
return
}
database.ContainerID = newId
if err := db.DB.Save(&database).Error; err != nil {
}
}
c.JSON(http.StatusOK, gin.H{"status": "updated"})
}
func (h *Handler) handleStopDatabase(c *gin.Context) {
userId := c.GetString("userID")
dbId := c.Param("id")
var database models.Database
if err := db.DB.Where("id = ? AND owner_id = ?", dbId, userId).First(&database).Error; err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Database not found"})
return
}
if database.Type == "mongodb" && database.ContainerID != "" {
if err := h.deployer.StopContainer(c.Request.Context(), database.ContainerID); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to stop container: %v", err)})
return
}
database.Status = "stopped"
if err := db.DB.Save(&database).Error; err != nil {
fmt.Printf("Failed to update db status: %v\n", err)
}
}
c.JSON(http.StatusOK, gin.H{"status": "stopped"})
}
func (h *Handler) handleRestartDatabase(c *gin.Context) {
userId := c.GetString("userID")
dbId := c.Param("id")
var database models.Database
if err := db.DB.Where("id = ? AND owner_id = ?", dbId, userId).First(&database).Error; err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Database not found"})
return
}
if database.Type == "mongodb" && database.ContainerID != "" {
if err := h.deployer.RestartContainer(c.Request.Context(), database.ContainerID); err != nil {
if err := h.deployer.StartContainer(c.Request.Context(), database.ContainerID); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to restart container: %v", err)})
return
}
}
database.Status = "running"
if err := db.DB.Save(&database).Error; err != nil {
fmt.Printf("Failed to update db status: %v\n", err)
}
}
c.JSON(http.StatusOK, gin.H{"status": "restarted"})
}

16
backend/internal/api/stream.go
View File

@@ -1,27 +1,21 @@
package api
import (
"net/http"
"sync"
"time"
"github.com/gin-gonic/gin"
"github.com/gorilla/websocket"
)
var upgrader = websocket.Upgrader{
CheckOrigin: func(r *http.Request) bool { return true },
}
type LogHub struct {
mu sync.Mutex
streams map[string][]chan []byte
}
var Hub = &LogHub{
streams: make(map[string][]chan []byte),
}
func (h *LogHub) Broadcast(deploymentID string, p []byte) {
h.mu.Lock()
defer h.mu.Unlock()
@@ -34,7 +28,6 @@ func (h *LogHub) Broadcast(deploymentID string, p []byte) {
}
}
}
func (h *LogHub) Subscribe(deploymentID string) chan []byte {
h.mu.Lock()
defer h.mu.Unlock()
@@ -42,7 +35,6 @@ func (h *LogHub) Subscribe(deploymentID string) chan []byte {
h.streams[deploymentID] = append(h.streams[deploymentID], ch)
return ch
}
func (h *LogHub) Unsubscribe(deploymentID string, ch chan []byte) {
h.mu.Lock()
defer h.mu.Unlock()
@@ -59,34 +51,28 @@ func (h *LogHub) Unsubscribe(deploymentID string, ch chan []byte) {
}
}
}
type StreamWriter struct {
DeploymentID string
}
func (w *StreamWriter) Write(p []byte) (n int, err error) {
c := make([]byte, len(p))
copy(c, p)
Hub.Broadcast(w.DeploymentID, c)
return len(p), nil
}
func (h *Handler) streamDeploymentLogs(c *gin.Context) {
deploymentID := c.Param("id")
if deploymentID == "" {
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid ID"})
return
}
conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
if err != nil {
return
}
defer conn.Close()
logChan := Hub.Subscribe(deploymentID)
defer Hub.Unsubscribe(deploymentID, logChan)
go func() {
for {
if _, _, err := conn.NextReader(); err != nil {
@@ -95,7 +81,6 @@ func (h *Handler) streamDeploymentLogs(c *gin.Context) {
}
}
}()
for logChunk := range logChan {
conn.SetWriteDeadline(time.Now().Add(10 * time.Second))
if err := conn.WriteMessage(websocket.TextMessage, logChunk); err != nil {
@@ -103,7 +88,6 @@ func (h *Handler) streamDeploymentLogs(c *gin.Context) {
}
}
}
func (h *Handler) RegisterStreamRoutes(r *gin.Engine) {
r.GET("/api/deployments/:id/logs/stream", h.streamDeploymentLogs)
}

20
backend/internal/api/webhook.go
View File

@@ -2,13 +2,12 @@ package api
import (
"bytes"
"clickploy/internal/db"
"clickploy/internal/models"
"fmt"
"io"
"net/http"
"clickploy/internal/db"
"clickploy/internal/models"
"github.com/gin-gonic/gin"
gonanoid "github.com/matoous/go-nanoid/v2"
)
@@ -16,27 +15,22 @@ import (
func (h *Handler) RegisterWebhookRoutes(r *gin.Engine) {
r.POST("/projects/:projectID/webhook/:webhookID", h.handleWebhook)
}
func (h *Handler) handleWebhook(c *gin.Context) {
projectID := c.Param("projectID")
webhookSecret := c.Param("webhookID")
if projectID == "" || webhookSecret == "" {
c.JSON(http.StatusBadRequest, gin.H{"error": "invalid webhook url"})
return
}
var project models.Project
if result := db.DB.Preload("EnvVars").Where("id = ?", projectID).First(&project); result.Error != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "Project not found"})
return
}
if project.WebhookSecret != webhookSecret {
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid Webhook Secret"})
return
}
depID, _ := gonanoid.Generate("abcdefghijklmnopqrstuvwxyz0123456789", 10)
deployment := models.Deployment{
ID: depID,
@@ -49,18 +43,15 @@ func (h *Handler) handleWebhook(c *gin.Context) {
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create deployment record"})
return
}
go func() {
var logBuffer bytes.Buffer
streamer := &StreamWriter{DeploymentID: deployment.ID}
multi := io.MultiWriter(&logBuffer, streamer)
envMap := make(map[string]string)
for _, env := range project.EnvVars {
envMap[env.Key] = env.Value
}
imageName, commitHash, err := h.builder.Build(project.RepoURL, project.Name, project.GitToken, project.BuildCommand, project.StartCommand, project.InstallCommand, project.Runtime, envMap, multi)
imageName, commitHash, err := h.builder.Build(project.RepoURL, "", project.Name, project.GitToken, project.BuildCommand, project.StartCommand, project.InstallCommand, project.Runtime, envMap, multi)
deployment.Logs = logBuffer.String()
if err != nil {
deployment.Status = "failed"
@@ -68,16 +59,13 @@ func (h *Handler) handleWebhook(c *gin.Context) {
db.DB.Save(&deployment)
return
}
if commitHash != "" {
deployment.Commit = commitHash
}
var envStrings []string
for _, env := range project.EnvVars {
envStrings = append(envStrings, fmt.Sprintf("%s=%s", env.Key, env.Value))
}
containerID, err := h.deployer.RunContainer(c.Request.Context(), imageName, project.Name, project.Port, envStrings)
if err != nil {
deployment.Status = "failed"
@@ -85,12 +73,10 @@ func (h *Handler) handleWebhook(c *gin.Context) {
db.DB.Save(&deployment)
return
}
deployment.Status = "live"
deployment.URL = fmt.Sprintf("http://localhost:%d", project.Port)
deployment.Logs += fmt.Sprintf("\n\nContainer ID: %s", containerID)
db.DB.Save(&deployment)
}()
c.JSON(http.StatusOK, gin.H{"status": "redeployment_started", "deployment_id": deployment.ID})
}

8
backend/internal/auth/utils.go
View File

@@ -1,31 +1,24 @@
package auth
import (
"errors"
"time"
"github.com/golang-jwt/jwt/v5"
"golang.org/x/crypto/bcrypt"
)
var SecretKey = []byte("super-secret-key-change-me")
type Claims struct {
UserID string `json:"user_id"`
Email string `json:"email"`
jwt.RegisteredClaims
}
func HashPassword(password string) (string, error) {
bytes, err := bcrypt.GenerateFromPassword([]byte(password), 14)
return string(bytes), err
}
func CheckPassword(password, hash string) bool {
err := bcrypt.CompareHashAndPassword([]byte(hash), []byte(password))
return err == nil
}
func GenerateToken(userID string, email string) (string, error) {
expirationTime := time.Now().Add(24 * time.Hour)
claims := &Claims{
@@ -38,7 +31,6 @@ func GenerateToken(userID string, email string) (string, error) {
token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
return token.SignedString(SecretKey)
}
func ValidateToken(tokenString string) (*Claims, error) {
claims := &Claims{}
token, err := jwt.ParseWithClaims(tokenString, claims, func(token *jwt.Token) (interface{}, error) {

46
backend/internal/builder/builder.go
View File

@@ -1,5 +1,4 @@
package builder
import (
"fmt"
"io"
@@ -9,14 +8,11 @@ import (
"path/filepath"
"strings"
)
type Builder struct{}
func NewBuilder() *Builder {
return &Builder{}
}
func (b *Builder) Build(repoURL, appName, gitToken, buildCmd, startCmd, installCmd, runtime string, envVars map[string]string, logWriter io.Writer) (string, string, error) {
func (b *Builder) Build(repoURL, targetCommit, appName, gitToken, buildCmd, startCmd, installCmd, runtime string, envVars map[string]string, logWriter io.Writer) (string, string, error) {
workDir := filepath.Join("/tmp", "paas-builds", appName)
if err := os.RemoveAll(workDir); err != nil {
return "", "", fmt.Errorf("failed to clean work dir: %w", err)
@@ -24,7 +20,6 @@ func (b *Builder) Build(repoURL, appName, gitToken, buildCmd, startCmd, installC
if err := os.MkdirAll(workDir, 0755); err != nil {
return "", "", fmt.Errorf("failed to create work dir: %w", err)
}
cloneURL := repoURL
if gitToken != "" {
u, err := url.Parse(repoURL)
@@ -34,17 +29,29 @@ func (b *Builder) Build(repoURL, appName, gitToken, buildCmd, startCmd, installC
u.User = url.UserPassword("oauth2", gitToken)
cloneURL = u.String()
}
fmt.Fprintf(logWriter, ">>> Cloning repository %s...\n", repoURL)
cloneCmd := exec.Command("git", "clone", "--depth", "1", cloneURL, ".")
var cloneCmd *exec.Cmd
if targetCommit != "" && targetCommit != "HEAD" && targetCommit != "MANUAL" && targetCommit != "WEBHOOK" {
cloneCmd = exec.Command("git", "clone", "--filter=blob:none", cloneURL, ".")
} else {
cloneCmd = exec.Command("git", "clone", "--depth", "1", cloneURL, ".")
}
cloneCmd.Dir = workDir
cloneCmd.Stdout = logWriter
cloneCmd.Stderr = logWriter
if err := cloneCmd.Run(); err != nil {
return "", "", fmt.Errorf("git clone failed: %w", err)
}
// Get commit hash
if targetCommit != "" && targetCommit != "HEAD" && targetCommit != "MANUAL" && targetCommit != "WEBHOOK" {
fmt.Fprintf(logWriter, ">>> Checking out commit %s...\n", targetCommit)
checkoutCmd := exec.Command("git", "checkout", targetCommit)
checkoutCmd.Dir = workDir
checkoutCmd.Stdout = logWriter
checkoutCmd.Stderr = logWriter
if err := checkoutCmd.Run(); err != nil {
return "", "", fmt.Errorf("git checkout failed: %w", err)
}
}
commitCmd := exec.Command("git", "rev-parse", "HEAD")
commitCmd.Dir = workDir
commitHashBytes, err := commitCmd.Output()
@@ -55,14 +62,11 @@ func (b *Builder) Build(repoURL, appName, gitToken, buildCmd, startCmd, installC
} else {
fmt.Fprintf(logWriter, ">>> Failed to get commit hash: %v\n", err)
}
if runtime == "" {
runtime = "nodejs"
}
var nixPkgs string
var defaultInstall, defaultBuild, defaultStart string
switch runtime {
case "bun":
nixPkgs = `["bun"]`
@@ -85,66 +89,50 @@ func (b *Builder) Build(repoURL, appName, gitToken, buildCmd, startCmd, installC
defaultBuild = "npm run build"
defaultStart = "npm run start"
}
installStr := defaultInstall
if installCmd != "" {
installStr = installCmd
}
buildStr := defaultBuild
if buildCmd != "" {
buildStr = buildCmd
}
startStr := defaultStart
if startCmd != "" {
startStr = startCmd
}
nixpacksConfig := fmt.Sprintf(`
[phases.setup]
nixPkgs = %s
[phases.install]
cmds = ["%s"]
[phases.build]
cmds = ["%s"]
[start]
cmd = "%s"
`, nixPkgs, installStr, buildStr, startStr)
if _, err := os.Stat(filepath.Join(workDir, "package.json")); err == nil {
configPath := filepath.Join(workDir, "nixpacks.toml")
if err := os.WriteFile(configPath, []byte(nixpacksConfig), 0644); err != nil {
return "", "", fmt.Errorf("failed to write nixpacks.toml: %w", err)
}
}
imageName := strings.ToLower(appName)
fmt.Fprintf(logWriter, "\n>>> Starting Nixpacks build for %s...\n", imageName)
args := []string{"build", ".", "--name", imageName, "--no-cache"}
for k, v := range envVars {
args = append(args, "--env", fmt.Sprintf("%s=%s", k, v))
}
nixCmd := exec.Command("nixpacks", args...)
nixCmd.Dir = workDir
nixCmd.Stdout = logWriter
nixCmd.Stderr = logWriter
nixCmd.Env = append(os.Environ(),
"NIXPACKS_NO_CACHE=1",
)
if err := nixCmd.Run(); err != nil {
return "", "", fmt.Errorf("nixpacks build failed: %w", err)
}
fmt.Fprintf(logWriter, "\n>>> Build successful!\n")
return imageName, commitHash, nil
}

7
backend/internal/db/db.go
View File

@@ -1,29 +1,22 @@
package db
import (
"log"
"path/filepath"
"gorm.io/driver/sqlite"
"gorm.io/gorm"
"gorm.io/gorm/logger"
"clickploy/internal/models"
)
var DB *gorm.DB
func Init(storagePath string) {
var err error
dbPath := filepath.Join(storagePath, "clickploy.db")
DB, err = gorm.Open(sqlite.Open(dbPath), &gorm.Config{
Logger: logger.Default.LogMode(logger.Info),
})
if err != nil {
log.Fatal("Failed to connect to database:", err)
}
log.Println("Migrating database...")
err = DB.AutoMigrate(&models.User{}, &models.Project{}, &models.Deployment{}, &models.EnvVar{}, &models.Database{})
if err != nil {

96
backend/internal/deployer/deployer.go
View File

@@ -1,28 +1,26 @@
package deployer
import (
"context"
"fmt"
"io"
"github.com/docker/docker/api/types"
"github.com/docker/docker/api/types/container"
"github.com/docker/docker/client"
"github.com/docker/go-connections/nat"
)
type Deployer struct {
cli *client.Client
}
func (d *Deployer) RemoveContainer(ctx context.Context, containerID string) error {
return d.cli.ContainerRemove(ctx, containerID, types.ContainerRemoveOptions{Force: true})
}
func NewDeployer() (*Deployer, error) {
cli, err := client.NewClientWithOpts(client.FromEnv, client.WithAPIVersionNegotiation())
cli, err := client.NewClientWithOpts(client.FromEnv, client.WithVersion("1.44"))
if err != nil {
return nil, fmt.Errorf("failed to create docker client: %w", err)
}
return &Deployer{cli: cli}, nil
}
func (d *Deployer) RunContainer(ctx context.Context, imageName, appName string, hostPort int, envVars []string) (string, error) {
config := &container.Config{
Image: imageName,
@@ -31,7 +29,6 @@ func (d *Deployer) RunContainer(ctx context.Context, imageName, appName string,
},
Env: envVars,
}
hostConfig := &container.HostConfig{
PortBindings: nat.PortMap{
"3000/tcp": []nat.PortBinding{
@@ -45,21 +42,96 @@ func (d *Deployer) RunContainer(ctx context.Context, imageName, appName string,
Name: "unless-stopped",
},
}
_ = d.cli.ContainerRemove(ctx, appName, types.ContainerRemoveOptions{Force: true})
resp, err := d.cli.ContainerCreate(ctx, config, hostConfig, nil, nil, appName)
if err != nil {
return "", fmt.Errorf("failed to create container: %w", err)
}
if err := d.cli.ContainerStart(ctx, resp.ID, types.ContainerStartOptions{}); err != nil {
return "", fmt.Errorf("failed to start container: %w", err)
}
return resp.ID, nil
}
func (d *Deployer) GetContainerEnv(ctx context.Context, containerID string) ([]string, error) {
info, err := d.cli.ContainerInspect(ctx, containerID)
if err != nil {
return nil, err
}
return info.Config.Env, nil
}
func (d *Deployer) StreamLogs(ctx context.Context, containerID string) (io.ReadCloser, error) {
return d.cli.ContainerLogs(ctx, containerID, types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true})
}
func (d *Deployer) StartDatabaseContainer(ctx context.Context, image, name string, port int, volumePath string, envVars []string) (string, error) {
_, err := d.cli.ImagePull(ctx, image, types.ImagePullOptions{})
if err != nil {
fmt.Printf("Failed to pull image %s: %v\n", image, err)
}
config := &container.Config{
Image: image,
ExposedPorts: nat.PortSet{
"27017/tcp": struct{}{},
},
Env: envVars,
}
hostConfig := &container.HostConfig{
PortBindings: nat.PortMap{
"27017/tcp": []nat.PortBinding{
{
HostIP: "0.0.0.0",
HostPort: fmt.Sprintf("%d", port),
},
},
},
Binds: []string{
fmt.Sprintf("%s:/data/db", volumePath),
},
RestartPolicy: container.RestartPolicy{
Name: "unless-stopped",
},
}
d.cli.ContainerRemove(ctx, name, types.ContainerRemoveOptions{Force: true})
resp, err := d.cli.ContainerCreate(ctx, config, hostConfig, nil, nil, name)
if err != nil {
return "", fmt.Errorf("failed to create db container: %w", err)
}
if err := d.cli.ContainerStart(ctx, resp.ID, types.ContainerStartOptions{}); err != nil {
return "", fmt.Errorf("failed to start db container: %w", err)
}
return resp.ID, nil
}
func (d *Deployer) ExecContainer(ctx context.Context, containerID string, cmd []string) error {
execConfig := types.ExecConfig{
Cmd: cmd,
AttachStdout: true,
AttachStderr: true,
}
resp, err := d.cli.ContainerExecCreate(ctx, containerID, execConfig)
if err != nil {
return fmt.Errorf("failed to create exec: %w", err)
}
execID := resp.ID
attachResp, err := d.cli.ContainerExecAttach(ctx, execID, types.ExecStartCheck{})
if err != nil {
return fmt.Errorf("failed to attach exec: %w", err)
}
defer attachResp.Close()
io.Copy(io.Discard, attachResp.Reader)
inspectResp, err := d.cli.ContainerExecInspect(ctx, execID)
if err != nil {
return fmt.Errorf("failed to inspect exec: %w", err)
}
if inspectResp.ExitCode != 0 {
return fmt.Errorf("command exited with code %d", inspectResp.ExitCode)
}
return nil
}
func (d *Deployer) StopContainer(ctx context.Context, containerID string) error {
return d.cli.ContainerStop(ctx, containerID, container.StopOptions{})
}
func (d *Deployer) StartContainer(ctx context.Context, containerID string) error {
return d.cli.ContainerStart(ctx, containerID, types.ContainerStartOptions{})
}
func (d *Deployer) RestartContainer(ctx context.Context, containerID string) error {
return d.cli.ContainerRestart(ctx, containerID, container.StopOptions{})
}

20
backend/internal/models/models.go
View File

@@ -1,11 +1,8 @@
package models
import (
"time"
"gorm.io/gorm"
)
type User struct {
ID string `gorm:"primaryKey" json:"id"`
CreatedAt time.Time `json:"created_at"`
@@ -16,9 +13,9 @@ type User struct {
Name string `json:"name"`
Avatar string `json:"avatar"`
IsAdmin bool `json:"is_admin"`
APIKey string `json:"api_key" gorm:"uniqueIndex"`
Projects []Project `gorm:"foreignKey:OwnerID" json:"projects"`
}
type Project struct {
ID string `gorm:"primaryKey" json:"id"`
CreatedAt time.Time `json:"created_at"`
@@ -37,14 +34,12 @@ type Project struct {
Deployments []Deployment `gorm:"foreignKey:ProjectID" json:"deployments"`
EnvVars []EnvVar `gorm:"foreignKey:ProjectID" json:"env_vars"`
}
type EnvVar struct {
gorm.Model
ProjectID string `json:"project_id"`
Key string `json:"key"`
Value string `json:"value"`
}
type Deployment struct {
ID string `gorm:"primaryKey" json:"id"`
CreatedAt time.Time `json:"created_at"`
@@ -57,12 +52,13 @@ type Deployment struct {
Logs string `json:"logs"`
URL string `json:"url"`
}
type Database struct {
gorm.Model
Name string `json:"name"`
Type string `json:"type"`
Status string `json:"status"`
OwnerID string `json:"owner_id"`
SizeMB float64 `json:"size_mb"`
Name string `json:"name"`
Type string `json:"type"`
Status string `json:"status"`
OwnerID string `json:"owner_id"`
SizeMB float64 `json:"size_mb"`
Port int `json:"port"`
ContainerID string `json:"container_id"`
}

18
backend/internal/ports/ports.go
View File

@@ -1,18 +1,16 @@
package ports
import (
"fmt"
"math/rand"
"net"
"sync"
)
type Manager struct {
mu sync.Mutex
startPort int
endPort int
allocations map[string]int
}
func NewManager(start, end int) *Manager {
return &Manager{
startPort: start,
@@ -20,18 +18,15 @@ func NewManager(start, end int) *Manager {
allocations: make(map[string]int),
}
}
func (m *Manager) GetPort(appName string, specificPort int) (int, error) {
m.mu.Lock()
defer m.mu.Unlock()
if port, exists := m.allocations[appName]; exists {
if specificPort > 0 && specificPort != port {
return 0, fmt.Errorf("app %s is already running on port %d", appName, port)
}
return port, nil
}
if specificPort > 0 {
if err := m.checkPortAvailable(specificPort); err != nil {
return 0, err
@@ -39,8 +34,10 @@ func (m *Manager) GetPort(appName string, specificPort int) (int, error) {
m.allocations[appName] = specificPort
return specificPort, nil
}
for port := m.startPort; port <= m.endPort; port++ {
rangeSize := m.endPort - m.startPort + 1
offsets := rand.Perm(rangeSize)
for _, offset := range offsets {
port := m.startPort + offset
if err := m.checkPortAvailable(port); err == nil {
if !m.isPortAllocatedInternal(port) {
m.allocations[appName] = port
@@ -48,10 +45,8 @@ func (m *Manager) GetPort(appName string, specificPort int) (int, error) {
}
}
}
return 0, fmt.Errorf("no available ports in range %d-%d", m.startPort, m.endPort)
}
func (m *Manager) isPortAllocatedInternal(port int) bool {
for _, p := range m.allocations {
if p == port {
@@ -60,16 +55,13 @@ func (m *Manager) isPortAllocatedInternal(port int) bool {
}
return false
}
func (m *Manager) checkPortAvailable(port int) error {
if port < m.startPort || port > m.endPort {
return fmt.Errorf("port %d is out of allowed range %d-%d", port, m.startPort, m.endPort)
}
if m.isPortAllocatedInternal(port) {
return fmt.Errorf("port %d is internally allocated", port)
}
addr := fmt.Sprintf("localhost:%d", port)
conn, err := net.Dial("tcp", addr)
if err != nil {

129
frontend/src/lib/api.ts
View File

@@ -5,11 +5,11 @@ import { token } from './auth';
const API_BASE = "http://localhost:8080";
export interface DeployResponse {
status: string;
app_name: string;
port: number;
url: string;
message: string;
status: string;
app_name: string;
port: number;
url: string;
message: string;
}
export interface AuthResponse {
@@ -33,6 +33,20 @@ export interface Deployment {
updated_at: string;
}
export interface Database {
ID: number;
CreatedAt: string;
UpdatedAt: string;
DeletedAt: string | null;
name: string;
type: string;
status: string;
owner_id: string;
size_mb: number;
container_id: string;
port: number;
}
export interface Project {
id: string;
name: string;
@@ -43,6 +57,9 @@ export interface Project {
webhook_secret: string;
git_token?: string;
runtime?: string;
build_command?: string;
start_command?: string;
install_command?: string;
}
export async function getProject(id: string): Promise<Project | null> {
@@ -126,6 +143,18 @@ export async function createProject(
}
}
export async function updateProject(id: string, data: Partial<Project>): Promise<Project | null> {
try {
return await fetchWithAuth(`/api/projects/${id}`, {
method: "PUT",
body: JSON.stringify(data),
});
} catch (e: any) {
toast.error(e.message);
return null;
}
}
export async function updateProjectEnv(id: string, envVars: Record<string, string>): Promise<boolean> {
try {
await fetchWithAuth(`/api/projects/${id}/env`, {
@@ -139,10 +168,11 @@ export async function updateProjectEnv(id: string, envVars: Record<string, strin
}
}
export async function redeployProject(id: string): Promise<boolean> {
export async function redeployProject(id: string, commit?: string): Promise<boolean> {
try {
await fetchWithAuth(`/api/projects/${id}/redeploy`, {
method: "POST",
body: JSON.stringify({ commit }),
});
return true;
} catch (e: any) {
@@ -240,6 +270,18 @@ export async function createDatabase(name: string, type: string = "sqlite") {
}
}
export async function deleteDatabase(id: string) {
try {
await fetchWithAuth(`/api/storage/databases/${id}`, {
method: "DELETE",
});
return true;
} catch (e: any) {
toast.error(e.message);
return false;
}
}
export async function getAdminUsers() {
try {
return await fetchWithAuth("/api/admin/users");
@@ -269,3 +311,78 @@ export async function getAdminStats() {
return null;
}
}
export async function getProfile() {
try {
return await fetchWithAuth("/api/user/");
} catch (e: any) {
console.error(e);
return null;
}
}
export async function regenerateAPIKey() {
try {
return await fetchWithAuth("/api/user/key", {
method: "POST",
});
} catch (e: any) {
toast.error(e.message);
return null;
}
}
export async function getDatabaseCredentials(id: string) {
try {
return await fetchWithAuth(`/api/storage/databases/${id}/credentials`);
} catch (e: any) {
console.error(e);
return null;
}
}
export async function updateDatabaseCredentials(id: string, username: string, password: string) {
try {
return await fetchWithAuth(`/api/storage/databases/${id}/credentials`, {
method: "PUT",
body: JSON.stringify({ username, password }),
});
} catch (e: any) {
toast.error(e.message);
return null;
}
}
export async function updateDatabase(id: string, port: number) {
try {
return await fetchWithAuth(`/api/storage/databases/${id}`, {
method: "PUT",
body: JSON.stringify({ port }),
});
} catch (e: any) {
toast.error(e.message);
return null;
}
}
export async function stopDatabase(id: string) {
try {
return await fetchWithAuth(`/api/storage/databases/${id}/stop`, {
method: "POST",
});
} catch (e: any) {
toast.error(e.message);
return null;
}
}
export async function restartDatabase(id: string) {
try {
return await fetchWithAuth(`/api/storage/databases/${id}/restart`, {
method: "POST",
});
} catch (e: any) {
toast.error(e.message);
return null;
}
}

16
frontend/src/lib/components/ui/tabs/index.ts Normal file
View File

@@ -0,0 +1,16 @@
import Root from "./tabs.svelte";
import Content from "./tabs-content.svelte";
import List from "./tabs-list.svelte";
import Trigger from "./tabs-trigger.svelte";
export {
Root,
Content,
List,
Trigger,
//
Root as Tabs,
Content as TabsContent,
List as TabsList,
Trigger as TabsTrigger,
};

17
frontend/src/lib/components/ui/tabs/tabs-content.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.ContentProps = $props();
</script>
<TabsPrimitive.Content
bind:ref
data-slot="tabs-content"
class={cn("flex-1 outline-none", className)}
{...restProps}
/>

20
frontend/src/lib/components/ui/tabs/tabs-list.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.ListProps = $props();
</script>
<TabsPrimitive.List
bind:ref
data-slot="tabs-list"
class={cn(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
className
)}
{...restProps}
/>

20
frontend/src/lib/components/ui/tabs/tabs-trigger.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.TriggerProps = $props();
</script>
<TabsPrimitive.Trigger
bind:ref
data-slot="tabs-trigger"
class={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...restProps}
/>

19
frontend/src/lib/components/ui/tabs/tabs.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
value = $bindable(""),
class: className,
...restProps
}: TabsPrimitive.RootProps = $props();
</script>
<TabsPrimitive.Root
bind:ref
bind:value
data-slot="tabs"
class={cn("flex flex-col gap-2", className)}
{...restProps}
/>

4
frontend/src/routes/+page.svelte
View File

@@ -539,7 +539,7 @@
</CardTitle>
<CardDescription class="flex items-center gap-1" >
<Github class="h-3 w-3" />
<a href={project.repo_url} target="_blank">{new URL(project.repo_url).pathname.slice(1)}</a>
<a class="underline" href={project.repo_url} target="_blank">{new URL(project.repo_url).pathname.slice(1)}</a>
</CardDescription>
</div>
<span
@@ -592,7 +592,7 @@
<span class="font-medium text-foreground truncate">
{latestDeployment
? new Date(
latestDeployment.CreatedAt,
latestDeployment.created_at,
).toLocaleDateString()
: "Never"}
</span>

94
frontend/src/routes/network/+page.svelte
View File

@@ -1,6 +1,11 @@
<script lang="ts">
import { onMount } from "svelte";
import { listProjects, type Project } from "$lib/api";
import {
listProjects,
listDatabases,
type Project,
type Database,
} from "$lib/api";
import { Button } from "$lib/components/ui/button";
import {
Card,
@@ -23,14 +28,20 @@
ExternalLink,
Globe,
Server,
Database as DatabaseIcon,
} from "@lucide/svelte";
let projects = $state<Project[]>([]);
let databases = $state<Database[]>([]);
let loading = $state(true);
onMount(async () => {
const res = await listProjects();
if (res) projects = res;
const [projRes, dbRes] = await Promise.all([
listProjects(),
listDatabases(),
]);
if (projRes) projects = projRes;
if (dbRes) databases = dbRes;
loading = false;
});
</script>
@@ -55,18 +66,24 @@
<CardHeader>
<CardTitle>Active Services</CardTitle>
<CardDescription>
Overview of deployed applications and their internal/external ports.
Overview of deployed applications and their
internal/external ports.
</CardDescription>
</CardHeader>
<CardContent>
{#if projects.length === 0}
{#if projects.length === 0 && databases.length === 0}
<div
class="flex flex-col items-center justify-center py-10 text-center"
>
<Network class="h-10 w-10 text-muted-foreground mb-4" />
<h3 class="text-lg font-medium">No services found</h3>
<Network
class="h-10 w-10 text-muted-foreground mb-4"
/>
<h3 class="text-lg font-medium">
No services found
</h3>
<p class="text-muted-foreground">
Deploy a project to populate the network map.
Deploy a project or create a database to
populate the network map.
</p>
</div>
{:else}
@@ -78,15 +95,21 @@
<TableHead>Port</TableHead>
<TableHead>URL</TableHead>
<TableHead>Status</TableHead>
<TableHead class="text-right">Action</TableHead>
<TableHead class="text-right"
>Action</TableHead
>
</TableRow>
</TableHeader>
<TableBody>
{#each projects as project}
<TableRow>
<TableCell class="font-medium">
<div class="flex items-center gap-2">
<Server class="h-4 w-4 text-muted-foreground" />
<div
class="flex items-center gap-2"
>
<Server
class="h-4 w-4 text-muted-foreground"
/>
<a
href={`/projects/${project.id}`}
class="hover:underline"
@@ -95,11 +118,15 @@
</a>
</div>
</TableCell>
<TableCell class="font-mono text-xs">localhost</TableCell>
<TableCell class="font-mono text-xs"
>localhost</TableCell
>
<TableCell class="font-mono text-xs"
>{project.port}</TableCell
>
<TableCell class="font-mono text-xs text-muted-foreground">
<TableCell
class="font-mono text-xs text-muted-foreground"
>
http://localhost:{project.port}
</TableCell>
<TableCell>
@@ -122,6 +149,47 @@
</TableCell>
</TableRow>
{/each}
{#each databases as db}
<TableRow>
<TableCell class="font-medium">
<div
class="flex items-center gap-2"
>
<DatabaseIcon
class="h-4 w-4 text-muted-foreground"
/>
<a
href="/storage"
class="hover:underline"
>
{db.name}
</a>
</div>
</TableCell>
<TableCell class="font-mono text-xs"
>localhost</TableCell
>
<TableCell class="font-mono text-xs"
>{db.port}</TableCell
>
<TableCell
class="font-mono text-xs text-muted-foreground"
>
{db.type}://localhost:{db.port}
</TableCell>
<TableCell>
<span
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold
bg-green-500/15 text-green-500 border-transparent capitalize"
>
{db.status}
</span>
</TableCell>
<TableCell class="text-right">
<!-- No external link action for now -->
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
{/if}

35
frontend/src/routes/projects/[id]/deployments/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import { page } from "$app/stores";
import { getProject, type Project } from "$lib/api";
import { getProject, type Project, redeployProject } from "$lib/api";
import { Button } from "$lib/components/ui/button";
import {
Card,
@@ -20,7 +20,10 @@
CheckCircle2,
XCircle,
AlertCircle,
Play,
RotateCcw,
} from "@lucide/svelte";
import { toast } from "svelte-sonner";
let project = $state<Project | null>(null);
let loading = $state(true);
@@ -69,6 +72,21 @@
return AlertCircle;
}
}
async function handleRedeploy(commit?: string) {
if (!project) return;
toast.info(commit ? `Redeploying commit ${commit.substring(0, 7)}...` : "Starting redeployment...");
const success = await redeployProject(project.id.toString(), commit);
if (success) {
toast.success("Redeployment started!");
// Refresh project data to show new deployment
setTimeout(async () => {
if (project) {
const res = await getProject(project.id);
if (res) project = res;
}
}, 1000);
}
}
</script>
{#if loading}
@@ -84,6 +102,9 @@
History of your application builds.
</p>
</div>
<Button onclick={() => handleRedeploy()}>
<Play class="mr-2 h-4 w-4" /> Redeploy
</Button>
</div>
<Card class="border-border/60">
@@ -130,6 +151,7 @@
<GitCommit class="h-3.5 w-3.5 text-muted-foreground" />
<span
class="bg-muted px-2 py-0.5 rounded-md border border-border/50 text-foreground/80 font-mono"
title={deployment.commit}
>
{deployment.commit === "HEAD"
? "HEAD"
@@ -178,6 +200,17 @@
>
<Terminal class="h-3.5 w-3.5" />
</Button>
{#if deployment.commit !== "HEAD" && deployment.commit !== "MANUAL" && deployment.commit !== "WEBHOOK"}
<Button
variant="ghost"
size="icon"
class="h-7 w-7"
onclick={() => handleRedeploy(deployment.commit)}
title="Redeploy this version"
>
<RotateCcw class="h-3.5 w-3.5" />
</Button>
{/if}
</div>
</div>
{/each}

367
frontend/src/routes/projects/[id]/settings/+page.svelte
View File

@@ -1,10 +1,22 @@
<script lang="ts">
import { onMount } from "svelte";
import { page } from "$app/stores";
import { getProject, type Project, updateProjectEnv } from "$lib/api";
import {
getProject,
type Project,
updateProjectEnv,
updateProject,
getSystemStatus,
} from "$lib/api";
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from "$lib/components/ui/select";
import {
Card,
CardContent,
@@ -28,22 +40,138 @@
let project = $state<Project | null>(null);
let loading = $state(true);
let showSecret = $state(false);
let systemStatus = $state<{ local_ip: string; public_ip: string } | null>(
null,
);
let tempEnvVars = $state<{ key: string; value: string }[]>([]);
let isDirty = $state(false);
let formLoading = $state(false);
let projectName = $state("");
let repoUrl = $state("");
let gitToken = $state("");
let runtime = $state("");
let installCmd = $state("");
let buildCmd = $state("");
let startCmd = $state("");
const runtimeConfig: Record<
string,
{ install: string; build: string; start: string }
> = {
nodejs: {
install: "npm install",
build: "npm run build",
start: "npm start",
},
bun: {
install: "bun install",
build: "bun run build",
start: "bun start",
},
python: {
install: "pip install -r requirements.txt",
build: "",
start: "python3 main.py",
},
go: {
install: "go mod download",
build: "go build -o main .",
start: "./main",
},
rust: {
install: "cargo fetch",
build: "cargo build --release",
start: "./target/release/main",
},
php: {
install: "composer install",
build: "",
start: "php -S 0.0.0.0:8080",
},
java: {
install: "mvn clean install",
build: "mvn package",
start: "java -jar target/app.jar",
},
static: {
install: "",
build: "",
start: "",
},
dockerfile: {
install: "",
build: "",
start: "",
},
};
let defaults = $derived(
runtimeConfig[runtime] || {
install: "npm install",
build: "npm run build",
start: "npm start",
},
);
onMount(async () => {
const id = $page.params.id;
if (id) {
const res = await getProject(id);
if (res) {
project = res;
initEnvVars();
}
const [projRes, sysRes] = await Promise.all([
id ? getProject(id) : null,
getSystemStatus(),
]);
if (projRes) {
project = projRes;
initFormData();
initEnvVars();
}
if (sysRes) {
systemStatus = sysRes;
}
loading = false;
});
function initFormData() {
if (!project) return;
projectName = project.name;
repoUrl = project.repo_url;
runtime = project.runtime || "nodejs";
installCmd = project.install_command || "";
buildCmd = project.build_command || "";
startCmd = project.start_command || "";
}
async function saveSettings() {
if (!project) return;
formLoading = true;
const res = await updateProject(project.id, {
name: projectName,
repo_url: repoUrl,
runtime,
install_command: installCmd,
build_command: buildCmd,
start_command: startCmd,
...(gitToken ? { git_token: gitToken } : {}),
});
formLoading = false;
if (res) {
project = res;
initFormData();
toast.success("Settings updated successfully");
}
}
function copyId() {
if (project) {
navigator.clipboard.writeText(project.id);
toast.success("Project ID copied");
}
}
function initEnvVars() {
if (project?.env_vars) {
tempEnvVars = project.env_vars.map((e) => ({
@@ -139,7 +267,10 @@
} else {
tempEnvVars = [
...tempEnvVars,
{ key: key.trim(), value: value.replace(/^["'](.*)["']$/, "$1") },
{
key: key.trim(),
value: value.replace(/^["'](.*)["']$/, "$1"),
},
];
}
}
@@ -156,6 +287,196 @@
</div>
{:else if project}
<div class="space-y-6 max-w-4xl">
<Card class="border-border/60">
<CardHeader>
<CardTitle class="text-xl font-bold"
>Git Configuration</CardTitle
>
<CardDescription>
Connect your project to a Git repository.
</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div class="grid gap-2">
<Label for="name">Project Name</Label>
<Input
id="name"
bind:value={projectName}
placeholder="my-awesome-project"
/>
</div>
<div class="grid gap-2">
<Label for="repo">Repository URL</Label>
<Input
id="repo"
bind:value={repoUrl}
placeholder="https://github.com/user/repo"
/>
</div>
<div class="grid gap-2">
<Label for="token">Git Token (Optional)</Label>
<Input
id="token"
type="password"
bind:value={gitToken}
placeholder="Start typing to update..."
/>
<p class="text-[0.8rem] text-muted-foreground">
Leave empty to keep the existing token.
</p>
</div>
</CardContent>
<CardFooter class="border-t px-4 flex justify-end">
<Button onclick={saveSettings} disabled={formLoading} size="sm">
{#if formLoading}
<Loader2 class="h-4 w-4 mr-2 animate-spin" /> Saving...
{:else}
<Save class="h-4 w-4 mr-2" /> Save Changes
{/if}
</Button>
</CardFooter>
</Card>
<Card class="border-border/60">
<CardHeader>
<CardTitle class="text-xl font-bold"
>Build & Output Settings</CardTitle
>
<CardDescription>
Configure how your application is built and run.
</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div class="grid gap-2">
<Label for="runtime">Runtime</Label>
<Select type="single" bind:value={runtime}>
<SelectTrigger class="w-full">
{runtime
? runtime.charAt(0).toUpperCase() +
runtime.slice(1)
: "Select a runtime"}
</SelectTrigger>
<SelectContent>
<SelectItem value="nodejs">Node.js</SelectItem>
<SelectItem value="bun">Bun</SelectItem>
<SelectItem value="python">Python</SelectItem>
<SelectItem value="go">Go</SelectItem>
<SelectItem value="rust">Rust</SelectItem>
<SelectItem value="php">PHP</SelectItem>
<SelectItem value="java">Java</SelectItem>
<SelectItem value="static">Static</SelectItem>
<SelectItem value="dockerfile"
>Dockerfile</SelectItem
>
</SelectContent>
</Select>
</div>
<div class="grid gap-2">
<Label for="install">Install Command</Label>
<Input
id="install"
bind:value={installCmd}
placeholder={defaults.install}
/>
</div>
<div class="grid gap-2">
<Label for="build">Build Command</Label>
<Input
id="build"
bind:value={buildCmd}
placeholder={defaults.build}
/>
</div>
<div class="grid gap-2">
<Label for="start">Start Command</Label>
<Input
id="start"
bind:value={startCmd}
placeholder={defaults.start}
/>
</div>
</CardContent>
<CardFooter class="border-t px-4 flex justify-end">
<Button onclick={saveSettings} disabled={formLoading} size="sm">
{#if formLoading}
<Loader2 class="h-4 w-4 mr-2 animate-spin" /> Saving...
{:else}
<Save class="h-4 w-4 mr-2" /> Save Changes
{/if}
</Button>
</CardFooter>
</Card>
<Card class="border-border/60">
<CardHeader>
<CardTitle class="text-xl font-bold">Networking</CardTitle>
<CardDescription>
Manage network settings for your deployment.
</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div class="grid gap-2">
<Label for="port">Internal Port</Label>
<Input
id="port"
value={project.port.toString()}
readonly
class="bg-muted font-mono"
/>
<p class="text-[0.8rem] text-muted-foreground">
This port is assigned by the system and cannot be
changed.
</p>
</div>
{#if systemStatus}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
<div class="grid gap-2">
<Label>Local Network URL</Label>
<div class="flex items-center gap-2">
<Input
readonly
value={`http://${systemStatus.local_ip}:${project.port}`}
class="bg-muted font-mono"
/>
<Button
variant="outline"
size="icon"
onclick={() =>
window.open(
`http://${systemStatus!.local_ip}:${project!.port}`,
"_blank",
)}
>
<Eye class="h-4 w-4" />
</Button>
</div>
</div>
<div class="grid gap-2">
<Label>Public Network URL</Label>
<div class="flex items-center gap-2">
<Input
readonly
value={`http://${systemStatus.public_ip}:${project.port}`}
class="bg-muted font-mono"
/>
<Button
variant="outline"
size="icon"
onclick={() =>
window.open(
`http://${systemStatus!.public_ip}:${project!.port}`,
"_blank",
)}
>
<Eye class="h-4 w-4" />
</Button>
</div>
</div>
</div>
{/if}
</CardContent>
</Card>
<Card class="border-border/60">
<CardHeader class="pb-4">
<div class="flex items-center justify-between">
@@ -163,11 +484,18 @@
<CardTitle class="text-xl font-bold"
>Environment Variables</CardTitle
>
<CardDescription class="mt-1 text-sm text-muted-foreground">
<CardDescription
class="mt-1 text-sm text-muted-foreground"
>
Configure runtime environment variables.
</CardDescription>
</div>
<Button variant="ghost" size="sm" onclick={toggleSecret} class="h-8">
<Button
variant="ghost"
size="sm"
onclick={toggleSecret}
class="h-8"
>
{#if showSecret}
<EyeOff class="h-4 w-4" />
{:else}
@@ -231,7 +559,11 @@
</div>
</CardContent>
<CardFooter class="border-t px-4 flex justify-end">
<Button onclick={saveEnvVars} disabled={!isDirty || loading} size="sm">
<Button
onclick={saveEnvVars}
disabled={!isDirty || loading}
size="sm"
>
{#if loading}
<Loader2 class="h-4 w-4 mr-2 animate-spin" /> Saving...
{:else}
@@ -245,7 +577,8 @@
<CardHeader>
<CardTitle class="text-lg">Webhook Integration</CardTitle>
<CardDescription class="mt-1.5">
Trigger deployments automatically when you push to your repository.
Trigger deployments automatically when you push to your
repository.
</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
@@ -257,7 +590,11 @@
value={`http://localhost:8080/projects/${project.id}/webhook/${project.webhook_secret}`}
class="bg-muted font-mono text-xs"
/>
<Button variant="outline" size="icon" onclick={copyWebhook}>
<Button
variant="outline"
size="icon"
onclick={copyWebhook}
>
<Copy class="h-4 w-4" />
</Button>
</div>
@@ -267,7 +604,9 @@
<Card class="border-destructive/50 bg-destructive/5">
<CardHeader>
<CardTitle class="text-destructive text-lg">Danger Zone</CardTitle>
<CardTitle class="text-destructive text-lg"
>Danger Zone</CardTitle
>
</CardHeader>
<CardContent>
<div class="flex items-center justify-between">

144
frontend/src/routes/settings/session/+page.svelte Normal file
View File

@@ -0,0 +1,144 @@
<script lang="ts">
import { onMount } from "svelte";
import { getProfile, regenerateAPIKey } from "$lib/api";
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
CardFooter,
} from "$lib/components/ui/card";
import { Loader2, Copy, RefreshCw, Terminal } from "@lucide/svelte";
import { toast } from "svelte-sonner";
let loading = $state(true);
let apiKey = $state("");
let regenerating = $state(false);
onMount(async () => {
const profile = await getProfile();
if (profile) {
apiKey = profile.api_key;
}
loading = false;
});
async function handleRegenerate() {
if (
!confirm("Are you sure? This will invalidate your current API key.")
)
return;
regenerating = true;
const res = await regenerateAPIKey();
regenerating = false;
if (res && res.api_key) {
apiKey = res.api_key;
toast.success("API Key regenerated successfully");
}
}
function copyKey() {
navigator.clipboard.writeText(apiKey);
toast.success("API Key copied to clipboard");
}
</script>
<div class="container mx-auto py-10 px-4 max-w-4xl">
<div class="space-y-6">
<div>
<h2 class="text-3xl font-bold tracking-tight">
Session & API Access
</h2>
<p class="text-muted-foreground">
Manage your API keys for CLI and external access.
</p>
</div>
{#if loading}
<div class="flex justify-center p-10">
<Loader2 class="h-8 w-8 animate-spin" />
</div>
{:else}
<Card class="border-border/60">
<CardHeader>
<CardTitle>Personal Access Token</CardTitle>
<CardDescription>
Use this token to authenticate with the Clickploy CLI
and API. Treat this token like a password.
</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div class="space-y-2">
<Label>Your API Key</Label>
<div class="flex items-center gap-2">
<Input
readonly
value={apiKey}
class="font-mono bg-muted"
type="password"
/>
<Button
variant="outline"
size="icon"
onclick={copyKey}
>
<Copy class="h-4 w-4" />
</Button>
</div>
</div>
<div
class="bg-muted/50 p-4 rounded-lg space-y-2 border border-border/50"
>
<div
class="flex items-center gap-2 text-sm font-medium"
>
<Terminal class="h-4 w-4" />
CLI Usage
</div>
<div
class="text-xs font-mono bg-background p-2 rounded border border-border/50"
>
clickploy login --token {apiKey}
</div>
<p class="text-xs text-muted-foreground">
Or use it in the Authorization header for API
requests:
</p>
<div
class="text-xs font-mono bg-background p-2 rounded border border-border/50"
>
Authorization: Bearer {apiKey}
</div>
</div>
</CardContent>
<CardFooter
class="border-t px-6 py-4 flex justify-between items-center bg-muted/40"
>
<span class="text-xs text-muted-foreground">
Last generated: {new Date().toLocaleDateString()}
</span>
<Button
variant="secondary"
size="sm"
onclick={handleRegenerate}
disabled={regenerating}
>
{#if regenerating}
<Loader2 class="h-3 w-3 mr-2 animate-spin" />
{:else}
<RefreshCw class="h-3 w-3 mr-2" />
{/if}
Regenerate Token
</Button>
</CardFooter>
</Card>
{/if}
</div>
</div>

826
frontend/src/routes/storage/+page.svelte
View File

@@ -5,7 +5,21 @@
Plus,
Server,
AlertCircle,
Trash,
Copy,
Activity,
Calendar,
Cloud,
Box,
Check,
Power,
Play,
RotateCw,
} from "@lucide/svelte";
import * as Tabs from "$lib/components/ui/tabs";
import * as Dialog from "$lib/components/ui/dialog";
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
import { Button } from "$lib/components/ui/button";
import {
Card,
@@ -13,10 +27,23 @@
CardHeader,
CardTitle,
CardDescription,
CardFooter,
} from "$lib/components/ui/card";
import { Progress } from "$lib/components/ui/progress";
import { Badge } from "$lib/components/ui/badge";
import { getStorageStats, listDatabases, createDatabase } from "$lib/api";
import {
getStorageStats,
listDatabases,
createDatabase,
deleteDatabase,
getDatabaseCredentials,
updateDatabaseCredentials,
updateDatabase,
stopDatabase,
restartDatabase,
type Database as DatabaseType,
} from "$lib/api";
import { onMount } from "svelte";
import { toast } from "svelte-sonner";
@@ -26,27 +53,76 @@
totalStorage > 0 ? (usedStorage / totalStorage) * 100 : 0,
);
let userDatabases = $state<any[]>([]);
let userDatabases = $state<DatabaseType[]>([]);
let loading = $state(true);
// Credentials Dialog State (Creation)
let showCredsDialog = $state(false);
let newCreds = $state({
uri: "",
username: "",
password: "",
port: 0,
name: "",
host: "localhost",
});
// Management Dialog State
let showManageDialog = $state(false);
let manageDb = $state<DatabaseType | null>(null);
let manageCreds = $state({
username: "",
password: "",
uri: "",
public_uri: "",
loading: true,
port: 0,
});
let isUpdatingCreds = $state(false);
let isPowerAction = $state(false);
// Creation Dialog State
let showCreateDialog = $state(false);
let selectedDbType = $state("");
let newDbName = $state("");
let isCreating = $state(false);
const availableTypes = [
{
name: "SQLite",
description: "Embedded, serverless database engine.",
type: "sqlite",
status: "Available",
icon: Box,
color: "text-blue-500",
bgColor: "bg-blue-500/10",
},
{
name: "MongoDB",
description: "NoSQL document database.",
type: "mongodb",
status: "Available",
icon: Database,
color: "text-green-500",
bgColor: "bg-green-500/10",
},
{
name: "PostgreSQL",
description: "Advanced open source relational database.",
type: "postgres",
status: "Coming Soon",
icon: Cloud,
color: "text-indigo-500",
bgColor: "bg-indigo-500/10",
},
{
name: "Redis",
description: "In-memory data structure store.",
type: "redis",
status: "Coming Soon",
icon: Activity,
color: "text-red-500",
bgColor: "bg-red-500/10",
},
];
@@ -65,129 +141,693 @@
loading = false;
}
async function handleCreate(type: string) {
const name = prompt("Enter database name:");
if (!name) return;
function initiateCreate(type: string) {
selectedDbType = type;
newDbName = "";
showCreateDialog = true;
}
const res = await createDatabase(name, type);
if (res) {
toast.success("Database created successfully!");
async function performCreate() {
if (!newDbName.trim()) return;
isCreating = true;
try {
const res: any = await createDatabase(newDbName, selectedDbType);
showCreateDialog = false; // Close name input dialog
if (res) {
toast.success("Database created successfully!");
if (res.uri) {
newCreds = {
uri: res.uri,
username: res.username,
password: res.password,
port: res.database.port,
name: res.database.name,
host: window.location.hostname,
};
// Handle localhost vs public IP (simplified logic)
if (
newCreds.host !== "localhost" &&
newCreds.host !== "127.0.0.1"
) {
newCreds.uri = newCreds.uri.replace(
"@localhost",
`@${newCreds.host}`,
);
}
showCredsDialog = true;
}
loadData();
}
} catch (e) {
toast.error("Failed to create database");
console.error(e);
} finally {
isCreating = false;
}
}
function copyToClipboard(text: string) {
navigator.clipboard.writeText(text);
toast.success("Copied to clipboard");
}
async function handleDelete(id: number) {
if (
!confirm(
"Are you sure you want to delete this database? This action cannot be undone.",
)
)
return;
const success = await deleteDatabase(id.toString());
if (success) {
toast.success("Database deleted successfully!");
loadData();
}
}
async function handleCardClick(db: DatabaseType) {
if (db.type !== "mongodb") return; // Only Mongo supported for now for rich management
manageDb = db;
showManageDialog = true;
manageCreds = { ...manageCreds, loading: true };
const creds = await getDatabaseCredentials(db.ID.toString());
if (creds) {
manageCreds = {
username: creds.username,
password: creds.password,
uri: creds.uri,
public_uri: creds.public_uri,
loading: false,
port: db.port,
};
} else {
manageCreds.loading = false;
toast.error("Failed to load credentials");
}
}
async function performUpdateCreds() {
if (!manageDb) return;
isUpdatingCreds = true;
try {
// Update Port if changed
if (manageCreds.port !== manageDb.port) {
const res = await updateDatabase(
manageDb.ID.toString(),
Number(manageCreds.port),
);
if (res) {
toast.success("Port updated successfully!");
await loadData();
manageDb =
userDatabases.find((d) => d.ID === manageDb!.ID) ||
manageDb;
}
}
// Update Credentials
const success = await updateDatabaseCredentials(
manageDb.ID.toString(),
manageCreds.username,
manageCreds.password,
);
if (success) {
toast.success("Credentials updated successfully!");
const creds = await getDatabaseCredentials(
manageDb.ID.toString(),
);
if (creds) {
manageCreds.uri = creds.uri;
}
}
} catch (e) {
console.error(e);
} finally {
isUpdatingCreds = false;
}
}
async function performStopDatabase() {
if (!manageDb) return;
isPowerAction = true;
const res = await stopDatabase(manageDb.ID.toString());
if (res) {
toast.success("Database stopped successfully");
manageDb.status = "stopped";
// Update the list
userDatabases = userDatabases.map((d) =>
d.ID === manageDb?.ID ? { ...d, status: "stopped" } : d,
);
}
isPowerAction = false;
}
async function performRestartDatabase() {
if (!manageDb) return;
isPowerAction = true;
const res = await restartDatabase(manageDb.ID.toString());
if (res) {
toast.success("Database restarted successfully");
manageDb.status = "running";
// Update the list
userDatabases = userDatabases.map((d) =>
d.ID === manageDb?.ID ? { ...d, status: "running" } : d,
);
}
isPowerAction = false;
}
onMount(loadData);
</script>
<div class="container mx-auto py-10 px-4">
<div class="mb-8 flex items-center justify-between">
<div class="container mx-auto py-8 px-4 max-w-7xl">
<div
class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4"
>
<div>
<h1 class="text-3xl font-bold tracking-tight">Storage</h1>
<p class="text-muted-foreground">
Manage databases and view storage usage.
<h1 class="text-3xl font-bold tracking-tight">Databases</h1>
<p class="text-muted-foreground mt-1">
Manage your database instances and storage volume.
</p>
</div>
<Button>
<Plus class="mr-2 h-4 w-4" /> Create Database
</Button>
</div>
<div class="grid gap-6 md:grid-cols-3 mb-8">
<Card class="md:col-span-3">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<HardDrive class="h-5 w-5" /> Storage Usage
<div class="grid gap-6 md:grid-cols-3 mb-10">
<Card
class="md:col-span-3 overflow-hidden border-l-4 border-l-primary/50"
>
<CardHeader class="pb-2">
<CardTitle class="flex items-center gap-2 text-lg">
<HardDrive class="h-5 w-5 text-primary" /> Storage Volume
</CardTitle>
<CardDescription>
Total disk space used on the host machine.
Total disk space usage across all your deployments and
databases.
</CardDescription>
</CardHeader>
<CardContent>
<div class="space-y-4">
<div class="flex items-center justify-between text-sm">
<span class="font-medium"
>{(usedStorage / 1024).toFixed(2)} GB used</span
>
<span class="text-muted-foreground"
>{(totalStorage / 1024).toFixed(2)} GB total</span
<div class="flex items-end justify-between">
<div>
<span class="text-2xl font-bold"
>{(usedStorage / 1024).toFixed(2)} GB</span
>
<span class="text-sm text-muted-foreground ml-1"
>used of {(totalStorage / 1024).toFixed(2)} GB</span
>
</div>
<span class="font-medium text-sm text-muted-foreground"
>{usagePercent.toFixed(1)}%</span
>
</div>
<Progress value={usagePercent} class="h-2" />
<p class="text-xs text-muted-foreground">
You are using {usagePercent.toFixed(1)}% of available storage.
</p>
<Progress value={usagePercent} class="h-2.5 w-full" />
</div>
</CardContent>
</Card>
</div>
<h2 class="text-xl font-semibold tracking-tight mb-4">Your Databases</h2>
{#if userDatabases.length === 0}
<div
class="rounded-lg border border-dashed p-8 text-center text-muted-foreground mb-8"
>
No databases created yet.
</div>
{:else}
<div class="grid gap-4 mb-8">
{#each userDatabases as db}
<div
class="flex items-center justify-between rounded-lg border p-4 bg-muted/20"
>
<div class="flex items-center gap-4">
<div class="rounded-full bg-blue-500/10 p-2">
<Database class="h-6 w-6 text-blue-500" />
</div>
<div>
<h3 class="font-semibold">{db.name}</h3>
<p class="text-sm text-muted-foreground uppercase">
{db.type} • {new Date(db.CreatedAt).toLocaleDateString()}
</p>
</div>
</div>
<span
class="text-xs font-medium px-2.5 py-0.5 rounded-full bg-green-500/15 text-green-500"
>
{db.status}
</span>
</div>
{/each}
</div>
{/if}
<h2 class="text-xl font-semibold tracking-tight mb-4">Create New</h2>
<div class="grid gap-4">
{#each availableTypes as db}
<div
class="flex items-center justify-between rounded-lg border p-4 hover:bg-muted/50 transition-colors"
<div class="space-y-6">
<div>
<h2
class="text-xl font-semibold tracking-tight mb-4 flex items-center gap-2"
>
<div class="flex items-center gap-4">
<div class="rounded-full bg-primary/10 p-2">
<Server class="h-6 w-6 text-primary" />
</div>
<div>
<h3 class="font-semibold">{db.name}</h3>
<p class="text-sm text-muted-foreground">{db.description}</p>
</div>
<Server class="w-5 h-5 text-muted-foreground" />
Active Databases
</h2>
{#if loading}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{#each Array(3) as _}
<div
class="h-32 rounded-lg bg-muted/20 animate-pulse"
></div>
{/each}
</div>
<div class="flex items-center gap-4">
<span
class="text-xs font-medium px-2.5 py-0.5 rounded-full {db.status ===
'Available'
? 'bg-green-500/15 text-green-500'
: 'bg-yellow-500/15 text-yellow-500'}"
{:else if userDatabases.length === 0}
<div
class="rounded-xl border border-dashed p-10 text-center bg-muted/10"
>
<div
class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted"
>
{db.status}
</span>
<Database class="h-6 w-6 text-muted-foreground" />
</div>
<h3 class="mt-4 text-lg font-semibold">No databases yet</h3>
<p class="mb-4 text-sm text-muted-foreground">
Create your first database to get started.
</p>
</div>
{:else}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{#each userDatabases as db}
<button
class="flex items-center justify-between p-4 rounded-xl border bg-card hover:shadow-md transition-all group text-left relative overflow-hidden"
onclick={() => handleCardClick(db)}
disabled={db.type !== "mongodb"}
>
<div class="flex items-center gap-4">
<div
class={`rounded-full p-2.5 ${
db.type === "sqlite"
? "bg-blue-500/10"
: db.type === "mongodb"
? "bg-green-500/10"
: "bg-muted"
}`}
>
{#if db.type === "sqlite"}
<Box class="h-5 w-5 text-blue-500" />
{:else if db.type === "mongodb"}
<Database
class="h-5 w-5 text-green-500"
/>
{:else}
<Database
class="h-5 w-5 text-muted-foreground"
/>
{/if}
</div>
<div>
<h3 class="font-semibold text-base">
{db.name}
</h3>
<div
class="flex items-center gap-2 text-sm text-muted-foreground"
>
<span class="capitalize">{db.type}</span
>
<span>•</span>
<div class="flex items-center gap-1.5">
<div
class={`h-2 w-2 rounded-full ${db.status === "running" || db.status === "Available" ? "bg-green-500" : "bg-yellow-500"}`}
></div>
<span class="capitalize"
>{db.status}</span
>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-4">
{#if db.port > 0}
<Badge
variant="secondary"
class="font-mono"
>
:{db.port}
</Badge>
{/if}
<Button
variant="ghost"
size="icon"
class="text-muted-foreground hover:text-red-500 z-10"
onclick={(e) => {
e.stopPropagation();
handleDelete(db.ID);
}}
>
<Trash class="h-4 w-4" />
</Button>
</div>
</button>
{/each}
</div>
{/if}
</div>
<div class="pt-8">
<h2
class="text-xl font-semibold tracking-tight mb-4 flex items-center gap-2"
>
<Plus class="w-5 h-5 text-muted-foreground" />
Create New Database
</h2>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{#each availableTypes as db}
<button
class="flex flex-col items-start text-left rounded-xl border p-4 hover:bg-muted/30 hover:border-primary/50 transition-all disabled:opacity-50 disabled:pointer-events-none group"
disabled={db.status !== "Available"}
onclick={() => initiateCreate(db.type)}
>
<div
class="flex w-full items-center justify-between mb-3"
>
<div class={`rounded-full p-2.5 ${db.bgColor}`}>
<db.icon class={`h-5 w-5 ${db.color}`} />
</div>
{#if db.status === "Available"}
<Badge
variant="secondary"
class="bg-primary/10 text-primary hover:bg-primary/20"
>Available</Badge
>
{:else}
<Badge
variant="outline"
class="text-muted-foreground">Soon</Badge
>
{/if}
</div>
<h3 class="font-semibold text-lg">{db.name}</h3>
<p
class="text-sm text-muted-foreground mt-1 leading-snug"
>
{db.description}
</p>
</button>
{/each}
</div>
</div>
</div>
</div>
<!-- Creation Dialog -->
<Dialog.Root bind:open={showCreateDialog}>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Header>
<Dialog.Title
>Create {availableTypes.find((t) => t.type === selectedDbType)
?.name} Database</Dialog.Title
>
<Dialog.Description>
Enter a unique name for your new database instance.
</Dialog.Description>
</Dialog.Header>
<div class="grid gap-4 py-4">
<div class="grid grid-cols-4 items-center gap-4">
<Label for="name" class="text-right">Name</Label>
<Input
id="name"
bind:value={newDbName}
placeholder="my-database-1"
class="col-span-3"
autofocus
/>
</div>
</div>
<Dialog.Footer>
<Button variant="outline" onclick={() => (showCreateDialog = false)}
>Cancel</Button
>
<Button
onclick={performCreate}
disabled={isCreating || !newDbName.trim()}
>
{isCreating ? "Creating..." : "Create Database"}
</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
<!-- Credentials Dialog -->
<Dialog.Root bind:open={showCredsDialog}>
<Dialog.Content class="sm:max-w-md">
<Dialog.Header>
<Dialog.Title class="flex items-center gap-2">
<Check class="h-5 w-5 text-green-500" /> Database Created
</Dialog.Title>
<Dialog.Description>
Your database is ready. These variables are only shown once, so
please copy them now.
</Dialog.Description>
</Dialog.Header>
<div class="flex flex-col space-y-4 py-4">
<div class="space-y-2">
<Label>Connection URI</Label>
<div class="flex items-center gap-2">
<Input
readonly
value={newCreds.uri}
class="font-mono bg-muted text-xs"
/>
<Button
variant="outline"
disabled={db.status !== "Available"}
onclick={() => handleCreate(db.type)}
size="icon"
onclick={() => copyToClipboard(newCreds.uri)}
>
Create
<Copy class="h-4 w-4" />
</Button>
</div>
</div>
{/each}
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<Label>Username</Label>
<div class="flex items-center gap-2">
<Input
readonly
value={newCreds.username}
class="font-mono bg-muted text-xs"
/>
<Button
variant="outline"
size="icon"
onclick={() => copyToClipboard(newCreds.username)}
>
<Copy class="h-4 w-4" />
</Button>
</div>
</div>
<div class="space-y-2">
<Label>Password</Label>
<div class="flex items-center gap-2">
<Input
readonly
value={newCreds.password}
type="password"
class="font-mono bg-muted text-xs"
/>
<Button
variant="outline"
size="icon"
onclick={() => copyToClipboard(newCreds.password)}
>
<Copy class="h-4 w-4" />
</Button>
</div>
</div>
</div>
<div
class="rounded-md bg-yellow-500/10 p-4 border border-yellow-500/20"
>
<div class="flex items-start gap-4">
<AlertCircle class="h-5 w-5 text-yellow-500 mt-0.5" />
<div class="space-y-1">
<p class="text-sm font-medium text-yellow-500">
Important
</p>
<p
class="text-sm text-yellow-600/90 dark:text-yellow-500/90"
>
This database is accessible via port <span
class="font-mono font-bold"
>{newCreds.port}</span
>. Make sure to allow this port in your firewall if
accessing externally.
</p>
</div>
</div>
</div>
</div>
<Dialog.Footer>
<Button onclick={() => (showCredsDialog = false)}>Done</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
<!-- Management Dialog -->
<Dialog.Root bind:open={showManageDialog}>
<Dialog.Content class="sm:max-w-[600px]">
<Dialog.Header>
<Dialog.Title class="flex items-center gap-2 text-xl">
<Database class="h-5 w-5 text-primary" /> Manage {manageDb?.name}
</Dialog.Title>
<Dialog.Description>
Configure connection details, credentials, and instance power
state.
</Dialog.Description>
</Dialog.Header>
{#if manageCreds.loading}
<div class="flex items-center justify-center py-12">
<div
class="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"
></div>
</div>
{:else}
<Tabs.Root value="connection" class="w-full">
<Tabs.List class="grid w-full grid-cols-2">
<Tabs.Trigger value="connection">Connection</Tabs.Trigger>
<Tabs.Trigger value="settings"
>Settings & Danger</Tabs.Trigger
>
</Tabs.List>
<Tabs.Content value="connection" class="space-y-4 py-4">
<div
class="rounded-lg border bg-card text-card-foreground shadow-sm p-6 space-y-6"
>
<div class="flex items-center justify-between">
<div class="space-y-1">
<h3 class="font-medium leading-none">Status</h3>
<p class="text-sm text-muted-foreground">
Current state of the database container.
</p>
</div>
<Badge
variant={manageDb?.status === "running"
? "default"
: "secondary"}
class={`${manageDb?.status === "running" ? "bg-green-500 hover:bg-green-600" : ""}`}
>
{manageDb?.status}
</Badge>
</div>
<div class="space-y-2">
<Label>Connection string</Label>
<div class="relative">
<Input
readonly
value={manageCreds.uri}
class="pr-10 font-mono text-sm"
/>
<Button
variant="ghost"
size="icon"
class="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
onclick={() =>
copyToClipboard(manageCreds.uri)}
>
<Copy class="h-4 w-4" />
</Button>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<Label>Host</Label>
<div
class="p-2 rounded-md border bg-muted font-mono text-sm"
>
localhost
</div>
</div>
<div class="space-y-2">
<Label>Port</Label>
<Input
type="number"
class="font-mono text-sm"
bind:value={manageCreds.port}
/>
</div>
</div>
</div>
<div class="flex justify-end">
<Button
onclick={performUpdateCreds}
disabled={isUpdatingCreds}
>
{isUpdatingCreds
? "Saving Changes..."
: "Save Changes"}
</Button>
</div>
</Tabs.Content>
<Tabs.Content value="settings" class="space-y-4 py-4">
<div class="rounded-lg border p-4 space-y-4">
<h3 class="font-medium text-sm">Credentials</h3>
<div class="grid gap-4">
<div class="grid gap-2">
<Label>Username</Label>
<Input
bind:value={manageCreds.username}
class="font-mono"
/>
</div>
<div class="grid gap-2">
<Label>Password</Label>
<div class="relative">
<Input
bind:value={manageCreds.password}
type="text"
class="pr-10 font-mono"
/>
<Button
variant="ghost"
size="icon"
class="absolute right-0 top-0 h-full px-3"
onclick={() =>
copyToClipboard(
manageCreds.password,
)}
>
<Copy class="h-4 w-4" />
</Button>
</div>
</div>
<Button
onclick={performUpdateCreds}
disabled={isUpdatingCreds}
variant="default"
>
Update Credentials
</Button>
</div>
</div>
<div
class="rounded-lg border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-950/10 p-4 space-y-4"
>
<div>
<h3
class="font-medium text-sm text-red-600 dark:text-red-400"
>
Power Actions
</h3>
<p
class="text-sm text-red-600/70 dark:text-red-400/70"
>
Manage the running state of your database.
</p>
</div>
<div class="flex gap-2">
<Button
variant="outline"
class="border-red-200 hover:bg-red-100 hover:text-red-600 dark:border-red-900 dark:hover:bg-red-900/30"
disabled={isPowerAction ||
manageDb?.status === "stopped"}
onclick={performStopDatabase}
>
<Power class="h-4 w-4 mr-2" />
Stop
</Button>
<Button
variant="outline"
class="border-red-200 hover:bg-red-100 hover:text-red-600 dark:border-red-900 dark:hover:bg-red-900/30"
disabled={isPowerAction}
onclick={performRestartDatabase}
>
{#if manageDb?.status === "stopped"}
<Play class="h-4 w-4 mr-2" /> Start
{:else}
<RotateCw class="h-4 w-4 mr-2" /> Restart
{/if}
</Button>
</div>
</div>
</Tabs.Content>
</Tabs.Root>
{/if}
</Dialog.Content>
</Dialog.Root>