cdd-cli 2.0.3 → 3.0.1

package/src/App.jsx

@@ -1,13 +1,30 @@
+/**
+ * Main React component for the CDD CLI UI.
+ * Componente principal de React para la UI del CLI CDD.
+ *
+ * @component
+ * @returns {JSX.Element} The rendered app / La app renderizada
+ * @example
+ * // EN: Render the app
+ * // ES: Renderizar la app
+ * <App />
+ */
 import React from "react";
 import { Box, Text, Spacer } from "ink";
 import { useContainers } from "./hooks/useContainers";
-import ContainerRow from "./components/ContainerRow";
+import { useControls } from "./hooks/useControls";
+import ContainerList from "./components/ContainerList";
+import MessageFeedback from "./components/MessageFeedback";
 import Header from "./components/Header";
+import LogViewer from "./components/LogViewer";
 
 export default function App() {
   const { containers } = useContainers();
+  const { selected, message, messageColor, showLogs, logs, exitLogs } =
+    useControls(containers);
 
   return (
+    <>
       <Box
         flexDirection="column"
         borderStyle="round"
@@ -19,15 +36,26 @@ export default function App() {
         {containers.length === 0 ? (
           <Text>No containers found</Text>
         ) : (
-          containers.map((container) => (
-            <ContainerRow key={container.id} container={container} />
-          ))
+          <ContainerList containers={containers} selected={selected} />
         )}
         <Spacer />
-        <Box marginTop={1}>
-          <Text dimColor>Press Ctrl+C to exit</Text>
+        <MessageFeedback message={message} color={messageColor} />
+        <Text>Use ↑/↓ for navigation</Text>
+        <Text>•I to initiate selected container</Text>
+        <Text>•P to stop selected container</Text>
+        <Text>•L to view logs of selected container</Text>
+        <Text>•Q to quit</Text>
+        <Box justifyContent="flex-end" width="100%">
+          <Text dimColor>Crafted by Carlos Cochero • 2025</Text>
         </Box>
-        <Text dimColor>Crafted by Carlos Cochero • 2025</Text>
       </Box>
+      {showLogs && (
+        <LogViewer
+          logs={logs}
+          onExit={exitLogs}
+          container={containers[selected]}
+        />
+      )}
+    </>
   );
 }

package/src/components/ContainerList.jsx

@@ -0,0 +1,31 @@
+/**
+ * List component for Docker containers.
+ * Componente de lista para contenedores Docker.
+ *
+ * @component
+ * @param {Object} props - Component props / Props del componente
+ * @param {Array} props.containers - Containers to display / Contenedores a mostrar
+ * @returns {JSX.Element} Rendered list / Lista renderizada
+ * @example
+ * // EN: Render with containers
+ * // ES: Renderizar con contenedores
+ * <ContainerList containers={containers} />
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import ContainerRow from "./ContainerRow";
+
+export default function ContainerList({ containers, selected }) {
+  return (
+    <>
+      {containers.map((container, i) => (
+        <Box key={container.id} flexDirection="row" alignItems="center">
+          <Text color={i === selected ? "green" : undefined}>
+            {i === selected ? "➤" : "  "}
+          </Text>
+          <ContainerRow container={container} isSelected={i === selected} />
+        </Box>
+      ))}
+    </>
+  );
+}

package/src/components/ContainerRow.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text } from "ink";
 import chalk from "chalk";
-import { getStats } from "../dockerService.js";
+import { getStats } from "../helpers/dockerService.js";
 import StatsBar from "./StatsBar";
 
 const colorByState = (state) => {
@@ -37,13 +37,16 @@ export default function ContainerRow({ container }) {
         {state === "running"
           ? chalk.greenBright("🟢 RUNNING")
           : chalk.redBright(`🔴 ${state.toUpperCase()}`)}
+        {"  "}
+        {chalk.yellow(container.ports)}
+        {"  "}
+        {state === "running" && (
+          <StatsBar
+            cpu={parseFloat(stats.cpuPercent)}
+            mem={parseFloat(stats.memPercent)}
+          />
+        )}
       </Text>
-      {state === "running" && (
-        <StatsBar
-          cpu={parseFloat(stats.cpuPercent)}
-          mem={parseFloat(stats.memPercent)}
-        />
-      )}
     </Box>
   );
 }

package/src/components/LogViewer.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, useInput } from "ink";
+
+export default function LogViewer({ logs, onExit, container }) {
+  useInput((input, key) => {
+    if (key.escape) {
+      onExit();
+    }
+  });
+
+  const visibleLogs = logs.slice(-15);
+
+  return (
+    <>
+      <Text color="green">{container?.name || "Container"} logs, press ESC to exit</Text>
+      {visibleLogs.length === 0 ? (
+        <Text dimColor>No logs...</Text>
+      ) : (
+        visibleLogs.map((line, idx) => <Text key={idx}>{line}</Text>)
+      )}
+    </>
+  );
+}

package/src/components/MessageFeedback.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export default function MessageFeedback({ message, color }) {
+  if (!message) return null;
+  return (
+    <Box marginBottom={1}>
+      <Text color={color}>{message}</Text>
+    </Box>
+  );
+}

package/src/helpers/actionHelpers.js

@@ -0,0 +1,31 @@
+// Helper para manejar acciones docker con feedback visual y validación
+export async function handleAction({
+  containers,
+  selected,
+  actionFn,
+  actionLabel,
+  setMessage,
+  setMessageColor,
+  stateCheck
+}) {
+  const c = containers[selected];
+  if (!c) return;
+  if (stateCheck && stateCheck(c)) {
+    setMessage(stateCheck(c));
+    setMessageColor("red");
+    setTimeout(() => setMessage(""), 2000);
+    return;
+  }
+  setMessage(`${actionLabel} container...`);
+  setMessageColor("green");
+  try {
+    await actionFn(c.id);
+    setMessage(`${actionLabel} container...`);
+    setMessageColor("green");
+    setTimeout(() => setMessage(""), 3000);
+  } catch (err) {
+    setMessage(`Failed to ${actionLabel.toLowerCase()} container.`);
+    setMessageColor("red");
+    setTimeout(() => setMessage(""), 3000);
+  }
+}

package/src/helpers/dockerActions.js

@@ -0,0 +1,52 @@
+/**
+ * Run a Docker action by name (start, stop, remove).
+ * Ejecuta una acción Docker por nombre (start, stop, remove).
+ *
+ * @param {string} action - Action to perform / Acción a realizar
+ * @param {string} container - Container name / Nombre del contenedor
+ * @returns {Promise<boolean>} True if successful / True si es exitoso
+ * @throws {Error} If Docker is not running / Si Docker no está corriendo
+ * @example
+ * // EN: Start a container
+ * // ES: Iniciar un contenedor
+ * await runDockerAction('start', 'my_container');
+ */
+import { spawn } from "child_process";
+
+/**
+ * Ejecuta una acción de Docker sobre un contenedor y maneja feedback visual.
+ * @param {Object} params
+ * @param {Array} params.containers - Lista de contenedores.
+ * @param {number} params.selected - Índice del contenedor seleccionado.
+ * @param {string} params.action - Acción docker (start, stop, restart).
+ * @param {string} params.actionLabel - Texto para feedback (Starting, Stopping, etc).
+ * @param {Function} params.setMessage - Setter de mensaje visual.
+ * @param {Function} params.setMessageColor - Setter de color del mensaje.
+ */
+export function handleDockerAction({ containers, selected, action, actionLabel, setMessage, setMessageColor }) {
+  if (containers[selected]) {
+    const c = containers[selected];
+    const id = c.id || c.name;
+    // Validación de estado
+    if (action === "start" && (c.state === "running" || c.status === "running")) {
+      setMessage("Container is already running.");
+      setMessageColor("red");
+      setTimeout(() => setMessage(""), 2000);
+      return;
+    }
+    if (action === "stop" && (c.state === "exited" || c.status === "exited" || c.state === "stopped" || c.status === "stopped")) {
+      setMessage("Container is already stopped.");
+      setMessageColor("red");
+      setTimeout(() => setMessage(""), 2000);
+      return;
+    }
+    setMessage(`${actionLabel} container...`);
+    setMessageColor("green");
+    const child = spawn("docker", [action, id]);
+    child.on("close", () => {
+      setMessage(`${actionLabel} container...`);
+      setMessageColor("green");
+      setTimeout(() => setMessage(""), 3000);
+    });
+  }
+}

package/src/helpers/dockerService.js

@@ -0,0 +1,100 @@
+/**
+ * Utility to interact with Docker CLI.
+ * Utilidad para interactuar con el CLI de Docker.
+ *
+ * @param {string} cmd - Docker command / Comando Docker
+ * @returns {Promise<string>} Output from Docker / Salida de Docker
+ * @throws {Error} If command fails / Si el comando falla
+ * @example
+ * // EN: Run a Docker command
+ * // ES: Ejecutar un comando Docker
+ * await dockerService('ps -a');
+ */
+
+import Docker from "dockerode";
+const docker = new Docker({ socketPath: "/var/run/docker.sock" });
+
+export function getLogsStream(containerId, onData, onEnd, onError) {
+  const container = docker.getContainer(containerId);
+  container.logs({
+    follow: true,
+    stdout: true,
+    stderr: true,
+    tail: 100
+  }, (err, stream) => {
+    if (err) {
+      onError?.(err);
+      return;
+    }
+    stream.on('data', chunk => onData?.(chunk.toString()));
+    stream.on('end', () => onEnd?.());
+    stream.on('error', err => onError?.(err));
+  });
+}
+
+export async function startContainer(containerId) {
+  const container = docker.getContainer(containerId);
+  await container.start();
+}
+
+export async function stopContainer(containerId) {
+  const container = docker.getContainer(containerId);
+  await container.stop();
+}
+
+export async function restartContainer(containerId) {
+  const container = docker.getContainer(containerId);
+  await container.restart();
+}
+
+export async function getContainers() {
+  const containers = await docker.listContainers({ all: true });
+  return containers.map((container) => ({
+    id: container.Id,
+    name: container.Names[0].replace("/", ""),
+    image: container.Image,
+    state: container.State,
+    status: container.Status,
+    ports:
+      [
+        ...new Set(
+          container.Ports.filter((port) => port.PublicPort).map(
+            (port) => `${port.PublicPort}:${port.PrivatePort}`
+          )
+        ),
+      ]
+  }));
+}
+
+export async function getStats(containerId) {
+  const container = docker.getContainer(containerId);
+  const stream = await container.stats({ stream: false });
+
+  const cpuDelta =
+    stream.cpu_stats.cpu_usage.total_usage -
+    stream.precpu_stats.cpu_usage.total_usage;
+  const systemDelta =
+    stream.cpu_stats.system_cpu_usage - stream.precpu_stats.system_cpu_usage;
+  const cpuPercent = systemDelta > 0 ? (cpuDelta / systemDelta) * 100 : 0;
+
+  const memUsage = stream.memory_stats.usage || 0;
+  const memLimit = stream.memory_stats.limit || 1;
+  const memPercent = (memUsage / memLimit) * 100;
+
+  const rx = stream.networks
+    ? Object.values(stream.networks)
+        .map((n) => n.rx_bytes)
+        .reduce((a, b) => a + b, 0)
+    : 0;
+  const tx = stream.networks
+    ? Object.values(stream.networks)
+        .map((n) => n.tx_bytes)
+        .reduce((a, b) => a + b, 0)
+    : 0;
+
+  return {
+    cpuPercent: cpuPercent.toFixed(1),
+    memPercent: memPercent.toFixed(1),
+    netIO: { rx, tx },
+  };
+}

package/src/helpers/exitWithMessage.js

@@ -0,0 +1,15 @@
+import { spawn } from "child_process";
+
+export function exitWithMessage({ setMessage, setMessageColor, message = "Exiting...", color = "yellow", delay = 1500 }) {
+  setMessage(message);
+  setMessageColor(color);
+  setTimeout(() => {
+    setMessage("");
+    if (process.platform === "win32") {
+      spawn("cmd", ["/c", "cls"], { stdio: "inherit" });
+    } else {
+      spawn("clear", [], { stdio: "inherit" });
+    }
+    process.exit();
+  }, delay);
+}

package/src/hooks/useContainers.js

@@ -1,5 +1,15 @@
+/**
+ * React hook to manage Docker containers state.
+ * Hook de React para gestionar el estado de contenedores Docker.
+ *
+ * @returns {[Array, Function]} [containers, refresh] / [contenedores, refrescar]
+ * @example
+ * // EN: Use in a component
+ * // ES: Usar en un componente
+ * const [containers, refresh] = useContainers();
+ */
 import React, { useState, useEffect } from "react";
-import { getContainers } from "../dockerService";
+import { getContainers } from "../helpers/dockerService";
 
 export function useContainers() {
   const [containers, setContainers] = useState([]);

package/src/hooks/useControls.js

@@ -0,0 +1,98 @@
+
+import React, { useState, useRef } from "react";
+import { useInput } from "ink";
+import { startContainer, stopContainer, restartContainer, getLogsStream } from "../helpers/dockerService";
+import { handleAction } from "../helpers/actionHelpers";
+import { exitWithMessage } from "../helpers/exitWithMessage";
+
+
+export function useControls(containers = []) {
+  const [selected, setSelected] = useState(0);
+  const [message, setMessage] = useState("");
+  const [messageColor, setMessageColor] = useState("yellow");
+  const [showLogs, setShowLogs] = useState(false);
+  const [logs, setLogs] = useState([]);
+  const logsStreamRef = useRef(null);
+  const total = containers.length;
+
+  // Handler para salir de la vista de logs
+  const exitLogs = () => {
+    setShowLogs(false);
+    setLogs([]);
+    if (logsStreamRef.current) {
+      logsStreamRef.current.destroy?.();
+      logsStreamRef.current = null;
+    }
+  };
+
+  useInput((input, key) => {
+    if (showLogs) {
+      if (input === "q" || key.escape) {
+        exitLogs();
+      }
+      return;
+    }
+
+    //==========================================================
+    // Menu Navigation
+    //==========================================================
+    if (key.upArrow && total > 0) {
+      setSelected((i) => (i === 0 ? total - 1 : i - 1));
+    }
+    if (key.downArrow && total > 0) {
+      setSelected((i) => (i === total - 1 ? 0 : i + 1));
+    }
+    if (input === "q") {
+      exitWithMessage({ setMessage, setMessageColor });
+      return;
+    }
+
+    //==========================================================
+    // Docker commands
+    //==========================================================
+    if (input === "i") {
+      handleAction({
+        containers,
+        selected,
+        actionFn: startContainer,
+        actionLabel: "Starting",
+        setMessage,
+        setMessageColor,
+        stateCheck: c => (c.state === "running" || c.status === "running") && "Container is already running."
+      });
+    }
+    if (input === "p") {
+      handleAction({
+        containers,
+        selected,
+        actionFn: stopContainer,
+        actionLabel: "Stopping",
+        setMessage,
+        setMessageColor,
+        stateCheck: c => ((c.state === "exited" || c.status === "exited" || c.state === "stopped" || c.status === "stopped") && "Container is already stopped.")
+      });
+    }
+    if (input === "r") {
+      handleAction({
+        containers,
+        selected,
+        actionFn: restartContainer,
+        actionLabel: "Restarting",
+        setMessage,
+        setMessageColor
+      });
+    }
+    if (input === "l" && containers[selected]) {
+      setShowLogs(true);
+      setLogs([]);
+      getLogsStream(
+        containers[selected].id,
+        (data) => setLogs((prev) => ([...prev, ...data.split("\n").filter(Boolean)])),
+        () => {},
+        (err) => setLogs((prev) => ([...prev, `Error: ${err.message}`]))
+      );
+    }
+  });
+
+  return { selected, setSelected, message, messageColor, showLogs, logs, exitLogs };
+}

package/src/hooks/useLogsStream.js

@@ -0,0 +1,25 @@
+import React, { useRef, useCallback } from "react";
+import { getLogsStream } from "../helpers/dockerService";
+
+export function useLogsStream() {
+  const logsStreamRef = useRef(null);
+
+  const openLogs = useCallback((containerId, setLogs) => {
+    setLogs([]);
+    logsStreamRef.current = getLogsStream(
+      containerId,
+      (data) => setLogs((prev) => ([...prev, ...data.split("\n").filter(Boolean)])),
+      () => {},
+      (err) => setLogs((prev) => ([...prev, `Error: ${err.message}`]))
+    );
+  }, []);
+
+  const closeLogs = useCallback(() => {
+    if (logsStreamRef.current) {
+      logsStreamRef.current.destroy?.();
+      logsStreamRef.current = null;
+    }
+  }, []);
+
+  return { openLogs, closeLogs };
+}

package/src/index.js

@@ -1,4 +1,17 @@
 #!/usr/bin/env node
+
+/**
+ * Entry point for the CDD CLI application.
+ * Punto de entrada para la aplicación CLI de CDD.
+ *
+ * @module index
+ * @example
+ * // EN: Run the CLI
+ * // ES: Ejecutar el CLI
+ * node index.js
+ */
+
+
 import React from "react";
 import { render } from "ink";
 import App from './App';

package/src/dockerService.js

@@ -1,49 +0,0 @@
-import Docker from 'dockerode';
-const docker = new Docker({ socketPath: '/var/run/docker.sock'});
-
-export async function getContainers() {
-    const containers = await
-docker.listContainers({ all: true });
-    return containers.map(container => ({
-        id: container.Id,
-        name: container.Names[0].replace('/', ''),
-        image: container.Image,
-        state: container.State,
-        status: container.Status,
-        ports: container.Ports.map(port => `${port.PublicPort
-            || '' }:${port.PrivatePort}`).join(', ') || '-'
-    }))
-}
-
-export async function getStats(containerId) {
-  const container = docker.getContainer(containerId);
-  const stream = await container.stats({ stream: false });
-  
-  const cpuDelta =
-    stream.cpu_stats.cpu_usage.total_usage -
-    stream.precpu_stats.cpu_usage.total_usage;
-  const systemDelta =
-    stream.cpu_stats.system_cpu_usage - stream.precpu_stats.system_cpu_usage;
-  const cpuPercent = systemDelta > 0 ? (cpuDelta / systemDelta) * 100 : 0;
-
-  const memUsage = stream.memory_stats.usage || 0;
-  const memLimit = stream.memory_stats.limit || 1;
-  const memPercent = (memUsage / memLimit) * 100;
-
-  const rx = stream.networks
-    ? Object.values(stream.networks)
-        .map(n => n.rx_bytes)
-        .reduce((a, b) => a + b, 0)
-    : 0;
-  const tx = stream.networks
-    ? Object.values(stream.networks)
-        .map(n => n.tx_bytes)
-        .reduce((a, b) => a + b, 0)
-    : 0;
-
-  return {
-    cpuPercent: cpuPercent.toFixed(1),
-    memPercent: memPercent.toFixed(1),
-    netIO: { rx, tx },
-  };
-}