Visual Studio Code extension for creating Dynatrace Apps
This extension helps developers to speed up their work by creating, testing, and debugging Dynatrace Apps.
Overview
Build smarter and faster for the Dynatrace platform: The Visual Studio Code Extension "Dynatrace Apps" helps developers create, test, and debug apps for the Dynatrace platform.
The extension supports the following functionalities:
Requirements
Before you start, be sure you meet the following requirements:
- Visual Studio Code version 1.85.0 or higher.
- A VS Code Dynatrace app project containing an
app.config.jsonconfiguration file in the root directory. - A Dynatrace account and user: If you're new to Dynatrace, visit our website to learn more about our offering and sign up for a free trial.
Installation
You can install the extension from the Microsoft Visual Code Marketplace or directly from the extensions tab inside your Visual Studio Code IDE.
Build an app with the Dynatrace App Toolkit
The extension wraps essential functionality from the Dynatrace App Toolkit, such as configuring or starting the server, building and deploying apps, or generating app functions.
Configure your app
You can define all necessary options from the app manifest using the provided Configure app functionality. It includes metadata such as app ID or name and scopes or content security policies.
Test your new app without (re)deployment
Using the built-in Dynatrace development server, you can quickly review changes to your app by reloading the browser instead of deploying a new version. You can start the development servers on localhost from the command panel in the sidebar. Browse the documentation to investigate more options of the server.
Build and deploy apps
Selecting Build app runs the npx dt-app build script to create the app bundle and run validation checks. Have a look at the documentation to explore more build options. Clicking on Deploy app will perform a build and deploy the app to your connected development environment.
Stay up to date with your dependencies
When selecting Update dependencies, the extensions will run the npx update command to check if there are any new Dynatrace packages available on npm and will install them.
Generate app functions
App functions represent the backend, including all the business logic, of a Dynatrace app. You use them for requirements such as accessing third-party APIs, heavy data processing and manipulation, or capsule functionality requiring elevated access rights.
You can create a new app function by clicking on the Generate app function and entering a name.
It will execute a script, which creates a file in your app's API directory and exposes the new function in the respectiveapp function section.
After the wizard finishes, it creates a file in your app's API directory and exposes the new function in the respective "app function" section. From there, you can test it using mocked parameters. In the following example, you can see how you can call your generated function and how you pass parameters:
Query data from within the extension
The Dynatrace extension enables you to query live data stored in Grail directly in VS Code using the Dynatrace Query Language (DQL).
Set up query support
First, create a .dql file in your project. You can do this by right-clicking in your project directory or clicking the New file button.
After creating the new file (for example, LogsQueries.dql), you need to open it. The extension now connects to the environment specified in app.config.json. If you've not authenticated your Dynatrace environment, a browser window will open and prompt you for your Dynatrace login.
The status bar displays the currently logged-on user when the connection is established:
Your project is now ready to query live data from your environment.
Write queries
The Dynatrace Query Language (DQL) is a powerful tool to explore, filter, and aggregate data stored in Dynatrace. To query data from within the IDE, open the file created in the earlier step (LogsQueries.dql) and insert your query. Below, you can see an example DQL statement that shows the first 100 log entries:
fetch logs
| limit 100
When you start typing, the auto-completion will suggest available DQL commands.
You can always preview the query result by clicking the Run Query button, which you can see displayed above each query.
You'll then need to select a timeframe.
After selecting a timeframe, the query will be sent to your Dynatrace environment and display the result in a new editor window:
You can also create multiple queries to trigger them individually or use them within TypeScript, as in the example below. To do so, you need to add a name for each of them:
@name("GetLogs")
fetch logs
| limit 100
@name("GetSevereLogs")
fetch logs
| filter loglevel == "SEVERE"
Call dynamic queries from within your app
With this extension, you can create TypeScript functions to query data dynamically from within your Dynatrace app. Each query is exposed by its given name. You can also add parameters to create dynamic queries by adding a @param(fieldname, default) annotation as shown below:
@name("GetLogsWithLevel")
@param("severity", "SEVERE") // string
@param("limit", "100") // number
fetch logs
| filter loglevel == "{{severity}}"
| limit {{limit}}
After complete, you can then import and call this function from within your app using the following code:
import { runQueryGetLogsWithLevel } from './generated/LogsQueries';
async function fetchData() {
const logs = await runQueryGetLogsWithLevel('INFO', 10);
}
The extension has all permissions to query DQL data, so the preview function returns data immediately. When you use the generated typescript function for this query, include the query scope in your app.config.json.
It requires either the storage:events:read or storage:logs:read permission.