Como desarrollar una Extensión para Docker, basada en el proyecto https://github.com/AlfrescoLabs/alfresco-docker-extension

1. docker community
ALL HANDS #6
Desarrollando una
Extensión para Docker
Angel Borroy
Developer Evangelist, Hyland
@AngelBorroy
1 de Septiembre de 2022

2. SDK para
Extensiones Docker
● Introducción a Extensiones
● Primeros pasos
● Herramientas de Desarrollo
● API JavaScript
● Diseño de la Interfaz de Usuario

3. Las extensiones se ejecutan como
Contenedores Linux en Docker*
* Las Extensiones no están disponibles cuando se usan Contenedores Windows

4. SDK para Extensiones de Docker
https://docs.docker.com/desktop/extensions/
https://github.com/docker/extensions-sdk
Documentación oficial (en inglés)
Desarrollo de extensiones
Publicación de extensiones en el Marketplace
Guías para el diseño del interfaz de usuario
Referencia de la API
Código fuente del CLI y ejemplos de creación de extensiones
Extensión frontend
Extensión backend
Extensión Docker CLI
Extensión utilizando React-JS para el frontend

5. $ docker extension init my-extension
Dockerfile
docker-compose.yaml
metadata.json
Makefile
docker.svg
vm/
ui/
Primeros pasos
Requisitos
Docker Desktop
Node.js
Go
Make
IDE
Visual Studio Code
Imagen Docker
Datos de la Extensión
Herramientas
Icono de la Extensión
Backend
Frontend

6. $ docker extension
init Crea una nueva Extensión a partir de una plantilla
install Instala la Extensión en Docker Desktop a partir de una Imagen
ls Lista las Extensiones Docker instaladas en Docker Desktop
rm Elimina una Extensión de Docker Desktop
update Elimina y re-instala una Extensión de Docker Desktop
validate Valida una Extensión a partir de una Imagen o sus metadatos
version Muestra la versión de cliente y servidor
Herramientas de desarrollo

7. $ docker extension dev
debug Habilita el modo depuración para el UI de una Extensión
ui-source Establece un origen para el UI de una Extensión
reset Restablece el origen y deshabilita el modo depuración para el UI
Herramientas de desarrollo
$ make <target>
build-extension: docker build --tag=$(IMAGE):$(TAG) .
install-extension: build-extension
docker extension install $(IMAGE):$(TAG)
update-extension: build-extension
docker extension update $(IMAGE):$(TAG)

8. API para Interfaz de Usuario (UI)
API JavaScript con soporte para TypeScript
import { createDockerDesktopClient } from '@docker/extension-api-client';
export function App() {
const ddClient = createDockerDesktopClient();
}
Backend Peticiones HTTP, ejecución de comandos (sistema operativo)
Docker Ejecución de comandos Docker
Dashboard Muestra notificaciones de usuario en Docker Desktop
Navigation Navega a otro apartado de Docker Desktop
https://docs.docker.com/desktop/extensions-sdk/dev/api/overview/

9. Diseño de la Interfaz de Usuario (UI)
Puede utilizarse cualquier tecnología de desarrollo para la Interfaz de Usuario
(incluso simple HTML)
Sin embargo, dado que la Interfaz de Usuario de Docker Desktop está escrito en
React y Material UI es muy recomendable utilizar esta combinación
Además de la tecnología, Docker propone esta simple lista de comprobaciones para
el diseño de la Interfaz de Usuario:
• ¿Es fácil lanzar la Extensión?
• ¿Es fácil utilizar la Extensión?
• ¿Es fácil acceder a la ayuda cuando es necesario?
https://docs.docker.com/desktop/extensions-sdk/design/design-guidelines/

10. ● Objetivo
● Componentes de la Extensión
● Estructura de la Extensión
● Despliegue y Ejecución
Alfresco
Docker Extension
https://github.com/AlfrescoLabs/alfresco-docker-extension

11. Objetivo
Desplegar todos los contenedores requeridos para Alfresco a través de un botón en el UI
Elimina la dependencia de un fichero externo, como docker-compose.yml
Proporciona seguimiento de la ejecución de los contenedores
Facilita la gestión de recursos
Minimiza las barreras para utilizar Alfresco
Run

12. aaa
Componentes de la Extensión
API
Backend Peticiones HTTP, ejecución…
Docker Ejecución de comandos Docker
Dashboard Muestra notificaciones…
Navigation Navega a otro apartado de Docker Desktop
Dockerfile
docker-compose.yaml
metadata.json
Makefile
alfresco.svg
vm/
ui/

13. Estructura de la Extensión
Docker
Navigation

14. Despliegue y Ejecución
$ make install-extension

15. ● Respuestas de ddClient
● Utiliza el log de la Consola
JavaScript
● Probar con diferentes Sistemas
Operativos
● Probar con diferentes Temas
(oscuro / claro)
Algunos Consejos

16. Respuesta de ddClient (JSON)
const result = await ddClient.docker.cli.exec('info', [
'--format',
'"{{json .}}"'
])
return result.parseJsonObject()?.MemTotal
La respuesta es asíncrona, utiliza await para esperar al resultado
Utiliza el formato JSON en las invocaciones al cliente Docker
Parsea el resultado para obtener el valor de las propiedades
{
"Containers": 6,
"ContainersRunning": 0,
"ContainersPaused": 0,
"ContainersStopped": 6,
"Images": 9,
"Driver": "overlay2",
"DriverStatus": [...],
"Plugins": {...},
"NCPU": 6,
"MemTotal": 20992327680,
...
}

17. Respuesta de ddClient (Lista de Ids)
const result = await ddClient.docker.cli.exec('ps’, ['-q'])
var containers = result.stdout.split(/r?n|r|n/g)
En ocasiones también puedes obtener una lista simple con -q
Divide el resultado por salto de línea para obtener cada elemento
57f249e609d6
bd448227ea37
9efdaf7e7eeb
a847d20cd8af
82363cdde627

18. Respuesta de ddClient (Lista de JSON)
const result = await ddClient.docker.cli.exec('ps’,
'--format',
'"{{json .}}"'
])
var containers = result.stdout.split(/r?n|r|n/g)
for(let i = 0; i < containers.length; i++) {
let json = JSON.parse(containers[i])
}
Algunos comandos devuelven una lista de líneas JSON
No puede parsearse toda la respuesta como un documento JSON,
pero puede divirse el resultado por salto de línea para obtener cada
elemento JSON
{"Command":""catalina.sh ...}
{"Command":""/bin/sh -c ...}
{"Command":""/bin/sh -c ...}
{"Command":""/bin/sh -c ...}

19. Log de la consola JavaScript
try {
ddClient.docker...
} catch (err) {
console.log("error : ", err)
}
Utiliza los comandos a Docker en bloques try-catch
Puedes volcar los detalles del error en la consola JavaScript
Recuerda arrancar la Extensión Docker en modo desarrollo
docker extension dev debug angelborroy/alfresco-extension

20. Probar con diferentes Sistemas Operativos
export const stopContainers = async () => {
await ddClient.docker.cli.exec('stop', [
'$(docker ps -qf "network=alfresco")'
])
}
Funciona en Mac OS con chip Intel
Falla en Windows 10
>> Todavía está en fase BETA
¡Puedes reportar los errores que identifiques en GitHub!

21. Probar con diferentes Temas
Es recomendable utilizar la guía de diseño de Docker, que tiene en cuenta todos los
elementos del Interfaz Gráfico para el tema Oscuro y para el tema Claro
https://docs.docker.com/desktop/extensions-sdk/design/design-guidelines/
No obstante, recuerda revisar el resultado cuando añadas recursos como imágenes

22. ¡Gracias!
@AngelBorroy
angel.fernandoborroy@hyland.com
https://collabnix.github.io/docker-community-extensions/
mantenida por Ajeet Singh Raina