1.5.4 (#21)

* Download logs as file

* Bumped version to 1.5.4

Author: salilponde

.github/workflows/main.yml

@@ -8,7 +8,7 @@ on:
     branches: ["main"]
 
 env:
-  VERSION: "1.5.3"
+  VERSION: "1.5.4"
 
 jobs:
   docker:

pkg/common/common.go

@@ -1,3 +1,3 @@
 package common
 
-const Version = "1.5.3"
+const Version = "1.5.4"

web/src/app/compose/compose-logs.tsx

@@ -13,37 +13,52 @@ import { useEffect, useState } from "react"
 import { wsApiBaseUrl } from "@/lib/api-base-url"
 import { AttachAddon } from "@xterm/addon-attach"
 import { FitAddon } from "@xterm/addon-fit"
-import { newTerminal, recreateTerminalElement } from "@/lib/utils"
+import {
+  downloadTerminalTextAsFile,
+  newTerminal,
+  recreateTerminalElement,
+} from "@/lib/utils"
 import useNodeHead from "@/hooks/useNodeHead"
 import useNodeComposeItem from "@/hooks/useNodeComposeItem"
+import { Button } from "@/components/ui/button"
+import { Terminal } from "@xterm/xterm"
 
 export default function ComposeLogs() {
   const { nodeId, composeProjectId } = useParams()
   const { nodeHead } = useNodeHead(nodeId!)
   const { nodeComposeItem } = useNodeComposeItem(nodeId!, composeProjectId!)
   const [socket, setSocket] = useState<WebSocket>(null!)
+  const [terminal, setTerminal] = useState<Terminal>(null!)
 
   useEffect(() => {
-    const terminal = newTerminal()
+    const t = newTerminal()
+    setTerminal(t)
 
     if (socket) socket.close()
     const s = new WebSocket(
       `${wsApiBaseUrl()}/nodes/${nodeId}/compose/${composeProjectId}/logs`
     )
     setSocket(s)
 
-    terminal.loadAddon(new AttachAddon(s))
+    t.loadAddon(new AttachAddon(s))
     const fitAddon = new FitAddon()
-    terminal.loadAddon(fitAddon)
+    t.loadAddon(fitAddon)
 
     const terminalEl = recreateTerminalElement("terminalContainer", "terminal")
-    terminal.open(terminalEl!)
+    t.open(terminalEl!)
     fitAddon.fit()
     addEventListener("resize", () => {
       fitAddon?.fit()
     })
   }, [composeProjectId])
 
+  const handleDownload = () => {
+    downloadTerminalTextAsFile(
+      terminal,
+      `logs_${nodeComposeItem?.projectName}.txt`
+    )
+  }
+
   return (
     <MainArea>
       <TopBar>
@@ -65,7 +80,9 @@ export default function ComposeLogs() {
           <BreadcrumbSeparator />
           <BreadcrumbCurrent>Logs</BreadcrumbCurrent>
         </Breadcrumb>
-        <TopBarActions></TopBarActions>
+        <TopBarActions>
+          <Button onClick={handleDownload}>Download to File</Button>
+        </TopBarActions>
       </TopBar>
       <MainContent>
         <div id="terminalContainer">

web/src/app/containers/container-logs.tsx

@@ -13,36 +13,48 @@ import { useParams } from "react-router-dom"
 import "/node_modules/xterm/css/xterm.css"
 import { useEffect, useState } from "react"
 import { wsApiBaseUrl } from "@/lib/api-base-url"
-import { newTerminal, recreateTerminalElement } from "@/lib/utils"
+import {
+  downloadTerminalTextAsFile,
+  newTerminal,
+  recreateTerminalElement,
+} from "@/lib/utils"
 import { AttachAddon } from "@xterm/addon-attach"
 import useNodeHead from "@/hooks/useNodeHead"
+import { Button } from "@/components/ui/button"
+import { Terminal } from "@xterm/xterm"
 
 export default function ContainerLogs() {
   const { nodeId, containerId } = useParams()
   const { nodeHead } = useNodeHead(nodeId!)
   const [socket, setSocket] = useState<WebSocket>(null!)
+  const [terminal, setTerminal] = useState<Terminal>(null!)
 
   useEffect(() => {
-    const terminal = newTerminal()
+    const t = newTerminal()
+    setTerminal(t)
 
     if (socket) socket.close()
     const s = new WebSocket(
       `${wsApiBaseUrl()}/nodes/${nodeId}/containers/${containerId}/logs`
     )
     setSocket(s)
 
-    terminal.loadAddon(new AttachAddon(s))
+    t.loadAddon(new AttachAddon(s))
     const fitAddon = new FitAddon()
-    terminal.loadAddon(fitAddon)
+    t.loadAddon(fitAddon)
 
     const terminalEl = recreateTerminalElement("terminalContainer", "terminal")
-    terminal.open(terminalEl!)
+    t.open(terminalEl!)
     fitAddon.fit()
     addEventListener("resize", () => {
       fitAddon?.fit()
     })
   }, [containerId])
 
+  const handleDownload = () => {
+    downloadTerminalTextAsFile(terminal, `logs_${containerId}.txt`)
+  }
+
   return (
     <MainArea>
       <TopBar>
@@ -59,7 +71,9 @@ export default function ContainerLogs() {
             Logs for <span className="font-semibold">{containerId}</span>
           </BreadcrumbCurrent>
         </Breadcrumb>
-        <TopBarActions></TopBarActions>
+        <TopBarActions>
+          <Button onClick={handleDownload}>Download to File</Button>
+        </TopBarActions>
       </TopBar>
       <MainContent>
         <div id="terminalContainer">

web/src/components/side-nav/side-nav-compose.tsx

@@ -35,7 +35,7 @@ export function SideNavCompose() {
       <SideNavBack to={`/nodes/${nodeId}/compose`} />
       <ul role="list" className="-mx-2 space-y-1">
         {items.map((item) => (
-          <li>
+          <li key={item.title}>
             <SideBarItem to={item.link}>
               {item.icon}
               {item.title}

web/src/components/side-nav/side-nav-node.tsx

@@ -57,7 +57,7 @@ export function SideNavNode() {
       <SideNavBack to="/nodes" />
       <ul role="list" className="-mx-2 space-y-1">
         {items.map((item) => (
-          <li>
+          <li key={item.title}>
             <SideBarItem to={item.link}>
               {item.icon}
               {item.title}

web/src/components/side-nav/side-nav-top-level.tsx

@@ -44,7 +44,7 @@ export function SideNavTopLevel() {
     <>
       <ul role="list" className="-mx-2 space-y-1">
         {items.map((item) => (
-          <li>
+          <li key={item.title}>
             <SideBarItem to={item.link}>
               {item.icon}
               {item.title}

web/src/lib/utils.ts

@@ -89,6 +89,20 @@ export function newTerminal(convertToEol?: boolean) {
   })
 }
 
+export function downloadTerminalTextAsFile(
+  terminal: Terminal,
+  filename: string
+) {
+  let text = ""
+  const l = terminal.buffer.normal.length
+  for (let i = 0; i < l; i++) {
+    const line = terminal.buffer.normal.getLine(i)?.translateToString(true)
+    text += `${line}\r\n`
+  }
+
+  download(filename, text)
+}
+
 export function initMonaco() {
   loader.init().then((monaco) => {
     monaco.editor.defineTheme("dark", {
@@ -129,3 +143,19 @@ export function toastFailed(message: string) {
     description: message,
   })
 }
+
+export function download(filename: string, text: string) {
+  var element = document.createElement("a")
+  element.setAttribute(
+    "href",
+    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+  )
+  element.setAttribute("download", filename)
+
+  element.style.display = "none"
+  document.body.appendChild(element)
+
+  element.click()
+
+  document.body.removeChild(element)
+}

web/src/lib/version.ts

@@ -1 +1 @@
-export const VERSION = "1.5.3"
+export const VERSION = "1.5.4"