cdd-cli 3.0.1 → 3.1.1

package/src/components/ContainerList.jsx

@@ -13,17 +13,21 @@
  */
 import React from "react";
 import { Box, Text } from "ink";
-import ContainerRow from "./ContainerRow";
+import ContainerRow from "./ContainerRow.jsx";
 
 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 key={container.id} flexDirection="row" alignItems="flex-start">
+          <Box width={2} minWidth={2} justifyContent="flex-end">
+            <Text color={i === selected ? "green" : undefined}>
+              {i === selected ? "➤" : "  "}
+            </Text>
+          </Box>
+          <Box flexGrow={1} paddingLeft={1}>
+            <ContainerRow container={container} isSelected={i === selected} />
+          </Box>
         </Box>
       ))}
     </>

package/src/components/ContainerRow.jsx

@@ -1,14 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text } from "ink";
-import chalk from "chalk";
-import { getStats } from "../helpers/dockerService.js";
-import StatsBar from "./StatsBar";
+import { getStats } from "../helpers/dockerService/serviceComponents/containerStats";
+import StatsBar from "./StatsBar.jsx";
 
-const colorByState = (state) => {
-  if (state === "running") return chalk.greenBright("🟢 RUNNING");
-  if (state === "exited") return chalk.redBright("🔴 EXITED");
-  if (state === "paused") return chalk.yellowBright("🟠 PAUSED");
-  return chalk.gray(state.toUpperCase());
+const stateText = (state) => {
+  if (state === "running") return { text: "🟢 RUNNING", color: "green" };
+  if (state === "exited") return { text: "🔴 EXITED", color: "red" };
+  if (state === "paused") return { text: "🟠 PAUSED", color: "yellow" };
+  return { text: state.toUpperCase(), color: "gray" };
 };
 
 export default function ContainerRow({ container }) {
@@ -19,34 +18,52 @@ export default function ContainerRow({ container }) {
     netIO: { rx: 0, tx: 0 },
   });
 
+  // Formatear puertos
+  const formatPorts = (ports) => {
+    if (!ports || ports.length === 0) return "";
+    if (Array.isArray(ports)) {
+      return ports.map((p, i) => ` 🔗 ${p}`).join("  ");
+    }
+    return ` 🔗 ${ports}`;
+  };
+
+  const [statsError, setStatsError] = useState("");
   useEffect(() => {
     if (state !== "running") return;
     const fetchStats = async () => {
-      const s = await getStats(id);
-      setStats(s);
+      try {
+        const s = await getStats(id);
+        setStats(s);
+        setStatsError("");
+      } catch (err) {
+        setStats({ cpuPercent: 0, memPercent: 0, netIO: { rx: 0, tx: 0 } });
+        setStatsError("Error fetching stats");
+      }
     };
     fetchStats();
     const timer = setInterval(fetchStats, 1500);
     return () => clearInterval(timer);
   }, [id, state]);
 
+  const stateInfo = stateText(state);
   return (
     <Box flexDirection="column" marginBottom={1}>
-      <Text>
-        {chalk.cyan(name.padEnd(20))} {chalk.gray(image.padEnd(20))}{" "}
-        {state === "running"
-          ? chalk.greenBright("🟢 RUNNING")
-          : chalk.redBright(`🔴 ${state.toUpperCase()}`)}
-        {"  "}
-        {chalk.yellow(container.ports)}
-        {"  "}
+      <Box>
+        <Text color="cyan">{name.padEnd(20)}</Text>
+        <Text color="gray">{image.padEnd(20)}</Text>
+        <Text color={stateInfo.color}>{stateInfo.text}</Text>
+        <Text color="yellow">{formatPorts(container.ports)}</Text>
+        {state === "running" && <Text> </Text>}
         {state === "running" && (
           <StatsBar
             cpu={parseFloat(stats.cpuPercent)}
             mem={parseFloat(stats.memPercent)}
           />
         )}
-      </Text>
+        {state === "running" && statsError && (
+          <Text color="red">{statsError}</Text>
+        )}
+      </Box>
     </Box>
   );
 }

package/src/components/ContainerSection.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "ink";
+import ContainerList from "./ContainerList.jsx";
+
+export default function ContainerSection({ containers, selected }) {
+  if (containers.length === 0) {
+    return <Text>No containers found</Text>;
+  }
+  return <ContainerList containers={containers} selected={selected} />;
+}

package/src/components/Footer.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export default function Footer() {
+  return (
+    <Box justifyContent="flex-end" width="100%">
+      <Text dimColor>Crafted by Carlos Cochero • 2025</Text>
+    </Box>
+  );
+}

package/src/components/PromptField.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Text } from "ink";
+
+export function PromptField({ label, value, required }) {
+  // If the field is required and empty, show in red
+  const isEmpty = required && !value.trim();
+  return (
+    <>
+      <Text>{label}</Text>
+      <Text color={isEmpty ? "red" : "cyan"}>{value}_</Text>
+    </>
+  );
+}
+
+export function PromptMessage({ message, color }) {
+  if (!message) return null;
+  return <Text color={color || "yellow"}>{message}</Text>;
+}

package/src/components/UsageMenu.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export default function UsageMenu() {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text>Use ↑/↓ for navigation</Text>
+      <Text>•I to initiate selected container</Text>
+      <Text>•P to stop selected container</Text>
+      <Text>•R to restart selected container</Text>
+      <Text>•C to create a container</Text>
+      <Text>•L to view logs of selected container</Text>
+      <Text>•E to remove selected container</Text>
+      <Text>•Q to quit</Text>
+    </Box>
+  );
+}

package/src/helpers/actionHelpers.js

@@ -1,4 +1,3 @@
-// Helper para manejar acciones docker con feedback visual y validación
 export async function handleAction({
   containers,
   selected,

package/src/helpers/dockerService/dockerService.js

@@ -0,0 +1,3 @@
+import Docker from "dockerode";
+const docker = new Docker({ socketPath: "/var/run/docker.sock" });
+export { docker };

package/src/helpers/dockerService/serviceComponents/containerActions.js

@@ -0,0 +1,52 @@
+export async function removeContainer(containerId) {
+  const container = docker.getContainer(containerId);
+  try {
+    await container.remove({ force: true });
+  } catch (err) {
+    throw new Error('Error removing container: ' + err.message);
+  }
+}
+import { docker } from "../dockerService";
+import { imageExists, pullImage } from "./imageUtils.js";
+
+export async function createContainer(imageName, options = {}) {
+  let exists;
+  try {
+    exists = await imageExists(imageName);
+  } catch (err) {
+    throw new Error('Error listing local images: ' + err.message);
+  }
+  if (!exists) {
+    try {
+      await pullImage(imageName);
+    } catch (err) {
+      throw new Error('Could not pull image: ' + err.message);
+    }
+  }
+  const createOpts = {
+    Image: imageName,
+    Tty: true,
+    ...options,
+  };
+  try {
+    const container = await docker.createContainer(createOpts);
+    return container.id || container.Id;
+  } catch (err) {
+    throw new Error('Error creating container: ' + err.message);
+  }
+}
+
+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();
+}

package/src/helpers/dockerService/serviceComponents/containerList.js

@@ -0,0 +1,26 @@
+import { docker } from "../dockerService";
+
+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:
+      (() => {
+        const publicPorts = container.Ports.filter((port) => port.PublicPort).map(
+          (port) => `${port.PublicPort}:${port.PrivatePort}`
+        );
+        if (publicPorts.length > 0) {
+          return [...new Set(publicPorts)];
+        }
+        // Si no hay puertos públicos, mostrar los privados expuestos
+        const privatePorts = container.Ports.filter((port) => port.PrivatePort).map(
+          (port) => `:${port.PrivatePort}`
+        );
+        return [...new Set(privatePorts)];
+      })()
+  }));
+}

package/src/helpers/dockerService/serviceComponents/containerLogs.js

@@ -0,0 +1,19 @@
+import { docker } from "../dockerService";
+
+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));
+  });
+}

package/src/helpers/dockerService/serviceComponents/containerStats.js

@@ -0,0 +1,34 @@
+import { docker } from "../dockerService";
+
+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/dockerService/serviceComponents/imageUtils.js

@@ -0,0 +1,21 @@
+import { docker } from "../dockerService";
+
+export async function imageExists(imageName) {
+  const images = await docker.listImages();
+  return images.some(img =>
+    (img.RepoTags || []).includes(imageName) ||
+    (img.RepoDigests || []).some(d => d.includes(imageName))
+  );
+}
+
+export async function pullImage(imageName) {
+  await new Promise((resolve, reject) => {
+    docker.pull(imageName, (err, stream) => {
+      if (err) return reject(new Error('Error pulling image: ' + err.message));
+      docker.modem.followProgress(stream, (pullErr) => {
+        if (pullErr) reject(new Error('Error during pull: ' + pullErr.message));
+        else resolve();
+      });
+    });
+  });
+}

package/src/helpers/validationHelpers.js

@@ -0,0 +1,16 @@
+// Reusable validations for ports and environment variables
+
+export function validatePorts(portInput) {
+  const ports = portInput.split(",").map(p => p.trim()).filter(Boolean);
+  if (ports.length === 0) return false;
+  const invalid = ports.find(pair => {
+    const [host, cont] = pair.split(":");
+    return !host || !cont || isNaN(Number(host)) || isNaN(Number(cont));
+  });
+  return !invalid;
+}
+
+export function validateEnvVars(envInput) {
+  // Future specific validations
+  return true;
+}

package/src/hooks/creation/useContainerActions.js

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { startContainer as svcStartContainer, stopContainer as svcStopContainer, restartContainer as svcRestartContainer, removeContainer as svcRemoveContainer } from "../../helpers/dockerService/serviceComponents/containerActions.js";
+
+/**
+ * Custom hook to manage container actions (start, stop, restart, remove).
+ * Handles feedback messages and exposes helpers for each action.
+ *
+ * @param {Object} params
+ * @param {Array} params.containers - List of containers
+ * @param {Function} params.onAction - Callback after action is performed
+ * @returns {Object} Action helpers and feedback state
+ */
+export function useContainerActions({ containers, onAction }) {
+  const [message, setMessage] = useState("");
+  const [messageColor, setMessageColor] = useState("yellow");
+
+  /**
+   * Handles a generic container action and sets feedback.
+   * @param {Function} actionFn - The async action function (start, stop, etc)
+   * @param {string} actionLabel - Action label for feedback
+   * @param {number} selected - Index of selected container
+   * @param {Function} [stateCheck] - Optional function to check state before action
+   */
+  async function handleAction({ actionFn, actionLabel, selected, stateCheck }) {
+    const container = containers[selected];
+    if (!container) return;
+    if (stateCheck) {
+      const checkMsg = stateCheck(container);
+      if (checkMsg) {
+        setMessage(checkMsg);
+        setMessageColor("yellow");
+        return;
+      }
+    }
+    setMessage(`${actionLabel} container...`);
+    setMessageColor("yellow");
+    try {
+      await actionFn(container.id);
+      setMessage(`${actionLabel} container successful.`);
+      setMessageColor("green");
+      if (onAction) onAction();
+    } catch (err) {
+      setMessage(`Failed to ${actionLabel.toLowerCase()} container: ${err.message}`);
+      setMessageColor("red");
+    }
+  }
+
+  return {
+    message,
+    setMessage,
+    messageColor,
+    setMessageColor,
+    handleAction,
+    // Expose concrete actions so callers can use actions.startContainer(id)
+    startContainer: async (id) => {
+      return await svcStartContainer(id);
+    },
+    stopContainer: async (id) => {
+      return await svcStopContainer(id);
+    },
+    restartContainer: async (id) => {
+      return await svcRestartContainer(id);
+    },
+    removeContainer: async (id) => {
+      return await svcRemoveContainer(id);
+    },
+  };
+}

package/src/hooks/creation/useContainerCreation.js

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { validatePorts, validateEnvVars } from "../../helpers/validationHelpers.js";
+
+/**
+ * Custom hook to manage the container creation flow, step by step.
+ * Handles input, validation, and feedback for each creation step.
+ *
+ * @param {Object} params
+ * @param {Function} params.onCreate - Callback when creation is confirmed
+ * @param {Function} params.onCancel - Callback when creation is cancelled
+ * @param {Array<string>} params.dbImages - List of DB image names for env var warning
+ * @returns {Object} Creation state, setters, and helpers
+ */
+export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
+  const [step, setStep] = useState(0); // 0: image, 1: name, 2: ports, 3: env
+  const [imageName, setImageName] = useState("");
+  const [containerName, setContainerName] = useState("");
+  const [portInput, setPortInput] = useState("");
+  const [envInput, setEnvInput] = useState("");
+  const [message, setMessage] = useState("");
+  const [messageColor, setMessageColor] = useState("yellow");
+
+  /**
+   * Advances to the next step, with validation and feedback.
+   */
+  function nextStep() {
+    if (step === 0) {
+      if (!imageName.trim()) {
+        setMessage("Image name cannot be empty.");
+        setMessageColor("red");
+        return;
+      }
+      setStep(1);
+      setMessage("Optional: Enter container name or leave empty and press Enter");
+      setMessageColor("yellow");
+      return;
+    }
+    if (step === 1) {
+      setStep(2);
+      setMessage("Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter");
+      setMessageColor("yellow");
+      return;
+    }
+    if (step === 2) {
+      if (!portInput.trim()) {
+        setMessage("You must specify at least one port to expose (e.g. 8080:80)");
+        setMessageColor("red");
+        return;
+      }
+      if (!validatePorts(portInput)) {
+        setMessage("Port format must be host:container and both must be numbers (e.g. 8080:80)");
+        setMessageColor("red");
+        return;
+      }
+      setStep(3);
+      const isDb = dbImages.some(db => imageName.trim().toLowerCase().includes(db));
+      if (isDb) {
+        setMessage("Warning: This image usually requires environment variables (e.g. MYSQL_ROOT_PASSWORD=my-secret-pw for MySQL, POSTGRES_PASSWORD=yourpassword for Postgres). Enter them as VAR=val,VAR2=val2 or leave empty and press Enter.");
+        setMessageColor("yellow");
+      } else {
+        setMessage("Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter");
+        setMessageColor("yellow");
+      }
+      return;
+    }
+    if (step === 3) {
+      // Final step: call onCreate with all data
+      onCreate({ imageName, containerName, portInput, envInput });
+    }
+  }
+
+  /**
+   * Cancels the creation process and resets state.
+   */
+  function cancelCreation() {
+    setStep(0);
+    setImageName("");
+    setContainerName("");
+    setPortInput("");
+    setEnvInput("");
+    setMessage("");
+    setMessageColor("yellow");
+    if (onCancel) onCancel();
+  }
+
+  return {
+    step,
+    setStep,
+    imageName,
+    setImageName,
+    containerName,
+    setContainerName,
+    portInput,
+    setPortInput,
+    envInput,
+    setEnvInput,
+    message,
+    setMessage,
+    messageColor,
+    setMessageColor,
+    nextStep,
+    cancelCreation,
+  };
+}

package/src/hooks/creation/useLogsViewer.js

@@ -0,0 +1,50 @@
+import { useState, useRef } from "react";
+
+/**
+ * Custom hook to manage the logs viewer state and stream reference.
+ * Handles showing/hiding logs and storing log lines.
+ *
+ * @returns {Object} Logs viewer state and helpers
+ * @property {boolean} showLogs - Whether the logs viewer is open
+ * @property {function} setShowLogs - Setter for showLogs
+ * @property {Array<string>} logs - Array of log lines
+ * @property {function} setLogs - Setter for logs
+ * @property {object} logsStreamRef - Ref to the logs stream (for cleanup)
+ * @property {function} openLogs - Helper to open logs for a container
+ * @property {function} closeLogs - Helper to close logs and cleanup
+ */
+export function useLogsViewer() {
+  const [showLogs, setShowLogs] = useState(false);
+  const [logs, setLogs] = useState([]);
+  const logsStreamRef = useRef(null);
+
+  /**
+   * Opens the logs viewer and resets logs.
+   */
+  function openLogs() {
+    setShowLogs(true);
+    setLogs([]);
+  }
+
+  /**
+   * Closes the logs viewer and cleans up the stream.
+   */
+  function closeLogs() {
+    setShowLogs(false);
+    setLogs([]);
+    if (logsStreamRef.current) {
+      logsStreamRef.current.destroy?.();
+      logsStreamRef.current = null;
+    }
+  }
+
+  return {
+    showLogs,
+    setShowLogs,
+    logs,
+    setLogs,
+    logsStreamRef,
+    openLogs,
+    closeLogs,
+  };
+}

package/src/hooks/useContainers.js

@@ -9,7 +9,7 @@
  * const [containers, refresh] = useContainers();
  */
 import React, { useState, useEffect } from "react";
-import { getContainers } from "../helpers/dockerService";
+import { getContainers } from "../helpers/dockerService/serviceComponents/containerList";
 
 export function useContainers() {
   const [containers, setContainers] = useState([]);