feat: Able to change service version/tag

src/lib/components/common.ts

@@ -43,3 +43,142 @@ export function changeQueryParams(buildId) {
 	queryParams.set('buildId', buildId);
 	return history.pushState(null, null, '?' + queryParams.toString());
 }
+
+export const supportedDatabaseTypesAndVersions = [
+	{
+		name: 'mongodb',
+		fancyName: 'MongoDB',
+		baseImage: 'bitnami/mongodb',
+		versions: ['5.0.5', '4.4.11', '4.2.18', '4.0.27']
+	},
+	{ name: 'mysql', fancyName: 'MySQL', baseImage: 'bitnami/mysql', versions: ['8.0.27', '5.7.36'] },
+	{
+		name: 'postgresql',
+		fancyName: 'PostgreSQL',
+		baseImage: 'bitnami/postgresql',
+		versions: ['14.1.0', '13.5.0', '12.9.0', '11.14.0', '10.19.0', '9.6.24']
+	},
+	{
+		name: 'redis',
+		fancyName: 'Redis',
+		baseImage: 'bitnami/redis',
+		versions: ['6.2.6', '6.0.16', '5.0.14']
+	},
+	{ name: 'couchdb', fancyName: 'CouchDB', baseImage: 'bitnami/couchdb', versions: ['3.2.1'] }
+];
+export const supportedServiceTypesAndVersions = [
+	{
+		name: 'plausibleanalytics',
+		fancyName: 'Plausible Analytics',
+		baseImage: 'plausible/analytics',
+		images: ['bitnami/postgresql:13.2.0', 'yandex/clickhouse-server:21.3.2.5'],
+		versions: ['latest', 'stable'],
+		recommendedVersion: 'stable',
+		ports: {
+			main: 8000
+		}
+	},
+	{
+		name: 'nocodb',
+		fancyName: 'NocoDB',
+		baseImage: 'nocodb/nocodb',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 8080
+		}
+	},
+	{
+		name: 'minio',
+		fancyName: 'MinIO',
+		baseImage: 'minio/minio',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 9001
+		}
+	},
+	{
+		name: 'vscodeserver',
+		fancyName: 'VSCode Server',
+		baseImage: 'codercom/code-server',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 8080
+		}
+	},
+	{
+		name: 'wordpress',
+		fancyName: 'Wordpress',
+		baseImage: 'wordpress',
+		images: ['bitnami/mysql:5.7'],
+		versions: ['latest', 'php8.1', 'php8.0', 'php7.4', 'php7.3'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 80
+		}
+	},
+	{
+		name: 'vaultwarden',
+		fancyName: 'Vaultwarden',
+		baseImage: 'vaultwarden/server',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 80
+		}
+	},
+	{
+		name: 'languagetool',
+		fancyName: 'LanguageTool',
+		baseImage: 'silviof/docker-languagetool',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 8010
+		}
+	},
+	{
+		name: 'n8n',
+		fancyName: 'n8n',
+		baseImage: 'n8nio/n8n',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 5678
+		}
+	},
+	{
+		name: 'uptimekuma',
+		fancyName: 'Uptime Kuma',
+		baseImage: 'louislam/uptime-kuma',
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 3001
+		}
+	},
+	{
+		name: 'ghost',
+		fancyName: 'Ghost',
+		baseImage: 'bitnami/ghost',
+		images: ['bitnami/mariadb'],
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 2368
+		}
+	},
+	{
+		name: 'meilisearch',
+		fancyName: 'Meilisearch',
+		baseImage: 'getmeili/meilisearch',
+		images: [],
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 7700
+		}
+	}
+];

src/lib/database/common.ts

@@ -1,5 +1,9 @@
 import { dev } from '$app/env';
 import { sentry } from '$lib/common';
+import {
+	supportedDatabaseTypesAndVersions,
+	supportedServiceTypesAndVersions
+} from '$lib/components/common';
 import * as Prisma from '@prisma/client';
 import { default as ProdPrisma } from '@prisma/client';
 import type { PrismaClientOptions } from '@prisma/client/runtime';
@@ -82,134 +86,6 @@ export async function generateSshKeyPair(): Promise<{ publicKey: string; private
 	});
 }
 
-export const supportedDatabaseTypesAndVersions = [
-	{
-		name: 'mongodb',
-		fancyName: 'MongoDB',
-		baseImage: 'bitnami/mongodb',
-		versions: ['5.0.5', '4.4.11', '4.2.18', '4.0.27']
-	},
-	{ name: 'mysql', fancyName: 'MySQL', baseImage: 'bitnami/mysql', versions: ['8.0.27', '5.7.36'] },
-	{
-		name: 'postgresql',
-		fancyName: 'PostgreSQL',
-		baseImage: 'bitnami/postgresql',
-		versions: ['14.1.0', '13.5.0', '12.9.0', '11.14.0', '10.19.0', '9.6.24']
-	},
-	{
-		name: 'redis',
-		fancyName: 'Redis',
-		baseImage: 'bitnami/redis',
-		versions: ['6.2.6', '6.0.16', '5.0.14']
-	},
-	{ name: 'couchdb', fancyName: 'CouchDB', baseImage: 'bitnami/couchdb', versions: ['3.2.1'] }
-];
-export const supportedServiceTypesAndVersions = [
-	{
-		name: 'plausibleanalytics',
-		fancyName: 'Plausible Analytics',
-		baseImage: 'plausible/analytics',
-		images: ['bitnami/postgresql:13.2.0', 'yandex/clickhouse-server:21.3.2.5'],
-		versions: ['latest', 'stable'],
-		ports: {
-			main: 8000
-		}
-	},
-	{
-		name: 'nocodb',
-		fancyName: 'NocoDB',
-		baseImage: 'nocodb/nocodb',
-		versions: ['latest'],
-		ports: {
-			main: 8080
-		}
-	},
-	{
-		name: 'minio',
-		fancyName: 'MinIO',
-		baseImage: 'minio/minio',
-		versions: ['latest'],
-		ports: {
-			main: 9001
-		}
-	},
-	{
-		name: 'vscodeserver',
-		fancyName: 'VSCode Server',
-		baseImage: 'codercom/code-server',
-		versions: ['latest'],
-		ports: {
-			main: 8080
-		}
-	},
-	{
-		name: 'wordpress',
-		fancyName: 'Wordpress',
-		baseImage: 'wordpress',
-		images: ['bitnami/mysql:5.7'],
-		versions: ['latest', 'php8.1', 'php8.0', 'php7.4', 'php7.3'],
-		ports: {
-			main: 80
-		}
-	},
-	{
-		name: 'vaultwarden',
-		fancyName: 'Vaultwarden',
-		baseImage: 'vaultwarden/server',
-		versions: ['latest'],
-		ports: {
-			main: 80
-		}
-	},
-	{
-		name: 'languagetool',
-		fancyName: 'LanguageTool',
-		baseImage: 'silviof/docker-languagetool',
-		versions: ['latest'],
-		ports: {
-			main: 8010
-		}
-	},
-	{
-		name: 'n8n',
-		fancyName: 'n8n',
-		baseImage: 'n8nio/n8n',
-		versions: ['latest'],
-		ports: {
-			main: 5678
-		}
-	},
-	{
-		name: 'uptimekuma',
-		fancyName: 'Uptime Kuma',
-		baseImage: 'louislam/uptime-kuma',
-		versions: ['latest'],
-		ports: {
-			main: 3001
-		}
-	},
-	{
-		name: 'ghost',
-		fancyName: 'Ghost',
-		baseImage: 'bitnami/ghost',
-		images: ['bitnami/mariadb'],
-		versions: ['latest'],
-		ports: {
-			main: 2368
-		}
-	},
-	{
-		name: 'meilisearch',
-		fancyName: 'Meilisearch',
-		baseImage: 'getmeili/meilisearch',
-		images: [],
-		versions: ['latest'],
-		ports: {
-			main: 7700
-		}
-	}
-];
-
 export function getVersions(type) {
 	const found = supportedDatabaseTypesAndVersions.find((t) => t.name === type);
 	if (found) {

src/lib/haproxy/configuration.ts

@@ -6,6 +6,7 @@ import crypto from 'crypto';
 import * as db from '$lib/database';
 import { checkContainer, checkHAProxy } from '.';
 import { asyncExecShell, getDomain, getEngine } from '$lib/common';
+import { supportedServiceTypesAndVersions } from '$lib/components/common';
 
 const url = dev ? 'http://localhost:5555' : 'http://coolify-haproxy:5555';
 
@@ -223,7 +224,7 @@ export async function configureHAProxy() {
 			const { fqdn, id, type, destinationDocker, destinationDockerId, updatedAt } = service;
 			if (destinationDockerId) {
 				const { engine } = destinationDocker;
-				const found = db.supportedServiceTypesAndVersions.find((a) => a.name === type);
+				const found = supportedServiceTypesAndVersions.find((a) => a.name === type);
 				if (found) {
 					const port = found.ports.main;
 					const publicPort = service[type]?.publicPort;

src/lib/letsencrypt/index.ts

@@ -4,6 +4,7 @@ import * as db from '$lib/database';
 import { dev } from '$app/env';
 import cuid from 'cuid';
 import getPort, { portNumbers } from 'get-port';
+import { supportedServiceTypesAndVersions } from '$lib/components/common';
 
 export async function letsEncrypt(domain, id = null, isCoolify = false) {
 	try {
@@ -160,7 +161,7 @@ export async function generateSSLCerts() {
 					type,
 					destinationDocker: { engine }
 				} = service;
-				const found = db.supportedServiceTypesAndVersions.find((a) => a.name === type);
+				const found = supportedServiceTypesAndVersions.find((a) => a.name === type);
 				if (found) {
 					const domain = getDomain(fqdn);
 					const isHttps = fqdn.startsWith('https://');

src/routes/databases/[id]/configuration/type.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedDatabaseTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedDatabaseTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {

src/routes/databases/[id]/configuration/version.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedDatabaseTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedDatabaseTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {

src/routes/services/[id]/_Services/_Services.svelte

@@ -92,7 +92,22 @@
 					/>
 				</div>
 			</div>
-
+			<div class="grid grid-cols-2 items-center px-10">
+				<label for="buildPack" class="text-base font-bold text-stone-100">Version / Tag</label>
+				<a
+					href={$session.isAdmin
+						? `/services/${id}/configuration/version?from=/services/${id}`
+						: ''}
+					class="no-underline"
+				>
+					<input
+						value={service.version}
+						id="service"
+						disabled
+						class="cursor-pointer hover:bg-coolgray-500"
+					/></a
+				>
+			</div>
 			<div class="grid grid-cols-2 items-center px-10">
 				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
 				<div>

src/routes/services/[id]/configuration/type.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedServiceTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedServiceTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {

src/routes/services/[id]/configuration/version.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedServiceTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedServiceTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {
@@ -14,6 +15,7 @@ export const get: RequestHandler = async (event) => {
 		return {
 			status: 200,
 			body: {
+				type,
 				versions: supportedServiceTypesAndVersions.find((name) => name.name === type).versions
 			}
 		};

src/routes/services/[id]/configuration/version.svelte

@@ -31,11 +31,16 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { supportedServiceTypesAndVersions } from '$lib/components/common';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
 
 	export let versions;
+	export let type;
+	let recommendedVersion = supportedServiceTypesAndVersions.find(
+		({ name }) => name === type
+	)?.recommendedVersion;
 	async function handleSubmit(version) {
 		try {
 			await post(`/services/${id}/configuration/version.json`, { version });
@@ -49,13 +54,26 @@
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Select a Service version</div>
 </div>
-
+{#if from}
+	<div class="pb-10 text-center">
+		Warning: you are about to change the version of this service.<br />This could cause problem
+		after you restart the service,
+		<span class="font-bold text-pink-600">like losing your data, incompatibility issues, etc</span
+		>.<br />Only do if you know what you are doing.
+	</div>
+{/if}
 <div class="flex flex-wrap justify-center">
 	{#each versions as version}
 		<div class="p-2">
 			<form on:submit|preventDefault={() => handleSubmit(version)}>
-				<button type="submit" class="box-selection text-xl font-bold hover:bg-pink-600"
-					>{version}</button
+				<button
+					type="submit"
+					class:bg-pink-500={recommendedVersion === version}
+					class="box-selection relative flex text-xl font-bold hover:bg-pink-600"
+					>{version}
+					{#if recommendedVersion === version}
+						<span class="absolute bottom-0 pb-2 text-xs">recommended</span>
+					{/if}</button
 				>
 			</form>
 		</div>