opendocker 0.1.5 → 0.1.6

package/src/components/LogsPane.tsx

@@ -1,132 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from "react";
-import { colors, termColors } from "../utils/styling";
-import { RGBA, TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import Pane from "./Pane";
-import { useContainerStore } from "../stores/containers";
-import { useApplicationStore } from "../stores/application";
-import { Shimmer } from "./ui/Shimmer";
-
-type LogEntry = {
-    text: string;
-    type: 'stdout' | 'stderr';
-};
-
-export default function LogsPane() {
-    const { activePane } = useApplicationStore((state) => state);
-    const { activeContainer } = useContainerStore((state) => state);
-    const [logs, setLogs] = useState<LogEntry[]>([]);
-    const scrollBoxRef = useRef<ScrollBoxRenderable>(null);
-
-    useEffect(() => {
-        if (!activeContainer || activePane !== "containers") {
-            cleanup();
-            return;
-        };
-
-        const process = Bun.spawn([
-            "docker",
-            "logs",
-            "--follow",
-            "--tail",
-            "100",
-            activeContainer.name,
-        ], {
-            stdout: "pipe",
-            stderr: "pipe",
-        });
-
-        async function readStream(stream: ReadableStream, type: 'stdout' | 'stderr') {
-            const decoder = new TextDecoder();
-            const reader = stream.getReader();
-
-            try {
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-
-                    const text = decoder.decode(value, { stream: true });
-                    // Split by newlines and filter out empty lines
-                    const lines = text.split('\n').filter(line => line.trim().length > 0);
-                     
-                     if (lines.length > 0) {
-                        setLogs(prev => {
-                            const newEntries = lines.map(line => ({
-                                text: line,
-                                type
-                            }));
-                            return [...prev, ...newEntries];
-                        });
-                    }
-                }
-            } catch (error) {}
-        }
-
-        readStream(process.stdout, 'stdout');
-        readStream(process.stderr, 'stderr');
-
-        return () => {
-            process.kill();
-            cleanup();
-        }
-    }, [activePane, activeContainer?.name, activeContainer?.state])
-
-    useEffect(() => {
-        if (scrollBoxRef.current && logs.length > 0) {
-            scrollBoxRef.current.scrollTo({ x: 0, y: scrollBoxRef.current.scrollHeight });
-        }
-    }, [logs]);
-
-    function cleanup() {
-        setLogs([]);
-    }
-
-    const output = useMemo(() => {
-        if (logs.length === 0 && activeContainer?.state === "created") {
-            return <Shimmer text="Container starting..." color={RGBA.fromHex(colors.text)} />
-        }
-
-        if (logs.length === 0) {
-            return <text fg={colors.textMuted}>No logs available</text>;
-        }
-
-        return logs.map((log, index) => (
-            <text
-                key={index}
-            >
-                {log.text}
-            </text>
-        ));
-    }, [logs]);
-
-    return (
-        <Pane
-            title="Logs"
-            flexDirection="column"
-            width="70%"
-        >
-            <box flexDirection="column" gap={1} height="100%">
-                <box flexDirection="row" gap={2} height="auto">
-                    <box flexDirection="column" gap={1}>
-                        <text fg={termColors.purple11} attributes={TextAttributes.BOLD}>Container</text>
-                        <text>{activeContainer?.name || "None"}</text>
-                    </box>
-                    <box flexDirection="column">
-                        <text fg={termColors.purple11} attributes={TextAttributes.BOLD}>Status</text>
-                        <text>{activeContainer?.status || "None"}</text>
-                    </box>
-                </box>
-                <scrollbox
-                    ref={scrollBoxRef}
-                    scrollY={true}
-                    stickyScroll={true}
-                    stickyStart="bottom"
-                    height="100%"
-                >
-                    <box flexDirection="column" height="auto">
-                        {output}
-                    </box>
-                </scrollbox>
-            </box>
-        </Pane>
-    )
-}

package/src/components/Pane.tsx

@@ -1,34 +0,0 @@
-import { SplitBorder } from "./Border";
-import type { BoxProps } from "@opentui/react";
-import { padding, colors, termColors } from "../utils/styling";
-import { TextAttributes } from "@opentui/core";
-
-interface PaneProps extends BoxProps {
-    title?: string;
-    active?: boolean;
-    children: React.ReactNode;
-}
-
-export default function Pane({
-    title,
-    active = false,
-    children,
-    ...props
-}: PaneProps) {
-    return (
-        <box
-            {...SplitBorder}
-            {...props}
-            borderColor={active ? termColors.purple11 : colors.backgroundPanel}
-        >
-            <box
-                flexGrow={1}
-                backgroundColor={colors.backgroundPanel}
-                {...padding}
-            >
-                {title && <text marginBottom={1} attributes={TextAttributes.BOLD}>{title}</text>}
-                {children}
-            </box>
-        </box>
-    )
-}

package/src/components/VolumesPanes.tsx

@@ -1,84 +0,0 @@
- import { useEffect, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
-import Pane from "./Pane";
-import { colors } from "../utils/styling";
-import { useVolumeStore } from "../stores/volumes";
-import { useApplicationStore } from "../stores/application";
-import type { ScrollBoxRenderable } from "@opentui/core";
-
-export default function ImagesPane() {
-    const { activePane, setActivePane } = useApplicationStore((state) => state);
-    const { volumes, setVolumes } = useVolumeStore();
-    const scrollBoxRef = useRef<ScrollBoxRenderable>(null);
-
-    useEffect(() => {
-        const process = Bun.spawn(
-            ["docker", "volume", "ls", "--format", "{{.Name}}"],
-            {stdout: "pipe", stderr: "pipe"},
-        );
-
-        async function read() {
-            try {
-                const reader = process.stdout.getReader();
-                
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-                    const decodedValues = new TextDecoder().decode(value);
-                    const lines = decodedValues.split("\n").filter(Boolean);
-                    setVolumes(lines);
-                }
-            } catch (error) {
-                console.error(error);
-            }
-        }
-
-        read();
-
-        return () => process.kill();
-    }, []);
-
-    useKeyboard((key) => {
-        if (activePane !== "volumes") {
-            return;
-        }
-
-        if (key.name === "left") {
-            setActivePane("images");
-        }
-
-        if (key.name === "right" || key.name === "tab") {
-            setActivePane("containers");
-        }
-    });
-
-    return (
-        <Pane
-            title="Volumes"
-            active={activePane === "volumes"}
-            width="100%"
-            flexDirection="column"
-        >
-            <scrollbox
-                ref={scrollBoxRef}
-                scrollY={true}
-                stickyScroll={true}
-                stickyStart="bottom"
-                viewportOptions={{
-                    flexGrow: 1
-                }}
-            >
-                {volumes.map((item, index) => {
-                    return <box>
-                        <text
-                            key={index}
-                            content={`[*] ${item}`}
-                            fg={colors.textMuted}
-                        />
-                    </box>
-                })}
-                {volumes.length < 1 && <text fg={colors.textMuted}>No Volumes</text>}
-            </scrollbox>
-        </Pane>
-    )
-}

package/src/components/ui/Shimmer.tsx

@@ -1,64 +0,0 @@
-import { RGBA } from "@opentui/core"
-import { useTimeline } from "@opentui/react"
-import { useState, useEffect } from "react"
-
-export type ShimmerProps = {
-    text: string
-    color: RGBA
-}
-
-const DURATION = 2_500
-
-export function Shimmer(props: ShimmerProps) {
-    const timeline = useTimeline({
-        duration: DURATION,
-        loop: true,
-    })
-    const characters = props.text.split("")
-    const color = props.color
-
-    const [shimmerValues, setShimmerValues] = useState<number[]>(() => 
-        characters.map(() => 0.4)
-    )
-
-    useEffect(() => {
-        characters.forEach((_, i) => {
-            const target = {
-                shimmer: shimmerValues[i],
-                setShimmer: (value: number) => {
-                    setShimmerValues(prev => {
-                        const newValues = [...prev]
-                        newValues[i] = value
-                        return newValues
-                    })
-                },
-            }
-
-            timeline!.add(
-                target,
-                {
-                    shimmer: 1,
-                    duration: DURATION / (props.text.length + 1),
-                    ease: "linear",
-                    alternate: true,
-                    loop: 2,
-                    onUpdate: () => {
-                        target.setShimmer(target.shimmer)
-                    },
-                },
-                (i * (DURATION / (props.text.length + 1))) / 2,
-            )
-        })
-    }, [timeline, props.text.length])
-
-    return (
-        <text>
-            {characters.map((ch, i) => {
-                const shimmer = shimmerValues[i]
-                const fg = RGBA.fromInts(color.r * 255, color.g * 255, color.b * 255, shimmer * 255)
-                return <span key={i} style={{ fg }}>{ch}</span>
-            })}
-        </text>
-    )
-}
-

package/src/layouts/BaseLayout.tsx

@@ -1,60 +0,0 @@
-
-import { useTerminalDimensions } from "@opentui/react";
-import { useState, useEffect } from "react";
-import { colors, padding } from "../utils/styling";
-import { TextAttributes } from "@opentui/core";
-import { useApplicationStore } from "../stores/application";
-import { SplitBorder } from "../components/Border";
-
-export default function BaseLayout({ children }: { children: React.ReactNode }) {
-    const { activePane, setActivePane } = useApplicationStore((state) => state);
-    const dimensions = useTerminalDimensions();
-    const [pwd, setPwd] = useState<string>("");
-    const version = "v0.1.5";
-
-    useEffect(() => {
-        Bun.$`pwd`.quiet().then(result => setPwd(result.text()));
-        setActivePane("containers");
-    }, [setActivePane]);
-
-    return (
-        <box 
-            width={dimensions.width}
-            height={dimensions.height}
-            backgroundColor={colors.background}
-        >
-            <box
-                flexDirection="row"
-                gap={1}
-                width="100%"
-                {...padding}
-            >
-                {children}
-            </box>
-            <box
-                height={1}
-                backgroundColor={colors.backgroundPanel}
-                flexDirection="row"
-                justifyContent="space-between"
-                flexShrink={0}
-            >
-                <box flexDirection="row">
-                    <box flexDirection="row" backgroundColor={colors.backgroundElement} paddingLeft={1} paddingRight={1}>
-                        <text fg={colors.textMuted}>open</text>
-                        <text attributes={TextAttributes.BOLD}>docker </text>
-                        <text fg={colors.textMuted}>{version}</text>
-                    </box>
-                    <box paddingLeft={1} paddingRight={1}>
-                        <text fg={colors.textMuted}>~{pwd}</text>
-                    </box>
-                </box>
-                <box flexDirection="row" gap={1}>
-                    {/* <text fg={colors.textMuted}>tab</text> */}
-                    <box backgroundColor={colors.accent} paddingLeft={1} paddingRight={1} {...SplitBorder} borderColor={colors.backgroundPanel}>
-                        <text fg={colors.backgroundPanel} attributes={TextAttributes.BOLD}>{activePane}</text>
-                    </box>
-                </box>
-            </box>
-        </box>
-    )
-}

package/src/lib/docker.ts

@@ -1,68 +0,0 @@
-
-export class Docker {
-    private socket = "/var/run/docker.sock";
-    
-    private async request(path: string) {
-        try {
-            const process = Bun.spawn([
-                "curl", "-s", "--unix-socket", this.socket, 
-                `http://localhost${path}`
-            ], { stdout: "pipe", stderr: "pipe" });
-
-            const output = await new Response(process.stdout).text();
-            process.kill();
-            
-            return JSON.parse(output);
-        } catch (error) {
-            console.error('Docker socket request failed:', error);
-            throw error;
-        }
-    }
-
-    async getContainers() {
-        return this.request("/v1.41/containers/json?all=true");
-    }
-
-    async watch(callback: (containers: any[]) => void) {
-        try {
-            let containers = await this.getContainers();
-            callback(containers);
-
-            const process = Bun.spawn([
-                "curl", "-s", "--no-buffer", "--unix-socket", this.socket,
-                "http://localhost/v1.41/events"
-            ], { stdout: "pipe", stderr: "pipe" });
-
-            const reader = process.stdout.getReader();
-            const decoder = new TextDecoder();
-            let buffer = "";
-
-            while (true) {
-                const { value, done } = await reader.read();
-                if (done) break;
-
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split('\n');
-                buffer = lines.pop() || "";
-
-                for (const line of lines) {
-                    if (line.trim()) {
-                        try {
-                            const event = JSON.parse(line);
-                            if (event.Type === "container") {
-                                containers = await this.getContainers();
-                                callback(containers);
-                            }
-                        } catch (parseError) {
-                            console.error('Failed to parse event:', line, parseError);
-                        }
-                    }
-                }
-            }
-            
-        } catch (error) {
-            console.error('Docker watch failed', error);
-            throw error;
-        }
-    }
-}

package/src/main.tsx

@@ -1,43 +0,0 @@
-#!/usr/bin/env bun
-
-import { createRoot, useKeyboard, useRenderer } from "@opentui/react";
-import { createCliRenderer } from "@opentui/core";
-import ContainersPane from "./components/ContainersPane";
-import LogsPane from "./components/LogsPane";
-import BaseLayout from "./layouts/BaseLayout";
-
-function App() {
-    const renderer = useRenderer();
-
-    useKeyboard((key) => {
-        if (key.name === "q") {
-            process.exit(0);
-        }
-
-        if (key.ctrl && key.name === "d") {
-            renderer?.console.toggle()
-            renderer?.toggleDebugOverlay()
-        }
-    })
-
-    return (
-        <BaseLayout>
-            <box
-                flexDirection="column"
-                width="30%"
-                gap={1}
-            >
-                <ContainersPane />
-            </box>
-            <LogsPane />
-        </BaseLayout>
-    )
-}
-
-async function main() {
-    const renderer = await createCliRenderer();
-  const root = createRoot(renderer);
-  root.render(<App />);
-}
-
-main();

package/src/stores/application.ts

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-
-interface ApplicationStore {
-    activePane: string;
-    setActivePane: (activePane: string) => void;
-}
-
-export const useApplicationStore = create<ApplicationStore>((set) => ({
-    activePane: "containers",
-    setActivePane: (activePane) => set({ activePane }),
-}));

package/src/stores/containers.ts

@@ -1,22 +0,0 @@
-import { create } from "zustand";
-
-export type Container = {
-    name: string;
-    status: string;
-    health: string;
-    state: string;
-}
-
-interface ContainerStore {
-    containers: Container[];
-    activeContainer: Container;
-    setContainers: (containers: Container[]) => void;
-    setActiveContainer: (activeContainer: Container) => void;
-}
-
-export const useContainerStore = create<ContainerStore>((set) => ({
-    containers: [],
-    activeContainer: null,
-    setContainers: (containers: Container[]) => set({ containers }),
-    setActiveContainer: (activeContainer) => set({ activeContainer }),
-}));

package/src/stores/images.ts

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-
-export interface ImageStore {
-    images: string[];
-    setImages: (images: string[]) => void;
-}
-
-export const useImageStore = create<ImageStore>((set) => ({
-  images: [],
-  setImages: (images: string[]) => set({ images }),
-}));

package/src/stores/volumes.ts

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-
-interface VolumeStore {
-    volumes: string[];
-    setVolumes: (volumes: string[]) => void;
-}
-
-export const useVolumeStore = create<VolumeStore>((set) => ({
-    volumes: [],
-    setVolumes: (volumes: string[]) => set({ volumes }),
-}));