Merge pull request #396 from Cyril-Beeckman/main

[WIP] Added MariaDB database

README.md

@@ -52,7 +52,6 @@ These are the predefined build packs, but with the Docker build pack, you can ho
 - NuxtJS
 - NextJS
 - React/Preact
-- NextJS
 - Gatsby
 - Svelte
 - PHP
@@ -65,6 +64,7 @@ These are the predefined build packs, but with the Docker build pack, you can ho
 One-click database is ready to be used internally or shared over the internet:
 
 - MongoDB
+- MariaDB
 - MySQL
 - PostgreSQL
 - CouchDB

src/lib/components/DatabaseLinks.svelte

@@ -3,6 +3,7 @@
 	import Clickhouse from './svg/databases/Clickhouse.svelte';
 	import CouchDb from './svg/databases/CouchDB.svelte';
 	import MongoDb from './svg/databases/MongoDB.svelte';
+	import MariaDb from './svg/databases/MariaDB.svelte';
 	import MySql from './svg/databases/MySQL.svelte';
 	import PostgreSql from './svg/databases/PostgreSQL.svelte';
 	import Redis from './svg/databases/Redis.svelte';
@@ -17,6 +18,8 @@
 		<MongoDb />
 	{:else if database.type === 'mysql'}
 		<MySql />
+	{:else if database.type === 'mariadb'}
+		<MariaDb />
 	{:else if database.type === 'postgresql'}
 		<PostgreSql />
 	{:else if database.type === 'redis'}

src/lib/components/common.ts

@@ -52,6 +52,12 @@ export const supportedDatabaseTypesAndVersions = [
 		versions: ['5.0', '4.4', '4.2']
 	},
 	{ name: 'mysql', fancyName: 'MySQL', baseImage: 'bitnami/mysql', versions: ['8.0', '5.7'] },
+	{
+		name: 'mariadb',
+		fancyName: 'MariaDB',
+		baseImage: 'bitnami/mariadb',
+		versions: ['10.7', '10.6', '10.5', '10.4', '10.3', '10.2']
+	},
 	{
 		name: 'postgresql',
 		fancyName: 'PostgreSQL',

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+	class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-10 w-10' : 'mx-auto w-8 h-8'}
+	xmlns:svg="http://www.w3.org/2000/svg"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 229.99999 168.95"
+	xml:space="preserve"
+>
+	<style type="text/css">
+		.st0 {
+			fill: #ffffff;
+		}
+		.st1 {
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+			fill: #1f305f;
+		}
+		.st2 {
+			fill: #c0765a;
+		}
+		.st3 {
+			fill: #1f305f;
+		}
+		.st4 {
+			fill: #a0624d;
+		}
+	</style>
+	<switch>
+		<g>
+			<g transform="translate(-1614.3646,-14.177857)">
+				<g>
+					<path
+						class="st1"
+						d="m 1812.22,38.13 c -2.73,0.09 -1.94,1.32 -7.85,2.78 -5.97,1.47 -13.19,0.57 -19.61,3.27 -16.8,7.04 -19.52,34.26 -39.53,44.79 -13.12,7.41 -26.5,9.11 -38.46,12.86 -9.6,3.85 -15.57,6.4 -22.61,12.47 -5.46,4.71 -6.79,9.28 -12.5,15.19 -5.79,7.87 -27.74,0.88 -33.39,10.75 2.98,1.93 4.7,2.46 9.93,1.77 -1.08,2.05 -7.96,4.75 -6.71,7.77 0,0 16.63,3.03 30.65,-5.43 6.54,-2.66 12.67,-8.29 22.83,-9.64 13.16,-1.75 27.99,2.76 43.9,4.03 -3.29,6.5 -6.68,10.34 -10.31,15.7 -1.12,1.21 0.96,2.28 4.82,1.55 6.94,-1.72 11.97,-3.58 16.96,-7.03 6.51,-4.49 9.31,-8.6 14.8,-15.11 4.77,7.65 21.59,9.33 25.04,2.72 -6.42,-2.72 -7.79,-16.87 -5.59,-22.98 2.6,-5.82 4.47,-14.05 6.57,-21.7 1.89,-6.89 3.06,-17.4 5.32,-22.78 2.7,-6.69 7.95,-8.78 11.89,-12.33 3.94,-3.55 7.86,-6.51 7.74,-14.63 -0.04,-2.64 -1.4,-4.1 -3.89,-4.02 z"
+					/>
+					<path
+						class="st2"
+						d="m 1643.29,148.38 c 10.31,0.31 13.11,0.04 21.26,-3.5 6.93,-3.01 16.2,-11.12 24.39,-13.74 12.02,-3.86 24.91,-3.28 37.7,-1.77 4.28,0.51 8.58,1.22 11.65,0.89 4.79,-2.94 5.02,-10.92 7.99,-11.56 -0.81,15.44 -7.43,25.32 -14.05,34.28 13.95,-2.46 23.27,-11.17 28.91,-21.95 1.71,-3.27 4.55,-8.62 5.85,-12.3 1.03,2.44 -1.34,3.99 -0.23,6.65 8.98,-7.41 13.22,-15.85 16.86,-28.21 4.22,-14.3 8.55,-26.59 11.27,-30.82 2.65,-4.13 6.78,-6.68 10.55,-9.32 4.28,-3.01 8.11,-6.14 8.77,-11.87 -4.52,-0.42 -5.56,-1.46 -6.23,-3.74 -2.26,1.27 -4.34,1.55 -6.69,1.62 -2.04,0.06 -4.28,-0.03 -7.02,0.25 -22.63,2.32 -23.68,24.44 -40.13,40.68 -1.06,1.03 -2.87,2.55 -4.07,3.45 -5.08,3.79 -10.52,5.87 -16.25,8.06 -9.28,3.54 -18.08,4.57 -26.78,7.63 -6.39,2.24 -12.33,4.81 -17.58,8.4 -1.31,0.9 -3.09,2.5 -4.23,3.43 -3.08,2.52 -5.1,5.31 -7.06,8.19 -2.02,2.96 -3.96,6.01 -6.93,8.92 -4.81,4.72 -22.77,1.38 -29.1,5.76 -0.7,0.49 -1.27,1.07 -1.65,1.77 3.45,1.57 5.76,0.61 9.73,1.04 0.49,3.79 -8.22,6.03 -6.93,7.76 z"
+					/>
+					<path
+						class="st1"
+						d="m 1786.73,52.65 c 3.2,2.78 9.92,0.55 8.72,-4.98 -4.98,-0.42 -7.86,1.27 -8.72,4.98 z"
+					/>
+					<path
+						class="st3"
+						d="m 1809.06,46.18 c -0.85,1.79 -2.48,4.09 -2.48,8.64 -0.01,0.78 -0.59,1.32 -0.6,0.11 0.04,-4.45 1.22,-6.37 2.47,-8.89 0.57,-1.03 0.92,-0.61 0.61,0.14 z"
+					/>
+					<path
+						class="st3"
+						d="m 1808.2,45.51 c -1.01,1.7 -3.43,4.81 -3.82,9.35 -0.07,0.78 -0.71,1.26 -0.61,0.06 0.44,-4.42 2.37,-7.19 3.84,-9.6 0.66,-0.98 0.97,-0.53 0.59,0.19 z"
+					/>
+					<path
+						class="st3"
+						d="m 1807.42,44.62 c -1.15,1.61 -4.87,5.35 -5.65,9.83 -0.14,0.77 -0.81,1.19 -0.61,0.01 0.81,-4.37 4.02,-7.81 5.68,-10.08 0.74,-0.93 1.02,-0.45 0.58,0.24 z"
+					/>
+					<path
+						class="st3"
+						d="m 1806.72,43.62 c -1.36,1.44 -5.8,6.2 -7.2,10.53 -0.25,0.74 -0.97,1.07 -0.61,-0.08 1.41,-4.22 5.3,-8.76 7.27,-10.77 0.87,-0.81 1.07,-0.29 0.54,0.32 z"
+					/>
+				</g>
+			</g>
+		</g>
+		<rect x="0" y="0" class="st0" width="482.13" height="168.95" />
+	</switch>
+</svg>

src/lib/database/common.ts

@@ -127,60 +127,73 @@ export function getServiceImages(type: string): string[] {
 
 export function generateDatabaseConfiguration(database: Database & { settings: DatabaseSettings }):
 	| {
-			volume: string;
+		volume: string;
-			image: string;
+		image: string;
-			ulimits: Record<string, unknown>;
+		ulimits: Record<string, unknown>;
-			privatePort: number;
+		privatePort: number;
-			environmentVariables: {
+		environmentVariables: {
-				MYSQL_DATABASE: string;
+			MYSQL_DATABASE: string;
-				MYSQL_PASSWORD: string;
+			MYSQL_PASSWORD: string;
-				MYSQL_ROOT_USER: string;
+			MYSQL_ROOT_USER: string;
-				MYSQL_USER: string;
+			MYSQL_USER: string;
-				MYSQL_ROOT_PASSWORD: string;
+			MYSQL_ROOT_PASSWORD: string;
-			};
+		};
-	  }
+	}
 	| {
-			volume: string;
+		volume: string;
-			image: string;
+		image: string;
-			ulimits: Record<string, unknown>;
+		ulimits: Record<string, unknown>;
-			privatePort: number;
+		privatePort: number;
-			environmentVariables: {
+		environmentVariables: {
-				MONGODB_ROOT_USER: string;
+			MONGODB_ROOT_USER: string;
-				MONGODB_ROOT_PASSWORD: string;
+			MONGODB_ROOT_PASSWORD: string;
-			};
+		};
-	  }
+	}
 	| {
-			volume: string;
+		volume: string;
-			image: string;
+		image: string;
-			ulimits: Record<string, unknown>;
+		ulimits: Record<string, unknown>;
-			privatePort: number;
+		privatePort: number;
-			environmentVariables: {
+		environmentVariables: {
-				POSTGRESQL_POSTGRES_PASSWORD: string;
+			MARIADB_ROOT_USER: string;
-				POSTGRESQL_USERNAME: string;
+			MARIADB_ROOT_PASSWORD: string;
-				POSTGRESQL_PASSWORD: string;
+			MARIADB_USER: string;
-				POSTGRESQL_DATABASE: string;
+			MARIADB_PASSWORD: string;
-			};
+			MARIADB_DATABASE: string;
-	  }
+		};
+	}
 	| {
-			volume: string;
+		volume: string;
-			image: string;
+		image: string;
-			ulimits: Record<string, unknown>;
+		ulimits: Record<string, unknown>;
-			privatePort: number;
+		privatePort: number;
-			environmentVariables: {
+		environmentVariables: {
-				REDIS_AOF_ENABLED: string;
+			POSTGRESQL_POSTGRES_PASSWORD: string;
-				REDIS_PASSWORD: string;
+			POSTGRESQL_USERNAME: string;
-			};
+			POSTGRESQL_PASSWORD: string;
-	  }
+			POSTGRESQL_DATABASE: string;
+		};
+	}
 	| {
-			volume: string;
+		volume: string;
-			image: string;
+		image: string;
-			ulimits: Record<string, unknown>;
+		ulimits: Record<string, unknown>;
-			privatePort: number;
+		privatePort: number;
-			environmentVariables: {
+		environmentVariables: {
-				COUCHDB_PASSWORD: string;
+			REDIS_AOF_ENABLED: string;
-				COUCHDB_USER: string;
+			REDIS_PASSWORD: string;
-			};
+		};
-	  } {
+	}
+	| {
+		volume: string;
+		image: string;
+		ulimits: Record<string, unknown>;
+		privatePort: number;
+		environmentVariables: {
+			COUCHDB_PASSWORD: string;
+			COUCHDB_USER: string;
+		};
+	} {
 	const {
 		id,
 		dbUser,
@@ -207,6 +220,20 @@ export function generateDatabaseConfiguration(database: Database & { settings: D
 			volume: `${id}-${type}-data:/bitnami/mysql/data`,
 			ulimits: {}
 		};
+	} else if (type === 'mariadb') {
+		return {
+			privatePort: 3306,
+			environmentVariables: {
+				MARIADB_ROOT_USER: rootUser,
+				MARIADB_ROOT_PASSWORD: rootUserPassword,
+				MARIADB_USER: dbUser,
+				MARIADB_PASSWORD: dbUserPassword,
+				MARIADB_DATABASE: defaultDatabase
+			},
+			image: `${baseImage}:${version}`,
+			volume: `${id}-${type}-data:/bitnami/mariadb`,
+			ulimits: {}
+		};
 	} else if (type === 'mongodb') {
 		return {
 			privatePort: 27017,

src/lib/database/databases.ts

@@ -184,6 +184,10 @@ export async function updatePasswordInDb(database, user, newPassword, isRoot) {
 			await asyncExecShell(
 				`DOCKER_HOST=${host} docker exec ${id} mysql -u ${rootUser} -p${rootUserPassword} -e \"ALTER USER '${user}'@'%' IDENTIFIED WITH caching_sha2_password BY '${newPassword}';\"`
 			);
+		} else if (type === 'mariadb') {
+			await asyncExecShell(
+				`DOCKER_HOST=${host} docker exec ${id} mysql -u ${rootUser} -p${rootUserPassword} -e \"SET PASSWORD FOR '${user}'@'%' = PASSWORD('${newPassword}');\"`
+			);
 		} else if (type === 'postgresql') {
 			if (isRoot) {
 				await asyncExecShell(

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

@@ -11,6 +11,7 @@
 
 	import MySql from './_MySQL.svelte';
 	import MongoDb from './_MongoDB.svelte';
+	import MariaDb from './_MariaDB.svelte';
 	import PostgreSql from './_PostgreSQL.svelte';
 	import Redis from './_Redis.svelte';
 	import CouchDb from './_CouchDb.svelte';
@@ -190,6 +191,8 @@
 				<PostgreSql bind:database {isRunning} />
 			{:else if database.type === 'mongodb'}
 				<MongoDb bind:database {isRunning} />
+			{:else if database.type === 'mariadb'}
+				<MariaDb bind:database {isRunning} />
 			{:else if database.type === 'redis'}
 				<Redis bind:database {isRunning} />
 			{:else if database.type === 'couchdb'}

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

@@ -0,0 +1,79 @@
+<script>
+	export let database;
+	export let isRunning;
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">MariaDB</div>
+</div>
+<div class="space-y-2 px-10">
+	<div class="grid grid-cols-2 items-center">
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+			>{$t('database.default_database')}</label
+		>
+		<CopyPasswordField
+			required
+			readonly={database.defaultDatabase}
+			disabled={database.defaultDatabase}
+			placeholder="{$t('forms.eg')}: mydb"
+			id="defaultDatabase"
+			name="defaultDatabase"
+			bind:value={database.defaultDatabase}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<CopyPasswordField
+			readonly
+			disabled
+			placeholder={$t('forms.generated_automatically_after_start')}
+			id="dbUser"
+			name="dbUser"
+			value={database.dbUser}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.password')}</label
+		>
+		<CopyPasswordField
+			disabled={!isRunning}
+			readonly={!isRunning}
+			placeholder={$t('forms.generated_automatically_after_start')}
+			isPasswordField
+			id="dbUserPassword"
+			name="dbUserPassword"
+			bind:value={database.dbUserPassword}
+		/>
+		<Explainer text="Could be changed while the database is running." />
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<CopyPasswordField
+			readonly
+			disabled
+			placeholder={$t('forms.generated_automatically_after_start')}
+			id="rootUser"
+			name="rootUser"
+			value={database.rootUser}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.roots_password')}</label
+		>
+		<CopyPasswordField
+			disabled={!isRunning}
+			readonly={!isRunning}
+			placeholder={$t('forms.generated_automatically_after_start')}
+			isPasswordField
+			id="rootUserPassword"
+			name="rootUserPassword"
+			bind:value={database.rootUserPassword}
+		/>
+		<Explainer text="Could be changed while the database is running." />
+	</div>
+</div>

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

@@ -37,6 +37,7 @@
 	import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
 	import CouchDB from '$lib/components/svg/databases/CouchDB.svelte';
 	import MongoDB from '$lib/components/svg/databases/MongoDB.svelte';
+	import MariaDB from '$lib/components/svg/databases/MariaDB.svelte';
 	import MySQL from '$lib/components/svg/databases/MySQL.svelte';
 	import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
 	import Redis from '$lib/components/svg/databases/Redis.svelte';
@@ -68,6 +69,8 @@
 						<CouchDB isAbsolute />
 					{:else if type.name === 'mongodb'}
 						<MongoDB isAbsolute />
+					{:else if type.name === 'mariadb'}
+						<MariaDB isAbsolute />
 					{:else if type.name === 'mysql'}
 						<MySQL isAbsolute />
 					{:else if type.name === 'postgresql'}

src/routes/databases/index.svelte

@@ -3,6 +3,7 @@
 	import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
 	import CouchDB from '$lib/components/svg/databases/CouchDB.svelte';
 	import MongoDB from '$lib/components/svg/databases/MongoDB.svelte';
+	import MariaDB from '$lib/components/svg/databases/MariaDB.svelte';
 	import MySQL from '$lib/components/svg/databases/MySQL.svelte';
 	import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
 	import Redis from '$lib/components/svg/databases/Redis.svelte';
@@ -66,6 +67,8 @@
 								<MongoDB isAbsolute />
 							{:else if database.type === 'mysql'}
 								<MySQL isAbsolute />
+							{:else if database.type === 'mariadb'}
+								<MariaDB isAbsolute />
 							{:else if database.type === 'postgresql'}
 								<PostgreSQL isAbsolute />
 							{:else if database.type === 'redis'}
@@ -98,6 +101,8 @@
 									<CouchDB isAbsolute />
 								{:else if database.type === 'mongodb'}
 									<MongoDB isAbsolute />
+								{:else if database.type === 'mariadb'}
+									<MariaDB isAbsolute />
 								{:else if database.type === 'mysql'}
 									<MySQL isAbsolute />
 								{:else if database.type === 'postgresql'}