In case you don’t have a transparent concept of what an UI App in Datadog is but, it is best to know that it’s a characteristic that permits builders to increase Datadog’s native performance by way of customized widgets, modules and aspect panels. In different phrases, it means now you can run arbitrary JavaScript code instantly in your dashboards. Let’s say you need a knowledge visualization that Datadog doesn’t help, a Geomap for instance, you possibly can write an software to increase that performance into Datadog.
To find initialize a Datadog software, I invite you to look at the official documentation or at another of my articles dedicated to the creation of a Datadog App on Redis. These two sources is not going to solely make you create your first Datadog software but additionally your first customized widget and your first modal. Certainly, the thought right here is to give attention to show the geomap and markers on it. You may open the file : geomap/datadog-app/src/widget/GeoMap/index.tsx
If you realize TypeScript or JavaScript, it is best to already be acquainted with this half. Observe that the SDK of the appliance is imported after which initialized through the ui-extensions-sdk
library. As well as, the ui-extensions-react
library is used to retrieve the useTemplateVariables
hooks.
We are going to then outline our hooks. The primary one is the geographic coordinates. Because the widget is written in TypeScript, we have to create an interface. The second hook comes from the library imported above and permits us to retrieve the IP addresses from the shopper.
Then, we’ll add a life cycle to our software. Every time the ip Deal with state will change, we’ll make an API name to retrieve the geographical coordinates. This knowledge will then be built-in to an area state through the setLocation technique.
Lastly, if we have now the latitude and longitude, we show the map with the GPS coordinates and a marker. In any other case, we don’t show something. In lower than 60 strains of code, we’re in a position to create a customized Geomap!