New terminal

rust/agama-server/Cargo.toml

@@ -45,12 +45,14 @@ chrono = { version = "0.4.34", default-features = false, features = [
   "clock",
 ] }
 pam = "0.8.0"
+pty-process = { version = "0.4.0", features = ["async"] }
 serde_with = "3.6.1"
 pin-project = "1.1.5"
 openssl = "0.10.64"
 hyper = "1.2.0"
 hyper-util = "0.1.3"
 tokio-openssl = "0.6.4"
+tokio-util = "0.7.11"
 futures-util = { version = "0.3.30", default-features = false, features = [
   "alloc",
 ] }

rust/agama-server/src/web.rs

@@ -25,6 +25,7 @@ mod event;
 mod http;
 mod service;
 mod state;
+mod terminal_ws;
 mod ws;
 
 use agama_lib::{connection, error::ServiceError};

rust/agama-server/src/web/service.rs

@@ -43,7 +43,9 @@ impl MainServiceBuilder {
     where
         P: AsRef<Path>,
     {
-        let api_router = Router::new().route("/ws", get(super::ws::ws_handler));
+        let api_router = Router::new()
+            .route("/ws", get(super::ws::ws_handler))
+            .route("/terminal", get(super::terminal_ws::handler));
         let config = ServiceConfig::default();
 
         Self {

rust/agama-server/src/web/terminal_ws.rs

@@ -0,0 +1,90 @@
+use axum::{
+    extract::{
+        ws::{close_code, CloseFrame, Message, WebSocket},
+        WebSocketUpgrade,
+    },
+    response::IntoResponse,
+};
+use pty_process::{OwnedReadPty, OwnedWritePty};
+use std::borrow::Cow;
+use tokio::io::AsyncWriteExt;
+use tokio_stream::StreamExt;
+
+pub(crate) async fn handler(ws: WebSocketUpgrade) -> impl IntoResponse {
+    ws.on_upgrade(move |socket| handle_socket(socket))
+}
+
+fn start_shell() -> Result<(OwnedReadPty, OwnedWritePty, tokio::process::Child), pty_process::Error>
+{
+    let pty = pty_process::Pty::new()?;
+    pty.resize(pty_process::Size::new(24, 80))?;
+    let mut cmd = pty_process::Command::new("bash");
+    let child = cmd.spawn(&pty.pts()?)?;
+    let (pty_out, pty_in) = pty.into_split();
+    Ok((pty_out, pty_in, child))
+}
+
+async fn handle_socket(mut socket: WebSocket) {
+    tracing::info!("Terminal connected");
+
+    // TODO: handle failed start of shell
+    let (pty_out, mut pty_in, mut child) = start_shell().unwrap();
+    let mut reader_stream = tokio_util::io::ReaderStream::new(pty_out);
+
+    loop {
+        tokio::select! {
+            message = socket.recv() => {
+                match message {
+                    Some(Ok(Message::Text(s))) => {
+                        let res = pty_in.write_all(s.as_bytes()).await;
+                        if res.is_err() {
+                            tracing::warn!("Failed to write to pty: {:?}", res);
+                        }
+
+                        continue;
+                    },
+                    Some(Ok(Message::Close(_))) => {
+                        tracing::info!("websocket close {:?}", message);
+                        break;
+                    },
+                    None => {
+                        tracing::info!("Socket closed");
+                        break;
+                    }
+                    _ => {
+                        tracing::info!("websocket other {:?}", message);
+                        continue
+                    },
+                }
+            },
+            shell_output = reader_stream.next() => {
+                if let Some(some_output) = shell_output {
+                    match some_output {
+                        Ok(output_bytes) => socket.send(Message::Binary(output_bytes.into())).await.unwrap(),
+                        Err(e) => tracing::warn!("Shell error {}", e),
+                    }
+
+                }
+            },
+            status = child.wait() => {
+                match status {
+                    Err(err) => tracing::warn!("Child status error: {}", err),
+                    Ok(status) => {
+                        let code = status.code().unwrap_or(0);
+                        let msg = format!("Bash exited with code: {code}");
+                        let res = socket.send(Message::Close(Some(CloseFrame {
+                            code: close_code::NORMAL,
+                            reason: Cow::from(msg),
+                        }))).await;
+                        if res.is_err() {
+                            tracing::warn!("Failed to send close message: {:?}", res);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    tracing::info!("Terminal disconnected.");
+}

web/package.json

@@ -103,6 +103,9 @@
     "@patternfly/patternfly": "^5.1.0",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-table": "^5.1.1",
+    "@xterm/addon-attach": "0.11.0",
+    "@xterm/addon-fit": "0.10.0",
+    "@xterm/xterm": "5.5.0",
     "fast-sort": "^3.4.0",
     "ipaddr.js": "^2.1.0",
     "react": "^18.2.0",

web/src/MainLayout.jsx

@@ -29,7 +29,7 @@ import {
   Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
-import { About, InstallerOptions } from "~/components/core";
+import { About, InstallerOptions, TerminalDialog } from "~/components/core";
 import { _ } from "~/i18n";
 import { rootRoutes } from "~/router";
 import { useProduct } from "~/context/product";
@@ -60,6 +60,7 @@ const Header = () => {
           <ToolbarContent>
             <ToolbarGroup align={{ default: "alignRight" }}>
               <ToolbarItem>
+                <TerminalDialog />
                 <InstallerOptions />
               </ToolbarItem>
             </ToolbarGroup>

web/src/SimpleLayout.jsx

@@ -26,7 +26,7 @@ import {
   Page,
   Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
 } from "@patternfly/react-core";
-import { InstallerOptions } from "~/components/core";
+import { InstallerOptions, TerminalDialog } from "~/components/core";
 import { _ } from "~/i18n";
 
 /**
@@ -42,6 +42,7 @@ export default function SimpleLayout({ showOutlet = true, showInstallerOptions =
             <ToolbarContent>
               <ToolbarGroup align={{ default: "alignRight" }}>
                 <ToolbarItem>
+                  {showInstallerOptions && <TerminalDialog />}
                   {showInstallerOptions && <InstallerOptions />}
                 </ToolbarItem>
               </ToolbarGroup>

web/src/client/http.js

@@ -54,7 +54,7 @@ class WSClient {
   /**
    * @param {URL} url - Websocket URL.
    */
-  constructor(url) {
+  constructor(url, json = true) {
     this.url = url.toString();
 
     this.handlers = {
@@ -66,6 +66,7 @@ class WSClient {
 
     this.reconnectAttempts = 0;
     this.client = this.buildClient();
+    this.json = json;
   }
 
   wsState() {
@@ -196,7 +197,7 @@ class WSClient {
    * @param {object} event - Event object, which is basically a websocket message.
    */
   dispatchEvent(event) {
-    const eventObject = JSON.parse(event.data);
+    const eventObject = this.json ? JSON.parse(event.data) : event.data;
     this.handlers.events.forEach((f) => f(eventObject));
   }
 
@@ -375,4 +376,4 @@ class HTTPClient {
   }
 }
 
-export { HTTPClient };
+export { WSClient, HTTPClient };

web/src/components/core/Terminal.jsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+// @ts-check
+
+import React from "react";
+import { WSClient } from "~/client/http";
+import { Terminal as Term } from "@xterm/xterm";
+import { AttachAddon } from "@xterm/addon-attach";
+import "@xterm/xterm/css/xterm.css";
+
+const buildWs = () => {
+  const url = new URL(window.location.toString());
+  url.hash = "";
+  url.pathname += "api/terminal";
+  url.protocol = url.protocol === "http:" ? "ws" : "wss";
+
+  return new WSClient(url, false);
+};
+
+const buildTerm = () => {
+  return new Term({
+    rows: 25,
+    cols: 100,
+    cursorBlink: true,
+    screenReaderMode: true,
+    theme: {
+      background: "#ffffff",
+      foreground: "#000000",
+      cursor: "#000000",
+    }
+  });
+};
+
+/**
+ * Simple component that displayes terminal.
+ * @component
+ *
+ * // FIXME: if possible, convert to a functional component
+ *
+ * @param {object} props
+ * @param {Location} props.url url of websocket answering terminal
+ */
+export default class Terminal extends React.Component {
+  constructor() {
+    super();
+    this.terminalRef = React.createRef();
+    this.ws = buildWs();
+    this.term = buildTerm();
+    this.ws.onOpen(() => {
+      if (this.attachAddon === undefined) {
+        this.attachAddon = new AttachAddon(this.ws.client);
+        // Attach the socket to term
+        this.term.loadAddon(this.attachAddon);
+      }
+    });
+    this.ws.connect();
+  }
+
+  componentDidMount() {
+    this.term.open(this.terminalRef.current);
+    this.term.input("agetty --show-issue/n");
+    this.term.writeln("Welcome to agama shell");
+    this.term.focus();
+  }
+
+  render() {
+    return <div ref={this.terminalRef} />;
+  }
+}