cdd-cli 3.2.2 → 4.1.0

package/src/hooks/creation/useContainerCreation.js

@@ -1,240 +0,0 @@
-import { useState } from 'react';
-import {
-  validatePorts,
-  validateEnvVars,
-} from '../../helpers/validationHelpers.js';
-import { IMAGE_PROFILES } from '../../helpers/constants.js';
-import { safeCall } from '../../helpers/safeCall.js';
-
-const MAX_VISIBLE = 6;
-
-/**
- * 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 (legacy)
- * @param {Object} [params.imageProfiles] - Image profiles map for contextual validation
- * @returns {Object} Creation state, setters, and helpers
- */
-export function useContainerCreation({
-  onCreate,
-  onCancel,
-  dbImages = [],
-  imageProfiles = IMAGE_PROFILES,
-}) {
-  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');
-
-  // Autocomplete state
-  const [suggestions, setSuggestions] = useState([]);
-  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
-  const [visibleOffset, setVisibleOffset] = useState(0);
-
-  /**
-   * Updates the image name input and recalculates autocomplete suggestions.
-   * Resets selectedSuggestionIndex to -1 on every keystroke.
-   *
-   * @param {string} value - New raw image name typed by user
-   */
-  function updateImageInput(value) {
-    setImageName(value);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
-    if (!value.trim()) {
-      setSuggestions([]);
-      return;
-    }
-    const lower = value.toLowerCase();
-    const matches = Object.keys(imageProfiles).filter((key) =>
-      key.includes(lower)
-    );
-    setSuggestions(matches);
-  }
-
-  /**
-   * Moves the suggestion selection up (-1) or down (+1).
-   * Clamps index to [-1, suggestions.length - 1].
-   * Adjusts visibleOffset to keep selected item in the visible window.
-   *
-   * @param {number} direction - -1 (up) or 1 (down)
-   */
-  function moveSuggestionSelection(direction) {
-    setSelectedSuggestionIndex((prev) => {
-      const next = Math.max(-1, Math.min(suggestions.length - 1, prev + direction));
-      // Adjust visibleOffset to keep selected in view
-      setVisibleOffset((offset) => {
-        if (next < offset) return Math.max(0, next);
-        if (next >= offset + MAX_VISIBLE) return next - MAX_VISIBLE + 1;
-        return offset;
-      });
-      return next;
-    });
-  }
-
-  /**
-   * Applies the currently focused suggestion to imageName.
-   * Does NOT advance the step. Clears suggestions after applying.
-   */
-  function applyFocusedSuggestion() {
-    if (selectedSuggestionIndex < 0 || selectedSuggestionIndex >= suggestions.length) return;
-    const chosen = suggestions[selectedSuggestionIndex];
-    setImageName(chosen);
-    setSuggestions([]);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
-  }
-
-  /**
-   * 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) {
-      // Ports are now optional - only validate if provided
-      if (portInput.trim() && !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)
-      );
-      // Check if the image has a profile with required env vars
-      const baseName = imageName
-        .trim()
-        .toLowerCase()
-        .split(':')[0]
-        .split('/')
-        .pop();
-      const profile = imageProfiles[baseName];
-      if (profile && profile.requiredEnv && profile.requiredEnv.length) {
-        const suggestedPart =
-          profile.suggestedEnv && profile.suggestedEnv.length
-            ? ` | Suggested: ${profile.suggestedEnv.join(', ')}`
-            : '';
-        setMessage(
-          `Required env vars for ${baseName}: ${profile.requiredEnv.join(', ')}. Enter as VAR=val,VAR2=val2${suggestedPart}`
-        );
-        setMessageColor('yellow');
-      } else if (profile && profile.suggestedEnv && profile.suggestedEnv.length) {
-        setMessage(
-          `Suggested env vars for ${baseName}: ${profile.suggestedEnv.join(', ')}. Enter as VAR=val,VAR2=val2 or leave empty.`
-        );
-        setMessageColor('yellow');
-      } else 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) {
-      // Contextual env validation using image profiles
-      const result = validateEnvVars(envInput, imageName, imageProfiles);
-      if (!result.valid) {
-        setMessage(result.errors.join(' | '));
-        setMessageColor('red');
-        return;
-      }
-      // Final step: call onCreate with all data (safely)
-      safeCall(onCreate, { imageName, containerName, portInput, envInput });
-    }
-  }
-
-  /**
-   * Cancels the creation process and resets state.
-   */
-  function cancelCreation() {
-    setStep(0);
-    setImageName('');
-    setContainerName('');
-    setPortInput('');
-    setEnvInput('');
-    setMessage('');
-    setMessageColor('yellow');
-    setSuggestions([]);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
-    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');
-    setSuggestions([]);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
-  }
-
-  return {
-    step,
-    setStep,
-    imageName,
-    setImageName,
-    containerName,
-    setContainerName,
-    portInput,
-    setPortInput,
-    envInput,
-    setEnvInput,
-    message,
-    setMessage,
-    messageColor,
-    setMessageColor,
-    suggestions,
-    selectedSuggestionIndex,
-    visibleOffset,
-    updateImageInput,
-    moveSuggestionSelection,
-    applyFocusedSuggestion,
-    nextStep,
-    cancelCreation,
-    resetCreation,
-  };
-}

package/src/hooks/creation/useLogsViewer.js

@@ -1,51 +0,0 @@
-import { useState, useRef } from 'react';
-import { safeCall } from '../../helpers/safeCall.js';
-
-/**
- * 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) {
-      safeCall(logsStreamRef.current.destroy?.bind(logsStreamRef.current));
-      logsStreamRef.current = null;
-    }
-  }
-
-  return {
-    showLogs,
-    setShowLogs,
-    logs,
-    setLogs,
-    logsStreamRef,
-    openLogs,
-    closeLogs,
-  };
-}

package/src/hooks/debug/useDebugLogs.js

@@ -1,34 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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 };
-}

package/src/hooks/useContainers.js

@@ -1,26 +0,0 @@
-/**
- * React hook to manage Docker containers state.
- *
- * @returns {{containers: Array<Object>}} An object containing the current
- * containers array. The hook starts a periodic refresh and fetches the
- * container list immediately on mount.
- * @example
- * // Use in a component
- * const { containers } = useContainers();
- */
-import React, { useState, useEffect } from 'react';
-import { getContainers } from '../helpers/dockerService/serviceComponents/containerList';
-import { REFRESH_INTERVALS } from '../helpers/constants.js';
-
-export function useContainers() {
-  const [containers, setContainers] = useState([]);
-
-  useEffect(() => {
-    const fetch = async () => setContainers(await getContainers());
-    fetch();
-    const timer = setInterval(fetch, REFRESH_INTERVALS.CONTAINER_LIST);
-    return () => clearInterval(timer);
-  }, []);
-
-  return { containers };
-}