fixes

apps/api/prisma/migrations/20221026115123_service_persistent_unique/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[serviceId,containerId,path]` on the table `ServicePersistentStorage` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- DropIndex
+DROP INDEX "ServicePersistentStorage_serviceId_path_key";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ServicePersistentStorage_serviceId_containerId_path_key" ON "ServicePersistentStorage"("serviceId", "containerId", "path");

apps/api/prisma/schema.prisma

@@ -203,7 +203,7 @@ model ServicePersistentStorage {
   updatedAt   DateTime @updatedAt
   service     Service  @relation(fields: [serviceId], references: [id])
 
-  @@unique([serviceId, path])
+  @@unique([serviceId, containerId, path])
 }
 
 model Secret {

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

@@ -75,12 +75,12 @@ export async function startService(request: FastifyRequest<ServiceStartStop>) {
                     }
                 }
             }
-            const customVolumes = await prisma.servicePersistentStorage.findMany({ where: { serviceId: service } })
+            const customVolumes = await prisma.servicePersistentStorage.findMany({ where: { serviceId: id } })
             let volumes = arm ? template.services[service].volumesArm : template.services[service].volumes
             if (customVolumes.length > 0) {
                 for (const customVolume of customVolumes) {
-                    const { volumeName, path } = customVolume
-                    if (!volumes.includes(`${volumeName}:${path}`)) {
+                    const { volumeName, path, containerId } = customVolume
+                    if (!volumes.includes(`${volumeName}:${path}`) && containerId === service) {
                         volumes.push(`${volumeName}:${path}`)
                     }
                 }
@@ -102,7 +102,7 @@ export async function startService(request: FastifyRequest<ServiceStartStop>) {
                 labels: makeLabelForServices(type),
                 ...defaultComposeConfiguration(network),
             }
-   
+
             // Generate files for builds
             if (template.services[service]?.files?.length > 0) {
                 if (!template.services[service].build) {

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

@@ -613,9 +613,8 @@ export async function saveServiceStorage(request: FastifyRequest<SaveServiceStor
 
 export async function deleteServiceStorage(request: FastifyRequest<DeleteServiceStorage>) {
     try {
-        const { id } = request.params
-        const { path } = request.body
-        await prisma.servicePersistentStorage.deleteMany({ where: { serviceId: id, path } });
+        const { storageId } = request.body
+        await prisma.servicePersistentStorage.deleteMany({ where: { id: storageId } });
         return {}
     } catch ({ status, message }) {
         return errorHandler({ status, message })

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

@@ -74,7 +74,7 @@ export interface SaveServiceStorage extends OnlyId {
 
 export interface DeleteServiceStorage extends OnlyId {
     Body: {
-        path: string,
+        storageId: string,
     }
 }
 export interface ServiceStartStop {

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

@@ -56,14 +56,20 @@
 			return errorNotification(error);
 		}
 	}
-	async function removeStorage(path: string) {
+	async function removeStorage(removableStorage: any) {
 		try {
-			await del(`/services/${id}/storages`, { path: storage.path });
-			dispatch('refresh');
-			addToast({
-				message: $t('application.storage.storage_deleted'),
-				type: 'success'
-			});
+			const { id: storageId, volumeName, path } = removableStorage;
+			const sure = confirm(
+				`Are you sure you want to delete this storage ${volumeName + ':' + path}?`
+			);
+			if (sure) {
+				await del(`/services/${id}/storages`, { storageId });
+				dispatch('refresh');
+				addToast({
+					message: $t('application.storage.storage_deleted'),
+					type: 'success'
+				});
+			}
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -97,13 +103,13 @@
 	{:else if isNew}
 		<form id="saveVolumesForm" on:submit|preventDefault={saveStorage}>
 			<div class="grid grid-col-1 lg:grid-cols-2 lg:space-x-4 pt-8">
-				<div class="flex flex-row gap-2">
-					<div class="flex flex-col">
+				<div class="flex flex-row">
+					<div class="flex flex-col w-full">
 						<label for="name" class="pb-2 uppercase font-bold">Container</label>
 						<select
 							form="saveVolumesForm"
 							name="containerId"
-							class="w-full lg:w-64 font-normal"
+							class="w-full lg:w-64"
 							disabled={storage.predefined}
 							readonly={storage.predefined}
 							bind:value={storage.containerId}
@@ -125,7 +131,7 @@
 							{/if}
 						</select>
 					</div>
-					<div class="flex flex-col">
+					<div class="flex flex-col w-full">
 						<label for="name" class="pb-2 uppercase font-bold">Path</label>
 						<input
 							name="path"
@@ -138,21 +144,25 @@
 						/>
 					</div>
 				</div>
-
 				<div class="pt-8">
-					<div class="flex items-center justify-center w-full lg:w-64">
-						<button type="submit" class="btn btn-sm btn-primary w-full">{$t('forms.add')}</button>
-					</div>
+					<button type="submit" class="btn btn-sm btn-primary w-full lg:w-64"
+						>{$t('forms.add')}</button
+					>
 				</div>
 			</div>
 		</form>
 	{:else}
 		<div class="flex lg:flex-row flex-col items-center gap-2 py-1">
-			<input disabled readonly class="w-full" value={`${storage.containerId}`} />
+			<input
+				disabled
+				readonly
+				class="w-full"
+				value={`${services.find((s) => s.id === storage.containerId).name || storage.containerId}`}
+			/>
 			<input disabled readonly class="w-full" value={`${storage.volumeName}:${storage.path}`} />
 			<button
 				class="btn btn-sm btn-error"
-				on:click|stopPropagation|preventDefault={() => removeStorage(storage.path)}
+				on:click|stopPropagation|preventDefault={() => removeStorage(storage)}
 				>{$t('forms.remove')}</button
 			>
 		</div>

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

@@ -62,20 +62,29 @@
 					<div class="font-bold uppercase">Volume ID : Mount Dir</div>
 				</div>
 			</div>
+
+			{#each persistentStorages.filter((s) => s.predefined) as storage}
+				{#key storage.id}
+					<Storage on:refresh={refreshStorage} {storage} {services} />
+				{/key}
+			{/each}
 		{/if}
-		{#each persistentStorages.filter((s) => s.predefined) as storage}
-			{#key storage.id}
-				<Storage on:refresh={refreshStorage} {storage} {services} />
-			{/key}
-		{/each}
+
+		{#if persistentStorages.filter((s) => !s.predefined).length > 0}
+			<div class="title" class:pt-10={persistentStorages.filter((s) => s.predefined).length > 0}>
+				Custom Volumes
+			</div>
+
+			{#each persistentStorages.filter((s) => !s.predefined) as storage}
+				{#key storage.id}
+					<Storage on:refresh={refreshStorage} {storage} {services} />
+				{/key}
+			{/each}
+		{/if}
+
 		<div class="title" class:pt-10={persistentStorages.filter((s) => s.predefined).length > 0}>
-			Custom Volumes
+			Add New Volume
 		</div>
-		{#each persistentStorages.filter((s) => !s.predefined) as storage}
-			{#key storage.id}
-				<Storage on:refresh={refreshStorage} {storage} />
-			{/key}
-		{/each}
 		<Storage on:refresh={refreshStorage} isNew {services} />
 	</div>
 </div>