feat: initial commit

components/dashboard/docker/logs/docker-logs-id.tsx

@@ -0,0 +1,89 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import React, { useEffect } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "xterm-addon-fit";
+import "@xterm/xterm/css/xterm.css";
+
+interface Props {
+	id: string;
+	containerId: string;
+}
+
+export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
+	const [term, setTerm] = React.useState<Terminal>();
+	const [lines, setLines] = React.useState<number>(40);
+
+	const createTerminal = (): Terminal => {
+		const container = document.getElementById(id);
+		if (container) {
+			container.innerHTML = "";
+		}
+		const termi = new Terminal({
+			cursorBlink: true,
+			cols: 80,
+			rows: 30,
+			lineHeight: 1.4,
+
+			convertEol: true,
+			theme: {
+				cursor: "transparent",
+				background: "#19191A",
+			},
+		});
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}`;
+		const ws = new WebSocket(wsUrl);
+
+		const fitAddon = new FitAddon();
+		termi.loadAddon(fitAddon);
+		// @ts-ignore
+		termi.open(container);
+		fitAddon.fit();
+		termi.focus();
+		setTerm(termi);
+
+		ws.onmessage = (e) => {
+			termi.write(e.data);
+		};
+
+		ws.onclose = (e) => {
+			console.log(e.reason);
+
+			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
+		};
+		return termi;
+	};
+
+	useEffect(() => {
+		createTerminal();
+	}, [lines, containerId]);
+
+	useEffect(() => {
+		term?.clear();
+	}, [lines, term]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-2">
+				<Label>
+					<span>Number of lines to show</span>
+				</Label>
+				<Input
+					type="text"
+					placeholder="Number of lines to show (Defaults to 35)"
+					value={lines}
+					onChange={(e) => {
+						setLines(Number(e.target.value) || 1);
+					}}
+				/>
+			</div>
+
+			<div className="w-full h-full bg-input rounded-lg p-2 ">
+				<div id={id} className="rounded-xl" />
+			</div>
+		</div>
+	);
+};

components/dashboard/docker/logs/show-docker-modal-logs.tsx

@@ -0,0 +1,49 @@
+import dynamic from "next/dynamic";
+import React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+export const DockerLogsId = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	containerId: string;
+	children?: React.ReactNode;
+}
+
+export const ShowDockerModalLogs = ({ containerId, children }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					{children}
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+				<DialogHeader>
+					<DialogTitle>View Logs</DialogTitle>
+					<DialogDescription>View the logs for {containerId}</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-4 pt-2.5">
+					<DockerLogsId id="terminal" containerId={containerId || ""} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};