Datadog Apps

Join the Beta!

Datadog Apps is currently in beta, but you can easily request access! Use this form to submit your request today. Once approved, you can start getting creative and develop your App for you, your organization, or for publishing to the entire Datadog community alongside our other great Datadog Apps!

What is an App?

Datadog Apps enable developers to extend the native functionality of Datadog through custom dashboard widgets. For example, if there is a data visualization you want that Datadog does not support, or a common remediation workflow you execute in a third-party platform, you could write an app to extend this functionality within Datadog.

Setup

Create an app

  1. Create a Datadog App.

$ yarn create @datadog/app

  1. Navigate to the folder you have created.

$ cd starter-kit

  1. Set up your development environment.

$ yarn start

This starts your local development server on http://localhost:3000/.

Application has loaded

If you see this message, your application is running.

Note that there are two pages: http://localhost:3000: A main controller that orchestrates all of your different extensions (such as widgets, menus, or modals). It will come in handy as you enrich app functionality.

http://localhost:3000/widget: Components for widgets, modals, or anything that needs a dedicated display.

See the Developer Platform Developer Guide for details about this architecture.

You may notice an uncaught HandshakeTimeoutError in your JavaScript Console when you interact with the local widget in your browser directly. This is expected. The Datadog Apps SDK is designed to run in an iframe that connects to the Datadog User Interface and the handshake attempt between the widget and the Datadog UI will timeout when there is no Datadog UI for the SDK has to communicate with.
  1. Go to your Developer Platform within Datadog and click on + New App in the upper right.
New App

  1. Enter a name for your application. Choose a distinct name so that you can differentiate it from any other apps you may be creating.

  2. You are then presented with the dashboard for your new application. You can further change your app name here, give your app a more detailed description, or change its icon.

App Edit Basic Information

Add your app to a dashboard

  1. Before you can add your app to a dashboard, you must enable it by clicking on UI Extensions on the left side.
App Edit Enable UI Extensions

Once this view loads, click on the Enable UI Extensions button.

  1. You are then presented with more options for your app.

Make sure you change the root URL and debug mode root URL to match the localhost version of the widget that you have running. The main controller path is /widget. These URL values will change as you build your application and begin to host it on your own infrastructure.

  1. Turn the toggle to ‘Dashboard Custom Widget’ on (you may need to scroll the center panel down a bit to see it). This generates JSON on the right hand side.
App Edit UI Extensions

Note that this JSON contains a value called Your first widget. This is the name of your widget as it appears in the menu to add to your Dashboards.

  1. Navigate to your dashboard and add a widget.
Dashboard add widget
  1. The Custom Widgets section is at the bottom of the sidebar. Find your widget in the list and add it to your dashboard.
Custom Widfget
  1. A preview of your new widget appears, along with some options. Scroll down in the modal and click Done to add it to your dashboard.
New Application New Application 2

To build your application, run yarn build in your terminal. Then move your static generated site to the hosting of your choice and update the URLs in the app settings.

OAuth API Access

When this feature is enabled, users need to be authenticated before using the app. This feature allows you to integrate your existing authentication mechanism (for example, cookie-based username/password login) with the Developer Platform.

Sample Applications

Starter kit

Sentiment analysis