cdd-cli 3.1.6 → 3.1.9

package/src/components/ContainerRow.jsx

@@ -1,9 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Box, Text } from "ink";
-import { getStats } from "../helpers/dockerService/serviceComponents/containerStats";
-import { REFRESH_INTERVALS } from "../helpers/constants.js";
 import StatsBar from "./StatsBar.jsx";
 import PropTypes from 'prop-types';
+import { useContainerStats } from '../hooks/useContainerStats.js';
 
 const stateText = (state) => {
   if (state === "running") return { text: "🟢 RUNNING", color: "green" };
@@ -21,11 +20,7 @@ const stateText = (state) => {
  */
 export default function ContainerRow({ container, isSelected = false }) {
   const { id, name, image, state } = container;
-  const [stats, setStats] = useState({
-    cpuPercent: 0,
-    memPercent: 0,
-    netIO: { rx: 0, tx: 0 },
-  });
+  const { stats, statsError } = useContainerStats(id, state);
 
   // Format ports for display (no leading space to avoid layout shifts)
   const formatPorts = (ports) => {
@@ -42,36 +37,6 @@ export default function ContainerRow({ container, isSelected = false }) {
     return s.length > max ? s.slice(0, max - 1) + "…" : s;
   };
 
-  const [statsError, setStatsError] = useState("");
-  useEffect(() => {
-    if (state !== "running") return;
-    
-    let isMounted = true;
-    
-    const fetchStats = async () => {
-      try {
-        const s = await getStats(id);
-        if (isMounted) {
-          setStats(s);
-          setStatsError("");
-        }
-      } catch (err) {
-        if (isMounted) {
-          setStats({ cpuPercent: 0, memPercent: 0, netIO: { rx: 0, tx: 0 } });
-          setStatsError("Error fetching stats");
-        }
-      }
-    };
-    
-    fetchStats();
-  const timer = setInterval(fetchStats, REFRESH_INTERVALS.CONTAINER_STATS);
-    
-    return () => {
-      isMounted = false;
-      clearInterval(timer);
-    };
-  }, [id, state]);
-
   const stateInfo = stateText(state);
   return (
     <Box flexDirection="column" marginBottom={1}>

package/src/components/LogViewer.jsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Text, useInput } from "ink";
-import { safeCall } from "../helpers/safeCall";
+import { Text } from "ink";
 import PropTypes from 'prop-types';
 
 /**
- * Log viewer overlay component. Shows the most recent lines and closes on ESC.
+ * Log viewer overlay component. Shows the most recent lines.
+ * Purely presentational — keyboard handling is centralized in useControls.
  *
  * @param {Object} props
  * @param {Array<string>} props.logs - Array of log lines
@@ -12,13 +12,7 @@ import PropTypes from 'prop-types';
  * @param {Object} [props.container] - Optional container metadata (used for title)
  * @returns {JSX.Element}
  */
-export default function LogViewer({ logs, onExit, container }) {
-  useInput((input, key) => {
-    if (key.escape) {
-      safeCall(onExit);
-    }
-  });
-
+export default function LogViewer({ logs, onExit: _onExit, container }) {
   const visibleLogs = logs.slice(-15);
 
   return (

package/src/helpers/containerOptionsBuilder.js

@@ -0,0 +1,42 @@
+/**
+ * Builds Docker container creation options from raw user inputs.
+ *
+ * This is a pure function — it has no side effects and calls no services.
+ * It mirrors exactly the option-building logic in useControls.js onCreate callback.
+ *
+ * @param {object} params
+ * @param {string} params.imageName          - Docker image name (e.g. "nginx:alpine")
+ * @param {string} [params.containerName]    - Optional container name
+ * @param {string} [params.portInput]        - Comma-separated host:container port pairs
+ *                                            (e.g. "8080:80,3000:3000")
+ * @param {string} [params.envInput]         - Comma-separated KEY=VALUE pairs
+ *                                            (e.g. "NODE_ENV=production,PORT=3000")
+ * @returns {object} Docker container options ready to pass to createContainer
+ */
+export function buildContainerOptions({ imageName: _imageName, containerName, portInput, envInput }) {
+  const env = (envInput || "").split(",").map(s => s.trim()).filter(Boolean);
+  const ports = (portInput || "").split(",").map(s => s.trim()).filter(Boolean);
+
+  const ExposedPorts = {};
+  const PortBindings = {};
+
+  ports.forEach(pair => {
+    const [host, cont] = pair.split(":");
+    if (!host || !cont) return;
+    const key = `${cont}/tcp`;
+    ExposedPorts[key] = {};
+    PortBindings[key] = PortBindings[key] || [];
+    PortBindings[key].push({ HostPort: `${host}` });
+  });
+
+  const options = {
+    Tty: true,
+  };
+
+  if (Object.keys(ExposedPorts).length) options.ExposedPorts = ExposedPorts;
+  if (Object.keys(PortBindings).length) options.HostConfig = { PortBindings };
+  if (env.length) options.Env = env;
+  if (containerName) options.name = containerName;
+
+  return options;
+}

package/src/hooks/creation/useContainerCreation.js

@@ -80,6 +80,20 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
     safeCall(onCancel);
   }
 
+  /**
+   * Resets all creation state to initial values without triggering onCancel.
+   * Used by the command router when the user presses 'c' to open the creation wizard.
+   */
+  function resetCreation() {
+    setStep(0);
+    setImageName("");
+    setContainerName("");
+    setPortInput("");
+    setEnvInput("");
+    setMessage("Insert the name of the image to create: ");
+    setMessageColor("yellow");
+  }
+
   return {
     step,
     setStep,
@@ -97,5 +111,6 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
     setMessageColor,
     nextStep,
     cancelCreation,
+    resetCreation,
   };
 }

package/src/hooks/debug/useDebugLogs.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { logger } from '../../helpers/logger.js';
+
+export function useDebugLogs() {
+  const [showDebugLogs, setShowDebugLogs] = useState(false);
+  const [debugLogs, setDebugLogs] = useState([]);
+
+  useEffect(() => {
+    const unsubscribe = logger.subscribe((entry) => {
+      setDebugLogs((prev) => {
+        const extras = (entry.args || []).map((arg) => {
+          if (typeof arg === "string") return arg;
+          if (typeof arg === "number" || typeof arg === "boolean") return String(arg);
+          try {
+            return JSON.stringify(arg);
+          } catch (err) {
+            return "[unserializable]";
+          }
+        }).filter(Boolean);
+        const line = extras.length ? `${entry.formatted} ${extras.join(" ")}` : entry.formatted;
+        const next = [...prev, line];
+        return next.slice(-200);
+      });
+    });
+    return unsubscribe;
+  }, []);
+
+  return { showDebugLogs, setShowDebugLogs, debugLogs };
+}

package/src/hooks/navigation/useContainerSelection.js

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react';
+
+export function useContainerSelection(total) {
+  const [selected, setSelected] = useState(0);
+
+  const handleNavigation = useCallback((input, key) => {
+    if (total === 0) {
+      return false;
+    }
+
+    if (key.upArrow) {
+      setSelected((i) => (i === 0 ? total - 1 : i - 1));
+      return true;
+    }
+
+    if (key.downArrow) {
+      setSelected((i) => (i === total - 1 ? 0 : i + 1));
+      return true;
+    }
+
+    return false;
+  }, [total]);
+
+  return { selected, setSelected, handleNavigation };
+}

package/src/hooks/useContainerCommandRouter.js

@@ -0,0 +1,110 @@
+import { useCallback } from "react";
+
+/**
+ * Hook responsible solely for routing Docker action keystrokes to the correct handler.
+ * Has no domain state of its own — it delegates every side-effect to its dependencies.
+ *
+ * Handled keys:
+ *   i  — start container
+ *   p  — stop container
+ *   r  — restart container
+ *   e  — request erase confirmation
+ *   l  — open logs viewer and start log stream
+ *   c  — open container creation wizard (reset + activate)
+ *   d  — toggle debug log panel
+ *
+ * @param {Object} params
+ * @param {Object} params.actions       - API from useContainerActions
+ * @param {Array<Object>} params.containers - Current list of Docker containers
+ * @param {number} params.selected      - Index of the currently selected container
+ * @param {Object} params.creation      - API from useContainerCreation (must expose resetCreation)
+ * @param {Object} params.logsViewer    - API from useLogsViewer
+ * @param {Function} params.startLogsStream - Starts the log stream for a container id
+ * @param {Function} params.onStartErase    - Callback: activates confirmErase state
+ * @param {Function} params.onToggleDebug   - Callback: toggles showDebugLogs state
+ * @param {Function} params.onStartCreate   - Callback: sets creatingContainer = true
+ * @returns {{ handleDockerCommands: Function }}
+ */
+export function useContainerCommandRouter({
+  actions,
+  containers,
+  selected,
+  creation,
+  logsViewer,
+  startLogsStream,
+  onStartErase,
+  onToggleDebug,
+  onStartCreate,
+}) {
+  const handleDockerCommands = useCallback((input) => {
+    const container = containers[selected];
+
+    if (input === "i") {
+      actions.handleAction({
+        actionFn: async (id) => await actions.startContainer(id),
+        actionLabel: "Starting",
+        selected,
+        stateCheck: (c) =>
+          (c.state === "running" || c.status === "running") &&
+          "Container is already running.",
+      });
+      return true;
+    }
+
+    if (input === "p") {
+      actions.handleAction({
+        actionFn: async (id) => await actions.stopContainer(id),
+        actionLabel: "Stopping",
+        selected,
+        stateCheck: (c) =>
+          (c.state === "exited" ||
+            c.status === "exited" ||
+            c.state === "stopped" ||
+            c.status === "stopped") &&
+          "Container is already stopped.",
+      });
+      return true;
+    }
+
+    if (input === "r") {
+      actions.handleAction({
+        actionFn: async (id) => await actions.restartContainer(id),
+        actionLabel: "Restarting",
+        selected,
+      });
+      return true;
+    }
+
+    if (input === "e") {
+      if (!container) {
+        return true;
+      }
+      onStartErase();
+      return true;
+    }
+
+    if (input === "l") {
+      if (!container) {
+        return true;
+      }
+      logsViewer.openLogs();
+      startLogsStream(container.id);
+      return true;
+    }
+
+    if (input === "c") {
+      onStartCreate();
+      creation.resetCreation();
+      return true;
+    }
+
+    if (input === "d") {
+      onToggleDebug();
+      return true;
+    }
+
+    return false;
+  }, [actions, containers, creation, logsViewer, onStartCreate, onStartErase, onToggleDebug, selected, startLogsStream]);
+
+  return { handleDockerCommands };
+}

package/src/hooks/useContainerStats.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { getStats } from '../helpers/dockerService/serviceComponents/containerStats.js';
+import { REFRESH_INTERVALS } from '../helpers/constants.js';
+
+const DEFAULT_STATS = { cpuPercent: 0, memPercent: 0, netIO: { rx: 0, tx: 0 } };
+
+export function useContainerStats(id, state) {
+  const [stats, setStats] = useState(DEFAULT_STATS);
+  const [statsError, setStatsError] = useState('');
+
+  useEffect(() => {
+    if (state !== 'running') {
+      setStats(DEFAULT_STATS);
+      setStatsError('');
+      return;
+    }
+
+    let isMounted = true;
+
+    const fetchStats = async () => {
+      try {
+        const s = await getStats(id);
+        if (isMounted) {
+          setStats(s);
+          setStatsError('');
+        }
+      } catch (err) {
+        if (isMounted) {
+          setStats(DEFAULT_STATS);
+          setStatsError('Error fetching stats');
+        }
+      }
+    };
+
+    fetchStats();
+    const timer = setInterval(fetchStats, REFRESH_INTERVALS.CONTAINER_STATS);
+    return () => {
+      isMounted = false;
+      clearInterval(timer);
+    };
+  }, [id, state]);
+
+  return { stats, statsError };
+}