feat: added modal for stdout and stderr

Thymis-io · Feb 2, 2024 · a4a6f4a · a4a6f4a
1 parent 22b3c95
commit a4a6f4a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 4 deletions.
diff --git a/frontend/src/lib/LogModal.svelte b/frontend/src/lib/LogModal.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SvelteComponent } from 'svelte';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+
+	export let parent: SvelteComponent;
+	const modalStore = getModalStore();
+</script>
+
+{#if $modalStore[0]}
+	<div class="modal-example-form card p-4 w-modal shadow-xl space-y-4 w-modal-wide">
+		<header class="text-2xl font-bold">{$modalStore[0].title ?? '(title missing)'}</header>
+		<div class="overflow-auto h-80v">
+			<pre class="">{$modalStore[0].meta.log}</pre>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -20,6 +20,7 @@
 	import CreateDeviceModal from '$lib/CreateDeviceModal.svelte';
 	import DeployModal from '$lib/DeployModal.svelte';
 	import EditTagModal from '$lib/EditTagModal.svelte';
+	import LogModal from '$lib/LogModal.svelte';
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import {
 		Modal,
@@ -35,7 +36,8 @@
 	const modalRegistry: Record<string, ModalComponent> = {
 		CreateDeviceModal: { ref: CreateDeviceModal },
 		EditTagModal: { ref: EditTagModal },
-		DeployModal: { ref: DeployModal }
+		DeployModal: { ref: DeployModal },
+		LogModal: { ref: LogModal }
 	};
 
 	initializeStores();
@@ -54,6 +56,24 @@
 		});
 	};
 
+	function openStdoutModal() {
+		modalStore.trigger({
+			type: 'component',
+			component: 'LogModal',
+			title: 'Stdout',
+			meta: { log: $buildStatus?.stdout }
+		});
+	}
+
+	function openStderrModal() {
+		modalStore.trigger({
+			type: 'component',
+			component: 'LogModal',
+			title: 'Stderr',
+			meta: { log: $buildStatus?.stderr }
+		});
+	}
+
 	const stdoutPopupHover: PopupSettings = {
 		event: 'hover',
 		target: 'stdoutPopup',
@@ -79,7 +99,11 @@
 				</span>
 				{#if $buildStatus?.stdout}
 					<div class="mt-1.5 ml-2">
-						<button class="btn p-0 [&>*]:pointer-events-none" use:popup={stdoutPopupHover}>
+						<button
+							class="btn p-0 [&>*]:pointer-events-none"
+							use:popup={stdoutPopupHover}
+							on:click={openStdoutModal}
+						>
 							<Info color="#0080c0" />
 						</button>
 						<div class="card p-4 variant-filled-primary z-40" data-popup="stdoutPopup">
@@ -90,7 +114,11 @@
 				{/if}
 				{#if $buildStatus?.stderr}
 					<div class="mt-1.5 ml-2">
-						<button class="btn p-0 [&>*]:pointer-events-none" use:popup={stderrPopupHover}>
+						<button
+							class="btn p-0 [&>*]:pointer-events-none"
+							use:popup={stderrPopupHover}
+							on:click={openStderrModal}
+						>
 							<AlertTriangle color="#c4c400" />
 						</button>
 						<div class="card p-4 variant-filled-primary z-40" data-popup="stderrPopup">

diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -14,7 +14,20 @@ module.exports = {
 		require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
 	],
 	theme: {
-		extend: {}
+		extend: {
+			height: {
+				"10v": "10vh",
+				"20v": "20vh",
+				"30v": "30vh",
+				"40v": "40vh",
+				"50v": "50vh",
+				"60v": "60vh",
+				"70v": "70vh",
+				"80v": "80vh",
+				"90v": "90vh",
+				"100v": "100vh",
+			},
+		},
 	},
 	plugins: [
 		forms,