feat: Add persistent storage for services

prisma/migrations/20220418214843_persistent_storage_services/migration.sql

@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "ServicePersistentStorage" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "serviceId" TEXT NOT NULL,
+    "path" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "ServicePersistentStorage_serviceId_fkey" FOREIGN KEY ("serviceId") REFERENCES "Service" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ServicePersistentStorage_serviceId_path_key" ON "ServicePersistentStorage"("serviceId", "path");

prisma/schema.prisma

@@ -1,6 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["linux-musl"]
+  binaryTargets = ["native", "linux-musl"]
 }
 
 datasource db {
@@ -126,6 +126,17 @@ model ApplicationPersistentStorage {
   @@unique([applicationId, path])
 }
 
+model ServicePersistentStorage {
+  id        String   @id @default(cuid())
+  service   Service  @relation(fields: [serviceId], references: [id])
+  serviceId String
+  path      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@unique([serviceId, path])
+}
+
 model Secret {
   id            String      @id @default(cuid())
   name          String
@@ -285,6 +296,7 @@ model Service {
   ghost               Ghost?
   serviceSecret       ServiceSecret[]
   meiliSearch         MeiliSearch?
+  persistentStorage   ServicePersistentStorage[]
 }
 
 model PlausibleAnalytics {

src/lib/database/services.ts

@@ -27,7 +27,10 @@ export async function newService({
 
 export async function getService({ id, teamId }: { id: string; teamId: string }): Promise<Service> {
 	let body;
-	const include = {
+	if (teamId === '0') {
+		body = await prisma.service.findFirst({
+			where: { id },
+			include: {
 				destinationDocker: true,
 				plausibleAnalytics: true,
 				minio: true,
@@ -35,17 +38,24 @@ export async function getService({ id, teamId }: { id: string; teamId: string })
 				wordpress: true,
 				ghost: true,
 				serviceSecret: true,
-		meiliSearch: true
+				meiliSearch: true,
-	};
+				persistentStorage: true
-	if (teamId === '0') {
+			}
-		body = await prisma.service.findFirst({
-			where: { id },
-			include
 		});
 	} else {
 		body = await prisma.service.findFirst({
 			where: { id, teams: { some: { id: teamId } } },
-			include
+			include: {
+				destinationDocker: true,
+				plausibleAnalytics: true,
+				minio: true,
+				vscodeserver: true,
+				wordpress: true,
+				ghost: true,
+				serviceSecret: true,
+				meiliSearch: true,
+				persistentStorage: true
+			}
 		});
 	}
 
@@ -362,6 +372,7 @@ export async function updateGhostService({
 }
 
 export async function removeService({ id }: { id: string }): Promise<void> {
+	await prisma.servicePersistentStorage.deleteMany({ where: { serviceId: id } });
 	await prisma.meiliSearch.deleteMany({ where: { serviceId: id } });
 	await prisma.ghost.deleteMany({ where: { serviceId: id } });
 	await prisma.plausibleAnalytics.deleteMany({ where: { serviceId: id } });

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

@@ -239,6 +239,35 @@
 					</svg></button
 				></a
 			>
+			<a
+				href="/services/{id}/storage"
+				sveltekit:prefetch
+				class="hover:text-pink-500 rounded"
+				class:text-pink-500={$page.url.pathname === `/services/${id}/storage`}
+				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storage`}
+			>
+				<button
+					title="Persistent Storage"
+					class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
+					data-tooltip="Persistent Storage"
+				>
+					<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
+			>
 			<div class="border border-stone-700 h-8" />
 		{/if}
 		<button

src/routes/services/[id]/storage/_Storage.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	export let isNew = false;
+	export let storage = {
+		id: null,
+		path: null
+	};
+	import { del, post } from '$lib/api';
+	import { page } from '$app/stores';
+	import { createEventDispatcher } from 'svelte';
+
+	import { errorNotification } from '$lib/form';
+	import { toast } from '@zerodevx/svelte-toast';
+	const { id } = $page.params;
+
+	const dispatch = createEventDispatcher();
+	async function saveStorage(newStorage = false) {
+		try {
+			if (!storage.path) return errorNotification('Path is required.');
+			storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`;
+			storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path;
+			storage.path.replace(/\/\//g, '/');
+			await post(`/services/${id}/storage.json`, {
+				path: storage.path,
+				storageId: storage.id,
+				newStorage
+			});
+			dispatch('refresh');
+			if (isNew) {
+				storage.path = null;
+				storage.id = null;
+			}
+			if (newStorage) toast.push('Storage saved.');
+			else toast.push('Storage updated.');
+		} catch ({ error }) {
+			return errorNotification(error);
+		}
+	}
+	async function removeStorage() {
+		try {
+			await del(`/services/${id}/storage.json`, { path: storage.path });
+			dispatch('refresh');
+			toast.push('Storage deleted.');
+		} catch ({ error }) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<td>
+	<input
+		bind:value={storage.path}
+		required
+		placeholder="eg: /data"
+		class=" border border-dashed border-coolgray-300"
+	/>
+</td>
+<td>
+	{#if isNew}
+		<div class="flex items-center justify-center">
+			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}>Add</button
+			>
+		</div>
+	{:else}
+		<div class="flex flex-row justify-center space-x-2">
+			<div class="flex items-center justify-center">
+				<button class="" on:click={() => saveStorage(false)}>Set</button>
+			</div>
+			<div class="flex justify-center items-end">
+				<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}>Remove</button>
+			</div>
+		</div>
+	{/if}
+</td>

src/routes/services/[id]/storage/index.json.ts

@@ -0,0 +1,65 @@
+import { getUserDetails } from '$lib/common';
+import * as db from '$lib/database';
+import { ErrorHandler } from '$lib/database';
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const get: RequestHandler = async (event) => {
+	const { status, body, teamId } = await getUserDetails(event, false);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+	try {
+		const persistentStorages = await db.prisma.servicePersistentStorage.findMany({
+			where: { serviceId: id }
+		});
+		return {
+			body: {
+				persistentStorages
+			}
+		};
+	} catch (error) {
+		return ErrorHandler(error);
+	}
+};
+
+export const post: RequestHandler = async (event) => {
+	const { teamId, status, body } = await getUserDetails(event);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+	const { path, newStorage, storageId } = await event.request.json();
+	try {
+		if (newStorage) {
+			await db.prisma.servicePersistentStorage.create({
+				data: { path, service: { connect: { id } } }
+			});
+		} else {
+			await db.prisma.servicePersistentStorage.update({
+				where: { id: storageId },
+				data: { path }
+			});
+		}
+		return {
+			status: 201
+		};
+	} catch (error) {
+		return ErrorHandler(error);
+	}
+};
+
+export const del: RequestHandler = async (event) => {
+	const { teamId, status, body } = await getUserDetails(event);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+	const { path } = await event.request.json();
+
+	try {
+		await db.prisma.servicePersistentStorage.deleteMany({ where: { serviceId: id, path } });
+		return {
+			status: 200
+		};
+	} catch (error) {
+		return ErrorHandler(error);
+	}
+};

src/routes/services/[id]/storage/index.svelte

@@ -0,0 +1,102 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, stuff }) => {
+		let endpoint = `/services/${params.id}/storage.json`;
+		const res = await fetch(endpoint);
+		if (res.ok) {
+			return {
+				props: {
+					service: stuff.service,
+					...(await res.json())
+				}
+			};
+		}
+
+		return {
+			status: res.status,
+			error: new Error(`Could not load ${endpoint}`)
+		};
+	};
+</script>
+
+<script lang="ts">
+	export let service;
+
+	export let persistentStorages;
+	import { page } from '$app/stores';
+	import Storage from './_Storage.svelte';
+	import { get } from '$lib/api';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import ServiceLinks from '$lib/components/ServiceLinks.svelte';
+
+	const { id } = $page.params;
+	async function refreshStorage() {
+		const data = await get(`/services/${id}/storage.json`);
+		persistentStorages = [...data.persistentStorages];
+	}
+</script>
+
+<div
+	class="flex items-center space-x-2 p-5 px-6 font-bold"
+	class:p-5={service.fqdn}
+	class:p-6={!service.fqdn}
+>
+	<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">{service.name}</span>
+	</div>
+	{#if service.fqdn}
+		<a
+			href={service.fqdn}
+			target="_blank"
+			class="icons tooltip-bottom flex items-center bg-transparent text-sm"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+				<line x1="10" y1="14" x2="20" y2="4" />
+				<polyline points="15 4 20 4 20 9" />
+			</svg></a
+		>
+	{/if}
+
+	<ServiceLinks {service} />
+</div>
+
+<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
+	<div class="flex justify-center py-4 text-center">
+		<Explainer
+			customClass="w-full"
+			text={'You can specify any folder that you want to be persistent across restarts. <br>This is useful for storing data for VSCode server or WordPress.'}
+		/>
+	</div>
+	<table class="mx-auto border-separate text-left">
+		<thead>
+			<tr class="h-12">
+				<th scope="col">Path</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each persistentStorages as storage}
+				{#key storage.id}
+					<tr>
+						<Storage on:refresh={refreshStorage} {storage} />
+					</tr>
+				{/key}
+			{/each}
+			<tr>
+				<Storage on:refresh={refreshStorage} isNew />
+			</tr>
+		</tbody>
+	</table>
+</div>

src/routes/services/[id]/vscodeserver/start.json.ts

@@ -21,6 +21,7 @@ export const post: RequestHandler = async (event) => {
 			destinationDockerId,
 			destinationDocker,
 			serviceSecret,
+			persistentStorage,
 			vscodeserver: { password }
 		} = service;
 
@@ -42,6 +43,28 @@ export const post: RequestHandler = async (event) => {
 				config.environmentVariables[secret.name] = secret.value;
 			});
 		}
+
+		const volumes =
+			persistentStorage?.map((storage) => {
+				return `${id}${storage.path.replace(/\//gi, '-')}:${storage.path}`;
+			}) || [];
+
+		const composeVolumes = volumes.map((volume) => {
+			return {
+				[`${volume.split(':')[0]}`]: {
+					name: volume.split(':')[0]
+				}
+			};
+		});
+		const volumeMounts = Object.assign(
+			{},
+			{
+				[config.volume.split(':')[0]]: {
+					name: config.volume.split(':')[0]
+				}
+			},
+			...composeVolumes
+		);
 		const composeFile: ComposeFile = {
 			version: '3.8',
 			services: {
@@ -50,7 +73,7 @@ export const post: RequestHandler = async (event) => {
 					image: config.image,
 					environment: config.environmentVariables,
 					networks: [network],
-					volumes: [config.volume],
+					volumes: [config.volume, ...volumes],
 					restart: 'always',
 					labels: makeLabelForServices('vscodeServer'),
 					deploy: {
@@ -68,17 +91,21 @@ export const post: RequestHandler = async (event) => {
 					external: true
 				}
 			},
-			volumes: {
+			volumes: volumeMounts
-				[config.volume.split(':')[0]]: {
-					name: config.volume.split(':')[0]
-				}
-			}
 		};
 		const composeFileDestination = `${workdir}/docker-compose.yaml`;
 		await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
 
 		await asyncExecShell(`DOCKER_HOST=${host} docker compose -f ${composeFileDestination} pull`);
 		await asyncExecShell(`DOCKER_HOST=${host} docker compose -f ${composeFileDestination} up -d`);
+
+		const changePermissionOn = persistentStorage.map((p) => p.path);
+
+		await asyncExecShell(
+			`DOCKER_HOST=${host} docker exec -u root ${id} chown -R 1000:1000 ${changePermissionOn.join(
+				' '
+			)}`
+		);
 		return {
 			status: 200
 		};