headless console

resources/views/console/index.blade.php

@@ -0,0 +1,76 @@
+<x-server-layout :server="$server">
+    <x-slot name="pageTitle">{{ $server->name }} - Console</x-slot>
+
+    <div
+        x-data="{
+            user: '{{ $server->ssh_user }}',
+            command: '',
+            output: '',
+            runUrl: '{{ route("servers.console.run", ["server" => $server]) }}',
+            async run() {
+                this.output = 'Running...\n'
+                const fetchOptions = {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                    },
+                    body: JSON.stringify({
+                        user: this.user,
+                        command: this.command,
+                    }),
+                }
+
+                const response = await fetch(this.runUrl, fetchOptions)
+                const reader = response.body.getReader()
+                const decoder = new TextDecoder('utf-8')
+
+                while (true) {
+                    const { value, done } = await reader.read()
+                    if (done) break
+
+                    const textChunk = decoder.decode(value, { stream: true })
+
+                    this.output += textChunk
+
+                    document.getElementById('console-output').scrollTop =
+                        document.getElementById('console-output').scrollHeight
+                }
+                this.output += '\nDone!'
+            },
+        }"
+    >
+        <x-card-header>
+            <x-slot name="title">Headless Console</x-slot>
+            <x-slot name="description">
+                Here you can run ssh commands on your server and see the result right away.
+                <br />
+                <b>Note that</b>
+                this is a headless console, it doesn't keep the current path. it will always run from the home path of
+                the selected user.
+            </x-slot>
+        </x-card-header>
+
+        <div class="space-y-3">
+            <x-console-view id="console-output">
+                <div class="w-full" x-text="output"></div>
+            </x-console-view>
+            <form onsubmit="return false" id="console-form" class="flex items-center justify-between">
+                <x-select-input x-model="user" id="user" name="user" class="flex-none" data-tooltip="User">
+                    <option value="{{ $server->ssh_user }}">{{ $server->ssh_user }}</option>
+                    <option value="root">root</option>
+                </x-select-input>
+                <x-text-input
+                    id="command"
+                    name="command"
+                    x-model="command"
+                    type="text"
+                    placeholder="Type your command here..."
+                    class="mx-1 flex-grow"
+                    autocomplete="off"
+                />
+                <x-primary-button id="btn-run" x-on:click="run" class="h-[40px]">Run</x-primary-button>
+            </form>
+        </div>
+    </div>
+</x-server-layout>