test ws

apps/ui/src/lib/store.ts

@@ -1,5 +1,6 @@
 import { dev } from '$app/env';
 import cuid from 'cuid';
+import Cookies from 'js-cookie';
 import { writable, readable, type Writable } from 'svelte/store';
 
 interface AppSession {
@@ -82,6 +83,7 @@ export const status: Writable<any> = writable({
         statuses: [],
         overallStatus: 'stopped',
         loading: false,
+        startup: {},
         initialLoading: true
     },
     database: {
@@ -159,4 +161,57 @@ export const addToast = (toast: AddToast) => {
     toasts.update((all: any) => [t, ...all])
 }
 
-export const selectedBuildId: any = writable(null)
+export const selectedBuildId: any = writable(null)
+
+type State = {
+    requests: Array<Request>;
+};
+export const state = writable<State>({
+    requests: [],
+});
+export const connect = () => {
+    const token = Cookies.get('token')
+    if (token) {
+        let url = "ws://localhost:3000/realtime"
+        if (dev) {
+            url = "ws://localhost:3001/realtime"
+        }
+        const ws = new WebSocket(url);
+        ws.addEventListener("message", (message: any) => {
+            appSession.subscribe((session: any) => {
+                const data: Request = { ...JSON.parse(message.data), timestamp: message.timeStamp };
+                if (data.teamId === session.teamId) {
+                    if (data.type === 'service') {
+                        const ending = data.message === "ending"
+                        status.update((status: any) => ({
+                            ...status,
+                            service: {
+                                ...status.service,
+                                startup: {
+                                    ...status.service.startup,
+                                    ...(ending ? { [data.id]: undefined } : { [data.id]: data.message })
+                                }
+                            }
+                        }))
+
+                    }
+                }
+            })
+
+        });
+        ws.addEventListener('open', (event) => {
+            ws.send(JSON.stringify({ type: 'subscribe', message: 'ping' }))
+        });
+        ws.addEventListener('error', (event) => {
+            console.log('error with ws');
+            console.log(event)
+        });
+        ws.addEventListener('close', (event) => {
+            if (!ws || ws.readyState == 3) {
+                setTimeout(() => {
+                    connect()
+                }, 1000)
+            }
+        });
+    }
+};

apps/ui/src/routes/__layout.svelte

@@ -81,6 +81,7 @@
 	export let permission: string;
 	export let isAdmin: boolean;
 
+	import{ status, connect } from '$lib/store';
 	import '../tailwind.css';
 	import Cookies from 'js-cookie';
 	import { fade } from 'svelte/transition';
@@ -93,6 +94,7 @@
 	import { appSession } from '$lib/store';
 	import Toasts from '$lib/components/Toasts.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { onMount } from 'svelte';
 
 	if (userId) $appSession.userId = userId;
 	if (teamId) $appSession.teamId = teamId;
@@ -107,6 +109,9 @@
 			return errorNotification(error);
 		}
 	}
+	onMount(async () => {
+		connect();
+	});
 </script>
 
 <svelte:head>

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

@@ -127,7 +127,7 @@
 					await post(`/services/${id}/wordpress/ftp`, {
 						ftpEnabled: false
 					});
-					window.location.reload()
+					service.wordpress?.ftpEnabled && window.location.reload()
 				}
 			} catch (error) {
 				return errorNotification(error);
@@ -287,7 +287,7 @@
 					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
 					<line x1="11" y1="19.94" x2="11" y2="19.95" />
 				</svg>
-				Loading...
+				{$status.service.startup[id] || 'Loading...'}
 			</button>
 		{:else if $status.service.overallStatus === 'healthy'}
 			<button

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

@@ -399,10 +399,10 @@
 				/>
 			</div>
 		</div>
-		<div>
+		<div class="pt-6">
 			{#each Object.keys(template) as oneService}
 				<div
-					class="flex flex-row my-2 space-x-2"
+					class="flex flex-row my-2 space-x-2 mb-6"
 					class:my-6={template[oneService].environment.length > 0 &&
 						template[oneService].environment.find((env) => env.main === oneService)}
 					class:border-b={template[oneService].environment.length > 0 &&
@@ -420,7 +420,7 @@
 					{#if template[oneService].environment.length > 0}
 						{#each template[oneService].environment as variable}
 							{#if variable.main === oneService}
-								<div class="grid grid-cols-2 items-center gap-2">
+								<div class="grid grid-cols-2 items-center gap-2" >
 									<label class="h-10" for={variable.name}
 										>{variable.label || variable.name}
 										{#if variable.description}