Merge branch 'next' into grafana-service

.gitignore

@@ -12,4 +12,5 @@ client
 apps/api/db/*.db
 local-serve
 apps/api/db/migration.db-journal
-apps/api/core*
+apps/api/core*
+logs

CONTRIBUTING.md

@@ -1,256 +0,0 @@
-# 👋 Welcome
-
-First of all, thank you for considering contributing to my project! It means a lot 💜.
-
-
-## 🙋 Want to help?
-
-If you begin in GitHub contribution, you can find the [first contribution](https://github.com/firstcontributions/first-contributions) and follow this guide.
-
-Follow the [introduction](#introduction) to get started then start contributing!
-
-This is a little list of what you can do to help the project:
-
-- [🧑‍💻 Develop your own ideas](#developer-contribution)
-- [🌐 Translate the project](#translation)
-
-## 👋 Introduction
-
-### Setup with 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.
-
-### Setup with 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.
-
-### Setup locally in your machine
-
-> 🔴 At the moment, Coolify **doesn't support Windows**. You must use Linux or MacOS. Consider using Gitpod or Github Codespaces.
-
-#### Recommended Pull Request Guideline
-
-- Fork the project
-- Clone your fork repo to local
-- Create a new branch
-- Push to your fork repo
-- Create a pull request: https://github.com/coollabsio/coolify/compare
-- Write a proper description
-- Open the pull request to review against `next` branch
-
----
-
-# 🧑‍💻 Developer contribution
-## 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**
-
----
-
-## How to start after you set up your local fork?
-
-### Prerequisites
-1. 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!
-
-2. You need to have [Docker Engine](https://docs.docker.com/engine/install/) installed locally.
-3. You need to have [Docker Compose Plugin](https://docs.docker.com/compose/install/compose-plugin/) installed locally.
-4. You need to have [GIT LFS Support](https://git-lfs.github.com/) installed locally.
-
-Optional:
-
-4. To test Heroku buildpacks, you need [pack](https://github.com/buildpacks/pack) binary installed locally.
-
-### Steps for local setup
-
-1. Copy `apps/api/.env.template` to `apps/api/.env.template` and set the `COOLIFY_APP_ID` environment variable to something cool.
-2. Install dependencies with `pnpm install`.
-3. Need to create a local SQlite database with `pnpm db:push`.
-
-   This will apply all migrations at `db/dev.db`.
-
-4. Seed the database with base entities with `pnpm db:seed`
-5. You can start coding after starting `pnpm dev`.
-
----
-
-## Database migrations
-
-During development, if you change the database layout, you need to run `pnpm db:push` to migrate the database and create types for Prisma. You also need to restart the development process.
-
-If the schema is finalized, you need to create a migration file with `pnpm db:migrate <nameOfMigration>` where `nameOfMigration` is given by you. Make it sense. :)
-
----
-
-## How to add new services
-
-You can add any open-source and self-hostable software (service/application) to Coolify if the following statements are true:
-
-- Self-hostable (obviously)
-- Open-source
-- Maintained (I do not want to add software full of bugs)
-
-## Backend
-
-There are 5 steps you should make on the backend side.
-
-1. Create Prisma / database schema for the new service.
-2. Add supported versions of the service.
-3. Update global functions.
-4. Create API endpoints.
-5. Define automatically generated variables.
-
-> I will use [Umami](https://umami.is/) as an example service.
-
-### Create Prisma / Database schema for the new service.
-
-You only need to do this if you store passwords or any persistent configuration. Mostly it is required by all services, but there are some exceptions, like NocoDB.
-
-Update Prisma schema in [prisma/schema.prisma](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.
-
-If you are finished with the Prisma schema, you should update the database schema with `pnpm db:push` command.
-
-> You must restart the running development environment to be able to use the new model
-
-> If you use VSCode/TLS, you probably need to restart the `Typescript Language Server` to get the new types loaded in the running environment.
-
-### Add supported versions
-
-Supported versions are hardcoded into Coolify (for now).
-
-You need to update `supportedServiceTypesAndVersions` function at [apps/api/src/lib/services/supportedVersions.ts](apps/api/src/lib/services/supportedVersions.ts). Example JSON:
-
-```js
-     {
-       // Name used to identify the service internally
-       name: 'umami',
-       // Fancier name to show to the user
-       fancyName: 'Umami',
-       // Docker base image for the service
-       baseImage: 'ghcr.io/mikecao/umami',
-       // Optional: If there is any dependent image, you should list it here
-       images: [],
-       // Usable tags
-       versions: ['postgresql-latest'],
-       // Which tag is the recommended
-       recommendedVersion: 'postgresql-latest',
-       // Application's default port, Umami listens on 3000
-       ports: {
-         main: 3000
-       }
-     }
-```
-
-### Add required functions/properties
-
-1. Add the new service to the `includeServices` variable in [apps/api/src/lib/services/common.ts](apps/api/src/lib/services/common.ts), so it will be included in all places in the database queries where it is required.
-
-```js
-const include: any = {
-	destinationDocker: true,
-	persistentStorage: true,
-	serviceSecret: true,
-	minio: true,
-	plausibleAnalytics: true,
-	vscodeserver: true,
-	wordpress: true,
-	ghost: true,
-	meiliSearch: true,
-	umami: true // This line!
-};
-```
-
-2. Update the database update query with the new service type to `configureServiceType` function in [apps/api/src/lib/services/common.ts](apps/api/src/lib/services/common.ts). This function defines the automatically generated variables (passwords, users, etc.) and it's encryption process (if applicable).
-
-```js
-[...]
-else if (type === 'umami') {
-		const postgresqlUser = cuid();
-		const postgresqlPassword = encrypt(generatePassword());
-		const postgresqlDatabase = 'umami';
-		const hashSalt = encrypt(generatePassword(64));
-		await prisma.service.update({
-			where: { id },
-			data: {
-				type,
-				umami: {
-					create: {
-						postgresqlDatabase,
-						postgresqlPassword,
-						postgresqlUser,
-						hashSalt,
-					}
-				}
-			}
-		});
-	}
-```
-
-3. Add field details to [apps/api/src/lib/services/serviceFields.ts](apps/api/src/lib/services/serviceFields.ts), so every component will know what to do with the values (decrypt/show it by default/readonly)
-
-```js
-export const umami = [{
-	name: 'postgresqlUser',
-	isEditable: false,
-	isLowerCase: false,
-	isNumber: false,
-	isBoolean: false,
-	isEncrypted: false
-}]
-```
-
-4. Add service deletion query to `removeService` function in [apps/api/src/lib/services/common.ts](apps/api/src/lib/services/common.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)
-
-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.
-
-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
-
-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. 
-   
-   > For example, see other [here](apps/ui/src/routes/services/[id]/_Services/_Umami.svelte).
-
-
-Good job! 👏
-
-<!-- # 🌐 Translate the project
-
-The project use [sveltekit-i18n](https://github.com/sveltekit-i18n/lib) to translate the project.
-It follows the [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) to name languages.
-
-### Installation
-
-You must have gone throw all the [intro](#introduction) steps before you can start translating.
-
-It's only an advice, but I recommend you to use:
-
-- Visual Studio Code
-- [i18n Ally for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally): ideal to see the progress of the translation.
-- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode): to get the syntax color for the project
-
-### Adding a language
-
-If your language doesn't appear in the [locales folder list](src/lib/locales/), follow the step below:
-
-1.  In `src/lib/locales/`, Copy paste `en.json` and rename it with your language (eg: `cz.json`).
-2.  In the [lang.json](src/lib/lang.json) file, add a line after the first bracket (`{`) with `"ISO of your language": "Language",` (eg: `"cz": "Czech",`).
-3.  Have fun translating! -->

CONTRIBUTION.md

@@ -1,45 +1,3 @@
----
-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! :)
@@ -100,9 +58,58 @@ ### Create Prisma / Database schema for the new service.
 
 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).
+Update Prisma schema in [src/apps/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.
+
+Once done, create Prisma schema with `pnpm db:push`.
+> You may also need to restart `Typescript Language Server` in your IDE to get the new types.
+
+### Add available versions 
+
+Versions are hardcoded into Coolify at the moment and based on Docker image tags.
+- Update `supportedServiceTypesAndVersions` function [here](apps/api/src/lib/services/supportedVersions.ts)
+
+### Include the new service in queries
+
+At [here](apps/api/src/lib/services/common.ts) in `includeServices` function add the new table name, so it will be included in all places in the database queries where it is required.
+
+### Define auto-generated fields
+
+At [here](apps/api/src/lib/services/common.ts) in `configureServiceType` function add the initial auto-generated details such as password, users etc, and the encryption process of secrets (if applicable).
+
+### Define input field details
+
+At [here](apps/api/src/lib/services/serviceFields.ts) add details about the input fields shown in the UI, so every component (API/UI) will know what to do with the values (decrypt/show it by default/readonly/etc).
+
+### Define the start process
+
+- At [here](apps/api/src/lib/services/handlers.ts), define how the service should start. It could be complex and based on `docker-compose` definitions.
+
+> See `startUmamiService()` function as example.
+
+- At [here](apps/api/src/routes/api/v1/services/handlers.ts), add the new start service process to `startService` function.
+
+### Define the deletion process
+
+[Here](apps/api/src/lib/services/common.ts) in `removeService` add the database deletion process.
+
+### Custom logo
+
+- At [here](apps/ui/src/lib/components/svg/services) add the service custom log as a Svelte component and export it [here](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.
+
+- At [here](apps/ui/src/lib/components/svg/services/ServiceIcons.svelte) include the new logo with `isAbsolute` property.
+
+- At [here](apps/ui/src/routes/services/[id]/_ServiceLinks.svelte) add links to the documentation of the service.
+
+### Custom fields on the UI
+By default the URL and name are shown on the UI. Everything else needs to be added [here](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 [here](apps/ui/src/routes/services/[id]/_Services) with an underscore. For example, see other [here](apps/ui/src/routes/services/[id]/_Services/_Umami.svelte).
+
+Good job! 👏

Dockerfile

@@ -33,6 +33,7 @@ RUN chmod +x ~/.docker/cli-plugins/docker-compose /usr/bin/docker
 RUN (curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.27.0/pack-v0.27.0-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack)
 
 COPY --from=build /app/apps/api/build/ .
+COPY --from=build /app/others/fluentbit/ ./fluentbit
 COPY --from=build /app/apps/ui/build/ ./public
 COPY --from=build /app/apps/api/prisma/ ./prisma
 COPY --from=build /app/apps/api/package.json .

apps/api/package.json

@@ -29,6 +29,8 @@
     "bree": "9.1.2",
     "cabin": "9.1.2",
     "compare-versions": "5.0.1",
+    "csv-parse": "^5.3.0",
+    "csvtojson": "^2.0.10",
     "cuid": "2.1.8",
     "dayjs": "1.11.5",
     "dockerode": "3.3.4",

apps/api/prisma/migrations/20220913092100_preview_applications/migration.sql

@@ -0,0 +1,18 @@
+-- AlterTable
+ALTER TABLE "Build" ADD COLUMN "previewApplicationId" TEXT;
+
+-- CreateTable
+CREATE TABLE "PreviewApplication" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "pullmergeRequestId" TEXT NOT NULL,
+    "sourceBranch" TEXT NOT NULL,
+    "isRandomDomain" BOOLEAN NOT NULL DEFAULT false,
+    "customDomain" TEXT,
+    "applicationId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "PreviewApplication_applicationId_fkey" FOREIGN KEY ("applicationId") REFERENCES "Application" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PreviewApplication_applicationId_key" ON "PreviewApplication"("applicationId");

apps/api/prisma/schema.prisma

@@ -119,6 +119,19 @@ model Application {
   secrets             Secret[]
   teams               Team[]
   connectedDatabase   ApplicationConnectedDatabase?
+  previewApplication  PreviewApplication[]
+}
+
+model PreviewApplication {
+  id                 String      @id @default(cuid())
+  pullmergeRequestId String
+  sourceBranch       String
+  isRandomDomain     Boolean     @default(false)
+  customDomain       String?
+  applicationId      String      @unique
+  application        Application @relation(fields: [applicationId], references: [id])
+  createdAt          DateTime    @default(now())
+  updatedAt          DateTime    @updatedAt
 }
 
 model ApplicationConnectedDatabase {
@@ -210,21 +223,22 @@ model BuildLog {
 }
 
 model Build {
-  id                  String   @id @default(cuid())
-  type                String
-  applicationId       String?
-  destinationDockerId String?
-  gitSourceId         String?
-  githubAppId         String?
-  gitlabAppId         String?
-  commit              String?
-  pullmergeRequestId  String?
-  forceRebuild        Boolean  @default(false)
-  sourceBranch        String?
-  branch              String?
-  status              String?  @default("queued")
-  createdAt           DateTime @default(now())
-  updatedAt           DateTime @updatedAt
+  id                   String   @id @default(cuid())
+  type                 String
+  applicationId        String?
+  destinationDockerId  String?
+  gitSourceId          String?
+  githubAppId          String?
+  gitlabAppId          String?
+  commit               String?
+  pullmergeRequestId   String?
+  previewApplicationId String?
+  forceRebuild         Boolean  @default(false)
+  sourceBranch         String?
+  branch               String?
+  status               String?  @default("queued")
+  createdAt            DateTime @default(now())
+  updatedAt            DateTime @updatedAt
 }
 
 model DestinationDocker {

apps/api/src/jobs/deployApplication.ts

@@ -38,8 +38,16 @@ import * as buildpacks from '../lib/buildPacks';
 					for (const queueBuild of queuedBuilds) {
 						actions.push(async () => {
 							let application = await prisma.application.findUnique({ where: { id: queueBuild.applicationId }, include: { destinationDocker: true, gitSource: { include: { githubApp: true, gitlabApp: true } }, persistentStorage: true, secrets: true, settings: true, teams: true } })
-							let { id: buildId, type, sourceBranch = null, pullmergeRequestId = null, forceRebuild } = queueBuild
+							let { id: buildId, type, sourceBranch = null, pullmergeRequestId = null, previewApplicationId = null, forceRebuild } = queueBuild
 							application = decryptApplication(application)
+							const originalApplicationId = application.id
+							if (pullmergeRequestId) {
+								const previewApplications = await prisma.previewApplication.findMany({ where: { applicationId: originalApplicationId, pullmergeRequestId } })
+								if (previewApplications.length > 0) {
+									previewApplicationId = previewApplications[0].id
+								}
+							}
+							const usableApplicationId = previewApplicationId || originalApplicationId
 							try {
 								if (queueBuild.status === 'running') {
 									await saveBuildLog({ line: 'Building halted, restarting...', buildId, applicationId: application.id });
@@ -104,17 +112,17 @@ import * as buildpacks from '../lib/buildPacks';
 									)
 									.digest('hex');
 								const { debug } = settings;
-								if (concurrency === 1) {
-									await prisma.build.updateMany({
-										where: {
-											status: { in: ['queued', 'running'] },
-											id: { not: buildId },
-											applicationId,
-											createdAt: { lt: new Date(new Date().getTime() - 10 * 1000) }
-										},
-										data: { status: 'failed' }
-									});
-								}
+								// if (concurrency === 1) {
+								// 	await prisma.build.updateMany({
+								// 		where: {
+								// 			status: { in: ['queued', 'running'] },
+								// 			id: { not: buildId },
+								// 			applicationId,
+								// 			createdAt: { lt: new Date(new Date().getTime() - 10 * 1000) }
+								// 		},
+								// 		data: { status: 'failed' }
+								// 	});
+								// }
 								let imageId = applicationId;
 								let domain = getDomain(fqdn);
 								const volumes =
@@ -261,7 +269,10 @@ import * as buildpacks from '../lib/buildPacks';
 									if (secrets.length > 0) {
 										secrets.forEach((secret) => {
 											if (pullmergeRequestId) {
-												if (secret.isPRMRSecret) {
+												const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+												if (isSecretFound.length > 0) {
+													envs.push(`${secret.name}=${isSecretFound[0].value}`);
+												} else {
 													envs.push(`${secret.name}=${secret.value}`);
 												}
 											} else {
@@ -335,10 +346,15 @@ import * as buildpacks from '../lib/buildPacks';
 										await saveBuildLog({ line: 'Deployment successful!', buildId, applicationId });
 									} catch (error) {
 										await saveBuildLog({ line: error, buildId, applicationId });
-										await prisma.build.updateMany({
-											where: { id: buildId, status: { in: ['queued', 'running'] } },
-											data: { status: 'failed' }
-										});
+										const foundBuild = await prisma.build.findUnique({ where: { id: buildId } })
+										if (foundBuild) {
+											await prisma.build.update({
+												where: { id: buildId },
+												data: {
+													status: 'failed'
+												}
+											});
+										}
 										throw new Error(error);
 									}
 									await saveBuildLog({ line: 'Proxy will be updated shortly.', buildId, applicationId });
@@ -350,11 +366,18 @@ import * as buildpacks from '../lib/buildPacks';
 								}
 							}
 							catch (error) {
-								await prisma.build.updateMany({
-									where: { id: buildId, status: { in: ['queued', 'running'] } },
-									data: { status: 'failed' }
-								});
-								await saveBuildLog({ line: error, buildId, applicationId: application.id });
+								const foundBuild = await prisma.build.findUnique({ where: { id: buildId } })
+								if (foundBuild) {
+									await prisma.build.update({
+										where: { id: buildId },
+										data: {
+											status: 'failed'
+										}
+									});
+								}
+								if (error !== 1) {
+									await saveBuildLog({ line: error, buildId, applicationId: application.id });
+								}
 							}
 						});
 					}

apps/api/src/jobs/infrastructure.ts

@@ -29,7 +29,7 @@ async function autoUpdater() {
                             `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"`
+                            `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 coolify-fluentbit && docker rm coolify coolify-fluentbit && docker compose pull && docker compose up -d --force-recreate"`
                         );
                     }
                 } else {

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

@@ -1,4 +1,4 @@
-import { base64Encode, executeDockerCmd, generateTimestamp, getDomain, isDev, prisma, version } from "../common";
+import { base64Encode, encrypt, executeDockerCmd, generateTimestamp, getDomain, isDev, prisma, version } from "../common";
 import { promises as fs } from 'fs';
 import { day } from "../dayjs";
 
@@ -461,17 +461,32 @@ export const saveBuildLog = async ({
 	buildId: string;
 	applicationId: string;
 }): Promise<any> => {
+	const { default: got } = await import('got')
+
 	if (line && typeof line === 'string' && line.includes('ghs_')) {
 		const regex = /ghs_.*@/g;
 		line = line.replace(regex, '<SENSITIVE_DATA_DELETED>@');
 	}
 	const addTimestamp = `[${generateTimestamp()}] ${line}`;
-	if (isDev) console.debug(`[${applicationId}] ${addTimestamp}`);
-	return await prisma.buildLog.create({
-		data: {
-			line: addTimestamp, buildId, time: Number(day().valueOf()), applicationId
-		}
-	});
+	const fluentBitUrl = isDev ? 'http://localhost:24224' : 'http://coolify-fluentbit:24224';
+
+	if (isDev) {
+		console.debug(`[${applicationId}] ${addTimestamp}`);
+	}
+	try {
+		return await got.post(`${fluentBitUrl}/${applicationId}_buildlog_${buildId}.csv`, {
+			json: {
+				line: encrypt(line)
+			}
+		})
+	} catch(error) {
+		return await prisma.buildLog.create({
+			data: {
+				line: addTimestamp, buildId, time: Number(day().valueOf()), applicationId
+			}
+		});
+	}
+
 };
 
 export async function copyBaseConfigurationFiles(
@@ -556,7 +571,6 @@ export function checkPnpm(installCommand = null, buildCommand = null, startComma
 	);
 }
 
-
 export async function buildImage({
 	applicationId,
 	tag,
@@ -677,8 +691,6 @@ export async function buildCacheImageWithNode(data, imageForBuild) {
 		secrets,
 		pullmergeRequestId
 	} = data;
-
-
 	const isPnpm = checkPnpm(installCommand, buildCommand);
 	const Dockerfile: Array<string> = [];
 	Dockerfile.push(`FROM ${imageForBuild}`);
@@ -688,7 +700,10 @@ export async function buildCacheImageWithNode(data, imageForBuild) {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {
@@ -722,7 +737,10 @@ export async function buildCacheImageForLaravel(data, imageForBuild) {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -27,7 +27,10 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -28,6 +28,7 @@ export default async function (data) {
 		if (secrets.length > 0) {
 			secrets.forEach((secret) => {
 				if (secret.isBuildSecret) {
+					// TODO: fix secrets
 					if (
 						(pullmergeRequestId && secret.isPRMRSecret) ||
 						(!pullmergeRequestId && !secret.isPRMRSecret)

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

@@ -27,7 +27,10 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -23,7 +23,10 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -27,7 +27,10 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -16,7 +16,10 @@ const createDockerfile = async (data, image, htaccessFound): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -21,7 +21,10 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

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

@@ -24,7 +24,10 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets.forEach((secret) => {
 			if (secret.isBuildSecret) {
 				if (pullmergeRequestId) {
-					if (secret.isPRMRSecret) {
+					const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+					if (isSecretFound.length > 0) {
+						Dockerfile.push(`ARG ${secret.name}=${isSecretFound[0].value}`);
+					} else {
 						Dockerfile.push(`ARG ${secret.name}=${secret.value}`);
 					}
 				} else {

apps/api/src/lib/docker.ts

@@ -13,7 +13,7 @@ export function formatLabelsOnDocker(data) {
 		return container
 	})
 }
-export async function checkContainer({ dockerId, container, remove = false }: { dockerId: string, container: string, remove?: boolean }): Promise<boolean> {
+export async function checkContainer({ dockerId, container, remove = false }: { dockerId: string, container: string, remove?: boolean }): Promise<{ found: boolean, status?: { isExited: boolean, isRunning: boolean, isRestarting: boolean } }> {
 	let containerFound = false;
 	try {
 		const { stdout } = await executeDockerCmd({
@@ -21,10 +21,12 @@ export async function checkContainer({ dockerId, container, remove = false }: {
 			command:
 				`docker inspect --format '{{json .State}}' ${container}`
 		});
-
+		containerFound = true
 		const parsedStdout = JSON.parse(stdout);
 		const status = parsedStdout.Status;
 		const isRunning = status === 'running';
+		const isRestarting = status === 'restarting'
+		const isExited = status === 'exited'
 		if (status === 'created') {
 			await executeDockerCmd({
 				dockerId,
@@ -39,13 +41,23 @@ export async function checkContainer({ dockerId, container, remove = false }: {
 					`docker rm ${container}`
 			});
 		}
-		if (isRunning) {
-			containerFound = true;
-		}
+		
+		return {
+			found: containerFound,
+			status: {
+				isRunning,
+				isRestarting,
+				isExited
+
+			}
+		};
 	} catch (err) {
 		// Container not found
 	}
-	return containerFound;
+	return {
+		found: false
+	};
+
 }
 
 export async function isContainerExited(dockerId: string, containerName: string): Promise<boolean> {

apps/api/src/lib/importers/gitlab.ts

@@ -10,7 +10,8 @@ export default async function ({
 	branch,
 	buildId,
 	privateSshKey,
-	customPort
+	customPort,
+	forPublic
 }: {
 	applicationId: string;
 	workdir: string;
@@ -21,11 +22,15 @@ export default async function ({
 	repodir: string;
 	privateSshKey: string;
 	customPort: number;
+	forPublic: boolean;
 }): Promise<string> {
 	const url = htmlUrl.replace('https://', '').replace('http://', '').replace(/\/$/, '');
 	await saveBuildLog({ line: 'GitLab importer started.', buildId, applicationId });
-	await asyncExecShell(`echo '${privateSshKey}' > ${repodir}/id.rsa`);
-	await asyncExecShell(`chmod 600 ${repodir}/id.rsa`);
+
+	if (!forPublic) {
+		await asyncExecShell(`echo '${privateSshKey}' > ${repodir}/id.rsa`);
+		await asyncExecShell(`chmod 600 ${repodir}/id.rsa`);
+	}
 
 	await saveBuildLog({
 		line: `Cloning ${repository}:${branch} branch.`,
@@ -33,9 +38,16 @@ export default async function ({
 		applicationId
 	});
 
-	await asyncExecShell(
-		`git clone -q -b ${branch} git@${url}:${repository}.git --config core.sshCommand="ssh -p ${customPort} -q -i ${repodir}id.rsa -o StrictHostKeyChecking=no" ${workdir}/ && cd ${workdir}/ && git submodule update --init --recursive && git lfs pull && cd .. `
-	);
+	if (forPublic) {
+		await asyncExecShell(
+			`git clone -q -b ${branch} https://${url}/${repository}.git ${workdir}/ && cd ${workdir}/ && git submodule update --init --recursive && git lfs pull && cd .. `
+		);
+	} else {
+		await asyncExecShell(
+			`git clone -q -b ${branch} git@${url}:${repository}.git --config core.sshCommand="ssh -p ${customPort} -q -i ${repodir}id.rsa -o StrictHostKeyChecking=no" ${workdir}/ && cd ${workdir}/ && git submodule update --init --recursive && git lfs pull && cd .. `
+		);
+	}
+	
 	const { stdout: commit } = await asyncExecShell(`cd ${workdir}/ && git rev-parse HEAD`);
 	return commit.replace('\n', '');
 }

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

@@ -5,6 +5,7 @@ import bcrypt from 'bcryptjs';
 import { ServiceStartStop } from '../../routes/api/v1/services/types';
 import { asyncSleep, ComposeFile, createDirectories, defaultComposeConfiguration, errorHandler, executeDockerCmd, getDomain, getFreePublicPort, getServiceFromDB, getServiceImage, getServiceMainPort, isARM, isDev, makeLabelForServices, persistentVolumes, prisma } from '../common';
 import { defaultServiceConfigurations } from '../services';
+import { OnlyId } from '../../types';
 
 export async function startService(request: FastifyRequest<ServiceStartStop>) {
     try {
@@ -317,7 +318,7 @@ async function startMinioService(request: FastifyRequest<ServiceStartStop>) {
             destinationDocker,
             persistentStorage,
             exposePort,
-            minio: { rootUser, rootUserPassword },
+            minio: { rootUser, rootUserPassword, apiFqdn },
             serviceSecret
         } = service;
 
@@ -336,7 +337,7 @@ async function startMinioService(request: FastifyRequest<ServiceStartStop>) {
                 image: `${image}:${version}`,
                 volumes: [`${id}-minio-data:/data`],
                 environmentVariables: {
-                    MINIO_SERVER_URL: fqdn,
+                    MINIO_SERVER_URL: apiFqdn,
                     MINIO_DOMAIN: getDomain(fqdn),
                     MINIO_ROOT_USER: rootUser,
                     MINIO_ROOT_PASSWORD: rootUserPassword,
@@ -658,7 +659,7 @@ async function startLanguageToolService(request: FastifyRequest<ServiceStartStop
                     image: config.languagetool.image,
                     environment: config.languagetool.environmentVariables,
                     ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
-                    volumes: config.languagetool,
+                    volumes: config.languagetool.volumes,
                     labels: makeLabelForServices('languagetool'),
                     ...defaultComposeConfiguration(network),
                 }
@@ -713,7 +714,7 @@ async function startN8nService(request: FastifyRequest<ServiceStartStop>) {
                 [id]: {
                     container_name: id,
                     image: config.n8n.image,
-                    volumes: config.n8n,
+                    volumes: config.n8n.volumes,
                     environment: config.n8n.environmentVariables,
                     labels: makeLabelForServices('n8n'),
                     ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
@@ -1009,79 +1010,136 @@ async function startUmamiService(request: FastifyRequest<ServiceStartStop>) {
         }
 
         const initDbSQL = `
-		drop table if exists event;
-		drop table if exists pageview;
-		drop table if exists session;
-		drop table if exists website;
-		drop table if exists account;
-		
-		create table account (
-			user_id serial primary key,
-			username varchar(255) unique not null,
-			password varchar(60) not null,
-			is_admin bool not null default false,
-			created_at timestamp with time zone default current_timestamp,
-			updated_at timestamp with time zone default current_timestamp
-		);
-		
-		create table website (
-			website_id serial primary key,
-			website_uuid uuid unique not null,
-			user_id int not null references account(user_id) on delete cascade,
-			name varchar(100) not null,
-			domain varchar(500),
-			share_id varchar(64) unique,
-			created_at timestamp with time zone default current_timestamp
-		);
-		
-		create table session (
-			session_id serial primary key,
-			session_uuid uuid unique not null,
-			website_id int not null references website(website_id) on delete cascade,
-			created_at timestamp with time zone default current_timestamp,
-			hostname varchar(100),
-			browser varchar(20),
-			os varchar(20),
-			device varchar(20),
-			screen varchar(11),
-			language varchar(35),
-			country char(2)
-		);
-		
-		create table pageview (
-			view_id serial primary key,
-			website_id int not null references website(website_id) on delete cascade,
-			session_id int not null references session(session_id) on delete cascade,
-			created_at timestamp with time zone default current_timestamp,
-			url varchar(500) not null,
-			referrer varchar(500)
-		);
-		
-		create table event (
-			event_id serial primary key,
-			website_id int not null references website(website_id) on delete cascade,
-			session_id int not null references session(session_id) on delete cascade,
-			created_at timestamp with time zone default current_timestamp,
-			url varchar(500) not null,
-			event_type varchar(50) not null,
-			event_value varchar(50) not null
-		);
-		
-		create index website_user_id_idx on website(user_id);
-		
-		create index session_created_at_idx on session(created_at);
-		create index session_website_id_idx on session(website_id);
-		
-		create index pageview_created_at_idx on pageview(created_at);
-		create index pageview_website_id_idx on pageview(website_id);
-		create index pageview_session_id_idx on pageview(session_id);
-		create index pageview_website_id_created_at_idx on pageview(website_id, created_at);
-		create index pageview_website_id_session_id_created_at_idx on pageview(website_id, session_id, created_at);
-		
-		create index event_created_at_idx on event(created_at);
-		create index event_website_id_idx on event(website_id);
-		create index event_session_id_idx on event(session_id);
-		
+		-- CreateTable
+CREATE TABLE "account" (
+    "user_id" SERIAL NOT NULL,
+    "username" VARCHAR(255) NOT NULL,
+    "password" VARCHAR(60) NOT NULL,
+    "is_admin" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    PRIMARY KEY ("user_id")
+);
+
+-- CreateTable
+CREATE TABLE "event" (
+    "event_id" SERIAL NOT NULL,
+    "website_id" INTEGER NOT NULL,
+    "session_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+    "url" VARCHAR(500) NOT NULL,
+    "event_type" VARCHAR(50) NOT NULL,
+    "event_value" VARCHAR(50) NOT NULL,
+
+    PRIMARY KEY ("event_id")
+);
+
+-- CreateTable
+CREATE TABLE "pageview" (
+    "view_id" SERIAL NOT NULL,
+    "website_id" INTEGER NOT NULL,
+    "session_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+    "url" VARCHAR(500) NOT NULL,
+    "referrer" VARCHAR(500),
+
+    PRIMARY KEY ("view_id")
+);
+
+-- CreateTable
+CREATE TABLE "session" (
+    "session_id" SERIAL NOT NULL,
+    "session_uuid" UUID NOT NULL,
+    "website_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+    "hostname" VARCHAR(100),
+    "browser" VARCHAR(20),
+    "os" VARCHAR(20),
+    "device" VARCHAR(20),
+    "screen" VARCHAR(11),
+    "language" VARCHAR(35),
+    "country" CHAR(2),
+
+    PRIMARY KEY ("session_id")
+);
+
+-- CreateTable
+CREATE TABLE "website" (
+    "website_id" SERIAL NOT NULL,
+    "website_uuid" UUID NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "name" VARCHAR(100) NOT NULL,
+    "domain" VARCHAR(500),
+    "share_id" VARCHAR(64),
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    PRIMARY KEY ("website_id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "account.username_unique" ON "account"("username");
+
+-- CreateIndex
+CREATE INDEX "event_created_at_idx" ON "event"("created_at");
+
+-- CreateIndex
+CREATE INDEX "event_session_id_idx" ON "event"("session_id");
+
+-- CreateIndex
+CREATE INDEX "event_website_id_idx" ON "event"("website_id");
+
+-- CreateIndex
+CREATE INDEX "pageview_created_at_idx" ON "pageview"("created_at");
+
+-- CreateIndex
+CREATE INDEX "pageview_session_id_idx" ON "pageview"("session_id");
+
+-- CreateIndex
+CREATE INDEX "pageview_website_id_created_at_idx" ON "pageview"("website_id", "created_at");
+
+-- CreateIndex
+CREATE INDEX "pageview_website_id_idx" ON "pageview"("website_id");
+
+-- CreateIndex
+CREATE INDEX "pageview_website_id_session_id_created_at_idx" ON "pageview"("website_id", "session_id", "created_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "session.session_uuid_unique" ON "session"("session_uuid");
+
+-- CreateIndex
+CREATE INDEX "session_created_at_idx" ON "session"("created_at");
+
+-- CreateIndex
+CREATE INDEX "session_website_id_idx" ON "session"("website_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "website.website_uuid_unique" ON "website"("website_uuid");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "website.share_id_unique" ON "website"("share_id");
+
+-- CreateIndex
+CREATE INDEX "website_user_id_idx" ON "website"("user_id");
+
+-- AddForeignKey
+ALTER TABLE "event" ADD FOREIGN KEY ("session_id") REFERENCES "session"("session_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "event" ADD FOREIGN KEY ("website_id") REFERENCES "website"("website_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "pageview" ADD FOREIGN KEY ("session_id") REFERENCES "session"("session_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "pageview" ADD FOREIGN KEY ("website_id") REFERENCES "website"("website_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "session" ADD FOREIGN KEY ("website_id") REFERENCES "website"("website_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "website" ADD FOREIGN KEY ("user_id") REFERENCES "account"("user_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
 		insert into account (username, password, is_admin) values ('admin', '${bcrypt.hashSync(
             umamiAdminPassword,
             10
@@ -1119,7 +1177,6 @@ async function startUmamiService(request: FastifyRequest<ServiceStartStop>) {
             },
             volumes: volumeMounts
         };
-        console.log(composeFile)
         const composeFileDestination = `${workdir}/docker-compose.yaml`;
         await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
         await startServiceContainers(destinationDocker.id, composeFileDestination)
@@ -1321,10 +1378,6 @@ async function startAppWriteService(request: FastifyRequest<ServiceStartStop>) {
         const teamId = request.user.teamId;
         const { version, fqdn, destinationDocker, secrets, exposePort, network, port, workdir, image, appwrite } = await defaultServiceConfigurations({ id, teamId })
 
-        let isStatsEnabled = false
-        if (secrets.find(s => s === '_APP_USAGE_STATS=enabled')) {
-            isStatsEnabled = true
-        }
         const {
             opensslKeyV1,
             executorSecret,
@@ -1702,50 +1755,48 @@ async function startAppWriteService(request: FastifyRequest<ServiceStartStop>) {
             },
 
         };
-        if (isStatsEnabled) {
-            dockerCompose[id].depends_on.push(`${id}-influxdb`);
-            dockerCompose[`${id}-usage`] = {
-                image: `${image}:${version}`,
-                container_name: `${id}-usage`,
-                labels: makeLabelForServices('appwrite'),
-                entrypoint: "usage",
-                depends_on: [
-                    `${id}-mariadb`,
-                    `${id}-influxdb`,
-                ],
-                environment: [
-                    "_APP_ENV=production",
-                    `_APP_OPENSSL_KEY_V1=${opensslKeyV1}`,
-                    `_APP_DB_HOST=${mariadbHost}`,
-                    `_APP_DB_PORT=${mariadbPort}`,
-                    `_APP_DB_SCHEMA=${mariadbDatabase}`,
-                    `_APP_DB_USER=${mariadbUser}`,
-                    `_APP_DB_PASS=${mariadbPassword}`,
-                    `_APP_INFLUXDB_HOST=${id}-influxdb`,
-                    "_APP_INFLUXDB_PORT=8086",
-                    `_APP_REDIS_HOST=${id}-redis`,
-                    "_APP_REDIS_PORT=6379",
-                    ...secrets
-                ],
-                ...defaultComposeConfiguration(network),
-            }
-            dockerCompose[`${id}-influxdb`] = {
-                image: "appwrite/influxdb:1.5.0",
-                container_name: `${id}-influxdb`,
-                volumes: [
-                    `${id}-influxdb:/var/lib/influxdb:rw`
-                ],
-                ...defaultComposeConfiguration(network),
-            }
-            dockerCompose[`${id}-telegraf`] = {
-                image: "appwrite/telegraf:1.4.0",
-                container_name: `${id}-telegraf`,
-                environment: [
-                    `_APP_INFLUXDB_HOST=${id}-influxdb`,
-                    "_APP_INFLUXDB_PORT=8086",
-                ],
-                ...defaultComposeConfiguration(network),
-            }
+        dockerCompose[id].depends_on.push(`${id}-influxdb`);
+        dockerCompose[`${id}-usage`] = {
+            image: `${image}:${version}`,
+            container_name: `${id}-usage`,
+            labels: makeLabelForServices('appwrite'),
+            entrypoint: "usage",
+            depends_on: [
+                `${id}-mariadb`,
+                `${id}-influxdb`,
+            ],
+            environment: [
+                "_APP_ENV=production",
+                `_APP_OPENSSL_KEY_V1=${opensslKeyV1}`,
+                `_APP_DB_HOST=${mariadbHost}`,
+                `_APP_DB_PORT=${mariadbPort}`,
+                `_APP_DB_SCHEMA=${mariadbDatabase}`,
+                `_APP_DB_USER=${mariadbUser}`,
+                `_APP_DB_PASS=${mariadbPassword}`,
+                `_APP_INFLUXDB_HOST=${id}-influxdb`,
+                "_APP_INFLUXDB_PORT=8086",
+                `_APP_REDIS_HOST=${id}-redis`,
+                "_APP_REDIS_PORT=6379",
+                ...secrets
+            ],
+            ...defaultComposeConfiguration(network),
+        }
+        dockerCompose[`${id}-influxdb`] = {
+            image: "appwrite/influxdb:1.5.0",
+            container_name: `${id}-influxdb`,
+            volumes: [
+                `${id}-influxdb:/var/lib/influxdb:rw`
+            ],
+            ...defaultComposeConfiguration(network),
+        }
+        dockerCompose[`${id}-telegraf`] = {
+            image: "appwrite/telegraf:1.4.0",
+            container_name: `${id}-telegraf`,
+            environment: [
+                `_APP_INFLUXDB_HOST=${id}-influxdb`,
+                "_APP_INFLUXDB_PORT=8086",
+            ],
+            ...defaultComposeConfiguration(network),
         }
 
         const composeFile: any = {
@@ -2646,4 +2697,25 @@ async function startGrafanaService(request: FastifyRequest<ServiceStartStop>) {
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
-}
+}
+
+export async function migrateAppwriteDB(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const teamId = request.user.teamId;
+        const {
+            destinationDockerId,
+            destinationDocker,
+        } = await getServiceFromDB({ id, teamId });
+        if (destinationDockerId) {
+            await executeDockerCmd({
+                dockerId: destinationDocker.id,
+                command: `docker exec ${id} migrate`
+            })
+            return await reply.code(201).send()
+        }
+        throw { status: 500, message: 'Could cleanup logs.' }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}

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

@@ -1,3 +1,24 @@
+/*
+ Example of a supported version:
+{
+	// Name used to identify the service internally
+	name: 'umami',
+	// Fancier name to show to the user
+	fancyName: 'Umami',
+	// Docker base image for the service
+	baseImage: 'ghcr.io/mikecao/umami',
+	// Optional: If there is any dependent image, you should list it here
+	images: [],
+	// Usable tags
+	versions: ['postgresql-latest'],
+	// Which tag is the recommended
+	recommendedVersion: 'postgresql-latest',
+	// Application's default port, Umami listens on 3000
+	ports: {
+	  main: 3000
+	}
+  }
+*/
 export const supportedServiceTypesAndVersions = [
 	{
 		name: 'plausibleanalytics',
@@ -116,7 +137,7 @@ export const supportedServiceTypesAndVersions = [
 	{
 		name: 'umami',
 		fancyName: 'Umami',
-		baseImage: 'ghcr.io/mikecao/umami',
+		baseImage: 'ghcr.io/umami-software/umami',
 		images: ['postgres:12-alpine'],
 		versions: ['postgresql-latest'],
 		recommendedVersion: 'postgresql-latest',
@@ -151,8 +172,8 @@ export const supportedServiceTypesAndVersions = [
 		fancyName: 'Appwrite',
 		baseImage: 'appwrite/appwrite',
 		images: ['mariadb:10.7', 'redis:6.2-alpine', 'appwrite/telegraf:1.4.0'],
-		versions: ['latest', '0.15.3'],
-		recommendedVersion: '0.15.3',
+		versions: ['latest', '1.0','0.15.3'],
+		recommendedVersion: '1.0',
 		ports: {
 			main: 80
 		}

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

@@ -5,6 +5,7 @@ import axios from 'axios';
 import { FastifyReply } from 'fastify';
 import fs from 'fs/promises';
 import yaml from 'js-yaml';
+import csv from 'csvtojson';
 
 import { day } from '../../../../lib/dayjs';
 import { makeLabelForStandaloneApplication, setDefaultBaseImage, setDefaultConfiguration } from '../../../../lib/buildPacks/common';
@@ -12,8 +13,9 @@ import { checkDomainsIsValidInDNS, checkDoubleBranch, checkExposedPort, createDi
 import { checkContainer, formatLabelsOnDocker, isContainerExited, removeContainer } from '../../../../lib/docker';
 
 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 type { GetImages, CancelDeployment, CheckDNS, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, GetApplicationLogs, GetBuildIdLogs, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, DeployApplication, CheckDomain, StopPreviewApplication, RestartPreviewApplication, GetBuilds } from './types';
 import { OnlyId } from '../../../../types';
+import path from 'node:path';
 
 function filterObject(obj, callback) {
     return Object.fromEntries(Object.entries(obj).
@@ -74,14 +76,19 @@ export async function getApplicationStatus(request: FastifyRequest<OnlyId>) {
         const { teamId } = request.user
         let isRunning = false;
         let isExited = false;
-
+        let isRestarting = false;
         const application: any = await getApplicationFromDB(id, teamId);
         if (application?.destinationDockerId) {
-            isRunning = await checkContainer({ dockerId: application.destinationDocker.id, container: id });
-            isExited = await isContainerExited(application.destinationDocker.id, id);
+            const status = await checkContainer({ dockerId: application.destinationDocker.id, container: id });
+            if (status?.found) {
+                isRunning = status.status.isRunning;
+                isExited = status.status.isExited;
+                isRestarting = status.status.isRestarting
+            }
         }
         return {
             isRunning,
+            isRestarting,
             isExited,
         };
     } catch ({ status, message }) {
@@ -157,7 +164,8 @@ export async function getApplicationFromDB(id: string, teamId: string) {
                 gitSource: { include: { githubApp: true, gitlabApp: true } },
                 secrets: true,
                 persistentStorage: true,
-                connectedDatabase: true
+                connectedDatabase: true,
+                previewApplication: true
             }
         });
         if (!application) {
@@ -339,10 +347,11 @@ export async function stopPreviewApplication(request: FastifyRequest<StopPreview
         if (application?.destinationDockerId) {
             const container = `${id}-${pullmergeRequestId}`
             const { id: dockerId } = application.destinationDocker;
-            const found = await checkContainer({ dockerId, container });
+            const { found } = await checkContainer({ dockerId, container });
             if (found) {
                 await removeContainer({ id: container, dockerId: application.destinationDocker.id });
             }
+            await prisma.previewApplication.deleteMany({ where: { applicationId: application.id, pullmergeRequestId } })
         }
         return reply.code(201).send();
     } catch ({ status, message }) {
@@ -366,7 +375,10 @@ export async function restartApplication(request: FastifyRequest<OnlyId>, reply:
             if (secrets.length > 0) {
                 secrets.forEach((secret) => {
                     if (pullmergeRequestId) {
-                        if (secret.isPRMRSecret) {
+                        const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+                        if (isSecretFound.length > 0) {
+                            envs.push(`${secret.name}=${isSecretFound[0].value}`);
+                        } else {
                             envs.push(`${secret.name}=${secret.value}`);
                         }
                     } else {
@@ -463,7 +475,7 @@ export async function stopApplication(request: FastifyRequest<OnlyId>, reply: Fa
         const application: any = await getApplicationFromDB(id, teamId);
         if (application?.destinationDockerId) {
             const { id: dockerId } = application.destinationDocker;
-            const found = await checkContainer({ dockerId, container: id });
+            const { found } = await checkContainer({ dockerId, container: id });
             if (found) {
                 await removeContainer({ id, dockerId: application.destinationDocker.id });
             }
@@ -607,7 +619,7 @@ export async function deployApplication(request: FastifyRequest<DeployApplicatio
                     githubAppId: application.gitSource?.githubApp?.id,
                     gitlabAppId: application.gitSource?.gitlabApp?.id,
                     status: 'queued',
-                    type: 'manual'
+                    type: pullmergeRequestId ? application.gitSource?.githubApp?.id ? 'manual_pr' : 'manual_mr' : 'manual'
                 }
             });
             return {
@@ -798,7 +810,6 @@ export async function saveSecret(request: FastifyRequest<SaveSecret>, reply: Fas
     try {
         const { id } = request.params
         let { name, value, isBuildSecret, isPRMRSecret, isNew } = request.body
-
         if (isNew) {
             const found = await prisma.secret.findFirst({ where: { name, applicationId: id, isPRMRSecret } });
             if (found) {
@@ -810,14 +821,24 @@ export async function saveSecret(request: FastifyRequest<SaveSecret>, reply: Fas
                 });
             }
         } else {
-            value = encrypt(value.trim());
+            if (value) {
+                value = encrypt(value.trim());
+            }
             const found = await prisma.secret.findFirst({ where: { applicationId: id, name, isPRMRSecret } });
 
             if (found) {
-                await prisma.secret.updateMany({
-                    where: { applicationId: id, name, isPRMRSecret },
-                    data: { value, isBuildSecret, isPRMRSecret }
-                });
+                if (!value && isPRMRSecret) {
+                    await prisma.secret.deleteMany({
+                        where: { applicationId: id, name, isPRMRSecret }
+                    });
+                } else {
+
+                    await prisma.secret.updateMany({
+                        where: { applicationId: id, name, isPRMRSecret },
+                        data: { value, isBuildSecret, isPRMRSecret }
+                    });
+                }
+
             } else {
                 await prisma.secret.create({
                     data: { name, value, isBuildSecret, isPRMRSecret, application: { connect: { id } } }
@@ -884,6 +905,181 @@ export async function deleteStorage(request: FastifyRequest<DeleteStorage>) {
     }
 }
 
+export async function restartPreview(request: FastifyRequest<RestartPreviewApplication>, reply: FastifyReply) {
+    try {
+        const { id, pullmergeRequestId } = 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, port, repository, persistentStorage, id: applicationId, buildPack, exposePort } = application;
+
+            const envs = [
+                `PORT=${port}`
+            ];
+            if (secrets.length > 0) {
+                secrets.forEach((secret) => {
+                    if (pullmergeRequestId) {
+                        const isSecretFound = secrets.filter(s => s.name === secret.name && s.isPRMRSecret)
+                        if (isSecretFound.length > 0) {
+                            envs.push(`${secret.name}=${isSecretFound[0].value}`);
+                        } else {
+                            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}-${pullmergeRequestId}' --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}-${pullmergeRequestId}`]: {
+                        image,
+                        container_name: `${applicationId}-${pullmergeRequestId}`,
+                        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}-${pullmergeRequestId}` })
+            await executeDockerCmd({ dockerId, command: `docker rm ${id}-${pullmergeRequestId}` })
+            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 getPreviewStatus(request: FastifyRequest<RestartPreviewApplication>) {
+    try {
+        const { id, pullmergeRequestId } = request.params
+        const { teamId } = request.user
+        let isRunning = false;
+        let isExited = false;
+        let isRestarting = false;
+        let isBuilding = false
+        const application: any = await getApplicationFromDB(id, teamId);
+        if (application?.destinationDockerId) {
+            const status = await checkContainer({ dockerId: application.destinationDocker.id, container: `${id}-${pullmergeRequestId}` });
+            if (status?.found) {
+                isRunning = status.status.isRunning;
+                isExited = status.status.isExited;
+                isRestarting = status.status.isRestarting
+            }
+            const building = await prisma.build.findMany({ where: { applicationId: id, pullmergeRequestId, status: { in: ['queued', 'running'] } } })
+            isBuilding = building.length > 0
+        }
+        return {
+            isBuilding,
+            isRunning,
+            isRestarting,
+            isExited,
+        };
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+export async function loadPreviews(request: FastifyRequest<OnlyId>) {
+    try {
+        const { id } = request.params
+        const application = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } });
+        const { stdout } = await executeDockerCmd({ dockerId: application.destinationDocker.id, command: `docker container ls --filter 'name=${id}-' --format "{{json .}}"` })
+        if (stdout === '') {
+            throw { status: 500, message: 'No previews found.' }
+        }
+        const containers = formatLabelsOnDocker(stdout).filter(container => container.Labels['coolify.configuration'] && container.Labels['coolify.type'] === 'standalone-application')
+
+        const jsonContainers = containers
+            .map((container) =>
+                JSON.parse(Buffer.from(container.Labels['coolify.configuration'], 'base64').toString())
+            )
+            .filter((container) => {
+                return container.pullmergeRequestId && container.applicationId === id;
+            });
+        for (const container of jsonContainers) {
+            const found = await prisma.previewApplication.findMany({ where: { applicationId: container.applicationId, pullmergeRequestId: container.pullmergeRequestId } })
+            if (found.length === 0) {
+                await prisma.previewApplication.create({
+                    data: {
+                        pullmergeRequestId: container.pullmergeRequestId,
+                        sourceBranch: container.branch,
+                        customDomain: container.fqdn,
+                        application: { connect: { id: container.applicationId } }
+                    }
+                })
+            }
+        }
+        return {
+            previews: await prisma.previewApplication.findMany({ where: { applicationId: id } })
+        }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 export async function getPreviews(request: FastifyRequest<OnlyId>) {
     try {
         const { id } = request.params
@@ -899,26 +1095,7 @@ export async function getPreviews(request: FastifyRequest<OnlyId>) {
 
         const applicationSecrets = secrets.filter((secret) => !secret.isPRMRSecret);
         const PRMRSecrets = secrets.filter((secret) => secret.isPRMRSecret);
-        const application = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } });
-        const { stdout } = await executeDockerCmd({ dockerId: application.destinationDocker.id, command: `docker container ls --filter 'name=${id}-' --format "{{json .}}"` })
-        if (stdout === '') {
-            return {
-                containers: [],
-                applicationSecrets: [],
-                PRMRSecrets: []
-            }
-        }
-        const containers = formatLabelsOnDocker(stdout).filter(container => container.Labels['coolify.configuration'] && container.Labels['coolify.type'] === 'standalone-application')
-
-        const jsonContainers = containers
-            .map((container) =>
-                JSON.parse(Buffer.from(container.Labels['coolify.configuration'], 'base64').toString())
-            )
-            .filter((container) => {
-                return container.pullmergeRequestId && container.applicationId === id;
-            });
         return {
-            containers: jsonContainers,
             applicationSecrets: applicationSecrets.sort((a, b) => {
                 return ('' + a.name).localeCompare(b.name);
             }),
@@ -970,7 +1147,7 @@ export async function getApplicationLogs(request: FastifyRequest<GetApplicationL
         return errorHandler({ status, message })
     }
 }
-export async function getBuildLogs(request: FastifyRequest<GetBuildLogs>) {
+export async function getBuilds(request: FastifyRequest<GetBuilds>) {
     try {
         const { id } = request.params
         let { buildId, skip = 0 } = request.query
@@ -987,17 +1164,15 @@ export async function getBuildLogs(request: FastifyRequest<GetBuildLogs>) {
             builds = await prisma.build.findMany({
                 where: { applicationId: id },
                 orderBy: { createdAt: 'desc' },
-                take: 5,
-                skip
+                take: 5 + skip
             });
         }
-
         builds = builds.map((build) => {
-            const updatedAt = day(build.updatedAt).utc();
-            build.took = updatedAt.diff(day(build.createdAt)) / 1000;
-            build.since = updatedAt.fromNow();
-            return build;
-        });
+            if (build.status === 'running') {
+                build.elapsed = (day().utc().diff(day(build.createdAt)) / 1000).toFixed(0);
+            }
+            return build
+        })
         return {
             builds,
             buildCount
@@ -1009,22 +1184,49 @@ export async function getBuildLogs(request: FastifyRequest<GetBuildLogs>) {
 
 export async function getBuildIdLogs(request: FastifyRequest<GetBuildIdLogs>) {
     try {
-        const { buildId } = request.params
+        // TODO: Fluentbit could still hold the logs, so we need to check if the logs are done
+        const { buildId, id } = request.params
         let { sequence = 0 } = request.query
         if (typeof sequence !== 'number') {
             sequence = Number(sequence)
         }
-        let logs = await prisma.buildLog.findMany({
-            where: { buildId, time: { gt: sequence } },
-            orderBy: { time: 'asc' }
-        });
+        let file = `/app/logs/${id}_buildlog_${buildId}.csv`
+        if (isDev) {
+            file = `${process.cwd()}/../../logs/${id}_buildlog_${buildId}.csv`
+        }
         const data = await prisma.build.findFirst({ where: { id: buildId } });
         const createdAt = day(data.createdAt).utc();
+        try {
+            await fs.stat(file)
+        } catch (error) {
+            let logs = await prisma.buildLog.findMany({
+                where: { buildId, time: { gt: sequence } },
+                orderBy: { time: 'asc' }
+            });
+            const data = await prisma.build.findFirst({ where: { id: buildId } });
+            const createdAt = day(data.createdAt).utc();
+            return {
+                logs: logs.map(log => {
+                    log.time = Number(log.time)
+                    return log
+                }),
+                fromDb: true,
+                took: day().diff(createdAt) / 1000,
+                status: data?.status || 'queued'
+            }
+        }
+        let fileLogs = (await fs.readFile(file)).toString()
+        let decryptedLogs = await csv({ noheader: true }).fromString(fileLogs)
+        let logs = decryptedLogs.map(log => {
+            const parsed = {
+                time: log['field1'],
+                line: decrypt(log['field2'] + '","' + log['field3'])
+            }
+            return parsed
+        }).filter(log => log.time > sequence)
         return {
-            logs: logs.map(log => {
-                log.time = Number(log.time)
-                return log
-            }),
+            logs,
+            fromDb: false,
             took: day().diff(createdAt) / 1000,
             status: data?.status || 'queued'
         }

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

@@ -1,8 +1,8 @@
 import { FastifyPluginAsync } from 'fastify';
 import { OnlyId } from '../../../../types';
-import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildLogs, getBuildPack, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getSecrets, getStorages, getUsage, listApplications, newApplication, restartApplication, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey, saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication } from './handlers';
+import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildPack, getBuilds, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getPreviewStatus, getSecrets, getStorages, getUsage, listApplications, loadPreviews, newApplication, restartApplication, restartPreview, 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';
+import type { CancelDeployment, CheckDNS, CheckDomain, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, DeployApplication, GetApplicationLogs, GetBuildIdLogs, GetBuilds, GetImages, RestartPreviewApplication, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, StopPreviewApplication } from './types';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.addHook('onRequest', async (request) => {
@@ -37,9 +37,12 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.delete<DeleteStorage>('/:id/storages', async (request) => await deleteStorage(request));
 
     fastify.get<OnlyId>('/:id/previews', async (request) => await getPreviews(request));
+    fastify.post<OnlyId>('/:id/previews/load', async (request) => await loadPreviews(request));
+    fastify.get<RestartPreviewApplication>('/:id/previews/:pullmergeRequestId/status', async (request) => await getPreviewStatus(request));
+    fastify.post<RestartPreviewApplication>('/:id/previews/:pullmergeRequestId/restart', async (request, reply) => await restartPreview(request, reply));
 
     fastify.get<GetApplicationLogs>('/:id/logs', async (request) => await getApplicationLogs(request));
-    fastify.get<GetBuildLogs>('/:id/logs/build', async (request) => await getBuildLogs(request));
+    fastify.get<GetBuilds>('/:id/logs/build', async (request) => await getBuilds(request));
     fastify.get<GetBuildIdLogs>('/:id/logs/build/:buildId', async (request) => await getBuildIdLogs(request));
 
     fastify.get('/:id/usage', async (request) => await getUsage(request))

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

@@ -89,7 +89,7 @@ export interface GetApplicationLogs extends OnlyId {
         since: number,
     }
 }
-export interface GetBuildLogs extends OnlyId {
+export interface GetBuilds extends OnlyId {
     Querystring: {
         buildId: string
         skip: number,
@@ -97,6 +97,7 @@ export interface GetBuildLogs extends OnlyId {
 }
 export interface GetBuildIdLogs {
     Params: {
+        id: string,
         buildId: string
     },
     Querystring: {
@@ -126,4 +127,10 @@ export interface StopPreviewApplication extends OnlyId {
     Body: {
         pullmergeRequestId: string | null,
     }
+}
+export interface RestartPreviewApplication {
+    Params: {
+        id: string,
+        pullmergeRequestId: string | null,
+    }
 }

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

@@ -229,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', remove: true })
+        const { found: isRunning } = await checkContainer({ dockerId: destination.id, container: 'coolify-proxy', remove: true })
         return {
             isRunning
         }

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

@@ -1,13 +1,23 @@
-
-import axios from 'axios';
-import { compareVersions } from 'compare-versions';
-import cuid from 'cuid';
-import bcrypt from 'bcryptjs';
-import { asyncExecShell, asyncSleep, cleanupDockerStorage, errorHandler, isDev, listSettings, prisma, uniqueName, version } from '../../../lib/common';
-import { supportedServiceTypesAndVersions } from '../../../lib/services/supportedVersions';
-import type { FastifyReply, FastifyRequest } from 'fastify';
-import type { Login, Update } from '.';
-import type { GetCurrentUser } from './types';
+import axios from "axios";
+import { compareVersions } from "compare-versions";
+import cuid from "cuid";
+import bcrypt from "bcryptjs";
+import {
+	asyncExecShell,
+	asyncSleep,
+	cleanupDockerStorage,
+	errorHandler,
+	isDev,
+	listSettings,
+	prisma,
+	uniqueName,
+	version,
+} from "../../../lib/common";
+import { supportedServiceTypesAndVersions } from "../../../lib/services/supportedVersions";
+import { scheduler } from "../../../lib/scheduler";
+import type { FastifyReply, FastifyRequest } from "fastify";
+import type { Login, Update } from ".";
+import type { GetCurrentUser } from "./types";
 
 export async function hashPassword(password: string): Promise<string> {
 	const saltRounds = 15;
@@ -17,34 +27,38 @@ export async function hashPassword(password: string): Promise<string> {
 export async function cleanupManually(request: FastifyRequest) {
 	try {
 		const { serverId } = request.body;
-		const destination = await prisma.destinationDocker.findUnique({ where: { id: serverId } })
-		await cleanupDockerStorage(destination.id, true, true)
-		return {}
+		const destination = await prisma.destinationDocker.findUnique({
+			where: { id: serverId },
+		});
+		await cleanupDockerStorage(destination.id, true, true);
+		return {};
 	} catch ({ status, message }) {
-		return errorHandler({ status, message })
+		return errorHandler({ status, message });
 	}
 }
 export async function checkUpdate(request: FastifyRequest) {
 	try {
-		const isStaging = request.hostname === 'staging.coolify.io'
+		const isStaging =
+			request.hostname === "staging.coolify.io" ||
+			request.hostname === "arm.coolify.io";
 		const currentVersion = version;
 		const { data: versions } = await axios.get(
-			`https://get.coollabs.io/versions.json?appId=${process.env['COOLIFY_APP_ID']}&version=${currentVersion}`
+			`https://get.coollabs.io/versions.json?appId=${process.env["COOLIFY_APP_ID"]}&version=${currentVersion}`
 		);
-		const latestVersion = versions['coolify'].main.version
+		const latestVersion = versions["coolify"].main.version;
 		const isUpdateAvailable = compareVersions(latestVersion, currentVersion);
 		if (isStaging) {
 			return {
 				isUpdateAvailable: true,
-				latestVersion: 'next'
-			}
+				latestVersion: "next",
+			};
 		}
 		return {
 			isUpdateAvailable: isStaging ? true : isUpdateAvailable === 1,
-			latestVersion
+			latestVersion,
 		};
 	} catch ({ status, message }) {
-		return errorHandler({ status, message })
+		return errorHandler({ status, message });
 	}
 }
 
@@ -59,7 +73,7 @@ export async function update(request: FastifyRequest<Update>) {
 				`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"`
+				`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 coolify-fluentbit && docker rm coolify coolify-fluentbit && docker compose pull && docker compose up -d --force-recreate"`
 			);
 			return {};
 		} else {
@@ -67,13 +81,27 @@ export async function update(request: FastifyRequest<Update>) {
 			return {};
 		}
 	} catch ({ status, message }) {
-		return errorHandler({ status, message })
+		return errorHandler({ status, message });
+	}
+}
+export async function resetQueue(request: FastifyRequest<any>) {
+	try {
+		const teamId = request.user.teamId;
+		if (teamId === "0") {
+			await prisma.build.updateMany({
+				where: { status: { in: ["queued", "running"] } },
+				data: { status: "canceled" },
+			});
+			scheduler.workers.get("deployApplication").postMessage("cancel");
+		}
+	} catch ({ status, message }) {
+		return errorHandler({ status, message });
 	}
 }
 export async function restartCoolify(request: FastifyRequest<any>) {
 	try {
 		const teamId = request.user.teamId;
-		if (teamId === '0') {
+		if (teamId === "0") {
 			if (!isDev) {
 				asyncExecShell(`docker restart coolify`);
 				return {};
@@ -81,9 +109,12 @@ export async function restartCoolify(request: FastifyRequest<any>) {
 				return {};
 			}
 		}
-		throw { status: 500, message: 'You are not authorized to restart Coolify.' };
+		throw {
+			status: 500,
+			message: "You are not authorized to restart Coolify.",
+		};
 	} catch ({ status, message }) {
-		return errorHandler({ status, message })
+		return errorHandler({ status, message });
 	}
 }
 
@@ -92,24 +123,24 @@ export async function showDashboard(request: FastifyRequest) {
 		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, destinationDocker: true, teams: true }
+			where: { teams: { some: { id: teamId === "0" ? undefined : teamId } } },
+			include: { settings: true, destinationDocker: true, teams: true },
 		});
 		const databases = await prisma.database.findMany({
-			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-			include: { settings: true, destinationDocker: true, teams: true }
+			where: { teams: { some: { id: teamId === "0" ? undefined : teamId } } },
+			include: { settings: true, destinationDocker: true, teams: true },
 		});
 		const services = await prisma.service.findMany({
-			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-			include: { destinationDocker: true, teams: true }
+			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 }
+			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 }
+			where: { teams: { some: { id: teamId === "0" ? undefined : teamId } } },
+			include: { teams: true },
 		});
 		const settings = await listSettings();
 		return {
@@ -121,88 +152,98 @@ export async function showDashboard(request: FastifyRequest) {
 			settings,
 		};
 	} catch ({ status, message }) {
-		return errorHandler({ status, message })
+		return errorHandler({ status, message });
 	}
 }
 
-export async function login(request: FastifyRequest<Login>, reply: FastifyReply) {
+export async function login(
+	request: FastifyRequest<Login>,
+	reply: FastifyReply
+) {
 	if (request.user) {
-		return reply.redirect('/dashboard');
+		return reply.redirect("/dashboard");
 	} else {
 		const { email, password, isLogin } = request.body || {};
 		if (!email || !password) {
-			throw { status: 500, message: 'Email and password are required.' };
+			throw { status: 500, message: "Email and password are required." };
 		}
 		const users = await prisma.user.count();
 		const userFound = await prisma.user.findUnique({
 			where: { email },
 			include: { teams: true, permission: true },
-			rejectOnNotFound: false
+			rejectOnNotFound: false,
 		});
 		if (!userFound && isLogin) {
-			throw { status: 500, message: 'User not found.' };
+			throw { status: 500, message: "User not found." };
 		}
-		const { isRegistrationEnabled, id } = await prisma.setting.findFirst()
+		const { isRegistrationEnabled, id } = await prisma.setting.findFirst();
 		let uid = cuid();
-		let permission = 'read';
+		let permission = "read";
 		let isAdmin = false;
 
 		if (users === 0) {
-			await prisma.setting.update({ where: { id }, data: { isRegistrationEnabled: false } });
-			uid = '0';
+			await prisma.setting.update({
+				where: { id },
+				data: { isRegistrationEnabled: false },
+			});
+			uid = "0";
 		}
 		if (userFound) {
-			if (userFound.type === 'email') {
-				if (userFound.password === 'RESETME') {
+			if (userFound.type === "email") {
+				if (userFound.password === "RESETME") {
 					const hashedPassword = await hashPassword(password);
 					if (userFound.updatedAt < new Date(Date.now() - 1000 * 60 * 10)) {
-						if (userFound.id === '0') {
+						if (userFound.id === "0") {
 							await prisma.user.update({
 								where: { email: userFound.email },
-								data: { password: 'RESETME' }
+								data: { password: "RESETME" },
 							});
 						} else {
 							await prisma.user.update({
 								where: { email: userFound.email },
-								data: { password: 'RESETTIMEOUT' }
+								data: { password: "RESETTIMEOUT" },
 							});
 						}
 
 						throw {
 							status: 500,
-							message: 'Password reset link has expired. Please request a new one.'
+							message:
+								"Password reset link has expired. Please request a new one.",
 						};
 					} else {
 						await prisma.user.update({
 							where: { email: userFound.email },
-							data: { password: hashedPassword }
+							data: { password: hashedPassword },
 						});
 						return {
 							userId: userFound.id,
 							teamId: userFound.id,
 							permission: userFound.permission,
-							isAdmin: true
+							isAdmin: true,
 						};
 					}
 				}
 
-				const passwordMatch = await bcrypt.compare(password, userFound.password);
+				const passwordMatch = await bcrypt.compare(
+					password,
+					userFound.password
+				);
 				if (!passwordMatch) {
 					throw {
 						status: 500,
-						message: 'Wrong password or email address.'
+						message: "Wrong password or email address.",
 					};
 				}
 				uid = userFound.id;
 				isAdmin = true;
 			}
 		} else {
-			permission = 'owner';
+			permission = "owner";
 			isAdmin = true;
 			if (!isRegistrationEnabled) {
 				throw {
 					status: 404,
-					message: 'Registration disabled by administrator.'
+					message: "Registration disabled by administrator.",
 				};
 			}
 			const hashedPassword = await hashPassword(password);
@@ -212,17 +253,17 @@ export async function login(request: FastifyRequest<Login>, reply: FastifyReply)
 						id: uid,
 						email,
 						password: hashedPassword,
-						type: 'email',
+						type: "email",
 						teams: {
 							create: {
 								id: uid,
 								name: uniqueName(),
-								destinationDocker: { connect: { network: 'coolify' } }
-							}
+								destinationDocker: { connect: { network: "coolify" } },
+							},
 						},
-						permission: { create: { teamId: uid, permission: 'owner' } }
+						permission: { create: { teamId: uid, permission: "owner" } },
 					},
-					include: { teams: true }
+					include: { teams: true },
 				});
 			} else {
 				await prisma.user.create({
@@ -230,16 +271,16 @@ export async function login(request: FastifyRequest<Login>, reply: FastifyReply)
 						id: uid,
 						email,
 						password: hashedPassword,
-						type: 'email',
+						type: "email",
 						teams: {
 							create: {
 								id: uid,
-								name: uniqueName()
-							}
+								name: uniqueName(),
+							},
 						},
-						permission: { create: { teamId: uid, permission: 'owner' } }
+						permission: { create: { teamId: uid, permission: "owner" } },
 					},
-					include: { teams: true }
+					include: { teams: true },
 				});
 			}
 		}
@@ -247,18 +288,21 @@ export async function login(request: FastifyRequest<Login>, reply: FastifyReply)
 			userId: uid,
 			teamId: uid,
 			permission,
-			isAdmin
+			isAdmin,
 		};
 	}
 }
 
-export async function getCurrentUser(request: FastifyRequest<GetCurrentUser>, fastify) {
-	let token = null
-	const { teamId } = request.query
+export async function getCurrentUser(
+	request: FastifyRequest<GetCurrentUser>,
+	fastify
+) {
+	let token = null;
+	const { teamId } = request.query;
 	try {
 		const user = await prisma.user.findUnique({
-			where: { id: request.user.userId }
-		})
+			where: { id: request.user.userId },
+		});
 		if (!user) {
 			throw "User not found";
 		}
@@ -269,20 +313,20 @@ export async function getCurrentUser(request: FastifyRequest<GetCurrentUser>, fa
 		try {
 			const user = await prisma.user.findFirst({
 				where: { id: request.user.userId, teams: { some: { id: teamId } } },
-				include: { teams: true, permission: true }
-			})
+				include: { teams: true, permission: true },
+			});
 			if (user) {
-				const permission = user.permission.find(p => p.teamId === teamId).permission
+				const permission = user.permission.find(
+					(p) => p.teamId === teamId
+				).permission;
 				const payload = {
 					...request.user,
 					teamId,
 					permission: permission || null,
-					isAdmin: permission === 'owner' || permission === 'admin'
-
-				}
-				token = fastify.jwt.sign(payload)
+					isAdmin: permission === "owner" || permission === "admin",
+				};
+				token = fastify.jwt.sign(payload);
 			}
-
 		} catch (error) {
 			// No new token -> not switching teams
 		}
@@ -291,6 +335,6 @@ export async function getCurrentUser(request: FastifyRequest<GetCurrentUser>, fa
 		settings: await prisma.setting.findFirst(),
 		supportedServiceTypesAndVersions,
 		token,
-		...request.user
-	}
+		...request.user,
+	};
 }

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

@@ -1,5 +1,5 @@
 import { FastifyPluginAsync } from 'fastify';
-import { checkUpdate, login, showDashboard, update, showUsage, getCurrentUser, cleanupManually, restartCoolify } from './handlers';
+import { checkUpdate, login, showDashboard, update, resetQueue, getCurrentUser, cleanupManually, restartCoolify } from './handlers';
 import { GetCurrentUser } from './types';
 
 export interface Update {
@@ -23,9 +23,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await getCurrentUser(request, fastify));
 
-	fastify.get('/undead', {
-		onRequest: [fastify.authenticate]
-	}, async function () {
+	fastify.get('/undead', async function () {
 		return { message: 'nope' };
 	});
 
@@ -47,6 +45,10 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await restartCoolify(request));
 
+	fastify.post('/internal/resetQueue', {
+		onRequest: [fastify.authenticate]
+	}, async (request) => await resetQueue(request));
+
 	fastify.post('/internal/cleanup', {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await cleanupManually(request));

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

@@ -8,9 +8,7 @@ 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'] })
-
+        const servers = await prisma.destinationDocker.findMany({ where: { teams: { some: { id: teamId === '0' ? undefined : teamId } }}, distinct: ['remoteIpAddress', 'engine'] })
         return {
             servers
         }
@@ -67,8 +65,7 @@ export async function showUsage(request: FastifyRequest) {
         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 { stdout: cpuUsage } = await executeSSHCmd({ dockerId: id, command: `echo $[100-$(vmstat 1 2|tail -1|awk '{print $15}')]` })
         const parsed: any = parseFromText(stats)
         return {
             usage: {
@@ -81,8 +78,8 @@ export async function showUsage(request: FastifyRequest) {
                     freeMemPercentage: (parsed.totalMemoryKB - parsed.usedMemoryKB) / parsed.totalMemoryKB * 100
                 },
                 cpu: {
-                    load: 0,
-                    usage: 0,
+                    load: [0,0,0],
+                    usage: cpuUsage,
                     count: cpus
                 },
                 disk: {

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

@@ -43,13 +43,17 @@ export async function getServiceStatus(request: FastifyRequest<OnlyId>) {
 
         let isRunning = false;
         let isExited = false
-
+        let isRestarting = false;
         const service = await getServiceFromDB({ id, teamId });
         const { destinationDockerId, settings } = service;
 
         if (destinationDockerId) {
-            isRunning = await checkContainer({ dockerId: service.destinationDocker.id, container: id });
-            isExited = await isContainerExited(service.destinationDocker.id, id);
+            const status = await checkContainer({ dockerId: service.destinationDocker.id, container: id });
+            if (status?.found) {
+                isRunning = status.status.isRunning;
+                isExited = status.status.isExited;
+                isRestarting = status.status.isRestarting
+            }
         }
         return {
             isRunning,
@@ -452,7 +456,7 @@ export async function activatePlausibleUsers(request: FastifyRequest<OnlyId>, re
         if (destinationDockerId) {
             await executeDockerCmd({
                 dockerId: destinationDocker.id,
-                command: `docker exec ${id} 'psql -H postgresql://${postgresqlUser}:${postgresqlPassword}@localhost:5432/${postgresqlDatabase} -c "UPDATE users SET email_verified = true;"'`
+                command: `docker exec ${id}-postgresql psql -H postgresql://${postgresqlUser}:${postgresqlPassword}@localhost:5432/${postgresqlDatabase} -c "UPDATE users SET email_verified = true;"`
             })
             return await reply.code(201).send()
         }
@@ -472,7 +476,7 @@ export async function cleanupPlausibleLogs(request: FastifyRequest<OnlyId>, repl
         if (destinationDockerId) {
             await executeDockerCmd({
                 dockerId: destinationDocker.id,
-                command: `docker exec ${id}-clickhouse sh -c "/usr/bin/clickhouse-client -q \\"SELECT name FROM system.tables WHERE name LIKE '%log%';\\"| xargs -I{} /usr/bin/clickhouse-client -q \"TRUNCATE TABLE system.{};\""`
+                command: `docker exec ${id}-clickhouse /usr/bin/clickhouse-client -q \\"SELECT name FROM system.tables WHERE name LIKE '%log%';\\"| xargs -I{} /usr/bin/clickhouse-client -q \"TRUNCATE TABLE system.{};\"`
             })
             return await reply.code(201).send()
         }
@@ -554,7 +558,7 @@ export async function activateWordpressFtp(request: FastifyRequest<ActivateWordp
                 });
 
                 try {
-                    const isRunning = await checkContainer({ dockerId: destinationDocker.id, container: `${id}-ftp` });
+                    const { found: isRunning } = await checkContainer({ dockerId: destinationDocker.id, container: `${id}-ftp` });
                     if (isRunning) {
                         await executeDockerCmd({
                             dockerId: destinationDocker.id,

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

@@ -30,7 +30,7 @@ import {
 
 import type { OnlyId } 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';
+import { migrateAppwriteDB, startService, stopService } from '../../../../lib/services/handlers';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.addHook('onRequest', async (request) => {
@@ -76,6 +76,8 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     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));
     fastify.post<ActivateWordpressFtp>('/:id/wordpress/ftp', async (request, reply) => await activateWordpressFtp(request, reply));
+
+    fastify.post<OnlyId>('/:id/appwrite/migrate', async (request, reply) => await migrateAppwriteDB(request, reply));
 };
 
 export default root;

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

@@ -1,7 +1,7 @@
 import axios from "axios";
 import cuid from "cuid";
 import crypto from "crypto";
-import { encrypt, errorHandler, getUIUrl, isDev, prisma } from "../../../lib/common";
+import { encrypt, errorHandler, getDomain, getUIUrl, isDev, prisma } from "../../../lib/common";
 import { checkContainer, removeContainer } from "../../../lib/docker";
 import { createdBranchDatabase, getApplicationFromDBWebhook, removeBranchDatabase } from "../../api/v1/applications/handlers";
 
@@ -154,7 +154,7 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
 
                     if (application.settings.previews) {
                         if (application.destinationDockerId) {
-                            const isRunning = await checkContainer(
+                            const { found: isRunning } = await checkContainer(
                                 {
                                     dockerId: application.destinationDocker.id,
                                     container: application.id
@@ -169,10 +169,29 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                             pullmergeRequestAction === 'reopened' ||
                             pullmergeRequestAction === 'synchronize'
                         ) {
+
                             await prisma.application.update({
                                 where: { id: application.id },
                                 data: { updatedAt: new Date() }
                             });
+                            let previewApplicationId = undefined
+                            if (pullmergeRequestId) {
+                                const foundPreviewApplications = await prisma.previewApplication.findMany({ where: { applicationId: application.id, pullmergeRequestId } })
+                                if (foundPreviewApplications.length > 0) {
+                                    previewApplicationId = foundPreviewApplications[0].id
+                                } else {
+                                    const protocol = application.fqdn.includes('https://') ? 'https://' : 'http://'
+                                    const previewApplication = await prisma.previewApplication.create({
+                                        data: {
+                                            pullmergeRequestId,
+                                            sourceBranch,
+                                            customDomain: `${protocol}${pullmergeRequestId}.${getDomain(application.fqdn)}`,
+                                            application: { connect: { id: application.id } }
+                                        }
+                                    })
+                                    previewApplicationId = previewApplication.id
+                                }
+                            }
                             // if (application.connectedDatabase && pullmergeRequestAction === 'opened' || pullmergeRequestAction === 'reopened') {
                             //     // Coolify hosted database
                             //     if (application.connectedDatabase.databaseId) {
@@ -187,6 +206,7 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                                 data: {
                                     id: buildId,
                                     pullmergeRequestId,
+                                    previewApplicationId,
                                     sourceBranch,
                                     applicationId: application.id,
                                     destinationDockerId: application.destinationDocker.id,
@@ -198,7 +218,9 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                                 }
                             });
 
-
+                            return {
+                                message: 'Queued. Thank you!'
+                            };
                         } else if (pullmergeRequestAction === 'closed') {
                             if (application.destinationDockerId) {
                                 const id = `${application.id}-${pullmergeRequestId}`;
@@ -206,13 +228,22 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
                                     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);
+                            const foundPreviewApplications = await prisma.previewApplication.findMany({ where: { applicationId: application.id, pullmergeRequestId } })
+                            if (foundPreviewApplications.length > 0) {
+                                for (const preview of foundPreviewApplications) {
+                                    await prisma.previewApplication.delete({ where: { id: preview.id } })
                                 }
                             }
+                            return {
+                                message: 'PR closed. Thank you!'
+                            };
+                            // if (application?.connectedDatabase?.databaseId) {
+                            //     const databaseId = application.connectedDatabase.databaseId;
+                            //     const database = await prisma.database.findUnique({ where: { id: databaseId } });
+                            //     if (database) {
+                            //         await removeBranchDatabase(database, pullmergeRequestId);
+                            //     }
+                            // }
                         }
                     }
                 }

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

@@ -2,7 +2,7 @@ import axios from "axios";
 import cuid from "cuid";
 import crypto from "crypto";
 import type { FastifyReply, FastifyRequest } from "fastify";
-import { errorHandler, getAPIUrl, getUIUrl, isDev, listSettings, prisma } from "../../../lib/common";
+import { errorHandler, getAPIUrl, getDomain, getUIUrl, isDev, listSettings, prisma } from "../../../lib/common";
 import { checkContainer, removeContainer } from "../../../lib/docker";
 import { getApplicationFromDB, getApplicationFromDBWebhook } from "../../api/v1/applications/handlers";
 
@@ -91,8 +91,8 @@ export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
                 }
             }
         } 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
-
+            const { object_attributes: { work_in_progress: isDraft, action, source_branch: sourceBranch, target_branch: targetBranch }, project: { id } } = request.body
+            const pullmergeRequestId = request.body.object_attributes.iid.toString();
             const projectId = Number(id);
             if (!allowedActions.includes(action)) {
                 throw { status: 500, message: 'Action not allowed.' }
@@ -107,7 +107,7 @@ export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
                     const buildId = cuid();
                     if (application.settings.previews) {
                         if (application.destinationDockerId) {
-                            const isRunning = await checkContainer(
+                            const { found: isRunning } = await checkContainer(
                                 {
                                     dockerId: application.destinationDocker.id,
                                     container: application.id
@@ -130,10 +130,29 @@ export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
                                 where: { id: application.id },
                                 data: { updatedAt: new Date() }
                             });
+                            let previewApplicationId = undefined
+                            if (pullmergeRequestId) {
+                                const foundPreviewApplications = await prisma.previewApplication.findMany({ where: { applicationId: application.id, pullmergeRequestId } })
+                                if (foundPreviewApplications.length > 0) {
+                                    previewApplicationId = foundPreviewApplications[0].id
+                                } else {
+                                    const protocol = application.fqdn.includes('https://') ? 'https://' : 'http://'
+                                    const previewApplication = await prisma.previewApplication.create({
+                                        data: {
+                                            pullmergeRequestId,
+                                            sourceBranch,
+                                            customDomain: `${protocol}${pullmergeRequestId}.${getDomain(application.fqdn)}`,
+                                            application: { connect: { id: application.id } }
+                                        }
+                                    })
+                                    previewApplicationId = previewApplication.id
+                                }
+                            }
                             await prisma.build.create({
                                 data: {
                                     id: buildId,
-                                    pullmergeRequestId: pullmergeRequestId.toString(),
+                                    pullmergeRequestId,
+                                    previewApplicationId,
                                     sourceBranch,
                                     applicationId: application.id,
                                     destinationDockerId: application.destinationDocker.id,
@@ -150,8 +169,19 @@ export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
                         } else if (action === 'close') {
                             if (application.destinationDockerId) {
                                 const id = `${application.id}-${pullmergeRequestId}`;
-                                await removeContainer({ id, dockerId: application.destinationDocker.id });
+                                try {
+                                    await removeContainer({ id, dockerId: application.destinationDocker.id });
+                                } catch (error) { }
                             }
+                            const foundPreviewApplications = await prisma.previewApplication.findMany({ where: { applicationId: application.id, pullmergeRequestId } })
+                            if (foundPreviewApplications.length > 0) {
+                                for (const preview of foundPreviewApplications) {
+                                    await prisma.previewApplication.delete({ where: { id: preview.id } })
+                                }
+                            }
+                            return {
+                                message: 'MR closed. Thank you!'
+                            };
 
                         }
                     }

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

@@ -12,7 +12,7 @@ function configureMiddleware(
 	if (isHttps) {
 		traefik.http.routers[id] = {
 			entrypoints: ['web'],
-			rule: `Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)`,
+			rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/\`)`,
 			service: `${id}`,
 			middlewares: ['redirect-to-https']
 		};
@@ -53,7 +53,7 @@ function configureMiddleware(
 		if (isDualCerts) {
 			traefik.http.routers[`${id}-secure`] = {
 				entrypoints: ['websecure'],
-				rule: `Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)`,
+				rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/\`)`,
 				service: `${id}`,
 				tls: {
 					certresolver: 'letsencrypt'
@@ -64,7 +64,7 @@ function configureMiddleware(
 			if (isWWW) {
 				traefik.http.routers[`${id}-secure-www`] = {
 					entrypoints: ['websecure'],
-					rule: `Host(\`www.${nakedDomain}\`)`,
+					rule: `Host(\`www.${nakedDomain}\`) && PathPrefix(\`/\`)`,
 					service: `${id}`,
 					tls: {
 						certresolver: 'letsencrypt'
@@ -73,7 +73,7 @@ function configureMiddleware(
 				};
 				traefik.http.routers[`${id}-secure`] = {
 					entrypoints: ['websecure'],
-					rule: `Host(\`${nakedDomain}\`)`,
+					rule: `Host(\`${nakedDomain}\`) && PathPrefix(\`/\`)`,
 					service: `${id}`,
 					tls: {
 						domains: {
@@ -86,7 +86,7 @@ function configureMiddleware(
 			} else {
 				traefik.http.routers[`${id}-secure-www`] = {
 					entrypoints: ['websecure'],
-					rule: `Host(\`www.${nakedDomain}\`)`,
+					rule: `Host(\`www.${nakedDomain}\`) && PathPrefix(\`/\`)`,
 					service: `${id}`,
 					tls: {
 						domains: {
@@ -97,7 +97,7 @@ function configureMiddleware(
 				};
 				traefik.http.routers[`${id}-secure`] = {
 					entrypoints: ['websecure'],
-					rule: `Host(\`${domain}\`)`,
+					rule: `Host(\`${domain}\`) && PathPrefix(\`/\`)`,
 					service: `${id}`,
 					tls: {
 						certresolver: 'letsencrypt'
@@ -110,14 +110,14 @@ function configureMiddleware(
 	} else {
 		traefik.http.routers[id] = {
 			entrypoints: ['web'],
-			rule: `Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)`,
+			rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/\`)`,
 			service: `${id}`,
 			middlewares: []
 		};
 
 		traefik.http.routers[`${id}-secure`] = {
 			entrypoints: ['websecure'],
-			rule: `Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)`,
+			rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/\`)`,
 			service: `${id}`,
 			tls: {
 				domains: {

apps/ui/package.json

@@ -42,6 +42,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"dayjs": "1.11.5",
 		"@sveltejs/adapter-static": "1.0.0-next.39",
 		"@tailwindcss/typography": "^0.5.7",
 		"cuid": "2.1.8",

apps/ui/src/lib/api.ts

@@ -3,33 +3,35 @@ import Cookies from 'js-cookie';
 
 export function getAPIUrl() {
 	if (GITPOD_WORKSPACE_URL) {
-		const { href } = new URL(GITPOD_WORKSPACE_URL)
-		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
-		return newURL
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
+		return newURL;
 	}
 	if (CODESANDBOX_HOST) {
-		     return `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
+		return `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
 	}
-	return dev ? 'http://localhost:3001' : 'http://localhost:3000';
+	return dev
+		? 'http://localhost:3001'
+		: 'http://localhost:3000';
 }
 export function getWebhookUrl(type: string) {
 	if (GITPOD_WORKSPACE_URL) {
-		const { href } = new URL(GITPOD_WORKSPACE_URL)
-		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
 		if (type === 'github') {
-			return `${newURL}/webhooks/github/events`
+			return `${newURL}/webhooks/github/events`;
 		}
 		if (type === 'gitlab') {
-			return `${newURL}/webhooks/gitlab/events`
+			return `${newURL}/webhooks/gitlab/events`;
 		}
 	}
 	if (CODESANDBOX_HOST) {
-		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
+		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
 		if (type === 'github') {
-			return `${newURL}/webhooks/github/events`
+			return `${newURL}/webhooks/github/events`;
 		}
 		if (type === 'gitlab') {
-			return `${newURL}/webhooks/gitlab/events`
+			return `${newURL}/webhooks/gitlab/events`;
 		}
 	}
 	return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`;
@@ -103,7 +105,11 @@ async function send({
 		return {};
 	}
 	if (!response.ok) {
-		if (response.status === 401 && !path.startsWith('https://api.github') && !path.includes('/v4/user')) {
+		if (
+			response.status === 401 &&
+			!path.startsWith('https://api.github') &&
+			!path.includes('/v4/user')
+		) {
 			Cookies.remove('token');
 		}
 

apps/ui/src/lib/common.ts

@@ -83,4 +83,8 @@ export function handlerNotFoundLoad(error: any, url: URL) {
 		status: 500,
 		error: new Error(`Could not load ${url}`)
 	};
+}
+
+export function getRndInteger(min: number, max: number) {
+	return Math.floor(Math.random() * (max - min + 1)) + min;
 }

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

@@ -13,8 +13,9 @@
 	export let id: string;
 	export let name: string;
 	export let placeholder = '';
+	export let inputStyle = '';
 
-	let disabledClass = 'bg-coolback disabled:bg-coolblack';
+	let disabledClass = 'bg-coolback disabled:bg-coolblack w-full';
 	let isHttps = browser && window.location.protocol === 'https:';
 
 	function copyToClipboard() {
@@ -32,6 +33,7 @@
 	{#if !isPasswordField || showPassword}
 		{#if textarea}
 			<textarea
+				style={inputStyle}
 				rows="5"
 				class={disabledClass}
 				class:pr-10={true}
@@ -47,6 +49,7 @@
 			>
 		{:else}
 			<input
+				style={inputStyle}
 				class={disabledClass}
 				type="text"
 				class:pr-10={true}
@@ -63,6 +66,7 @@
 		{/if}
 	{:else}
 		<input
+			style={inputStyle}
 			class={disabledClass}
 			class:pr-10={true}
 			class:pr-20={value && isHttps}

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

@@ -10,23 +10,10 @@
 			.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 {id} href={url} target="_blank" class="icons inline-block cursor-pointer text-xs mx-2">
+	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+	  </svg>
+	  
 </a>
 <Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>

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

@@ -1,26 +1,38 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	// import { onMount } from 'svelte';
 
-	import Tooltip from './Tooltip.svelte';
+	// import Tooltip from './Tooltip.svelte';
 	export let explanation = '';
-	let id: any;
-	let self: any;
-	onMount(() => {
-		id = `info-${self.offsetLeft}-${self.offsetTop}`;
-	});
+	export let position = 'dropdown-right'
+	// let id: any;
+	// let self: any;
+	// onMount(() => {
+	// 	id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	// });
 </script>
 
-<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
+<div class={`dropdown dropdown-end ${position}`}>
+	<label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-sky-500">
+	  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+	</label>
+	<div tabindex="0" class="card compact dropdown-content shadow bg-coolgray-400 rounded w-64">
+	  <div class="card-body">
+		<!-- <h2 class="card-title">You needed more info?</h2>  -->
+		<p class="text-xs font-normal">{@html explanation}</p>
+	  </div>
+	</div>
+  </div>
+<!-- <div {id} class="inline-block mx-2 cursor-pointer" bind:this={self}>
 	<svg
 		fill="none"
-		height="18"
+		height="14"
 		shape-rendering="geometricPrecision"
 		stroke="currentColor"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		stroke-width="1.5"
+		stroke-width="1.4"
 		viewBox="0 0 24 24"
-		width="18"
+		width="14"
 		><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" />
@@ -28,4 +40,4 @@
 </div>
 {#if id}
 	<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
-{/if}
+{/if} -->

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

@@ -15,9 +15,13 @@
 
 <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}<Explaner explanation={description} />
-		</div>
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label>
+			{title}
+			{#if description && description !== ''}
+				<Explaner explanation={description} />
+			{/if}
+		</label>
 	</div>
 </div>
 <div class:text-center={isCenter} class="flex justify-center">

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

@@ -2,6 +2,11 @@
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	export let type = 'info';
+	function success() {
+		if (type === 'success') {
+			return 'bg-gradient-to-r from-purple-500 via-pink-500 to-red-500';
+		}
+	}
 </script>
 
 <div
@@ -10,8 +15,7 @@
 	on:focus={() => dispatch('pause')}
 	on:mouseout={() => dispatch('resume')}
 	on:blur={() => dispatch('resume')}
-	class="alert shadow-lg text-white rounded hover:scale-105 transition-all duration-100 cursor-pointer"
-	class:bg-coollabs={type === 'success'}
+	class={`flex flex-row alert shadow-lg text-white hover:scale-105 transition-all duration-100 cursor-pointer rounded ${success()}`}
 	class:alert-error={type === 'error'}
 	class:alert-info={type === 'info'}
 >

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import Toast from './Toast.svelte';
 
 	import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store';
@@ -7,9 +6,9 @@
 
 {#if $toasts}
 	<section>
-		<article class="toast toast-top toast-end rounded-none" role="alert" transition:fade>
+		<article class="toast toast-top toast-end rounded-none px-10" role="alert" >
 			{#each $toasts as toast (toast.id)}
-				<Toast
+				<Toast	
 					type={toast.type}
 					on:resume={() => resumeToast(toast.id)}
 					on:pause={() => pauseToast(toast.id)}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Tooltip } from 'flowbite-svelte';
 	export let placement = 'bottom';
-	export let color = 'bg-coollabs text-left';
+	export let color = 'bg-coollabs font-thin text-left';
 	export let triggeredBy = '#tooltip-default';
 </script>
 

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

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { dev } from '$app/env';
 	import { get, post } from '$lib/api';
-	import { addToast, appSession, features } from '$lib/store';
+	import { addToast, appSession, features, updateLoading, isUpdateAvailable } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
 	import Tooltip from './Tooltip.svelte';
 
-	let isUpdateAvailable = false;
 	let updateStatus: any = {
 		found: false,
 		loading: false,
@@ -58,37 +57,41 @@
 		if ($appSession.userId) {
 			const overrideVersion = $features.latestVersion;
 			if ($appSession.teamId === '0') {
+				if ($updateLoading === true) return;
 				try {
+					$updateLoading = true;
 					const data = await get(`/update`);
 					if (overrideVersion || data?.isUpdateAvailable) {
 						latestVersion = overrideVersion || data.latestVersion;
 						if (overrideVersion) {
-							isUpdateAvailable = true;
+							$isUpdateAvailable = true;
 						} else {
-							isUpdateAvailable = data.isUpdateAvailable;
+							$isUpdateAvailable = data.isUpdateAvailable;
 						}
 					}
 				} catch (error) {
 					return errorNotification(error);
+				} finally {
+					$updateLoading = false;
 				}
 			}
 		}
 	});
 </script>
 
-<div class="py-2">
+<div class="py-0 lg:py-2">
 	{#if $appSession.teamId === '0'}
-		{#if isUpdateAvailable}
+		{#if $isUpdateAvailable}
 			<button
 				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
+				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105  w-full"
 			>
 				{#if updateStatus.loading}
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="lds-heart h-9 w-8"
+						class="lds-heart h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -102,24 +105,27 @@
 						/>
 					</svg>
 				{:else if updateStatus.success === null}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-9 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="12" cy="12" r="9" />
-						<line x1="12" y1="8" x2="8" y2="12" />
-						<line x1="12" y1="8" x2="12" y2="16" />
-						<line x1="16" y1="12" x2="12" y2="8" />
-					</svg>
+					<div class="flex items-center justify-center space-x-2">
+						<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="12" cy="12" r="9" />
+							<line x1="12" y1="8" x2="8" y2="12" />
+							<line x1="12" y1="8" x2="12" y2="16" />
+							<line x1="16" y1="12" x2="12" y2="8" />
+						</svg>
+						<span class="flex lg:hidden">Update available</span>
+					</div>
 				{:else if updateStatus.success}
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-8 w-8"
 						><path
 							fill="#DD2E44"
 							d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
@@ -184,7 +190,9 @@
 					>
 				{/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>
+			<Tooltip triggeredBy="#update" placement="right" color="bg-coolgray-200 text-white"
+				>New Version Available!</Tooltip
+			>
 		{/if}
 	{/if}
 </div>

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

@@ -79,12 +79,12 @@
 			BETA
 		</div>
 	{/if}
-	<div class="w-full flex flex-row space-x-4">
+	<div class="w-full flex flex-col lg:flex-row space-y-4 lg:space-y-0 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 ">
+			<div class="text-xs">
 				{#if server?.remoteIpAddress}
 					<h2>{server?.remoteIpAddress}</h2>
 				{:else}
@@ -94,9 +94,11 @@
 		</div>
 		{#if $appSession.teamId === '0'}
 			<button
+				disabled={loading.cleanup}
 				on:click={manuallyCleanupStorage}
 				class:loading={loading.cleanup}
-				class="btn btn-sm bg-coollabs">Cleanup Storage</button
+				class:bg-coollabs={!loading.cleanup}
+				class="btn btn-sm">Cleanup Storage</button
 			>
 		{/if}
 	</div>
@@ -108,21 +110,21 @@
 		<div class="stats stats-vertical min-w-[16rem] mb-5 rounded bg-transparent">
 			<div class="stat">
 				<div class="stat-title">Total Memory</div>
-				<div class="stat-value text-2xl">
+				<div class="stat-value text-2xl text-white">
 					{(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">
+				<div class="stat-value text-2xl text-white">
 					{(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">
+				<div class="stat-value text-2xl text-white">
 					{(usage?.memory?.freeMemPercentage).toFixed(0)}<span class="text-sm">%</span>
 				</div>
 			</div>
@@ -131,41 +133,41 @@
 		<div class="stats stats-vertical min-w-[20rem] mb-5 bg-transparent rounded">
 			<div class="stat">
 				<div class="stat-title">Total CPU</div>
-				<div class="stat-value text-2xl">
+				<div class="stat-value text-2xl text-white">
 					{usage?.cpu?.count}
 				</div>
 			</div>
 
 			<div class="stat">
 				<div class="stat-title">CPU Usage</div>
-				<div class="stat-value text-2xl">
+				<div class="stat-value text-2xl text-white">
 					{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 text-white">{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">
+				<div class="stat-value text-2xl text-white">
 					{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">
+				<div class="stat-value text-2xl text-white">
 					{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">
+				<div class="stat-value text-2xl text-white">
 					{usage?.disk?.freePercentage}<span class="text-sm">%</span>
 				</div>
 			</div>

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

@@ -9,15 +9,8 @@
 	viewBox="0 0 309.88 252.72"
 	class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12 ' : 'mx-auto w-8 h-8'}
 >
-	<defs>
-		<style>
-			.cls-1 {
-				fill: #fff;
-			}
-		</style>
-	</defs>
 	<path
-		class="cls-1"
+		fill="#fff"
 		d="M316,10.05a4.2,4.2,0,0,0-2.84-1c-2.84,0-6.5,1.92-8.46,3l-.79.4a26.81,26.81,0,0,1-10.57,2.66c-3.76.12-7,.34-11.22.77-25,2.58-36.15,21.74-46.89,40.27-5.84,10.08-11.88,20.5-20.16,28.57a55.71,55.71,0,0,1-5.46,4.63c-8.57,6.39-19.33,10.9-27.74,14.12-8.07,3.08-16.86,5.85-25.37,8.53-7.78,2.45-15.14,4.76-21.9,7.28-3.05,1.13-5.64,2-7.93,2.76-6.15,2-10.6,3.53-17.08,8-2.53,1.73-5.07,3.6-6.8,5a71.26,71.26,0,0,0-13.54,14.27A84.81,84.81,0,0,1,77.88,163c-1.36,1.34-3.8,2-7.43,2-4.27,0-9.43-.88-14.91-1.81s-11.46-2-16.46-2c-4.07,0-7.17.66-9.5,2,0,0-3.9,2.28-5.56,5.23l1.62.73a33.56,33.56,0,0,1,6.93,5,33.68,33.68,0,0,0,7.19,5.12A6.37,6.37,0,0,1,42,180.72c-.69,1-1.69,2.29-2.74,3.67-5.77,7.55-9.13,12.32-7.2,14.92a6,6,0,0,0,3,.68c12.59,0,19.34-3.27,27.9-7.41,2.47-1.2,5-2.44,8-3.7,5-2.17,10.38-5.63,16.08-9.29,7.55-4.85,15.36-9.87,22.92-12.3a62.3,62.3,0,0,1,19.23-2.7c8,0,16.42,1.07,24.54,2.11,6.06.78,12.32,1.58,18.47,2,2.39.14,4.6.21,6.76.21a78.48,78.48,0,0,0,8.61-.45l.68-.24c4.32-2.65,6.34-8.34,8.29-13.84,1.26-3.54,2.32-6.72,4-8.74a2.06,2.06,0,0,1,.33-.27.4.4,0,0,1,.49.08.25.25,0,0,1,0,.16c-1,21.51-9.67,35.16-18.42,47.3L177,199.14s8.18,0,12.84-1.8c17-5.08,29.84-16.28,39.18-34.14a144.39,144.39,0,0,0,6.16-14.09c.16-.4,1.64-1.14,1.49.93,0,.61-.08,1.29-.13,2h0c0,.42-.06.85-.08,1.28-.25,3-1,9.34-1,9.34l5.25-2.81c12.66-8,22.42-24.14,29.82-49.25,3.09-10.46,5.34-20.85,7.33-30,2.38-11,4.43-20.43,6.78-24.09,3.69-5.74,9.32-9.62,14.77-13.39.75-.51,1.49-1,2.22-1.54,6.86-4.81,13.67-10.36,15.16-20.71l0-.23C317.93,12.92,317,11,316,10.05Z"
 		transform="translate(-7.45 -9.1)"
 	/>

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

@@ -5,7 +5,7 @@
 <svg
 	viewBox="0 0 700 240"
 	xmlns="http://www.w3.org/2000/svg"
-	class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-28 h-28 mx-auto'}
+	class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-full h-10 mx-auto'}
 	><path fill="#FDBC3D" d="m90.694 107.498-.981.39-20.608 8.23 6.332 6.547z" /><path
 		fill="#8EC63F"
 		d="M61.139 77.914 46.632 93 56.9 103.547c8.649-7.169 17.832-10.502 18.653-10.789L61.139 77.914z"

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

@@ -4,7 +4,7 @@
 
 <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'}
+	class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-10 h-10 mx-auto'}
 	version="1.1"
 	viewBox="0 0 300 300"
 	><linearGradient

apps/ui/src/lib/dayjs.ts

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+dayjs.extend(utc);
+dayjs.extend(relativeTime);
+
+export { dayjs as day };

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

@@ -88,7 +88,7 @@
 		"removing": "Removing...",
 		"remove_domain": "Remove domain",
 		"public_port_range": "Public Port Range",
-		"public_port_range_explainer": "Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-settings font-bold'>9000-9100</span>",
+		"public_port_range_explainer": "Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-settings '>9000-9100</span>",
 		"no_actions_available": "No actions available",
 		"admin_api_key": "Admin API key"
 	},
@@ -144,8 +144,8 @@
 		},
 		"preview": {
 			"need_during_buildtime": "Need during buildtime?",
-			"setup_secret_app_first": "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.",
-			"values_overwriting_app_secrets": "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-green-500 font-bold'>staging</span> environments.",
+			"setup_secret_app_first": "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-settings '>staging</span> environments.",
+			"values_overwriting_app_secrets": "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-settings '>staging</span> environments.",
 			"redeploy": "Redeploy",
 			"no_previews_available": "No previews available"
 		},
@@ -159,7 +159,7 @@
 			"storage_saved": "Storage saved.",
 			"storage_updated": "Storage updated.",
 			"storage_deleted": "Storage deleted.",
-			"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-green-500 font-bold'>/example</span> means it will preserve <span class='text-green-500 font-bold'>/app/example</span> in the container as <span class='text-green-500 font-bold'>/app</span> is <span class='text-green-500 font-bold'>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-green-500 font-bold'>database (SQLite)</span> or a <span class='text-green-500 font-bold'>cache</span>."
+			"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-settings '>/example</span> means it will preserve <span class='text-settings '>/app/example</span> in the container as <span class='text-settings '>/app</span> is <span class='text-settings '>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-settings '>database (SQLite)</span> or a <span class='text-settings '>cache</span>."
 		},
 		"deployment_queued": "Deployment queued.",
 		"confirm_to_delete": "Are you sure you would like to delete '{{name}}'?",
@@ -194,14 +194,14 @@
 		"application": "Application",
 		"url_fqdn": "URL (FQDN)",
 		"domain_fqdn": "Domain (FQDN)",
-		"https_explainer": "If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 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-white font-bold'>You must set your DNS to point to the server IP in advance.</span>",
+		"https_explainer": "If you specify <span class='text-settings '>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings '>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-white '>You must set your DNS to point to the server IP in advance.</span>",
 		"ssl_www_and_non_www": "Generate SSL for www and non-www?",
-		"ssl_explainer": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-green-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both.",
+		"ssl_explainer": "It will generate certificates for both www and non-www. <br>You need to have <span class=' text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both.",
 		"install_command": "Install Command",
 		"build_command": "Build Command",
 		"start_command": "Start Command",
-		"directory_to_use_explainer": "Directory to use as the base for all commands.<br>Could be useful with <span class='text-green-500 font-bold'>monorepos</span>.",
-		"publish_directory_explainer": "Directory containing all the assets for deployment. <br> For example: <span class='text-green-500 font-bold'>dist</span>,<span class='text-green-500 font-bold'>_site</span> or <span class='text-green-500 font-bold'>public</span>.",
+		"directory_to_use_explainer": "Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings '>monorepos</span>.",
+		"publish_directory_explainer": "Directory containing all the assets for deployment. <br> For example: <span class='text-settings '>dist</span>,<span class='text-settings '>_site</span> or <span class='text-settings '>public</span>.",
 		"features": "Features",
 		"enable_automatic_deployment": "Enable Automatic Deployment",
 		"enable_auto_deploy_webhooks": "Enable automatic deployment through webhooks.",
@@ -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-settings 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 '>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",
@@ -223,7 +223,7 @@
 		"set_public": "Set it public",
 		"warning_database_public": "Your database will be reachable over the internet. <br>Take security seriously in this case!",
 		"change_append_only_mode": "Change append only mode",
-		"warning_append_only": "Useful if you would like to restore redis data from a backup.<br><span class='font-bold text-white'>Database restart is required.</span>",
+		"warning_append_only": "Useful if you would like to restore redis data from a backup.<br><span class=' text-white'>Database restart is required.</span>",
 		"select_database_type": "Select a Database type",
 		"select_database_version": "Select a Database version",
 		"confirm_stop": "Are you sure you would like to stop {{name}}?",
@@ -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-settings' >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=' 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)",
@@ -290,7 +290,7 @@
 	},
 	"services": {
 		"all_email_verified": "All emails are verified. You can login now.",
-		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
+		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='text-settings'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
 	},
 	"service": {
 		"stop_service": "Stop",
@@ -306,15 +306,15 @@
 		"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 break webhooks and other integrations! You need to manually update them.",
+		"ssl_explainer": "If you specify <span class='text-settings'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings '>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings '>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.",
 		"coolify_proxy_settings": "Coolify Proxy Settings",
-		"credential_stat_explainer": "Credentials for <a class=\"text-white font-bold\" href=\"{{link}}\" target=\"_blank\">stats</a> page.",
+		"credential_stat_explainer": "Credentials for <a class=\"text-white \" href=\"{{link}}\" target=\"_blank\">stats</a> page.",
 		"auto_update_enabled": "Auto update enabled?",
 		"auto_update_enabled_explainer": "Enable automatic updates for Coolify. It will be done automatically behind the scenes, if there is no build process running.",
-		"generate_www_non_www_ssl": "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.",
+		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class=' text-settings'>both DNS entries</span> set in advance.",
 		"is_dns_check_enabled": "DNS check enabled?",
 		"is_dns_check_enabled_explainer": "You can disable DNS check before creating SSL certificates.<br><br>Turning it off is useful when Coolify is behind a reverse proxy or tunnel."
 	},
@@ -324,9 +324,9 @@
 		"delete": "Delete",
 		"member": "member(s)",
 		"root": "(root)",
-		"invited_with_permissions": "Invited to <span class=\"font-bold text-pink-600\">{{teamName}}</span> with <span class=\"font-bold text-rose-600\">{{permission}}</span> permission.",
+		"invited_with_permissions": "Invited to <span class=\" text-settings\">{{teamName}}</span> with <span class=\" text-rose-600\">{{permission}}</span> permission.",
 		"members": "Members",
-		"root_team_explainer": "This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux).",
+		"root_team_explainer": "This is the <span class='text-red-500 '>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux).",
 		"permission": "Permission",
 		"you": "(You)",
 		"promote_to": "Promote to {{grade}}",

apps/ui/src/lib/store.ts

@@ -26,7 +26,8 @@ interface AddToast {
     message: string,
     timeout?: number | undefined
 }
-
+export const updateLoading: Writable<boolean> = writable(false);
+export const isUpdateAvailable: Writable<boolean> = writable(false);
 export const search: any = writable('')
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
@@ -73,6 +74,7 @@ export const status: Writable<any> = writable({
     application: {
         isRunning: false,
         isExited: false,
+        isRestarting: false,
         loading: false,
         initialLoading: true
     },
@@ -155,4 +157,6 @@ export const addToast = (toast: AddToast) => {
     let t: any = { ...defaults, ...toast }
     if (t.timeout) t.timeoutInterval = setTimeout(() => dismissToast(id), t.timeout)
     toasts.update((all: any) => [t, ...all])
-}
+}
+
+export const selectedBuildId: any = writable(null)

apps/ui/src/routes/_NewResource.svelte

@@ -16,7 +16,7 @@
 	}
 </script>
 
-<div class="dropdown dropdown-hover">
+<div class="dropdown dropdown-bottom">
 	<slot>
 		<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
 			<svg

apps/ui/src/routes/__layout.svelte

@@ -107,10 +107,11 @@
 </script>
 
 <svelte:head>
-	<title>Coolify</title>
 	{#if !$appSession.whiteLabeled}
+		<title>Coolify</title>
 		<link rel="icon" href="/favicon.png" />
 	{:else if $appSession.whiteLabeledDetails.icon}
+		<title>Coolify</title>
 		<link rel="icon" href={$appSession.whiteLabeledDetails.icon} />
 	{/if}
 </svelte:head>
@@ -120,31 +121,208 @@
 		<PageLoader />
 	</div>
 {/if}
-{#if $appSession.userId}
-	<nav class="nav-main">
-		<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
-			{#if !$appSession.whiteLabeled}
-				<div class="mb-2 mt-4 h-10 w-10">
-					<img src="/favicon.png" alt="coolLabs logo" />
-				</div>
-			{:else if $appSession.whiteLabeledDetails.icon}
-				<div class="mb-2 mt-4 h-10 w-10">
-					<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
+<div class="drawer">
+	<input id="main-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-content">
+		{#if $appSession.userId}
+			<nav class="nav-main hidden lg:block z-20">
+				<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
+					{#if !$appSession.whiteLabeled}
+						<div class="mb-2 mt-4 h-10 w-10">
+							<img src="/favicon.png" alt="coolLabs logo" />
+						</div>
+					{:else if $appSession.whiteLabeledDetails.icon}
+						<div class="mb-2 mt-4 h-10 w-10">
+							<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
+						</div>
+					{/if}
+					<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
+						<a
+							id="dashboard"
+							sveltekit:prefetch
+							href="/"
+							class="icons hover:text-pink-500"
+							class:text-pink-500={$page.url.pathname === '/'}
+							class:bg-coolgray-500={$page.url.pathname === '/'}
+							class:bg-coolgray-200={!($page.url.pathname === '/')}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-9 w-9"
+								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="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"
+								/>
+								<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
+							</svg>
+						</a>
+						{#if $appSession.teamId === '0'}
+							<a
+								id="servers"
+								sveltekit:prefetch
+								href="/servers"
+								class="icons hover:text-sky-500"
+								class:text-sky-500={$page.url.pathname === '/servers'}
+								class:bg-coolgray-500={$page.url.pathname === '/servers'}
+								class:bg-coolgray-200={!($page.url.pathname === '/servers')}
+							>
+								<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" />
+					<div class="lg:block hidden">
+						<UpdateAvailable />
+					</div>
+					<div class="flex flex-col space-y-2 py-2">
+						<a
+							id="iam"
+							sveltekit:prefetch
+							href="/iam"
+							class="icons hover:text-iam"
+							class:text-iam={$page.url.pathname.startsWith('/iam')}
+							class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
+							><svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								class="h-9 w-9"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<circle cx="9" cy="7" r="4" />
+								<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+								<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+								<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
+							</svg>
+						</a>
+						<a
+							id="settings"
+							sveltekit:prefetch
+							href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
+							class="icons hover:text-settings"
+							class:text-settings={$page.url.pathname.startsWith('/settings')}
+							class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								class="h-9 w-9"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<path
+									d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+								/>
+								<circle cx="12" cy="12" r="3" />
+							</svg>
+						</a>
+
+						<div
+							id="logout"
+							class="icons bg-coolgray-200 hover:text-error cursor-pointer"
+							on:click={logout}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="ml-1 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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
+								/>
+								<path d="M7 12h14l-3 -3m0 6l3 -3" />
+							</svg>
+						</div>
+						<div
+							class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
+						>
+							<a
+								class="text-[10px] no-underline"
+								href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
+								target="_blank">v{$appSession.version}</a
+							>
+						</div>
+					</div>
 				</div>
+			</nav>
+			{#if $appSession.whiteLabeled}
+				<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
+					>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
+				>
 			{/if}
-			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
+		{/if}
+		<div
+			class="navbar lg:hidden space-x-2 flex flex-row items-center bg-coollabs"
+			class:hidden={!$appSession.userId}
+		>
+			<label for="main-drawer" class="drawer-button btn btn-square btn-ghost flex-col">
+				<span class="burger bg-white" />
+				<span class="burger bg-white" />
+				<span class="burger bg-white" />
+			</label>
+			<div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3">
+				{#if !$appSession.whiteLabeled}
+					<h3 class="mb-0 text-white">Coolify</h3>
+				{/if}
+			</div>
+		</div>
+		<main>
+			<div class={$appSession.userId ? 'lg:pl-16' : null}>
+				<slot />
+			</div>
+		</main>
+	</div>
+	<div class="drawer-side">
+		<label for="main-drawer" class="drawer-overlay w-full" />
+		<ul class="menu bg-coolgray-300 w-60 p-2  space-y-3 pt-4 ">
+			<li>
 				<a
-					id="dashboard"
+					class="no-underline icons hover:text-white hover:bg-pink-500"
 					sveltekit:prefetch
 					href="/"
-					class="icons  hover:text-white"
-					class:text-white={$page.url.pathname === '/'}
-					class:bg-coolgray-500={$page.url.pathname === '/'}
-					class:bg-coolgray-200={!($page.url.pathname === '/')}
+					class:bg-pink-500={$page.url.pathname === '/'}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-9 w-9"
+						class="h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -158,54 +336,45 @@
 						/>
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
+					Dashboard
 				</a>
-				{#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')}
-					>
-						<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" />
+			</li>
 
-			<UpdateAvailable />
-			<div class="flex flex-col space-y-2 py-2">
+			<li>
 				<a
-					id="iam"
+					class="no-underline icons hover:text-white hover:bg-sky-500"
 					sveltekit:prefetch
+					href="/servers"
+					class:bg-sky-500={$page.url.pathname.startsWith('/servers')}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-8 h-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" />
+						<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>
+					Servers
+				</a>
+			</li>
+			<li>
+				<a
+					class="no-underline icons hover:text-white hover:bg-iam"
 					href="/iam"
-					class="icons bg-coolgray-200"
-					class:text-iam={$page.url.pathname.startsWith('/iam')}
-					class:bg-coolgray-500={$page.url.pathname === '/iam'}
-					class:bg-coolgray-200={!($page.url.pathname === '/iam')}
+					class:bg-iam={$page.url.pathname.startsWith('/iam')}
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="h-9 w-9"
+						class="h-8 w-8"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -218,20 +387,20 @@
 						<path d="M16 3.13a4 4 0 0 1 0 7.75" />
 						<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
 					</svg>
+					IAM
 				</a>
+			</li>
+			<li>
 				<a
-					id="settings"
-					sveltekit:prefetch
+					class="no-underline icons hover:text-black hover:bg-settings"
 					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
-					class="icons bg-coolgray-200"
-					class:text-settings={$page.url.pathname.startsWith('/settings')}
-					class:bg-coolgray-500={$page.url.pathname === '/settings'}
-					class:bg-coolgray-200={!($page.url.pathname === '/settings')}
+					class:bg-settings={$page.url.pathname.startsWith('/settings')}
+					class:text-black={$page.url.pathname.startsWith('/settings')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="h-9 w-9"
+						class="h-8 w-8"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -244,9 +413,15 @@
 						/>
 						<circle cx="12" cy="12" r="3" />
 					</svg>
+					Settings
 				</a>
-
-				<div id="logout" class="icons bg-coolgray-200 hover:text-error" on:click={logout}>
+			</li>
+			<li class="flex-1 bg-transparent" />
+			<div class="block lg:hidden">
+				<UpdateAvailable />
+			</div>
+			<li>
+				<div class="no-underline icons hover:bg-error" on:click={logout}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="ml-1 h-8 w-8"
@@ -263,32 +438,20 @@
 						/>
 						<path d="M7 12h14l-3 -3m0 6l3 -3" />
 					</svg>
+					<div class="-ml-1">Logout</div>
 				</div>
-				<div
-					class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
+			</li>
+			<li class="w-full">
+				<a
+					class="text-xs hover:bg-coolgray-200 no-underline hover:text-white text-right"
+					href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
+					target="_blank">v{$appSession.version}</a
 				>
-					<a
-						class="text-[10px] no-underline"
-						href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
-						target="_blank">v{$appSession.version}</a
-					>
-				</div>
-			</div>
-		</div>
-	</nav>
-	{#if $appSession.whiteLabeled}
-		<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
-			>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
-		>
-	{/if}
-{/if}
-<main>
-	<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
-		<slot />
+			</li>
+		</ul>
 	</div>
-</main>
+</div>
 
 <Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
-<Tooltip triggeredBy="#settings" placement="right" color="bg-settings  text-black">Settings</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

@@ -5,7 +5,6 @@
 	export let isNewSecret = false;
 	export let isPRMRSecret = false;
 	export let PRMRSecret: any = {};
-
 	if (isPRMRSecret) value = PRMRSecret.value;
 
 	import { page } from '$app/stores';
@@ -39,7 +38,15 @@
 
 	async function createSecret(isNew: any) {
 		try {
-			if (!name || !value) return;
+			if (isNew) {
+				if (!name || !value) return;
+			}
+			if (value === undefined && isPRMRSecret) {
+				return
+			}
+			if (value === '' && !isPRMRSecret) {
+				throw new Error('Value is required.')
+			}
 			await saveSecret({
 				isNew,
 				name,
@@ -93,6 +100,7 @@
 
 <td>
 	<input
+		style="min-width: 350px !important;"
 		id={isNewSecret ? 'secretName' : 'secretNameNew'}
 		bind:value={name}
 		required
@@ -108,8 +116,8 @@
 		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
 		isPasswordField={true}
 		bind:value
-		required
 		placeholder="J$#@UIO%HO#$U%H"
+		inputStyle="min-width: 350px; !important"
 	/>
 </td>
 <td class="text-center">
@@ -130,7 +138,7 @@
 			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="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"

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

@@ -67,7 +67,8 @@
 		setLocation,
 		addToast,
 		isDeploymentEnabled,
-		checkIfDeploymentEnabledApplications
+		checkIfDeploymentEnabledApplications,
+		selectedBuildId
 	} from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
@@ -89,13 +90,10 @@
 				message: $t('application.deployment_queued'),
 				type: 'success'
 			});
-			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
-				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
-			} else {
-				return await goto(`/applications/${id}/logs/build?buildId=${buildId}`, {
-					replaceState: true
-				});
-			}
+			$selectedBuildId = buildId;
+			return await goto(`/applications/${id}/logs/build?buildId=${buildId}`, {
+				replaceState: true
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -107,7 +105,7 @@
 			$status.application.initialLoading = true;
 			try {
 				await del(`/applications/${id}`, { id, force });
-				return await goto(`/`, { replaceState: true });
+				return await window.location.assign(`/`);
 			} catch (error) {
 				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
 					forceDelete = true;
@@ -154,6 +152,7 @@
 		const data = await get(`/applications/${id}/status`);
 		$status.application.isRunning = data.isRunning;
 		$status.application.isExited = data.isExited;
+		$status.application.isRestarting = data.isRestarting;
 		$status.application.loading = false;
 		$status.application.initialLoading = false;
 	}
@@ -162,6 +161,7 @@
 		$status.application.initialLoading = true;
 		$status.application.isRunning = false;
 		$status.application.isExited = false;
+		$status.application.isRestarting = false;
 		$status.application.loading = false;
 		$location = null;
 		$isDeploymentEnabled = false;
@@ -171,6 +171,7 @@
 		setLocation(application, settings);
 		$status.application.isRunning = false;
 		$status.application.isExited = false;
+		$status.application.isRestarting = false;
 		$status.application.loading = false;
 		if (
 			application.gitSourceId &&
@@ -187,140 +188,296 @@
 	});
 </script>
 
-<nav class="nav-side">
-	{#if $location}
-		<a
-			id="open"
-			href={$location}
-			target="_blank"
-			class="icons flex items-center bg-transparent text-sm"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-				<line x1="10" y1="14" x2="20" y2="4" />
-				<polyline points="15 4 20 4 20 9" />
-			</svg></a
-		>
-		<Tooltip triggeredBy="#open">Open</Tooltip>
-
-		<div class="border border-coolgray-500 h-8" />
-	{/if}
-
-	{#if $status.application.isExited}
-		<a
-			id="applicationerror"
-			href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
-			class="icons bg-transparent text-sm flex items-center text-error"
-			sveltekit:prefetch
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
+<nav class="header lg:flex-row flex-col-reverse">
+	<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
+		<div class="flex flex-col items-center justify-center">
+			<div class="title">
+				{#if $page.url.pathname === `/applications/${id}`}
+					Configurations
+				{:else if $page.url.pathname === `/applications/${id}/secrets`}
+					Secrets
+				{:else if $page.url.pathname === `/applications/${id}/storages`}
+					Persistent Storages
+				{:else if $page.url.pathname === `/applications/${id}/previews`}
+					Preview Deployments
+				{:else if $page.url.pathname === `/applications/${id}/logs`}
+					Application Logs
+				{:else if $page.url.pathname === `/applications/${id}/logs/build`}
+					Build Logs
+				{:else if $page.url.pathname === `/applications/${id}/configuration/source`}
+					Select a Git Source
+				{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
+					Select a Destination
+					{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
+					Select a Build Pack
+				{/if}
+			</div>
+		</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-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentcolor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
 			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path
-					d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-				/>
-				<line x1="12" y1="8" x2="12" y2="12" />
-				<line x1="12" y1="16" x2="12.01" y2="16" />
-			</svg>
-		</a>
-		<Tooltip triggeredBy="#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"
-		>
-			<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"
+				{#if application.gitSource?.type === 'gitlab'}
+					<svg viewBox="0 0 128 128" class="icons">
+						<path
+							fill="#FC6D26"
+							d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
+						/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
+							fill="#FC6D26"
+							d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
+						/><path
+							fill="#FCA326"
+							d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
+						/><path
+							fill="#E24329"
+							d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
+						/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
+							fill="#FCA326"
+							d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
+						/><path
+							fill="#E24329"
+							d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
+						/>
+					</svg>
+				{:else if application.gitSource?.type === 'github'}
+					<svg viewBox="0 0 128 128" class="icons">
+						<g fill="#ffffff"
+							><path
+								fill-rule="evenodd"
+								clip-rule="evenodd"
+								d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
+							/><path
+								d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
+							/></g
+						>
+					</svg>
+				{/if}
+			</a>
+			<Tooltip triggeredBy="#git">Open on Git</Tooltip>
+		{/if}
+	</div>
+	<div class="lg:block hidden flex-1" />
+	<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0 px-12 lg:px-0">
+		{#if $location}
+			<a id="open" href={$location} target="_blank" class="icons bg-transparent"
+				><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
 			>
-				<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"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<rect x="6" y="5" width="4" height="14" rx="1" />
-				<rect x="14" y="5" width="4" height="14" rx="1" />
-			</svg>
-		</button>
-		<Tooltip triggeredBy="#stop">Stop</Tooltip>
+			<Tooltip triggeredBy="#open">Open</Tooltip>
 
-		<button
-			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"
+			<div class="hidden lg:block border border-coolgray-500 h-8" />
+		{/if}
+		{#if $status.application.isExited || $status.application.isRestarting}
+			<a
+				id="applicationerror"
+				href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
+				class="icons bg-transparent text-sm text-error"
+				sveltekit:prefetch
 			>
-				<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)}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentcolor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
+					/>
+					<line x1="12" y1="8" x2="12" y2="12" />
+					<line x1="12" y1="16" x2="12.01" y2="16" />
+				</svg>
+			</a>
+			<Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip>
+		{/if}
+		{#if $status.application.initialLoading}
+			<button class="icons animate-spin bg-transparent 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
-				id="forceredeploy"
+				id="stop"
+				on:click={stopApplication}
 				type="submit"
 				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm flex items-center space-x-2"
+				class="icons bg-transparent text-error"
 			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<rect x="6" y="5" width="4" height="14" rx="1" />
+					<rect x="14" y="5" width="4" height="14" rx="1" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#stop">Stop</Tooltip>
+
+			<button
+				id="restart"
+				on:click={restartApplication}
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent"
+			>
+				<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"
+				>
+					<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-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="hidden lg:block 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"
@@ -333,256 +490,168 @@
 				>
 					<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)"
+						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"
 					/>
-				</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" />
+					<circle cx="12" cy="11" r="1" />
+					<line x1="12" y1="12" x2="12" y2="14.5" />
 				</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"
+		<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`}
 		>
-			<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"
+			<button
+				id="persistentstorages"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm"
 			>
-				<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"
+				<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`}
 			>
-				<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" />
+				<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="hidden lg:block 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="hidden lg:block 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 text-sm"
-		>
-			<DeleteIcon />
-		</button>
-		<Tooltip triggeredBy="#delete">Delete</Tooltip>
-	{/if}
+		{#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" placement="left">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 text-sm"
+			>
+				<DeleteIcon />
+			</button>
+			<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
+		{/if}
+	</div>
 </nav>
 <slot />

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

@@ -413,7 +413,7 @@
 			>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 		>
 		{#if tryAgain}
-			<div>
+			<div class="p-5">
 				An error occured during authenticating with GitLab. Please check your GitLab Source
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>

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

@@ -156,40 +156,40 @@
 	}
 </script>
 
-<div class="mx-auto max-w-5xl">
-	<div class="grid grid-flow-row gap-2 px-10">
-		<div class="flex">
-			<form class="flex" on:submit|preventDefault={loadBranches}>
-				<div class="space-y-4">
-					<input
-						placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
-						bind:value={publicRepositoryLink}
+<div class="mx-auto max-w-6xl">
+	<form
+		class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 justify-start"
+		on:submit|preventDefault={loadBranches}
+	>
+		<div class="space-y-2 w-full">
+			<input
+				class="w-full"
+				placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
+				bind:value={publicRepositoryLink}
+			/>
+			{#if branchSelectOptions.length > 0}
+				<div class="custom-select-wrapper">
+					<Select
+					class="w-full"
+						placeholder={loading.branches
+							? $t('application.configuration.loading_branches')
+							: !publicRepositoryLink
+							? $t('application.configuration.select_a_repository_first')
+							: $t('application.configuration.select_a_branch')}
+						isWaiting={loading.branches}
+						showIndicator={!!publicRepositoryLink && !loading.branches}
+						id="branches"
+						on:select={saveRepository}
+						items={branchSelectOptions}
+						isDisabled={loading.branches || !!!publicRepositoryLink}
+						isClearable={false}
 					/>
-					{#if branchSelectOptions.length > 0}
-						<div class="custom-select-wrapper">
-							<Select
-								placeholder={loading.branches
-									? $t('application.configuration.loading_branches')
-									: !publicRepositoryLink
-									? $t('application.configuration.select_a_repository_first')
-									: $t('application.configuration.select_a_branch')}
-								isWaiting={loading.branches}
-								showIndicator={!!publicRepositoryLink && !loading.branches}
-								id="branches"
-								on:select={saveRepository}
-								items={branchSelectOptions}
-								isDisabled={loading.branches || !!!publicRepositoryLink}
-								isClearable={false}
-							/>
-						</div>
-					{/if}
 				</div>
-
-				<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit"
-					>Load Repository</button
-				>
-			</form>
+			{/if}
 		</div>
-	</div>
-	
+
+		<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
+			Load Repository
+		</button>
+	</form>
 </div>

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

@@ -254,12 +254,6 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_build_pack')}
-	</div>
-</div>
-
 {#if scanning}
 	<div class="flex justify-center space-x-1 p-6 font-bold">
 		<div class="text-xl tracking-tight">
@@ -267,18 +261,7 @@
 		</div>
 	</div>
 {:else}
-	<div class="max-w-5xl mx-auto ">
-		<div class="title pb-2">Coolify</div>
-		<div class="flex flex-wrap justify-center">
-			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
-				<div class="p-2">
-					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
-				</div>
-			{/each}
-		</div>
-	</div>
-
-	<div class="max-w-5xl mx-auto ">
+	<div class="max-w-6xl mx-auto  px-5">
 		<div class="title pb-2">Other</div>
 		<div class="flex flex-wrap justify-center">
 			{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
@@ -288,4 +271,14 @@
 			{/each}
 		</div>
 	</div>
+	<div class="max-w-6xl mx-auto px-5">
+		<div class="title pb-2">Coolify Custom</div>
+		<div class="flex flex-wrap justify-center">
+			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
+				<div class="p-2">
+					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
+				</div>
+			{/each}
+		</div>
+	</div>
 {/if}

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

@@ -126,7 +126,7 @@
 		</div>
 	{/if}
 
-	<div class="mx-auto max-w-4xl p-6">
+	<div class="mx-auto max-w-6xl 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">

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

@@ -63,19 +63,14 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_destination')}
-	</div>
-</div>
-<div class="flex flex-col justify-center">
+<div class="flex flex-col justify-center w-full">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
 			<div class="pb-2 text-center font-bold">
 				{$t('application.configuration.no_configurable_destination')}
 			</div>
 			<div class="flex justify-center">
-				<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
+				<a href="/destinations/new" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
 					<svg
 						class="w-6"
 						xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +88,7 @@
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
 			{#each ownDestinations as destination}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
@@ -106,9 +101,9 @@
 			{/each}
 		</div>
 		{#if otherDestinations.length > 0 && $appSession.teamId === '0'}
-			<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Destinations</div>
+			<div class="px-6 pb-5 pt-10 title">Other Destinations</div>
 		{/if}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
 			{#each otherDestinations as destination}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>

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

@@ -68,12 +68,7 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.select_a_git_source')}
-	</div>
-</div>
-<div class="max-w-5xl mx-auto ">
+<div class="max-w-6xl mx-auto px-5">
 	<div class="title pb-8">Git App</div>
 	<div class="flex flex-wrap justify-center">
 		{#if !filteredSources || ownSources.length === 0}
@@ -192,7 +187,7 @@
 			</div>
 		{/if}
 	</div>
-	<div class="flex items-center">
+	<div class="flex flex-row items-center">
 		<div class="title py-4">Public Repository</div>
 		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
 	</div>

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

@@ -48,6 +48,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { goto } from '$app/navigation';
+	import { fade } from 'svelte/transition';
 
 	const { id } = $page.params;
 
@@ -94,7 +95,7 @@
 		}
 	];
 	function containerClass() {
-		return 'text-white bg-transparent font-thin px-0';
+		return 'text-white bg-transparent font-thin px-0 w-full border-dashed border-coolgray-300';
 	}
 
 	async function getUsage() {
@@ -220,7 +221,6 @@
 		loading = true;
 		try {
 			nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
-			console.log({debug: nonWWWDomain})
 			if (application.deploymentType)
 				application.deploymentType = application.deploymentType.toLowerCase();
 			!isBot &&
@@ -295,62 +295,7 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{application.name}</span>
-	</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"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-		<Tooltip triggeredBy="#git">Open on Git</Tooltip>
-	{/if}
-</div>
-
-<div class="mx-auto max-w-4xl px-6 py-4">
-	<div class="text-2xl font-bold">Application Usage</div>
+<div class="mx-auto max-w-6xl px-6 lg:my-0 my-4 lg:pt-0 pt-4 rounded" in:fade>
 	<div class="text-center">
 		<div class="stat w-64">
 			<div class="stat-title">Used Memory / Memory Limit</div>
@@ -368,11 +313,11 @@
 		</div>
 	</div>
 </div>
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6 pb-12">
 	<!-- svelte-ignore missing-declaration -->
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-5">
-			<div class="title">{$t('general')}</div>
+		<div class="flex space-x-1 pb-5  items-center">
+			<h1 class="title">{$t('general')}</h1>
 			{#if $appSession.isAdmin}
 				<button
 					class="btn btn-sm"
@@ -385,18 +330,18 @@
 				>
 			{/if}
 		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
+
+		<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
 			<div class="mt-2 grid grid-cols-2 items-center">
-				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-				<input name="name" id="name" bind:value={application.name} required />
+				<label for="name">{$t('forms.name')}</label>
+				<input name="name" id="name" class="w-full" bind:value={application.name} required />
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="gitSource" class="text-base font-bold text-stone-100"
-					>{$t('application.git_source')}</label
-				>
+				<label for="gitSource">{$t('application.git_source')}</label>
 				{#if isDisabled || application.settings.isPublicRepository}
 					<input
 						disabled={isDisabled || application.settings.isPublicRepository}
+						class="w-full"
 						value={application.gitSource.name}
 					/>
 				{:else}
@@ -406,17 +351,16 @@
 						><input
 							value={application.gitSource.name}
 							id="gitSource"
-							class="cursor-pointer hover:bg-coolgray-500"
+							class="cursor-pointer hover:bg-coolgray-500 w-full"
 						/></a
 					>
 				{/if}
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="repository" class="text-base font-bold text-stone-100"
-					>{$t('application.git_repository')}</label
-				>
+				<label for="repository">{$t('application.git_repository')}</label>
 				{#if isDisabled || application.settings.isPublicRepository}
 					<input
+						class="w-full"
 						disabled={isDisabled || application.settings.isPublicRepository}
 						value="{application.repository}/{application.branch}"
 					/>
@@ -427,46 +371,42 @@
 						><input
 							value="{application.repository}/{application.branch}"
 							id="repository"
-							class="cursor-pointer hover:bg-coolgray-500"
+							class="cursor-pointer hover:bg-coolgray-500 w-full"
 						/></a
 					>
 				{/if}
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="buildPack" class="text-base font-bold text-stone-100"
-					>{$t('application.build_pack')}</label
-				>
+				<label for="buildPack">{$t('application.build_pack')}</label>
 				{#if isDisabled}
-					<input class="capitalize" disabled={isDisabled} value={application.buildPack} />
+					<input class="uppercase w-full" disabled={isDisabled} value={application.buildPack} />
 				{:else}
 					<a
 						href={`/applications/${id}/configuration/buildpack?from=/applications/${id}`}
-						class="no-underline "
+						class="no-underline"
 					>
 						<input
 							value={application.buildPack}
 							id="buildPack"
-							class="cursor-pointer hover:bg-coolgray-500 capitalize"
+							class="cursor-pointer hover:bg-coolgray-500 capitalize w-full"
 						/></a
 					>
 				{/if}
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="destination" class="text-base font-bold text-stone-100"
-					>{$t('application.destination')}</label
-				>
+				<label for="destination">{$t('application.destination')}</label>
 				<div class="no-underline">
 					<input
 						value={application.destinationDocker.name}
 						id="destination"
 						disabled
-						class="bg-transparent"
+						class="bg-transparent w-full"
 					/>
 				</div>
 			</div>
 			{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
 				<div class="grid grid-cols-2 items-center">
-					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
+					<label for="baseBuildImage"
 						>{$t('application.base_build_image')}
 						<Explainer
 							explanation={application.buildPack === 'laravel'
@@ -474,24 +414,21 @@
 								: 'Image that will be used during the build process.'}
 						/>
 					</label>
-
-					<div class="custom-select-wrapper">
-						<Select
-							{isDisabled}
-							containerClasses={isDisabled && containerClass()}
-							id="baseBuildImages"
-							showIndicator={!$status.application.isRunning}
-							items={application.baseBuildImages}
-							on:select={selectBaseBuildImage}
-							value={application.baseBuildImage}
-							isClearable={false}
-						/>
-					</div>
+					<Select
+						{isDisabled}
+						containerClasses={isDisabled && containerClass()}
+						id="baseBuildImages"
+						showIndicator={!$status.application.isRunning}
+						items={application.baseBuildImages}
+						on:select={selectBaseBuildImage}
+						value={application.baseBuildImage}
+						isClearable={false}
+					/>
 				</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"
+					<label for="baseImage"
 						>{$t('application.base_image')}
 						<Explainer explanation={'Image that will be used for the deployment.'} /></label
 					>
@@ -511,7 +448,7 @@
 			{/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"
+					<label for="deploymentType"
 						>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."}
@@ -551,7 +488,7 @@
 						>
 						{#if application.connectedDatabase}
 							<div class="grid grid-cols-2 items-center">
-								<label for="baseImage" class="text-base font-bold text-stone-100"
+								<label for="baseImage"
 									>Base Database
 									<Explainer
 										explanation={'The name of the database that will be used as base when branching.'}
@@ -573,9 +510,9 @@
 			{/if}
 		</div>
 		<div class="flex space-x-1 py-5 font-bold">
-			<div class="title">{$t('application.application')}</div>
+			<h1 class="title">{$t('application.application')}</h1>
 		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
+		<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
 			<div class="grid grid-cols-2 items-center">
 				<Setting
 					id="isBot"
@@ -595,13 +532,13 @@
 					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."
+					description="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 items-center pb-8">
-					<label for="fqdn" class="text-base font-bold text-stone-100"
+					<label for="fqdn"
 						>{$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>"}
@@ -609,6 +546,8 @@
 					</label>
 					<div>
 						<input
+							class="w-full"
+							required={!application.settings.isBot}
 							readonly={isDisabled}
 							disabled={isDisabled}
 							name="fqdn"
@@ -656,14 +595,14 @@
 			{/if}
 			{#if application.buildPack === 'python'}
 				<div class="grid grid-cols-2 items-center">
-					<label for="pythonModule" class="text-base font-bold text-stone-100">WSGI / ASGI</label>
+					<label for="pythonModule">WSGI / ASGI</label>
 					<div class="custom-select-wrapper">
 						<Select id="wsgi" items={wsgis} on:select={selectWSGI} value={application.pythonWSGI} />
 					</div>
 				</div>
 
 				<div class="grid grid-cols-2 items-center">
-					<label for="pythonModule" class="text-base font-bold text-stone-100">Module</label>
+					<label for="pythonModule">Module</label>
 					<input
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
@@ -676,7 +615,7 @@
 				</div>
 				{#if application.pythonWSGI?.toLowerCase() === 'gunicorn'}
 					<div class="grid grid-cols-2 items-center">
-						<label for="pythonVariable" class="text-base font-bold text-stone-100">Variable</label>
+						<label for="pythonVariable">Variable</label>
 						<input
 							disabled={isDisabled}
 							readonly={!$appSession.isAdmin}
@@ -690,7 +629,7 @@
 				{/if}
 				{#if application.pythonWSGI?.toLowerCase() === 'uvicorn'}
 					<div class="grid grid-cols-2 items-center">
-						<label for="pythonVariable" class="text-base font-bold text-stone-100">Variable</label>
+						<label for="pythonVariable">Variable</label>
 						<input
 							disabled={isDisabled}
 							readonly={!$appSession.isAdmin}
@@ -705,11 +644,12 @@
 			{/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"
+					<label for="port"
 						>{$t('forms.port')}
 						<Explainer explanation={'The port your application listens on.'} /></label
 					>
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="port"
@@ -719,13 +659,14 @@
 					/>
 				</div>
 			{/if}
-			<div class="grid grid-cols-2 items-center pb-8">
-				<label for="exposePort" class="text-base font-bold text-stone-100"
+			<div class="grid grid-cols-2 items-center">
+				<label for="exposePort"
 					>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
+					class="w-full"
 					readonly={!$appSession.isAdmin && !$status.application.isRunning}
 					disabled={isDisabled}
 					name="exposePort"
@@ -736,10 +677,9 @@
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="installCommand" class="text-base font-bold text-stone-100"
-						>{$t('application.install_command')}</label
-					>
+					<label for="installCommand">{$t('application.install_command')}</label>
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="installCommand"
@@ -749,10 +689,9 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="buildCommand" class="text-base font-bold text-stone-100"
-						>{$t('application.build_command')}</label
-					>
+					<label for="buildCommand">{$t('application.build_command')}</label>
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="buildCommand"
@@ -762,10 +701,9 @@
 					/>
 				</div>
 				<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
-					>
+					<label for="startCommand">{$t('application.start_command')}</label>
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="startCommand"
@@ -777,12 +715,13 @@
 			{/if}
 			{#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"
+					<label for="dockerFileLocation"
 						>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
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="dockerFileLocation"
@@ -794,8 +733,9 @@
 			{/if}
 			{#if application.buildPack === 'deno'}
 				<div class="grid grid-cols-2 items-center">
-					<label for="denoMainFile" class="text-base font-bold text-stone-100">Main File</label>
+					<label for="denoMainFile">Main File</label>
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="denoMainFile"
@@ -805,12 +745,13 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="denoOptions" class="text-base font-bold text-stone-100"
+					<label for="denoOptions"
 						>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
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="denoOptions"
@@ -823,7 +764,7 @@
 			{#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"
+						<label for="baseDirectory"
 							>{$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>."}
@@ -831,6 +772,7 @@
 						>
 					</div>
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="baseDirectory"
@@ -843,7 +785,7 @@
 			{#if !notNodeDeployments.includes(application.buildPack)}
 				<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"
+						<label for="publishDirectory"
 							>{$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>."}
@@ -852,6 +794,7 @@
 					</div>
 
 					<input
+						class="w-full"
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
 						name="publishDirectory"
@@ -867,7 +810,7 @@
 	<div class="flex space-x-1 pb-5 font-bold">
 		<div class="title">{$t('application.features')}</div>
 	</div>
-	<div class="px-10 pb-10">
+	<div class="lg:px-10 px-2 lg:pb-10 pb-6">
 		{#if !application.settings.isPublicRepository}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
@@ -892,7 +835,7 @@
 				/>
 			</div>
 		{/if}
-		<div class="grid grid-cols-2 items-center">
+		<div class="grid grid-cols-2 items-center w-full">
 			<Setting
 				id="debug"
 				isCenter={false}

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-	export let buildId: any;
-
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
 
@@ -11,6 +9,8 @@
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { errorNotification } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { day } from '$lib/dayjs';
+	import { selectedBuildId } from '$lib/store';
 
 	let logs: any = [];
 	let currentStatus: any;
@@ -18,7 +18,7 @@
 	let followingBuild: any;
 	let followingInterval: any;
 	let logsEl: any;
-
+	let fromDb = false;
 	let cancelInprogress = false;
 
 	const { id } = $page.params;
@@ -38,13 +38,18 @@
 	}
 	async function streamLogs(sequence = 0) {
 		try {
-			let { logs: responseLogs, status } = await get(
-				`/applications/${id}/logs/build/${buildId}?sequence=${sequence}`
-			);
+			let {
+				logs: responseLogs,
+				status,
+				fromDb: from
+			} = await get(`/applications/${id}/logs/build/${$selectedBuildId}?sequence=${sequence}`);
+
 			currentStatus = status;
 			logs = logs.concat(
 				responseLogs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 			);
+			fromDb = from;
+
 			streamInterval = setInterval(async () => {
 				if (status !== 'running' && status !== 'queued') {
 					clearInterval(streamInterval);
@@ -53,11 +58,12 @@
 				const nextSequence = logs[logs.length - 1]?.time || 0;
 				try {
 					const data = await get(
-						`/applications/${id}/logs/build/${buildId}?sequence=${nextSequence}`
+						`/applications/${id}/logs/build/${$selectedBuildId}?sequence=${nextSequence}`
 					);
 					status = data.status;
 					currentStatus = status;
-
+					fromDb = data.fromDb;
+					
 					logs = logs.concat(
 						data.logs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 					);
@@ -75,7 +81,7 @@
 		try {
 			cancelInprogress = true;
 			await post(`/applications/${id}/cancel`, {
-				buildId,
+				buildId: $selectedBuildId,
 				applicationId: id
 			});
 		} catch (error) {
@@ -103,7 +109,7 @@
 			<button
 				id="follow"
 				on:click={followBuild}
-				class="bg-transparent btn btn-sm btn-linkhover:text-green-500 hover:bg-coolgray-500"
+				class="bg-transparent btn btn-sm btn-link hover:text-green-500 hover:bg-coolgray-500"
 				class:text-green-500={followingBuild}
 			>
 				<svg
@@ -154,20 +160,19 @@
 			{/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}
-			>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
 				{#each logs as log}
-					<div>{log.line + '\n'}</div>
+					{#if fromDb}
+						<div>{log.line + '\n'}</div>
+					{:else}
+						<div>[{day.unix(log.time).format('HH:mm:ss.SSS')}] {log.line + '\n'}</div>
+					{/if}
 				{/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>
+		<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+			No logs found.
+		</div>
 		{/if}
 	{/if}
 </div>

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

@@ -23,54 +23,45 @@
 	export let application: any;
 	export let buildCount: any;
 	import { page } from '$app/stores';
-
+	import { addToast, selectedBuildId } from '$lib/store';
 	import BuildLog from './_BuildLog.svelte';
-	import { get } from '$lib/api';
+	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
-	import { changeQueryParams, dateOptions, errorNotification } from '$lib/common';
+	import { changeQueryParams, dateOptions, errorNotification, asyncSleep } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { day } from '$lib/dayjs';
+	import { onDestroy, onMount } from 'svelte';
+	const { id } = $page.params;
 
-	let buildId: any;
+	let loadBuildLogsInterval: any = null;
 
 	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;
+	if (preselectedBuildId) $selectedBuildId = preselectedBuildId;
 
-	async function updateBuildStatus({ detail }: { detail: any }) {
-		const { status, took } = detail;
-		if (status !== 'running') {
-			try {
-				const data = await get(`/applications/${id}/logs/build?buildId=${buildId}`);
-				builds = builds.filter((build: any) => {
-					if (build.id === data.builds[0].id) {
-						build.status = data.builds[0].status;
-						build.took = data.builds[0].took;
-						build.since = data.builds[0].since;
-					}
-					return build;
-				});
-			} catch (error) {
-				return errorNotification(error);
-			}
-		} else {
-			builds = builds.filter((build: any) => {
-				if (build.id === buildId) build.status = status;
-				return build;
-			});
-			buildTook = took;
-		}
+	onMount(async () => {
+		getBuildLogs();
+		loadBuildLogsInterval = setInterval(() => {
+			getBuildLogs();
+		}, 2000);
+		
+	});
+	onDestroy(() => {
+		clearInterval(loadBuildLogsInterval);
+	});
+	async function getBuildLogs() {
+		const response = await get(`/applications/${$page.params.id}/logs/build?skip=${skip}`);
+		builds = response.builds;
 	}
+	
 	async function loadMoreBuilds() {
 		if (buildCount >= skip) {
 			skip = skip + 5;
-			noMoreBuilds = buildCount >= skip;
+			noMoreBuilds = buildCount <= skip;
 			try {
 				const data = await get(`/applications/${id}/logs/build?skip=${skip}`);
-				builds = builds.concat(data.builds);
+				builds = data.builds
 				return;
 			} catch (error) {
 				return errorNotification(error);
@@ -80,64 +71,47 @@
 		}
 	}
 	function loadBuild(build: any) {
-		buildId = build;
-		return changeQueryParams(buildId);
+		$selectedBuildId = build;
+		return changeQueryParams($selectedBuildId);
+	}
+	async function resetQueue() {
+		const sure = confirm(
+			'It will reset all build queues for all applications. If something is queued, it will be canceled automatically. Are you sure? '
+		);
+		if (sure) {
+			try {
+				await post(`/internal/resetQueue`, {});
+				addToast({
+					message: 'Queue reset done.',
+					type: 'success'
+				});
+				await asyncSleep(500);
+				return window.location.reload();
+			} catch (error) {
+				return errorNotification(error);
+			}
+		}
+	}
+	function generateBadgeColors(status: string) {
+		if (status === 'failed') {
+			return 'text-red-500';
+		} else if (status === 'running') {
+			return 'text-yellow-300';
+		} else if (status === 'success') {
+			return 'text-green-500';
+		} else if (status === 'canceled') {
+			return 'text-orange-500';
+		} else {
+			return 'text-white';
+		}
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			{$t('application.build_logs')}
-		</div>
-		<span class="text-xs">{application.name} </span>
-	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
-</div>
 <div class="block flex-row justify-start space-x-2 px-5 pt-6 sm:px-10 md:flex">
 	<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
+		<button class="btn btn-sm text-xs w-full bg-error" on:click={resetQueue}
+			>Reset Build Queue</button
+		>
 		<div class="top-4 md:sticky">
 			{#each builds as build, index (build.id)}
 				<div
@@ -145,12 +119,8 @@
 					on:click={() => loadBuild(build.id)}
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
-					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'}
+					class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-100 hover:bg-coolgray-300 hover:shadow-xl"
+					class:bg-coolgray-200={$selectedBuildId === build.id}
 				>
 					<div class="flex-col px-2 text-center min-w-[10rem]">
 						<div class="text-sm font-bold">
@@ -159,45 +129,55 @@
 						<div class="text-xs">
 							{build.type}
 						</div>
+						<div
+							class={`badge badge-sm text-xs uppercase rounded bg-coolgray-300 border-none font-bold ${generateBadgeColors(
+								build.status
+							)}`}
+						>
+							{build.status}
+						</div>
 					</div>
 
 					<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>
+								<span class="font-bold text-xl"
+									>{build.elapsed}s</span
+								>
 							</div>
-						{:else if build.status === 'queued'}
-							<div class="font-bold">{$t('application.build.queued')}</div>
-						{:else}
-							<div>{build.since}</div>
+						{:else if build.status !== 'queued'}
+							<div>{day(build.updatedAt).utc().fromNow()}</div>
 							<div>
-								{$t('application.build.finished_in')} <span class="font-bold">{build.took}s</span>
+								{$t('application.build.finished_in')}
+								<span class="font-bold"
+									>{day(build.updatedAt).utc().diff(day(build.createdAt)) / 1000}s</span
+								>
 							</div>
 						{/if}
 					</div>
 				</div>
 				<Tooltip triggeredBy={`#building-${build.id}`}
 					>{new Intl.DateTimeFormat('default', dateOptions).format(new Date(build.createdAt)) +
-						`\n${build.status}`}</Tooltip
+						`\n`}</Tooltip
 				>
 			{/each}
 		</div>
 		{#if !noMoreBuilds}
 			{#if buildCount > 5}
-				<div class="flex space-x-2">
-					<button disabled={noMoreBuilds} class=" btn btn-sm w-full" on:click={loadMoreBuilds}
-						>{$t('application.build.load_more')}</button
+				<div class="flex space-x-2 pb-10">
+					<button
+						disabled={noMoreBuilds}
+						class=" btn btn-sm w-full text-xs"
+						on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
 					>
 				</div>
 			{/if}
 		{/if}
 	</div>
 	<div class="flex-1 md:w-96">
-		{#if buildId}
-			{#key buildId}
-				<svelte:component this={BuildLog} {buildId} on:updateBuildStatus={updateBuildStatus} />
+		{#if $selectedBuildId}
+			{#key $selectedBuildId}
+				<svelte:component this={BuildLog} />
 			{/key}
 		{/if}
 	</div>

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

@@ -6,7 +6,8 @@
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { onMount, onDestroy } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
-
+	import { status } from '$lib/store';
+	import { goto } from '$app/navigation';
 	let application: any = {};
 	let logsLoading = false;
 	let loadLogsInterval: any = null;
@@ -16,7 +17,13 @@
 	let followingLogs: any;
 	let logsEl: any;
 	let position = 0;
-
+	if (
+		!$status.application.isExited &&
+		!$status.application.isRestarting &&
+		!$status.application.isRunning
+	) {
+		goto(`/applications/${$page.params.id}/`, { replaceState: true });
+	}
 	const { id } = $page.params;
 	onMount(async () => {
 		const response = await get(`/applications/${id}`);
@@ -84,57 +91,7 @@
 	}
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Application Logs
-		</div>
-		<span class="text-xs">{application.name}</span>
-	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
-</div>
+
 <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
 	{#if logs.length === 0}
 		<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
@@ -170,16 +127,10 @@
 				</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"
-				bind:this={logsEl}
-				on:scroll={detect}
-			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+				{#each logs as log}
+					<p>{log + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}

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

@@ -1,222 +0,0 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async ({ stuff, url }) => {
-		try {
-			return {
-				props: {
-					application: stuff.application
-				}
-			};
-		} catch (error) {
-			return {
-				status: 500,
-				error: new Error(`Could not load ${url}`)
-			};
-		}
-	};
-</script>
-
-<script lang="ts">
-	export let application: any;
-	import Secret from './_Secret.svelte';
-	import { get, post } from '$lib/api';
-	import { page } from '$app/stores';
-	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;
-
-	let containers: any;
-	let PRMRSecrets: any;
-	let applicationSecrets: any;
-	let loading = {
-		init: true,
-		removing: false
-	};
-	async function refreshSecrets() {
-		const data = await get(`/applications/${id}/secrets`);
-		PRMRSecrets = [...data.secrets];
-	}
-	async function removeApplication(container: any) {
-		try {
-			loading.removing = true;
-			await post(`/applications/${id}/stop/preview`, {
-				pullmergeRequestId: container.pullmergeRequestId
-			});
-			return window.location.reload();
-		} catch (error) {
-			return errorNotification(error);
-		}
-	}
-	async function redeploy(container: any) {
-		try {
-			const { buildId } = await post(`/applications/${id}/deploy`, {
-				pullmergeRequestId: container.pullmergeRequestId,
-				branch: container.branch
-			});
-			addToast({
-				message: 'Deployment queued',
-				type: 'success'
-			});
-			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
-				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
-			} else {
-				return await goto(`/applications/${id}/logs/build?buildId=${buildId}`, {
-					replaceState: true
-				});
-			}
-		} catch (error) {
-			return errorNotification(error);
-		}
-	}
-	onMount(async () => {
-		try {
-			loading.init = true;
-			const response = await get(`/applications/${id}/previews`);
-			containers = response.containers;
-			PRMRSecrets = response.PRMRSecrets;
-			applicationSecrets = response.applicationSecrets;
-		} catch (error) {
-			return errorNotification(error);
-		} finally {
-			loading.init = false;
-		}
-	});
-</script>
-
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Preview Deployments
-		</div>
-		<span class="text-xs">{application?.name}</span>
-	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
-</div>
-{#if loading.init}
-	<Loading />
-{:else}
-	<div class="mx-auto max-w-6xl px-6 pt-4">
-		<div class="flex justify-center py-4 text-center">
-			<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."
-					: "These values overwrite application secrets in PR/MR deployments. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."}
-			/>
-		</div>
-		{#if applicationSecrets.length !== 0}
-			<table class="mx-auto border-separate text-left">
-				<thead>
-					<tr class="h-12">
-						<th scope="col">{$t('forms.name')}</th>
-						<th scope="col">{$t('forms.value')}</th>
-						<th scope="col" class="w-64 text-center"
-							>{$t('application.preview.need_during_buildtime')}</th
-						>
-						<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each applicationSecrets as secret}
-						{#key secret.id}
-							<tr>
-								<Secret
-									PRMRSecret={PRMRSecrets.find((s) => s.name === secret.name)}
-									isPRMRSecret
-									name={secret.name}
-									value={secret.value}
-									isBuildSecret={secret.isBuildSecret}
-									on:refresh={refreshSecrets}
-								/>
-							</tr>
-						{/key}
-					{/each}
-				</tbody>
-			</table>
-		{/if}
-	</div>
-
-	<div class="mx-auto max-w-4xl py-10">
-		<div class="flex flex-wrap justify-center space-x-2">
-			{#if containers.length > 0}
-				{#each containers as container}
-					<a href={container.fqdn} class="p-2 no-underline" target="_blank">
-						<div class="box-selection text-center hover:border-transparent hover:bg-green-600">
-							<div class="truncate text-center text-xl font-bold">{getDomain(container.fqdn)}</div>
-						</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
-						>
-					</div>
-					<div class="flex items-center justify-center">
-						<button
-							class="btn btn-sm"
-							class:bg-red-600={!loading.removing}
-							class:hover:bg-red-500={!loading.removing}
-							disabled={loading.removing}
-							on:click={() => removeApplication(container)}
-							>{loading.removing ? 'Removing...' : 'Remove Application'}
-						</button>
-					</div>
-				{/each}
-			{:else}
-				<div class="flex-col">
-					<div class="text-center font-bold text-xl">
-						{$t('application.preview.no_previews_available')}
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-{/if}

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

@@ -0,0 +1,376 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, stuff, url }) => {
+		try {
+			return {
+				props: {
+					application: stuff.application
+				}
+			};
+		} catch (error) {
+			return {
+				status: 500,
+				error: new Error(`Could not load ${url}`)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let application: any;
+	import Secret from '../_Secret.svelte';
+	import { get, post } from '$lib/api';
+	import { page } from '$app/stores';
+	import { t } from '$lib/translations';
+	import { goto } from '$app/navigation';
+	import { asyncSleep, errorNotification, getDomain, getRndInteger } from '$lib/common';
+	import { onDestroy, onMount } from 'svelte';
+	import { addToast } from '$lib/store';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+
+	const { id } = $page.params;
+	let loadBuildingStatusInterval: any = null;
+	let PRMRSecrets: any;
+	let applicationSecrets: any;
+	let loading = {
+		init: true,
+		restart: false,
+		removing: false
+	};
+	let numberOfGetStatus = 0;
+	let status: any = {};
+	async function refreshSecrets() {
+		const data = await get(`/applications/${id}/secrets`);
+		PRMRSecrets = [...data.secrets];
+	}
+	async function removeApplication(preview: any) {
+		try {
+			loading.removing = true;
+			await post(`/applications/${id}/stop/preview`, {
+				pullmergeRequestId: preview.pullmergeRequestId
+			});
+			return window.location.reload();
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+	async function redeploy(preview: any) {
+		try {
+			const { buildId } = await post(`/applications/${id}/deploy`, {
+				pullmergeRequestId: preview.pullmergeRequestId,
+				branch: preview.sourceBranch
+			});
+			addToast({
+				message: 'Deployment queued',
+				type: 'success'
+			});
+			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
+				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
+			} else {
+				return await goto(`/applications/${id}/logs/build?buildId=${buildId}`, {
+					replaceState: true
+				});
+			}
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+	async function loadPreviewsFromDocker() {
+		try {
+			const { previews } = await post(`/applications/${id}/previews/load`, {});
+			addToast({
+				message: 'Previews loaded.',
+				type: 'success'
+			});
+			application.previewApplication = previews;
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+	async function getStatus(resources: any) {
+		const { applicationId, pullmergeRequestId, id } = resources;
+		if (status[id]) return status[id];
+		while (numberOfGetStatus > 1) {
+			await asyncSleep(getRndInteger(100, 200));
+		}
+		try {
+			numberOfGetStatus++;
+			let isRunning = false;
+			let isBuilding = false;
+			const response = await get(
+				`/applications/${applicationId}/previews/${pullmergeRequestId}/status`
+			);
+			isRunning = response.isRunning;
+			isBuilding = response.isBuilding;
+			if (isBuilding) {
+				status[id] = 'building';
+				return 'building';
+			} else if (isRunning) {
+				status[id] = 'running';
+				return 'running';
+			} else {
+				status[id] = 'stopped';
+				return 'stopped';
+			}
+		} catch (error) {
+			status[id] = 'error';
+			return 'error';
+		} finally {
+			numberOfGetStatus--;
+			status = status;
+		}
+	}
+	async function restartPreview(preview: any) {
+		try {
+			loading.restart = true;
+			const { pullmergeRequestId } = preview;
+			await post(`/applications/${id}/previews/${pullmergeRequestId}/restart`, {});
+			addToast({
+				type: 'success',
+				message: 'Restart successful.'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			await getStatus(preview);
+			loading.restart = false;
+		}
+	}
+	onDestroy(() => {
+		clearInterval(loadBuildingStatusInterval);
+	});
+	onMount(async () => {
+		loadBuildingStatusInterval = setInterval(() => {
+			application.previewApplication.forEach(async (preview: any) => {
+				const { applicationId, pullmergeRequestId } = preview;
+				if (status[preview.id] === 'building') {
+					const response = await get(
+						`/applications/${applicationId}/previews/${pullmergeRequestId}/status`
+					);
+					if (response.isBuilding) {
+						status[preview.id] = 'building';
+					} else if (response.isRunning) {
+						status[preview.id] = 'running';
+						return 'running';
+					} else {
+						status[preview.id] = 'stopped';
+						return 'stopped';
+					}
+				}
+			});
+		}, 2000);
+		try {
+			loading.init = true;
+			loading.restart = true;
+			const response = await get(`/applications/${id}/previews`);
+			PRMRSecrets = response.PRMRSecrets;
+			applicationSecrets = response.applicationSecrets;
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading.init = false;
+			loading.restart = false;
+		}
+	});
+</script>
+
+<div class="flex justify-center">
+	<SimpleExplainer
+		text={applicationSecrets && applicationSecrets.length === 0
+			? "To have Preview Secerts, please add them to the main application. <br><br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
+			: "These values overwrite application secrets in PR/MR deployments. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."}
+	/>
+</div>
+{#if loading.init}
+	<div class="mx-auto max-w-6xl px-6 pt-4">
+		<div class="flex justify-center py-4 text-center text-xl font-bold">Loading...</div>
+	</div>
+{:else}
+	<div class="mx-auto max-w-6xl px-6 pt-4">
+		<div class="text-center">
+			<button class="btn btn-sm bg-coollabs" on:click={loadPreviewsFromDocker}>Load Previews</button
+			>
+		</div>
+		{#if applicationSecrets.length !== 0}
+			<table class="mx-auto border-separate text-left">
+				<thead>
+					<tr class="h-12">
+						<th scope="col">{$t('forms.name')}</th>
+						<th scope="col">{$t('forms.value')}</th>
+						<th scope="col" class="w-64 text-center"
+							>{$t('application.preview.need_during_buildtime')}</th
+						>
+						<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each applicationSecrets as secret}
+						{#key secret.id}
+							<tr>
+								<Secret
+									PRMRSecret={PRMRSecrets.find((s) => s.name === secret.name)}
+									isPRMRSecret
+									name={secret.name}
+									value={secret.value}
+									isBuildSecret={secret.isBuildSecret}
+									on:refresh={refreshSecrets}
+								/>
+							</tr>
+						{/key}
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+
+	<div class="container lg:mx-auto lg:p-0 px-8 p-5 lg:pt-10">
+		{#if application.previewApplication.length > 0}
+			<div
+				class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
+			>
+				{#each application.previewApplication as preview}
+					<div class="no-underline mb-5">
+						<div class="w-full rounded p-5 bg-coolgray-200 indicator">
+							{#await getStatus(preview)}
+								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							{:then}
+								{#if status[preview.id] === 'running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
+							{/await}
+							<div class="w-full flex flex-row">
+								<div class="w-full flex flex-col">
+									<h1 class="font-bold text-lg lg:text-xl truncate">
+										PR #{preview.pullmergeRequestId}
+										{#if status[preview.id] === 'building'}
+											<span
+												class="badge badge-sm text-xs uppercase rounded bg-coolgray-300 text-green-500 border-none font-bold"
+											>
+												BUILDING
+											</span>
+										{/if}
+									</h1>
+									<div class="h-10 text-xs">
+										<h2>{preview.customDomain.replace('https://', '').replace('http://', '')}</h2>
+									</div>
+
+									<div class="flex justify-end items-end space-x-2 h-10">
+										{#if preview.customDomain}
+											<a id="openpreview" href={preview.customDomain} target="_blank" class="icons">
+												<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}
+										<Tooltip triggeredBy="#openpreview">Open Preview</Tooltip>
+										<div class="border border-coolgray-500 h-8" />
+										{#if loading.restart}
+											<button
+												class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
+											>
+												<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}
+											<button
+												id="restart"
+												on:click={() => restartPreview(preview)}
+												type="submit"
+												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>
+										{/if}
+
+										<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
+										<button
+											id="forceredeploypreview"
+											class="icons"
+											on:click={() => redeploy(preview)}
+										>
+											<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="#forceredeploypreview"
+											>Force redeploy (without cache)</Tooltip
+										>
+										<div class="border border-coolgray-500 h-8" />
+										<button
+											id="deletepreview"
+											class="icons"
+											class:hover:text-error={!loading.removing}
+											disabled={loading.removing}
+											on:click={() => removeApplication(preview)}
+											><DeleteIcon />
+										</button>
+										<Tooltip triggeredBy="#deletepreview">Delete Preview</Tooltip>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -67,87 +67,38 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			{$t('application.secret')}
-		</div>
-		<span class="text-xs">{application.name} </span>
-	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
-</div>
 <div class="mx-auto max-w-6xl px-6 pt-4">
-	<table class="mx-auto border-separate text-left">
-		<thead>
-			<tr class="h-12">
-				<th scope="col">{$t('forms.name')}</th>
-				<th scope="col">{$t('forms.value')}</th>
-				<th scope="col" class="w-64 text-center"
-					>{$t('application.preview.need_during_buildtime')}</th
-				>
-				<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each secrets as secret}
-				{#key secret.id}
-					<tr>
-						<Secret
-							name={secret.name}
-							value={secret.value}
-							isBuildSecret={secret.isBuildSecret}
-							on:refresh={refreshSecrets}
-						/>
-					</tr>
-				{/key}
-			{/each}
-			<tr>
-				<Secret isNewSecret on:refresh={refreshSecrets} />
-			</tr>
-		</tbody>
-	</table>
+	<div class="overflow-x-auto">
+		<table class="mx-auto border-separate text-left">
+			<thead>
+				<tr class="h-12">
+					<th scope="col">{$t('forms.name')}</th>
+					<th scope="col">{$t('forms.value')}</th>
+					<th scope="col" class="w-64 text-center"
+						>{$t('application.preview.need_during_buildtime')}</th
+					>
+					<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each secrets as secret}
+					{#key secret.id}
+						<tr>
+							<Secret
+								name={secret.name}
+								value={secret.value}
+								isBuildSecret={secret.isBuildSecret}
+								on:refresh={refreshSecrets}
+							/>
+						</tr>
+					{/key}
+				{/each}
+				<tr>
+					<Secret isNewSecret on:refresh={refreshSecrets} />
+				</tr>
+			</tbody>
+		</table>
+	</div>
 	<h2 class="title my-6 font-bold">Paste .env file</h2>
 	<form on:submit|preventDefault={getValues} class="mb-12 w-full">
 		<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />

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

@@ -5,7 +5,6 @@
 			const response = await get(`/applications/${params.id}/storages`);
 			return {
 				props: {
-					application: stuff.application,
 					...response
 				}
 			};
@@ -19,13 +18,12 @@
 </script>
 
 <script lang="ts">
-	export let application: any;
 	export let persistentStorages: any;
 	import { page } from '$app/stores';
 	import Storage from './_Storage.svelte';
 	import { get } from '$lib/api';
-	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	const { id } = $page.params;
 	async function refreshStorage() {
@@ -34,66 +32,11 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Persistent Storage
-		</div>
-		<span class="text-xs">{application.name} </span>
-	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
-</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">
-				<th scope="col">{$t('forms.path')}</th>
+				<th scope="col">{$t('forms.path')} <Explainer position="dropdown-bottom" explanation={$t('application.storage.persistent_storage_explainer')} /></th>
 			</tr>
 		</thead>
 		<tbody>

apps/ui/src/routes/applications/[id]/utils.ts

@@ -22,7 +22,7 @@ export async function saveSecret({
 	applicationId
 }: Props): Promise<void> {
 	if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
-	if (!value) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
+	if (!value && isNew) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
 	try {
 		await post(`/applications/${applicationId}/secrets`, {
 			name,

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

@@ -44,8 +44,8 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.applications')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
 			<svg
@@ -63,8 +63,9 @@
 			>
 		</button>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex flex-col justify-center mt-10 pb-12 lg:pt-16 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>

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

@@ -5,13 +5,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">CouchDB</div>
+	<h1 class="title">CouchDB</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -23,7 +21,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -34,9 +32,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
-		>
+		<label for="dbUserPassword">{$t('forms.password')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -48,7 +44,7 @@
 		/>
 	</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>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -59,9 +55,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
-		>
+		<label for="rootUserPassword">{$t('forms.roots_password')}</label>
 		<CopyPasswordField
 			readonly
 			disabled

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

@@ -107,10 +107,10 @@
 	}
 </script>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl p-4">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-5">
-			<div class="title">{$t('general')}</div>
+		<div class="flex space-x-1 pb-5 items-center">
+			<h1 class="title">{$t('general')}</h1>
 			{#if $appSession.isAdmin}
 				<button
 					type="submit"
@@ -121,106 +121,94 @@
 				>
 			{/if}
 		</div>
-
-		<div class="grid grid-flow-row gap-2 px-10">
-			<div class="grid grid-cols-2 items-center">
-				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-				<input
-					readonly={!$appSession.isAdmin}
-					name="name"
-					id="name"
-					bind:value={database.name}
-					required
-				/>
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="destination" class="text-base font-bold text-stone-100"
-					>{$t('application.destination')}</label
-				>
-				{#if database.destinationDockerId}
-					<div class="no-underline">
-						<input
-							value={database.destinationDocker.name}
-							id="destination"
-							disabled
-							readonly
-							class="bg-transparent "
-						/>
-					</div>
-				{/if}
-			</div>
-
-			<div class="grid grid-cols-2 items-center">
-				<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
-				<a
-					href={$appSession.isAdmin && !$status.database.isRunning
-						? `/databases/${id}/configuration/version?from=/databases/${id}`
-						: ''}
-					class="no-underline"
-				>
+		<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
+			<label for="name">{$t('forms.name')}</label>
+			<input
+				class="w-full"
+				readonly={!$appSession.isAdmin}
+				name="name"
+				id="name"
+				bind:value={database.name}
+				required
+			/>
+			<label for="destination">{$t('application.destination')}</label>
+			{#if database.destinationDockerId}
+				<div class="no-underline">
 					<input
-						value={database.version}
+						value={database.destinationDocker.name}
+						id="destination"
+						disabled
 						readonly
-						disabled={$status.database.isRunning || $status.database.initialLoading}
-						class:cursor-pointer={!$status.database.isRunning}
-					/></a
-				>
-			</div>
-		</div>
-
-		<div class="grid grid-flow-row gap-2 px-10 pt-2">
-			<div class="grid grid-cols-2 items-center">
-				<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label>
-				<CopyPasswordField
-					placeholder={$t('forms.generated_automatically_after_start')}
-					isPasswordField={false}
-					readonly
-					disabled
-					id="host"
-					name="host"
-					value={database.id}
-				/>
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label
-				>
-				<CopyPasswordField
-					placeholder={$t('database.generated_automatically_after_set_to_public')}
-					id="publicPort"
-					readonly
-					disabled
-					name="publicPort"
-					value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort}
-				/>
-			</div>
-		</div>
-		<div class="grid grid-flow-row gap-2">
-			{#if database.type === 'mysql'}
-				<MySql bind:database />
-			{:else if database.type === 'postgresql'}
-				<PostgreSql bind:database />
-			{:else if database.type === 'mongodb'}
-				<MongoDb bind:database />
-			{:else if database.type === 'mariadb'}
-				<MariaDb bind:database />
-			{:else if database.type === 'redis'}
-				<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')}
-						{#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
-					>
+						class="bg-transparent w-full"
+					/>
 				</div>
+			{/if}
+			<label for="version">Version / Tag</label>
+			<a
+				href={$appSession.isAdmin && !$status.database.isRunning
+					? `/databases/${id}/configuration/version?from=/databases/${id}`
+					: ''}
+				class="no-underline"
+			>
+				<input
+					class="w-full"
+					value={database.version}
+					readonly
+					disabled={$status.database.isRunning || $status.database.initialLoading}
+					class:cursor-pointer={!$status.database.isRunning}
+				/></a
+			>
+			<label for="host">{$t('forms.host')}</label>
+			<CopyPasswordField
+				placeholder={$t('forms.generated_automatically_after_start')}
+				isPasswordField={false}
+				readonly
+				disabled
+				id="host"
+				name="host"
+				value={database.id}
+			/>
+			<label for="publicPort">{$t('forms.port')}</label>
+			<CopyPasswordField
+				placeholder={$t('database.generated_automatically_after_set_to_public')}
+				id="publicPort"
+				readonly
+				disabled
+				name="publicPort"
+				value={publicLoading
+					? 'Loading...'
+					: $status.database.isPublic
+					? database.publicPort
+					: privatePort}
+			/>
+		</div>
+		{#if database.type === 'mysql'}
+			<MySql bind:database />
+		{:else if database.type === 'postgresql'}
+			<PostgreSql bind:database />
+		{:else if database.type === 'mongodb'}
+			<MongoDb bind:database />
+		{:else if database.type === 'mariadb'}
+			<MariaDb bind:database />
+		{:else if database.type === 'redis'}
+			<Redis bind:database />
+		{:else if database.type === 'couchdb'}
+			<CouchDb {database} />
+		{:else if database.type === 'edgedb'}
+			<EdgeDB {database} />
+		{/if}
+		<div class="flex flex-col space-y-2 mt-5">
+			<div>
+				<label class="px-2" for="url"
+					>{$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
+				>
+			</div>
+			<div class="lg:px-10 px-2">
 				<CopyPasswordField
 					textarea={true}
 					placeholder={$t('forms.generated_automatically_after_start')}
@@ -235,31 +223,27 @@
 		</div>
 	</form>
 	<div class="flex space-x-1 pb-5 font-bold">
-		<div class="title">{$t('application.features')}</div>
+		<h1 class="title">{$t('application.features')}</h1>
 	</div>
-	<div class="px-10 pb-10">
-		<div class="grid grid-cols-2 items-center">
-			<Setting
-				id="isPublic"
-				loading={publicLoading}
-				bind:setting={$status.database.isPublic}
-				on:click={() => changeSettings('isPublic')}
-				title={$t('database.set_public')}
-				description={$t('database.warning_database_public')}
-				disabled={!$status.database.isRunning}
-			/>
-		</div>
+	<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
+		<Setting
+			id="isPublic"
+			loading={publicLoading}
+			bind:setting={$status.database.isPublic}
+			on:click={() => changeSettings('isPublic')}
+			title={$t('database.set_public')}
+			description={$t('database.warning_database_public')}
+			disabled={!$status.database.isRunning}
+		/>
 		{#if database.type === 'redis'}
-			<div class="grid grid-cols-2 items-center">
-				<Setting
-					id="appendOnly"
-					loading={publicLoading}
-					bind:setting={appendOnly}
-					on:click={() => changeSettings('appendOnly')}
-					title={$t('database.change_append_only_mode')}
-					description={$t('database.warning_append_only')}
-				/>
-			</div>
+			<Setting
+				id="appendOnly"
+				loading={publicLoading}
+				bind:setting={appendOnly}
+				on:click={() => changeSettings('appendOnly')}
+				title={$t('database.change_append_only_mode')}
+				description={$t('database.warning_append_only')}
+			/>
 		{/if}
 	</div>
 </div>

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

@@ -9,11 +9,9 @@
 <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="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
 		/>
 	</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>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -36,7 +34,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100"
+		<label for="rootUser"
 			>Root Password <Explainer
 				explanation="Could be changed while the database is running."
 			/></label

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

@@ -7,11 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MariaDB</div>
+	<h1 class="title">MariaDB</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+		<label for="defaultDatabase" 
 			>{$t('database.default_database')}</label
 		>
 		<CopyPasswordField
@@ -25,7 +25,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser" >{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -36,7 +36,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword" 
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
@@ -51,7 +51,7 @@
 		/>
 	</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>
+		<label for="rootUser" >{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -62,8 +62,9 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label
+		<label for="rootUserPassword" 
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}

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

@@ -7,11 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MongoDB</div>
+	<h1 class="title">MongoDB</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			placeholder={$t('forms.generated_automatically_after_start')}
 			id="rootUser"
@@ -22,7 +22,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+		<label for="rootUserPassword"
 			>{$t('forms.roots_password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>

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

@@ -7,13 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MySQL</div>
+	<h1 class="title">MySQL</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -36,7 +34,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword"
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
@@ -51,7 +49,7 @@
 		/>
 	</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>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -62,7 +60,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+		<label for="rootUserPassword"
 			>{$t('forms.roots_password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>

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

@@ -7,13 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">PostgreSQL</div>
+	<h1 class="title">PostgreSQL</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100"
+		<label for="rootUser"
 			>Postgres User Password <Explainer
 				explanation="Could be changed while the database is running."
 			/></label
@@ -41,7 +39,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -52,7 +50,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword"
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>

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

@@ -7,11 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">Redis</div>
+	<h1 class="title">Redis</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword" 
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>

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

@@ -62,6 +62,7 @@
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import DatabaseLinks from './_DatabaseLinks.svelte';
 	const { id } = $page.params;
 
 	$status.database.isPublic = database.settings.isPublic || false;
@@ -76,7 +77,7 @@
 			$status.database.initialLoading = true;
 			try {
 				await del(`/databases/${database.id}`, { id: database.id, force });
-				return await goto('/', { replaceState: true });
+				return await window.location.assign('/');
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
@@ -149,104 +150,123 @@
 </script>
 
 {#if id !== 'new'}
-	<nav class="nav-side">
-		{#if database.type && database.destinationDockerId && database.version}
-			{#if $status.database.isExited}
-				<a
-					id="exited"
-					href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
-					class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
-					sveltekit:prefetch
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentcolor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
+	<nav class="header lg:flex-row flex-col-reverse">
+		<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
+			<div class="flex flex-col items-center justify-center">
+				<div class="title">
+					{#if $page.url.pathname === `/databases/${id}`}
+						Configurations
+					{:else if $page.url.pathname === `/databases/${id}/logs`}
+						Database Logs
+					{:else if $page.url.pathname === `/databases/${id}/configuration/type`}
+						Select a Database Type
+					{:else if $page.url.pathname === `/databases/${id}/configuration/version`}
+						Select a Database Version
+					{:else if $page.url.pathname === `/databases/${id}/configuration/destination`}
+						Select a Destination
+					{/if}
+				</div>
+			</div>
+			<DatabaseLinks {database} />
+		</div>
+		<div class="lg:block hidden flex-1" />
+		<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
+			{#if database.type && database.destinationDockerId && database.version}
+				{#if $status.database.isExited}
+					<a
+						id="exited"
+						href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
+						class="icons bg-transparent text-red-500 tooltip-error"
+						sveltekit:prefetch
 					>
-						<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="#exited">{'Service exited with an error!'}</Tooltip>
-			{/if}
-			{#if $status.database.initialLoading}
-				<button
-					class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
-				>
-					<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="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="#exited">{'Service exited with an error!'}</Tooltip>
+				{/if}
+				{#if $status.database.initialLoading}
+					<button class="icons flex animate-spin  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.database.isRunning}
+					<button
+						id="stop"
+						on:click={stopDatabase}
+						type="submit"
+						disabled={!$appSession.isAdmin}
+						class="icons bg-transparent text-red-500"
 					>
-						<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.database.isRunning}
-				<button
-					id="stop"
-					on:click={stopDatabase}
-					type="submit"
-					disabled={!$appSession.isAdmin}
-					class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<rect x="6" y="5" width="4" height="14" rx="1" />
-						<rect x="14" y="5" width="4" height="14" rx="1" />
-					</svg>
-				</button>
-				<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
-			{:else}
-				<button
-					id="start"
-					on:click={startDatabase}
-					type="submit"
-					disabled={!$appSession.isAdmin}
-					class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
-					><svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path d="M7 4v16l13 -8z" />
-					</svg>
-				</button>
-				<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-6 h-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<rect x="6" y="5" width="4" height="14" rx="1" />
+							<rect x="14" y="5" width="4" height="14" rx="1" />
+						</svg>
+					</button>
+					<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
+				{:else}
+					<button
+						id="start"
+						on:click={startDatabase}
+						type="submit"
+						disabled={!$appSession.isAdmin}
+						class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-6 h-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<path d="M7 4v16l13 -8z" />
+						</svg>
+					</button>
+					<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
+				{/if}
 			{/if}
 			<div class="border border-stone-700 h-8" />
 			<a
@@ -282,34 +302,6 @@
 				></a
 			>
 			<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
-			<a
-				href="/databases/{id}/secrets"
-				sveltekit:prefetch
-				class="hover:text-pink-500 rounded"
-				class:text-pink-500={$page.url.pathname === `/databases/${id}/secrets`}
-				class:bg-coolgray-500={$page.url.pathname === `/databases/${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>
 			<div class="border border-stone-700 h-8" />
 			<a
 				id="databaselogs"
@@ -340,29 +332,28 @@
 				></a
 			>
 			<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
-		{/if}
+			{#if forceDelete}
+				<button
+					on:click={() => deleteDatabase(true)}
+					type="submit"
+					disabled={!$appSession.isAdmin}
+					class:hover:text-red-500={$appSession.isAdmin}
+					class="icons bg-transparent text-sm"
+				>
+					Force Delete</button
+				>{:else}
+				<button
+					id="delete"
+					on:click={() => deleteDatabase(false)}
+					type="submit"
+					disabled={!$appSession.isAdmin}
+					class:hover:text-red-500={$appSession.isAdmin}
+					class="icons bg-transparent text-sm"><DeleteIcon /></button
+				>
+			{/if}
 
-		{#if forceDelete}
-			<button
-				on:click={() => deleteDatabase(true)}
-				type="submit"
-				disabled={!$appSession.isAdmin}
-				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent text-sm"
-			>
-				Force Delete</button
-			>{:else}
-			<button
-				id="delete"
-				on:click={() => deleteDatabase(false)}
-				type="submit"
-				disabled={!$appSession.isAdmin}
-				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent text-sm"><DeleteIcon /></button
-			>
-		{/if}
-
-		<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
+			<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
+		</div>
 	</nav>
 {/if}
 <slot />

apps/ui/src/routes/databases/[id]/configuration/destination.svelte

@@ -53,11 +53,6 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_destination')}
-	</div>
-</div>
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">

apps/ui/src/routes/databases/[id]/configuration/type.svelte

@@ -47,10 +47,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_type')}</div>
-</div>
-
 <div class="flex flex-wrap justify-center">
 	{#each types as type}
 		<div class="p-2">

apps/ui/src/routes/databases/[id]/configuration/version.svelte

@@ -46,9 +46,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_version')}</div>
-</div>
 {#if from}
 	<div class="pb-10 text-center">
 		Warning: you are about to change the version of this database.<br />This could cause problem

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

@@ -48,18 +48,7 @@
 	});
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{database.name}</span>
-	</div>
-	<DatabaseLinks {database} />
-</div>
-
-<div class="mx-auto max-w-4xl px-6 py-4">
-	<div class="text-2xl font-bold">Database Usage</div>
+<div class="mx-auto max-w-6xl p-5">
 	<div class="text-center">
 		<div class="stat w-64">
 			<div class="stat-title">Used Memory / Memory Limit</div>

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

@@ -91,14 +91,6 @@
 	}
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Database Logs
-		</div>
-		<span class="text-xs">{database.name}</span>
-	</div>
-</div>
 <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
 	{#if logs.length === 0}
 		<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
@@ -112,7 +104,7 @@
 				<button
 					id="follow"
 					on:click={followBuild}
-					class="bg-transparent btn btn-sm"
+					class="bg-transparent btn btn-sm btn-link"
 					class:text-green-500={followingLogs}
 				>
 					<svg
@@ -134,16 +126,10 @@
 				</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"
-				bind:this={logsEl}
-				on:scroll={detect}
-			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1 lg:text-base text-[10px]">
+				{#each logs as log}
+					<p>{log + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}

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

@@ -42,8 +42,8 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
 			<svg
@@ -61,9 +61,9 @@
 			>
 		</button>
 	{/if}
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !databases || ownDatabases.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>

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

@@ -16,7 +16,7 @@
 	</div>
 </div>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	{#if destination.remoteEngine}
 		<RemoteDocker bind:destination {settings} {state} />
 	{:else}

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

@@ -141,40 +141,37 @@
 	}
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-	<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
-		<div class="title">{$t('forms.configuration')}</div>
-		{#if $appSession.isAdmin}
-			<button
-				type="submit"
-				class="btn btn-sm"
-				class:bg-destinations={!loading.save}
-				class:loading={loading.save}
-				disabled={loading.save}
-				>{$t('forms.save')}
-			</button>
-			<button
-				class="btn btn-sm"
-				class:loading={loading.restart}
-				class:bg-error={!loading.restart}
-				disabled={loading.restart}
-				on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
-			>
-		{/if}
+<form on:submit|preventDefault={handleSubmit} class="py-4">
+	<div class="grid gap-4 grid-cols-2 grid-rows-1">
+		<button
+			type="submit"
+			class="btn btn-sm w-full"
+			class:bg-destinations={!loading.save}
+			class:loading={loading.save}
+			disabled={loading.save}
+			>{$t('forms.save')}
+		</button>
+		<button
+			class="btn btn-sm w-full"
+			class:loading={loading.restart}
+			class:bg-error={!loading.restart}
+			disabled={loading.restart}
+			on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
+		>
 	</div>
-	<div class="grid lg:grid-cols-2 items-center px-10 ">
-		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+	<div class="grid gap-4 grid-cols-2 auto-rows-max mt-10 items-center">
+		<label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label>
 		<input
+			class="w-full"
 			name="name"
 			placeholder={$t('forms.name')}
 			disabled={!$appSession.isAdmin}
 			readonly={!$appSession.isAdmin}
 			bind:value={destination.name}
 		/>
-	</div>
-
-	<div class="grid lg:grid-cols-2 items-center px-10">
-		<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
+		<label for="engine" class="text-base font-bold text-stone-100 w-full"
+			>{$t('forms.engine')}</label
+		>
 		<CopyPasswordField
 			id="engine"
 			readonly
@@ -183,8 +180,6 @@
 			placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 			value={destination.engine}
 		/>
-	</div>
-	<div class="grid lg:grid-cols-2 items-center px-10">
 		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
@@ -194,9 +189,7 @@
 			placeholder="{$t('forms.default')}: coolify"
 			value={destination.network}
 		/>
-	</div>
-	{#if $appSession.teamId === '0'}
-		<div class="grid lg:grid-cols-2 items-center px-10">
+		{#if $appSession.teamId === '0'}
 			<Setting
 				id="changeProxySetting"
 				loading={loading.proxy}
@@ -210,6 +203,6 @@
 						: ''
 				}`}
 			/>
-		</div>
-	{/if}
+		{/if}
+	</div>
 </form>

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

@@ -31,9 +31,9 @@
 
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex items-center space-x-2 pb-5">
+		<div class="flex items-start lg:items-center space-x-0 lg:space-x-4 pb-5 flex-col space-y-4 lg:space-y-0">
 			<div class="title font-bold">{$t('forms.configuration')}</div>
-			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
+			<button type="submit" class="btn btn-sm bg-destinations w-full lg:w-fit" class:loading disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -41,12 +41,12 @@
 					: $t('forms.save')}</button
 			>
 		</div>
-		<div class="mt-2 grid grid-cols-2 items-center px-10">
+		<div class="mt-2 grid grid-cols-2 items-center lg:pl-10">
 			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 			<input
 				required
@@ -55,7 +55,7 @@
 				bind:value={payload.engine}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 			<input
 				required
@@ -65,7 +65,7 @@
 			/>
 		</div>
 		{#if $appSession.teamId === '0'}
-			<div class="grid grid-cols-2 items-center px-10">
+			<div class="grid grid-cols-2 items-center lg:pl-10">
 				<Setting
 					id="changeProxySetting"
 					bind:setting={payload.isCoolifyProxyUsed}

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

@@ -38,9 +38,9 @@
 </div>
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex items-center space-x-2 pb-5">
+		<div class="flex items-start lg:items-center space-x-0 lg:space-x-4 pb-5 flex-col lg:flex-row space-y-4 lg:space-y-0">
 			<div class="title font-bold">{$t('forms.configuration')}</div>
-			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
+			<button type="submit" class="btn btn-sm bg-destinations w-full lg:w-fit" class:loading disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -48,12 +48,12 @@
 					: $t('forms.save')}</button
 			>
 		</div>
-		<div class="mt-2 grid grid-cols-2 items-center px-10">
+		<div class="mt-2 grid grid-cols-2 items-center lg:pl-10">
 			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="remoteIpAddress" class="text-base font-bold text-stone-100"
 				>{$t('forms.ip_address')}</label
 			>
@@ -65,7 +65,7 @@
 			/>
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="remoteUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
 			<input
 				required
@@ -75,7 +75,7 @@
 			/>
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="remotePort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
 			<input
 				required
@@ -84,7 +84,7 @@
 				bind:value={payload.remotePort}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 			<input
 				required
@@ -93,7 +93,7 @@
 				bind:value={payload.network}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<Setting
 				id="isCoolifyProxyUsed"
 				bind:setting={payload.isCoolifyProxyUsed}

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

@@ -36,8 +36,8 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.destinations')}</h1>
 	{#if $appSession.isAdmin}
 		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
 			<svg
@@ -55,8 +55,9 @@
 			>
 		</a>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>

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

@@ -106,8 +106,8 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl tracking-tight font-bold">Identity and Access Management</h1>
 	<button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
 		<svg
 			class="h-6 w-6"
@@ -123,10 +123,11 @@
 			/></svg
 		>
 	</button>
-</div>
+</nav>
+<br />
 
 {#if invitations.length > 0}
-	<div class="mx-auto max-w-4xl px-6 py-4">
+	<div class="mx-auto max-w-6xl px-6 py-4">
 		<div class="title font-bold">Pending invitations</div>
 		<div class="pt-10 text-center">
 			{#each invitations as invitation}
@@ -148,7 +149,7 @@
 		</div>
 	</div>
 {/if}
-<div class="mx-auto max-w-4xl px-6 py-4">
+<div class="mx-auto max-w-6xl px-6 py-4">
 	{#if $appSession.teamId === '0' && accounts.length > 0}
 		<div class="title font-bold">Accounts</div>
 	{:else}
@@ -188,7 +189,7 @@
 	</div>
 </div>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	<div class="title font-bold">Teams</div>
 	<div class="flex-col items-center justify-center pt-10">
 		<div class="flex flex-row flex-wrap justify-center px-2 pb-10 md:flex-row">

apps/ui/src/routes/iam/team/[id]/index.svelte

@@ -87,7 +87,7 @@
 	<span class="arrow-right-applications px-1 text-fuchsia-500">></span>
 	<span class="pr-2">{team.name}</span>
 </div>
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	<form on:submit|preventDefault={handleSubmit} class=" py-4">
 		<div class="flex space-x-1 pb-5">
 			<div class="title font-bold">{$t('index.settings')}</div>

apps/ui/src/routes/index.svelte

@@ -28,11 +28,10 @@
 	export let destinations: any;
 
 	let filtered: any = setInitials();
-	import { get, post } from '$lib/api';
-	import Usage from '$lib/components/Usage.svelte';
+	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
-	import { asyncSleep } from '$lib/common';
-	import { appSession, search } from '$lib/store';
+	import { asyncSleep, getRndInteger } from '$lib/common';
+	import { appSession, search, addToast} from '$lib/store';
 
 	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
 	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
@@ -87,9 +86,7 @@
 		filtered.destinations = [];
 		filtered.otherDestinations = [];
 	}
-	function getRndInteger(min: number, max: number) {
-		return Math.floor(Math.random() * (max - min + 1)) + min;
-	}
+
 
 	async function getStatus(resources: any) {
 		const { id, buildPack, dualCerts } = resources;
@@ -188,6 +185,7 @@
 		return (
 			(service.name && service.name.toLowerCase().includes($search.toLowerCase())) ||
 			(service.type && service.type.toLowerCase().includes($search.toLowerCase())) ||
+			(service.fqdn && service.fqdn.toLowerCase().includes($search.toLowerCase())) ||
 			(service.version && service.version.toLowerCase().includes($search.toLowerCase())) ||
 			(service.destinationDockerId &&
 				service.destinationDocker.name.toLowerCase().includes($search.toLowerCase()))
@@ -272,18 +270,16 @@
 			filtered = setInitials();
 		}
 	}
+   
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
 	{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
 		<NewResource />
 	{/if}
-</div>
-<div class="container lg:mx-auto lg:p-0 px-8 p-5">
-	<!-- {#if $appSession.teamId === '0'}
-		<Usage />
-	{/if} -->
+</nav>
+<div class="container lg:mx-auto lg:p-0 px-8 pt-5">
 	{#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0}
 		<div class="form-control">
 			<div class="input-group flex w-full">
@@ -316,8 +312,8 @@
 					on:input={() => doSearch()}
 				/>
 			</div>
-			<label for="search" class="label w-full">
-				<span class="label-text text-xs flex flex-wrap gap-2  items-center">
+			<label for="search" class="label w-full mt-3">
+				<span class="label-text text-xs flex flex-wrap gap-2 items-center">
 					<button
 						class:bg-coollabs={$search === '!notmine'}
 						class="badge badge-lg text-white text-xs rounded"

apps/ui/src/routes/login.svelte

@@ -28,11 +28,7 @@
 			Cookies.set('token', token, {
 				path: '/'
 			});
-			$appSession.teamId = payload.teamId;
-			$appSession.userId = payload.userId;
-			$appSession.permission = payload.permission;
-			$appSession.isAdmin = payload.isAdmin;
-			return await goto('/');
+			return window.location.assign('/');
 		} catch (error) {
 			return errorNotification(error);
 		} finally {

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

@@ -29,15 +29,15 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Servers</div>
+<div class="header">
+	<h1 class="text-2xl font-bold">Servers</h1>
 </div>
 <div class="container lg:mx-auto lg:p-0 px-8 p-5">
 	{#if servers.length > 0}
 		<div class="grid grid-col gap-8 auto-cols-max grid-cols-1  p-4">
 			{#each servers as server}
 				<div class="no-underline mb-5">
-					<div class="w-full rounded bg-coolgray-100 indicator">
+					<div class="w-full rounded bg-coolgray-200 indicator">
 						{#if $appSession.teamId === '0'}
 							<Usage {server} />
 						{/if}
@@ -49,4 +49,3 @@
 		<h1 class="text-center text-xs">Nothing here.</h1>
 	{/if}
 </div>
-<div class="text-xs text-center">Remote servers will be here soon</div>

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

@@ -50,6 +50,8 @@
 
 <td>
 	<input
+		
+	style="min-width: 350px !important;"
 		id={isNewSecret ? 'secretName' : 'secretNameNew'}
 		bind:value={name}
 		required
@@ -67,6 +69,7 @@
 		bind:value
 		required
 		placeholder="J$#@UIO%HO#$U%H"
+		inputStyle="min-width: 350px; !important"
 	/>
 </td>
 

apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte

@@ -10,117 +10,84 @@
 	<div class="title">Appwrite</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="opensslKeyV1">Encryption Key</label>
-	<CopyPasswordField
-		name="opensslKeyV1"
-		id="opensslKeyV1"
-		isPasswordField
-		value={service.appwrite.opensslKeyV1}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="opensslKeyV1">Encryption Key</label>
+		<CopyPasswordField
+			name="opensslKeyV1"
+			id="opensslKeyV1"
+			isPasswordField
+			value={service.appwrite.opensslKeyV1}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="executorSecret">Executor Secret</label>
+		<CopyPasswordField
+			name="executorSecret"
+			id="executorSecret"
+			isPasswordField
+			value={service.appwrite.executorSecret}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="executorSecret">Executor Secret</label>
-	<CopyPasswordField
-		name="executorSecret"
-		id="executorSecret"
-		isPasswordField
-		value={service.appwrite.executorSecret}
-		readonly
-		disabled
-	/>
-</div>
-
-<!-- <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">Redis</div>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="redisPassword">Password</label>
-	<CopyPasswordField
-		name="redisPassword"
-		id="redisPassword"
-		isPasswordField
-		value={service.appwrite.redisPassword}
-		readonly
-		disabled
-	/>
-</div> -->
-
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MariaDB</div>
 </div>
-
-<!-- <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbHost">MariaDB Host</label>
-	<CopyPasswordField
-		name="mariadbHost"
-		id="mariadbHost"
-		value={service.appwrite.mariadbHost}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPort">MariaDB Port</label>
-	<CopyPasswordField
-		name="mariadbPort"
-		id="mariadbPort"
-		value={service.appwrite.mariadbPort}
-		readonly
-		disabled
-	/>
-</div> -->
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbUser">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="mariadbUser"
-		id="mariadbUser"
-		value={service.appwrite.mariadbUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="mariadbPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="mariadbPassword"
-		value={service.appwrite.mariadbPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUser">Root User</label>
-	<CopyPasswordField
-		name="mariadbRootUser"
-		id="mariadbRootUser"
-		value={service.appwrite.mariadbRootUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUserPassword">Root Password</label>
-	<CopyPasswordField
-		id="mariadbRootUserPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="mariadbRootUserPassword"
-		value={service.appwrite.mariadbRootUserPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbDatabase">{$t('index.database')}</label>
-	<CopyPasswordField
-		name="mariadbDatabase"
-		id="mariadbDatabase"
-		value={service.appwrite.mariadbDatabase}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">	
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mariadbUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="mariadbUser"
+			id="mariadbUser"
+			value={service.appwrite.mariadbUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2 ">
+		<label for="mariadbPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="mariadbPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="mariadbPassword"
+			value={service.appwrite.mariadbPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mariadbRootUser">Root User</label>
+		<CopyPasswordField
+			name="mariadbRootUser"
+			id="mariadbRootUser"
+			value={service.appwrite.mariadbRootUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2 ">
+		<label for="mariadbRootUserPassword">Root Password</label>
+		<CopyPasswordField
+			id="mariadbRootUserPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="mariadbRootUserPassword"
+			value={service.appwrite.mariadbRootUserPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mariadbDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="mariadbDatabase"
+			id="mariadbDatabase"
+			value={service.appwrite.mariadbDatabase}
+			readonly
+			disabled
+		/>
+	</div>
 </div>