Merge pull request #582 from coollabsio/next

v3.9.0

CONTRIBUTION_NEW.md

@@ -0,0 +1,108 @@
+---
+head:
+  - - meta
+    - name: description
+      content: Coolify - Databases
+  - - meta
+    - name: keywords
+      content: databases coollabs coolify 
+  - - meta
+    - name: twitter:card
+      content: summary_large_image
+  - - meta
+    - name: twitter:site
+      content: '@andrasbacsai'
+  - - meta
+    - name: twitter:title
+      content: Coolify
+  - - meta
+    - name: twitter:description
+      content: An open-source & self-hostable Heroku / Netlify alternative.
+  - - meta
+    - name: twitter:image
+      content: https://cdn.coollabs.io/assets/coollabs/og-image-databases.png
+  - - meta
+    - property: og:type
+      content: website
+  - - meta
+    - property: og:url
+      content: https://coolify.io
+  - - meta
+    - property: og:title
+      content: Coolify
+  - - meta
+    - property: og:description
+      content: An open-source & self-hostable Heroku / Netlify alternative.
+  - - meta
+    - property: og:site_name
+      content: Coolify
+  - - meta
+    - property: og:image
+      content: https://cdn.coollabs.io/assets/coollabs/og-image-databases.png
+---
+# Contribution
+
+First, thanks for considering to contribute to my project. It really means a lot! :)
+
+You can ask for guidance anytime on our Discord server in the #contribution channel.
+
+## Setup your development environment
+### Github codespaces
+
+If you have github codespaces enabled then you can just create a codespace and run `pnpm dev` to run your the dev environment. All the required dependencies and packages has been configured for you already.
+
+### Gitpod
+
+If you have a [Gitpod](https://gitpod.io), you can just create a workspace from this repository, run `pnpm install && pnpm db:push && pnpm db:seed` and then `pnpm dev`. All the required dependencies and packages has been configured for you already.
+
+### Local Machine
+> At the moment, Coolify `doesn't support Windows`. You must use `Linux` or `MacOS` or consider using Gitpod or Github Codespaces.
+
+- Due to the lock file, this repository is best with [pnpm](https://pnpm.io). I recommend you try and use `pnpm` because it is cool and efficient!
+
+- You need to have [Docker Engine](https://docs.docker.com/engine/install/) installed locally.
+- You need to have [Docker Compose Plugin](https://docs.docker.com/compose/install/compose-plugin/) installed locally.
+- You need to have [GIT LFS Support](https://git-lfs.github.com/) installed locally.
+
+Optional:
+- To test Heroku buildpacks, you need [pack](https://github.com/buildpacks/pack) binary installed locally.
+
+### Inside a Docker container
+`WIP`
+
+## Setup Coolify
+- Copy `apps/api/.env.template` to `apps/api/.env.template` and set the `COOLIFY_APP_ID` environment variable to something cool.
+- `pnpm install` to install dependencies.
+- `pnpm db:push` to o create a local SQlite database.
+
+   This will apply all migrations at `db/dev.db`.
+
+- `pnpm db:seed` seed the database.
+- `pnpm dev` start coding.
+
+## Technical skills required
+
+- **Languages**: Node.js / Javascript / Typescript
+- **Framework JS/TS**: [SvelteKit](https://kit.svelte.dev/) & [Fastify](https://www.fastify.io/)
+- **Database ORM**: [Prisma.io](https://www.prisma.io/)
+- **Docker Engine API**
+
+## Add a new service
+### Which service is eligable to add to Coolify?
+The following statements needs to be true:
+
+- Self-hostable
+- Open-source
+- Maintained (I do not want to add software full of bugs)
+
+### Create Prisma / Database schema for the new service.
+All data that needs to be persist for a service should be saved to the database in `cleartext` or `encrypted`.
+
+very password/api key/passphrase needs to be encrypted. If you are not sure, whether it should be encrypted or not, just encrypt it.
+
+Update Prisma schema in [src/api/prisma/schema.prisma](https://github.com/coollabsio/coolify/blob/main/apps/api/prisma/schema.prisma).
+
+- Add new model with the new service name.
+- Make a relationship with `Service` model.
+- In the `Service` model, the name of the new field should be with low-capital.
+- If the service needs a database, define a `publicPort` field to be able to make it's database public, example field name in case of PostgreSQL: `postgresqlPublicPort`. It should be a optional field.

Dockerfile

@@ -1,7 +1,7 @@
-FROM node:18-alpine3.16 as build
+FROM node:18-slim as build
 WORKDIR /app
 
-RUN apk add --no-cache curl
+RUN apt update && apt -y install curl
 RUN curl -sL https://unpkg.com/@pnpm/self-installer | node
 
 COPY . .
@@ -9,21 +9,12 @@ RUN pnpm install
 RUN pnpm build
 
 # Production build
-FROM node:18-alpine3.16
+FROM node:18-slim
 WORKDIR /app
 ENV NODE_ENV production
 ARG TARGETPLATFORM
 
-# ENV PRISMA_QUERY_ENGINE_BINARY=/app/prisma-engines/query-engine \
-#   PRISMA_MIGRATION_ENGINE_BINARY=/app/prisma-engines/migration-engine \
-#   PRISMA_INTROSPECTION_ENGINE_BINARY=/app/prisma-engines/introspection-engine \
-#   PRISMA_FMT_BINARY=/app/prisma-engines/prisma-fmt \
-#   PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
-#   PRISMA_CLIENT_ENGINE_TYPE=binary
-
-# COPY --from=coollabsio/prisma-engine:3.15 /prisma-engines/query-engine /prisma-engines/migration-engine /prisma-engines/introspection-engine /prisma-engines/prisma-fmt /app/prisma-engines/
-
-RUN apk add --no-cache git git-lfs openssh-client curl jq cmake sqlite openssl psmisc
+RUN apt update && apt -y install git git-lfs openssh-client curl jq cmake sqlite3 openssl psmisc python3 && apt-get clean autoclean && apt-get autoremove --yes && rm -rf /var/lib/{apt,dpkg,cache,log}/
 RUN curl -sL https://unpkg.com/@pnpm/self-installer | node
 
 RUN mkdir -p ~/.docker/cli-plugins/

apps/api/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@breejs/ts-worker": "2.0.0",
-    "@fastify/autoload": "5.2.0",
+    "@fastify/autoload": "5.3.1",
     "@fastify/cookie": "8.1.0",
     "@fastify/cors": "8.1.0",
     "@fastify/env": "4.1.0",
@@ -23,7 +23,7 @@
     "@fastify/static": "6.5.0",
     "@iarna/toml": "2.2.5",
     "@ladjs/graceful": "3.0.2",
-    "@prisma/client": "3.15.2",
+    "@prisma/client": "4.3.1",
     "axios": "0.27.2",
     "bcryptjs": "2.4.3",
     "bree": "9.1.2",
@@ -37,7 +37,7 @@
     "fastify": "4.5.3",
     "fastify-plugin": "4.2.1",
     "generate-password": "1.7.0",
-    "got": "12.3.1",
+    "got": "12.4.1",
     "is-ip": "5.0.0",
     "is-port-reachable": "4.0.0",
     "js-yaml": "4.1.0",
@@ -52,20 +52,20 @@
     "unique-names-generator": "4.7.1"
   },
   "devDependencies": {
-    "@types/node": "18.7.13",
+    "@types/node": "18.7.15",
     "@types/node-os-utils": "1.3.0",
-    "@typescript-eslint/eslint-plugin": "5.35.1",
-    "@typescript-eslint/parser": "5.35.1",
-    "esbuild": "0.15.5",
+    "@typescript-eslint/eslint-plugin": "5.36.2",
+    "@typescript-eslint/parser": "5.36.2",
+    "esbuild": "0.15.7",
     "eslint": "8.23.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
     "nodemon": "2.0.19",
     "prettier": "2.7.1",
-    "prisma": "3.15.2",
+    "prisma": "4.3.1",
     "rimraf": "3.0.2",
     "tsconfig-paths": "4.1.0",
-    "typescript": "4.7.4"
+    "typescript": "4.8.2"
   },
   "prisma": {
     "seed": "node prisma/seed.js"

apps/api/prisma/migrations/20220905062318_database_branching/migration.sql

@@ -0,0 +1,22 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_ApplicationSettings" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT NOT NULL,
+    "dualCerts" BOOLEAN NOT NULL DEFAULT false,
+    "debug" BOOLEAN NOT NULL DEFAULT false,
+    "previews" BOOLEAN NOT NULL DEFAULT false,
+    "autodeploy" BOOLEAN NOT NULL DEFAULT true,
+    "isBot" BOOLEAN NOT NULL DEFAULT false,
+    "isPublicRepository" BOOLEAN NOT NULL DEFAULT false,
+    "isDBBranching" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "ApplicationSettings_applicationId_fkey" FOREIGN KEY ("applicationId") REFERENCES "Application" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_ApplicationSettings" ("applicationId", "autodeploy", "createdAt", "debug", "dualCerts", "id", "isBot", "isPublicRepository", "previews", "updatedAt") SELECT "applicationId", "autodeploy", "createdAt", "debug", "dualCerts", "id", "isBot", "isPublicRepository", "previews", "updatedAt" FROM "ApplicationSettings";
+DROP TABLE "ApplicationSettings";
+ALTER TABLE "new_ApplicationSettings" RENAME TO "ApplicationSettings";
+CREATE UNIQUE INDEX "ApplicationSettings_applicationId_key" ON "ApplicationSettings"("applicationId");
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

apps/api/prisma/migrations/20220905113241_prisma_migration/migration.sql

@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `time` on the `BuildLog` table. The data in that column could be lost. The data in that column will be cast from `Int` to `BigInt`.
+
+*/
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_BuildLog" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT,
+    "buildId" TEXT NOT NULL,
+    "line" TEXT NOT NULL,
+    "time" BIGINT NOT NULL
+);
+INSERT INTO "new_BuildLog" ("applicationId", "buildId", "id", "line", "time") SELECT "applicationId", "buildId", "id", "line", "time" FROM "BuildLog";
+DROP TABLE "BuildLog";
+ALTER TABLE "new_BuildLog" RENAME TO "BuildLog";
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

apps/api/prisma/migrations/20220905115321_application_connected_database/migration.sql

@@ -0,0 +1,20 @@
+-- CreateTable
+CREATE TABLE "ApplicationConnectedDatabase" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT NOT NULL,
+    "databaseId" TEXT,
+    "hostedDatabaseType" TEXT,
+    "hostedDatabaseHost" TEXT,
+    "hostedDatabasePort" INTEGER,
+    "hostedDatabaseName" TEXT,
+    "hostedDatabaseUser" TEXT,
+    "hostedDatabasePassword" TEXT,
+    "hostedDatabaseDBName" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "ApplicationConnectedDatabase_databaseId_fkey" FOREIGN KEY ("databaseId") REFERENCES "Database" ("id") ON DELETE SET NULL ON UPDATE CASCADE,
+    CONSTRAINT "ApplicationConnectedDatabase_applicationId_fkey" FOREIGN KEY ("applicationId") REFERENCES "Application" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ApplicationConnectedDatabase_applicationId_key" ON "ApplicationConnectedDatabase"("applicationId");

apps/api/prisma/schema.prisma

@@ -117,6 +117,24 @@ model Application {
   settings            ApplicationSettings?
   secrets             Secret[]
   teams               Team[]
+  connectedDatabase   ApplicationConnectedDatabase?
+}
+
+model ApplicationConnectedDatabase {
+  id                     String      @id @default(cuid())
+  applicationId          String      @unique
+  databaseId             String?
+  hostedDatabaseType     String?
+  hostedDatabaseHost     String?
+  hostedDatabasePort     Int?
+  hostedDatabaseName     String?
+  hostedDatabaseUser     String?
+  hostedDatabasePassword String?
+  hostedDatabaseDBName   String?
+  createdAt              DateTime    @default(now())
+  updatedAt              DateTime    @updatedAt
+  database               Database?   @relation(fields: [databaseId], references: [id])
+  application            Application @relation(fields: [applicationId], references: [id])
 }
 
 model ApplicationSettings {
@@ -128,6 +146,7 @@ model ApplicationSettings {
   autodeploy         Boolean     @default(true)
   isBot              Boolean     @default(false)
   isPublicRepository Boolean     @default(false)
+  isDBBranching      Boolean     @default(false)
   createdAt          DateTime    @default(now())
   updatedAt          DateTime    @updatedAt
   application        Application @relation(fields: [applicationId], references: [id])
@@ -186,7 +205,7 @@ model BuildLog {
   applicationId String?
   buildId       String
   line          String
-  time          Int
+  time          BigInt
 }
 
 model Build {
@@ -291,22 +310,23 @@ model GitlabApp {
 }
 
 model Database {
-  id                  String             @id @default(cuid())
-  name                String
-  publicPort          Int?
-  defaultDatabase     String?
-  type                String?
-  version             String?
-  dbUser              String?
-  dbUserPassword      String?
-  rootUser            String?
-  rootUserPassword    String?
-  destinationDockerId String?
-  createdAt           DateTime           @default(now())
-  updatedAt           DateTime           @updatedAt
-  destinationDocker   DestinationDocker? @relation(fields: [destinationDockerId], references: [id])
-  settings            DatabaseSettings?
-  teams               Team[]
+  id                           String                         @id @default(cuid())
+  name                         String
+  publicPort                   Int?
+  defaultDatabase              String?
+  type                         String?
+  version                      String?
+  dbUser                       String?
+  dbUserPassword               String?
+  rootUser                     String?
+  rootUserPassword             String?
+  destinationDockerId          String?
+  createdAt                    DateTime                       @default(now())
+  updatedAt                    DateTime                       @updatedAt
+  destinationDocker            DestinationDocker?             @relation(fields: [destinationDockerId], references: [id])
+  settings                     DatabaseSettings?
+  teams                        Team[]
+  applicationConnectedDatabase ApplicationConnectedDatabase[]
 }
 
 model DatabaseSettings {

apps/api/src/index.ts

@@ -5,7 +5,7 @@ import env from '@fastify/env';
 import cookie from '@fastify/cookie';
 import path, { join } from 'path';
 import autoLoad from '@fastify/autoload';
-import { asyncExecShell, isDev, listSettings, prisma, version } from './lib/common';
+import { asyncExecShell, createRemoteEngineConfiguration, isDev, listSettings, prisma, version } from './lib/common';
 import { scheduler } from './lib/scheduler';
 import { compareVersions } from 'compare-versions';
 import Graceful from '@ladjs/graceful'
@@ -136,8 +136,11 @@ fastify.listen({ port, host }, async (err: any, address: any) => {
 	// 	scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupPrismaEngines")
 	// }, 60000)
 
-	await getArch();
-	await getIPAddress();
+	await Promise.all([
+		getArch(),
+		getIPAddress(),
+		// configureRemoteDockers(),
+	])
 });
 async function getIPAddress() {
 	const { publicIpv4, publicIpv6 } = await import('public-ip')
@@ -175,4 +178,15 @@ async function getArch() {
 	} catch (error) { }
 }
 
-
+async function configureRemoteDockers() {
+	try {
+		const remoteDocker = await prisma.destinationDocker.findMany({
+			where: { remoteVerified: true, remoteEngine: true }
+		});
+		if (remoteDocker.length > 0) {
+			for (const docker of remoteDocker) {
+				await createRemoteEngineConfiguration(docker.id)
+			}
+		}
+	} catch (error) { }
+}

apps/api/src/jobs/deployApplication.ts

@@ -177,9 +177,7 @@ import * as buildpacks from '../lib/buildPacks';
 
 									try {
 										await prisma.build.update({ where: { id: buildId }, data: { commit } });
-									} catch (err) {
-										console.log(err);
-									}
+									} catch (err) { }
 
 									if (!pullmergeRequestId) {
 										if (configHash !== currentHash) {

apps/api/src/jobs/infrastructure.ts

@@ -1,7 +1,7 @@
 import { parentPort } from 'node:worker_threads';
 import axios from 'axios';
 import { compareVersions } from 'compare-versions';
-import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version } from '../lib/common';
+import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version, createRemoteEngineConfiguration } from '../lib/common';
 
 async function autoUpdater() {
     try {
@@ -21,7 +21,6 @@ async function autoUpdater() {
             const activeCount = 0
             if (activeCount === 0) {
                 if (!isDev) {
-                    console.log(`Updating Coolify to ${latestVersion}.`);
                     await asyncExecShell(`docker pull coollabsio/coolify:${latestVersion}`);
                     await asyncExecShell(`env | grep COOLIFY > .env`);
                     await asyncExecShell(
@@ -35,9 +34,7 @@ async function autoUpdater() {
                 }
             }
         }
-    } catch (error) {
-        console.log(error);
-    }
+    } catch (error) { }
 }
 async function checkProxies() {
     try {
@@ -45,18 +42,35 @@ async function checkProxies() {
         let portReachable;
 
         const { arch, ipv4, ipv6 } = await listSettings();
+
         // Coolify Proxy local
         const engine = '/var/run/docker.sock';
         const localDocker = await prisma.destinationDocker.findFirst({
-            where: { engine, network: 'coolify' }
+            where: { engine, network: 'coolify', isCoolifyProxyUsed: true }
         });
-        if (localDocker && localDocker.isCoolifyProxyUsed) {
+        if (localDocker) {
             portReachable = await isReachable(80, { host: ipv4 || ipv6 })
             if (!portReachable) {
                 await startTraefikProxy(localDocker.id);
             }
         }
-
+        // Coolify Proxy remote
+        const remoteDocker = await prisma.destinationDocker.findMany({
+            where: { remoteEngine: true, remoteVerified: true }
+        });
+        if (remoteDocker.length > 0) {
+            for (const docker of remoteDocker) {
+                if (docker.isCoolifyProxyUsed) {
+                    portReachable = await isReachable(80, { host: docker.remoteIpAddress })
+                    if (!portReachable) {
+                        await startTraefikProxy(docker.id);
+                    }
+                }
+                try {
+                    await createRemoteEngineConfiguration(docker.id)
+                } catch (error) { }
+            }
+        }
         // TCP Proxies
         const databasesWithPublicPort = await prisma.database.findMany({
             where: { publicPort: { not: null } },
@@ -113,9 +127,7 @@ async function cleanupPrismaEngines() {
             if (stdout.trim() != null && stdout.trim() != '' && Number(stdout.trim()) > 1) {
                 await asyncExecShell(`killall -q -e /app/prisma-engines/query-engine -o 1m`)
             }
-        } catch (error) {
-            console.log(error);
-        }
+        } catch (error) { }
     }
 }
 async function cleanupStorage() {
@@ -166,9 +178,7 @@ async function cleanupStorage() {
                     lowDiskSpace = true;
                 }
             }
-        } catch (error) {
-            console.log(error);
-        }
+        } catch (error) { }
         await cleanupDockerStorage(destination.id, lowDiskSpace, false)
     }
 }

apps/api/src/lib/buildPacks/common.ts

@@ -512,7 +512,6 @@ export async function copyBaseConfigurationFiles(
 			);
 		}
 	} catch (error) {
-		console.log(error);
 		throw new Error(error);
 	}
 }

apps/api/src/lib/common.ts

@@ -21,7 +21,7 @@ import { scheduler } from './scheduler';
 import { supportedServiceTypesAndVersions } from './services/supportedVersions';
 import { includeServices } from './services/common';
 
-export const version = '3.9.0-rc.1';
+export const version = '3.9.0';
 export const isDev = process.env.NODE_ENV === 'development';
 
 const algorithm = 'aes-256-ctr';
@@ -439,7 +439,6 @@ export async function getFreeSSHLocalPort(id: string): Promise<number | boolean>
 		return Number(alreadyConfigured.sshLocalPort)
 	}
 	const range = generateRangeArray(minPort, maxPort)
-	console.log({ ports })
 	const availablePorts = range.filter(port => !ports.map(p => p.sshLocalPort).includes(port))
 	for (const port of availablePorts) {
 		const found = await isReachable(port, { host: 'localhost' })
@@ -458,20 +457,21 @@ export async function createRemoteEngineConfiguration(id: string) {
 	const { sshKey: { privateKey }, remoteIpAddress, remotePort, remoteUser } = await prisma.destinationDocker.findFirst({ where: { id }, include: { sshKey: true } })
 	await fs.writeFile(sshKeyFile, decrypt(privateKey) + '\n', { encoding: 'utf8', mode: 400 })
 	// Needed for remote docker compose
-	const { stdout: numberOfSSHAgentsRunning } = await asyncExecShell(`ps ax | grep [s]sh-agent | grep ssh-agent.pid | grep -v grep | wc -l`)
+	const { stdout: numberOfSSHAgentsRunning } = await asyncExecShell(`ps ax | grep [s]sh-agent | grep coolify-ssh-agent.pid | grep -v grep | wc -l`)
 	if (numberOfSSHAgentsRunning !== '' && Number(numberOfSSHAgentsRunning.trim()) == 0) {
-		await asyncExecShell(`eval $(ssh-agent -sa /tmp/ssh-agent.pid)`)
+		try {
+			await fs.stat(`/tmp/coolify-ssh-agent.pid`)
+			await fs.rm(`/tmp/coolify-ssh-agent.pid`)
+		} catch (error) { }
+		await asyncExecShell(`eval $(ssh-agent -sa /tmp/coolify-ssh-agent.pid)`)
 	}
-	await asyncExecShell(`SSH_AUTH_SOCK=/tmp/ssh-agent.pid ssh-add -q ${sshKeyFile}`)
+	await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh-add -q ${sshKeyFile}`)
 
 	const { stdout: numberOfSSHTunnelsRunning } = await asyncExecShell(`ps ax | grep 'ssh -F /dev/null -o StrictHostKeyChecking no -fNL ${localPort}:localhost:${remotePort}' | grep -v grep | wc -l`)
 	if (numberOfSSHTunnelsRunning !== '' && Number(numberOfSSHTunnelsRunning.trim()) == 0) {
 		try {
-			await asyncExecShell(`SSH_AUTH_SOCK=/tmp/ssh-agent.pid ssh -F /dev/null -o "StrictHostKeyChecking no" -fNL ${localPort}:localhost:${remotePort} ${remoteUser}@${remoteIpAddress}`)
-
-		} catch (error) {
-			console.log(error)
-		}
+			await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh -F /dev/null -o "StrictHostKeyChecking no" -fNL ${localPort}:localhost:${remotePort} ${remoteUser}@${remoteIpAddress}`)
+		} catch (error) { }
 
 	}
 	const config = sshConfig.parse('')
@@ -1248,7 +1248,6 @@ export async function startTraefikTCPProxy(
 			})
 		}
 	} catch (error) {
-		console.log(error);
 		return error;
 	}
 }
@@ -1436,15 +1435,13 @@ export function convertTolOldVolumeNames(type) {
 export async function cleanupDockerStorage(dockerId, lowDiskSpace, force) {
 	// Cleanup old coolify images
 	try {
-		let { stdout: images } = await executeDockerCmd({ dockerId, command: `docker images coollabsio/coolify --filter before="coollabsio/coolify:${version}" -q | xargs` })
+		let { stdout: images } = await executeDockerCmd({ dockerId, command: `docker images coollabsio/coolify --filter before="coollabsio/coolify:${version}" -q | xargs -r` })
 
 		images = images.trim();
 		if (images) {
-			await executeDockerCmd({ dockerId, command: `docker rmi -f ${images}" -q | xargs` })
+			await executeDockerCmd({ dockerId, command: `docker rmi -f ${images}" -q | xargs -r` })
 		}
-	} catch (error) {
-		//console.log(error);
-	}
+	} catch (error) { }
 	if (lowDiskSpace || force) {
 		if (isDev) {
 			if (!force) console.log(`[DEV MODE] Low disk space: ${lowDiskSpace}`);
@@ -1452,25 +1449,17 @@ export async function cleanupDockerStorage(dockerId, lowDiskSpace, force) {
 		}
 		try {
 			await executeDockerCmd({ dockerId, command: `docker container prune -f --filter "label=coolify.managed=true"` })
-		} catch (error) {
-			//console.log(error);
-		}
+		} catch (error) { }
 		try {
 			await executeDockerCmd({ dockerId, command: `docker image prune -f` })
-		} catch (error) {
-			//console.log(error);
-		}
+		} catch (error) { }
 		try {
 			await executeDockerCmd({ dockerId, command: `docker image prune -a -f` })
-		} catch (error) {
-			//console.log(error);
-		}
+		} catch (error) { }
 		// Cleanup build caches
 		try {
 			await executeDockerCmd({ dockerId, command: `docker builder prune -a -f` })
-		} catch (error) {
-			//console.log(error);
-		}
+		} catch (error) { }
 	}
 }
 

apps/api/src/lib/docker.ts

@@ -76,7 +76,6 @@ export async function removeContainer({
 			await executeDockerCmd({ dockerId, command: `docker rm ${id}` })
 		}
 	} catch (error) {
-		console.log(error);
 		throw error;
 	}
 }

apps/api/src/plugins/jwt.ts

@@ -21,7 +21,6 @@ export default fp<FastifyJWTOptions>(async (fastify, opts) => {
         try {
             await request.jwtVerify()
         } catch (err) {
-            console.log(err)
             reply.send(err)
         }
     })

apps/api/src/routes/api/v1/applications/handlers.ts

@@ -156,7 +156,8 @@ export async function getApplicationFromDB(id: string, teamId: string) {
                 settings: true,
                 gitSource: { include: { githubApp: true, gitlabApp: true } },
                 secrets: true,
-                persistentStorage: true
+                persistentStorage: true,
+                connectedDatabase: true
             }
         });
         if (!application) {
@@ -190,7 +191,8 @@ export async function getApplicationFromDBWebhook(projectId: number, branch: str
                 settings: true,
                 gitSource: { include: { githubApp: true, gitlabApp: true } },
                 secrets: true,
-                persistentStorage: true
+                persistentStorage: true,
+                connectedDatabase: true
             }
         });
         if (applications.length === 0) {
@@ -242,7 +244,8 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
             denoOptions,
             baseImage,
             baseBuildImage,
-            deploymentType
+            deploymentType,
+            baseDatabaseBranch
         } = request.body
         if (port) port = Number(port);
         if (exposePort) {
@@ -263,22 +266,43 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
             dockerFileLocation,
             denoMainFile
         });
-        await prisma.application.update({
-            where: { id },
-            data: {
-                name,
-                fqdn,
-                exposePort,
-                pythonWSGI,
-                pythonModule,
-                pythonVariable,
-                denoOptions,
-                baseImage,
-                baseBuildImage,
-                deploymentType,
-                ...defaultConfiguration
-            }
-        });
+        if (baseDatabaseBranch) {
+            await prisma.application.update({
+                where: { id },
+                data: {
+                    name,
+                    fqdn,
+                    exposePort,
+                    pythonWSGI,
+                    pythonModule,
+                    pythonVariable,
+                    denoOptions,
+                    baseImage,
+                    baseBuildImage,
+                    deploymentType,
+                    ...defaultConfiguration,
+                    connectedDatabase: { update: { hostedDatabaseDBName: baseDatabaseBranch } }
+                }
+            });
+        } else {
+            await prisma.application.update({
+                where: { id },
+                data: {
+                    name,
+                    fqdn,
+                    exposePort,
+                    pythonWSGI,
+                    pythonModule,
+                    pythonVariable,
+                    denoOptions,
+                    baseImage,
+                    baseBuildImage,
+                    deploymentType,
+                    ...defaultConfiguration
+                }
+            });
+        }
+
         return reply.code(201).send();
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -289,7 +313,7 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
 export async function saveApplicationSettings(request: FastifyRequest<SaveApplicationSettings>, reply: FastifyReply) {
     try {
         const { id } = request.params
-        const { debug, previews, dualCerts, autodeploy, branch, projectId, isBot } = request.body
+        const { debug, previews, dualCerts, autodeploy, branch, projectId, isBot, isDBBranching } = request.body
         // const isDouble = await checkDoubleBranch(branch, projectId);
         // if (isDouble && autodeploy) {
         //     await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false } })
@@ -297,7 +321,7 @@ export async function saveApplicationSettings(request: FastifyRequest<SaveApplic
         // }
         await prisma.application.update({
             where: { id },
-            data: { fqdn: isBot ? null : undefined, settings: { update: { debug, previews, dualCerts, autodeploy, isBot } } },
+            data: { fqdn: isBot ? null : undefined, settings: { update: { debug, previews, dualCerts, autodeploy, isBot, isDBBranching } } },
             include: { destinationDocker: true }
         });
         return reply.code(201).send();
@@ -478,6 +502,7 @@ export async function deleteApplication(request: FastifyRequest<DeleteApplicatio
         await prisma.build.deleteMany({ where: { applicationId: id } });
         await prisma.secret.deleteMany({ where: { applicationId: id } });
         await prisma.applicationPersistentStorage.deleteMany({ where: { applicationId: id } });
+        await prisma.applicationConnectedDatabase.deleteMany({ where: { applicationId: id } });
         if (teamId === '0') {
             await prisma.application.deleteMany({ where: { id } });
         } else {
@@ -500,11 +525,15 @@ export async function checkDomain(request: FastifyRequest<CheckDomain>) {
 }
 export async function checkDNS(request: FastifyRequest<CheckDNS>) {
     try {
+
         const { id } = request.params
 
         let { exposePort, fqdn, forceSave, dualCerts } = request.body
-
-        if (fqdn) fqdn = fqdn.toLowerCase();
+        if (!fqdn) {
+            return {}
+        } else {
+            fqdn = fqdn.toLowerCase();
+        }
         if (exposePort) exposePort = Number(exposePort);
 
         const { destinationDocker: { id: dockerId, remoteIpAddress, remoteEngine }, exposePort: configuredPort } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
@@ -734,6 +763,16 @@ export async function saveBuildPack(request, reply) {
         return errorHandler({ status, message })
     }
 }
+export async function saveConnectedDatabase(request, reply) {
+    try {
+        const { id } = request.params
+        const { databaseId, type } = request.body
+        await prisma.application.update({ where: { id }, data: { connectedDatabase: { upsert: { create: { database: { connect: { id: databaseId } }, hostedDatabaseType: type }, update: { database: { connect: { id: databaseId } }, hostedDatabaseType: type } } } } })
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 
 export async function getSecrets(request: FastifyRequest<OnlyId>) {
     try {
@@ -890,7 +929,6 @@ export async function getPreviews(request: FastifyRequest<OnlyId>) {
             })
         }
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -982,11 +1020,13 @@ export async function getBuildIdLogs(request: FastifyRequest<GetBuildIdLogs>) {
             where: { buildId, time: { gt: sequence } },
             orderBy: { time: 'asc' }
         });
-
         const data = await prisma.build.findFirst({ where: { id: buildId } });
         const createdAt = day(data.createdAt).utc();
         return {
-            logs,
+            logs: logs.map(log => {
+                log.time = Number(log.time)
+                return log
+            }),
             took: day().diff(createdAt) / 1000,
             status: data?.status || 'queued'
         }
@@ -1063,3 +1103,58 @@ export async function cancelDeployment(request: FastifyRequest<CancelDeployment>
         return errorHandler({ status, message })
     }
 }
+
+
+export async function createdBranchDatabase(database: any, baseDatabaseBranch: string, pullmergeRequestId: string) {
+    try {
+        if (!baseDatabaseBranch) return
+        const { id, type, destinationDockerId, rootUser, rootUserPassword, dbUser } = database;
+        if (destinationDockerId) {
+            if (type === 'postgresql') {
+                const decryptedRootUserPassword = decrypt(rootUserPassword);
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} pg_dump -d "postgresql://postgres:${decryptedRootUserPassword}@${id}:5432/${baseDatabaseBranch}" --encoding=UTF8 --schema-only -f /tmp/${baseDatabaseBranch}.dump`
+                })
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "CREATE DATABASE branch_${pullmergeRequestId}"`
+                })
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql -d "postgresql://postgres:${decryptedRootUserPassword}@${id}:5432/branch_${pullmergeRequestId}" -f /tmp/${baseDatabaseBranch}.dump`
+                })
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "ALTER DATABASE branch_${pullmergeRequestId} OWNER TO ${dbUser}"`
+                })
+            }
+        }
+
+
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+export async function removeBranchDatabase(database: any, pullmergeRequestId: string) {
+    try {
+        const { id, type, destinationDockerId, rootUser, rootUserPassword } = database;
+        if (destinationDockerId) {
+            if (type === 'postgresql') {
+                const decryptedRootUserPassword = decrypt(rootUserPassword);
+                // Terminate all connections to the database
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE pg_stat_activity.datname = 'branch_${pullmergeRequestId}' AND pid <> pg_backend_pid();"`
+                })
+
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "DROP DATABASE branch_${pullmergeRequestId}"`
+                })
+            }
+        }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}

apps/api/src/routes/api/v1/applications/index.ts

@@ -1,6 +1,6 @@
 import { FastifyPluginAsync } from 'fastify';
 import { OnlyId } from '../../../../types';
-import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildLogs, getBuildPack, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getSecrets, getStorages, getUsage, listApplications, newApplication, restartApplication, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveDeployKey, saveDestination, saveGitLabSSHKey, saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication } from './handlers';
+import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildLogs, getBuildPack, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getSecrets, getStorages, getUsage, listApplications, newApplication, restartApplication, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey, saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication } from './handlers';
 
 import type { CancelDeployment, CheckDNS, CheckDomain, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, DeployApplication, GetApplicationLogs, GetBuildIdLogs, GetBuildLogs, GetImages, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, StopPreviewApplication } from './types';
 
@@ -55,6 +55,8 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.get('/:id/configuration/buildpack', async (request) => await getBuildPack(request));
     fastify.post('/:id/configuration/buildpack', async (request, reply) => await saveBuildPack(request, reply));
 
+    fastify.post('/:id/configuration/database', async (request, reply) => await saveConnectedDatabase(request, reply));
+
     fastify.get<OnlyId>('/:id/configuration/sshkey', async (request) => await getGitLabSSHKey(request));
     fastify.post<OnlyId>('/:id/configuration/sshkey', async (request, reply) => await saveGitLabSSHKey(request, reply));
 

apps/api/src/routes/api/v1/applications/types.ts

@@ -20,12 +20,13 @@ export interface SaveApplication extends OnlyId {
         denoOptions: string,
         baseImage: string,
         baseBuildImage: string,
-        deploymentType: string
+        deploymentType: string,
+        baseDatabaseBranch: string
     }
 }
 export interface SaveApplicationSettings extends OnlyId {
     Querystring: { domain: string; };
-    Body: { debug: boolean; previews: boolean; dualCerts: boolean; autodeploy: boolean; branch: string; projectId: number; isBot: boolean; };
+    Body: { debug: boolean; previews: boolean; dualCerts: boolean; autodeploy: boolean; branch: string; projectId: number; isBot: boolean; isDBBranching: boolean };
 }
 export interface DeleteApplication extends OnlyId {
     Querystring: { domain: string; };

apps/api/src/routes/api/v1/databases/handlers.ts

@@ -280,15 +280,12 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
         await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
         try {
             await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker volume create ${volumeName}` })
-        } catch (error) {
-            console.log(error);
-        }
+        } catch (error) { }
         try {
             await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker compose -f ${composeFileDestination} up -d` })
             if (isPublic) await startTraefikTCPProxy(destinationDocker, id, publicPort, privatePort);
             return {};
         } catch (error) {
-            console.log(error)
             throw {
                 error
             };

apps/api/src/routes/api/v1/destinations/handlers.ts

@@ -30,7 +30,6 @@ export async function listDestinations(request: FastifyRequest<ListDestinations>
             destinations
         }
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -114,7 +113,6 @@ export async function newDestination(request: FastifyRequest<NewDestination>, re
         }
 
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -162,7 +160,6 @@ export async function startProxy(request: FastifyRequest<Proxy>) {
         await startTraefikProxy(id);
         return {}
     } catch ({ status, message }) {
-        console.log({ status, message })
         await stopTraefikProxy(id);
         return errorHandler({ status, message })
     }
@@ -205,23 +202,21 @@ export async function assignSSHKey(request: FastifyRequest) {
         return errorHandler({ status, message })
     }
 }
-export async function verifyRemoteDockerEngine(request: FastifyRequest, reply: FastifyReply) {
+export async function verifyRemoteDockerEngine(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
     try {
         const { id } = request.params;
         await createRemoteEngineConfiguration(id);
-
-        const { remoteIpAddress, remoteUser, network } = await prisma.destinationDocker.findFirst({ where: { id } })
+        const { remoteIpAddress, remoteUser, network, isCoolifyProxyUsed } = await prisma.destinationDocker.findFirst({ where: { id } })
         const host = `ssh://${remoteUser}@${remoteIpAddress}`
         const { stdout } = await asyncExecShell(`DOCKER_HOST=${host} docker network ls --filter 'name=${network}' --no-trunc --format "{{json .}}"`);
-
         if (!stdout) {
             await asyncExecShell(`DOCKER_HOST=${host} docker network create --attachable ${network}`);
         }
-        const { stdout:coolifyNetwork } = await asyncExecShell(`DOCKER_HOST=${host} docker network ls --filter 'name=coolify-infra' --no-trunc --format "{{json .}}"`);
-
+        const { stdout: coolifyNetwork } = await asyncExecShell(`DOCKER_HOST=${host} docker network ls --filter 'name=coolify-infra' --no-trunc --format "{{json .}}"`);
         if (!coolifyNetwork) {
             await asyncExecShell(`DOCKER_HOST=${host} docker network create --attachable coolify-infra`);
         }
+        if (isCoolifyProxyUsed) await startTraefikProxy(id);
         await prisma.destinationDocker.update({ where: { id }, data: { remoteVerified: true } })
         return reply.code(201).send()
 
@@ -234,7 +229,7 @@ export async function getDestinationStatus(request: FastifyRequest<OnlyId>) {
     try {
         const { id } = request.params
         const destination = await prisma.destinationDocker.findUnique({ where: { id } })
-        const isRunning = await checkContainer({ dockerId: destination.id, container: 'coolify-proxy' })
+        const isRunning = await checkContainer({ dockerId: destination.id, container: 'coolify-proxy', remove: true })
         return {
             isRunning
         }

apps/api/src/routes/api/v1/destinations/index.ts

@@ -23,7 +23,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.post('/:id/configuration/sshKey', async (request) => await assignSSHKey(request));
 
-    fastify.post('/:id/verify', async (request, reply) => await verifyRemoteDockerEngine(request, reply));
+    fastify.post<OnlyId>('/:id/verify', async (request, reply) => await verifyRemoteDockerEngine(request, reply));
 };
 
 export default root;

apps/api/src/routes/api/v1/handlers.ts

@@ -65,7 +65,6 @@ export async function update(request: FastifyRequest<Update>) {
 			);
 			return {};
 		} else {
-			console.log(latestVersion);
 			await asyncSleep(2000);
 			return {};
 		}
@@ -78,10 +77,9 @@ export async function restartCoolify(request: FastifyRequest<any>) {
 		const teamId = request.user.teamId;
 		if (teamId === '0') {
 			if (!isDev) {
-				await asyncExecShell(`docker restart coolify`);
+				asyncExecShell(`docker restart coolify`);
 				return {};
 			} else {
-				console.log('Restarting Coolify')
 				return {};
 			}
 		}

apps/api/src/routes/api/v1/services/handlers.ts

@@ -560,10 +560,7 @@ export async function activateWordpressFtp(request: FastifyRequest<ActivateWordp
                             command: `docker stop -t 0 ${id}-ftp && docker rm ${id}-ftp`
                         })
                     }
-                } catch (error) {
-                    console.log(error);
-                    //
-                }
+                } catch (error) { }
                 const volumes = [
                     `${id}-wordpress-data:/home/${ftpUser}/wordpress`,
                     `${isDev ? hostkeyDir : '/var/lib/docker/volumes/coolify-ssl-certs/_data/hostkeys'
@@ -642,9 +639,7 @@ export async function activateWordpressFtp(request: FastifyRequest<ActivateWordp
             await asyncExecShell(
                 `rm -fr ${hostkeyDir}/${id}-docker-compose.yml ${hostkeyDir}/${id}.ed25519 ${hostkeyDir}/${id}.ed25519.pub ${hostkeyDir}/${id}.rsa ${hostkeyDir}/${id}.rsa.pub ${hostkeyDir}/${id}.sh`
             );
-        } catch (error) {
-            console.log(error)
-        }
+        } catch (error) { }
 
     }
 

apps/api/src/routes/webhooks/github/handlers.ts

@@ -3,8 +3,7 @@ import cuid from "cuid";
 import crypto from "crypto";
 import { encrypt, errorHandler, getUIUrl, isDev, prisma } from "../../../lib/common";
 import { checkContainer, removeContainer } from "../../../lib/docker";
-import { scheduler } from "../../../lib/scheduler";
-import { getApplicationFromDBWebhook } from "../../api/v1/applications/handlers";
+import { createdBranchDatabase, getApplicationFromDBWebhook, removeBranchDatabase } from "../../api/v1/applications/handlers";
 
 import type { FastifyReply, FastifyRequest } from "fastify";
 import type { GitHubEvents, InstallGithub } from "./types";
@@ -67,7 +66,6 @@ export async function configureGitHubApp(request, reply) {
 }
 export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promise<any> {
     try {
-
         const allowedGithubEvents = ['push', 'pull_request'];
         const allowedActions = ['opened', 'reopened', 'synchronize', 'closed'];
         const githubEvent = request.headers['x-github-event']?.toString().toLowerCase();
@@ -102,8 +100,7 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                     const checksum = Buffer.from(githubSignature, 'utf8');
                     //@ts-ignore
                     if (checksum.length !== digest.length || !crypto.timingSafeEqual(digest, checksum)) {
-                        console.log('SHA256 checksum failed. Are you doing something fishy?')
-                        // throw { status: 500, message: 'SHA256 checksum failed. Are you doing something fishy?' 
+                        throw { status: 500, message: 'SHA256 checksum failed. Are you doing something fishy?' }
                     };
                 }
 
@@ -133,8 +130,6 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                         where: { id: application.id },
                         data: { updatedAt: new Date() }
                     });
-                    console.log(application.id)
-
                     await prisma.build.create({
                         data: {
                             id: buildId,
@@ -178,6 +173,16 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                                 where: { id: application.id },
                                 data: { updatedAt: new Date() }
                             });
+                            if (application.connectedDatabase && pullmergeRequestAction === 'opened' || pullmergeRequestAction === 'reopened') {
+                                // Coolify hosted database
+                                if (application.connectedDatabase.databaseId) {
+                                    const databaseId = application.connectedDatabase.databaseId;
+                                    const database = await prisma.database.findUnique({ where: { id: databaseId } });
+                                    if (database) {
+                                        await createdBranchDatabase(database, application.connectedDatabase.hostedDatabaseDBName, pullmergeRequestId);
+                                    }
+                                }
+                            }
                             await prisma.build.create({
                                 data: {
                                     id: buildId,
@@ -197,9 +202,17 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                         } else if (pullmergeRequestAction === 'closed') {
                             if (application.destinationDockerId) {
                                 const id = `${application.id}-${pullmergeRequestId}`;
-                                await removeContainer({ id, dockerId: application.destinationDocker.id });
+                                try {
+                                    await removeContainer({ id, dockerId: application.destinationDocker.id });
+                                } catch (error) { }
+                            }
+                            if (application.connectedDatabase.databaseId) {
+                                const databaseId = application.connectedDatabase.databaseId;
+                                const database = await prisma.database.findUnique({ where: { id: databaseId } });
+                                if (database) {
+                                    await removeBranchDatabase(database, pullmergeRequestId);
+                                }
                             }
-
                         }
                     }
                 }

apps/ui/package.json

@@ -19,11 +19,11 @@
 		"@popperjs/core": "2.11.6",
 		"@sveltejs/kit": "1.0.0-next.405",
 		"@types/js-cookie": "3.0.2",
-		"@typescript-eslint/eslint-plugin": "5.35.1",
-		"@typescript-eslint/parser": "5.35.1",
+		"@typescript-eslint/eslint-plugin": "5.36.1",
+		"@typescript-eslint/parser": "5.36.1",
 		"autoprefixer": "10.4.8",
 		"classnames": "2.3.1",
-		"eslint": "8.22.0",
+		"eslint": "8.23.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-svelte3": "4.0.0",
 		"flowbite": "1.5.2",
@@ -31,21 +31,21 @@
 		"postcss": "8.4.16",
 		"prettier": "2.7.1",
 		"prettier-plugin-svelte": "2.7.0",
-		"svelte": "3.49.0",
-		"svelte-check": "2.8.1",
+		"svelte": "3.50.0",
+		"svelte-check": "2.9.0",
 		"svelte-preprocess": "4.10.7",
 		"tailwindcss": "3.1.8",
 		"tailwindcss-scrollbar": "0.1.0",
 		"tslib": "2.4.0",
-		"typescript": "4.7.4",
-		"vite": "3.0.5"
+		"typescript": "4.8.2",
+		"vite": "3.1.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-static": "1.0.0-next.39",
-		"@tailwindcss/typography": "^0.5.4",
+		"@tailwindcss/typography": "^0.5.7",
 		"cuid": "2.1.8",
-		"daisyui": "2.24.0",
+		"daisyui": "2.24.2",
 		"js-cookie": "3.0.1",
 		"p-limit": "4.0.0",
 		"svelte-select": "4.4.7",

apps/ui/src/lib/components/UpdateAvailable.svelte

@@ -16,7 +16,6 @@
 		updateStatus.loading = true;
 		try {
 			if (dev) {
-				console.log(`updating to ${latestVersion}`);
 				await asyncSleep(4000);
 				return window.location.reload();
 			} else {

apps/ui/src/lib/components/Usage.svelte

@@ -26,7 +26,7 @@
 	import { addToast, appSession } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
-	import { errorNotification } from '$lib/common';
+	import { asyncSleep, errorNotification } from '$lib/common';
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
@@ -42,6 +42,26 @@
 			loading.restart = true;
 			try {
 				await post(`/internal/restart`, {});
+				await asyncSleep(10000);
+				let reachable = false;
+				let tries = 0;
+				do {
+					await asyncSleep(4000);
+					try {
+						await get(`/undead`);
+						reachable = true;
+					} catch (error) {
+						reachable = false;
+					}
+					if (reachable) break;
+					tries++;
+				} while (!reachable || tries < 120);
+				addToast({
+					message: 'New version reachable. Reloading...',
+					type: 'success'
+				});
+				await asyncSleep(3000);
+				return window.location.reload();
 				addToast({
 					type: 'success',
 					message: 'Coolify restarted successfully. It will take a moment.'
@@ -89,10 +109,8 @@
 		<h1 class="title lg:text-3xl">Hardware Details</h1>
 		<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0">
 			{#if $appSession.teamId === '0'}
-				<button
-					on:click={manuallyCleanupStorage}
-					class:loading={loading.cleanup}
-					class="btn btn-sm">Cleanup Storage</button
+				<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
+					>Cleanup Storage</button
 				>
 				<button
 					on:click={restartCoolify}

apps/ui/src/lib/locales/en.json

@@ -306,7 +306,7 @@
 		"change_language": "Change Language",
 		"permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.",
 		"domain_removed": "Domain removed",
-		"ssl_explainer": "If you specify <span class='text-settings font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will brake webhooks and other integrations! You need to manually update them.",
+		"ssl_explainer": "If you specify <span class='text-settings font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.",
 		"must_remove_domain_before_changing": "Must remove the domain before you can change this setting.",
 		"registration_allowed": "Registration allowed?",
 		"registration_allowed_explainer": "Allow further registrations to the application. <br>It's turned off after the first registration.",

apps/ui/src/lib/store.ts

@@ -3,6 +3,7 @@ import cuid from 'cuid';
 import { writable, readable, type Writable } from 'svelte/store';
 
 interface AppSession {
+    registrationEnabled: boolean;
     ipv4: string | null,
     ipv6: string | null,
     version: string | null,
@@ -45,6 +46,26 @@ export const appSession: Writable<AppSession> = writable({
     supportedServiceTypesAndVersions: []
 });
 export const disabledButton: Writable<boolean> = writable(false);
+export const isDeploymentEnabled: Writable<boolean> = writable(false);
+export function checkIfDeploymentEnabledApplications(isAdmin: boolean, application: any) {
+    return (
+        isAdmin &&
+        (application.fqdn || application.settings.isBot) &&
+        application.gitSource &&
+        application.repository &&
+        application.destinationDocker &&
+        application.buildPack
+    );
+}
+export function checkIfDeploymentEnabledServices(isAdmin: boolean, service: any) {
+    return (
+        isAdmin &&
+        service.fqdn &&
+        service.destinationDocker &&
+        service.version &&
+        service.type
+    );
+}
 export const status: Writable<any> = writable({
     application: {
         isRunning: false,

apps/ui/src/routes/__layout.svelte

@@ -66,6 +66,7 @@
 <script lang="ts">
 	export let baseSettings: any;
 	export let supportedServiceTypesAndVersions: any;
+	$appSession.registrationEnabled = baseSettings.registrationEnabled;
 	$appSession.ipv4 = baseSettings.ipv4;
 	$appSession.ipv6 = baseSettings.ipv6;
 	$appSession.version = baseSettings.version;
@@ -142,7 +143,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -172,7 +173,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentcolor"
@@ -202,7 +203,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -232,7 +233,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -268,7 +269,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -295,7 +296,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -319,11 +320,10 @@
 					class="icons bg-coolgray-200"
 					class:text-iam={$page.url.pathname.startsWith('/iam')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
-					data-tip="IAM"
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -344,12 +344,11 @@
 					class="icons bg-coolgray-200"
 					class:text-settings={$page.url.pathname.startsWith('/settings')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
-					data-tip="Settings"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -367,12 +366,11 @@
 				<div
 					id="logout"
 					class="icons bg-coolgray-200 hover:text-error"
-					data-tip="Logout"
 					on:click={logout}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="ml-1 h-7 w-7"
+						class="ml-1 h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -406,7 +404,7 @@
 	{/if}
 {/if}
 <main>
-	<div class="pl-14 lg:px-20">
+	<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
 		<slot />
 	</div>
 </main>

apps/ui/src/routes/applications/[id]/_Secret.svelte

@@ -65,7 +65,6 @@
 			}
 			dispatch('refresh');
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}

apps/ui/src/routes/applications/[id]/__layout.svelte

@@ -60,23 +60,26 @@
 	import { goto } from '$app/navigation';
 	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
-	import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
+	import {
+		appSession,
+		status,
+		location,
+		setLocation,
+		addToast,
+		isDeploymentEnabled,
+		checkIfDeploymentEnabledApplications
+	} from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let statusInterval: any;
 	let forceDelete = false;
-	$disabledButton =
-		!$appSession.isAdmin ||
-		(!application.fqdn && !application.settings.isBot) ||
-		!application.gitSource ||
-		!application.repository ||
-		!application.destinationDocker ||
-		!application.buildPack;
-
 	const { id } = $page.params;
 
+	$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+
 	async function handleDeploySubmit(forceRebuild = false) {
+		if (!$isDeploymentEnabled) return;
 		try {
 			const { buildId } = await post(`/applications/${id}/deploy`, {
 				...application,
@@ -106,7 +109,7 @@
 				await del(`/applications/${id}`, { id, force });
 				return await goto(`/applications`);
 			} catch (error) {
-				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/ssh-agent.pid`)) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
 					forceDelete = true;
 				}
 				return errorNotification(error);
@@ -161,6 +164,7 @@
 		$status.application.isExited = false;
 		$status.application.loading = false;
 		$location = null;
+		$isDeploymentEnabled = false;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
@@ -214,7 +218,7 @@
 	{#if $status.application.isExited}
 		<a
 			id="applicationerror"
-			href={!$disabledButton ? `/applications/${id}/logs` : null}
+			href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
 			class="icons bg-transparent text-sm flex items-center text-error"
 			sveltekit:prefetch
 		>
@@ -266,7 +270,7 @@
 			id="stop"
 			on:click={stopApplication}
 			type="submit"
-			disabled={$disabledButton}
+			disabled={!$isDeploymentEnabled}
 			class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
 		>
 			<svg
@@ -290,7 +294,7 @@
 			id="restart"
 			on:click={restartApplication}
 			type="submit"
-			disabled={$disabledButton}
+			disabled={!$isDeploymentEnabled}
 			class="icons bg-transparent text-sm flex items-center space-x-2"
 		>
 			<svg
@@ -314,7 +318,7 @@
 			<button
 				id="forceredeploy"
 				type="submit"
-				disabled={$disabledButton}
+				disabled={!$isDeploymentEnabled}
 				class="icons bg-transparent text-sm flex items-center space-x-2"
 			>
 				<svg
@@ -341,7 +345,7 @@
 			<button
 				id="deploy"
 				type="submit"
-				disabled={$disabledButton}
+				disabled={!$isDeploymentEnabled}
 				class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
 			>
 				<svg
@@ -364,14 +368,17 @@
 
 	<div class="border border-coolgray-500 h-8" />
 	<a
-		id="configurations"
-		href={!$disabledButton ? `/applications/${id}` : null}
+		href={$isDeploymentEnabled ? `/applications/${id}` : null}
 		sveltekit:prefetch
 		class="hover:text-yellow-500 rounded"
 		class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
 		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
 	>
-		<button disabled={$disabledButton} class="icons bg-transparent text-sm">
+		<button
+			disabled={!$isDeploymentEnabled}
+			id="configurations"
+			class="icons bg-transparent text-sm"
+		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="h-6 w-6"
@@ -395,15 +402,16 @@
 			</svg></button
 		></a
 	>
+
+	<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
 	<a
-		id="secrets"
-		href={!$disabledButton ? `/applications/${id}/secrets` : null}
+		href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
 		sveltekit:prefetch
 		class="hover:text-pink-500 rounded"
 		class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
 		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
 	>
-		<button disabled={$disabledButton} class="icons bg-transparent text-sm">
+		<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="w-6 h-6"
@@ -423,15 +431,19 @@
 			</svg></button
 		></a
 	>
+	<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
 	<a
-		id="persistentstorages"
-		href={!$disabledButton ? `/applications/${id}/storages` : null}
+		href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
 		sveltekit:prefetch
 		class="hover:text-pink-500 rounded"
 		class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
 		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
 	>
-		<button disabled={$disabledButton} class="icons bg-transparent text-sm">
+		<button
+			id="persistentstorages"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm"
+		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="w-6 h-6"
@@ -449,16 +461,16 @@
 			</svg>
 		</button></a
 	>
+	<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
 	{#if !application.settings.isBot}
 		<a
-			id="previews"
-			href={!$disabledButton ? `/applications/${id}/previews` : null}
+			href={$isDeploymentEnabled ? `/applications/${id}/previews` : null}
 			sveltekit:prefetch
 			class="hover:text-orange-500 rounded"
 			class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
 		>
-			<button disabled={$disabledButton} class="icons bg-transparent text-sm">
+			<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="w-6 h-6"
@@ -478,18 +490,19 @@
 				</svg></button
 			></a
 		>
+		<Tooltip triggeredBy="#previews">Previews</Tooltip>
 	{/if}
 	<div class="border border-coolgray-500 h-8" />
 	<a
-		id="applicationlogs"
-		href={!$disabledButton && $status.application.isRunning ? `/applications/${id}/logs` : null}
+		href={$isDeploymentEnabled && $status.application.isRunning ? `/applications/${id}/logs` : null}
 		sveltekit:prefetch
 		class="hover:text-sky-500 rounded"
 		class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
 		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
 	>
 		<button
-			disabled={$disabledButton || !$status.application.isRunning}
+			id="applicationlogs"
+			disabled={!$isDeploymentEnabled || !$status.application.isRunning}
 			class="icons bg-transparent text-sm"
 		>
 			<svg
@@ -511,15 +524,15 @@
 			</svg>
 		</button></a
 	>
+	<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
 	<a
-		id="buildlogs"
-		href={!$disabledButton ? `/applications/${id}/logs/build` : null}
+		href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
 		sveltekit:prefetch
 		class="hover:text-red-500 rounded"
 		class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
 		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
 	>
-		<button disabled={$disabledButton} class="icons bg-transparent text-sm">
+		<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="h-6 w-6"
@@ -542,10 +555,12 @@
 			</svg>
 		</button></a
 	>
+	<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
 	<div class="border border-coolgray-500 h-8" />
 
 	{#if forceDelete}
 		<button
+			id="forcedelete"
 			on:click={() => deleteApplication(application.name, true)}
 			type="submit"
 			disabled={!$appSession.isAdmin}
@@ -555,6 +570,7 @@
 		>
 			Force Delete
 		</button>
+		<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip>
 	{:else}
 		<button
 			id="delete"
@@ -566,14 +582,7 @@
 		>
 			<DeleteIcon />
 		</button>
+		<Tooltip triggeredBy="#delete">Delete</Tooltip>
 	{/if}
 </nav>
 <slot />
-
-<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
-<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
-<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
-<Tooltip triggeredBy="#previews">Previews</Tooltip>
-<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
-<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
-<Tooltip triggeredBy="#delete">Delete</Tooltip>

apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte

@@ -22,7 +22,7 @@
 	async function loadBranches() {
 		try {
 			loading.branches = true;
-
+			publicRepositoryLink = publicRepositoryLink.trim();
 			const protocol = publicRepositoryLink.split(':')[0];
 			const gitUrl = publicRepositoryLink.replace('http://', '').replace('https://', '');
 

apps/ui/src/routes/applications/[id]/configuration/database.svelte

@@ -0,0 +1,162 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/databases`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let databases: any = [];
+	import { get, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
+	import { errorNotification } from '$lib/common';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	const from = $page.url.searchParams.get('from');
+
+	let remoteDatabase = {
+		name: null,
+		type: null,
+		host: null,
+		port: null,
+		user: null,
+		password: null,
+		database: null
+	};
+
+	const ownDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id === $appSession.teamId) {
+			return database;
+		}
+	});
+	const otherDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id !== $appSession.teamId) {
+			return database;
+		}
+	});
+
+	async function addCoolifyDatabase(database: any) {
+		try {
+			await post(`/applications/${$page.params.id}/configuration/database`, {
+				databaseId: database.id,
+				type: database.type
+			});
+			return window.location.assign(from || `/applications/${$page.params.id}/`);
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
+</div>
+
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !databases || ownDatabases.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
+		</div>
+	{/if}
+	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownDatabases as database}
+					<button on:click={() => addCoolifyDatabase(database)} class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-purple-600">
+							<DatabaseIcons type={database.type} isAbsolute={true} />
+							<div class="truncate text-center text-xl font-bold">
+								{database.name}
+							</div>
+							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
+								<div class="truncate text-center">{database.teams[0].name}</div>
+							{/if}
+							{#if database.destinationDocker?.name}
+								<div class="truncate text-center">{database.destinationDocker.name}</div>
+							{/if}
+							{#if !database.type}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherDatabases as database}
+						<a href="/databases/{database.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-purple-600">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="truncate text-center text-xl font-bold">
+									{database.name}
+								</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{database.teams[0].name}</div>
+								{/if}
+								{#if !database.type}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{:else}
+									<div class="text-center truncate">{database.type}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="mx-auto max-w-4xl p-6">
+		<div class="grid grid-flow-row gap-2 px-10">
+			<div class="font-bold text-xl tracking-tight">Connect a Hosted / Remote Database</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<input name="name" id="name" required bind:value={remoteDatabase.name} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="type" class="text-base font-bold text-stone-100">Type</label>
+				<input name="type" id="type" required bind:value={remoteDatabase.type} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="host" class="text-base font-bold text-stone-100">Host</label>
+				<input name="host" id="host" required bind:value={remoteDatabase.host} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="port" class="text-base font-bold text-stone-100">Port</label>
+				<input name="port" id="port" required bind:value={remoteDatabase.port} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="user" class="text-base font-bold text-stone-100">User</label>
+				<input name="user" id="user" required bind:value={remoteDatabase.user} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="password" class="text-base font-bold text-stone-100">Password</label>
+				<input name="password" id="password" required bind:value={remoteDatabase.password} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="database" class="text-base font-bold text-stone-100">Database Name</label>
+				<input name="database" id="database" required bind:value={remoteDatabase.database} />
+			</div>
+		</div>
+	</div>
+</div>

apps/ui/src/routes/applications/[id]/index.svelte

@@ -31,16 +31,24 @@
 	import { page } from '$app/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import Select from 'svelte-select';
-
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
-	import { addToast, appSession, disabledButton, setLocation, status } from '$lib/store';
+	import {
+		addToast,
+		appSession,
+		checkIfDeploymentEnabledApplications,
+		setLocation,
+		status,
+		isDeploymentEnabled,
+		features
+	} from '$lib/store';
 	import { t } from '$lib/translations';
 	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
 	import Setting from '$lib/components/Setting.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
-	
+	import { goto } from '$app/navigation';
+
 	const { id } = $page.params;
 
 	$: isDisabled =
@@ -64,7 +72,9 @@
 	let dualCerts = application.settings.dualCerts;
 	let autodeploy = application.settings.autodeploy;
 	let isBot = application.settings.isBot;
+	let isDBBranching = application.settings.isDBBranching;
 
+	let baseDatabaseBranch: any = application?.connectedDatabase?.hostedDatabaseDBName || null;
 	let nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
 	let isNonWWWDomainOK = false;
 	let isWWWDomainOK = false;
@@ -162,6 +172,9 @@
 			application.settings.isBot = isBot;
 			setLocation(application, settings);
 		}
+		if (name === 'isDBBranching') {
+			isDBBranching = !isDBBranching;
+		}
 		try {
 			await post(`/applications/${id}/settings`, {
 				previews,
@@ -169,6 +182,7 @@
 				dualCerts,
 				isBot,
 				autodeploy,
+				isDBBranching,
 				branch: application.branch,
 				projectId: application.projectId
 			});
@@ -192,14 +206,19 @@
 			if (name === 'isBot') {
 				isBot = !isBot;
 			}
+			if (name === 'isDBBranching') {
+				isDBBranching = !isDBBranching;
+			}
 			return errorNotification(error);
+		} finally {
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
 		}
 	}
 	async function handleSubmit() {
-		if (loading || (!application.fqdn && !isBot)) return;
+		if (loading) return;
 		loading = true;
 		try {
-			nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
+			nonWWWDomain = application.fqdn != null && getDomain(application.fqdn).replace(/^www\./, '');
 			if (application.deploymentType)
 				application.deploymentType = application.deploymentType.toLowerCase();
 			!isBot &&
@@ -209,16 +228,17 @@
 					dualCerts,
 					exposePort: application.exposePort
 				}));
-			await post(`/applications/${id}`, { ...application });
+			await post(`/applications/${id}`, { ...application, baseDatabaseBranch });
 			setLocation(application, settings);
-			$disabledButton = false;
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+
 			forceSave = false;
+
 			addToast({
 				message: 'Configuration saved.',
 				type: 'success'
 			});
 		} catch (error) {
-			console.log(error);
 			//@ts-ignore
 			if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
 				forceSave = true;
@@ -509,6 +529,46 @@
 					</div>
 				</div>
 			{/if}
+			{#if $features.beta}
+				{#if !application.settings.isBot && !application.settings.isPublicRepository}
+					<div class="grid grid-cols-2 items-center">
+						<Setting
+							id="isDBBranching"
+							isCenter={false}
+							bind:setting={isDBBranching}
+							on:click={() => changeSettings('isDBBranching')}
+							title="Enable DB Branching"
+							description="Enable DB Branching"
+						/>
+					</div>
+					{#if isDBBranching}
+						<button
+							on:click|stopPropagation|preventDefault={() =>
+								goto(`/applications/${id}/configuration/database`)}
+							class="btn btn-sm">Configure Connected Database</button
+						>
+						{#if application.connectedDatabase}
+							<div class="grid grid-cols-2 items-center">
+								<label for="baseImage" class="text-base font-bold text-stone-100"
+									>Base Database
+									<Explainer
+										explanation={'The name of the database that will be used as base when branching.'}
+									/></label
+								>
+								<input
+									name="baseDatabaseBranch"
+									required
+									id="baseDatabaseBranch"
+									bind:value={baseDatabaseBranch}
+								/>
+							</div>
+							<div class="text-center bg-green-600 rounded">
+								Connected to {application.connectedDatabase.databaseId}
+							</div>
+						{/if}
+					{/if}
+				{/if}
+			{/if}
 		</div>
 		<div class="flex space-x-1 py-5 font-bold">
 			<div class="title">{$t('application.application')}</div>
@@ -538,7 +598,7 @@
 				/>
 			</div>
 			{#if !isBot}
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="fqdn" class="text-base font-bold text-stone-100"
 						>{$t('application.url_fqdn')}
 						<Explainer
@@ -551,7 +611,6 @@
 							disabled={isDisabled}
 							name="fqdn"
 							id="fqdn"
-							required
 							bind:value={application.fqdn}
 							pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
 							placeholder="eg: https://coollabs.io"
@@ -658,7 +717,7 @@
 					/>
 				</div>
 			{/if}
-			<div class="grid grid-cols-2 items-center">
+			<div class="grid grid-cols-2 items-center pb-8">
 				<label for="exposePort" class="text-base font-bold text-stone-100"
 					>Exposed Port <Explainer
 						explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
@@ -700,7 +759,7 @@
 						placeholder="{$t('forms.default')}: yarn build"
 					/>
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="startCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.start_command')}</label
 					>

apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte

@@ -67,7 +67,6 @@
 				}
 			}, 1000);
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -80,7 +79,6 @@
 				applicationId: id
 			});
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}

apps/ui/src/routes/applications/[id]/logs/index.svelte

@@ -39,7 +39,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			logsLoading = false;

apps/ui/src/routes/databases/[id]/logs/index.svelte

@@ -45,7 +45,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			loadingLogs = false;

apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte

@@ -38,8 +38,8 @@
 		}
 	}
 	onMount(async () => {
-		loading.proxy = true;
 		if (destination.remoteEngine && destination.remoteVerified) {
+			loading.proxy = true;
 			const { isRunning } = await get(`/destinations/${id}/status`);
 			if (isRunning === false && destination.isCoolifyProxyUsed === true) {
 				destination.isCoolifyProxyUsed = !destination.isCoolifyProxyUsed;
@@ -69,6 +69,7 @@
 		loading.proxy = false;
 	});
 	async function changeProxySetting() {
+		if (!destination.remoteVerified) return
 		loading.proxy = true;
 		if (!cannotDisable) {
 			const isProxyActivated = destination.isCoolifyProxyUsed;
@@ -262,7 +263,7 @@
 	<div class="grid grid-cols-2 items-center px-10">
 		<Setting
 			id="changeProxySetting"
-			disabled={cannotDisable}
+			disabled={cannotDisable || !destination.remoteVerified}
 			loading={loading.proxy}
 			bind:setting={destination.isCoolifyProxyUsed}
 			on:click={changeProxySetting}

apps/ui/src/routes/destinations/[id]/__layout.svelte

@@ -40,7 +40,6 @@
 				}
 			};
 		} catch (error) {
-			console.log(error);
 			return handlerNotFoundLoad(error, url);
 		}
 	};
@@ -58,11 +57,11 @@
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 
-	const { id } = $page.params;
 	const isDestinationDeletable =
-		destination?.application.length === 0 &&
-		destination?.database.length === 0 &&
-		destination?.service.length === 0;
+		(destination?.application.length === 0 &&
+			destination?.database.length === 0 &&
+			destination?.service.length === 0) ||
+		true;
 
 	async function deleteDestination(destination: any) {
 		if (!isDestinationDeletable) return;
@@ -88,7 +87,7 @@
 	}
 </script>
 
-{#if id !== 'new'}
+{#if $page.params.id !== 'new'}
 	<nav class="nav-side">
 		<button
 			id="delete"

apps/ui/src/routes/login.svelte

@@ -49,61 +49,83 @@
 	<title>{$t('login.login')}</title>
 </svelt:head>
 
-<div class="flex h-screen flex-col items-center justify-center">
-	<div class="flex justify-center px-4">
-		<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
-			{#if $appSession.whiteLabeledDetails.icon}
-				<img
-					class="w-32 mx-auto pb-8"
-					src={$appSession.whiteLabeledDetails.icon}
-					alt="Icon for white labeled version of Coolify"
-				/>
-			{:else}
-				<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
-			{/if}
-			<input
-				type="email"
-				name="email"
-				placeholder={$t('forms.email')}
-				autocomplete="off"
-				required
-				bind:this={emailEl}
-				bind:value={email}
-				class="w-56 md:w-96"
-			/>
-			<input
-				type="password"
-				name="password"
-				placeholder={$t('forms.password')}
-				bind:value={password}
-				required
-				class="w-56 md:w-96"
-			/>
-
-			<div class="flex space-x-2 h-8 items-center justify-center pt-8">
-				<button
-					type="submit"
-					disabled={loading}
-					class="btn btn-sm"
-					class:loading
-					class:bg-coollabs={!loading}
-					>{loading ? $t('login.authenticating') : $t('login.login')}</button
-				>
-
-				<button on:click|preventDefault={gotoRegister} class="btn btn-sm"
-					>{$t('register.register')}</button
-				>
-			</div>
-		</form>
+<div class="flex lg:flex-row flex-col h-screen">
+	<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
+		<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
+		<h3 class="title">Made self-hosting simple.</h3>
 	</div>
-	{#if browser && window.location.host === 'demo.coolify.io'}
-		<div class="pt-5 font-bold">
-			Registration is <span class="text-pink-500">open</span>, just fill in an email (does not need
-			to be live email address for the demo instance) and a password.
+	<div class="flex flex-1 flex-col lg:max-w-2xl">
+		<div class="flex flex-row p-8 items-center space-x-3">
+			{#if $appSession.whiteLabeledDetails.icon}
+				<div class="avatar" style="width: 40px; height: 40px">
+					<img
+						src={$appSession.whiteLabeledDetails.icon}
+						alt="Icon for white labeled version of Coolify"
+					/>
+				</div>
+			{:else}
+				<div>
+					<div class="avatar" style="width: 40px; height: 40px">
+						<img src="favicon.png" alt="Coolify icon" />
+					</div>
+				</div>
+				<div class="prose">
+					<h4>Coolify dashboard</h4>
+				</div>
+			{/if}
 		</div>
-		<div class="pt-5 font-bold">
-			All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able to
-			access other users data.
+		<div
+			class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
+		>
+			<div class="mb-5 w-full prose prose-neutral">
+				<h1 class="m-0 white">Welcome back</h1>
+				<h5>Please login to continue.</h5>
+			</div>
+			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
+				<input
+					type="email"
+					name="email"
+					placeholder={$t('forms.email')}
+					autocomplete="off"
+					required
+					bind:this={emailEl}
+					bind:value={email}
+					class="w-full"
+				/>
+				<input
+					type="password"
+					name="password"
+					placeholder={$t('forms.password')}
+					bind:value={password}
+					required
+					class="w-full"
+				/>
+
+				<div class="flex space-y-3 flex-col pt-3">
+					<button
+						type="submit"
+						disabled={loading}
+						class="btn"
+						class:loading
+						class:bg-coollabs={!loading}
+						>{loading ? $t('login.authenticating') : $t('login.login')}</button
+					>
+
+					<button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
+						>{$t('register.register')}</button
+					>
+				</div>
+			</form>
+			{#if browser && window.location.host === 'demo.coolify.io'}
+				<div class="pt-5 font-bold">
+					Registration is <span class="text-pink-500">open</span>, just fill in an email (does not
+					need to be live email address for the demo instance) and a password.
+				</div>
+				<div class="pt-5 font-bold">
+					All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able
+					to access other users data.
+				</div>
+			{/if}
 		</div>
-	{/if}
+	</div>
 </div>

apps/ui/src/routes/register.svelte

@@ -61,38 +61,58 @@
 	}
 </script>
 
-<div class="icons fixed top-0 left-0 m-3 cursor-pointer" on:click={() => goto('/')}>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		class="h-6 w-6"
-		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
-		fill="none"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-		<line x1="5" y1="12" x2="19" y2="12" />
-		<line x1="5" y1="12" x2="11" y2="18" />
-		<line x1="5" y1="12" x2="11" y2="6" />
-	</svg>
-</div>
-<div class="flex h-screen flex-col items-center justify-center">
-	{#if $appSession.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
-	{:else}
-		<div class="flex justify-center px-4">
-			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
+<div class="flex lg:flex-row flex-col h-screen">
+	<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
+		<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
+		<h3 class="title">Made self-hosting simple.</h3>
+	</div>
+	<div class="flex flex-1 flex-col lg:max-w-2xl">
+		<div class="flex flex-row p-8 items-center space-x-3 justify-between">
+			<div class="icons cursor-pointer" on:click={() => goto('/')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<line x1="5" y1="12" x2="19" y2="12" />
+					<line x1="5" y1="12" x2="11" y2="18" />
+					<line x1="5" y1="12" x2="11" y2="6" />
+				</svg>
+			</div>
+			<div class="flex flex-row items-center space-x-3">
 				{#if $appSession.whiteLabeledDetails.icon}
-					<img
-						class="w-32 mx-auto pb-8"
-						src={$appSession.whiteLabeledDetails.icon}
-						alt="Icon for white labeled version of Coolify"
-					/>
+					<div class="avatar" style="width: 40px; height: 40px">
+						<img
+							src={$appSession.whiteLabeledDetails.icon}
+							alt="Icon for white labeled version of Coolify"
+						/>
+					</div>
 				{:else}
-					<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
+					<div>
+						<div class="avatar" style="width: 40px; height: 40px">
+							<img src="favicon.png" alt="Coolify icon" />
+						</div>
+					</div>
+					<div class="prose">
+						<h4>Coolify dashboard</h4>
+					</div>
 				{/if}
+			</div>
+		</div>
+		<div
+			class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
+		>
+			<div class="mb-5 w-full prose prose-neutral">
+				<h1 class="m-0 white">Get started</h1>
+				<h5>Enter the required fields to complete the registration.</h5>
+			</div>
+			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
 				<input
 					type="email"
 					name="email"
@@ -101,7 +121,7 @@
 					required
 					bind:this={emailEl}
 					bind:value={email}
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 				<input
 					type="password"
@@ -110,7 +130,7 @@
 					bind:this={passwordEl}
 					bind:value={password}
 					required
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 				<input
 					type="password"
@@ -118,13 +138,13 @@
 					placeholder={$t('forms.password_again')}
 					bind:value={passwordCheck}
 					required
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 
-				<div class="flex space-x-2 h-8 items-center justify-center pt-8">
+				<div class="flex space-y-3 flex-col pt-3">
 					<button
 						type="submit"
-						class="btn btn-sm"
+						class="btn"
 						disabled={loading}
 						class:bg-transparent={loading}
 						class:bg-coollabs={!loading}
@@ -132,11 +152,11 @@
 					>
 				</div>
 			</form>
+			{#if userCount === 0}
+				<div class="pt-5">
+					{$t('register.first_user')}
+				</div>
+			{/if}
 		</div>
-		{#if userCount === 0}
-			<div class="pt-5">
-				{$t('register.first_user')}
-			</div>
-		{/if}
-	{/if}
+	</div>
 </div>

apps/ui/src/routes/services/[id]/__layout.svelte

@@ -47,7 +47,6 @@
 				}
 			};
 		} catch (error) {
-			console.log(error);
 			return handlerNotFoundLoad(error, url);
 		}
 	};
@@ -60,19 +59,21 @@
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
-	import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
+	import {
+		appSession,
+		isDeploymentEnabled,
+		status,
+		location,
+		setLocation,
+		checkIfDeploymentEnabledServices
+	} from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	const { id } = $page.params;
 
 	export let service: any;
 
-	$disabledButton =
-		!$appSession.isAdmin ||
-		!service.fqdn ||
-		!service.destinationDocker ||
-		!service.version ||
-		!service.type;
+	$isDeploymentEnabled = checkIfDeploymentEnabledServices($appSession.isAdmin, service);
 
 	let statusInterval: any;
 
@@ -133,6 +134,7 @@
 		$status.service.isExited = false;
 		$status.service.loading = false;
 		$location = null;
+		$isDeploymentEnabled = false;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
@@ -151,141 +153,142 @@
 </script>
 
 <nav class="nav-side">
-	{#if service.type && service.destinationDockerId && service.version && service.fqdn}
-		{#if $location}
-			<a
-				id="open"
-				href={$location}
-				target="_blank"
-				class="icons  flex items-center bg-transparent text-sm"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-					<line x1="10" y1="14" x2="20" y2="4" />
-					<polyline points="15 4 20 4 20 9" />
-				</svg></a
+	{#if $location}
+		<a
+			id="open"
+			href={$location}
+			target="_blank"
+			class="icons  flex items-center bg-transparent text-sm"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
-			<Tooltip triggeredBy="#open">Open</Tooltip>
-			<div class="border border-stone-700 h-8" />
-		{/if}
-		{#if $status.service.isExited}
-			<a
-				id="error"
-				href={!$disabledButton ? `/services/${id}/logs` : null}
-				class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
-				sveltekit:prefetch
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentcolor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path
-						d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-					/>
-					<line x1="12" y1="8" x2="12" y2="12" />
-					<line x1="12" y1="16" x2="12.01" y2="16" />
-				</svg>
-			</a>
-			<Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
-		{/if}
-		{#if $status.service.initialLoading}
-			<button
-				class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-					<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-					<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-					<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-					<line x1="11" y1="19.94" x2="11" y2="19.95" />
-				</svg>
-			</button>
-		{:else if $status.service.isRunning}
-			<button
-				id="stop"
-				on:click={stopService}
-				type="submit"
-				disabled={$disabledButton}
-				class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<rect x="6" y="5" width="4" height="14" rx="1" />
-					<rect x="14" y="5" width="4" height="14" rx="1" />
-				</svg>
-			</button>
-			<Tooltip triggeredBy="#stop">Stop</Tooltip>
-		{:else}
-			<button
-				id="start"
-				on:click={startService}
-				type="submit"
-				disabled={$disabledButton}
-				class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M7 4v16l13 -8z" />
-				</svg>
-			</button>
-			<Tooltip triggeredBy="#start">Start</Tooltip>
-		{/if}
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+				<line x1="10" y1="14" x2="20" y2="4" />
+				<polyline points="15 4 20 4 20 9" />
+			</svg></a
+		>
+		<Tooltip triggeredBy="#open">Open</Tooltip>
 		<div class="border border-stone-700 h-8" />
 	{/if}
+	{#if $status.service.isExited}
+		<a
+			id="error"
+			href={$isDeploymentEnabled ? `/services/${id}/logs` : null}
+			class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
+			sveltekit:prefetch
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentcolor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
+				/>
+				<line x1="12" y1="8" x2="12" y2="12" />
+				<line x1="12" y1="16" x2="12.01" y2="16" />
+			</svg>
+		</a>
+		<Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
+	{/if}
+	{#if $status.service.initialLoading}
+		<button
+			class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+				<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
+				<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
+				<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
+				<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
+				<line x1="11" y1="19.94" x2="11" y2="19.95" />
+			</svg>
+		</button>
+	{:else if $status.service.isRunning}
+		<button
+			id="stop"
+			on:click={stopService}
+			type="submit"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<rect x="6" y="5" width="4" height="14" rx="1" />
+				<rect x="14" y="5" width="4" height="14" rx="1" />
+			</svg>
+		</button>
+		<Tooltip triggeredBy="#stop">Stop</Tooltip>
+	{:else}
+		<button
+			id="start"
+			on:click={startService}
+			type="submit"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M7 4v16l13 -8z" />
+			</svg>
+		</button>
+		<Tooltip triggeredBy="#start">Start</Tooltip>
+	{/if}
+	<div class="border border-stone-700 h-8" />
 	{#if service.type && service.destinationDockerId && service.version}
 		<a
-			id="configuration"
 			href="/services/{id}"
 			sveltekit:prefetch
 			class="hover:text-yellow-500 rounded"
 			class:text-yellow-500={$page.url.pathname === `/services/${id}`}
 			class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
 		>
-			<button class="icons bg-transparent text-sm disabled:text-red-500">
+			<button
+				id="configuration"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm"
+			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="h-6 w-6"
@@ -311,14 +314,17 @@
 		>
 		<Tooltip triggeredBy="#configuration">Configuration</Tooltip>
 		<a
-			id="secrets"
 			href="/services/{id}/secrets"
 			sveltekit:prefetch
 			class="hover:text-pink-500 rounded"
 			class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
 			class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
 		>
-			<button class="icons bg-transparent text-sm disabled:text-red-500">
+			<button
+				id="secrets"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm "
+			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="w-6 h-6"
@@ -340,14 +346,17 @@
 		>
 		<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
 		<a
-			id="persistentstorage"
 			href="/services/{id}/storages"
 			sveltekit:prefetch
 			class="hover:text-pink-500 rounded"
 			class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
 			class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
 		>
-			<button class="icons bg-transparent text-sm disabled:text-red-500">
+			<button
+				id="persistentstorage"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm"
+			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="w-6 h-6"
@@ -368,14 +377,13 @@
 		<Tooltip triggeredBy="#persistentstorage">Persistent Storage</Tooltip>
 		<div class="border border-stone-700 h-8" />
 		<a
-			id="logs"
-			href={!$disabledButton && $status.service.isRunning ? `/services/${id}/logs` : null}
+			href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null}
 			sveltekit:prefetch
 			class="hover:text-pink-500 rounded"
 			class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
 			class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`}
 		>
-			<button disabled={!$status.service.isRunning} class="icons bg-transparent text-sm">
+			<button id="logs" disabled={!$status.service.isRunning} class="icons bg-transparent text-sm">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="h-6 w-6"

apps/ui/src/routes/services/[id]/logs/index.svelte

@@ -41,7 +41,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			logsLoading = false;

apps/ui/src/routes/settings/global.svelte

@@ -129,7 +129,6 @@
 					}
 				}
 			}
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			loading.save = false;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "coolify",
   "description": "An open-source & self-hostable Heroku / Netlify alternative.",
-  "version": "3.9.0-rc.1",
+  "version": "3.9.0",
   "license": "Apache-2.0",
   "repository": "github:coollabsio/coolify",
   "scripts": {