Merge pull request #603 from coollabsio/next

v3.10.0

.devcontainer/devcontainer.json

@@ -20,12 +20,13 @@
 		"svelte.svelte-vscode",
 		"ardenivanov.svelte-intellisense",
 		"Prisma.prisma",
-		"bradlc.vscode-tailwindcss"
+		"bradlc.vscode-tailwindcss",
+		"waderyan.gitblame"
 	],
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	"forwardPorts": [3000, 3001],
 	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "cp apps/api/.env.example pps/api/.env && pnpm install && pnpm db:push && pnpm db:seed",
+	"postCreateCommand": "cp apps/api/.env.example apps/api/.env && pnpm install && pnpm db:push && pnpm db:seed",
 	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
 	"remoteUser": "node",
 	"features": {

.github/workflows/production-release.yml

@@ -2,14 +2,14 @@ name: production-release
 
 on:
   release:
-    types: [published]
+    types: [released]
 
 jobs:
-  making-something-cool:
-    runs-on: ubuntu-latest
+  arm64-build:
+    runs-on: [self-hosted, arm64]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1
       - name: Set up Docker Buildx
@@ -26,11 +26,59 @@ jobs:
         uses: docker/build-push-action@v2
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/arm64
           push: true
-          tags: coollabsio/coolify:latest,coollabsio/coolify:${{steps.package-version.outputs.current-version}}
-          cache-from: type=registry,ref=coollabsio/coolify:buildcache
-          cache-to: type=registry,ref=coollabsio/coolify:buildcache,mode=max
+          tags: coollabsio/coolify:${{steps.package-version.outputs.current-version}}-arm64
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-arm64
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-arm64,mode=max
+  amd64-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: coollabsio/coolify:${{steps.package-version.outputs.current-version}}-amd64
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-amd64
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-amd64,mode=max
+  merge-manifest:
+    runs-on: ubuntu-latest
+    needs: [amd64-build, arm64-build]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
+      - name: Create & publish manifest
+        run: |
+          docker manifest create coollabsio/coolify:${{steps.package-version.outputs.current-version}} --amend coollabsio/coolify:${{steps.package-version.outputs.current-version}}-amd64 --amend coollabsio/coolify:${{steps.package-version.outputs.current-version}}-arm64
+          docker manifest push coollabsio/coolify:${{steps.package-version.outputs.current-version}}
       - uses: sarisia/actions-status-discord@v1
         if: always()
         with:

.github/workflows/release-candidate.yml

@@ -0,0 +1,90 @@
+name: release-candidate
+on:
+  release:
+    types: [prereleased]
+
+jobs:
+  arm64-making-something-cool:
+    runs-on: [self-hosted, arm64]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "next"
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/arm64
+          push: true
+          tags: coollabsio/coolify:${{github.event.release.name}}-arm64
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-rc-arm64
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-rc-arm64,mode=max
+      - uses: sarisia/actions-status-discord@v1
+        if: always()
+        with:
+          webhook: ${{ secrets.DISCORD_WEBHOOK_DEV_RELEASE_CHANNEL }}
+  amd64-making-something-cool:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "next"
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: coollabsio/coolify:${{github.event.release.name}}-amd64
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-rc-amd64
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-rc-amd64,mode=max
+      - uses: sarisia/actions-status-discord@v1
+        if: always()
+        with:
+          webhook: ${{ secrets.DISCORD_WEBHOOK_DEV_RELEASE_CHANNEL }}
+  merge-manifest-to-be-cool:
+    runs-on: ubuntu-latest
+    needs: [arm64-making-something-cool, amd64-making-something-cool]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Create & publish manifest
+        run: |
+          docker manifest create coollabsio/coolify:${{github.event.release.name}} --amend coollabsio/coolify:${{github.event.release.name}}-amd64 --amend coollabsio/coolify:${{github.event.release.name}}-arm64
+          docker manifest push coollabsio/coolify:${{github.event.release.name}}
+          

.github/workflows/staging-release.yml

@@ -6,11 +6,13 @@ on:
       - next
 
 jobs:
-  staging-release:
-    runs-on: ubuntu-latest
+  arm64-making-something-cool:
+    runs-on: [self-hosted, arm64]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+        with:
+          ref: "next"
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1
       - name: Set up Docker Buildx
@@ -20,15 +22,65 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
       - name: Build and push
         uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/arm64
+          push: true
+          tags: coollabsio/coolify:next-arm64
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-next-arm64
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-next-arm64,mode=max
+  amd64-making-something-cool:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "next"
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
+      - name: Build and push
+        uses: docker/build-push-action@v3
         with:
           context: .
           platforms: linux/amd64
           push: true
-          tags: coollabsio/coolify:next
-          cache-from: type=registry,ref=coollabsio/coolify:buildcache-next
-          cache-to: type=registry,ref=coollabsio/coolify:buildcache-next,mode=max
+          tags: coollabsio/coolify:next-amd64,coollabsio/coolify:next-test
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-next-amd64
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-next-amd64,mode=max
+  merge-manifest-to-be-cool:
+    runs-on: ubuntu-latest
+    needs: [arm64-making-something-cool, amd64-making-something-cool]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Create & publish manifest
+        run: |
+          docker manifest create coollabsio/coolify:next --amend coollabsio/coolify:next-amd64 --amend coollabsio/coolify:next-arm64
+          docker manifest push coollabsio/coolify:next
       - uses: sarisia/actions-status-discord@v1
         if: always()
         with:

CONTRIBUTING.md

@@ -125,7 +125,7 @@ If you are finished with the Prisma schema, you should update the database schem
 
 Supported versions are hardcoded into Coolify (for now).
 
-You need to update `supportedServiceTypesAndVersions` function at [src/apps/api/src/lib/supportedVersions.ts](src/apps/api/src/lib/supportedVersions.ts). Example JSON:
+You need to update `supportedServiceTypesAndVersions` function at [apps/api/src/lib/services/supportedVersions.ts](apps/api/src/lib/services/supportedVersions.ts). Example JSON:
 
 ```js
      {
@@ -208,22 +208,22 @@ export const umami = [{
 
 4. Add service deletion query to `removeService` function in [apps/api/src/lib/services/common.ts](apps/api/src/lib/services/common.ts)
 
-
-5. You need to add start process for the new service in [apps/api/src/routes/api/v1/services/handlers.ts](apps/api/src/routes/api/v1/services/handlers.ts)
+5. Add start process for the new service in [apps/api/src/lib/services/handlers.ts](apps/api/src/lib/services/handlers.ts)
 
 > See startUmamiService() function as example.
 
+6. Add the newly added start process to `startService` in [apps/api/src/routes/api/v1/services/handlers.ts](apps/api/src/routes/api/v1/services/handlers.ts)
 
-6. You need to add a custom logo at [apps/ui/src/lib/components/svg/services](apps/ui/src/lib/components/svg/services) as a svelte component and export it in [apps/ui/src/lib/components/svg/services/index.ts](apps/ui/src/lib/components/svg/services/index.ts)
+7. You need to add a custom logo at [apps/ui/src/lib/components/svg/services](apps/ui/src/lib/components/svg/services) as a svelte component and export it in [apps/ui/src/lib/components/svg/services/index.ts](apps/ui/src/lib/components/svg/services/index.ts)
 
    SVG is recommended, but you can use PNG as well. It should have the `isAbsolute` variable with the suitable CSS classes, primarily for sizing and positioning.
 
-7. You need to include it the logo at:
+8. You need to include it the logo at:
 
 - [apps/ui/src/lib/components/svg/services/ServiceIcons.svelte](apps/ui/src/lib/components/svg/services/ServiceIcons.svelte) with `isAbsolute`.
 - [apps/ui/src/routes/services/[id]/_ServiceLinks.svelte](apps/ui/src/routes/services/[id]/_ServiceLinks.svelte) with the link to the docs/main site of the service
 
-8. By default the URL and the name frontend forms are included in [apps/ui/src/routes/services/[id]/_Services/_Services.svelte](apps/ui/src/routes/services/[id]/_Services/_Services.svelte).
+9. By default the URL and the name frontend forms are included in [apps/ui/src/routes/services/[id]/_Services/_Services.svelte](apps/ui/src/routes/services/[id]/_Services/_Services.svelte).
 
    If you need to show more details on the frontend, such as users/passwords, you need to add Svelte component to [apps/ui/src/routes/services/[id]/_Services](apps/ui/src/routes/services/[id]/_Services) with an underscore. 
    

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,30 +1,26 @@
-FROM node:18-alpine3.16 as build
+ARG PNPM_VERSION=7.11.0
+ARG NPM_VERSION=8.19.1
+
+FROM node:18-slim as build
 WORKDIR /app
 
-RUN apk add --no-cache curl
-RUN curl -sL https://unpkg.com/@pnpm/self-installer | node
+RUN apt update && apt -y install curl
+RUN npm --no-update-notifier --no-fund --global install pnpm@${PNPM_VERSION}
 
 COPY . .
 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:4.2.0 /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 curl -sL https://unpkg.com/@pnpm/self-installer | node
+RUN apt update && apt -y install --no-install-recommends ca-certificates git git-lfs openssh-client curl jq cmake sqlite3 openssl psmisc python3
+RUN apt-get clean autoclean && apt-get autoremove --yes && rm -rf /var/lib/{apt,dpkg,cache,log}/
+RUN npm --no-update-notifier --no-fund --global install pnpm@${PNPM_VERSION}
+RUN npm install -g npm@${PNPM_VERSION}
 
 RUN mkdir -p ~/.docker/cli-plugins/
 # https://download.docker.com/linux/static/stable/

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": "4.2.1",
+    "@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": "4.2.1",
+    "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/20220831095714_service_weblate/migration.sql

@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "Weblate" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "adminPassword" TEXT NOT NULL,
+    "postgresqlHost" TEXT NOT NULL,
+    "postgresqlPort" INTEGER NOT NULL,
+    "postgresqlUser" TEXT NOT NULL,
+    "postgresqlPassword" TEXT NOT NULL,
+    "postgresqlDatabase" TEXT NOT NULL,
+    "postgresqlPublicPort" INTEGER,
+    "serviceId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Weblate_serviceId_fkey" FOREIGN KEY ("serviceId") REFERENCES "Service" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Weblate_serviceId_key" ON "Weblate"("serviceId");

apps/api/prisma/migrations/20220902115640_service_taiga/migration.sql

@@ -0,0 +1,23 @@
+-- CreateTable
+CREATE TABLE "Taiga" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "secretKey" TEXT NOT NULL,
+    "erlangSecret" TEXT NOT NULL,
+    "djangoAdminPassword" TEXT NOT NULL,
+    "djangoAdminUser" TEXT NOT NULL,
+    "rabbitMQUser" TEXT NOT NULL,
+    "rabbitMQPassword" TEXT NOT NULL,
+    "postgresqlHost" TEXT NOT NULL,
+    "postgresqlPort" INTEGER NOT NULL,
+    "postgresqlUser" TEXT NOT NULL,
+    "postgresqlPassword" TEXT NOT NULL,
+    "postgresqlDatabase" TEXT NOT NULL,
+    "postgresqlPublicPort" INTEGER,
+    "serviceId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Taiga_serviceId_fkey" FOREIGN KEY ("serviceId") REFERENCES "Service" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Taiga_serviceId_key" ON "Taiga"("serviceId");

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/migrations/20220906120112_enable_api_debug_logging/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Setting" ADD COLUMN "isAPIDebuggingEnabled" BOOLEAN DEFAULT false;

apps/api/prisma/migrations/20220907092244_database_secrets/migration.sql

@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "DatabaseSecret" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "databaseId" TEXT NOT NULL,
+    CONSTRAINT "DatabaseSecret_databaseId_fkey" FOREIGN KEY ("databaseId") REFERENCES "Database" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DatabaseSecret_name_databaseId_key" ON "DatabaseSecret"("name", "databaseId");

apps/api/prisma/schema.prisma

@@ -1,6 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "linux-musl"]
+  binaryTargets = ["native"]
 }
 
 datasource db {
@@ -11,6 +11,7 @@ datasource db {
 model Setting {
   id                    String   @id @default(cuid())
   fqdn                  String?  @unique
+  isAPIDebuggingEnabled Boolean? @default(false)
   isRegistrationEnabled Boolean  @default(false)
   dualCerts             Boolean  @default(false)
   minPort               Int      @default(9000)
@@ -117,6 +118,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 +147,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 +206,7 @@ model BuildLog {
   applicationId String?
   buildId       String
   line          String
-  time          Int
+  time          BigInt
 }
 
 model Build {
@@ -200,7 +220,7 @@ model Build {
   commit              String?
   pullmergeRequestId  String?
   forceRebuild        Boolean  @default(false)
-  sourceBranch        String?  
+  sourceBranch        String?
   branch              String?
   status              String?  @default("queued")
   createdAt           DateTime @default(now())
@@ -291,22 +311,36 @@ 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[]
+  databaseSecret               DatabaseSecret[]
+}
+
+model DatabaseSecret {
+  id         String   @id @default(cuid())
+  name       String
+  value      String
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+  databaseId String
+  database   Database @relation(fields: [databaseId], references: [id])
+
+  @@unique([name, databaseId])
 }
 
 model DatabaseSettings {
@@ -348,6 +382,8 @@ model Service {
   wordpress          Wordpress?
   appwrite           Appwrite?
   searxng            Searxng?
+  weblate            Weblate?
+  taiga              Taiga?
 }
 
 model PlausibleAnalytics {
@@ -559,3 +595,38 @@ model Searxng {
   updatedAt     DateTime @updatedAt
   service       Service  @relation(fields: [serviceId], references: [id])
 }
+
+model Weblate {
+  id                   String   @id @default(cuid())
+  adminPassword        String
+  postgresqlHost       String
+  postgresqlPort       Int
+  postgresqlUser       String
+  postgresqlPassword   String
+  postgresqlDatabase   String
+  postgresqlPublicPort Int?
+  serviceId            String   @unique
+  createdAt            DateTime @default(now())
+  updatedAt            DateTime @updatedAt
+  service              Service  @relation(fields: [serviceId], references: [id])
+}
+
+model Taiga {
+  id                   String   @id @default(cuid())
+  secretKey            String
+  erlangSecret         String
+  djangoAdminPassword  String
+  djangoAdminUser      String
+  rabbitMQUser         String
+  rabbitMQPassword     String
+  postgresqlHost       String
+  postgresqlPort       Int
+  postgresqlUser       String
+  postgresqlPassword   String
+  postgresqlDatabase   String
+  postgresqlPublicPort Int?
+  serviceId            String   @unique
+  createdAt            DateTime @default(now())
+  updatedAt            DateTime @updatedAt
+  service              Service  @relation(fields: [serviceId], references: [id])
+}

apps/api/prisma/seed.js

@@ -17,7 +17,6 @@ const algorithm = 'aes-256-ctr';
 
 async function main() {
 	// Enable registration for the first user
-	// Set initial HAProxy password
 	const settingsFound = await prisma.setting.findFirst({});
 	if (!settingsFound) {
 		await prisma.setting.create({
@@ -25,7 +24,8 @@ async function main() {
 				isRegistrationEnabled: true,
 				proxyPassword: encrypt(generatePassword()),
 				proxyUser: cuid(),
-				arch: process.arch
+				arch: process.arch,
+				DNSServers: '1.1.1.1,8.8.8.8'
 			}
 		});
 	} else {

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, getDomain, isDev, listSettings, prisma, version } from './lib/common';
 import { scheduler } from './lib/scheduler';
 import { compareVersions } from 'compare-versions';
 import Graceful from '@ladjs/graceful'
@@ -26,119 +26,143 @@ declare module 'fastify' {
 
 const port = isDev ? 3001 : 3000;
 const host = '0.0.0.0';
-const fastify = Fastify({
-	logger: false,
-	trustProxy: true
-});
-const schema = {
-	type: 'object',
-	required: ['COOLIFY_SECRET_KEY', 'COOLIFY_DATABASE_URL', 'COOLIFY_IS_ON'],
-	properties: {
-		COOLIFY_APP_ID: {
-			type: 'string',
-		},
-		COOLIFY_SECRET_KEY: {
-			type: 'string',
-		},
-		COOLIFY_DATABASE_URL: {
-			type: 'string',
-			default: 'file:../db/dev.db'
-		},
-		COOLIFY_SENTRY_DSN: {
-			type: 'string',
-			default: null
-		},
-		COOLIFY_IS_ON: {
-			type: 'string',
-			default: 'docker'
-		},
-		COOLIFY_WHITE_LABELED: {
-			type: 'string',
-			default: 'false'
-		},
-		COOLIFY_WHITE_LABELED_ICON: {
-			type: 'string',
-			default: null
-		},
-		COOLIFY_AUTO_UPDATE: {
-			type: 'string',
-			default: 'false'
-		},
-
-	}
-};
-
-const options = {
-	schema,
-	dotenv: true
-};
-fastify.register(env, options);
-if (!isDev) {
-	fastify.register(serve, {
-		root: path.join(__dirname, './public'),
-		preCompressed: true
+prisma.setting.findFirst().then(async (settings) => {
+	const fastify = Fastify({
+		logger: settings?.isAPIDebuggingEnabled || false,
+		trustProxy: true
 	});
-	fastify.setNotFoundHandler(async function (request, reply) {
-		if (request.raw.url && request.raw.url.startsWith('/api')) {
-			return reply.status(404).send({
-				success: false
-			});
-		}
-		return reply.status(200).sendFile('index.html');
-	});
-}
-fastify.register(autoLoad, {
-	dir: join(__dirname, 'plugins')
-});
-fastify.register(autoLoad, {
-	dir: join(__dirname, 'routes')
-});
+	const schema = {
+		type: 'object',
+		required: ['COOLIFY_SECRET_KEY', 'COOLIFY_DATABASE_URL', 'COOLIFY_IS_ON'],
+		properties: {
+			COOLIFY_APP_ID: {
+				type: 'string',
+			},
+			COOLIFY_SECRET_KEY: {
+				type: 'string',
+			},
+			COOLIFY_DATABASE_URL: {
+				type: 'string',
+				default: 'file:../db/dev.db'
+			},
+			COOLIFY_SENTRY_DSN: {
+				type: 'string',
+				default: null
+			},
+			COOLIFY_IS_ON: {
+				type: 'string',
+				default: 'docker'
+			},
+			COOLIFY_WHITE_LABELED: {
+				type: 'string',
+				default: 'false'
+			},
+			COOLIFY_WHITE_LABELED_ICON: {
+				type: 'string',
+				default: null
+			},
+			COOLIFY_AUTO_UPDATE: {
+				type: 'string',
+				default: 'false'
+			},
 
-fastify.register(cookie)
-fastify.register(cors);
-fastify.listen({ port, host }, async (err: any, address: any) => {
-	if (err) {
-		console.error(err);
-		process.exit(1);
+		}
+	};
+
+	const options = {
+		schema,
+		dotenv: true
+	};
+	fastify.register(env, options);
+	if (!isDev) {
+		fastify.register(serve, {
+			root: path.join(__dirname, './public'),
+			preCompressed: true
+		});
+		fastify.setNotFoundHandler(async function (request, reply) {
+			if (request.raw.url && request.raw.url.startsWith('/api')) {
+				return reply.status(404).send({
+					success: false
+				});
+			}
+			return reply.status(200).sendFile('index.html');
+		});
 	}
-	console.log(`Coolify's API is listening on ${host}:${port}`);
-	await initServer();
+	fastify.register(autoLoad, {
+		dir: join(__dirname, 'plugins')
+	});
+	fastify.register(autoLoad, {
+		dir: join(__dirname, 'routes')
+	});
 
-	const graceful = new Graceful({ brees: [scheduler] });
-	graceful.listen();
+	fastify.register(cookie)
+	fastify.register(cors);
+	fastify.addHook('onRequest', async (request, reply) => {
+		let allowedList = ['coolify:3000'];
+		const { ipv4, ipv6, fqdn } = await prisma.setting.findFirst({})
 
-	setInterval(async () => {
-		if (!scheduler.workers.has('deployApplication')) {
-			scheduler.run('deployApplication');
+		ipv4 && allowedList.push(`${ipv4}:3000`);
+		ipv6 && allowedList.push(ipv6);
+		fqdn && allowedList.push(getDomain(fqdn));
+		isDev && allowedList.push('localhost:3000') && allowedList.push('localhost:3001') && allowedList.push('host.docker.internal:3001');
+		const remotes = await prisma.destinationDocker.findMany({ where: { remoteEngine: true, remoteVerified: true } })
+		if (remotes.length > 0) {
+			remotes.forEach(remote => {
+				allowedList.push(`${remote.remoteIpAddress}:3000`);
+			})
 		}
-		if (!scheduler.workers.has('infrastructure')) {
-			scheduler.run('infrastructure');
+		if (!allowedList.includes(request.headers.host)) {
+			// console.log('not allowed', request.headers.host)
 		}
-	}, 2000)
+	})
+	fastify.listen({ port, host }, async (err: any, address: any) => {
+		if (err) {
+			console.error(err);
+			process.exit(1);
+		}
+		console.log(`Coolify's API is listening on ${host}:${port}`);
+		await initServer();
 
-	// autoUpdater
-	setInterval(async () => {
-		scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:autoUpdater")
-	}, isDev ? 5000 : 60000 * 15)
+		const graceful = new Graceful({ brees: [scheduler] });
+		graceful.listen();
 
-	// cleanupStorage
-	setInterval(async () => {
-		scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupStorage")
-	}, isDev ? 6000 : 60000 * 10)
+		setInterval(async () => {
+			if (!scheduler.workers.has('deployApplication')) {
+				scheduler.run('deployApplication');
+			}
+			if (!scheduler.workers.has('infrastructure')) {
+				scheduler.run('infrastructure');
+			}
+		}, 2000)
 
-	// checkProxies
-	setInterval(async () => {
-		scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:checkProxies")
-	}, 10000)
+		// autoUpdater
+		setInterval(async () => {
+			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:autoUpdater")
+		}, isDev ? 5000 : 60000 * 15)
 
-	// cleanupPrismaEngines
-	// setInterval(async () => {
-	// 	scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupPrismaEngines")
-	// }, 60000)
+		// cleanupStorage
+		setInterval(async () => {
+			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupStorage")
+		}, isDev ? 6000 : 60000 * 10)
+
+		// checkProxies
+		setInterval(async () => {
+			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:checkProxies")
+		}, 10000)
+
+		// cleanupPrismaEngines
+		// setInterval(async () => {
+		// 	scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupPrismaEngines")
+		// }, 60000)
+
+		await Promise.all([
+			getArch(),
+			getIPAddress(),
+			configureRemoteDockers(),
+		])
+	});
+})
 
-	await getArch();
-	await getIPAddress();
-});
 async function getIPAddress() {
 	const { publicIpv4, publicIpv6 } = await import('public-ip')
 	try {
@@ -175,4 +199,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) {
@@ -359,21 +357,15 @@ import * as buildpacks from '../lib/buildPacks';
 								await saveBuildLog({ line: error, buildId, applicationId: application.id });
 							}
 						});
-
 					}
-
 					await pAll.default(actions, { concurrency })
 				}
 			} catch (error) {
 				console.log(error)
-			} finally {
 			}
 		})
-
 		while (true) {
 			await th()
 		}
-
-
 	} else process.exit(0);
 })();

apps/api/src/jobs/infrastructure.ts

@@ -1,11 +1,8 @@
 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 disconnect() {
-    await prisma.$disconnect();
-}
 async function autoUpdater() {
     try {
         const currentVersion = version;
@@ -24,20 +21,23 @@ 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(
-                        `docker run --rm -tid --env-file .env -v /var/run/docker.sock:/var/run/docker.sock -v coolify-db coollabsio/coolify:${latestVersion} /bin/sh -c "env | grep COOLIFY > .env && echo 'TAG=${latestVersion}' >> .env && docker stop -t 0 coolify && docker rm coolify && docker compose up -d --force-recreate"`
-                    );
+                    const { isAutoUpdateEnabled } = await prisma.setting.findFirst();
+                    if (isAutoUpdateEnabled) {
+                        await asyncExecShell(`docker pull coollabsio/coolify:${latestVersion}`);
+                        await asyncExecShell(`env | grep COOLIFY > .env`);
+                        await asyncExecShell(
+                            `sed -i '/COOLIFY_AUTO_UPDATE=/cCOOLIFY_AUTO_UPDATE=${isAutoUpdateEnabled}' .env`
+                        );
+                        await asyncExecShell(
+                            `docker run --rm -tid --env-file .env -v /var/run/docker.sock:/var/run/docker.sock -v coolify-db coollabsio/coolify:${latestVersion} /bin/sh -c "env | grep COOLIFY > .env && echo 'TAG=${latestVersion}' >> .env && docker stop -t 0 coolify && docker rm coolify && docker compose up -d --force-recreate"`
+                        );
+                    }
                 } else {
                     console.log('Updating (not really in dev mode).');
                 }
             }
         }
-    } catch (error) {
-        console.log(error);
-    }
+    } catch (error) { }
 }
 async function checkProxies() {
     try {
@@ -45,18 +45,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 +130,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 +181,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

@@ -89,6 +89,22 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
 		}
 	];
 	const phpVersions = [
+		{
+			value: 'webdevops/php-apache:8.2',
+			label: 'webdevops/php-apache:8.2'
+		},
+		{
+			value: 'webdevops/php-nginx:8.2',
+			label: 'webdevops/php-nginx:8.2'
+		},
+		{
+			value: 'webdevops/php-apache:8.1',
+			label: 'webdevops/php-apache:8.1'
+		},
+		{
+			value: 'webdevops/php-nginx:8.1',
+			label: 'webdevops/php-nginx:8.1'
+		},
 		{
 			value: 'webdevops/php-apache:8.0',
 			label: 'webdevops/php-apache:8.0'
@@ -145,6 +161,22 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
 			value: 'webdevops/php-nginx:5.6',
 			label: 'webdevops/php-nginx:5.6'
 		},
+		{
+			value: 'webdevops/php-apache:8.2-alpine',
+			label: 'webdevops/php-apache:8.2-alpine'
+		},
+		{
+			value: 'webdevops/php-nginx:8.2-alpine',
+			label: 'webdevops/php-nginx:8.2-alpine'
+		},
+		{
+			value: 'webdevops/php-apache:8.1-alpine',
+			label: 'webdevops/php-apache:8.1-alpine'
+		},
+		{
+			value: 'webdevops/php-nginx:8.1-alpine',
+			label: 'webdevops/php-nginx:8.1-alpine'
+		},
 		{
 			value: 'webdevops/php-apache:8.0-alpine',
 			label: 'webdevops/php-apache:8.0-alpine'
@@ -305,11 +337,11 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
 		payload.baseImage = 'denoland/deno:latest';
 	}
 	if (buildPack === 'php') {
-		payload.baseImage = 'webdevops/php-apache:8.0-alpine';
+		payload.baseImage = 'webdevops/php-apache:8.2-alpine';
 		payload.baseImages = phpVersions;
 	}
 	if (buildPack === 'laravel') {
-		payload.baseImage = 'webdevops/php-apache:8.0-alpine';
+		payload.baseImage = 'webdevops/php-apache:8.2-alpine';
 		payload.baseBuildImage = 'node:18';
 		payload.baseBuildImages = nodeVersions;
 	}
@@ -512,7 +544,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.8.7';
+export const version = '3.10.0';
 export const isDev = process.env.NODE_ENV === 'development';
 
 const algorithm = 'aes-256-ctr';
@@ -139,10 +139,10 @@ export const prisma = new PrismaClient({
 });
 
 // prisma.$on('query', (e) => {
-	// console.log({e})
-	// console.log('Query: ' + e.query)
-	// console.log('Params: ' + e.params)
-	// console.log('Duration: ' + e.duration + 'ms')
+// console.log({e})
+// console.log('Query: ' + e.query)
+// console.log('Params: ' + e.params)
+// console.log('Duration: ' + e.duration + 'ms')
 //   })
 export const base64Encode = (text: string): string => {
 	return Buffer.from(text).toString('base64');
@@ -193,7 +193,7 @@ export async function isDNSValid(hostname: any, domain: string): Promise<any> {
 	const { isIP } = await import('is-ip');
 	const { DNSServers } = await listSettings();
 	if (DNSServers) {
-		dns.setServers([DNSServers]);
+		dns.setServers([...DNSServers.split(',')]);
 	}
 	let resolves = [];
 	try {
@@ -302,7 +302,7 @@ export async function checkDomainsIsValidInDNS({ hostname, fqdn, dualCerts }): P
 
 	const { DNSServers } = await listSettings();
 	if (DNSServers) {
-		dns.setServers([DNSServers]);
+		dns.setServers([...DNSServers.split(',')]);
 	}
 
 	let resolves = [];
@@ -414,6 +414,12 @@ export const supportedDatabaseTypesAndVersions = [
 		baseImageARM: 'couchdb',
 		versions: ['3.2.2', '3.1.2', '2.3.1'],
 		versionsARM: ['3.2.2', '3.1.2', '2.3.1']
+	},
+	{
+		name: 'edgedb',
+		fancyName: 'EdgeDB',
+		baseImage: 'edgedb/edgedb',
+		versions: ['latest', '2.1', '2.0', '1.4']
 	}
 ];
 
@@ -439,7 +445,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 +463,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('')
@@ -493,8 +499,26 @@ export async function createRemoteEngineConfiguration(id: string) {
 	}
 	return await fs.writeFile(`${homedir}/.ssh/config`, sshConfig.stringify(config))
 }
+export async function executeSSHCmd({ dockerId, command }) {
+	const { execaCommand } = await import('execa')
+	let { remoteEngine, remoteIpAddress, engine, remoteUser } = await prisma.destinationDocker.findUnique({ where: { id: dockerId } })
+	if (remoteEngine) {
+		await createRemoteEngineConfiguration(dockerId)
+		engine = `ssh://${remoteIpAddress}`
+	} else {
+		engine = 'unix:///var/run/docker.sock'
+	}
+	if (process.env.CODESANDBOX_HOST) {
+		if (command.startsWith('docker compose')) {
+			command = command.replace(/docker compose/gi, 'docker-compose')
+		}
+	}
+	command = `ssh ${remoteIpAddress} ${command}`
+	return await execaCommand(command)
+}
 export async function executeDockerCmd({ debug, buildId, applicationId, dockerId, command }: { debug?: boolean, buildId?: string, applicationId?: string, dockerId: string, command: string }): Promise<any> {
-	let { remoteEngine, remoteIpAddress, engine } = await prisma.destinationDocker.findUnique({ where: { id: dockerId } })
+	const { execaCommand } = await import('execa')
+	let { remoteEngine, remoteIpAddress, engine, remoteUser } = await prisma.destinationDocker.findUnique({ where: { id: dockerId } })
 	if (remoteEngine) {
 		await createRemoteEngineConfiguration(dockerId)
 		engine = `ssh://${remoteIpAddress}`
@@ -509,10 +533,7 @@ export async function executeDockerCmd({ debug, buildId, applicationId, dockerId
 	if (command.startsWith(`docker build --progress plain`)) {
 		return await asyncExecShellStream({ debug, buildId, applicationId, command, engine });
 	}
-	return await asyncExecShell(
-		`DOCKER_BUILDKIT=1 DOCKER_HOST="${engine}" ${command}`
-	);
-
+	return await execaCommand(command, { env: { DOCKER_BUILDKIT: "1", DOCKER_HOST: engine }, shell: true })
 }
 export async function startTraefikProxy(id: string): Promise<void> {
 	const { engine, network, remoteEngine, remoteIpAddress } = await prisma.destinationDocker.findUnique({ where: { id } })
@@ -642,21 +663,20 @@ export function generatePassword({ length = 24, symbols = false, isHex = false }
 	return password;
 }
 
-export function generateDatabaseConfiguration(database: any, arch: string):
-	| {
-		volume: string;
-		image: string;
-		command?: string;
-		ulimits: Record<string, unknown>;
-		privatePort: number;
-		environmentVariables: {
-			MYSQL_DATABASE: string;
-			MYSQL_PASSWORD: string;
-			MYSQL_ROOT_USER: string;
-			MYSQL_USER: string;
-			MYSQL_ROOT_PASSWORD: string;
-		};
-	}
+type DatabaseConfiguration = {
+	volume: string;
+	image: string;
+	command?: string;
+	ulimits: Record<string, unknown>;
+	privatePort: number;
+	environmentVariables: {
+		MYSQL_DATABASE: string;
+		MYSQL_PASSWORD: string;
+		MYSQL_ROOT_USER: string;
+		MYSQL_USER: string;
+		MYSQL_ROOT_PASSWORD: string;
+	};
+}
 	| {
 		volume: string;
 		image: string;
@@ -691,22 +711,13 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		ulimits: Record<string, unknown>;
 		privatePort: number;
 		environmentVariables: {
-			POSTGRESQL_POSTGRES_PASSWORD: string;
-			POSTGRESQL_USERNAME: string;
-			POSTGRESQL_PASSWORD: string;
-			POSTGRESQL_DATABASE: string;
-		};
-	}
-	| {
-		volume: string;
-		image: string;
-		command?: string;
-		ulimits: Record<string, unknown>;
-		privatePort: number;
-		environmentVariables: {
-			POSTGRES_USER: string;
-			POSTGRES_PASSWORD: string;
-			POSTGRES_DB: string;
+			POSTGRES_PASSWORD?: string;
+			POSTGRES_USER?: string;
+			POSTGRES_DB?: string;
+			POSTGRESQL_POSTGRES_PASSWORD?: string;
+			POSTGRESQL_USERNAME?: string;
+			POSTGRESQL_PASSWORD?: string;
+			POSTGRESQL_DATABASE?: string;
 		};
 	}
 	| {
@@ -730,7 +741,21 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 			COUCHDB_PASSWORD: string;
 			COUCHDB_USER: string;
 		};
-	} {
+	}
+	| {
+		volume: string;
+		image: string;
+		command?: string;
+		ulimits: Record<string, unknown>;
+		privatePort: number;
+		environmentVariables: {
+			EDGEDB_SERVER_PASSWORD: string;
+			EDGEDB_SERVER_USER: string;
+			EDGEDB_SERVER_DATABASE: string;
+			EDGEDB_SERVER_TLS_CERT_MODE: string;
+		};
+	}
+export function generateDatabaseConfiguration(database: any, arch: string): DatabaseConfiguration {
 	const {
 		id,
 		dbUser,
@@ -740,7 +765,6 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		defaultDatabase,
 		version,
 		type,
-		settings: { appendOnly }
 	} = database;
 	const baseImage = getDatabaseImage(type, arch);
 	if (type === 'mysql') {
@@ -762,7 +786,7 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		}
 		return configuration
 	} else if (type === 'mariadb') {
-		const configuration = {
+		const configuration: DatabaseConfiguration = {
 			privatePort: 3306,
 			environmentVariables: {
 				MARIADB_ROOT_USER: rootUser,
@@ -780,7 +804,7 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		}
 		return configuration
 	} else if (type === 'mongodb') {
-		const configuration = {
+		const configuration: DatabaseConfiguration = {
 			privatePort: 27017,
 			environmentVariables: {
 				MONGODB_ROOT_USER: rootUser,
@@ -799,7 +823,7 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		}
 		return configuration
 	} else if (type === 'postgresql') {
-		const configuration = {
+		const configuration: DatabaseConfiguration = {
 			privatePort: 5432,
 			environmentVariables: {
 				POSTGRESQL_POSTGRES_PASSWORD: rootUserPassword,
@@ -821,7 +845,8 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		}
 		return configuration
 	} else if (type === 'redis') {
-		const configuration = {
+		const { settings: { appendOnly } } = database;
+		const configuration: DatabaseConfiguration = {
 			privatePort: 6379,
 			command: undefined,
 			environmentVariables: {
@@ -838,7 +863,7 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 		}
 		return configuration
 	} else if (type === 'couchdb') {
-		const configuration = {
+		const configuration: DatabaseConfiguration = {
 			privatePort: 5984,
 			environmentVariables: {
 				COUCHDB_PASSWORD: dbUserPassword,
@@ -852,6 +877,20 @@ export function generateDatabaseConfiguration(database: any, arch: string):
 			configuration.volume = `${id}-${type}-data:/opt/couchdb/data`;
 		}
 		return configuration
+	} else if (type === 'edgedb') {
+		const configuration: DatabaseConfiguration = {
+			privatePort: 5656,
+			environmentVariables: {
+				EDGEDB_SERVER_PASSWORD: rootUserPassword,
+				EDGEDB_SERVER_USER: rootUser,
+				EDGEDB_SERVER_DATABASE: defaultDatabase,
+				EDGEDB_SERVER_TLS_CERT_MODE: 'generate_self_signed'
+			},
+			image: `${baseImage}:${version}`,
+			volume: `${id}-${type}-data:/var/lib/edgedb/data`,
+			ulimits: {}
+		};
+		return configuration
 	}
 }
 export function isARM(arch: string) {
@@ -974,9 +1013,14 @@ export const createDirectories = async ({
 }): Promise<{ workdir: string; repodir: string }> => {
 	const repodir = `/tmp/build-sources/${repository}/`;
 	const workdir = `/tmp/build-sources/${repository}/${buildId}`;
-
+	let workdirFound = false;
+	try {
+		workdirFound = !!(await fs.stat(workdir));
+	} catch (error) { }
+	if (workdirFound) {
+		await asyncExecShell(`rm -fr ${workdir}`);
+	}
 	await asyncExecShell(`mkdir -p ${workdir}`);
-
 	return {
 		workdir,
 		repodir
@@ -1085,91 +1129,150 @@ export async function updatePasswordInDb(database, user, newPassword, isRoot) {
 		}
 	}
 }
-export async function checkExposedPort({ id, configuredPort, exposePort, dockerId, remoteIpAddress }: { id: string, configuredPort?: number, exposePort: number, dockerId: string, remoteIpAddress?: string }) {
+export async function checkExposedPort({ id, configuredPort, exposePort, engine, remoteEngine, remoteIpAddress }: { id: string, configuredPort?: number, exposePort: number, engine: string, remoteEngine: boolean, remoteIpAddress?: string }) {
 	if (exposePort < 1024 || exposePort > 65535) {
 		throw { status: 500, message: `Exposed Port needs to be between 1024 and 65535.` }
 	}
-
 	if (configuredPort) {
 		if (configuredPort !== exposePort) {
-			const availablePort = await getFreeExposedPort(id, exposePort, dockerId, remoteIpAddress);
+			const availablePort = await getFreeExposedPort(id, exposePort, engine, remoteEngine, remoteIpAddress);
 			if (availablePort.toString() !== exposePort.toString()) {
 				throw { status: 500, message: `Port ${exposePort} is already in use.` }
 			}
 		}
 	} else {
-		const availablePort = await getFreeExposedPort(id, exposePort, dockerId, remoteIpAddress);
+		const availablePort = await getFreeExposedPort(id, exposePort, engine, remoteEngine, remoteIpAddress);
 		if (availablePort.toString() !== exposePort.toString()) {
 			throw { status: 500, message: `Port ${exposePort} is already in use.` }
 		}
 	}
 }
-export async function getFreeExposedPort(id, exposePort, dockerId, remoteIpAddress) {
+export async function getFreeExposedPort(id, exposePort, engine, remoteEngine, remoteIpAddress) {
 	const { default: checkPort } = await import('is-port-reachable');
-	const applicationUsed = await (
-		await prisma.application.findMany({
-			where: { exposePort: { not: null }, id: { not: id }, destinationDockerId: dockerId },
-			select: { exposePort: true }
-		})
-	).map((a) => a.exposePort);
-	const serviceUsed = await (
-		await prisma.service.findMany({
-			where: { exposePort: { not: null }, id: { not: id }, destinationDockerId: dockerId },
-			select: { exposePort: true }
-		})
-	).map((a) => a.exposePort);
-	const usedPorts = [...applicationUsed, ...serviceUsed];
-	if (usedPorts.includes(exposePort)) {
+	if (remoteEngine) {
+		const applicationUsed = await (
+			await prisma.application.findMany({
+				where: { exposePort: { not: null }, id: { not: id }, destinationDocker: { remoteIpAddress } },
+				select: { exposePort: true }
+			})
+		).map((a) => a.exposePort);
+		const serviceUsed = await (
+			await prisma.service.findMany({
+				where: { exposePort: { not: null }, id: { not: id }, destinationDocker: { remoteIpAddress } },
+				select: { exposePort: true }
+			})
+		).map((a) => a.exposePort);
+		const usedPorts = [...applicationUsed, ...serviceUsed];
+		if (usedPorts.includes(exposePort)) {
+			return false
+		}
+		const found = await checkPort(exposePort, { host: remoteIpAddress });
+		if (!found) {
+			return exposePort
+		}
+		return false
+	} else {
+		const applicationUsed = await (
+			await prisma.application.findMany({
+				where: { exposePort: { not: null }, id: { not: id }, destinationDocker: { engine } },
+				select: { exposePort: true }
+			})
+		).map((a) => a.exposePort);
+		const serviceUsed = await (
+			await prisma.service.findMany({
+				where: { exposePort: { not: null }, id: { not: id }, destinationDocker: { engine } },
+				select: { exposePort: true }
+			})
+		).map((a) => a.exposePort);
+		const usedPorts = [...applicationUsed, ...serviceUsed];
+		if (usedPorts.includes(exposePort)) {
+			return false
+		}
+		const found = await checkPort(exposePort, { host: 'localhost' });
+		if (!found) {
+			return exposePort
+		}
 		return false
 	}
-	const found = await checkPort(exposePort, { host: remoteIpAddress || 'localhost' });
-	if (!found) {
-		return exposePort
-	}
-	return false
-
 }
 export function generateRangeArray(start, end) {
 	return Array.from({ length: (end - start) }, (v, k) => k + start);
 }
-export async function getFreePublicPort(id, dockerId) {
+export async function getFreePublicPort({ id, remoteEngine, engine, remoteIpAddress }) {
 	const { default: isReachable } = await import('is-port-reachable');
 	const data = await prisma.setting.findFirst();
 	const { minPort, maxPort } = data;
-	const dbUsed = await (
-		await prisma.database.findMany({
-			where: { publicPort: { not: null }, id: { not: id }, destinationDockerId: dockerId },
-			select: { publicPort: true }
-		})
-	).map((a) => a.publicPort);
-	const wpFtpUsed = await (
-		await prisma.wordpress.findMany({
-			where: { ftpPublicPort: { not: null }, id: { not: id }, service: { destinationDockerId: dockerId } },
-			select: { ftpPublicPort: true }
-		})
-	).map((a) => a.ftpPublicPort);
-	const wpUsed = await (
-		await prisma.wordpress.findMany({
-			where: { mysqlPublicPort: { not: null }, id: { not: id }, service: { destinationDockerId: dockerId } },
-			select: { mysqlPublicPort: true }
-		})
-	).map((a) => a.mysqlPublicPort);
-	const minioUsed = await (
-		await prisma.minio.findMany({
-			where: { publicPort: { not: null }, id: { not: id }, service: { destinationDockerId: dockerId } },
-			select: { publicPort: true }
-		})
-	).map((a) => a.publicPort);
-	const usedPorts = [...dbUsed, ...wpFtpUsed, ...wpUsed, ...minioUsed];
-	const range = generateRangeArray(minPort, maxPort)
-	const availablePorts = range.filter(port => !usedPorts.includes(port))
-	for (const port of availablePorts) {
-		const found = await isReachable(port, { host: 'localhost' })
-		if (!found) {
-			return port
+	if (remoteEngine) {
+		const dbUsed = await (
+			await prisma.database.findMany({
+				where: { publicPort: { not: null }, id: { not: id }, destinationDocker: { remoteIpAddress } },
+				select: { publicPort: true }
+			})
+		).map((a) => a.publicPort);
+		const wpFtpUsed = await (
+			await prisma.wordpress.findMany({
+				where: { ftpPublicPort: { not: null }, id: { not: id }, service: { destinationDocker: { remoteIpAddress } } },
+				select: { ftpPublicPort: true }
+			})
+		).map((a) => a.ftpPublicPort);
+		const wpUsed = await (
+			await prisma.wordpress.findMany({
+				where: { mysqlPublicPort: { not: null }, id: { not: id }, service: { destinationDocker: { remoteIpAddress } } },
+				select: { mysqlPublicPort: true }
+			})
+		).map((a) => a.mysqlPublicPort);
+		const minioUsed = await (
+			await prisma.minio.findMany({
+				where: { publicPort: { not: null }, id: { not: id }, service: { destinationDocker: { remoteIpAddress } } },
+				select: { publicPort: true }
+			})
+		).map((a) => a.publicPort);
+		const usedPorts = [...dbUsed, ...wpFtpUsed, ...wpUsed, ...minioUsed];
+		const range = generateRangeArray(minPort, maxPort)
+		const availablePorts = range.filter(port => !usedPorts.includes(port))
+		for (const port of availablePorts) {
+			const found = await isReachable(port, { host: remoteIpAddress })
+			if (!found) {
+				return port
+			}
 		}
+		return false
+	} else {
+		const dbUsed = await (
+			await prisma.database.findMany({
+				where: { publicPort: { not: null }, id: { not: id }, destinationDocker: { engine } },
+				select: { publicPort: true }
+			})
+		).map((a) => a.publicPort);
+		const wpFtpUsed = await (
+			await prisma.wordpress.findMany({
+				where: { ftpPublicPort: { not: null }, id: { not: id }, service: { destinationDocker: { engine } } },
+				select: { ftpPublicPort: true }
+			})
+		).map((a) => a.ftpPublicPort);
+		const wpUsed = await (
+			await prisma.wordpress.findMany({
+				where: { mysqlPublicPort: { not: null }, id: { not: id }, service: { destinationDocker: { engine } } },
+				select: { mysqlPublicPort: true }
+			})
+		).map((a) => a.mysqlPublicPort);
+		const minioUsed = await (
+			await prisma.minio.findMany({
+				where: { publicPort: { not: null }, id: { not: id }, service: { destinationDocker: { engine } } },
+				select: { publicPort: true }
+			})
+		).map((a) => a.publicPort);
+		const usedPorts = [...dbUsed, ...wpFtpUsed, ...wpUsed, ...minioUsed];
+		const range = generateRangeArray(minPort, maxPort)
+		const availablePorts = range.filter(port => !usedPorts.includes(port))
+		for (const port of availablePorts) {
+			const found = await isReachable(port, { host: 'localhost' })
+			if (!found) {
+				return port
+			}
+		}
+		return false
 	}
-	return false
 }
 
 export async function startTraefikTCPProxy(
@@ -1249,7 +1352,6 @@ export async function startTraefikTCPProxy(
 			})
 		}
 	} catch (error) {
-		console.log(error);
 		return error;
 	}
 }
@@ -1309,6 +1411,9 @@ export function saveUpdateableFields(type: string, data: any) {
 					temp = Boolean(temp)
 				}
 			}
+			if (k.isNumber && temp === '') {
+				temp = null
+			}
 			update[k.name] = temp
 		});
 	}
@@ -1351,9 +1456,9 @@ export const getServiceMainPort = (service: string) => {
 export function makeLabelForServices(type) {
 	return [
 		'coolify.managed=true',
-		`coolify.version = ${version}`,
-		`coolify.type = service`,
-		`coolify.service.type = ${type}`
+		`coolify.version=${version}`,
+		`coolify.type=service`,
+		`coolify.service.type=${type}`
 	];
 }
 export function errorHandler({ status = 500, message = 'Unknown error.' }: { status: number, message: string | any }) {
@@ -1434,15 +1539,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}`);
@@ -1450,37 +1553,40 @@ 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) { }
 	}
 }
 
 export function persistentVolumes(id, persistentStorage, config) {
+	let volumeSet = new Set();
+	if (Object.keys(config).length > 0) {
+		for (const [key, value] of Object.entries(config)) {
+			if (value.volumes) {
+				for (const volume of value.volumes) {
+					volumeSet.add(volume);
+				}
+			}
+
+		}
+	}
+	const volumesArray = Array.from(volumeSet);
 	const persistentVolume =
 		persistentStorage?.map((storage) => {
 			return `${id}${storage.path.replace(/\//gi, '-')}:${storage.path}`;
 		}) || [];
 
 	let volumes = [...persistentVolume]
-	if (config.volume) volumes = [config.volume, ...volumes]
-
+	if (volumesArray) volumes = [...volumesArray, ...volumes]
 	const composeVolumes = volumes.length > 0 && volumes.map((volume) => {
 		return {
 			[`${volume.split(':')[0]}`]: {
@@ -1489,16 +1595,11 @@ export function persistentVolumes(id, persistentStorage, config) {
 		};
 	}) || []
 
-	const volumeMounts = config.volume && Object.assign(
+	const volumeMounts = Object.assign(
 		{},
-		{
-			[config.volume.split(':')[0]]: {
-				name: config.volume.split(':')[0]
-			}
-		},
 		...composeVolumes
 	) || {}
-	return { volumes, volumeMounts }
+	return { volumeMounts }
 }
 export function defaultComposeConfiguration(network: string): any {
 	return {
@@ -1515,26 +1616,26 @@ export function defaultComposeConfiguration(network: string): any {
 	}
 }
 export function decryptApplication(application: any) {
-    if (application) {
-        if (application?.gitSource?.githubApp?.clientSecret) {
-            application.gitSource.githubApp.clientSecret = decrypt(application.gitSource.githubApp.clientSecret) || null;
-        }
-        if (application?.gitSource?.githubApp?.webhookSecret) {
-            application.gitSource.githubApp.webhookSecret = decrypt(application.gitSource.githubApp.webhookSecret) || null;
-        }
-        if (application?.gitSource?.githubApp?.privateKey) {
-            application.gitSource.githubApp.privateKey = decrypt(application.gitSource.githubApp.privateKey) || null;
-        }
-        if (application?.gitSource?.gitlabApp?.appSecret) {
-            application.gitSource.gitlabApp.appSecret = decrypt(application.gitSource.gitlabApp.appSecret) || null;
-        }
-        if (application?.secrets.length > 0) {
-            application.secrets = application.secrets.map((s: any) => {
-                s.value = decrypt(s.value) || null
-                return s;
-            });
-        }
+	if (application) {
+		if (application?.gitSource?.githubApp?.clientSecret) {
+			application.gitSource.githubApp.clientSecret = decrypt(application.gitSource.githubApp.clientSecret) || null;
+		}
+		if (application?.gitSource?.githubApp?.webhookSecret) {
+			application.gitSource.githubApp.webhookSecret = decrypt(application.gitSource.githubApp.webhookSecret) || null;
+		}
+		if (application?.gitSource?.githubApp?.privateKey) {
+			application.gitSource.githubApp.privateKey = decrypt(application.gitSource.githubApp.privateKey) || null;
+		}
+		if (application?.gitSource?.gitlabApp?.appSecret) {
+			application.gitSource.gitlabApp.appSecret = decrypt(application.gitSource.gitlabApp.appSecret) || null;
+		}
+		if (application?.secrets.length > 0) {
+			application.secrets = application.secrets.map((s: any) => {
+				s.value = decrypt(s.value) || null
+				return s;
+			});
+		}
 
-        return application;
-    }
+		return application;
+	}
 }

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/lib/services/common.ts

@@ -1,23 +1,7 @@
-import { exec } from 'node:child_process'
-import util from 'util';
-import fs from 'fs/promises';
-import yaml from 'js-yaml';
-import forge from 'node-forge';
-import { uniqueNamesGenerator, adjectives, colors, animals } from 'unique-names-generator';
-import type { Config } from 'unique-names-generator';
-import generator from 'generate-password';
-import crypto from 'crypto';
-import { promises as dns } from 'dns';
-import { PrismaClient } from '@prisma/client';
+
 import cuid from 'cuid';
-import os from 'os';
-import sshConfig from 'ssh-config'
 import { encrypt, generatePassword, prisma } from '../common';
 
-
-export const version = '3.8.2';
-export const isDev = process.env.NODE_ENV === 'development';
-
 export const includeServices: any = {
 	destinationDocker: true,
 	persistentStorage: true,
@@ -34,7 +18,9 @@ export const includeServices: any = {
 	moodle: true,
 	appwrite: true,
 	glitchTip: true,
-	searxng: true
+	searxng: true,
+	weblate: true,
+	taiga: true
 };
 export async function configureServiceType({
 	id,
@@ -312,6 +298,58 @@ export async function configureServiceType({
 				}
 			}
 		});
+	} else if (type === 'weblate') {
+		const adminPassword = encrypt(generatePassword({}))
+		const postgresqlUser = cuid();
+		const postgresqlPassword = encrypt(generatePassword({}));
+		const postgresqlDatabase = 'weblate';
+		await prisma.service.update({
+			where: { id },
+			data: {
+				type,
+				weblate: {
+					create: {
+						adminPassword,
+						postgresqlHost: `${id}-postgresql`,
+						postgresqlPort: 5432,
+						postgresqlUser,
+						postgresqlPassword,
+						postgresqlDatabase,
+					}
+				}
+			}
+		});
+	} else if (type === 'taiga') {
+		const secretKey = encrypt(generatePassword({}))
+		const erlangSecret = encrypt(generatePassword({}))
+		const rabbitMQUser = cuid();
+		const djangoAdminUser = cuid();
+		const djangoAdminPassword = encrypt(generatePassword({}))
+		const rabbitMQPassword = encrypt(generatePassword({}))
+		const postgresqlUser = cuid();
+		const postgresqlPassword = encrypt(generatePassword({}));
+		const postgresqlDatabase = 'taiga';
+		await prisma.service.update({
+			where: { id },
+			data: {
+				type,
+				taiga: {
+					create: {
+						secretKey,
+						erlangSecret,
+						djangoAdminUser,
+						djangoAdminPassword,
+						rabbitMQUser,
+						rabbitMQPassword,
+						postgresqlHost: `${id}-postgresql`,
+						postgresqlPort: 5432,
+						postgresqlUser,
+						postgresqlPassword,
+						postgresqlDatabase,
+					}
+				}
+			}
+		});
 	} else {
 		await prisma.service.update({
 			where: { id },
@@ -338,7 +376,8 @@ export async function removeService({ id }: { id: string }): Promise<void> {
 	await prisma.moodle.deleteMany({ where: { serviceId: id } });
 	await prisma.appwrite.deleteMany({ where: { serviceId: id } });
 	await prisma.searxng.deleteMany({ where: { serviceId: id } });
-
+	await prisma.weblate.deleteMany({ where: { serviceId: id } });
+	await prisma.taiga.deleteMany({ where: { serviceId: id } });
 	
 	await prisma.service.delete({ where: { id } });
 }

apps/api/src/lib/services/serviceFields.ts

@@ -599,6 +599,54 @@ export const glitchTip = [{
 	isBoolean: false,
 	isEncrypted: true
 },
+{
+	name: 'emailSmtpHost',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpPassword',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'emailSmtpUseSsl',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: true,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpUseSsl',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: true,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpPort',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: true,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpUser',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
 {
 	name: 'defaultEmail',
 	isEditable: false,
@@ -624,7 +672,7 @@ export const glitchTip = [{
 	isEncrypted: true
 },
 {
-	name: 'defaultFromEmail',
+	name: 'defaultEmailFrom',
 	isEditable: true,
 	isLowerCase: false,
 	isNumber: false,
@@ -687,4 +735,133 @@ export const searxng = [{
 	isNumber: false,
 	isBoolean: false,
 	isEncrypted: true
+}]
+
+export const weblate = [{
+	name: 'adminPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlHost',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPort',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlDatabase',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+}]
+export const taiga = [{
+	name: 'secretKey',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'djangoAdminUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'djangoAdminPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'rabbitMQUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'rabbitMQPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlHost',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPort',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlDatabase',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
 }]

apps/api/src/lib/services/supportedVersions.ts

@@ -190,4 +190,26 @@ export const supportedServiceTypesAndVersions = [
 			main: 8080
 		}
 	},
+	{
+		name: 'weblate',
+		fancyName: 'Weblate',
+		baseImage: 'weblate/weblate',
+		images: ['postgres:14-alpine', 'redis:6-alpine'],
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 8080
+		}
+	},
+	// {
+	// 	name: 'taiga',
+	// 	fancyName: 'Taiga',
+	// 	baseImage: 'taigaio/taiga-front',
+	// 	images: ['postgres:12.3', 'rabbitmq:3.8-management-alpine', 'taigaio/taiga-back', 'taigaio/taiga-events', 'taigaio/taiga-protected'],
+	// 	versions: ['latest'],
+	// 	recommendedVersion: 'latest',
+	// 	ports: {
+	// 		main: 80
+	// 	}
+	// },
 ];

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

@@ -3,16 +3,23 @@ import crypto from 'node:crypto'
 import jsonwebtoken from 'jsonwebtoken';
 import axios from 'axios';
 import { FastifyReply } from 'fastify';
+import fs from 'fs/promises';
+import yaml from 'js-yaml';
+
 import { day } from '../../../../lib/dayjs';
-import { setDefaultBaseImage, setDefaultConfiguration } from '../../../../lib/buildPacks/common';
-import { checkDomainsIsValidInDNS, checkDoubleBranch, checkExposedPort, decrypt, encrypt, errorHandler, executeDockerCmd, generateSshKeyPair, getContainerUsage, getDomain, getFreeExposedPort, isDev, isDomainConfigured, listSettings, prisma, stopBuild, uniqueName } from '../../../../lib/common';
+import { makeLabelForStandaloneApplication, setDefaultBaseImage, setDefaultConfiguration } from '../../../../lib/buildPacks/common';
+import { checkDomainsIsValidInDNS, checkDoubleBranch, checkExposedPort, createDirectories, decrypt, defaultComposeConfiguration, encrypt, errorHandler, executeDockerCmd, generateSshKeyPair, getContainerUsage, getDomain, isDev, isDomainConfigured, listSettings, prisma, stopBuild, uniqueName } from '../../../../lib/common';
 import { checkContainer, formatLabelsOnDocker, isContainerExited, removeContainer } from '../../../../lib/docker';
-import { scheduler } from '../../../../lib/scheduler';
 
 import type { FastifyRequest } from 'fastify';
 import type { GetImages, CancelDeployment, CheckDNS, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, GetApplicationLogs, GetBuildIdLogs, GetBuildLogs, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, DeployApplication, CheckDomain, StopPreviewApplication } from './types';
 import { OnlyId } from '../../../../types';
 
+function filterObject(obj, callback) {
+    return Object.fromEntries(Object.entries(obj).
+        filter(([key, val]) => callback(val, key)));
+}
+
 export async function listApplications(request: FastifyRequest) {
     try {
         const { teamId } = request.user
@@ -149,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) {
@@ -176,32 +184,39 @@ export async function getApplicationFromDB(id: string, teamId: string) {
 }
 export async function getApplicationFromDBWebhook(projectId: number, branch: string) {
     try {
-        let application = await prisma.application.findFirst({
+        let applications = await prisma.application.findMany({
             where: { projectId, branch, settings: { autodeploy: true } },
             include: {
                 destinationDocker: true,
                 settings: true,
                 gitSource: { include: { githubApp: true, gitlabApp: true } },
                 secrets: true,
-                persistentStorage: true
+                persistentStorage: true,
+                connectedDatabase: true
             }
         });
-        if (!application) {
+        if (applications.length === 0) {
             throw { status: 500, message: 'Application not configured.' }
         }
-        application = decryptApplication(application);
-        const { baseImage, baseBuildImage, baseBuildImages, baseImages } = setDefaultBaseImage(
-            application.buildPack
-        );
+        applications = applications.map((application: any) => {
+            application = decryptApplication(application);
+            const { baseImage, baseBuildImage, baseBuildImages, baseImages } = setDefaultBaseImage(
+                application.buildPack
+            );
 
-        // Set default build images
-        if (!application.baseImage) {
-            application.baseImage = baseImage;
-        }
-        if (!application.baseBuildImage) {
-            application.baseBuildImage = baseBuildImage;
-        }
-        return { ...application, baseBuildImages, baseImages };
+            // Set default build images
+            if (!application.baseImage) {
+                application.baseImage = baseImage;
+            }
+            if (!application.baseBuildImage) {
+                application.baseBuildImage = baseBuildImage;
+            }
+            application.baseBuildImages = baseBuildImages;
+            application.baseImages = baseImages;
+            return application
+        })
+
+        return applications;
 
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -229,15 +244,16 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
             denoOptions,
             baseImage,
             baseBuildImage,
-            deploymentType
+            deploymentType,
+            baseDatabaseBranch
         } = request.body
         if (port) port = Number(port);
         if (exposePort) {
             exposePort = Number(exposePort);
         }
 
-        const { destinationDocker: { id: dockerId, remoteIpAddress } } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
-        if (exposePort) await checkExposedPort({ id, exposePort, dockerId, remoteIpAddress })
+        const { destinationDocker: { engine, remoteEngine, remoteIpAddress }, exposePort: configuredPort } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
+        if (exposePort) await checkExposedPort({ id, configuredPort, exposePort, engine, remoteEngine, remoteIpAddress })
         if (denoOptions) denoOptions = denoOptions.trim();
         const defaultConfiguration = await setDefaultConfiguration({
             buildPack,
@@ -250,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 })
@@ -276,15 +313,15 @@ 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 isDouble = await checkDoubleBranch(branch, projectId);
-        if (isDouble && autodeploy) {
-            await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false } })
-            throw { status: 500, message: 'Cannot activate automatic deployments until only one application is defined for this repository / branch.' }
-        }
+        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 } })
+        //     throw { status: 500, message: 'Cannot activate automatic deployments until only one application is defined for this repository / branch.' }
+        // }
         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();
@@ -312,6 +349,113 @@ export async function stopPreviewApplication(request: FastifyRequest<StopPreview
         return errorHandler({ status, message })
     }
 }
+
+export async function restartApplication(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const { teamId } = request.user
+        let application: any = await getApplicationFromDB(id, teamId);
+        if (application?.destinationDockerId) {
+            const buildId = cuid();
+            const { id: dockerId, network } = application.destinationDocker;
+            const { secrets, pullmergeRequestId, port, repository, persistentStorage, id: applicationId, buildPack, exposePort } = application;
+
+            const envs = [
+                `PORT=${port}`
+            ];
+            if (secrets.length > 0) {
+                secrets.forEach((secret) => {
+                    if (pullmergeRequestId) {
+                        if (secret.isPRMRSecret) {
+                            envs.push(`${secret.name}=${secret.value}`);
+                        }
+                    } else {
+                        if (!secret.isPRMRSecret) {
+                            envs.push(`${secret.name}=${secret.value}`);
+                        }
+                    }
+                });
+            }
+            const { workdir } = await createDirectories({ repository, buildId });
+            const labels = []
+            let image = null
+            const { stdout: container } = await executeDockerCmd({ dockerId, command: `docker container ls --filter 'label=com.docker.compose.service=${id}' --format '{{json .}}'` })
+            const containersArray = container.trim().split('\n');
+            for (const container of containersArray) {
+                const containerObj = formatLabelsOnDocker(container);
+                image = containerObj[0].Image
+                Object.keys(containerObj[0].Labels).forEach(function (key) {
+                    if (key.startsWith('coolify')) {
+                        labels.push(`${key}=${containerObj[0].Labels[key]}`)
+                    }
+                })
+            }
+            let imageFound = false;
+            try {
+                await executeDockerCmd({
+                    dockerId,
+                    command: `docker image inspect ${image}`
+                })
+                imageFound = true;
+            } catch (error) {
+                //
+            }
+            if (!imageFound) {
+                throw { status: 500, message: 'Image not found, cannot restart application.' }
+            }
+            await fs.writeFile(`${workdir}/.env`, envs.join('\n'));
+
+            let envFound = false;
+            try {
+                envFound = !!(await fs.stat(`${workdir}/.env`));
+            } catch (error) {
+                //
+            }
+            const volumes =
+                persistentStorage?.map((storage) => {
+                    return `${applicationId}${storage.path.replace(/\//gi, '-')}:${buildPack !== 'docker' ? '/app' : ''
+                        }${storage.path}`;
+                }) || [];
+            const composeVolumes = volumes.map((volume) => {
+                return {
+                    [`${volume.split(':')[0]}`]: {
+                        name: volume.split(':')[0]
+                    }
+                };
+            });
+            const composeFile = {
+                version: '3.8',
+                services: {
+                    [applicationId]: {
+                        image,
+                        container_name: applicationId,
+                        volumes,
+                        env_file: envFound ? [`${workdir}/.env`] : [],
+                        labels,
+                        depends_on: [],
+                        expose: [port],
+                        ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
+                        ...defaultComposeConfiguration(network),
+                    }
+                },
+                networks: {
+                    [network]: {
+                        external: true
+                    }
+                },
+                volumes: Object.assign({}, ...composeVolumes)
+            };
+            await fs.writeFile(`${workdir}/docker-compose.yml`, yaml.dump(composeFile));
+            await executeDockerCmd({ dockerId, command: `docker stop -t 0 ${id}` })
+            await executeDockerCmd({ dockerId, command: `docker rm ${id}` })
+            await executeDockerCmd({ dockerId, command: `docker compose --project-directory ${workdir} up -d` })
+            return reply.code(201).send();
+        }
+        throw { status: 500, message: 'Application cannot be restarted.' }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 export async function stopApplication(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
     try {
         const { id } = request.params
@@ -332,12 +476,14 @@ export async function stopApplication(request: FastifyRequest<OnlyId>, reply: Fa
 export async function deleteApplication(request: FastifyRequest<DeleteApplication>, reply: FastifyReply) {
     try {
         const { id } = request.params
+        const { force } = request.body
+
         const { teamId } = request.user
         const application = await prisma.application.findUnique({
             where: { id },
             include: { destinationDocker: true }
         });
-        if (application?.destinationDockerId && application.destinationDocker?.network) {
+        if (!force && application?.destinationDockerId && application.destinationDocker?.network) {
             const { stdout: containers } = await executeDockerCmd({
                 dockerId: application.destinationDocker.id,
                 command: `docker ps -a --filter network=${application.destinationDocker.network} --filter name=${id} --format '{{json .}}'`
@@ -356,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 {
@@ -379,20 +526,22 @@ 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 } })
+        const { destinationDocker: { engine, remoteIpAddress, remoteEngine }, exposePort: configuredPort } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
         const { isDNSCheckEnabled } = await prisma.setting.findFirst({});
 
         const found = await isDomainConfigured({ id, fqdn, remoteIpAddress });
         if (found) {
             throw { status: 500, message: `Domain ${getDomain(fqdn).replace('www.', '')} is already in use!` }
         }
-        if (exposePort) await checkExposedPort({ id, configuredPort, exposePort, dockerId, remoteIpAddress })
+        if (exposePort) await checkExposedPort({ id, configuredPort, exposePort, engine, remoteEngine, remoteIpAddress })
         if (isDNSCheckEnabled && !isDev && !forceSave) {
             let hostname = request.hostname.split(':')[0];
             if (remoteEngine) hostname = remoteIpAddress;
@@ -558,12 +707,12 @@ export async function saveRepository(request, reply) {
                 data: { repository, branch, projectId, settings: { update: { autodeploy, isPublicRepository } } }
             });
         }
-        if (!isPublicRepository) {
-            const isDouble = await checkDoubleBranch(branch, projectId);
-            if (isDouble) {
-                await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false, isPublicRepository } })
-            }
-        }
+        // if (!isPublicRepository) {
+        //     const isDouble = await checkDoubleBranch(branch, projectId);
+        //     if (isDouble) {
+        //         await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false, isPublicRepository } })
+        //     }
+        // }
         return reply.code(201).send()
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -612,6 +761,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 {
@@ -768,7 +927,6 @@ export async function getPreviews(request: FastifyRequest<OnlyId>) {
             })
         }
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -861,8 +1019,13 @@ export async function getBuildIdLogs(request: FastifyRequest<GetBuildIdLogs>) {
             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'
         }
     } catch ({ status, message }) {
@@ -938,3 +1101,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, 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';
 
@@ -19,6 +19,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.get<OnlyId>('/:id/status', async (request) => await getApplicationStatus(request));
 
+    fastify.post<OnlyId>('/:id/restart', async (request, reply) => await restartApplication(request, reply));
     fastify.post<OnlyId>('/:id/stop', async (request, reply) => await stopApplication(request, reply));
     fastify.post<StopPreviewApplication>('/:id/stop/preview', async (request, reply) => await stopPreviewApplication(request, reply));
 
@@ -54,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,15 +20,17 @@ 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; };
+    Body: { force: boolean }
 }
 export interface CheckDomain extends OnlyId {
     Querystring: { domain: string; };

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

@@ -11,6 +11,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
                 version,
                 whiteLabeled: process.env.COOLIFY_WHITE_LABELED === 'true',
                 whiteLabeledIcon: process.env.COOLIFY_WHITE_LABELED_ICON,
+                isRegistrationEnabled: settings.isRegistrationEnabled,
             }
         } catch ({ status, message }) {
             return errorHandler({ status, message })

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

@@ -3,11 +3,11 @@ import type { FastifyRequest } from 'fastify';
 import { FastifyReply } from 'fastify';
 import yaml from 'js-yaml';
 import fs from 'fs/promises';
-import { ComposeFile, createDirectories, decrypt, encrypt, errorHandler, executeDockerCmd, generateDatabaseConfiguration, generatePassword, getContainerUsage, getDatabaseImage, getDatabaseVersions, getFreePublicPort, listSettings, makeLabelForStandaloneDatabase, prisma, startTraefikTCPProxy, stopDatabaseContainer, stopTcpHttpProxy, supportedDatabaseTypesAndVersions, uniqueName, updatePasswordInDb } from '../../../../lib/common';
+import { ComposeFile, createDirectories, decrypt, defaultComposeConfiguration, encrypt, errorHandler, executeDockerCmd, generateDatabaseConfiguration, generatePassword, getContainerUsage, getDatabaseImage, getDatabaseVersions, getFreePublicPort, listSettings, makeLabelForStandaloneDatabase, prisma, startTraefikTCPProxy, stopDatabaseContainer, stopTcpHttpProxy, supportedDatabaseTypesAndVersions, uniqueName, updatePasswordInDb } from '../../../../lib/common';
 import { day } from '../../../../lib/dayjs';
 
-import { GetDatabaseLogs, OnlyId, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSettings, SaveVersion } from '../../../../types';
-import { SaveDatabaseType } from './types';
+import type { OnlyId } from '../../../../types';
+import type { DeleteDatabase, DeleteDatabaseSecret, GetDatabaseLogs, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSecret, SaveDatabaseSettings, SaveDatabaseType, SaveVersion } from './types';
 
 export async function listDatabases(request: FastifyRequest) {
     try {
@@ -61,16 +61,18 @@ export async function getDatabaseStatus(request: FastifyRequest<OnlyId>) {
             where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
             include: { destinationDocker: true, settings: true }
         });
-        const { destinationDockerId, destinationDocker } = database;
-        if (destinationDockerId) {
-            try {
-                const { stdout } = await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker inspect --format '{{json .State}}' ${id}` })
+        if (database) {
+            const { destinationDockerId, destinationDocker } = database;
+            if (destinationDockerId) {
+                try {
+                    const { stdout } = await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker inspect --format '{{json .State}}' ${id}` })
 
-                if (JSON.parse(stdout).Running) {
-                    isRunning = true;
+                    if (JSON.parse(stdout).Running) {
+                        isRunning = true;
+                    }
+                } catch (error) {
+                    //
                 }
-            } catch (error) {
-                //
             }
         }
         return {
@@ -92,15 +94,14 @@ export async function getDatabase(request: FastifyRequest<OnlyId>) {
         if (!database) {
             throw { status: 404, message: 'Database not found.' }
         }
-        const { arch } = await listSettings();
+        const settings = await listSettings();
         if (database.dbUserPassword) database.dbUserPassword = decrypt(database.dbUserPassword);
         if (database.rootUserPassword) database.rootUserPassword = decrypt(database.rootUserPassword);
-        const configuration = generateDatabaseConfiguration(database, arch);
-        const settings = await listSettings();
+        const configuration = generateDatabaseConfiguration(database, settings.arch);
         return {
             privatePort: configuration?.privatePort,
             database,
-            versions: await getDatabaseVersions(database.type, arch),
+            versions: await getDatabaseVersions(database.type, settings.arch),
             settings
         };
     } catch ({ status, message }) {
@@ -167,6 +168,7 @@ export async function saveDatabaseDestination(request: FastifyRequest<SaveDataba
         const { id } = request.params;
         const { destinationId } = request.body;
 
+        const { arch } = await listSettings();
         await prisma.database.update({
             where: { id },
             data: { destinationDocker: { connect: { id: destinationId } } }
@@ -181,7 +183,7 @@ export async function saveDatabaseDestination(request: FastifyRequest<SaveDataba
 
         if (destinationDockerId) {
             if (type && version) {
-                const baseImage = getDatabaseImage(type);
+                const baseImage = getDatabaseImage(type, arch);
                 executeDockerCmd({ dockerId, command: `docker pull ${baseImage}:${version}` })
             }
         }
@@ -219,7 +221,7 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
 
         const database = await prisma.database.findFirst({
             where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-            include: { destinationDocker: true, settings: true }
+            include: { destinationDocker: true, settings: true, databaseSecret: true }
         });
         const { arch } = await listSettings();
         if (database.dbUserPassword) database.dbUserPassword = decrypt(database.dbUserPassword);
@@ -229,7 +231,8 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
             destinationDockerId,
             destinationDocker,
             publicPort,
-            settings: { isPublic }
+            settings: { isPublic },
+            databaseSecret
         } = database;
         const { privatePort, command, environmentVariables, image, volume, ulimits } =
             generateDatabaseConfiguration(database, arch);
@@ -239,7 +242,11 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
         const labels = await makeLabelForStandaloneDatabase({ id, image, volume });
 
         const { workdir } = await createDirectories({ repository: type, buildId: id });
-
+        if (databaseSecret.length > 0) {
+            databaseSecret.forEach((secret) => {
+                environmentVariables[secret.name] = decrypt(secret.value);
+            });
+        }
         const composeFile: ComposeFile = {
             version: '3.8',
             services: {
@@ -247,20 +254,11 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
                     container_name: id,
                     image,
                     command,
-                    networks: [network],
                     environment: environmentVariables,
                     volumes: [volume],
                     ulimits,
                     labels,
-                    restart: 'always',
-                    deploy: {
-                        restart_policy: {
-                            condition: 'on-failure',
-                            delay: '5s',
-                            max_attempts: 3,
-                            window: '120s'
-                        }
-                    }
+                    ...defaultComposeConfiguration(network),
                 }
             },
             networks: {
@@ -270,28 +268,16 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
             },
             volumes: {
                 [volumeName]: {
-                    external: true
+                    name: volumeName,
                 }
             }
         };
-
         const composeFileDestination = `${workdir}/docker-compose.yaml`;
         await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
-        try {
-            await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker volume create ${volumeName}` })
-        } catch (error) {
-            console.log(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
-            };
-        }
+        await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker compose -f ${composeFileDestination} up -d` })
+        if (isPublic) await startTraefikTCPProxy(destinationDocker, id, publicPort, privatePort);
+        return {};
+
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
@@ -360,21 +346,25 @@ export async function getDatabaseLogs(request: FastifyRequest<GetDatabaseLogs>)
         return errorHandler({ status, message })
     }
 }
-export async function deleteDatabase(request: FastifyRequest<OnlyId>) {
+export async function deleteDatabase(request: FastifyRequest<DeleteDatabase>) {
     try {
         const teamId = request.user.teamId;
         const { id } = request.params;
+        const { force } = request.body;
         const database = await prisma.database.findFirst({
             where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
             include: { destinationDocker: true, settings: true }
         });
-        if (database.dbUserPassword) database.dbUserPassword = decrypt(database.dbUserPassword);
-        if (database.rootUserPassword) database.rootUserPassword = decrypt(database.rootUserPassword);
-        if (database.destinationDockerId) {
-            const everStarted = await stopDatabaseContainer(database);
-            if (everStarted) await stopTcpHttpProxy(id, database.destinationDocker, database.publicPort);
+        if (!force) {
+            if (database.dbUserPassword) database.dbUserPassword = decrypt(database.dbUserPassword);
+            if (database.rootUserPassword) database.rootUserPassword = decrypt(database.rootUserPassword);
+            if (database.destinationDockerId) {
+                const everStarted = await stopDatabaseContainer(database);
+                if (everStarted) await stopTcpHttpProxy(id, database.destinationDocker, database.publicPort);
+            }
         }
         await prisma.databaseSettings.deleteMany({ where: { databaseId: id } });
+        await prisma.databaseSecret.deleteMany({ where: { databaseId: id } });
         await prisma.database.delete({ where: { id } });
         return {}
     } catch ({ status, message }) {
@@ -435,10 +425,10 @@ export async function saveDatabaseSettings(request: FastifyRequest<SaveDatabaseS
 
         let publicPort = null
 
-        const { destinationDocker: { id: dockerId } } = await prisma.database.findUnique({ where: { id }, include: { destinationDocker: true } })
-       
+        const { destinationDocker: { remoteEngine, engine, remoteIpAddress } } = await prisma.database.findUnique({ where: { id }, include: { destinationDocker: true } })
+
         if (isPublic) {
-            publicPort = await getFreePublicPort(id, dockerId);
+            publicPort = await getFreePublicPort({ id, remoteEngine, engine, remoteIpAddress });
         }
         await prisma.database.update({
             where: { id },
@@ -470,4 +460,69 @@ export async function saveDatabaseSettings(request: FastifyRequest<SaveDatabaseS
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
-}
+}
+export async function getDatabaseSecrets(request: FastifyRequest<OnlyId>) {
+    try {
+        const { id } = request.params
+        let secrets = await prisma.databaseSecret.findMany({
+            where: { databaseId: id },
+            orderBy: { createdAt: 'desc' }
+        });
+        secrets = secrets.map((secret) => {
+            secret.value = decrypt(secret.value);
+            return secret;
+        });
+
+        return {
+            secrets
+        }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+
+export async function saveDatabaseSecret(request: FastifyRequest<SaveDatabaseSecret>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        let { name, value, isNew } = request.body
+
+        if (isNew) {
+            const found = await prisma.databaseSecret.findFirst({ where: { name, databaseId: id } });
+            if (found) {
+                throw `Secret ${name} already exists.`
+            } else {
+                value = encrypt(value.trim());
+                await prisma.databaseSecret.create({
+                    data: { name, value, database: { connect: { id } } }
+                });
+            }
+        } else {
+            value = encrypt(value.trim());
+            const found = await prisma.databaseSecret.findFirst({ where: { databaseId: id, name } });
+
+            if (found) {
+                await prisma.databaseSecret.updateMany({
+                    where: { databaseId: id, name },
+                    data: { value }
+                });
+            } else {
+                await prisma.databaseSecret.create({
+                    data: { name, value, database: { connect: { id } } }
+                });
+            }
+        }
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+export async function deleteDatabaseSecret(request: FastifyRequest<DeleteDatabaseSecret>) {
+    try {
+        const { id } = request.params
+        const { name } = request.body
+        await prisma.databaseSecret.deleteMany({ where: { databaseId: id, name } });
+        return {}
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}

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

@@ -1,8 +1,9 @@
 import { FastifyPluginAsync } from 'fastify';
-import { deleteDatabase, getDatabase, getDatabaseLogs, getDatabaseStatus, getDatabaseTypes, getDatabaseUsage, getVersions, listDatabases, newDatabase, saveDatabase, saveDatabaseDestination, saveDatabaseSettings, saveDatabaseType, saveVersion, startDatabase, stopDatabase } from './handlers';
+import { deleteDatabase, deleteDatabaseSecret, getDatabase, getDatabaseLogs, getDatabaseSecrets, getDatabaseStatus, getDatabaseTypes, getDatabaseUsage, getVersions, listDatabases, newDatabase, saveDatabase, saveDatabaseDestination, saveDatabaseSecret, saveDatabaseSettings, saveDatabaseType, saveVersion, startDatabase, stopDatabase } from './handlers';
 
-import type { GetDatabaseLogs, OnlyId, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSettings, SaveVersion } from '../../../../types';
-import type { SaveDatabaseType } from './types';
+import type { OnlyId } from '../../../../types';
+
+import type { DeleteDatabase, SaveDatabaseType, DeleteDatabaseSecret, GetDatabaseLogs, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSecret, SaveDatabaseSettings, SaveVersion } from './types';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.addHook('onRequest', async (request) => {
@@ -13,12 +14,16 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.get<OnlyId>('/:id', async (request) => await getDatabase(request));
     fastify.post<SaveDatabase>('/:id', async (request, reply) => await saveDatabase(request, reply));
-    fastify.delete<OnlyId>('/:id', async (request) => await deleteDatabase(request));
+    fastify.delete<DeleteDatabase>('/:id', async (request) => await deleteDatabase(request));
 
     fastify.get<OnlyId>('/:id/status', async (request) => await getDatabaseStatus(request));
 
     fastify.post<SaveDatabaseSettings>('/:id/settings', async (request) => await saveDatabaseSettings(request));
 
+    fastify.get<OnlyId>('/:id/secrets', async (request) => await getDatabaseSecrets(request));
+    fastify.post<SaveDatabaseSecret>('/:id/secrets', async (request, reply) => await saveDatabaseSecret(request, reply));
+    fastify.delete<DeleteDatabaseSecret>('/:id/secrets', async (request) => await deleteDatabaseSecret(request));
+
     fastify.get('/:id/configuration/type', async (request) => await getDatabaseTypes(request));
     fastify.post<SaveDatabaseType>('/:id/configuration/type', async (request, reply) => await saveDatabaseType(request, reply));
 

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

@@ -2,4 +2,54 @@ import type { OnlyId } from "../../../../types";
 
 export interface SaveDatabaseType extends OnlyId {
     Body: { type: string }
-}
+}
+export interface DeleteDatabase extends OnlyId {
+    Body: { force: string }
+}
+export interface SaveVersion extends OnlyId {
+    Body: {
+        version: string
+    }
+}
+export interface SaveDatabaseDestination extends OnlyId {
+    Body: {
+        destinationId: string
+    }
+}
+export interface GetDatabaseLogs extends OnlyId {
+    Querystring: {
+        since: number
+    }
+}
+export interface SaveDatabase extends OnlyId {
+    Body: {
+        name: string,
+        defaultDatabase: string,
+        dbUser: string,
+        dbUserPassword: string,
+        rootUser: string,
+        rootUserPassword: string,
+        version: string,
+        isRunning: boolean
+    }
+}
+export interface SaveDatabaseSettings extends OnlyId {
+    Body: {
+        isPublic: boolean,
+        appendOnly: boolean
+    }
+}
+
+export interface SaveDatabaseSecret extends OnlyId {
+    Body: {
+        name: string,
+        value: string,
+        isNew: string,
+    }
+}
+export interface DeleteDatabaseSecret extends OnlyId {
+    Body: {
+        name: string,
+    }
+}
+

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

@@ -1,5 +1,4 @@
-import os from 'node:os';
-import osu from 'node-os-utils';
+
 import axios from 'axios';
 import { compareVersions } from 'compare-versions';
 import cuid from 'cuid';
@@ -15,9 +14,10 @@ export async function hashPassword(password: string): Promise<string> {
 	return bcrypt.hash(password, saltRounds);
 }
 
-export async function cleanupManually() {
+export async function cleanupManually(request: FastifyRequest) {
 	try {
-		const destination = await prisma.destinationDocker.findFirst({ where: { engine: '/var/run/docker.sock' } })
+		const { serverId } = request.body;
+		const destination = await prisma.destinationDocker.findUnique({ where: { id: serverId } })
 		await cleanupDockerStorage(destination.id, true, true)
 		return {}
 	} catch ({ status, message }) {
@@ -52,9 +52,7 @@ export async function update(request: FastifyRequest<Update>) {
 	const { latestVersion } = request.body;
 	try {
 		if (!isDev) {
-			const { isAutoUpdateEnabled } = (await prisma.setting.findFirst()) || {
-				isAutoUpdateEnabled: false
-			};
+			const { isAutoUpdateEnabled } = await prisma.setting.findFirst();
 			await asyncExecShell(`docker pull coollabsio/coolify:${latestVersion}`);
 			await asyncExecShell(`env | grep COOLIFY > .env`);
 			await asyncExecShell(
@@ -65,7 +63,6 @@ export async function update(request: FastifyRequest<Update>) {
 			);
 			return {};
 		} else {
-			console.log(latestVersion);
 			await asyncSleep(2000);
 			return {};
 		}
@@ -78,10 +75,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 {};
 			}
 		}
@@ -90,45 +86,38 @@ export async function restartCoolify(request: FastifyRequest<any>) {
 		return errorHandler({ status, message })
 	}
 }
-export async function showUsage() {
-	try {
-		return {
-			usage: {
-				uptime: os.uptime(),
-				memory: await osu.mem.info(),
-				cpu: {
-					load: os.loadavg(),
-					usage: await osu.cpu.usage(),
-					count: os.cpus().length
-				},
-				disk: await osu.drive.info('/')
-			}
 
-		};
-	} catch ({ status, message }) {
-		return errorHandler({ status, message })
-	}
-}
 export async function showDashboard(request: FastifyRequest) {
 	try {
 		const userId = request.user.userId;
 		const teamId = request.user.teamId;
 		const applications = await prisma.application.findMany({
 			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-			include: { settings: true }
+			include: { settings: true, destinationDocker: true, teams: true }
 		});
 		const databases = await prisma.database.findMany({
 			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-			include: { settings: true }
+			include: { settings: true, destinationDocker: true, teams: true }
 		});
 		const services = await prisma.service.findMany({
-			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } }
+			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+			include: { destinationDocker: true, teams: true }
+		});
+		const gitSources = await prisma.gitSource.findMany({
+			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+			include: { teams: true }
+		});
+		const destinations = await prisma.destinationDocker.findMany({
+			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+			include: { teams: true }
 		});
 		const settings = await listSettings();
 		return {
 			applications,
 			databases,
 			services,
+			gitSources,
+			destinations,
 			settings,
 		};
 	} catch ({ status, message }) {

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

@@ -43,17 +43,13 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await showDashboard(request));
 
-	fastify.get('/usage', {
-		onRequest: [fastify.authenticate]
-	}, async () => await showUsage());
-
 	fastify.post('/internal/restart', {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await restartCoolify(request));
 
 	fastify.post('/internal/cleanup', {
 		onRequest: [fastify.authenticate]
-	}, async () => await cleanupManually());
+	}, async (request) => await cleanupManually(request));
 };
 
 export default root;

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

@@ -0,0 +1,119 @@
+import type { FastifyRequest } from 'fastify';
+import { errorHandler, executeDockerCmd, prisma, createRemoteEngineConfiguration, executeSSHCmd } from '../../../../lib/common';
+import os from 'node:os';
+import osu from 'node-os-utils';
+
+
+export async function listServers(request: FastifyRequest) {
+    try {
+        const userId = request.user.userId;
+        const teamId = request.user.teamId;
+        const servers = await prisma.destinationDocker.findMany({ where: { teams: { some: { id: teamId === '0' ? undefined : teamId } }, remoteEngine: false }, distinct: ['engine'] })
+        // const remoteServers = await prisma.destinationDocker.findMany({ where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } }, distinct: ['remoteIpAddress', 'engine'] })
+
+        return {
+            servers
+        }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+const mappingTable = [
+    ['K total memory', 'totalMemoryKB'],
+    ['K used memory', 'usedMemoryKB'],
+    ['K active memory', 'activeMemoryKB'],
+    ['K inactive memory', 'inactiveMemoryKB'],
+    ['K free memory', 'freeMemoryKB'],
+    ['K buffer memory', 'bufferMemoryKB'],
+    ['K swap cache', 'swapCacheKB'],
+    ['K total swap', 'totalSwapKB'],
+    ['K used swap', 'usedSwapKB'],
+    ['K free swap', 'freeSwapKB'],
+    ['non-nice user cpu ticks', 'nonNiceUserCpuTicks'],
+    ['nice user cpu ticks', 'niceUserCpuTicks'],
+    ['system cpu ticks', 'systemCpuTicks'],
+    ['idle cpu ticks', 'idleCpuTicks'],
+    ['IO-wait cpu ticks', 'ioWaitCpuTicks'],
+    ['IRQ cpu ticks', 'irqCpuTicks'],
+    ['softirq cpu ticks', 'softIrqCpuTicks'],
+    ['stolen cpu ticks', 'stolenCpuTicks'],
+    ['pages paged in', 'pagesPagedIn'],
+    ['pages paged out', 'pagesPagedOut'],
+    ['pages swapped in', 'pagesSwappedIn'],
+    ['pages swapped out', 'pagesSwappedOut'],
+    ['interrupts', 'interrupts'],
+    ['CPU context switches', 'cpuContextSwitches'],
+    ['boot time', 'bootTime'],
+    ['forks', 'forks']
+];
+function parseFromText(text) {
+    var data = {};
+    var lines = text.split(/\r?\n/);
+    for (const line of lines) {
+        for (const [key, value] of mappingTable) {
+            if (line.indexOf(key) >= 0) {
+                const values = line.match(/[0-9]+/)[0];
+                data[value] = parseInt(values, 10);
+            }
+        }
+    }
+    return data;
+}
+export async function showUsage(request: FastifyRequest) {
+    const { id } = request.params;
+    let { remoteEngine } = request.query
+    remoteEngine = remoteEngine === 'true' ? true : false
+    if (remoteEngine) {
+        const { stdout: stats } = await executeSSHCmd({ dockerId: id, command: `vmstat -s` })
+        const { stdout: disks } = await executeSSHCmd({ dockerId: id, command: `df -m / --output=size,used,pcent|grep -v 'Used'| xargs` })
+        const { stdout: cpus } = await executeSSHCmd({ dockerId: id, command: `nproc --all` })
+        // const { stdout: cpuUsage } = await executeSSHCmd({ dockerId: id, command: `echo $[100-$(vmstat 1 2|tail -1|awk '{print $15}')]` })
+        // console.log(cpuUsage)
+        const parsed: any = parseFromText(stats)
+        return {
+            usage: {
+                uptime: parsed.bootTime / 1024,
+                memory: {
+                    totalMemMb: parsed.totalMemoryKB / 1024,
+                    usedMemMb: parsed.usedMemoryKB / 1024,
+                    freeMemMb: parsed.freeMemoryKB / 1024,
+                    usedMemPercentage: (parsed.usedMemoryKB / parsed.totalMemoryKB) * 100,
+                    freeMemPercentage: (parsed.totalMemoryKB - parsed.usedMemoryKB) / parsed.totalMemoryKB * 100
+                },
+                cpu: {
+                    load: 0,
+                    usage: 0,
+                    count: cpus
+                },
+                disk: {
+                    totalGb: (disks.split(' ')[0] / 1024).toFixed(1),
+                    usedGb: (disks.split(' ')[1] / 1024).toFixed(1),
+                    freeGb: (disks.split(' ')[0] - disks.split(' ')[1]).toFixed(1),
+                    usedPercentage: disks.split(' ')[2].replace('%', ''),
+                    freePercentage: 100 - disks.split(' ')[2].replace('%', '')
+                }
+
+            }
+        }
+    } else {
+        try {
+            return {
+                usage: {
+                    uptime: os.uptime(),
+                    memory: await osu.mem.info(),
+                    cpu: {
+                        load: os.loadavg(),
+                        usage: await osu.cpu.usage(),
+                        count: os.cpus().length
+                    },
+                    disk: await osu.drive.info('/')
+                }
+
+            };
+        } catch ({ status, message }) {
+            return errorHandler({ status, message })
+        }
+    }
+
+
+}

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

@@ -0,0 +1,14 @@
+import { FastifyPluginAsync } from 'fastify';
+import { listServers, showUsage } from './handlers';
+
+
+const root: FastifyPluginAsync = async (fastify): Promise<void> => {
+    fastify.addHook('onRequest', async (request) => {
+        return await request.jwtVerify()
+    })
+    fastify.get('/', async (request) => await listServers(request));
+    fastify.get('/usage/:id', async (request) => await showUsage(request));
+
+};
+
+export default root;

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

@@ -0,0 +1,27 @@
+import { OnlyId } from "../../../../types"
+
+export interface SaveTeam extends OnlyId {
+    Body: {
+        name: string
+    }
+}
+export interface InviteToTeam {
+    Body: {
+        email: string,
+        permission: string,
+        teamId: string,
+        teamName: string
+    }
+}
+export interface BodyId {
+    Body: {
+        id: string
+    }
+}
+export interface SetPermission {
+    Body: {
+        userId: string,
+        newPermission: string,
+        permissionId: string
+    }
+}

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

@@ -1,15 +1,13 @@
 import type { FastifyReply, FastifyRequest } from 'fastify';
 import fs from 'fs/promises';
 import yaml from 'js-yaml';
-import bcrypt from 'bcryptjs';
-import { prisma, uniqueName, asyncExecShell, getServiceImage, getServiceFromDB, getContainerUsage,isDomainConfigured, saveUpdateableFields, fixType, decrypt, encrypt, getServiceMainPort, createDirectories, ComposeFile, makeLabelForServices, getFreePublicPort, getDomain, errorHandler, generatePassword, isDev, stopTcpHttpProxy, executeDockerCmd, checkDomainsIsValidInDNS, persistentVolumes, asyncSleep, isARM, defaultComposeConfiguration, checkExposedPort } from '../../../../lib/common';
+import { prisma, uniqueName, asyncExecShell, getServiceFromDB, getContainerUsage, isDomainConfigured, saveUpdateableFields, fixType, decrypt, encrypt, ComposeFile, getFreePublicPort, getDomain, errorHandler, generatePassword, isDev, stopTcpHttpProxy, executeDockerCmd, checkDomainsIsValidInDNS, checkExposedPort, listSettings } from '../../../../lib/common';
 import { day } from '../../../../lib/dayjs';
-import { checkContainer, isContainerExited, removeContainer } from '../../../../lib/docker';
+import { checkContainer, isContainerExited } from '../../../../lib/docker';
 import cuid from 'cuid';
 
 import type { OnlyId } from '../../../../types';
-import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetWordpressSettings } from './types';
-import { defaultServiceConfigurations } from '../../../../lib/services';
+import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetGlitchTipSettings, SetWordpressSettings } from './types';
 import { supportedServiceTypesAndVersions } from '../../../../lib/services/supportedVersions';
 import { configureServiceType, removeService } from '../../../../lib/services/common';
 
@@ -72,6 +70,7 @@ export async function getService(request: FastifyRequest<OnlyId>) {
             throw { status: 404, message: 'Service not found.' }
         }
         return {
+            settings: await listSettings(),
             service
         }
     } catch ({ status, message }) {
@@ -234,7 +233,7 @@ export async function checkService(request: FastifyRequest<CheckService>) {
         if (otherFqdns && otherFqdns.length > 0) otherFqdns = otherFqdns.map((f) => f.toLowerCase());
         if (exposePort) exposePort = Number(exposePort);
 
-        const { destinationDocker: { id: dockerId, remoteIpAddress, remoteEngine }, exposePort: configuredPort } = await prisma.service.findUnique({ where: { id }, include: { destinationDocker: true } })
+        const { destinationDocker: { remoteIpAddress, remoteEngine, engine }, exposePort: configuredPort } = await prisma.service.findUnique({ where: { id }, include: { destinationDocker: true } })
         const { isDNSCheckEnabled } = await prisma.setting.findFirst({});
 
         let found = await isDomainConfigured({ id, fqdn, remoteIpAddress });
@@ -249,7 +248,7 @@ export async function checkService(request: FastifyRequest<CheckService>) {
                 }
             }
         }
-        if (exposePort) await checkExposedPort({ id, configuredPort, exposePort, dockerId, remoteIpAddress })
+        if (exposePort) await checkExposedPort({ id, configuredPort, exposePort, engine, remoteEngine, remoteIpAddress })
         if (isDNSCheckEnabled && !isDev && !forceSave) {
             let hostname = request.hostname.split(':')[0];
             if (remoteEngine) hostname = remoteIpAddress;
@@ -269,7 +268,6 @@ export async function saveService(request: FastifyRequest<SaveService>, reply: F
         if (exposePort) exposePort = Number(exposePort);
 
         type = fixType(type)
-
         const update = saveUpdateableFields(type, request.body[type])
         const data = {
             fqdn,
@@ -400,17 +398,33 @@ export async function deleteServiceStorage(request: FastifyRequest<DeleteService
     }
 }
 
-export async function setSettingsService(request: FastifyRequest<ServiceStartStop & SetWordpressSettings>, reply: FastifyReply) {
+export async function setSettingsService(request: FastifyRequest<ServiceStartStop & SetWordpressSettings & SetGlitchTipSettings>, reply: FastifyReply) {
     try {
         const { type } = request.params
         if (type === 'wordpress') {
             return await setWordpressSettings(request, reply)
         }
+        if (type === 'glitchtip') {
+            return await setGlitchTipSettings(request, reply)
+        }
         throw `Service type ${type} not supported.`
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
 }
+async function setGlitchTipSettings(request: FastifyRequest<SetGlitchTipSettings>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const { enableOpenUserRegistration, emailSmtpUseSsl, emailSmtpUseTls } = request.body
+        await prisma.glitchTip.update({
+            where: { serviceId: id },
+            data: { enableOpenUserRegistration, emailSmtpUseSsl, emailSmtpUseTls }
+        });
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 async function setWordpressSettings(request: FastifyRequest<ServiceStartStop & SetWordpressSettings>, reply: FastifyReply) {
     try {
         const { id } = request.params
@@ -471,9 +485,9 @@ export async function activateWordpressFtp(request: FastifyRequest<ActivateWordp
     const { id } = request.params
     const { ftpEnabled } = request.body;
 
-    const { service: { destinationDocker: { id: dockerId } } } = await prisma.wordpress.findUnique({ where: { serviceId: id }, include: { service: { include: { destinationDocker: true } } } })
+    const { service: { destinationDocker: { engine, remoteEngine, remoteIpAddress } } } = await prisma.wordpress.findUnique({ where: { serviceId: id }, include: { service: { include: { destinationDocker: true } } } })
 
-    const publicPort = await getFreePublicPort(id, dockerId);
+    const publicPort = await getFreePublicPort({ id, remoteEngine, engine, remoteIpAddress });
 
     let ftpUser = cuid();
     let ftpPassword = generatePassword({});
@@ -547,10 +561,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'
@@ -629,9 +640,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/api/v1/services/index.ts

@@ -29,7 +29,7 @@ import {
 } from './handlers';
 
 import type { OnlyId } from '../../../../types';
-import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetWordpressSettings } from './types';
+import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetGlitchTipSettings, SetWordpressSettings } from './types';
 import { startService, stopService } from '../../../../lib/services/handlers';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
@@ -71,7 +71,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.post<ServiceStartStop>('/:id/:type/start', async (request) => await startService(request));
     fastify.post<ServiceStartStop>('/:id/:type/stop', async (request) => await stopService(request));
-    fastify.post<ServiceStartStop & SetWordpressSettings>('/:id/:type/settings', async (request, reply) => await setSettingsService(request, reply));
+    fastify.post<ServiceStartStop & SetWordpressSettings & SetGlitchTipSettings>('/:id/:type/settings', async (request, reply) => await setSettingsService(request, reply));
 
     fastify.post<OnlyId>('/:id/plausibleanalytics/activate', async (request, reply) => await activatePlausibleUsers(request, reply));
     fastify.post<OnlyId>('/:id/plausibleanalytics/cleanup', async (request, reply) => await cleanupPlausibleLogs(request, reply));

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

@@ -89,6 +89,10 @@ export interface ActivateWordpressFtp extends OnlyId {
     }
 }
 
-
-
-
+export interface SetGlitchTipSettings extends OnlyId {
+    Body: {
+        enableOpenUserRegistration: boolean,
+        emailSmtpUseSsl: boolean,
+        emailSmtpUseTls: boolean
+    }
+}

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

@@ -28,6 +28,7 @@ export async function saveSettings(request: FastifyRequest<SaveSettings>, reply:
     try {
         const {
             fqdn,
+            isAPIDebuggingEnabled,
             isRegistrationEnabled,
             dualCerts,
             minPort,
@@ -39,7 +40,7 @@ export async function saveSettings(request: FastifyRequest<SaveSettings>, reply:
         const { id } = await listSettings();
         await prisma.setting.update({
             where: { id },
-            data: { isRegistrationEnabled, dualCerts, isAutoUpdateEnabled, isDNSCheckEnabled, DNSServers }
+            data: { isRegistrationEnabled, dualCerts, isAutoUpdateEnabled, isDNSCheckEnabled, DNSServers, isAPIDebuggingEnabled }
         });
         if (fqdn) {
             await prisma.setting.update({ where: { id }, data: { fqdn } });
@@ -57,7 +58,7 @@ export async function deleteDomain(request: FastifyRequest<DeleteDomain>, reply:
         const { fqdn } = request.body
         const { DNSServers } = await listSettings();
         if (DNSServers) {
-            dns.setServers([DNSServers]);
+            dns.setServers([...DNSServers.split(',')]);
         }
         let ip;
         try {

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

@@ -3,6 +3,7 @@ import { OnlyId } from "../../../../types"
 export interface SaveSettings {
     Body: {
         fqdn: string,
+        isAPIDebuggingEnabled: boolean,
         isRegistrationEnabled: boolean,
         dualCerts: boolean,
         minPort: number,

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 buildId = cuid();
         const allowedGithubEvents = ['push', 'pull_request'];
         const allowedActions = ['opened', 'reopened', 'synchronize', 'closed'];
         const githubEvent = request.headers['x-github-event']?.toString().toLowerCase();
@@ -87,126 +85,139 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
         if (!projectId || !branch) {
             throw { status: 500, message: 'Cannot parse projectId or branch from the webhook?!' }
         }
-        const applicationFound = await getApplicationFromDBWebhook(projectId, branch);
-        if (applicationFound) {
-            const webhookSecret = applicationFound.gitSource.githubApp.webhookSecret || null;
-            //@ts-ignore
-            const hmac = crypto.createHmac('sha256', webhookSecret);
-            const digest = Buffer.from(
-                'sha256=' + hmac.update(JSON.stringify(body)).digest('hex'),
-                'utf8'
-            );
-            if (!isDev) {
-                const checksum = Buffer.from(githubSignature, 'utf8');
+        const applicationsFound = await getApplicationFromDBWebhook(projectId, branch);
+        if (applicationsFound && applicationsFound.length > 0) {
+            for (const application of applicationsFound) {
+                const buildId = cuid();
+                const webhookSecret = application.gitSource.githubApp.webhookSecret || null;
                 //@ts-ignore
-                if (checksum.length !== digest.length || !crypto.timingSafeEqual(digest, checksum)) {
-                    throw { status: 500, message: 'SHA256 checksum failed. Are you doing something fishy?' }
-                };
-            }
-
-
-            if (githubEvent === 'push') {
-                if (!applicationFound.configHash) {
-                    const configHash = crypto
-                        //@ts-ignore
-                        .createHash('sha256')
-                        .update(
-                            JSON.stringify({
-                                buildPack: applicationFound.buildPack,
-                                port: applicationFound.port,
-                                exposePort: applicationFound.exposePort,
-                                installCommand: applicationFound.installCommand,
-                                buildCommand: applicationFound.buildCommand,
-                                startCommand: applicationFound.startCommand
-                            })
-                        )
-                        .digest('hex');
-                    await prisma.application.updateMany({
-                        where: { branch, projectId },
-                        data: { configHash }
-                    });
-                }
-                await prisma.application.update({
-                    where: { id: applicationFound.id },
-                    data: { updatedAt: new Date() }
-                });
-                await prisma.build.create({
-                    data: {
-                        id: buildId,
-                        applicationId: applicationFound.id,
-                        destinationDockerId: applicationFound.destinationDocker.id,
-                        gitSourceId: applicationFound.gitSource.id,
-                        githubAppId: applicationFound.gitSource.githubApp?.id,
-                        gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                        status: 'queued',
-                        type: 'webhook_commit'
-                    }
-                });
-                return {
-                    message: 'Queued. Thank you!'
-                };
-            } else if (githubEvent === 'pull_request') {
-                const pullmergeRequestId = body.number.toString();
-                const pullmergeRequestAction = body.action;
-                const sourceBranch = body.pull_request.head.ref.includes('/') ? body.pull_request.head.ref.split('/')[2] : body.pull_request.head.ref;
-                if (!allowedActions.includes(pullmergeRequestAction)) {
-                    throw { status: 500, message: 'Action not allowed.' }
+                const hmac = crypto.createHmac('sha256', webhookSecret);
+                const digest = Buffer.from(
+                    'sha256=' + hmac.update(JSON.stringify(body)).digest('hex'),
+                    'utf8'
+                );
+                if (!isDev) {
+                    const checksum = Buffer.from(githubSignature, 'utf8');
+                    //@ts-ignore
+                    if (checksum.length !== digest.length || !crypto.timingSafeEqual(digest, checksum)) {
+                        throw { status: 500, message: 'SHA256 checksum failed. Are you doing something fishy?' }
+                    };
                 }
 
-                if (applicationFound.settings.previews) {
-                    if (applicationFound.destinationDockerId) {
-                        const isRunning = await checkContainer(
-                            {
-                                dockerId: applicationFound.destinationDocker.id,
-                                container: applicationFound.id
-                            }
-                        );
-                        if (!isRunning) {
-                            throw { status: 500, message: 'Application not running.' }
-                        }
-                    }
-                    if (
-                        pullmergeRequestAction === 'opened' ||
-                        pullmergeRequestAction === 'reopened' ||
-                        pullmergeRequestAction === 'synchronize'
-                    ) {
+                if (githubEvent === 'push') {
+                    if (!application.configHash) {
+                        const configHash = crypto
+                            //@ts-ignore
+                            .createHash('sha256')
+                            .update(
+                                JSON.stringify({
+                                    buildPack: application.buildPack,
+                                    port: application.port,
+                                    exposePort: application.exposePort,
+                                    installCommand: application.installCommand,
+                                    buildCommand: application.buildCommand,
+                                    startCommand: application.startCommand
+                                })
+                            )
+                            .digest('hex');
                         await prisma.application.update({
-                            where: { id: applicationFound.id },
-                            data: { updatedAt: new Date() }
+                            where: { id: application.id },
+                            data: { configHash }
                         });
-                        await prisma.build.create({
-                            data: {
-                                id: buildId,
-                                pullmergeRequestId,
-                                sourceBranch,
-                                applicationId: applicationFound.id,
-                                destinationDockerId: applicationFound.destinationDocker.id,
-                                gitSourceId: applicationFound.gitSource.id,
-                                githubAppId: applicationFound.gitSource.githubApp?.id,
-                                gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                                status: 'queued',
-                                type: 'webhook_pr'
-                            }
-                        });
-                    
-                        return {
-                            message: 'Queued. Thank you!'
-                        };
-                    } else if (pullmergeRequestAction === 'closed') {
-                        if (applicationFound.destinationDockerId) {
-                            const id = `${applicationFound.id}-${pullmergeRequestId}`;
-                            await removeContainer({ id, dockerId: applicationFound.destinationDocker.id });
-                        }
-                        return {
-                            message: 'Removed preview. Thank you!'
-                        };
                     }
-                } else {
-                    throw { status: 500, message: 'Pull request previews are not enabled.' }
+
+                    await prisma.application.update({
+                        where: { id: application.id },
+                        data: { updatedAt: new Date() }
+                    });
+                    await prisma.build.create({
+                        data: {
+                            id: buildId,
+                            applicationId: application.id,
+                            destinationDockerId: application.destinationDocker.id,
+                            gitSourceId: application.gitSource.id,
+                            githubAppId: application.gitSource.githubApp?.id,
+                            gitlabAppId: application.gitSource.gitlabApp?.id,
+                            status: 'queued',
+                            type: 'webhook_commit'
+                        }
+                    });
+                    console.log(`Webhook for ${application.name} queued.`)
+
+                } else if (githubEvent === 'pull_request') {
+                    const pullmergeRequestId = body.number.toString();
+                    const pullmergeRequestAction = body.action;
+                    const sourceBranch = body.pull_request.head.ref.includes('/') ? body.pull_request.head.ref.split('/')[2] : body.pull_request.head.ref;
+                    if (!allowedActions.includes(pullmergeRequestAction)) {
+                        throw { status: 500, message: 'Action not allowed.' }
+                    }
+
+                    if (application.settings.previews) {
+                        if (application.destinationDockerId) {
+                            const isRunning = await checkContainer(
+                                {
+                                    dockerId: application.destinationDocker.id,
+                                    container: application.id
+                                }
+                            );
+                            if (!isRunning) {
+                                throw { status: 500, message: 'Application not running.' }
+                            }
+                        }
+                        if (
+                            pullmergeRequestAction === 'opened' ||
+                            pullmergeRequestAction === 'reopened' ||
+                            pullmergeRequestAction === 'synchronize'
+                        ) {
+                            await prisma.application.update({
+                                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,
+                                    pullmergeRequestId,
+                                    sourceBranch,
+                                    applicationId: application.id,
+                                    destinationDockerId: application.destinationDocker.id,
+                                    gitSourceId: application.gitSource.id,
+                                    githubAppId: application.gitSource.githubApp?.id,
+                                    gitlabAppId: application.gitSource.gitlabApp?.id,
+                                    status: 'queued',
+                                    type: 'webhook_pr'
+                                }
+                            });
+
+
+                        } else if (pullmergeRequestAction === 'closed') {
+                            if (application.destinationDockerId) {
+                                const id = `${application.id}-${pullmergeRequestId}`;
+                                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);
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
-        throw { status: 500, message: 'Not handled event.' }
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }

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

@@ -2,9 +2,8 @@ import axios from "axios";
 import cuid from "cuid";
 import crypto from "crypto";
 import type { FastifyReply, FastifyRequest } from "fastify";
-import { errorHandler, getAPIUrl, isDev, listSettings, prisma } from "../../../lib/common";
+import { errorHandler, getAPIUrl, getUIUrl, isDev, listSettings, prisma } from "../../../lib/common";
 import { checkContainer, removeContainer } from "../../../lib/docker";
-import { scheduler } from "../../../lib/scheduler";
 import { getApplicationFromDB, getApplicationFromDBWebhook } from "../../api/v1/applications/handlers";
 
 import type { ConfigureGitLabApp, GitLabEvents } from "./types";
@@ -30,7 +29,7 @@ export async function configureGitLabApp(request: FastifyRequest<ConfigureGitLab
         });
         const { data } = await axios.post(`${htmlUrl}/oauth/token`, params)
         if (isDev) {
-            return reply.redirect(`${getAPIUrl()}/webhooks/success?token=${data.access_token}`)
+            return reply.redirect(`${getUIUrl()}/webhooks/success?token=${data.access_token}`)
         }
         return reply.redirect(`/webhooks/success?token=${data.access_token}`)
     } catch ({ status, message, ...other }) {
@@ -40,59 +39,56 @@ export async function configureGitLabApp(request: FastifyRequest<ConfigureGitLab
 export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
     const { object_kind: objectKind, ref, project_id } = request.body
     try {
-        const buildId = cuid();
 
         const allowedActions = ['opened', 'reopen', 'close', 'open', 'update'];
 
         const webhookToken = request.headers['x-gitlab-token'];
-        if (!webhookToken) {
+        if (!webhookToken && !isDev) {
             throw { status: 500, message: 'Invalid webhookToken.' }
         }
         if (objectKind === 'push') {
             const projectId = Number(project_id);
             const branch = ref.split('/')[2];
-            const applicationFound = await getApplicationFromDBWebhook(projectId, branch);
-            if (applicationFound) {
-                if (!applicationFound.configHash) {
-                    const configHash = crypto
-                        .createHash('sha256')
-                        .update(
-                            JSON.stringify({
-                                buildPack: applicationFound.buildPack,
-                                port: applicationFound.port,
-                                exposePort: applicationFound.exposePort,
-                                installCommand: applicationFound.installCommand,
-                                buildCommand: applicationFound.buildCommand,
-                                startCommand: applicationFound.startCommand
-                            })
-                        )
-                        .digest('hex');
-                    await prisma.application.updateMany({
-                        where: { branch, projectId },
-                        data: { configHash }
+            const applicationsFound = await getApplicationFromDBWebhook(projectId, branch);
+            if (applicationsFound && applicationsFound.length > 0) {
+                for (const application of applicationsFound) {
+                    const buildId = cuid();
+                    if (!application.configHash) {
+                        const configHash = crypto
+                            .createHash('sha256')
+                            .update(
+                                JSON.stringify({
+                                    buildPack: application.buildPack,
+                                    port: application.port,
+                                    exposePort: application.exposePort,
+                                    installCommand: application.installCommand,
+                                    buildCommand: application.buildCommand,
+                                    startCommand: application.startCommand
+                                })
+                            )
+                            .digest('hex');
+                        await prisma.application.update({
+                            where: { id: application.id },
+                            data: { configHash }
+                        });
+                    }
+                    await prisma.application.update({
+                        where: { id: application.id },
+                        data: { updatedAt: new Date() }
+                    });
+                    await prisma.build.create({
+                        data: {
+                            id: buildId,
+                            applicationId: application.id,
+                            destinationDockerId: application.destinationDocker.id,
+                            gitSourceId: application.gitSource.id,
+                            githubAppId: application.gitSource.githubApp?.id,
+                            gitlabAppId: application.gitSource.gitlabApp?.id,
+                            status: 'queued',
+                            type: 'webhook_commit'
+                        }
                     });
                 }
-                await prisma.application.update({
-                    where: { id: applicationFound.id },
-                    data: { updatedAt: new Date() }
-                });
-                await prisma.build.create({
-                    data: {
-                        id: buildId,
-                        applicationId: applicationFound.id,
-                        destinationDockerId: applicationFound.destinationDocker.id,
-                        gitSourceId: applicationFound.gitSource.id,
-                        githubAppId: applicationFound.gitSource.githubApp?.id,
-                        gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                        status: 'queued',
-                        type: 'webhook_commit'
-                    }
-                });
-
-                return {
-                    message: 'Queued. Thank you!'
-                };
-
             }
         } else if (objectKind === 'merge_request') {
             const { object_attributes: { work_in_progress: isDraft, action, source_branch: sourceBranch, target_branch: targetBranch, iid: pullmergeRequestId }, project: { id } } = request.body
@@ -105,64 +101,63 @@ export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
                 throw { status: 500, message: 'Draft MR, do nothing.' }
             }
 
-            const applicationFound = await getApplicationFromDBWebhook(projectId, targetBranch);
-            if (applicationFound) {
-                if (applicationFound.settings.previews) {
-                    if (applicationFound.destinationDockerId) {
-                        const isRunning = await checkContainer(
-                            {
-                                dockerId: applicationFound.destinationDocker.id,
-                                container: applicationFound.id
+            const applicationsFound = await getApplicationFromDBWebhook(projectId, targetBranch);
+            if (applicationsFound && applicationsFound.length > 0) {
+                for (const application of applicationsFound) {
+                    const buildId = cuid();
+                    if (application.settings.previews) {
+                        if (application.destinationDockerId) {
+                            const isRunning = await checkContainer(
+                                {
+                                    dockerId: application.destinationDocker.id,
+                                    container: application.id
+                                }
+                            );
+                            if (!isRunning) {
+                                throw { status: 500, message: 'Application not running.' }
                             }
-                        );
-                        if (!isRunning) {
-                            throw { status: 500, message: 'Application not running.' }
                         }
-                    }
-                    if (!isDev && applicationFound.gitSource.gitlabApp.webhookToken !== webhookToken) {
-                        throw { status: 500, message: 'Invalid webhookToken. Are you doing something nasty?!' }
-                    }
-                    if (
-                        action === 'opened' ||
-                        action === 'reopen' ||
-                        action === 'open' ||
-                        action === 'update'
-                    ) {
-                        await prisma.application.update({
-                            where: { id: applicationFound.id },
-                            data: { updatedAt: new Date() }
-                        });
-                        await prisma.build.create({
-                            data: {
-                                id: buildId,
-                                pullmergeRequestId,
-                                sourceBranch,
-                                applicationId: applicationFound.id,
-                                destinationDockerId: applicationFound.destinationDocker.id,
-                                gitSourceId: applicationFound.gitSource.id,
-                                githubAppId: applicationFound.gitSource.githubApp?.id,
-                                gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                                status: 'queued',
-                                type: 'webhook_mr'
+                        if (!isDev && application.gitSource.gitlabApp.webhookToken !== webhookToken) {
+                            throw { status: 500, message: 'Invalid webhookToken. Are you doing something nasty?!' }
+                        }
+                        if (
+                            action === 'opened' ||
+                            action === 'reopen' ||
+                            action === 'open' ||
+                            action === 'update'
+                        ) {
+                            await prisma.application.update({
+                                where: { id: application.id },
+                                data: { updatedAt: new Date() }
+                            });
+                            await prisma.build.create({
+                                data: {
+                                    id: buildId,
+                                    pullmergeRequestId: pullmergeRequestId.toString(),
+                                    sourceBranch,
+                                    applicationId: application.id,
+                                    destinationDockerId: application.destinationDocker.id,
+                                    gitSourceId: application.gitSource.id,
+                                    githubAppId: application.gitSource.githubApp?.id,
+                                    gitlabAppId: application.gitSource.gitlabApp?.id,
+                                    status: 'queued',
+                                    type: 'webhook_mr'
+                                }
+                            });
+                            return {
+                                message: 'Queued. Thank you!'
+                            };
+                        } else if (action === 'close') {
+                            if (application.destinationDockerId) {
+                                const id = `${application.id}-${pullmergeRequestId}`;
+                                await removeContainer({ id, dockerId: application.destinationDocker.id });
                             }
-                        });
-                        return {
-                            message: 'Queued. Thank you!'
-                        };
-                    } else if (action === 'close') {
-                        if (applicationFound.destinationDockerId) {
-                            const id = `${applicationFound.id}-${pullmergeRequestId}`;
-                            await removeContainer({ id, dockerId: applicationFound.destinationDocker.id });
+
                         }
-                        return {
-                            message: 'Removed preview. Thank you!'
-                        };
                     }
                 }
-                throw { status: 500, message: 'Merge request previews are not enabled.' }
             }
         }
-        throw { status: 500, message: 'Not handled event.' }
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }

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

@@ -3,6 +3,7 @@ import { errorHandler, getDomain, isDev, prisma, executeDockerCmd } from "../../
 import { supportedServiceTypesAndVersions } from "../../../lib/services/supportedVersions";
 import { includeServices } from "../../../lib/services/common";
 import { TraefikOtherConfiguration } from "./types";
+import { OnlyId } from "../../../types";
 
 function configureMiddleware(
 	{ id, container, port, domain, nakedDomain, isHttps, isWWW, isDualCerts, scriptName, type },
@@ -25,7 +26,30 @@ function configureMiddleware(
 				]
 			}
 		};
+		if (type === 'appwrite') {
+			traefik.http.routers[`${id}-realtime`] = {
+				entrypoints: ['websecure'],
+				rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/v1/realtime\`)`,
+				service: `${`${id}-realtime`}`,
+				tls: {
+					domains: {
+						main: `${domain}`
+					}
+				},
+				middlewares: []
+			};
 
+
+			traefik.http.services[`${id}-realtime`] = {
+				loadbalancer: {
+					servers: [
+						{
+							url: `http://${container}-realtime:${port}`
+						}
+					]
+				}
+			};
+		}
 		if (isDualCerts) {
 			traefik.http.routers[`${id}-secure`] = {
 				entrypoints: ['websecure'],
@@ -112,6 +136,23 @@ function configureMiddleware(
 				]
 			}
 		};
+		if (type === 'appwrite') {
+			traefik.http.routers[`${id}-realtime`] = {
+				entrypoints: ['web'],
+				rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/v1/realtime\`)`,
+				service: `${id}-realtime`,
+				middlewares: []
+			};
+			traefik.http.services[`${id}-realtime`] = {
+				loadbalancer: {
+					servers: [
+						{
+							url: `http://${container}-realtime:${port}`
+						}
+					]
+				}
+			};
+		}
 
 		if (!isDualCerts) {
 			if (isWWW) {
@@ -490,7 +531,7 @@ export async function traefikOtherConfiguration(request: FastifyRequest<TraefikO
 	}
 }
 
-export async function remoteTraefikConfiguration(request: FastifyRequest) {
+export async function remoteTraefikConfiguration(request: FastifyRequest<OnlyId>) {
 	const { id } = request.params
 	try {
 		const traefik = {

apps/api/src/routes/webhooks/traefik/index.ts

@@ -1,4 +1,5 @@
 import { FastifyPluginAsync } from 'fastify';
+import { OnlyId } from '../../../types';
 import { remoteTraefikConfiguration, traefikConfiguration, traefikOtherConfiguration } from './handlers';
 import { TraefikOtherConfiguration } from './types';
 
@@ -6,7 +7,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.get('/main.json', async (request, reply) => traefikConfiguration(request, reply));
     fastify.get<TraefikOtherConfiguration>('/other.json', async (request, reply) => traefikOtherConfiguration(request));
 
-    fastify.get('/remote/:id', async (request) => remoteTraefikConfiguration(request));
+    fastify.get<OnlyId>('/remote/:id', async (request) => remoteTraefikConfiguration(request));
 };
 
 export default root;

apps/api/src/types.ts

@@ -1,39 +1,4 @@
 export interface OnlyId {
     Params: { id: string },
 }
-export interface SaveVersion extends OnlyId {
-    Body: {
-        version: string
-    }
-}
-export interface SaveDatabaseDestination extends OnlyId {
-    Body: {
-        destinationId: string
-    }
-}
-export interface GetDatabaseLogs extends OnlyId {
-    Querystring: {
-        since: number
-    }
-}
-export interface SaveDatabase extends OnlyId {
-    Body: {
-        name: string,
-        defaultDatabase: string,
-        dbUser: string,
-        dbUserPassword: string,
-        rootUser: string,
-        rootUserPassword: string,
-        version: string,
-        isRunning: boolean
-    }
-}
-export interface SaveDatabaseSettings extends OnlyId {
-    Body: {
-        isPublic: boolean,
-        appendOnly: boolean
-    }
-}
-
-
 

apps/i18n/.env.example

@@ -0,0 +1,4 @@
+WEBLATE_INSTANCE_URL=http://localhost
+WEBLATE_COMPONENT_NAME=coolify
+WEBLATE_TOKEN=
+TRANSLATION_DIR=

apps/i18n/.gitignore

@@ -0,0 +1 @@
+locales/*

apps/i18n/index.mjs

@@ -0,0 +1,63 @@
+import dotenv from 'dotenv';
+dotenv.config()
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url';
+import Gettext from 'node-gettext'
+import { po } from 'gettext-parser'
+import got from 'got';
+const __filename = fileURLToPath(import.meta.url);
+
+const __dirname = path.dirname(__filename);
+
+const weblateInstanceURL = process.env.WEBLATE_INSTANCE_URL;
+const weblateComponentName = process.env.WEBLATE_COMPONENT_NAME
+const token = process.env.WEBLATE_TOKEN;
+
+const translationsDir = process.env.TRANSLATION_DIR;
+const translationsPODir = './locales';
+const locales = []
+const domain = 'locale'
+
+const translations = await got(`${weblateInstanceURL}/api/components/${weblateComponentName}/glossary/translations/?format=json`, {
+    headers: {
+        "Authorization": `Token ${token}`
+    }
+}).json()
+for (const translation of translations.results) {
+    const code = translation.language_code
+    locales.push(code)
+
+    const fileUrl = translation.file_url.replace('=json', '=po')
+    const file = await got(fileUrl, {
+        headers: {
+            "Authorization": `Token ${token}`
+        }
+    }).text()
+    fs.writeFileSync(path.join(__dirname, translationsPODir, domain + '-' + code + '.po'), file)
+}
+
+
+const gt = new Gettext()
+
+locales.forEach((locale) => {
+    let json = {}
+    const fileName = `${domain}-${locale}.po`
+    const translationsFilePath = path.join(translationsPODir, fileName)
+    const translationsContent = fs.readFileSync(translationsFilePath)
+
+    const parsedTranslations = po.parse(translationsContent)
+    const a = gt.gettext(parsedTranslations)
+    for (const [key, value] of Object.entries(a)) {
+        if (key === 'translations') {
+            for (const [key1, value1] of Object.entries(value)) {
+                if (key1 !== '') {
+                    for (const [key2, value2] of Object.entries(value1)) {
+                        json[value2.msgctxt] = value2.msgstr[0]
+                    }
+                }
+            }
+        }
+    }
+    fs.writeFileSync(`${translationsDir}/${locale}.json`, JSON.stringify(json))
+})

apps/i18n/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "i18n-converter",
+	"description": "Convert Weblate translations to sveltekit-i18n",
+	"license": "Apache-2.0",
+	"scripts": {
+		"translate": "node index.mjs"
+	},
+	"type": "module",
+	"dependencies": {
+		"node-gettext": "3.0.0",
+		"gettext-parser": "6.0.0",
+		"got": "12.3.1",
+		"dotenv": "16.0.2"
+	}
+}

apps/ui/package.json

@@ -14,33 +14,38 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
+		"@floating-ui/dom": "1.0.1",
 		"@playwright/test": "1.25.1",
+		"@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",
-		"eslint": "8.22.0",
+		"classnames": "2.3.1",
+		"eslint": "8.23.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-svelte3": "4.0.0",
+		"flowbite": "1.5.2",
+		"flowbite-svelte": "0.26.2",
 		"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/DocLink.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Tooltip from './Tooltip.svelte';
+	export let url = 'https://docs.coollabs.io';
+	let id =
+		'cool-' +
+		url
+			.split('')
+			.map((c) => c.charCodeAt(0).toString(16).padStart(2, '0'))
+			.join('')
+			.slice(-16);
+</script>
+
+<a {id} href={url} target="_blank" class="icons inline-block text-pink-500 cursor-pointer text-xs">
+	<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="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"
+		/>
+		<line x1="13" y1="8" x2="15" y2="8" />
+		<line x1="13" y1="12" x2="15" y2="12" />
+	</svg>
+</a>
+<Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>

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

@@ -1,6 +1,31 @@
 <script lang="ts">
-	export let text: string;
-	export let customClass = 'max-w-[24rem]';
+	import { onMount } from 'svelte';
+
+	import Tooltip from './Tooltip.svelte';
+	export let explanation = '';
+	let id: any;
+	let self: any;
+	onMount(() => {
+		id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	});
 </script>
 
-<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
+<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
+	<svg
+		fill="none"
+		height="18"
+		shape-rendering="geometricPrecision"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		width="18"
+		><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path
+			d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+		/><circle cx="12" cy="17" r=".5" />
+	</svg>
+</div>
+{#if id}
+	<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
+{/if}

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

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import Explainer from '$lib/components/Explainer.svelte';
+	import Explaner from './Explainer.svelte';
+	import Tooltip from './Tooltip.svelte';
 
+	export let id: any;
 	export let setting: any;
 	export let title: any;
 	export let description: any;
@@ -8,22 +10,17 @@
 	export let disabled = false;
 	export let dataTooltip: any = null;
 	export let loading = false;
+	let triggeredBy = `#${id}`;
 </script>
 
 <div class="flex items-center py-4 pr-8">
 	<div class="flex w-96 flex-col">
-		<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
-		<Explainer text={description} />
+		<div class="text-xs font-bold text-stone-100 md:text-base">
+			{title}<Explaner explanation={description} />
+		</div>
 	</div>
 </div>
-<div
-	class:tooltip-right={dataTooltip}
-	class:tooltip-primary={dataTooltip}
-	class:tooltip={dataTooltip}
-	class:text-center={isCenter}
-	data-tip={dataTooltip}
-	class="flex justify-center"
->
+<div class:text-center={isCenter} class="flex justify-center">
 	<div
 		on:click
 		aria-pressed="false"
@@ -32,6 +29,7 @@
 		class:bg-green-600={!loading && setting}
 		class:bg-stone-700={!loading && !setting}
 		class:bg-yellow-500={loading}
+		{id}
 	>
 		<span class="sr-only">Use setting</span>
 		<span
@@ -72,3 +70,7 @@
 		</span>
 	</div>
 </div>
+
+{#if dataTooltip}
+	<Tooltip {triggeredBy} placement="top">{dataTooltip}</Tooltip>
+{/if}

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

@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let text: string;
+	export let customClass = 'max-w-[24rem]';
+</script>
+
+<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Tooltip } from 'flowbite-svelte';
+	export let placement = 'bottom';
+	export let color = 'bg-coollabs text-left';
+	export let triggeredBy = '#tooltip-default';
+</script>
+
+<Tooltip {triggeredBy} {placement} arrow={false} {color} style="custom"><slot /></Tooltip>

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

@@ -4,6 +4,7 @@
 	import { addToast, appSession, features } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
+	import Tooltip from './Tooltip.svelte';
 
 	let isUpdateAvailable = false;
 	let updateStatus: any = {
@@ -16,7 +17,6 @@
 		updateStatus.loading = true;
 		try {
 			if (dev) {
-				console.log(`updating to ${latestVersion}`);
 				await asyncSleep(4000);
 				return window.location.reload();
 			} else {
@@ -76,14 +76,14 @@
 	});
 </script>
 
-<div class="flex flex-col space-y-4 py-2">
+<div class="py-2">
 	{#if $appSession.teamId === '0'}
 		{#if isUpdateAvailable}
 			<button
+				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons tooltip tooltip-right tooltip-primary bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
-				data-tip="Update Available!"
+				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
 			>
 				{#if updateStatus.loading}
 					<svg
@@ -184,6 +184,7 @@
 					>
 				{/if}
 			</button>
+			<Tooltip triggeredBy="#update" placement="right" color="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">New Version Available!</Tooltip>
 		{/if}
 	{/if}
 </div>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	export let server: any;
 	let usage = {
 		cpu: {
 			load: [0, 0, 0],
@@ -20,8 +21,7 @@
 	let usageInterval: any;
 	let loading = {
 		usage: false,
-		cleanup: false,
-		restart: false
+		cleanup: false
 	};
 	import { addToast, appSession } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
@@ -30,29 +30,11 @@
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
-		const data = await get('/usage');
+		const data = await get(`/servers/usage/${server.id}?remoteEngine=${server.remoteEngine}`);
 		usage = data.usage;
 		loading.usage = false;
 	}
-	async function restartCoolify() {
-		const sure = confirm(
-			'Are you sure you would like to restart Coolify? Currently running deployments will be stopped and restarted.'
-		);
-		if (sure) {
-			loading.restart = true;
-			try {
-				await post(`/internal/restart`, {});
-				addToast({
-					type: 'success',
-					message: 'Coolify restarted successfully. It will take a moment.'
-				});
-			} catch (error) {
-				return errorNotification(error);
-			} finally {
-				loading.restart = false;
-			}
-		}
-	}
+
 	onDestroy(() => {
 		clearInterval(usageInterval);
 	});
@@ -71,7 +53,7 @@
 	async function manuallyCleanupStorage() {
 		try {
 			loading.cleanup = true;
-			await post('/internal/cleanup', {});
+			await post('/internal/cleanup', { serverId: server.id });
 			return addToast({
 				message: 'Cleanup done.',
 				type: 'success'
@@ -84,23 +66,42 @@
 	}
 </script>
 
-<div class="w-full">
-	<div class="flex lg:flex-row flex-col gap-4">
-		<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={restartCoolify}
-					class:loading={loading.restart}
-					class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
-				>
-			{/if}
+<div class="w-full relative p-5 ">
+	{#if loading.usage}
+		<span class="indicator-item badge bg-yellow-500 badge-sm" />
+	{:else}
+		<span class="indicator-item badge bg-success badge-sm" />
+	{/if}
+	{#if server.remoteEngine}
+		<div
+			class="absolute top-0 right-0 text-xl font-bold uppercase bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-1 rounded m-2"
+		>
+			BETA
 		</div>
+	{/if}
+	<div class="w-full flex flex-row space-x-4">
+		<div class="flex flex-col">
+			<h1 class="font-bold text-lg lg:text-xl truncate">
+				{server.name}
+			</h1>
+			<div class="text-xs ">
+				{#if server?.remoteIpAddress}
+					<h2>{server?.remoteIpAddress}</h2>
+				{:else}
+					<h2>localhost</h2>
+				{/if}
+			</div>
+		</div>
+		{#if $appSession.teamId === '0'}
+			<button
+				on:click={manuallyCleanupStorage}
+				class:loading={loading.cleanup}
+				class="btn btn-sm bg-coollabs">Cleanup Storage</button
+			>
+		{/if}
+	</div>
+	<div class="flex lg:flex-row flex-col gap-4">
+		<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0" />
 	</div>
 	<div class="divider" />
 	<div class="grid grid-flow-col gap-4 grid-rows-3 justify-start lg:justify-center lg:grid-rows-1">
@@ -108,21 +109,21 @@
 			<div class="stat">
 				<div class="stat-title">Total Memory</div>
 				<div class="stat-value text-2xl">
-					{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
+					{(usage?.memory?.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">Used Memory</div>
 				<div class="stat-value text-2xl">
-					{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
+					{(usage?.memory?.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">Free Memory</div>
 				<div class="stat-value text-2xl">
-					{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
+					{(usage?.memory?.freeMemPercentage).toFixed(0)}<span class="text-sm">%</span>
 				</div>
 			</div>
 		</div>
@@ -131,41 +132,41 @@
 			<div class="stat">
 				<div class="stat-title">Total CPU</div>
 				<div class="stat-value text-2xl">
-					{usage?.cpu.count}
+					{usage?.cpu?.count}
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">CPU Usage</div>
 				<div class="stat-value text-2xl">
-					{usage?.cpu.usage}<span class="text-sm">%</span>
+					{usage?.cpu?.usage}<span class="text-sm">%</span>
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">Load Average (5,10,30mins)</div>
-				<div class="stat-value text-2xl">{usage?.cpu.load}</div>
+				<div class="stat-value text-2xl">{usage?.cpu?.load}</div>
 			</div>
 		</div>
 		<div class="stats stats-vertical min-w-[16rem] mb-5 bg-transparent rounded">
 			<div class="stat">
 				<div class="stat-title">Total Disk</div>
 				<div class="stat-value text-2xl">
-					{usage?.disk.totalGb}<span class="text-sm">GB</span>
+					{usage?.disk?.totalGb}<span class="text-sm">GB</span>
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">Used Disk</div>
 				<div class="stat-value text-2xl">
-					{usage?.disk.usedGb}<span class="text-sm">GB</span>
+					{usage?.disk?.usedGb}<span class="text-sm">GB</span>
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">Free Disk</div>
 				<div class="stat-value text-2xl">
-					{usage?.disk.freePercentage}<span class="text-sm">%</span>
+					{usage?.disk?.freePercentage}<span class="text-sm">%</span>
 				</div>
 			</div>
 		</div>

apps/ui/src/lib/components/svg/databases/DatabaseIcons.svelte

@@ -16,4 +16,6 @@
 	<Icons.Redis {isAbsolute} />
 {:else if type === 'couchdb'}
 	<Icons.CouchDB {isAbsolute} />
+{:else if type === 'edgedb'}
+	<Icons.EdgeDB {isAbsolute} />
 {/if}

apps/ui/src/lib/components/svg/databases/EdgeDB.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+	class={isAbsolute ? 'absolute top-0 left-0 -m-8 h-16 w-16' : 'mx-auto w-12 h-12'}
+	width="88"
+	fill="#1F8AED"
+	height="101"
+	viewBox="0 -15 88 101"
+	><path
+		class="pageNav_logoBar__2v4ah"
+		style="transform-origin:center 35.5px"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M55.1436 71H58.1436V0H55.1436V71Z"
+	/><path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M74.5362 35.3047C74.5362 41.3776 72.1013 42.4662 69.3799 42.4662H63.5935V28.1432H69.3799C72.1013 28.1432 74.5362 29.2318 74.5362 35.3047V35.3047ZM71.5862 35.3047C71.5862 31.0651 70.2971 30.8646 68.4352 30.8646H66.6305V39.7448H68.4352C70.2971 39.7448 71.5862 39.5443 71.5862 35.3047V35.3047ZM40.9348 42.4662V28.1432H50.0442V30.8646H43.9713V33.7865H48.5546V36.4792H43.9713V39.7448H50.0442V42.4662H40.9348ZM80.6092 36.1068V39.7448H83.13C84.7055 39.7448 85.1066 38.7135 85.1066 37.9401C85.1066 37.3385 84.8201 36.1068 82.6717 36.1068H80.6092ZM80.6092 30.8646V33.5859H82.6717C83.8462 33.5859 84.5337 33.0703 84.5337 32.2109C84.5337 31.3516 83.8462 30.8646 82.6717 30.8646H80.6092ZM77.5732 28.1432H83.4169C86.482 28.1432 87.3987 30.2917 87.3987 31.8385C87.3987 33.2708 86.482 34.3021 85.8518 34.5885C87.6851 35.4766 88.0002 37.2813 88.0002 38.1979C88.0002 39.401 87.3987 42.4662 83.4169 42.4662H77.5732V28.1432ZM23.4899 35.3047C23.4899 41.3776 21.055 42.4662 18.3337 42.4662H12.5472V28.1432H18.3337C21.055 28.1432 23.4899 29.2318 23.4899 35.3047V35.3047ZM32.4272 39.8594C33.974 39.8594 34.7761 39.3438 35.0626 39V37.4245H32.599V34.9609H37.4975V40.6615C37.0678 41.3203 34.7188 42.6094 32.5704 42.6094C29.047 42.6094 26.0678 41.2344 26.0678 35.1615C26.0678 29.0885 29.0756 28 31.797 28C36.0652 28 37.1251 30.2344 37.4688 32.2109L34.948 32.7839C34.8048 31.8672 34.0027 30.7214 32.1694 30.7214C30.3074 30.7214 29.0183 30.9219 29.0183 35.1615C29.0183 39.401 30.3647 39.8594 32.4272 39.8594V39.8594ZM20.539 35.3047C20.539 31.0651 19.2499 30.8646 17.3879 30.8646H15.5833V39.7448H17.3879C19.2499 39.7448 20.539 39.5443 20.539 35.3047V35.3047ZM0 42.4662V28.1432H9.10938V30.8646H3.03646V33.7865H7.61979V36.4792H3.03646V39.7448H9.10938V42.4662H0Z"
+	/></svg
+>

apps/ui/src/lib/components/svg/databases/index.ts

@@ -6,5 +6,6 @@ export { default as MongoDB } from './MongoDB.svelte';
 export { default as MySQL } from './MySQL.svelte';
 export { default as PostgreSQL } from './PostgreSQL.svelte';
 export { default as Redis } from './Redis.svelte';
+export { default as EdgeDB } from './EdgeDB.svelte';
 
 

apps/ui/src/lib/components/svg/services/MeiliSearch.svelte

@@ -4,7 +4,7 @@
 
 <svg
 	viewBox="0 0 127 74"
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	xmlns="http://www.w3.org/2000/svg"
 	><path
 		d="M.825 73.993l23.244-59.47A21.85 21.85 0 0144.42.625h14.014L35.19 60.096a21.85 21.85 0 01-20.352 13.897H.825z"

apps/ui/src/lib/components/svg/services/ServiceIcons.svelte

@@ -40,4 +40,6 @@
 	<Icons.GlitchTip {isAbsolute} />
 {:else if type === 'searxng'}
 	<Icons.Searxng {isAbsolute} />
+{:else if type === 'weblate'}
+	<Icons.Weblate {isAbsolute} />
 {/if}

apps/ui/src/lib/components/svg/services/Weblate.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-12 h-12 mx-auto'}
+	version="1.1"
+	viewBox="0 0 300 300"
+	><linearGradient
+		id="a"
+		x1=".3965"
+		x2="98.808"
+		y1="55.253"
+		y2="55.253"
+		gradientTransform="scale(.98308 1.0172)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-color="#00d2e6" offset="0" /><stop
+			stop-color="#2eccaa"
+			offset="1"
+		/></linearGradient
+	><linearGradient
+		id="b"
+		x1="49.017"
+		x2="99.793"
+		y1="137.89"
+		y2="113.96"
+		gradientTransform="scale(1.1631 .8598)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-opacity="0" offset="0" /><stop offset=".51413" /><stop
+			stop-opacity="0"
+			offset="1"
+		/></linearGradient
+	><linearGradient
+		id="c"
+		x1="201.82"
+		x2="103.58"
+		y1="57.649"
+		y2="57.649"
+		gradientTransform="scale(.98308 1.0172)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-color="#1fa385" offset="0" /><stop
+			stop-color="#2eccaa"
+			offset="1"
+		/></linearGradient
+	><g transform="translate(50,76)" fill-rule="evenodd"
+		><path
+			d="m127.25 111.61c-2.8884-0.0145-5.7666-0.6024-8.4797-1.7847-6.1117-2.6626-11.493-7.6912-15.872-14.495 1.2486-2.2193 2.3738-4.5173 3.3784-6.8535 4.4051-10.243 6.5-21.46 6.6607-32.593-0.0233-0.22082-0.0416-0.44244-0.0552-0.66483l-0.0121-0.57132c-0.01-4.3654-0.67459-8.7898-2.1767-12.909-1.7304-4.7458-4.4887-9.4955-8.865-11.348-0.79519-0.33595-1.6316-0.47701-2.4642-0.45737-5.5049-10.289-5.6799-20.149 0-29.537 0.10115 0 0.20619 3.9293e-4 0.30734 0.001179 6.7012 0.07387 13.34 2.1418 19.021 5.7536 15.469 9.835 23.182 29.001 23.352 47.818 2e-3 0.22083-3.9e-4 0.44126-7e-3 0.66169h0.0868c-0.0226 19.887-4.8049 40.054-14.875 56.979zm-34.3 31.216c-14.448 5.9425-31.228 5.6236-45.549-1.025-16.476-7.6476-29.065-22.512-36.818-39.479-13.262-29.022-13.566-63.715-0.98815-93.182 9.4458 3.7788 17.845-2.2397 17.845-2.2397s-0.01945 9.2605 8.9478 13.905c-9.2007 21.556-8.979 47.167 0.2412 68.173 4.4389 10.107 11.22 19.519 20.619 24.842 3.3547 1.8996 7.041 3.126 10.833 3.5862 0.01404 0.0219 0.02808 0.0439 0.04214 0.0658 6.6965 10.449 15.132 19.157 24.828 25.354z"
+			fill="url(#a)"
+			fill-rule="nonzero"
+		/><path
+			d="m127.24 111.61c-2.8869-0.0151-5.7636-0.60296-8.4755-1.7846-6.1127-2.663-11.495-7.6928-15.874-14.498 1.2494-2.2205 2.3754-4.5198 3.3806-6.8572 1.3282-3.0884 2.4463-6.2648 3.3644-9.501 2.128-7.4978 30.382 2.0181 26.072 14.371-2.2239 6.373-5.0394 12.509-8.4675 18.27zm-34.302 31.212c-14.446 5.9396-31.224 5.6198-45.543-1.0278-16.476-7.6476 0.44739-33.303 9.8465-27.981 3.3533 1.8988 7.0378 3.125 10.828 3.5856 0.01567 0.0245 0.03135 0.049 0.04704 0.0735 6.695 10.447 15.128 19.153 24.821 25.349z"
+			fill="url(#b)"
+			opacity=".3"
+		/><path
+			d="m56.762 54.628c-0.0066-0.22043-0.0093-0.44086-7e-3 -0.66169 0.17001-18.817 7.8827-37.983 23.352-47.818 5.6811-3.6118 12.32-5.6798 19.021-5.7536 0.10115-7.8585e-4 0.20619-0.001179 0.30734-0.001179v29.537c-0.83254-0.01965-1.669 0.12141-2.4642 0.45737-4.3763 1.8523-7.1345 6.602-8.865 11.348-1.5021 4.1191-2.1669 8.5434-2.1767 12.909l-0.01206 0.57132c-0.01362 0.2224-0.0319 0.44401-0.05524 0.66483 0.16067 11.134 2.2556 22.35 6.6607 32.593 4.9334 11.472 12.775 22.025 23.847 26.849 8.3526 3.6397 17.612 2.7811 25.182-1.5057 9.3991-5.3226 16.18-14.734 20.619-24.842 9.2202-21.006 9.4419-46.617 0.24121-68.173 8.9673-4.6444 8.9478-13.905 8.9478-13.905s8.3993 6.0185 17.845 2.2397c12.578 29.466 12.274 64.16-0.98815 93.182-7.7535 16.967-20.343 31.831-36.818 39.479-14.667 6.809-31.913 6.9792-46.591 0.58389-13.19-5.7489-23.918-16.106-31.637-28.15-11.179-17.443-16.472-38.678-16.496-59.604z"
+			fill="url(#c)"
+			fill-rule="nonzero"
+		/></g
+	></svg
+>

apps/ui/src/lib/components/svg/services/index.ts

@@ -16,4 +16,5 @@ export { default as Fider } from './Fider.svelte';
 export { default as Appwrite } from './Appwrite.svelte';
 export { default as Moodle } from './Moodle.svelte';
 export { default as GlitchTip }  from './GlitchTip.svelte';
-export { default as Searxng }  from './Searxng.svelte';
+export { default as Searxng }  from './Searxng.svelte';
+export { default as Weblate }  from './Weblate.svelte';

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

@@ -209,7 +209,7 @@
 		"expose_a_port": "Expose a port",
 		"enable_preview_deploy_mr_pr_requests": "Enable preview deployments from pull or merge requests.",
 		"debug_logs": "Debug Logs",
-		"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-red-500 font-bold'>Sensitive information</span> could be visible and saved in logs.",
+		"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings font-bold'>Sensitive information</span> could be visible and saved in logs.",
 		"cant_activate_auto_deploy_without_repo": "Cannot activate automatic deployments until only one application is defined for this repository / branch.",
 		"no_applications_found": "No applications found",
 		"secret__batch_dot_env": "Paste .env file",
@@ -275,7 +275,7 @@
 		"application_id": "Application ID",
 		"group_name": "Group Name",
 		"oauth_id": "OAuth ID",
-		"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application.",
+		"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-settings' >in the URL</span> of your GitLab OAuth Application.",
 		"register_oauth_gitlab": "Register new OAuth application on GitLab",
 		"gitlab": {
 			"self_hosted": "Instance-wide application (self-hosted)",
@@ -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 {
+    isRegistrationEnabled: boolean;
     ipv4: string | null,
     ipv6: string | null,
     version: string | null,
@@ -25,8 +26,11 @@ interface AddToast {
     message: string,
     timeout?: number | undefined
 }
+
+export const search: any = writable('')
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
+    isRegistrationEnabled: false,
     ipv4: null,
     ipv6: null,
     version: null,
@@ -45,6 +49,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,
@@ -62,7 +86,8 @@ export const status: Writable<any> = writable({
         isRunning: false,
         isExited: false,
         loading: false,
-        initialLoading: true
+        initialLoading: true,
+        isPublic: false
     }
 
 });

apps/ui/src/routes/_NewResource.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { post } from '$lib/api';
+
+	async function newApplication() {
+		const { id } = await post('/applications/new', {});
+		return await goto(`/applications/${id}`, { replaceState: true });
+	}
+	async function newService() {
+		const { id } = await post('/services/new', {});
+		return await goto(`/services/${id}`, { replaceState: true });
+	}
+	async function newDatabase() {
+		const { id } = await post('/databases/new', {});
+		return await goto(`/databases/${id}`, { replaceState: true });
+	}
+</script>
+
+<div class="dropdown dropdown-hover">
+	<slot>
+		<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			></label
+		>
+	</slot>
+
+	<ul
+		id="new"
+		tabindex="0"
+		class="dropdown-content menu p-2 shadow bg-coolgray-300 rounded w-52"
+	>
+		<li>
+			<button on:click={newApplication} class="no-underline hover:bg-applications rounded-none ">
+				<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" />
+					<rect x="4" y="4" width="6" height="6" rx="1" />
+					<rect x="4" y="14" width="6" height="6" rx="1" />
+					<rect x="14" y="14" width="6" height="6" rx="1" />
+					<line x1="14" y1="7" x2="20" y2="7" />
+					<line x1="17" y1="4" x2="17" y2="10" />
+				</svg>Application</button
+			>
+		</li>
+		<li>
+			<button on:click={newService} class="no-underline hover:bg-services rounded-none ">
+				<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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+				</svg>Service</button
+			>
+		</li>
+		<li>
+			<button on:click={newDatabase} class="no-underline hover:bg-databases rounded-none ">
+				<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" />
+					<ellipse cx="12" cy="6" rx="8" ry="3" />
+					<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+					<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+				</svg>Database</button
+			>
+		</li>
+		<li>
+			<a href="/sources/new" class="no-underline hover:bg-sources rounded-none ">
+				<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" />
+					<circle cx="6" cy="6" r="2" />
+					<circle cx="18" cy="18" r="2" />
+					<path d="M11 6h5a2 2 0 0 1 2 2v8" />
+					<polyline points="14 9 11 6 14 3" />
+					<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
+					<polyline points="10 15 13 18 10 21" />
+				</svg>Git Source</a
+			>
+		</li>
+		<li>
+			<a href="/destinations/new" class="no-underline hover:bg-destinations rounded-none ">
+				<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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+					/>
+					<path d="M5 10h3v3h-3z" />
+					<path d="M8 10h3v3h-3z" />
+					<path d="M11 10h3v3h-3z" />
+					<path d="M8 7h3v3h-3z" />
+					<path d="M11 7h3v3h-3z" />
+					<path d="M11 4h3v3h-3z" />
+					<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+					<line x1="10" y1="16" x2="10" y2="16.01" />
+				</svg>Destination</a
+			>
+		</li>
+	</ul>
+</div>

apps/ui/src/routes/__layout.svelte

@@ -66,12 +66,13 @@
 <script lang="ts">
 	export let baseSettings: any;
 	export let supportedServiceTypesAndVersions: any;
+	$appSession.isRegistrationEnabled = baseSettings.isRegistrationEnabled;
 	$appSession.ipv4 = baseSettings.ipv4;
 	$appSession.ipv6 = baseSettings.ipv6;
 	$appSession.version = baseSettings.version;
 	$appSession.whiteLabeled = baseSettings.whiteLabeled;
 	$appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon;
-	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions
+	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions;
 
 	export let userId: string;
 	export let teamId: string;
@@ -88,6 +89,7 @@
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import Toasts from '$lib/components/Toasts.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	if (userId) $appSession.userId = userId;
 	if (teamId) $appSession.teamId = teamId;
@@ -132,16 +134,17 @@
 			{/if}
 			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
 				<a
+					id="dashboard"
 					sveltekit:prefetch
 					href="/"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-white"
+					class="icons  hover:text-white"
 					class:text-white={$page.url.pathname === '/'}
 					class:bg-coolgray-500={$page.url.pathname === '/'}
-					data-tip="Dashboard"
+					class:bg-coolgray-200={!($page.url.pathname === '/')}
 				>
 					<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"
@@ -156,166 +159,53 @@
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
 				</a>
-				<div class="border-t border-stone-700" />
-
-				<a
-					sveltekit:prefetch
-					href="/applications"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
-					class:text-applications={$page.url.pathname.startsWith('/applications') ||
-						$page.url.pathname.startsWith('/new/application')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
-						$page.url.pathname.startsWith('/new/application')}
-					data-tip="Applications"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentcolor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
+				{#if $appSession.teamId === '0'}
+					<a
+						id="servers"
+						sveltekit:prefetch
+						href="/servers"
+						class="icons hover:text-white"
+						class:text-white={$page.url.pathname === '/servers'}
+						class:bg-coolgray-500={$page.url.pathname === '/servers'}
+						class:bg-coolgray-200={!($page.url.pathname === '/servers')}
 					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<rect x="4" y="4" width="6" height="6" rx="1" />
-						<rect x="4" y="14" width="6" height="6" rx="1" />
-						<rect x="14" y="14" width="6" height="6" rx="1" />
-						<line x1="14" y1="7" x2="20" y2="7" />
-						<line x1="17" y1="4" x2="17" y2="10" />
-					</svg>
-				</a>
-				<a
-					sveltekit:prefetch
-					href="/sources"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
-					class:text-sources={$page.url.pathname.startsWith('/sources') ||
-						$page.url.pathname.startsWith('/new/source')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
-						$page.url.pathname.startsWith('/new/source')}
-					data-tip="Git Sources"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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" />
-						<circle cx="6" cy="6" r="2" />
-						<circle cx="18" cy="18" r="2" />
-						<path d="M11 6h5a2 2 0 0 1 2 2v8" />
-						<polyline points="14 9 11 6 14 3" />
-						<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
-						<polyline points="10 15 13 18 10 21" />
-					</svg>
-				</a>
-				<a
-					sveltekit:prefetch
-					href="/destinations"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
-					class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
-						$page.url.pathname.startsWith('/new/destination')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
-						$page.url.pathname.startsWith('/new/destination')}
-					data-tip="Destinations"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
-						/>
-						<path d="M5 10h3v3h-3z" />
-						<path d="M8 10h3v3h-3z" />
-						<path d="M11 10h3v3h-3z" />
-						<path d="M8 7h3v3h-3z" />
-						<path d="M11 7h3v3h-3z" />
-						<path d="M11 4h3v3h-3z" />
-						<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
-						<line x1="10" y1="16" x2="10" y2="16.01" />
-					</svg>
-				</a>
-				<div class="border-t border-stone-700" />
-				<a
-					sveltekit:prefetch
-					href="/databases"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
-					class:text-databases={$page.url.pathname.startsWith('/databases') ||
-						$page.url.pathname.startsWith('/new/database')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
-						$page.url.pathname.startsWith('/new/database')}
-					data-tip="Databases"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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" />
-						<ellipse cx="12" cy="6" rx="8" ry="3" />
-						<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-						<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
-					</svg>
-				</a>
-				<a
-					sveltekit:prefetch
-					href="/services"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
-					class:text-services={$page.url.pathname.startsWith('/services') ||
-						$page.url.pathname.startsWith('/new/service')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
-						$page.url.pathname.startsWith('/new/service')}
-					data-tip="Services"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
-					</svg>
-				</a>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-8 h-8 mx-auto"
+							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="3" y="4" width="18" height="8" rx="3" />
+							<rect x="3" y="12" width="18" height="8" rx="3" />
+							<line x1="7" y1="8" x2="7" y2="8.01" />
+							<line x1="7" y1="16" x2="7" y2="16.01" />
+						</svg>
+					</a>
+				{/if}
 			</div>
+			<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
+			<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
 			<div class="flex-1" />
 
 			<UpdateAvailable />
 			<div class="flex flex-col space-y-2 py-2">
 				<a
+					id="iam"
 					sveltekit:prefetch
 					href="/iam"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					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"
+					class:bg-coolgray-500={$page.url.pathname === '/iam'}
+					class:bg-coolgray-200={!($page.url.pathname === '/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"
@@ -330,17 +220,18 @@
 					</svg>
 				</a>
 				<a
+					id="settings"
 					sveltekit:prefetch
 					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					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"
+					class:bg-coolgray-500={$page.url.pathname === '/settings'}
+					class:bg-coolgray-200={!($page.url.pathname === '/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"
@@ -355,14 +246,10 @@
 					</svg>
 				</a>
 
-				<div
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-error"
-					data-tip="Logout"
-					on:click={logout}
-				>
+				<div id="logout" class="icons bg-coolgray-200 hover:text-error" 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"
@@ -396,7 +283,12 @@
 	{/if}
 {/if}
 <main>
-	<div class="px-20">
+	<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
 		<slot />
 	</div>
 </main>
+
+<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
+<Tooltip triggeredBy="#settings" placement="right" color="bg-settings  text-black">Settings</Tooltip
+>
+<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>

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]/_Setting.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-	import Explainer from '$lib/components/Explainer.svelte';
-
-	export let setting: any;
-	export let title: any;
-	export let description: any;
-	export let isCenter = true;
-	export let disabled = false;
-	export let dataTooltip: any = null;
-	export let loading = false;
-</script>
-
-<div class="flex items-center py-4 pr-8">
-	<div class="flex w-96 flex-col">
-		<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
-		<Explainer text={description} />
-	</div>
-</div>
-<div
-	class:tooltip={dataTooltip}
-	class:text-center={isCenter}
-	data-tip={dataTooltip}
-	class="flex justify-center"
->
-	<div
-		on:click
-		aria-pressed="false"
-		class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-		class:opacity-50={disabled || loading}
-		class:bg-green-600={!loading && setting}
-		class:bg-stone-700={!loading && !setting}
-		class:bg-yellow-500={loading}
-	>
-		<span class="sr-only">Use setting</span>
-		<span
-			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
-			class:translate-x-5={setting}
-			class:translate-x-0={!setting}
-		>
-			<span
-				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
-				class:opacity-0={setting}
-				class:opacity-100={!setting}
-				class:animate-spin={loading}
-				aria-hidden="true"
-			>
-				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
-					<path
-						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</span>
-			<span
-				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
-				aria-hidden="true"
-				class:opacity-100={setting}
-				class:opacity-0={!setting}
-				class:animate-spin={loading}
-			>
-				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
-					<path
-						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-					/>
-				</svg>
-			</span>
-		</span>
-	</div>
-</div>

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

@@ -60,25 +60,31 @@
 	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 Loading from '$lib/components/Loading.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
-	let loading = false;
 	let statusInterval: any;
-	$disabledButton =
-		!$appSession.isAdmin ||
-		(!application.fqdn && !application.settings.isBot) ||
-		!application.gitSource ||
-		!application.repository ||
-		!application.destinationDocker ||
-		!application.buildPack;
-
+	let forceDelete = false;
 	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, forceRebuild });
+			const { buildId } = await post(`/applications/${id}/deploy`, {
+				...application,
+				forceRebuild
+			});
 			addToast({
 				message: $t('application.deployment_queued'),
 				type: 'success'
@@ -95,25 +101,51 @@
 		}
 	}
 
-	async function deleteApplication(name: string) {
+	async function deleteApplication(name: string, force: boolean) {
 		const sure = confirm($t('application.confirm_to_delete', { name }));
 		if (sure) {
-			loading = true;
+			$status.application.initialLoading = true;
 			try {
-				await del(`/applications/${id}`, { id });
-				return await goto(`/applications`);
+				await del(`/applications/${id}`, { id, force });
+				return await goto(`/`, { replaceState: true });
 			} catch (error) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
+					forceDelete = true;
+				}
 				return errorNotification(error);
+			} finally {
+				$status.application.initialLoading = false;
 			}
 		}
 	}
+	async function restartApplication() {
+		try {
+			$status.application.initialLoading = true;
+			$status.application.loading = true;
+			await post(`/applications/${id}/restart`, {});
+			addToast({
+				type: 'success',
+				message: 'Restart successful.'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			$status.application.initialLoading = false;
+			$status.application.loading = false;
+			await getStatus();
+		}
+	}
 	async function stopApplication() {
 		try {
-			loading = true;
+			$status.application.initialLoading = true;
+			// $status.application.loading = true;
 			await post(`/applications/${id}/stop`, {});
-			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
+		} finally {
+			$status.application.initialLoading = false;
+			// $status.application.loading = false;
+			await getStatus();
 		}
 	}
 	async function getStatus() {
@@ -128,7 +160,11 @@
 
 	onDestroy(() => {
 		$status.application.initialLoading = true;
+		$status.application.isRunning = false;
+		$status.application.isExited = false;
+		$status.application.loading = false;
 		$location = null;
+		$isDeploymentEnabled = false;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
@@ -152,371 +188,401 @@
 </script>
 
 <nav class="nav-side">
-	{#if loading}
-		<Loading fullscreen cover />
-	{:else}
-		{#if $location}
-			<a
-				href={$location}
-				target="_blank"
-				class="icons tooltip-bottom 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"
 			>
-		<div class="border border-coolgray-500 h-8" />
-
-		{/if}
-
-		{#if $status.application.isExited}
-			<a
-				href={!$disabledButton ? `/applications/${id}/logs` : null}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-error"
-				data-tip="Application exited with an 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>
-		{/if}
-		{#if $status.application.initialLoading}
-			<button
-				class="icons tooltip-bottom 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.application.isRunning}
-			<button
-				on:click={stopApplication}
-				type="submit"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-error"
-				data-tip={$appSession.isAdmin
-					? $t('application.stop_application')
-					: $t('application.permission_denied_stop_application')}
-			>
-				<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>
-			<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
-				<button
-					type="submit"
-					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2"
-					data-tip={$appSession.isAdmin
-						? 'Force Rebuild Application'
-						: 'You do not have permission to rebuild application.'}
-				>
-					<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="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
-							transform="rotate(-45 12 12)"
-						/>
-					</svg>
-				</button>
-			</form>
-		{:else}
-			<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
-				<button
-					type="submit"
-					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-success"
-					data-tip={$appSession.isAdmin
-						? 'Deploy'
-						: 'You do not have permission to deploy application.'}
-				>
-					<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>
-			</form>
-		{/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-coolgray-500 h-8" />
+	{/if}
+
+	{#if $status.application.isExited}
 		<a
-			href={!$disabledButton ? `/applications/${id}` : null}
+			id="applicationerror"
+			href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
+			class="icons bg-transparent text-sm flex items-center text-error"
 			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 tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Configurations"
+			<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"
 			>
-				<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" />
-					<rect x="4" y="8" width="4" height="4" />
-					<line x1="6" y1="4" x2="6" y2="8" />
-					<line x1="6" y1="12" x2="6" y2="20" />
-					<rect x="10" y="14" width="4" height="4" />
-					<line x1="12" y1="4" x2="12" y2="14" />
-					<line x1="12" y1="18" x2="12" y2="20" />
-					<rect x="16" y="5" width="4" height="4" />
-					<line x1="18" y1="4" x2="18" y2="5" />
-					<line x1="18" y1="9" x2="18" y2="20" />
-				</svg></button
-			></a
+				<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="#applicationerror">Application exited with an error!</Tooltip>
+	{/if}
+	{#if $status.application.initialLoading}
+		<button
+			class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
 		>
-		<a
-			href={!$disabledButton ? `/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 tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Secrets"
+			<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"
 			>
-				<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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-					/>
-					<circle cx="12" cy="11" r="1" />
-					<line x1="12" y1="12" x2="12" y2="14.5" />
-				</svg></button
-			></a
+				<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.application.isRunning}
+		<button
+			id="stop"
+			on:click={stopApplication}
+			type="submit"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
 		>
-		<a
-			href={!$disabledButton ? `/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 tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Persistent Storages"
+			<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"
 			>
-				<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" />
-					<ellipse cx="12" cy="6" rx="8" ry="3" />
-					<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-					<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
-				</svg>
-			</button></a
-		>
-		{#if !application.settings.isBot}
-			<a
-				href={!$disabledButton ? `/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 tooltip tooltip-primary tooltip-bottom text-sm"
-					data-tip="Previews"
-				>
-					<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" />
-						<circle cx="7" cy="18" r="2" />
-						<circle cx="7" cy="6" r="2" />
-						<circle cx="17" cy="12" r="2" />
-						<line x1="7" y1="8" x2="7" y2="16" />
-						<path d="M7 8a4 4 0 0 0 4 4h4" />
-					</svg></button
-				></a
-			>
-		{/if}
-		<div class="border border-coolgray-500 h-8" />
-		<a
-			href={!$disabledButton && $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}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip={$t('application.logs')}
-			>
-				<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<line x1="3" y1="6" x2="3" y2="19" />
-					<line x1="12" y1="6" x2="12" y2="19" />
-					<line x1="21" y1="6" x2="21" y2="19" />
-				</svg>
-			</button></a
-		>
-		<a
-			href={!$disabledButton ? `/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 tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Build Logs"
-			>
-				<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" />
-					<circle cx="19" cy="13" r="2" />
-					<circle cx="4" cy="17" r="2" />
-					<circle cx="13" cy="17" r="2" />
-					<line x1="13" y1="19" x2="4" y2="19" />
-					<line x1="4" y1="15" x2="13" y2="15" />
-					<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
-					<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
-					<path d="M19 11v-7l-6 7" />
-				</svg>
-			</button></a
-		>
-		<div class="border border-coolgray-500 h-8" />
+				<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>
 
 		<button
-			on:click={() => deleteApplication(application.name)}
+			id="restart"
+			on:click={restartApplication}
+			type="submit"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm flex items-center space-x-2"
+		>
+			<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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+				<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+			</svg>
+		</button>
+		<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
+
+		<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
+			<button
+				id="forceredeploy"
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2"
+			>
+				<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="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
+						transform="rotate(-45 12 12)"
+					/>
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
+		</form>
+	{:else}
+		<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
+			<button
+				id="deploy"
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
+			>
+				<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="#deploy">Deploy</Tooltip>
+		</form>
+	{/if}
+
+	<div class="border border-coolgray-500 h-8" />
+	<a
+		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={!$isDeploymentEnabled}
+			id="configurations"
+			class="icons 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" />
+				<rect x="4" y="8" width="4" height="4" />
+				<line x1="6" y1="4" x2="6" y2="8" />
+				<line x1="6" y1="12" x2="6" y2="20" />
+				<rect x="10" y="14" width="4" height="4" />
+				<line x1="12" y1="4" x2="12" y2="14" />
+				<line x1="12" y1="18" x2="12" y2="20" />
+				<rect x="16" y="5" width="4" height="4" />
+				<line x1="18" y1="4" x2="18" y2="5" />
+				<line x1="18" y1="9" x2="18" y2="20" />
+			</svg></button
+		></a
+	>
+
+	<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
+	<a
+		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 id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
+			<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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+				/>
+				<circle cx="12" cy="11" r="1" />
+				<line x1="12" y1="12" x2="12" y2="14.5" />
+			</svg></button
+		></a
+	>
+	<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
+	<a
+		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
+			id="persistentstorages"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm"
+		>
+			<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" />
+				<ellipse cx="12" cy="6" rx="8" ry="3" />
+				<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+				<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+			</svg>
+		</button></a
+	>
+	<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
+	{#if !application.settings.isBot}
+		<a
+			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 id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
+				<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" />
+					<circle cx="7" cy="18" r="2" />
+					<circle cx="7" cy="6" r="2" />
+					<circle cx="17" cy="12" r="2" />
+					<line x1="7" y1="8" x2="7" y2="16" />
+					<path d="M7 8a4 4 0 0 0 4 4h4" />
+				</svg></button
+			></a
+		>
+		<Tooltip triggeredBy="#previews">Previews</Tooltip>
+	{/if}
+	<div class="border border-coolgray-500 h-8" />
+	<a
+		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
+			id="applicationlogs"
+			disabled={!$isDeploymentEnabled || !$status.application.isRunning}
+			class="icons 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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<line x1="3" y1="6" x2="3" y2="19" />
+				<line x1="12" y1="6" x2="12" y2="19" />
+				<line x1="21" y1="6" x2="21" y2="19" />
+			</svg>
+		</button></a
+	>
+	<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
+	<a
+		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 id="buildlogs" disabled={!$isDeploymentEnabled} class="icons 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" />
+				<circle cx="19" cy="13" r="2" />
+				<circle cx="4" cy="17" r="2" />
+				<circle cx="13" cy="17" r="2" />
+				<line x1="13" y1="19" x2="4" y2="19" />
+				<line x1="4" y1="15" x2="13" y2="15" />
+				<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
+				<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
+				<path d="M19 11v-7l-6 7" />
+			</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}
+			class:bg-red-600={$appSession.isAdmin}
+			class:hover:bg-red-500={$appSession.isAdmin}
+			class="icons bg-transparent text-sm"
+		>
+			Force Delete
+		</button>
+		<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip>
+	{:else}
+		<button
+			id="delete"
+			on:click={() => deleteApplication(application.name, false)}
 			type="submit"
 			disabled={!$appSession.isAdmin}
 			class:hover:text-red-500={$appSession.isAdmin}
-			class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-			data-tip={$appSession.isAdmin
-				? $t('application.delete_application')
-				: $t('application.permission_denied_delete_application')}
+			class="icons bg-transparent text-sm"
 		>
 			<DeleteIcon />
 		</button>
+		<Tooltip triggeredBy="#delete">Delete</Tooltip>
 	{/if}
 </nav>
 <slot />

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

@@ -95,19 +95,19 @@
 	async function isBranchAlreadyUsed(event: any) {
 		selected.branch = event.detail.value;
 		try {
-			const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
-			);
-			if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
-					selected.autodeploy = false;
-					showSave = true;
-					return true;
-				}
-				showSave = false;
-				return true;
-			}
+			// const data = await get(
+			// 	`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
+			// );
+			// if (data.used) {
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	if (sure) {
+			// 		selected.autodeploy = false;
+			// 		showSave = true;
+			// 		return true;
+			// 	}
+			// 	showSave = false;
+			// 	return true;
+			// }
 			showSave = true;
 		} catch (error) {
 			showSave = false;

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

@@ -169,10 +169,6 @@
 			}
 		}
 	}
-	function selectBranch(event: any) {
-		selected.branch = event.detail;
-		isBranchAlreadyUsed();
-	}
 	async function loadBranches(page: number = 1) {
 		let perPage = 100;
 		//@ts-ignore
@@ -199,21 +195,22 @@
 		}
 	}
 
-	async function isBranchAlreadyUsed() {
+	async function isBranchAlreadyUsed(event) {
+		selected.branch = event.detail;
 		try {
-			const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
-			);
-			if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
-					autodeploy = false;
-					showSave = true;
-					return true;
-				}
-				showSave = false;
-				return true;
-			}
+			// const data = await get(
+			// 	`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
+			// );
+			// if (data.used) {
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	if (sure) {
+			// 		autodeploy = false;
+			// 		showSave = true;
+			// 		return true;
+			// 	}
+			// 	showSave = false;
+			// 	return true;
+			// }
 			showSave = true;
 		} catch (error) {
 			return errorNotification(error);
@@ -227,9 +224,7 @@
 		}
 	}
 	async function setWebhook(url: any, webhookToken: any) {
-		const host = dev
-			? getWebhookUrl('gitlab')
-			: `${window.location.origin}/webhooks/gitlab/events`;
+		const host = dev ? getWebhookUrl('gitlab') : `${window.location.origin}/webhooks/gitlab/events`;
 		try {
 			await post(
 				url,
@@ -294,17 +289,15 @@
 			);
 			await post(updateDeployKeyIdUrl, { deployKeyId: id });
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 
 		try {
 			await setWebhook(webhookUrl, webhookToken);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 
 		const url = `/applications/${id}/configuration/repository`;
@@ -317,11 +310,11 @@
 				autodeploy,
 				webhookToken
 			});
+			loading.save = false;
 			return await goto(from || `/applications/${id}/configuration/buildpack`);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 	}
 	async function handleSubmit() {
@@ -396,7 +389,7 @@
 				showIndicator={!loading.branches}
 				isWaiting={loading.branches}
 				isDisabled={loading.branches || !selected.project}
-				on:select={selectBranch}
+				on:select={isBranchAlreadyUsed}
 				on:clear={() => {
 					showSave = false;
 					selected.branch = null;
@@ -425,7 +418,7 @@
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>
 			<button
-				class="w-40 bg-green-600"
+				class="btn btn-sm w-40 bg-green-600"
 				on:click|stopPropagation|preventDefault={() => window.location.reload()}
 			>
 				Try again

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

@@ -4,7 +4,6 @@
 	import { page } from '$app/stores';
 
 	import Select from 'svelte-select';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { goto } from '$app/navigation';
 	import { errorNotification } from '$lib/common';
 
@@ -23,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://', '');
 
@@ -164,7 +163,6 @@
 				<div class="space-y-4">
 					<input
 						placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
-						class="text-xs"
 						bind:value={publicRepositoryLink}
 					/>
 					{#if branchSelectOptions.length > 0}
@@ -193,7 +191,5 @@
 			</form>
 		</div>
 	</div>
-	<Explainer
-		text="Examples:<br><br>https://github.com/coollabsio/nodejs-example<br>https://github.com/coollabsio/nodejs-example/tree/main<br>https://gitlab.com/aleveha/fastify-example<br>https://gitlab.com/aleveha/fastify-example/-/tree/master<br><br>Only works with Github.com and Gitlab.com."
-	/>
+	
 </div>

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]/configuration/source.svelte

@@ -32,7 +32,7 @@
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import PublicRepository from './_PublicRepository.svelte';
-import Explainer from '$lib/components/Explainer.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -192,7 +192,9 @@ import Explainer from '$lib/components/Explainer.svelte';
 			</div>
 		{/if}
 	</div>
-	<div class="title py-4">Public Repository</div>
-
-		<PublicRepository />
+	<div class="flex items-center">
+		<div class="title py-4">Public Repository</div>
+		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
+	</div>
+	<PublicRepository />
 </div>

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

@@ -31,15 +31,24 @@
 	import { page } from '$app/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import Select from 'svelte-select';
-
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
-	import { browser } from '$app/env';
-	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 './_Setting.svelte';
+	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 =
@@ -63,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;
@@ -159,8 +170,12 @@
 			if ($status.application.isRunning) return;
 			isBot = !isBot;
 			application.settings.isBot = isBot;
+			application.fqdn = null;
 			setLocation(application, settings);
 		}
+		if (name === 'isDBBranching') {
+			isDBBranching = !isDBBranching;
+		}
 		try {
 			await post(`/applications/${id}/settings`, {
 				previews,
@@ -168,6 +183,7 @@
 				dualCerts,
 				isBot,
 				autodeploy,
+				isDBBranching,
 				branch: application.branch,
 				projectId: application.projectId
 			});
@@ -191,14 +207,20 @@
 			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\./, '');
+			console.log({debug: nonWWWDomain})
 			if (application.deploymentType)
 				application.deploymentType = application.deploymentType.toLowerCase();
 			!isBot &&
@@ -208,16 +230,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;
@@ -281,6 +304,7 @@
 	</div>
 	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
 		<a
+			id="git"
 			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
 			target="_blank"
 			class="w-10"
@@ -321,6 +345,7 @@
 				</svg>
 			{/if}
 		</a>
+		<Tooltip triggeredBy="#git">Open on Git</Tooltip>
 	{/if}
 </div>
 
@@ -426,7 +451,7 @@
 					>
 				{/if}
 			</div>
-			<div class="grid grid-cols-2 items-center pb-8">
+			<div class="grid grid-cols-2 items-center">
 				<label for="destination" class="text-base font-bold text-stone-100"
 					>{$t('application.destination')}</label
 				>
@@ -440,10 +465,15 @@
 				</div>
 			</div>
 			{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
-				<div class="grid grid-cols-2 items-center pb-8">
+				<div class="grid grid-cols-2 items-center">
 					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_build_image')}</label
-					>
+						>{$t('application.base_build_image')}
+						<Explainer
+							explanation={application.buildPack === 'laravel'
+								? 'For building frontend assets with webpack.'
+								: 'Image that will be used during the build process.'}
+						/>
+					</label>
 
 					<div class="custom-select-wrapper">
 						<Select
@@ -457,17 +487,13 @@
 							isClearable={false}
 						/>
 					</div>
-					{#if application.buildPack === 'laravel'}
-						<Explainer text="For building frontend assets with webpack." />
-					{:else}
-						<Explainer text={$t('application.base_build_image_explainer')} />
-					{/if}
 				</div>
 			{/if}
 			{#if application.buildPack !== 'docker'}
 				<div class="grid grid-cols-2 items-center">
 					<label for="baseImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_image')}</label
+						>{$t('application.base_image')}
+						<Explainer explanation={'Image that will be used for the deployment.'} /></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -481,13 +507,15 @@
 							isClearable={false}
 						/>
 					</div>
-					<Explainer text={$t('application.base_image_explainer')} />
 				</div>
 			{/if}
 			{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
 				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="deploymentType" class="text-base font-bold text-stone-100"
-						>Deployment Type</label
+						>Deployment Type
+						<Explainer
+							explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
+						/></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -501,11 +529,48 @@
 							isClearable={false}
 						/>
 					</div>
-					<Explainer
-						text="Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."
-					/>
 				</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>
@@ -513,35 +578,41 @@
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="isBot"
 					isCenter={false}
 					bind:setting={isBot}
 					on:click={() => changeSettings('isBot')}
 					title="Is your application a bot?"
-					description="You can deploy applications without domains. <br>You can also make them to listen on <span class='text-green-500 font-bold'>IP:EXPOSEDPORT</span> as well.<br></Setting><br>Useful to host <span class='text-green-500 font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming connection.</span>"
+					description="You can deploy applications without domains or make them to listen on the <span class='text-settings font-bold'>Exposed Port</span>.<br></Setting><br>Useful to host <span class='text-settings font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming HTTP connection.</span>"
 					disabled={$status.application.isRunning}
 				/>
 			</div>
+			<div class="grid grid-cols-2 items-center">
+				<Setting
+					id="dualCerts"
+					dataTooltip={$t('forms.must_be_stopped_to_modify')}
+					disabled={$status.application.isRunning}
+					isCenter={false}
+					bind:setting={dualCerts}
+					title={$t('application.ssl_www_and_non_www')}
+					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+					on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
+				/>
+			</div>
 			{#if !isBot}
-				<div class="grid grid-cols-2">
-					<div class="flex-col">
-						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('application.url_fqdn')}</label
-						>
-						{#if browser && window.location.hostname === 'demo.coolify.io'}
-							<Explainer
-								text="<span class='text-white font-bold'>You can use the predefined random url name or enter your own domain name.</span>"
-							/>
-						{/if}
-						<Explainer text={$t('application.https_explainer')} />
-					</div>
+				<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
+							explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
+						/>
+					</label>
 					<div>
 						<input
 							readonly={isDisabled}
 							disabled={isDisabled}
-							bind:this={domainEl}
 							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"
@@ -582,17 +653,6 @@
 						{/if}
 					</div>
 				</div>
-				<div class="grid grid-cols-2 items-center pb-8">
-					<Setting
-						dataTooltip={$t('forms.must_be_stopped_to_modify')}
-						disabled={$status.application.isRunning}
-						isCenter={false}
-						bind:setting={dualCerts}
-						title={$t('application.ssl_www_and_non_www')}
-						description={$t('application.ssl_explainer')}
-						on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
-					/>
-				</div>
 			{/if}
 			{#if application.buildPack === 'python'}
 				<div class="grid grid-cols-2 items-center">
@@ -645,7 +705,10 @@
 			{/if}
 			{#if !staticDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
+					<label for="port" class="text-base font-bold text-stone-100"
+						>{$t('forms.port')}
+						<Explainer explanation={'The port your application listens on.'} /></label
+					>
 					<input
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
@@ -654,11 +717,14 @@
 						bind:value={application.port}
 						placeholder="{$t('forms.default')}: 'python' ? '8000' : '3000'"
 					/>
-					<Explainer text={'The port your application listens on.'} />
 				</div>
 			{/if}
-			<div class="grid grid-cols-2 items-center">
-				<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
+			<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.'}
+					/></label
+				>
 				<input
 					readonly={!$appSession.isAdmin && !$status.application.isRunning}
 					disabled={isDisabled}
@@ -667,12 +733,9 @@
 					bind:value={application.exposePort}
 					placeholder="12345"
 				/>
-				<Explainer
-					text={'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.'}
-				/>
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center pt-4">
+				<div class="grid grid-cols-2 items-center">
 					<label for="installCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.install_command')}</label
 					>
@@ -698,7 +761,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
 					>
@@ -715,7 +778,9 @@
 			{#if application.buildPack === 'docker'}
 				<div class="grid grid-cols-2 items-center pt-4">
 					<label for="dockerFileLocation" class="text-base font-bold text-stone-100"
-						>Dockerfile Location</label
+						>Dockerfile Location <Explainer
+							explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
+						/></label
 					>
 					<input
 						disabled={isDisabled}
@@ -725,9 +790,6 @@
 						bind:value={application.dockerFileLocation}
 						placeholder="default: /Dockerfile"
 					/>
-					<Explainer
-						text="Should be absolute path, like <span class='text-green-500 font-bold'>/data/Dockerfile</span> or <span class='text-green-500 font-bold'>/Dockerfile.</span>"
-					/>
 				</div>
 			{/if}
 			{#if application.buildPack === 'deno'}
@@ -743,7 +805,11 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="denoOptions" class="text-base font-bold text-stone-100">Arguments</label>
+					<label for="denoOptions" class="text-base font-bold text-stone-100"
+						>Arguments <Explainer
+							explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
+						/></label
+					>
 					<input
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
@@ -752,18 +818,17 @@
 						bind:value={application.denoOptions}
 						placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
 					/>
-					<Explainer
-						text="List of arguments to pass to <span class='text-green-500 font-bold'>deno run</span> command. Could include permissions, configurations files, etc."
-					/>
 				</div>
 			{/if}
 			{#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}
 				<div class="grid grid-cols-2 items-center">
 					<div class="flex-col">
 						<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('forms.base_directory')}</label
+							>{$t('forms.base_directory')}
+							<Explainer
+								explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
+							/></label
 						>
-						<Explainer text={$t('application.directory_to_use_explainer')} />
 					</div>
 					<input
 						disabled={isDisabled}
@@ -779,9 +844,11 @@
 				<div class="grid grid-cols-2 items-center">
 					<div class="flex-col">
 						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('forms.publish_directory')}</label
+							>{$t('forms.publish_directory')}
+							<Explainer
+								explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
+							/></label
 						>
-						<Explainer text={$t('application.publish_directory_explainer')} />
 					</div>
 
 					<input
@@ -804,6 +871,7 @@
 		{#if !application.settings.isPublicRepository}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="autodeploy"
 					isCenter={false}
 					bind:setting={autodeploy}
 					on:click={() => changeSettings('autodeploy')}
@@ -812,9 +880,10 @@
 				/>
 			</div>
 		{/if}
-		{#if !application.settings.isBot}
+		{#if !application.settings.isBot && !application.settings.isPublicRepository}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="previews"
 					isCenter={false}
 					bind:setting={previews}
 					on:click={() => changeSettings('previews')}
@@ -825,6 +894,7 @@
 		{/if}
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				id="debug"
 				isCenter={false}
 				bind:setting={debug}
 				on:click={() => changeSettings('debug')}

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

@@ -6,14 +6,13 @@
 
 	import { page } from '$app/stores';
 
-	import Loading from '$lib/components/Loading.svelte';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let logs: any = [];
-	let loading = true;
 	let currentStatus: any;
 	let streamInterval: any;
 	let followingBuild: any;
@@ -46,7 +45,6 @@
 			logs = logs.concat(
 				responseLogs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 			);
-			loading = false;
 			streamInterval = setInterval(async () => {
 				if (status !== 'running' && status !== 'queued') {
 					clearInterval(streamInterval);
@@ -63,13 +61,12 @@
 					logs = logs.concat(
 						data.logs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 					);
-					dispatch('updateBuildStatus', { status });
+					dispatch('updateBuildStatus', { status, took: data.took });
 				} catch (error) {
 					return errorNotification(error);
 				}
 			}, 1000);
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -82,7 +79,6 @@
 				applicationId: id
 			});
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -96,84 +92,82 @@
 	});
 </script>
 
-{#if loading}
-	<Loading />
-{:else}
-	<div class="relative ">
-		{#if currentStatus === 'running'}
-			<LoadingLogs />
-		{/if}
-		{#if currentStatus === 'queued'}
-			<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
-		{:else}
-			<div class="flex justify-end sticky top-0 p-2 mx-1">
+<div class="relative ">
+	{#if currentStatus === 'running'}
+		<LoadingLogs />
+	{/if}
+	{#if currentStatus === 'queued'}
+		<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
+	{:else}
+		<div class="flex justify-end sticky top-0 p-2 mx-1">
+			<button
+				id="follow"
+				on:click={followBuild}
+				class="bg-transparent btn btn-sm btn-linkhover:text-green-500 hover:bg-coolgray-500"
+				class:text-green-500={followingBuild}
+			>
+				<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" />
+					<circle cx="12" cy="12" r="9" />
+					<line x1="8" y1="12" x2="12" y2="16" />
+					<line x1="12" y1="8" x2="12" y2="16" />
+					<line x1="16" y1="12" x2="12" y2="16" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
+			{#if currentStatus === 'running'}
 				<button
-					on:click={followBuild}
-					class="bg-transparent btn btn-sm btn-link tooltip tooltip-primary tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
-					data-tip="Follow logs"
-					class:text-green-500={followingBuild}
+					id="cancel"
+					on:click={cancelBuild}
+					class:animation-spin={cancelInprogress}
+					class="bg-transparent btn btn-sm btn-link hover:text-red-500 hover:bg-coolgray-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" />
-						<circle cx="12" cy="12" r="9" />
-						<line x1="8" y1="12" x2="12" y2="16" />
-						<line x1="12" y1="8" x2="12" y2="16" />
-						<line x1="16" y1="12" x2="12" y2="16" />
-					</svg>
+					{#if cancelInprogress}
+						Cancelling...
+					{:else}
+						<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" />
+							<circle cx="12" cy="12" r="9" />
+							<path d="M10 10l4 4m0 -4l-4 4" />
+						</svg>
+					{/if}
 				</button>
-				{#if currentStatus === 'running'}
-					<button
-						on:click={cancelBuild}
-						class:animation-spin={cancelInprogress}
-						class="bg-transparent btn btn-sm btn-link hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-primary tooltip-bottom"
-						data-tip="Cancel build"
-					>
-						{#if cancelInprogress}
-							Cancelling...
-						{:else}
-							<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" />
-								<circle cx="12" cy="12" r="9" />
-								<path d="M10 10l4 4m0 -4l-4 4" />
-							</svg>
-						{/if}
-					</button>
-				{/if}
-			</div>
-			{#if logs.length > 0}
-				<div
-					class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-					bind:this={logsEl}
-				>
-					{#each logs as log}
-						<div>{log.line + '\n'}</div>
-					{/each}
-				</div>
-			{:else}
-				<div
-					class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				>
-					No logs found.
-				</div>
+				<Tooltip triggeredBy="#cancel">Cancel build</Tooltip>
 			{/if}
+		</div>
+		{#if logs.length > 0}
+			<div
+				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
+				bind:this={logsEl}
+			>
+				{#each logs as log}
+					<div>{log.line + '\n'}</div>
+				{/each}
+			</div>
+		{:else}
+			<div
+				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
+			>
+				No logs found.
+			</div>
 		{/if}
-	</div>
-{/if}
+	{/if}
+</div>

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

@@ -28,17 +28,20 @@
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { changeQueryParams, dateOptions, errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let buildId: any;
 
 	let skip = 0;
 	let noMoreBuilds = buildCount < 5 || buildCount <= skip;
+
+	let buildTook = 0;
 	const { id } = $page.params;
 	let preselectedBuildId = $page.url.searchParams.get('buildId');
 	if (preselectedBuildId) buildId = preselectedBuildId;
 
 	async function updateBuildStatus({ detail }: { detail: any }) {
-		const { status } = detail;
+		const { status, took } = detail;
 		if (status !== 'running') {
 			try {
 				const data = await get(`/applications/${id}/logs/build?buildId=${buildId}`);
@@ -58,6 +61,7 @@
 				if (build.id === buildId) build.status = status;
 				return build;
 			});
+			buildTook = took;
 		}
 	}
 	async function loadMoreBuilds() {
@@ -137,20 +141,18 @@
 		<div class="top-4 md:sticky">
 			{#each builds as build, index (build.id)}
 				<div
-					data-tip={new Intl.DateTimeFormat('default', dateOptions).format(
-						new Date(build.createdAt)
-					) + `\n${build.status}`}
+					id={`building-${build.id}`}
 					on:click={() => loadBuild(build.id)}
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
-					class="tooltip tooltip-primary tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
+					class="flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
 					class:bg-coolgray-400={buildId === build.id}
 					class:border-red-500={build.status === 'failed'}
 					class:border-orange-500={build.status === 'canceled'}
 					class:border-green-500={build.status === 'success'}
 					class:border-yellow-500={build.status === 'running'}
 				>
-					<div class="flex-col px-2">
+					<div class="flex-col px-2 text-center min-w-[10rem]">
 						<div class="text-sm font-bold">
 							{build.branch || application.branch}
 						</div>
@@ -162,6 +164,10 @@
 					<div class="w-48 text-center text-xs">
 						{#if build.status === 'running'}
 							<div class="font-bold">{$t('application.build.running')}</div>
+							<div>
+								Elapsed
+								<span class="font-bold">{buildTook}s</span>
+							</div>
 						{:else if build.status === 'queued'}
 							<div class="font-bold">{$t('application.build.queued')}</div>
 						{:else}
@@ -172,6 +178,10 @@
 						{/if}
 					</div>
 				</div>
+				<Tooltip triggeredBy={`#building-${build.id}`}
+					>{new Intl.DateTimeFormat('default', dateOptions).format(new Date(build.createdAt)) +
+						`\n${build.status}`}</Tooltip
+				>
 			{/each}
 		</div>
 		{#if !noMoreBuilds}

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

@@ -5,6 +5,7 @@
 	import { errorNotification } from '$lib/common';
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { onMount, onDestroy } from 'svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let application: any = {};
 	let logsLoading = false;
@@ -38,7 +39,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			logsLoading = false;
@@ -146,9 +146,9 @@
 			{/if}
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
+					id="follow"
 					on:click={followBuild}
-					class="bg-transparent btn btn-sm btn-link tooltip tooltip-primary tooltip-bottom"
-					data-tip="Follow logs"
+					class="bg-transparent btn btn-sm btn-link"
 					class:text-green-500={followingLogs}
 				>
 					<svg
@@ -168,6 +168,7 @@
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</button>
+				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
 			<div
 				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"

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

@@ -21,13 +21,13 @@
 	import Secret from './_Secret.svelte';
 	import { get, post } from '$lib/api';
 	import { page } from '$app/stores';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
 	import { goto } from '$app/navigation';
 	import { errorNotification, getDomain } from '$lib/common';
 	import { onMount } from 'svelte';
 	import Loading from '$lib/components/Loading.svelte';
 	import { addToast } from '$lib/store';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 
 	const { id } = $page.params;
 
@@ -145,7 +145,7 @@
 {:else}
 	<div class="mx-auto max-w-6xl px-6 pt-4">
 		<div class="flex justify-center py-4 text-center">
-			<Explainer
+			<SimpleExplainer
 				customClass="w-full"
 				text={applicationSecrets.length === 0
 					? "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
@@ -194,8 +194,9 @@
 						</div>
 					</a>
 					<div class="flex items-center justify-center">
-						<button class="btn btn-sm bg-coollabs hover:bg-coollabs-100" on:click={() => redeploy(container)}
-							>{$t('application.preview.redeploy')}</button
+						<button
+							class="btn btn-sm bg-coollabs hover:bg-coollabs-100"
+							on:click={() => redeploy(container)}>{$t('application.preview.redeploy')}</button
 						>
 					</div>
 					<div class="flex items-center justify-center">

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

@@ -24,7 +24,7 @@
 	import { page } from '$app/stores';
 	import Storage from './_Storage.svelte';
 	import { get } from '$lib/api';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
@@ -87,7 +87,9 @@
 </div>
 
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	
+	<div class="flex justify-center py-4 text-center">
+		<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
+	</div>
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
@@ -107,7 +109,4 @@
 			</tr>
 		</tbody>
 	</table>
-	<div class="flex justify-center py-4 text-center">
-		<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
-	</div>
 </div>

apps/ui/src/routes/applications/_index.svelte

@@ -0,0 +1,142 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/applications`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let applications: Array<any> = [];
+	let ownApplications: Array<any> = [];
+	let otherApplications: Array<any> = [];
+	import { get, post } from '$lib/api';
+	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';
+	import { getDomain } from '$lib/common';
+	import { appSession } from '$lib/store';
+	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
+
+	ownApplications = applications.filter((application) => {
+		if (application.teams[0].id === $appSession.teamId) {
+			return application;
+		}
+	});
+	otherApplications = applications.filter((application) => {
+		if (application.teams[0].id !== $appSession.teamId) {
+			return application;
+		}
+	});
+	async function newApplication() {
+		const { id } = await post('/applications/new', {});
+		return await goto(`/applications/${id}`, { replaceState: true });
+	}
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
+	{#if $appSession.isAdmin}
+		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
+	{/if}
+</div>
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !applications || ownApplications.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
+		</div>
+	{/if}
+	{#if ownApplications.length > 0 || otherApplications.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownApplications as application}
+					<a href="/applications/{application.id}" class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-green-600">
+							{#if application.buildPack}
+								<ApplicationsIcons {application} />
+							{/if}
+
+							<div class="truncate text-center text-xl font-bold">{application.name}</div>
+							{#if $appSession.teamId === '0' && otherApplications.length > 0}
+								<div class="truncate text-center">Team {application.teams[0].name}</div>
+							{/if}
+							{#if application.fqdn}
+								<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
+							{/if}
+							{#if application.settings.isBot}
+								<div class="truncate text-center">BOT</div>
+							{/if}
+							{#if application.destinationDocker?.name}
+								<div class="truncate text-center">{application.destinationDocker.name}</div>
+							{/if}
+							{#if !application.gitSourceId || !application.repository || !application.branch}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									Git Source Missing
+								</div>
+							{:else if !application.destinationDockerId}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									Destination Missing
+								</div>
+							{:else if !application.fqdn && !application.settings.isBot}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									URL Missing
+								</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+			{#if otherApplications.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Applications</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherApplications as application}
+						<a href="/applications/{application.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-green-600">
+								{#if application.buildPack}
+									<ApplicationsIcons {application} />
+								{/if}
+
+								<div class="truncate text-center text-xl font-bold">{application.name}</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">Team {application.teams[0].name}</div>
+								{/if}
+								{#if application.fqdn}
+									<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
+								{/if}
+								{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

apps/ui/src/routes/applications/index.svelte

@@ -1,142 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/applications`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let applications: Array<any> = [];
-	let ownApplications: Array<any> = [];
-	let otherApplications: Array<any> = [];
-	import { get, post } from '$lib/api';
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/translations';
-	import { getDomain } from '$lib/common';
-	import { appSession } from '$lib/store';
-	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
-
-	ownApplications = applications.filter((application) => {
-		if (application.teams[0].id === $appSession.teamId) {
-			return application;
-		}
-	});
-	otherApplications = applications.filter((application) => {
-		if (application.teams[0].id !== $appSession.teamId) {
-			return application;
-		}
-	});
-	async function newApplication() {
-		const { id } = await post('/applications/new', {});
-		return await goto(`/applications/${id}`, { replaceState: true });
-	}
+	goto('/');
 </script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
-	{#if $appSession.isAdmin}
-		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</button>
-	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
-	{#if !applications || ownApplications.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
-		</div>
-	{/if}
-	{#if ownApplications.length > 0 || otherApplications.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownApplications as application}
-					<a href="/applications/{application.id}" class="p-2 no-underline">
-						<div class="box-selection group relative hover:bg-green-600">
-							{#if application.buildPack}
-								<ApplicationsIcons {application} />
-							{/if}
-
-							<div class="truncate text-center text-xl font-bold">{application.name}</div>
-							{#if $appSession.teamId === '0' && otherApplications.length > 0}
-								<div class="truncate text-center">Team {application.teams[0].name}</div>
-							{/if}
-							{#if application.fqdn}
-								<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
-							{/if}
-							{#if application.settings.isBot}
-								<div class="truncate text-center">BOT</div>
-							{/if}
-							{#if application.destinationDocker?.name}
-								<div class="truncate text-center">{application.destinationDocker.name}</div>
-							{/if}
-							{#if !application.gitSourceId || !application.repository || !application.branch}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									Git Source Missing
-								</div>
-							{:else if !application.destinationDockerId}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									Destination Missing
-								</div>
-							{:else if !application.fqdn && !application.settings.isBot}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									URL Missing
-								</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-			{#if otherApplications.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Applications</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherApplications as application}
-						<a href="/applications/{application.id}" class="p-2 no-underline">
-							<div class="box-selection group relative hover:bg-green-600">
-								{#if application.buildPack}
-									<ApplicationsIcons {application} />
-								{/if}
-
-								<div class="truncate text-center text-xl font-bold">{application.name}</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">Team {application.teams[0].name}</div>
-								{/if}
-								{#if application.fqdn}
-									<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
-								{/if}
-								{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
-									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-										Configuration missing
-									</div>
-								{/if}
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>

apps/ui/src/routes/databases/[id]/_DatabaseLinks.svelte

@@ -3,6 +3,7 @@
 
 	import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
 	import CouchDb from '$lib/components/svg/databases/CouchDB.svelte';
+	import EdgeDb from '$lib/components/svg/databases/EdgeDB.svelte';
 	import MariaDb from '$lib/components/svg/databases/MariaDB.svelte';
 	import MongoDb from '$lib/components/svg/databases/MongoDB.svelte';
 	import MySql from '$lib/components/svg/databases/MySQL.svelte';
@@ -25,5 +26,7 @@
 		<PostgreSql />
 	{:else if database.type === 'redis'}
 		<Redis />
+	{:else if database.type === 'edgedb'}
+		<EdgeDb />
 	{/if}
 </span>

apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte

@@ -12,6 +12,7 @@
 	import PostgreSql from './_PostgreSQL.svelte';
 	import Redis from './_Redis.svelte';
 	import CouchDb from './_CouchDb.svelte';
+	import EdgeDB from './_EdgeDB.svelte';
 	import { post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
@@ -23,7 +24,6 @@
 	let loading = false;
 	let publicLoading = false;
 
-	let isPublic = database.settings.isPublic || false;
 	let appendOnly = database.settings.appendOnly;
 
 	let databaseDefault: any;
@@ -36,8 +36,10 @@
 		databaseDefault = database.defaultDatabase;
 		databaseDbUser = database.dbUser;
 		databaseDbUserPassword = database.dbUserPassword;
-		if (database.type === 'mongodb') {
-			databaseDefault = '?readPreference=primary&ssl=false';
+		if (database.type === 'mongodb' || database.type === 'edgedb') {
+			if (database.type === 'mongodb') {
+				databaseDefault = '?readPreference=primary&ssl=false';
+			}
 			databaseDbUser = database.rootUser;
 			databaseDbUserPassword = database.rootUserPassword;
 		} else if (database.type === 'redis') {
@@ -49,12 +51,12 @@
 		return `${database.type}://${
 			databaseDbUser ? databaseDbUser + ':' : ''
 		}${databaseDbUserPassword}@${
-			isPublic
+			$status.database.isPublic
 				? database.destinationDocker.remoteEngine
 					? database.destinationDocker.remoteIpAddress
 					: $appSession.ipv4
 				: database.id
-		}:${isPublic ? database.publicPort : privatePort}/${databaseDefault}`;
+		}:${$status.database.isPublic ? database.publicPort : privatePort}/${databaseDefault}`;
 	}
 
 	async function changeSettings(name: any) {
@@ -63,11 +65,11 @@
 		}
 		publicLoading = true;
 		let data = {
-			isPublic,
+			isPublic: $status.database.isPublic,
 			appendOnly
 		};
 		if (name === 'isPublic') {
-			data.isPublic = !isPublic;
+			data.isPublic = !$status.database.isPublic;
 		}
 		if (name === 'appendOnly') {
 			data.appendOnly = !appendOnly;
@@ -77,9 +79,9 @@
 				isPublic: data.isPublic,
 				appendOnly: data.appendOnly
 			});
-			isPublic = data.isPublic;
+			$status.database.isPublic = data.isPublic;
 			appendOnly = data.appendOnly;
-			if (isPublic) {
+			if ($status.database.isPublic) {
 				database.publicPort = publicPort;
 			}
 		} catch (error) {
@@ -188,7 +190,7 @@
 					readonly
 					disabled
 					name="publicPort"
-					value={publicLoading ? 'Loading...' : isPublic ? database.publicPort : privatePort}
+					value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort}
 				/>
 			</div>
 		</div>
@@ -205,17 +207,19 @@
 				<Redis bind:database />
 			{:else if database.type === 'couchdb'}
 				<CouchDb {database} />
+			{:else if database.type === 'edgedb'}
+				<EdgeDB {database} />
 			{/if}
 			<div class="grid grid-cols-2 items-center px-10 pb-8">
 				<div>
 					<label for="url" class="text-base font-bold text-stone-100"
-						>{$t('database.connection_string')}</label
+						>{$t('database.connection_string')}
+						{#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
+							<Explainer
+								explanation="You can only access the database with this URL if your application is deployed to the same Destination."
+							/>
+						{/if}</label
 					>
-					{#if !isPublic && database.destinationDocker.remoteEngine}
-						<Explainer
-							text="You can only access the database with this URL if your application is deployed to the same Destination."
-						/>
-					{/if}
 				</div>
 				<CopyPasswordField
 					textarea={true}
@@ -236,8 +240,9 @@
 	<div class="px-10 pb-10">
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				id="isPublic"
 				loading={publicLoading}
-				bind:setting={isPublic}
+				bind:setting={$status.database.isPublic}
 				on:click={() => changeSettings('isPublic')}
 				title={$t('database.set_public')}
 				description={$t('database.warning_database_public')}
@@ -247,6 +252,7 @@
 		{#if database.type === 'redis'}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="appendOnly"
 					loading={publicLoading}
 					bind:setting={appendOnly}
 					on:click={() => changeSettings('appendOnly')}

apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	export let database: any;
+	import { status } from '$lib/store';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">EdgeDB</div>
+</div>
+<div class="space-y-2 px-10">
+	<div class="grid grid-cols-2 items-center">
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+			>{$t('database.default_database')}</label
+		>
+		<CopyPasswordField
+			required
+			readonly={database.defaultDatabase}
+			disabled={database.defaultDatabase}
+			placeholder="{$t('forms.eg')}: edgedb"
+			id="defaultDatabase"
+			name="defaultDatabase"
+			bind:value={database.defaultDatabase}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<CopyPasswordField
+			readonly
+			disabled
+			placeholder={$t('forms.generated_automatically_after_start')}
+			id="rootUser"
+			name="rootUser"
+			value={database.rootUser}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="rootUser" class="text-base font-bold text-stone-100"
+			>Root Password <Explainer
+				explanation="Could be changed while the database is running."
+			/></label
+		>
+		<CopyPasswordField
+			readonly
+			disabled
+			placeholder="Generated automatically after start"
+			isPasswordField
+			id="rootUserPassword"
+			name="rootUserPassword"
+			value={database.rootUserPassword}
+		/>
+	</div>
+</div>

apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
@@ -63,7 +63,7 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
+			>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -74,6 +74,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -23,7 +23,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -34,6 +35,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
@@ -63,7 +63,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -74,6 +75,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -26,7 +26,9 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100"
-			>Root (postgres) User Password</label
+			>Postgres User Password <Explainer
+				explanation="Could be changed while the database is running."
+			/></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -37,7 +39,6 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
@@ -52,7 +53,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -63,6 +65,5 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -12,7 +12,8 @@
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -23,6 +24,5 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

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

@@ -0,0 +1,186 @@
+<script lang="ts">
+	export let name = '';
+	export let value = '';
+	export let isBuildSecret = false;
+	export let isNewSecret = false;
+	export let isPRMRSecret = false;
+	export let PRMRSecret: any = {};
+
+	if (isPRMRSecret) value = PRMRSecret.value;
+
+	import { page } from '$app/stores';
+	import { del } from '$lib/api';
+	import { errorNotification } from '$lib/common';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { addToast } from '$lib/store';
+	import { t } from '$lib/translations';
+	import { createEventDispatcher } from 'svelte';
+	import { saveSecret } from './utils';
+
+	const dispatch = createEventDispatcher();
+	const { id } = $page.params;
+	async function removeSecret() {
+		try {
+			await del(`/databases/${id}/secrets`, { name });
+			dispatch('refresh');
+			if (isNewSecret) {
+				name = '';
+				value = '';
+				isBuildSecret = false;
+			}
+			addToast({
+				message: 'Secret removed.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+
+	async function createSecret(isNew: any) {
+		try {
+			if (!name || !value) return;
+			await saveSecret({
+				isNew,
+				name,
+				value,
+				isBuildSecret,
+				isPRMRSecret,
+				isNewSecret,
+				databaseId: id
+			});
+			if (isNewSecret) {
+				name = '';
+				value = '';
+				isBuildSecret = false;
+				addToast({
+					message: 'Secret added.',
+					type: 'success'
+				});
+			} else {
+				addToast({
+				message: 'Secret updated.',
+				type: 'success'
+			});
+			}
+			dispatch('refresh');
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+
+	async function setSecretValue() {
+		if (!isPRMRSecret) {
+			isBuildSecret = !isBuildSecret;
+			if (!isNewSecret) {
+				await saveSecret({
+					isNew: isNewSecret,
+					name,
+					value,
+					isBuildSecret,
+					isPRMRSecret,
+					isNewSecret,
+					databaseId: id
+				});
+				addToast({
+					message: 'Secret updated.',
+					type: 'success'
+				});
+			}
+		}
+	}
+</script>
+
+<td>
+	<input
+		id={isNewSecret ? 'secretName' : 'secretNameNew'}
+		bind:value={name}
+		required
+		placeholder="EXAMPLE_VARIABLE"
+		readonly={!isNewSecret}
+		class:bg-transparent={!isNewSecret}
+		class:cursor-not-allowed={!isNewSecret}
+	/>
+</td>
+<td>
+	<CopyPasswordField
+		id={isNewSecret ? 'secretValue' : 'secretValueNew'}
+		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
+		isPasswordField={true}
+		bind:value
+		required
+		placeholder="J$#@UIO%HO#$U%H"
+	/>
+</td>
+<td class="text-center">
+	<button
+		on:click={setSecretValue}
+		aria-pressed="false"
+		class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
+		class:bg-green-600={isBuildSecret}
+		class:bg-stone-700={!isBuildSecret}
+		class:opacity-50={isPRMRSecret}
+		class:cursor-not-allowed={isPRMRSecret}
+		class:cursor-pointer={!isPRMRSecret}
+	>
+		<span class="sr-only">Need during buildtime?</span>
+		<span
+			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+			class:translate-x-5={isBuildSecret}
+			class:translate-x-0={!isBuildSecret}
+		>
+			<span
+				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+				class:opacity-0={isBuildSecret}
+				class:opacity-100={!isBuildSecret}
+				aria-hidden="true"
+			>
+				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+					<path
+						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</span>
+			<span
+				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+				aria-hidden="true"
+				class:opacity-100={isBuildSecret}
+				class:opacity-0={!isBuildSecret}
+			>
+				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+					<path
+						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+					/>
+				</svg>
+			</span>
+		</span>
+	</button>
+</td>
+<td>
+	{#if isNewSecret}
+		<div class="flex items-center justify-center">
+			<button class="btn bg-databases btn-sm" on:click={() => createSecret(true)}
+				>{$t('forms.add')}</button
+			>
+		</div>
+	{:else}
+		<div class="flex flex-row justify-center space-x-2">
+			<div class="flex items-center justify-center">
+				<button class="btn bg-databases btn-sm" on:click={() => createSecret(false)}
+					>{$t('forms.set')}</button
+				>
+			</div>
+			{#if !isPRMRSecret}
+				<div class="flex justify-center items-end">
+					<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
+						>{$t('forms.remove')}</button
+					>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</td>