Extensiones de interfaz de usuario de Datadog

Docs > Desarrolladores > Extensiones de interfaz de usuario de Datadog

¿Qué es una extensión de la interfaz de usuario?

Las extensiones de la interfaz de usuario permiten a los desarrolladores ampliar la funcionalidad nativa de Datadog a través de la personalización de widgets de dashboard. Por ejemplo, si hay una visualización de datos que deseas y que Datadog no admite, o un flujo de trabajo de corrección común que ejecutas en una plataforma de terceros, podrías escribir una Extensión de interfaz de usuario para ampliar esta funcionalidad dentro de Datadog.

Configuración

Establece tu entorno de desarrollo local

Crea una aplicación de Datadog para tu extensión de interfaz de usuario:
```
yarn create @datadog/app
```
Navega hasta la carpeta que has creado:
```
cd starter-kit
```
Configura tu entorno de desarrollo:
```
yarn start
```

Esto inicia tu servidor de desarrollo local en http://localhost:3000/.

Si ves el siguiente mensaje, tu aplicación se está ejecutando:

The application controller is running in the background

Ten en cuenta que hay dos páginas:

http://localhost:3000: un controlador principal que orquesta todas tus diferentes extensiones (como widgets, menús o modales). Será muy útil a medida que vayas enriqueciendo la funcionalidad de la aplicación.
http://localhost:3000/widget: componentes para widgets, modales, o cualquier cosa que necesite una pantalla dedicada.

Consulta la Guía para desarrolladores de la plataforma de desarrollo para obtener más información sobre esta arquitectura.

Es posible que observes un error HandshakeTimeoutError no detectado en la consola de JavaScript cuando interactúes directamente con el widget en tu navegador. Esto es normal. El SDK de aplicaciones de Datadog está diseñado para ejecutarse en un iframe que se conecta a la interfaz de usuario de Datadog y el intento de enlace entre el widget y la interfaz de usuario de Datadog agotará el tiempo de espera cuando no haya una interfaz de usuario de Datadog con la que el SDK deba comunicarse.

Añade tu aplicación a la plataforma para desarrolladores

Ve a Integrations > Developer Platform (Integraciones > Plataforma para desarrolladores) y haz clic en + New App (+ Nueva aplicación).
Introduce un nombre único para tu aplicación.
Si lo deseas, una vez que aparezca el dashboard, puedes cambiar el nombre de la aplicación, darle una descripción más detallada o cambiar su icono.

Añade tu aplicación a un dashboard

Antes de poder añadir tu aplicación a un dashboard, debes habilitarla haciendo clic en UI Extensions (Extensiones de interfaz de usuario).
Una vez cargada esta vista, haz clic en el botón Enable UI Extensions (Habilitar extensiones de interfaz de usuario).
Una vez que se te presenten más opciones para tu aplicación, cambia la Root URL (URL raíz) y la Debug Mode Root URL (URL raíz de modo de depuración) para que coincidan con la versión localhost del widget que estás ejecutando. La ruta del controlador principal es /widget. Estos valores de URL cambiarán a medida que construyas tu aplicación y comiences a alojarla en tu propia infraestructura.
Activa la casilla Dashboard Custom Widget (Widget personalizado de dashboard). Esto genera JSON para la aplicación.
En este ejemplo, la salida JSON contiene un valor llamado Your first widget. Este es el nombre de tu widget tal y como aparece en el menú para añadir a tus dashboards.
Navega hasta tu dashboard y añade un widget.
La sección Custom Widgets (Widgets personalizados) está en la parte inferior de la barra lateral. Busca tu widget en la lista y añádelo a tu dashboard.
Aparecerá una vista previa de tu nuevo widget, junto con algunas opciones. Desplázate hacia abajo y haz clic en Done (Hecho) para añadirlo a tu dashboard.
Para crear tu aplicación, ejecuta yarn build en tu terminal. A continuación, mueve tu sitio estático generado a la plataforma host de tu elección, y actualiza las URL en la configuración de la aplicación.

Acceso a la API OAuth

Cuando OAuth API Access está activado, los usuarios deben autenticarse antes de utilizar la aplicación. Esta función te permite integrar tu mecanismo de autenticación existente (por ejemplo, inicio de sesión con nombre de usuario y contraseña basados en cookies) con la plataforma para desarrolladores.