cdd-cli 2.0.1 → 3.0.0

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,39 @@
+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,88 @@
+
+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

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import { getContainers } from "../helpers/dockerService";
+
+export function useContainers() {
+  const [containers, setContainers] = useState([]);
+
+  useEffect(() => {
+    const fetch = async () => setContainers(await getContainers());
+    fetch();
+    const timer = setInterval(fetch, 3000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return { containers };
+}

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/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 },
-  };
-}