From f8ffcbcecbfb83f4bd53ba8b40d1a609bab43673 Mon Sep 17 00:00:00 2001 From: "Sandra (neko)" <165049174+neko-dd@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:32:06 -0700 Subject: [PATCH] Removes 'create with AI' content; copy-editing (#22801) Removes another instance of the 'create with AI' content. Adds a bunch of copy editing. --- .../service_management/app_builder/_index.md | 8 +-- .../en/service_management/app_builder/auth.md | 36 +++++------ .../service_management/app_builder/build.md | 63 +++++++------------ .../app_builder/embedded_apps.md | 10 +-- 4 files changed, 50 insertions(+), 67 deletions(-) diff --git a/content/en/service_management/app_builder/_index.md b/content/en/service_management/app_builder/_index.md index 33fdcb2955a87..5e22dd1c1bf1f 100644 --- a/content/en/service_management/app_builder/_index.md +++ b/content/en/service_management/app_builder/_index.md @@ -19,15 +19,15 @@ further_reading: Datadog App Builder is in private beta. Complete the form to request access. {{< /callout >}} -Datadog App Builder is a low-code application building platform that streamlines the development of your internal tools with a user-friendly drag-and-drop interface and built-in support for JavaScript. App Builder makes use of integrations with popular services such as AWS and GitHub, allowing you to leverage data and seamlessly connect with external APIs and data stores. By integrating with Datadog's existing capabilities, App Builder provides a centralized context, empowering you to take preventive actions or respond to ongoing incidents, all within the same view you use for troubleshooting. +Datadog App Builder is a low-code application building platform. It streamlines the development of your internal tools with a user-friendly drag-and-drop interface and built-in support for JavaScript. App Builder integrates with popular services such as AWS and GitHub, allowing you to leverage data and seamlessly connect with external APIs and data stores. By integrating with Datadog's existing capabilities, App Builder provides a centralized context that enables you to take preventive actions or respond to ongoing incidents, all from within the same view that you use for troubleshooting. {{< img src="/service_management/app_builder/datadog-app-builder-1.png" alt="An app in App Builder" style="width:100%;" >}} ## Configure App Builder actions -Datadog App Builder provides an [Action Catalog][1] of over 300 actions across several integrations. The Action Catalog and the connection credentials for each integration are shared with [Datadog Workflow Automation][2]. If there isn't an integration that accomplishes your task, generic actions such as the HTTP request and JavaScript function allow you to perform any task your app requires. +Datadog App Builder provides an [Action Catalog][1] of over 300 actions across multiple integrations. The Action Catalog and the connection credentials for each integration are shared with [Datadog Workflow Automation][2]. If there isn't an integration that accomplishes your task, you can use generic actions such as the HTTP request and JavaScript function to perform any task that your app requires. -{{< img src="/service_management/app_builder/app-builder-actions.png" alt="Datadog App Builder provides an Action Catalog of over 300 actions across several integrations." style="width:100%;" >}} +{{< img src="/service_management/app_builder/app-builder-actions.png" alt="Datadog App Builder provides an Action Catalog of over 300 actions across multiple integrations." style="width:100%;" >}} ## Start with blueprints @@ -45,7 +45,7 @@ Below are a few examples of what App Builder apps can do: ## Take action directly from dashboards -Use your apps from the Apps page, or access them independently from dashboards. Datadog Apps function as native dashboard integrations, allowing you to customize and take action on your data straight from your Dashboard. +You can use your apps from the Apps page or access them directly from within your dashboards. Datadog Apps function as native dashboard integrations, allowing you to customize and take action on your data straight from your Dashboard. {{< img src="/service_management/app_builder/app-builder-embedded-dashboard-1.png" alt="An app embedded in a dashboard" style="width:100%;" >}} diff --git a/content/en/service_management/app_builder/auth.md b/content/en/service_management/app_builder/auth.md index ac41e692395d6..5e15a3e2f6e6b 100644 --- a/content/en/service_management/app_builder/auth.md +++ b/content/en/service_management/app_builder/auth.md @@ -18,7 +18,7 @@ A few tools control access and authentication for apps and their components. Because app [actions][1] connect with external software systems, you may need to authenticate your Datadog account to a corresponding integration. An app can run successfully only if every action that requires authentication can verify the identity of your Datadog account. -Actions can be authenticated in two ways: +Actions can be authenticated in the following ways: - Credentials and permissions configured in the integration tile - Connection credentials @@ -30,56 +30,56 @@ For more information on configuring credentials, see [Connections][2]. App Build Use [role-based access control (RBAC)][4] to control access to your apps and connections. -The coarse permissions that apply to apps include Apps View, Apps Write, and Connections Read. +The coarse permissions that apply to apps include the following: Apps View -: Can view and run apps. Datadog Standard and Admin roles have view access to App Builder by default. +: View and run apps. Datadog Standard and Admin roles have view access to App Builder by default. Apps Write -: Can create and edit new and existing apps. Datadog Standard and Admin roles have write access to App Builder by default. +: Create and edit new and existing apps. Datadog Standard and Admin roles have write access to App Builder by default. Connections Read -: Can list and view available connections. Datadog Read Only, Standard, and Admin roles have read access to connections by default. +: List and view available connections. Datadog Read Only, Standard, and Admin roles have read access to connections by default. ### Restrict access to a specific connection -Set permissions on each connection to limit modifications or restrict their use. The granular permissions include **Viewer**, **Resolver**, and **Editor**. +Set permissions on individual connections to restrict their use or limit modifications. App Builder provides the following permissions for each connection: Viewer -: Can view the connection +: View the connection Resolver -: Can resolve and view the connection +: Resolve and view the connection Editor -: Can edit, resolve, and view the connection +: Edit, resolve, and view the connection -Resolving a connection includes getting the connection object assigned to a step and retrieving the secret associated with it. +**Note**: Permission to resolve a connection includes permission to get the connection object assigned to a step and retrieve the secret associated with it. Use the following steps to modify the permissions on a specific connection: 1. Navigate to the [App Builder page][5]. 1. Click the **Connections** tab. A list of connections appears. -1. Hover over the connection on which you would like to set granular permissions. **Edit**, **Permissions**, and **Delete** icons appear on the right. +1. Hover over the connection that you would like to set granular permissions on. **Edit**, **Permissions**, and **Delete** icons appear on the right. 1. Click the padlock (**Permissions**) icon. 1. Select **Restrict Access**. -1. Select a role from the dropdown menu. Click **Add**. The role you selected populates into the bottom of the dialog box. -1. Next to the role name, select your desired permission from the dropdown menu. +1. Select a role from the dropdown menu and click **Add**. The role you selected populates into the bottom of the dialog box. +1. Next to the role name, select the desired permission from the dropdown menu. 1. If you would like to remove access from a role, click the trash can icon to the right of the role name. 1. Click **Save**. ### Restrict access to a specific app -Set permissions on each app to restrict modifications to the app. The granular permissions include **Viewer** and **Editor**. +Set permissions on each app to restrict modifications to the app. App Builder provides the following permissions for each app: Viewer -: Can run and view the app +: Run and view the app Editor -: Can edit, run, and view the app +: Edit, run, and view the app -Restrict access while editing the app in the app canvas. -1. First, navigate to the detailed editing view for the app for which you want to restrict access. +To restrict access to the app, perform the following steps in the app canvas: +1. Navigate to the detailed editing view for the app you want to restrict access to. 1. In the app editor, click on the cog (**Settings**) icon. 1. Select **Permissions** from the dropdown. 1. Select **Restrict Access**. diff --git a/content/en/service_management/app_builder/build.md b/content/en/service_management/app_builder/build.md index 6610ace8295ad..f1ec991f785af 100644 --- a/content/en/service_management/app_builder/build.md +++ b/content/en/service_management/app_builder/build.md @@ -18,15 +18,13 @@ further_reading: Datadog App Builder is in private beta. Complete the form to request access. {{< /callout >}} -You can create an app or edit existing apps from the [App Builder][1] page. The page lists information about existing apps: -- The author -- The status -- The dates that each app was last modified +You can create an app or edit existing apps from the [App Builder][1] page. The page lists information about existing apps, including the following: +- Author +- Status +- Date that each app was last modified - Whether the app is published -On the App Builder page, access and filter your apps: -- Hover over an app for the options to edit, delete, view, or clone the app. -- Toggle **My apps** if you want to see only apps that you created. +On the App Builder page, you can access and filter your apps. Hover over an app for options to edit, delete, view, or clone the app. You can also enable the **My apps** toggle to see only apps that you created: {{< img src="service_management/app_builder/app_builder_page.png" alt="The App Builder page" style="width:100%;" >}} @@ -36,38 +34,21 @@ On the App Builder page, access and filter your apps: Blueprints are helpful starter apps. They cover common use cases and come loaded with demo data that you can use to familiarize yourself with the app. -1. Click the [**Blueprints**][2] tab. -1. Find the blueprint you want to use, and click **Preview**. +1. From [App Builder][1], click the [Blueprints][2] tab. +1. Find the blueprint that you want to use and click **Preview**. 1. Click **Use Blueprint** to open the app blueprint. 1. To change the app name and description, click the app name. -1. Each blueprint template comes loaded with demo data. You can begin customizing the app immediately by editing the **Connection** for each query. +1. Each blueprint template comes loaded with demo data. To customize the app, edit the **Connection** for each query. 1. To save the app, click **Save as New App**. 1. To preview the app, click **Preview**. Click **Edit** from the preview screen to return to the configuration view. 1. After you finish modifying the app, Click **Run** to test it. 1. When you're ready to publish your app, click **Publish**. Publishing an app makes it available to your dashboards. -[1]: https://app.datadoghq.com/app-builder/ - -### Create a starter app with AI - -{{< callout url="https://docs.google.com/forms/d/14Heybl3cLHuyxl1XpsGrEoWvc1TPA2DVLeS7S0wgIRI" btn_hidden="false" header="Join the beta!">}} -AI functionality for App Builder is opt-in. -{{< /callout >}} - -If you're not sure where to start, describe your app to the App Builder AI and let it create a starter app for you. - -1. From [App Builder][1], click **New App**. -1. Click the AI button. -1. Enter a detailed description for your app. Specify the integrations, actions, and UI components you want the app to use. -1. Click the up arrow (**↑**) to create your app. - -{{< img src="/service_management/app_builder/app-builder-ai.png" alt="Generate a starter app with AI" style="width:100%;" >}} - ### Create a custom app 1. From [App Builder][1], click **New App**. 1. To change the app name and description, click the app name. -1. To add a [UI component](#app-canvas-and-components) to the app canvas, select it or drag it onto the canvas. +1. To add a [UI component](#app-canvas-and-components) to the app canvas, click the component in the top bar or drag it onto the canvas. 1. Use [queries](#queries) to populate or interact with your canvas. 1. To save the app, click **Save as New App**. 1. To preview the app, click **Preview**. Click **Edit** from the preview screen to return to the configuration view. @@ -76,19 +57,19 @@ If you're not sure where to start, describe your app to the App Builder AI and l ## Customize your app -Apps are made up of UI components and queries, which interact with each other to form the user experience and logic behind each app. The query list and editor appear on the left side of the page, while the app canvas and UI components make up the right side of the page. +Apps are made up of UI components and queries which interact with each other to form the user experience and logic behind each app. The query list and editor appear on the left side of the page, while the app canvas and UI components make up the right side of the page. Basic customization: -- To edit the **Name**, **Description**, or the **Canvas Color** of your app, click the app name at the top left. +- To edit the **Name**, **Description**, or **Canvas Color** of your app, click the app name at the top left. - Click the **Preview** button to preview your app. Preview mode allows you to view the app from the user's perspective. Use preview mode to interact with the app UI and test your queries. When you're done, click **Edit** to return to the app builder. - To save your app, click **Save**. - When you're ready to publish your app, click **Publish**. Publishing an app makes it available to your dashboards. ### App canvas and components -The app canvas represents the graphical interface that your users interact with. Selecting a component adds it to the canvas. Alternatively, you can add components or move them around on the canvas by dragging and dropping. To see all available components, click **All Components**. +The app canvas represents the graphical interface that your users interact with. You can click a component in the top bar to add it to the canvas, or you can drag and drop components to add them or move them around on the canvas. To see all available components, click **All Components**. -Each component features a list of corresponding configuration options that control how users interact with your app. For example, the **Text Input** component allows you to set a default value, placeholder text, and a label. The **Button** component includes a label and an event to trigger when pressed. Components also feature an **Appearance** section that changes the way the components look and act. For example, you can disable a button or control its visibility. +Each component features a list of corresponding configuration options that control how users interact with your app. For example, the **Text Input** component allows you to set a default value, placeholder text, and a label. The **Button** component includes a label and an event that triggers when the button is pressed. Components also feature an **Appearance** section that changes the way the components look and act. For example, you can disable a button or control its visibility. To delete or duplicate a component, select the component and click the three dot ellipsis (*...*) to display the **Delete** or **Duplicate** options. @@ -110,9 +91,9 @@ Available UI components: #### Events -UI components can trigger reactions on an **Event**. The event triggers differ according to the component. For example, a button component can trigger on a click event, and a table component event can trigger on a page change or table row click. +UI components can trigger reactions on an **Event**. Event triggers differ according to the component. For example, a button component can trigger a reaction on a click event, and a table component event can trigger a reaction on a page change or table row click event. -An event can set a UI component state, open or close a modal, trigger another query, or even run custom JavaScript. +An event can set the state of a UI component, open or close a modal, trigger another query, or even run custom JavaScript. For example, the [GitHub PR summarizer][4] blueprint uses a **Summarize** button with an event that triggers on a click. The event uses the **Trigger Query** reaction which runs the `summarizePulls` query. @@ -150,7 +131,7 @@ In the table, the **User** column fills with an avatar and GitHub username for e ### Queries -Queries allow you to populate your app with data from Datadog APIs or a supported integration. Queries take inputs from other queries or from UI components, and return outputs for use in other queries or UI components. +Queries populate your app with data from Datadog APIs or supported integrations. They take inputs from other queries or from UI components and return outputs for use in other queries or in UI components. To add a query, click the plus (**+**) icon in the **Queries** section and search for a query to add to your app. After you've added a query, it appears in the query list above the query editor. Click and drag queries to reorder them. Select a query to configure it. @@ -169,7 +150,7 @@ Configuring debounce ensures that your query is only triggered once per user inp #### Conditional queries -You can set a condition that must be met before a query can run. To set a query, enter an expression in the **Condition** field in the **Advanced** section of the query. The condition must evaluate to true before the query runs. For example, if you want a given query to run only if a UI component named `select0` exists and is not empty, use the expression: +You can set a condition that must be met before a query can run. To set the condition for a query, enter an expression in the **Condition** field in the **Advanced** section of the query. This condition must evaluate to true before the query can run. For example, if you want a given query to run only if a UI component named `select0` exists and is not empty, use the following expression: {{< code-block lang="js" >}}${select0.value && select0.value.length > 0}{{< /code-block >}} @@ -197,7 +178,7 @@ Similar to UI component events, you can configure a reaction to trigger after a #### Error notifications -To display a toast (a brief message notification) to the user when the system returns an error, toggle **Show Toast on Errors** in the **Advanced** section of a query. +To display a toast (a brief notification message) to the user when the system returns an error, toggle **Show Toast on Errors** in the **Advanced** section of a query. #### Confirmation prompts @@ -207,19 +188,19 @@ To prompt a user for confirmation before the query runs, toggle the **Requires C Use app variables to pass data from one part of your app to another. Additionally, you can use app variables to pass in data from your dashboard using [dashboard template variables][3]. -Variables are enclosed in braces, preceded by a dollar sign (`${}`). To use a variable, enter the query or UI component name and access the child fields using dot notation. For example, if you have a select component named `select0` and you want to access its default value field, use the syntax `${select0.defaultValue}`. If you're not sure what to enter as a variable, type `${` to open a suggestions menu with all available variables. +Variables are enclosed in braces and are preceded by a dollar sign (`${}`). To use a variable, enter the query or UI component name. Access the child fields using dot notation. For example, if you have a select component named `select0` and you want to access its default value field, use the syntax `${select0.defaultValue}`. If you're not sure what to enter as a variable, type `${` to open a suggestion menu with all available variables. -{{< img src="service_management/app_builder/app-builder-variable.mp4" alt="If you're not sure what to enter as a variable, type ${ to open a suggestions menu with all available variables" video=true >}} +{{< img src="service_management/app_builder/app-builder-variable.mp4" alt="If you're not sure what to enter as a variable, type ${ to open a suggestion menu with all available variables" video=true >}} ### Customize an app with JSON -To edit an app with JSON, click the cog (settings) icon, and select **Switch to JSON**. The **Switch to GUI** option in the settings menu takes you back to the GUI editor. +To edit an app with JSON, click the cog (**Settings**) icon and select **Switch to JSON**. The **Switch to GUI** option in the settings menu takes you back to the GUI editor. ## Further reading {{< partial name="whats-next/whats-next.html" >}} -[1]: https://app.datadoghq.com/app-builder/apps/ +[1]: https://app.datadoghq.com/app-builder/ [2]: https://app.datadoghq.com/app-builder/blueprints [3]: /service_management/app_builder/embedded_apps [4]: https://app.datadoghq.com/app-builder/apps/edit?viewMode=edit&template=github-pr-summarizer diff --git a/content/en/service_management/app_builder/embedded_apps.md b/content/en/service_management/app_builder/embedded_apps.md index 0665a31e2a755..97c3579c2991f 100644 --- a/content/en/service_management/app_builder/embedded_apps.md +++ b/content/en/service_management/app_builder/embedded_apps.md @@ -16,7 +16,7 @@ further_reading: Datadog App Builder is in private beta. Complete the form to request access. {{< /callout >}} -With Datadog App Builder apps embedded into your dashboards, you can take direct actions on your vital resources with all of the relevant data and context immediately available. Link your app with the dashboard's timeframe and template variables to dynamically set the scope of the app's actions, allowing you to carry out actions in your environment at any needed scope. +When you have Datadog App Builder apps embedded in your dashboards, you can take direct actions on your resources, and all of the relevant data and context is immediately available. Link your app with the dashboard's time frame and template variables to dynamically set the scope of the app's actions, which allows you to carry out actions in your environment at any needed scope. ## Add apps to your dashboard @@ -30,9 +30,9 @@ The App Editor modal appears, allowing you to select an app and provide it with ## Sync your app with dashboard template variables -You can link your app to template variables anywhere that supports template expressions in your queries or app elements. Use the following code snippet as an example, ensuring to replace the `` and `` with the template variable name and default value, respectively. Paste the snippet into your template expression. +You can link your app to template variables anywhere that supports template expressions in your queries or app elements. Use the following code snippet as an example, replacing `` and `` with the template variable name and default value, respectively. Paste the snippet into your template expression. -**Note**: If you want to leave an element (such as a search field) blank by default, you can set the default value as an empty string `""` or `undefined`. +**Note**: If you want to leave an element (such as a search field) blank by default, you can set the default value to an empty string (`""`) or `undefined`. {{< code-block lang="json" disable_copy="false" collapsible="false" >}} ${self.options?.find(o => o.includes(global.dashboard.templateVariables?.find(v => v.name === '')?.value)) || ''} @@ -40,8 +40,10 @@ ${self.options?.find(o => o.includes(global.dashboard.templateVariables?.find(v ### Scope your app dynamically -App elements that are linked with dashboard template variables update in tandem with the values of the template variables on the dashboard, so you can focus your app's activities wherever needed. For example, selecting a particular `instance_id` value through the template variable dropdown or directly from a graph adds the `instance_id` value to the app's filter as well, so you can immediately take any needed actions on that instance: +App elements that are linked with dashboard template variables update in tandem with the values of the template variables on the dashboard. For example, selecting a particular `instance_id` value through the template variable dropdown or directly from a graph adds the `instance_id` value to the app's filter as well, so that you can take any necessary actions on that instance: {{< img src="service_management/app_builder/embedded_apps/template_variables.mp4" alt="Selecting a template variable value from a graph" video="true">}} +## Further reading + {{< partial name="whats-next/whats-next.html" >}}