feat: remote docker engine

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

@@ -120,8 +120,9 @@
 	async function getStatus() {
 		if ($status.service.loading) return;
 		$status.service.loading = true;
-		const data = await get(`/services/${id}`);
+		const data = await get(`/services/${id}/status`);
 		$status.service.isRunning = data.isRunning;
+		$status.service.isExited = data.isExited;
 		$status.service.initialLoading = false;
 		$status.service.loading = false;
 	}
@@ -173,6 +174,32 @@
 				>
 				<div class="border border-stone-700 h-8" />
 			{/if}
+			{#if $status.service.isExited}
+				<a
+					href={!$disabledButton ? `/services/${id}/logs` : null}
+					class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
+					data-tooltip="Service exited with an 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"
+					>
+						<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>
+			{/if}
 			{#if $status.service.initialLoading}
 				<button
 					class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
@@ -347,7 +374,7 @@
 			>
 			<div class="border border-stone-700 h-8" />
 			<a
-				href={$status.service.isRunning ? `/services/${id}/logs` : null}
+				href={!$disabledButton && $status.service.isRunning ? `/services/${id}/logs` : null}
 				sveltekit:prefetch
 				class="hover:text-pink-500 rounded"
 				class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}

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

@@ -1,32 +1,13 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	import { onDestroy, onMount } from 'svelte';
-	export const load: Load = async ({ fetch, params, url, stuff }) => {
-		try {
-			const response = await get(`/services/${params.id}/logs`);
-			return {
-				props: {
-					service: stuff.service,
-					...response
-				}
-			};
-		} catch (error) {
-			return {
-				status: 500,
-				error: new Error(`Could not load ${url}`)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let service: any;
 	import { page } from '$app/stores';
 	import LoadingLogs from './_Loading.svelte';
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
-import { errorNotification } from '$lib/common';
+	import { errorNotification } from '$lib/common';
+	import { onDestroy, onMount } from 'svelte';
 
+	let service: any = {};
+	let logsLoading = false;
 	let loadLogsInterval: any = null;
 	let logs: any = [];
 	let lastLog: any = null;
@@ -36,18 +17,23 @@ import { errorNotification } from '$lib/common';
 	let position = 0;
 
 	const { id } = $page.params;
+
 	onMount(async () => {
+		const response = await get(`/services/${id}`);
+		service = response.service;
 		loadAllLogs();
 		loadLogsInterval = setInterval(() => {
 			loadLogs();
 		}, 1000);
 	});
+
 	onDestroy(() => {
 		clearInterval(loadLogsInterval);
 		clearInterval(followingInterval);
 	});
 	async function loadAllLogs() {
 		try {
+			logsLoading = true;
 			const data: any = await get(`/services/${id}/logs`);
 			if (data?.logs) {
 				lastLog = data.logs[data.logs.length - 1];
@@ -56,13 +42,14 @@ import { errorNotification } from '$lib/common';
 		} catch (error) {
 			console.log(error);
 			return errorNotification(error);
+		} finally {
+			logsLoading = false;
 		}
 	}
 	async function loadLogs() {
+		if (logsLoading) return;
 		try {
-			const newLogs: any = await get(
-				`/services/${id}/logs?since=${lastLog?.split(' ')[0] || 0}`
-			);
+			const newLogs: any = await get(`/services/${id}/logs?since=${lastLog?.split(' ')[0] || 0}`);
 
 			if (newLogs?.logs && newLogs.logs[newLogs.logs.length - 1] !== logs[logs.length - 1]) {
 				logs = logs.concat(newLogs.logs);