cdd-cli 3.0.0 → 3.1.0

package/src/hooks/useControls.js

@@ -1,49 +1,143 @@
-
-import React, { useState, useRef } from "react";
+import React from "react";
+import { useContainerActions } from "./creation/useContainerActions";
+import { useContainerCreation } from "./creation/useContainerCreation";
+import { useLogsViewer } from "./creation/useLogsViewer";
 import { useInput } from "ink";
-import { startContainer, stopContainer, restartContainer, getLogsStream } from "../helpers/dockerService";
-import { handleAction } from "../helpers/actionHelpers";
-import { exitWithMessage } from "../helpers/exitWithMessage";
-
+import { getLogsStream } from "../helpers/dockerService/serviceComponents/containerLogs.js";
+import { createContainer as svcCreateContainer } from "../helpers/dockerService/serviceComponents/containerActions.js";
 
+// Principal hook to manage user inputs and control the app state
 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 [selected, setSelected] = React.useState(0);
+  const [creatingContainer, setCreatingContainer] = React.useState(false);
+  const [confirmErase, setConfirmErase] = React.useState(false);
   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;
-    }
-  };
+  // Modular hooks
+  const actions = useContainerActions({ containers });
+  const creation = useContainerCreation({
+    onCreate: async ({ imageName, containerName, portInput, envInput }) => {
+      // Build Docker options
+      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;
+
+  actions.setMessage(`Creating container ${imageName}...`);
+  actions.setMessageColor("yellow");
+      try {
+        const id = await svcCreateContainer(imageName, options);
+        actions.setMessage(`Created container ${id}`);
+        actions.setMessageColor("green");
+      } catch (err) {
+        actions.setMessage(`Error creating container: ${err.message}`);
+        actions.setMessageColor("red");
+      } finally {
+        setCreatingContainer(false);
+      }
+    },
+    onCancel: () => setCreatingContainer(false),
+    dbImages: ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"]
+  });
+  const logsViewer = useLogsViewer();
+
+  // Handler to exit logs (delegated to logsViewer)
+  const exitLogs = logsViewer.closeLogs;
 
   useInput((input, key) => {
-    if (showLogs) {
+    // Confirmación de borrado
+    if (confirmErase) {
+      if (input === "y" || input === "Y") {
+        actions.handleAction({
+          actionFn: async (id) => await actions.removeContainer(id),
+          actionLabel: "Erasing",
+          selected,
+        });
+        setConfirmErase(false);
+        actions.setMessageColor("yellow");
+        return;
+      } else if (input === "n" || input === "N" || key.escape) {
+        setConfirmErase(false);
+        actions.setMessage("");
+        actions.setMessageColor("");
+        return;
+      } else {
+        actions.setMessage("Are you sure you want to erase this container? (y/n)");
+        actions.setMessageColor("yellow");
+        return;
+      }
+    }
+
+    // Logs viewer
+    if (logsViewer.showLogs) {
       if (input === "q" || key.escape) {
-        exitLogs();
+        logsViewer.closeLogs();
       }
       return;
     }
 
+    // Container creation flow: delegate input to creation hook
+    if (creatingContainer) {
+      const step = creation.step;
+      const appendCharToField = (setter, value, ch) => {
+        setter((value || "") + ch);
+      };
+      // Escape -> cancel
+      if (key.escape) {
+        creation.cancelCreation();
+        setCreatingContainer(false);
+        return;
+      }
+      // Enter -> next step
+      if (input === "\r" || input === "\n") {
+        creation.nextStep();
+        return;
+      }
+      // Backspace/Delete support
+      if (key.backspace || key.delete) {
+        if (step === 0) creation.setImageName((v) => (v || "").slice(0, -1));
+        if (step === 1) creation.setContainerName((v) => (v || "").slice(0, -1));
+        if (step === 2) creation.setPortInput((v) => (v || "").slice(0, -1));
+        if (step === 3) creation.setEnvInput((v) => (v || "").slice(0, -1));
+        return;
+      }
+      // Printable character input (append)
+      if (input && input.length === 1 && !key.ctrl && !key.meta) {
+        if (step === 0) appendCharToField(creation.setImageName, creation.imageName, input);
+        if (step === 1) appendCharToField(creation.setContainerName, creation.containerName, input);
+        if (step === 2) appendCharToField(creation.setPortInput, creation.portInput, input);
+        if (step === 3) appendCharToField(creation.setEnvInput, creation.envInput, input);
+        return;
+      }
+      // Otherwise ignore
+      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 (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 });
+      actions.setMessage("Exiting...");
+      actions.setMessageColor("yellow");
+      setTimeout(() => process.exit(0), 500);
       return;
     }
 
@@ -51,48 +145,75 @@ export function useControls(containers = []) {
     // Docker commands
     //==========================================================
     if (input === "i") {
-      handleAction({
-        containers,
-        selected,
-        actionFn: startContainer,
+      actions.handleAction({
+        actionFn: async (id) => await actions.startContainer(id),
         actionLabel: "Starting",
-        setMessage,
-        setMessageColor,
-        stateCheck: c => (c.state === "running" || c.status === "running") && "Container is already running."
+        selected,
+        stateCheck: (c) => (c.state === "running" || c.status === "running") && "Container is already running."
       });
     }
     if (input === "p") {
-      handleAction({
-        containers,
-        selected,
-        actionFn: stopContainer,
+      actions.handleAction({
+        actionFn: async (id) => await actions.stopContainer(id),
         actionLabel: "Stopping",
-        setMessage,
-        setMessageColor,
-        stateCheck: c => ((c.state === "exited" || c.status === "exited" || c.state === "stopped" || c.status === "stopped") && "Container is already stopped.")
+        selected,
+        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,
+      actions.handleAction({
+        actionFn: async (id) => await actions.restartContainer(id),
         actionLabel: "Restarting",
-        setMessage,
-        setMessageColor
+        selected,
       });
     }
+    if (input === "e" && containers[selected]) {
+      setConfirmErase(true);
+      actions.setMessage("Are you sure you want to erase this container? (y/n)");
+      actions.setMessageColor("yellow");
+      return;
+    }
     if (input === "l" && containers[selected]) {
-      setShowLogs(true);
-      setLogs([]);
+      logsViewer.openLogs();
       getLogsStream(
         containers[selected].id,
-        (data) => setLogs((prev) => ([...prev, ...data.split("\n").filter(Boolean)])),
+        (data) => logsViewer.setLogs((prev) => [...prev, ...data.split("\n").filter(Boolean)]),
         () => {},
-        (err) => setLogs((prev) => ([...prev, `Error: ${err.message}`]))
+        (err) => logsViewer.setLogs((prev) => [...prev, `Error: ${err.message}`])
       );
+      return;
+    }
+    if (input === "c") {
+      setCreatingContainer(true);
+      creation.setStep(0);
+      creation.setImageName("");
+      creation.setContainerName("");
+      creation.setPortInput("");
+      creation.setEnvInput("");
+      creation.setMessage("Insert the name of the image to create: ");
+      creation.setMessageColor("yellow");
     }
   });
 
-  return { selected, setSelected, message, messageColor, showLogs, logs, exitLogs };
+  return {
+    selected,
+    setSelected,
+    // Map messaging to creation when creating, otherwise to actions
+    message: creatingContainer ? creation.message : actions.message,
+    messageColor: creatingContainer ? creation.messageColor : actions.messageColor,
+    showLogs: logsViewer.showLogs,
+    logs: logsViewer.logs,
+    exitLogs,
+    creatingContainer,
+    // Expose creation fields in the shape App expects
+    creationStep: creation.step,
+    imageNameInput: creation.imageName,
+    containerNameInput: creation.containerName,
+    portInput: creation.portInput,
+    envInput: creation.envInput,
+    creation,
+    actions,
+    logsViewer,
+    confirmErase,
+  };
 }

package/src/hooks/useLogsStream.js

@@ -1,5 +1,5 @@
 import React, { useRef, useCallback } from "react";
-import { getLogsStream } from "../helpers/dockerService";
+import { getLogsStream } from "../helpers/dockerService/serviceComponents/containerLogs";
 
 export function useLogsStream() {
   const logsStreamRef = useRef(null);

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/test/validationHelpers.test.js

@@ -0,0 +1,28 @@
+let validatePorts;
+
+beforeAll(async () => {
+  const mod = await import('../src/helpers/validationHelpers.js');
+  validatePorts = mod.validatePorts;
+});
+
+describe('validatePorts', () => {
+  test('valid single port mapping', () => {
+    expect(validatePorts('8080:80')).toBe(true);
+  });
+
+  test('valid multiple port mappings', () => {
+    expect(validatePorts('8080:80,443:443')).toBe(true);
+  });
+
+  test('invalid mapping missing host', () => {
+    expect(validatePorts(':80')).toBe(false);
+  });
+
+  test('invalid mapping non-numeric', () => {
+    expect(validatePorts('eighty:80')).toBe(false);
+  });
+
+  test('empty input returns false (must specify at least one port)', () => {
+    expect(validatePorts('')).toBe(false);
+  });
+});

package/PLAN_KEYBINDINGS_Y_REALTIME.md

@@ -1,260 +0,0 @@
-# Plan de Implementación: Keybindings y Funcionalidades Avanzadas para CDD
-
-Este documento te guiará paso a paso para agregar keybindings y la integración de logs y estadísticas en tiempo real a tu proyecto CLI/CDD. Además, incluye recomendaciones de investigación para que puedas aprender y experimentar por ti mismo.
-
----
-
-## 1. Keybindings (Atajos de Teclado)
-
-### Objetivo
-Permitir la navegación y control de contenedores Docker usando el teclado.
-
-### Acciones y Sugerencias
-- **↑ / ↓**: Navegar entre contenedores
-- **Enter**: Seleccionar contenedor
-- **L**: Mostrar logs en vivo
-- **S**: Mostrar estadísticas
-- **R**: Reiniciar contenedor
-- **I**: Iniciar contenedor
-- **P**: Pausar/Detener contenedor
-- **Q**: Salir
-
-### ¿Cómo hacerlo?
-
-### Usando Ink para Keybindings y UI CLI React
-
-Si ya tienes Ink instalado, es la mejor opción para construir tu CLI interactiva con React. Ink te permite crear componentes reutilizables, manejar el estado y capturar eventos de teclado de forma reactiva, todo en la terminal.
-
-#### Funciones y hooks clave de Ink:
-
-- **`<Text>` y `<Box>`**: Componentes básicos para mostrar texto y organizar la UI en la terminal.
-  - **Por qué:** Permiten estructurar y dar formato a la salida, igual que en React web.
-
-- **`useInput`**: Hook para capturar cualquier tecla presionada por el usuario.
-  - **Cómo:**
-    ```js
-    import { useInput } from 'ink';
-    useInput((input, key) => {
-      if (key.upArrow) { /* lógica para ↑ */ }
-      if (key.downArrow) { /* lógica para ↓ */ }
-      if (input === 'q') { /* salir */ }
-      // ...otros keybindings
-
-    ### ¿Cómo hacerlo?
-
-    #### Usando Ink para Keybindings y UI CLI React
-
-    Si ya tienes Ink instalado, es la mejor opción para construir tu CLI interactiva con React. Ink te permite crear componentes reutilizables, manejar el estado y capturar eventos de teclado de forma reactiva, todo en la terminal.
-
-    ##### Funciones y hooks clave de Ink:
-
-    - **`<Text>` y `<Box>`**: Componentes básicos para mostrar texto y organizar la UI en la terminal.
-      - **Por qué:** Permiten estructurar y dar formato a la salida, igual que en React web.
-
-    - **`useInput`**: Hook para capturar cualquier tecla presionada por el usuario.
-      - **Cómo:**
-        ```js
-        import { useInput } from 'ink';
-        useInput((input, key) => {
-          if (key.upArrow) { /* lógica para ↑ */ }
-          if (key.downArrow) { /* lógica para ↓ */ }
-          if (input === 'q') { /* salir */ }
-          // ...otros keybindings
-        });
-        ```
-      - **Por qué:** Es la forma más sencilla y reactiva de manejar atajos de teclado en la terminal con Ink.
-
-    - **Estado React**: Usa `useState` y `useEffect` igual que en React web para manejar selección, logs, stats, etc.
-      - **Por qué:** Permite que la UI se actualice automáticamente cuando cambian los datos o el estado.
-
-    ##### Ejemplo básico de navegación con Ink:
-
-    ```js
-    import React, { useState } from 'react';
-    import { render, Box, Text, useInput } from 'ink';
-
-    const containers = ['web', 'db', 'cache'];
-
-    const App = () => {
-      const [selected, setSelected] = useState(0);
-
-      useInput((input, key) => {
-        if (key.upArrow) setSelected(i => (i === 0 ? containers.length - 1 : i - 1));
-        if (key.downArrow) setSelected(i => (i === containers.length - 1 ? 0 : i + 1));
-        if (input === 'q') process.exit();
-        // ...otros keybindings
-      });
-
-      return (
-        <Box flexDirection="column">
-          {containers.map((name, i) => (
-            <Text key={name} color={i === selected ? 'green' : undefined}>
-              {i === selected ? '>' : ' '} {name}
-            </Text>
-          ))}
-          <Text>Usa ↑/↓ para navegar, Q para salir</Text>
-        </Box>
-      );
-    };
-
-    render(<App />);
-    ```
-
-    ##### ¿Por qué Ink?
-    - Permite una experiencia de desarrollo y mantenimiento muy similar a React web.
-    - Facilita la captura de teclas y el renderizado dinámico sin dependencias extra.
-    - Es ideal para CLIs interactivas, menús, dashboards y visualización en tiempo real.
-
-    Consulta la [documentación oficial de Ink](https://github.com/vadimdemedes/ink) para más ejemplos y detalles.
-#### Ejemplo básico de navegación con Ink:
-
-```js
-import React, { useState } from 'react';
-import { render, Box, Text, useInput } from 'ink';
-
-const containers = ['web', 'db', 'cache'];
-
-const App = () => {
-  const [selected, setSelected] = useState(0);
-
-  useInput((input, key) => {
-    if (key.upArrow) setSelected(i => (i === 0 ? containers.length - 1 : i - 1));
-    if (key.downArrow) setSelected(i => (i === containers.length - 1 ? 0 : i + 1));
-    if (input === 'q') process.exit();
-    // ...otros keybindings
-  });
-
-  return (
-    <Box flexDirection="column">
-      {containers.map((name, i) => (
-        <Text key={name} color={i === selected ? 'green' : undefined}>
-          {i === selected ? '>' : ' '} {name}
-        </Text>
-      ))}
-      <Text>Usa ↑/↓ para navegar, Q para salir</Text>
-    </Box>
-  );
-};
-
-render(<App />);
-```
-
-#### ¿Por qué Ink?
-- Permite una experiencia de desarrollo y mantenimiento muy similar a React web.
-- Facilita la captura de teclas y el renderizado dinámico sin dependencias extra.
-- Es ideal para CLIs interactivas, menús, dashboards y visualización en tiempo real.
-
-Consulta la [documentación oficial de Ink](https://github.com/vadimdemedes/ink) para más ejemplos y detalles.
-
----
-
-## 2. Integración de Logs y Stats en Tiempo Real
-
-### Logs en Vivo
-- Utiliza el comando `docker logs -f <container>` para obtener logs en streaming.
-- Investiga cómo manejar streams en Node.js con `child_process.spawn`.
-- Si quieres mostrar los logs en la UI, revisa cómo actualizar el estado en tiempo real.
-
-### Estadísticas en Tiempo Real
-- Usa el comando `docker stats <container> --no-stream` para obtener stats puntuales, o sin `--no-stream` para flujo continuo.
-- Investiga cómo parsear la salida de estos comandos y mostrarla en la UI.
-- Considera usar la librería [dockerode](https://github.com/apocas/dockerode) para interactuar con Docker desde Node.js de forma programática.
-
----
-
-## 3. Recomendaciones de Investigación
-
-- **Node.js y Streams**: Aprende sobre el módulo `stream` y cómo manejar datos en tiempo real.
-- **Captura de Teclas en Terminal**: Explora cómo funcionan los eventos de teclado en aplicaciones CLI.
-- **Dockerode**: Investiga esta librería para controlar Docker desde Node.js.
-- **React y Eventos Globales**: Si tu UI es React, revisa cómo manejar eventos globales de teclado.
-- **Websockets**: Si decides separar backend y frontend, aprende sobre websockets para comunicación en tiempo real.
-- **UX en CLI**: Investiga buenas prácticas para interfaces de usuario en la terminal (ejemplo: [blessed](https://github.com/chjj/blessed)).
-
-
-## 4. Siguiente Paso Sugerido
-
-
-## 5. Recursos Útiles
-
-
----
-
-## 6. Planificación Detallada Paso a Paso
-
-### Paso 1: Definir el tipo de interfaz
-- Si tu aplicación es CLI y ya tienes Ink, úsalo como framework principal para toda la UI y keybindings.
-- Ink te permite crear componentes, manejar el estado y capturar teclas de forma reactiva, todo en la terminal.
-- Si necesitas algo que Ink no cubre, evalúa otras librerías, pero prioriza Ink para evitar dependencias innecesarias.
-
-### Paso 2: Investigar y elegir librerías para keybindings
-- Para CLI con Ink, usa el hook `useInput` para capturar teclas y manejar la navegación y acciones.
-- Haz pruebas simples con `useInput` para capturar teclas y mostrar la tecla presionada o cambiar el estado.
-
-### Paso 3: Implementar navegación entre contenedores (↑/↓)
-- Usa `useState` para el índice seleccionado.
-- Renderiza la lista de contenedores con `<Text>` y `<Box>`, resaltando el seleccionado.
-- Usa `useInput` para capturar las flechas y actualizar el índice.
-- Haz que la navegación sea cíclica para mejor UX.
-
-### Paso 4: Implementar selección de contenedor (Enter)
-- Al presionar Enter, guarda el contenedor seleccionado en el estado.
-- Muestra un menú de acciones o detalles usando componentes condicionales de Ink.
-
-### Paso 5: Implementar acciones sobre el contenedor
-- L: Mostrar logs en vivo
-- S: Mostrar estadísticas en tiempo real
-- R: Reiniciar contenedor
-- I: Iniciar contenedor
-- P: Pausar/Detener contenedor
-- Q: Salir
-- Para cada acción:
-  - Usa `useInput` para detectar la tecla y cambiar el estado de la vista.
-  - Crea una función que ejecute el comando Docker correspondiente usando `child_process` o `dockerode`.
-  - Muestra el resultado en la UI usando componentes Ink.
-
-### Paso 6: Integrar logs en tiempo real
-- Usa `docker logs -f <container>` con `child_process.spawn` para obtener logs en streaming.
-- Lee los datos del stream y actualiza el estado con los logs recibidos.
-- Renderiza los logs en tiempo real usando `<Text>` y el estado de React.
-- Permite salir de la vista de logs con una tecla usando `useInput`.
-
-### Paso 7: Integrar estadísticas en tiempo real
-- Usa `docker stats <container>` o la API de `dockerode` para obtener stats.
-- Actualiza el estado periódicamente (con `setInterval` o un efecto) y renderiza los stats en la UI.
-- Permite salir de la vista de stats con una tecla usando `useInput`.
-
-### Paso 8: Mejorar la experiencia de usuario
-- Agrega mensajes de ayuda o leyenda de teclas usando `<Text>`.
-- Maneja errores de Docker y muestra mensajes claros en la UI.
-- Permite refrescar la lista de contenedores con una tecla usando `useInput`.
-
-### Paso 9: Refactorizar y documentar
-- Organiza el código en componentes Ink y hooks reutilizables.
-- Documenta cada función y componente.
-- Escribe un README con ejemplos de uso y keybindings.
-
-### Paso 10: Pruebas y mejoras
-- Prueba todos los keybindings y flujos en la terminal.
-- Pide feedback a otros usuarios.
-- Agrega nuevas funcionalidades según necesidades.
-
----
-
-## 7. Consejos para Aprender y Disfrutar el Proceso
-- Investiga cada librería antes de usarla.
-- Haz pruebas pequeñas y ve integrando poco a poco.
-- Lee la documentación oficial de Docker y Node.js.
-- No dudes en romper cosas: ¡así se aprende!
-- Si te atoras, busca ejemplos en GitHub o StackOverflow.
-
----
-- [Node.js Child Process](https://nodejs.org/api/child_process.html)
-- [Docker CLI Reference](https://docs.docker.com/engine/reference/commandline/cli/)
-- [Inquirer.js](https://www.npmjs.com/package/inquirer)
-- [dockerode](https://github.com/apocas/dockerode)
-- [blessed](https://github.com/chjj/blessed)
-
----
-
-¡Diviértete programando y aprendiendo! Si tienes dudas sobre algún punto, investiga primero y luego pregunta para profundizar.

package/src/helpers/dockerActions.js

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