From 451ab49119b1519bc63e52b177a39a6ef0b2e8dd Mon Sep 17 00:00:00 2001 From: mmfred Date: Thu, 25 Jun 2020 14:58:27 -0700 Subject: [PATCH 01/11] Add set up dev env file. --- .../build-apps/set-up-dev-env.mdx | 91 +++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 src/markdown-pages/build-apps/set-up-dev-env.mdx diff --git a/src/markdown-pages/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx new file mode 100644 index 000000000..e64398ecc --- /dev/null +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -0,0 +1,91 @@ +--- +path: '/build-apps/set-up-dev-env' +duration: '15-30 min' +title: 'Set up your development environment' +template: 'GuideTemplate' +description: 'Prepare to build apps and contribute to this site' +--- + + + +In progress. + + + + +## Before you begin +This guide requires that you have the following: + +- A github account +- New Relic developer account +- API Key +- New Relic One CLI downloaded + +
+ + + + + +## This is a step with a title and description +to be written + + + + +This is a step with no title or code snippet, only description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci dignissim, egestas turpis non, ultricies erat. Nullam id magna molestie, volutpat ipsum vitae, bibendum ligula. + + + + +## Set up and run the application locally +Use the New Relic One CLI to update the application UUID and run the application locally. In the terminal, change to the time picker directory. + +```shell lineNumbers=false +cd /nr1-howto/add-time-picker +``` + +Once that is done, run the following: + +```shell lineNumbers=false +npm start +``` + + + + +## Make sure you're getting data from the right New Relic account +In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI): + +```jsx +this.accountId = ; +``` + + + + + +Update the UUID and serve the application by running the following: + +```shell lineNumbers=false +nr1 nerdpack:uuid -gf +nr1 nerdpack:serve +``` + + + + + +### Next steps + +You'll get a URL to access New Relic One and see your application running locally: https://one.newrelic.com/?nerdpacks=local + +One the New Relic home page, there's a new launcher to the Add time picker application. + +Click the launcher, and the dashboard opens with your New Relic account transactions. + + +### Related info + +- [New Relic documentation](https://docs.newrelic.com) +- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268) \ No newline at end of file From 1ca208e1266ce6b39e923f9efcb0cc2126d8ec3f Mon Sep 17 00:00:00 2001 From: mmfred Date: Sun, 28 Jun 2020 17:57:09 -0700 Subject: [PATCH 02/11] Handful of changes - update nav, edit and move pages This PR does these things: - adds Setup your dev env content - moves "build an app" page to the build-apps folder - adds a couple of pages to the sidebar nav - removes reference to integration SDK because it's not a great route to send people down. --- src/data/sidenav.json | 8 ++ .../build-hello-world-app.mdx | 0 .../build-apps/set-up-dev-env.mdx | 89 +++++++++++-------- .../collect-data-from-any-source.mdx | 41 --------- 4 files changed, 58 insertions(+), 80 deletions(-) rename src/markdown-pages/{ => build-apps}/build-hello-world-app.mdx (100%) diff --git a/src/data/sidenav.json b/src/data/sidenav.json index f317466fc..e57658a19 100644 --- a/src/data/sidenav.json +++ b/src/data/sidenav.json @@ -51,6 +51,10 @@ "displayName": "Build apps", "url": "/build-apps", "children": [ + { + "displayName": "Set up your development environment", + "url": "/build-apps/set-up-dev-env" + }, { "displayName": "Create a 'Hello, World!' app", "url": "/build-apps/build-hello-world-app" @@ -74,6 +78,10 @@ { "displayName": "Add tables to your New Relic One application", "url": "/build-apps/howto-use-nrone-table-components" + }, + { + "displayName": "Add, query, and mutate data using NerdStorage", + "url": "/build-apps/add-query-mutate-data-nerdstorage" } ] }, diff --git a/src/markdown-pages/build-hello-world-app.mdx b/src/markdown-pages/build-apps/build-hello-world-app.mdx similarity index 100% rename from src/markdown-pages/build-hello-world-app.mdx rename to src/markdown-pages/build-apps/build-hello-world-app.mdx diff --git a/src/markdown-pages/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx index e64398ecc..0b732ec0c 100644 --- a/src/markdown-pages/build-apps/set-up-dev-env.mdx +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -8,84 +8,95 @@ description: 'Prepare to build apps and contribute to this site' -In progress. +If you've decided to build a custom app or modify one of our open source apps, you need a few essential tools: + +- The New Relic One command line interface (CLI) +- An API key, which you get when you download the CLI + +Depending on what you want to do with your app, you might have some additional setup and configuration. This guide covers: + +- Downloading the New Relic One CLI to build or modify apps +- Contribute content to this website ## Before you begin -This guide requires that you have the following: +You must have: -- A github account -- New Relic developer account -- API Key -- New Relic One CLI downloaded +- A [github account](https://github.com/) +While not strictly necessary for building apps, a GitHub account enables you to [download and customize our open source apps](https://opensource.newrelic.com/explore-projects), and contribute an [open source project](https://opensource.newrelic.com/contributing/). +- A [New Relic developer account](https://newrelic.com/signup/?partner=Developer+Edition) - a free trial account for developing New Relic applications.
+## Prepare to build or modify apps + -## This is a step with a title and description -to be written - +## Download the CLI and API key - +On the [Build New Relic One applications page](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==), complete the **Quick start** steps. + +These six steps get you an API key for use with developing apps, and the New Relic One CLI, for building and deploying apps. At the end of the **Quick Start**, you have a project consisting of the following: + +- A **Nerdpack** - The package containing all the files required by your application. It contains two types of files that you customize to build your app: Nerdlets, and the launcher. +- One or more **Nerdlet** files - A specific UI view or window. A Nerdlet is a React JavaScript package that includes an `index.js` file, a `stylesheet`, and a JSON-format `config` file. It can contain any JS functionality (charts, interactive fields, tooltips, etc.). +- A `launcher` file: This is the basis for the launcher, which is used to open your application from New Relic One after you publish your app. -This is a step with no title or code snippet, only description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci dignissim, egestas turpis non, ultricies erat. Nullam id magna molestie, volutpat ipsum vitae, bibendum ligula. -## Set up and run the application locally -Use the New Relic One CLI to update the application UUID and run the application locally. In the terminal, change to the time picker directory. +## Start building + +If you're ready to code, `cd` to your Nerdpack and get started. -```shell lineNumbers=false -cd /nr1-howto/add-time-picker -``` +If you want to learn more about building applications, try these step-by-step guides: + +- [Build a "Hello, World!" application](/build-apps/build-hello-world-app) shows how to create a little application, publish it to New Relic One, and share it with others by subscribing accounts to it. +- [Map pageviews by region](/build-apps/map-pageviews-by-region) takes you through the steps to create one of our popular open source apps. You learn to add a custom query to an app and view it in a table, then add that data to a map. -Once that is done, run the following: -```shell lineNumbers=false -npm start -``` - + -## Make sure you're getting data from the right New Relic account -In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI): +## Contributing to developer.newrelic.com -```jsx -this.accountId = ; -``` +This site is open source, and we welcome your input. Create a pull request if you see a mistake you know how to fix. Let us know if there's information you want by submitting an issue. Or write up a whole new guide if you have one you'd like to share. Read on to learn how. - + -Update the UUID and serve the application by running the following: +## Edit a page with a pull request + +1. At the top right corner of the page you want to edit, select the edit button (it looks like a pencil). +2. In GitHub, on the markdown version of the page, select the **Edit this file** button, type your changes. +3. At the bottom of the page, add a title and description for your pull request, and select **Commit changes**, and then select **Create pull request**. -```shell lineNumbers=false -nr1 nerdpack:uuid -gf -nr1 nerdpack:serve -``` - + + +## Make a feature or documentation request -### Next steps +- On any page, select the **GitHub** button at the top of the page, and then select the kind of change you want, and fill out the GitHub form. -You'll get a URL to access New Relic One and see your application running locally: https://one.newrelic.com/?nerdpacks=local + + + -One the New Relic home page, there's a new launcher to the Add time picker application. +## Contribute a new guide -Click the launcher, and the dashboard opens with your New Relic account transactions. +- Check out our [contributors guidelines](https://github.com/newrelic/developer-website/blob/master/CONTRIBUTING.md#creating-new-pages], which will walk you through the process. ### Related info -- [New Relic documentation](https://docs.newrelic.com) -- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268) \ No newline at end of file +- The [Build apps](/build-apps) overview page links to other helpful guides for building and enhancing apps +- The [New Relic community site](https://discuss.newrelic.com/c/build-on-new-relic) for ideas and answers from New Relic employees and community members \ No newline at end of file diff --git a/src/markdown-pages/collect-data/collect-data-from-any-source.mdx b/src/markdown-pages/collect-data/collect-data-from-any-source.mdx index 6af389ad1..09c2af791 100644 --- a/src/markdown-pages/collect-data/collect-data-from-any-source.mdx +++ b/src/markdown-pages/collect-data/collect-data-from-any-source.mdx @@ -163,47 +163,6 @@ end -## Integrations SDK - -Build out your own agent to get deep visibility into highly customized, unique, or legacy systems. - -Using the [Infrastructure Integrations SDK](https://developer.newrelic.com/technology/infrastructure-sdk), you can get data from specific entities into New Relic without having to worry about timings of harvest cycles. The following example shows a custom Apache Integration built atop the Infrastructure Integrations SDK. - -![Infrastructure integrations screenshot](../images/collect-data-from-any-source/UC2-sec3-ohai.png) - -```shell lineNumbers=true -# Code snippet from the Apache integration's main method in Go. -func main() { - log.Debug("Starting Apache integration") - defer log.Debug("Apache integration exited") - - integration, err := sdk.NewIntegration(integrationName, integrationVersion, &args) - fatalIfErr(err) - - if args.All || args.Inventory { - log.Debug("Fetching data for '%s' integration", integrationName+"-inventory") - fatalIfErr(setInventory(integration.Inventory)) - } - - if args.All || args.Metrics { - log.Debug("Fetching data for '%s' integration", integrationName+"-metrics") - ms := integration.NewMetricSet("ApacheSample") - provider := &Status{ - CABundleDir: args.CABundleDir, - CABundleFile: args.CABundleFile, - HTTPTimeout: defaultHTTPTimeout, - } - fatalIfErr(getMetricsData(provider, ms)) - } - - fatalIfErr(integration.Publish()) -} -``` - - - - - ## Log API If our existing [logging integrations](https://docs.newrelic.com/docs/new-relic-logs-documentation) don’t meet your needs, you can use our Log API to send any arbitrary log data to New Relic. (Eventually, the Telemetry SDKs will support the Log API.) From 8c84dbbcd7ce685eebc8112a9000e5cdabbeed2e Mon Sep 17 00:00:00 2001 From: mmfred Date: Sun, 28 Jun 2020 18:01:40 -0700 Subject: [PATCH 03/11] fixed a step forgot to close a step --- src/markdown-pages/build-apps/set-up-dev-env.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/markdown-pages/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx index 0b732ec0c..b690968ed 100644 --- a/src/markdown-pages/build-apps/set-up-dev-env.mdx +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -95,6 +95,10 @@ This site is open source, and we welcome your input. Create a pull request if yo - Check out our [contributors guidelines](https://github.com/newrelic/developer-website/blob/master/CONTRIBUTING.md#creating-new-pages], which will walk you through the process. + + + + ### Related info From f5d52d55fddc7088263a163e30b43970e62b6a9e Mon Sep 17 00:00:00 2001 From: mmfred Date: Sun, 28 Jun 2020 21:16:02 -0700 Subject: [PATCH 04/11] Added a page on New Relic CLI, updated publish and deploy Also, updated the nav with this new page. --- src/data/sidenav.json | 4 ++ .../build-apps/publish-deploy.mdx | 48 +++++++++---------- .../explore-docs/newrelic-CLI.mdx | 48 +++++++++++++++++++ 3 files changed, 75 insertions(+), 25 deletions(-) create mode 100644 src/markdown-pages/explore-docs/newrelic-CLI.mdx diff --git a/src/data/sidenav.json b/src/data/sidenav.json index e57658a19..b9659af12 100644 --- a/src/data/sidenav.json +++ b/src/data/sidenav.json @@ -93,6 +93,10 @@ "displayName": "New Relic One CLI", "url": "/reference/nr1-cli" }, + { + "displayName": "New Relic CLI", + "url": "/reference/newrelic-cli" + }, { "displayName": "Nerdpack file structure", "url": "/reference/nerdpack-file-structure" diff --git a/src/markdown-pages/build-apps/publish-deploy.mdx b/src/markdown-pages/build-apps/publish-deploy.mdx index d3b696d80..36a17a013 100644 --- a/src/markdown-pages/build-apps/publish-deploy.mdx +++ b/src/markdown-pages/build-apps/publish-deploy.mdx @@ -13,11 +13,11 @@ redirects: -When you build a New Relic One app, chances are you'll want to share it with others in your company. You might even want to share it through our open source channel. But first, you probably want to try it out locally to make sure it's working properly. The following sections describe how to serve your app locally, add it to New Relic One, and then share it with coworkers. +When you build a New Relic One app, chances are you'll want to share it with others in your organization. You might even want to share it through our open source channel. But first, you probably want to try it out locally to make sure it's working properly. The following sections describe how to serve your app locally, add it to New Relic One, and then share it with coworkers. -- [Serve it locally](#serve-locally). During development, you can locally serve it locally to test it out. +- Serve it locally: During development, you can serve it locally to test it out. -- [Publish it](#publish-app). When your application is ready for the world, you can publish it and [deploy it](#deploy-app), and users can [subscribe](#Subscribe) to it. +- Publish it: When your application is ready for the world, you can publish and deploy it, and subscribe accounts to it. @@ -28,6 +28,18 @@ This guide requires the following: - A New Relic One app or Nerdpack - New Relic One CLI +- The Nerdpack manager role for publishing, deploying, and subscribing apps. + +### About permissions + +The Nerdpack manager role is a [New Relic add-on role](https://docs.newrelic.com/docs/accounts/accounts/roles-permissions/add-roles-permissions). When you create a Nerdpack, you have the Nerdpack manager role for handling that Nerdpack. New Relic account administrators or owners have the Nerdpack manager role automatically, and can subscribe their accounts to Nerdpacks available to that acount. You can learn about [permissions related to managing applications](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog#permission_for_managing_applications) in the product documentation. + +### About versions + +New Relic One requires that only one version (following semantic versioning) of a Nerdpack can be published. Thus, the `nr1 nerdpack:publish` command requires the following: + +- The Nerdpack Manager role +- A unique version as specified in the version attribute found in the app's `package.json`.
@@ -40,15 +52,13 @@ This guide requires the following: While developing your application, you can locally serve the Nerdpack, which will display it in New Relic One. -1. Run the following in the parent root folder of your Nerdpack: `nr1 nerdpack:serve`. +1. In the parent root folder of your Nerdpack, run `nr1 nerdpack:serve`. 2. Go to [one.newrelic.com/?nerdpacks=local](http://one.newrelic.com/?nerdpack=local). The `?nerdpacks=local` URL suffix will load any locally served Nerdpacks that are available. When you make a change to a locally served Nerdpack, New Relic One will automatically reload it. -For more on this, see [Local development](https://developer.newrelic.com/client-side-sdk/index.html#cli/LocalDevelopment). - @@ -56,15 +66,10 @@ For more on this, see [Local development](https://developer.newrelic.com/client- ## Publish -The [CLI command](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli#Commands) `nerdpack:publish` places your Nerdpack in New Relic One. To publish and deploy, you must be a Nerdpack manager (a type of [New Relic add-on role](https://docs.newrelic.com/docs/accounts/accounts/roles-permissions/add-roles-permissions)). Your New Relic account administrator can grant this role. For more on permissions, see [Authentication and permissions](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions). +Publishing places your Nerdpack in New Relic One. To publish or deploy, you must be a **Nerdpack manager**. -**Note**: New Relic One requires that only one version (following semantic versioning) of a Nerdpack can be published. Thus, the `nr1 nerdpack:publish` command expects the correct permissions (the aforementioned Nerdpack Manager role and a unique version (as specified in the package.json's version attribute). +- To publish your Nerdpack, run `nr1 nerdpack:publish`. -To publish, run: `nr1 nerdpack:publish`. - -To learn how to switch the account a Nerdpack is associated with, see [App access to data](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions#Appaccesstodata). - -To learn more about the command's capabilities, run: `nr1 nerdpack:publish --help` @@ -72,11 +77,10 @@ To learn more about the command's capabilities, run: `nr1 nerdpack:publish --hel ## Deploy -One of the [CLI commands](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli#Commands) is `nerdpack:deploy`. Deploying a Nerdpack is how you choose which New Relic accounts have access to your application, and how you control which version of the application they’ll see. +Deploying is applying a Nerdpack version to a specific channel (for example, BETA, or STABLE). A channel can only have one Nerdpack version deployed to it at one time. If a channel has an existing Nerdpack associated with it, deploying a new Nerdpack version to that channel will undeploy the previous one. Channels are meant to be an easier way to control application version access than having to be concerned with many specific version numbers. -When you deploy a Nerdpack, you choose its "channel." A channel represents the development status of an application. There are three-channel choices: DEV, BETA, and STABLE. When you deploy your application (or a new version of your application) you assign it to one of these channels. Channels are meant to be an easier way to control application version access than having to be concerned with many specific version numbers. +1. To deploy an application, run `nr1 nerdpack:deploy`. -For more on permissions, see [Authentication and permissions](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions). @@ -84,20 +88,14 @@ For more on permissions, see [Authentication and permissions](https://developer ## Subscribe -Once an app is deployed, a user with a Nerdpack Manager role can use the [nr1 nerdpack:subscribe](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli#Commands) command to subscribe the owner account, or any of its subaccounts, to that app. This is what allows the app to be accessible in New Relic One. - -For details on subscribe permissions, see [Authentication and permissions](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions). +You provide access to the Nerdpacks you create (or manage) by subscribing accounts to them. When you publish and deploy your application, it’s available to you in the New Relic One Catalog. Use the Catalog to manage the information that you want to share about your application, as well as how it appears on the New Relic One home page. Subscribe accounts to your applications with the Catalog too. For information about subscribing, see [Discover and manage applications with New Relic One Catalog](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog). - - -### Next steps - -Learn more about subscribing users to apps in the [New Relic One Catalog](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog). + ### Related info - [Discover and manage applications with New Relic One](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog) -- [Build a custom application](/build-apps/build-a-custom-app) +- [Create a "Hello, World! application"](/build-apps/build-hello-world-app) diff --git a/src/markdown-pages/explore-docs/newrelic-CLI.mdx b/src/markdown-pages/explore-docs/newrelic-CLI.mdx new file mode 100644 index 000000000..14e6d84eb --- /dev/null +++ b/src/markdown-pages/explore-docs/newrelic-CLI.mdx @@ -0,0 +1,48 @@ +--- +path: '/explore-docs/newrelic-cli' +duration: '' +title: 'New Relic CLI Reference' +template: 'GuideTemplate' +description: 'The command line tools for performing tasks against New Relic APIs' +--- + + + +The New Relic CLI enables integration of New Relic into your existing workflows. Be it fetching data from your laptop while troubleshooting an issue, or adding New Relic into your CI/CD pipeline. + + + +
+ +## New Relic CLI commands + +Find details for the New Relic CLI command docs in GitHub. + +### Options + +``` + --format string output text format [YAML, JSON, Text] (default "JSON") + -h, --help help for newrelic + --plain output compact text +``` + +### Commands + +* [newrelic apm](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_apm.md) - Interact with New Relic APM +* [newrelic completion](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_completion.md) - Generates shell completion functions +* [newrelic config](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_config.md) - Manage the configuration of the New Relic CLI +* [newrelic documentation](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_documentation.md) - Generate CLI documentation +* [newrelic entity](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_entity.md) - Interact with New Relic entities +* [newrelic nerdgraph](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_nerdgraph.md) - Execute GraphQL requests to the NerdGraph API +* [newrelic nerdstorage](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_nerdstorage.md) - Read, write, and delete NerdStorage documents and collections. +* [newrelic nrql](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_nrql.md) - Commands for interacting with the New Relic Database +* [newrelic profile](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_profile.md) - Manage the authentication profiles for this tool +* [newrelic version](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_version.md) - Show the version of the New Relic CLI +* [newrelic workload](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic_workload.md) - Interact with New Relic One workloads + + +### Related info + +- [Getting started with the New Relic CLI](/automate-workflows/get-started-new-relic-cli) + + From 40ef5ddb59c13a6940a78ae02664c671e750db00 Mon Sep 17 00:00:00 2001 From: mmfred Date: Sun, 28 Jun 2020 21:47:01 -0700 Subject: [PATCH 05/11] Some copy edits to query mutate page worked with some step changes. --- .../add-query-mutate-data-NerdStorage.mdx | 64 +++++++++++-------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx b/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx index 9a40e05af..29909c4fb 100644 --- a/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx +++ b/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx @@ -10,24 +10,19 @@ description: 'NerdStorage is a document database accessible within New Relic One NerdStorage is a document database accessible within New Relic One. It allows you to modify, save, and retrieve documents from one session to the next. -Using NerdStorage, you can create individual documents of up to 64kb in size, create different collections of documents, and store data by Entity, Account, or User level. +Using NerdStorage, you can create individual documents of up to 64kb in size, create different collections of documents, and store data by entity, account, or user level. -This guide explains how to add data and documents to NerdStorage. For a introduction to what NerdStorage is and how it works, see [Intro to NerdStorage on New Relic One](https://developer.newrelic.com/build-tools/new-relic-one-applications/nerdstorage). +This guide explains how to add data and documents to NerdStorage. For an introduction to what NerdStorage is and how it works, see [Intro to NerdStorage](/reference/nerdstorage). ## Before you begin -This guide requires that you have the following: - -* A github account -* New Relic account -* An [API Key](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==) for building applications -* The [New Relic One CLI](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==) +This guide requires that you have an API key and the New Relic One CLI as described in [Set up your development environment](/build-apps/set-up-dev-env). ## Get started -First, you need to get the NerdStorage app running successfully inside New Relic One. +First, get the NerdStorage app running successfully inside New Relic One. @@ -39,29 +34,35 @@ Clone the example applications from the [GitHub repo](https://github.com/newreli -Next, use the New Relic One CLI to update the application UUID and run the application locally. +Use the New Relic One CLI to update the application UUID and run the application locally. -In the terminal, switch to the `/nr1-howto/use-nerdstorage` directory: +1. In the terminal, switch to the `/nr1-howto/use-nerdstorage` directory: ``` cd /nr1-howto/use-nerdstorage ``` -Then update the UUID and serve the application: +2. Update the UUID and serve the application: ``` nr1 nerdpack:uuid -gf nr1 nerdpack:serve ``` + - + -Once the app is successfully served, your terminal will return the URL to view your running application on New Relic One: [https://one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local). +Once the app is successfully served, your terminal will return the URL to view your running application on [New Relic One](https://one.newrelic.com/?nerdpacks=local). -Load the URL. Under **Your applications** you will see the **Use Nerdstorage** app listed. Click to launch the app. +Load the URL. Under **Your applications** you'll see the **Use Nerdstorage** app listed. Click to launch the app. ![Your applications view updated](../../images/build-an-app/NerdStorage-applications-view.png) + + + + + ## Add data to NerdStorage Once the app is up and running on New Relic One, you can prepare the app and start adding data. @@ -97,13 +98,13 @@ constructor(props) { -Import the UserStorageMutation by adding it to your import statement at the top of the index.js file: +Import the `UserStorageMutation` by adding it to your import statement at the top of the `index.js` file: ``` import {UserStorageMutation } from 'nr1'; ``` -Then update the helper with the code below: +Then update the helper with this code beginning `_addToNerdStorage`: ``` _addToNerdStorage(){ @@ -128,9 +129,9 @@ _addToNerdStorage(){ -Return to your running **How To Use NerdStorage** app screen on New Relic One and reload the page. +1. Return to your running **How To Use NerdStorage** app screen on New Relic One and reload the page. -Add some text in the text entry field and click the check button. This will update NerdStorage and trigger a `Toast` notification inside the app. You should then see the text you typed displayed as a table row below the text entry field. +2. Add some text in the text entry field and click the check button. This will update NerdStorage and trigger a `Toast` notification inside the app. You should then see the text you typed displayed as a table row below the text entry field. ![add data view 2](../../images/build-an-app/add-data-NerdStorage-2.png) @@ -141,13 +142,13 @@ Add some text in the text entry field and click the check button. This will upda ## Query data from NerdStorage -Once you get data storage working as described in the section above and you also need to get the app properly reading data from NerdStorage, or the app will reload with an empty state every time you navigate away from the app page and back. To to this, you need to add the `UserStorageQuery` component and update the `1componentDidMount` method. +Once you get data storage working as described in the section above, you also need to get the app properly reading data from NerdStorage, or the app will reload with an empty state every time you navigate away from the app page and back. To do this, add the `UserStorageQuery` component and update the `1componentDidMount` method. -Import the UserStorageQuery by adding it to the import statement in the application’s `./nerdlets/use-nerdstorage-nerdlet/index.js` file. +Import the `UserStorageQuery` by adding it to the import statement in the application’s `./nerdlets/use-nerdstorage-nerdlet/index.js` file. ``` import {UserStorageMutation, UserStorageQuery } from 'nr1'; @@ -156,7 +157,7 @@ import {UserStorageMutation, UserStorageQuery } from 'nr1'; -Then add the following `componentDidMount` method to your application: +Then, add the following `componentDidMount` method to your application: ``` componentDidMount(){ @@ -174,15 +175,24 @@ componentDidMount(){ ``` - + -Back inside the NerdStorage app, test your changes by adding a few more rows using the text entry field, then exit and relaunch the application. The application should load and show all the data you entered before you navigated away. +Back inside the NerdStorage app, test your changes by adding a few more rows using the text entry field. Then exit and relaunch the application. The application should load and show all the data you entered before you navigated away. + + + + + ## Mutate data in NerdStorage Each NerdStorage entry displayed in the table inside the app has a trash button that can be used to update a specific entry. The trash button works by making a call to the `_removeFromNerdStorage` helper method. -To get this process working, you need to update the code in `_removeFromNerdStorage`: + + + + +To get this process working, update the code in `_removeFromNerdStorage`: ``` _removeFromNerdStorage(index, data){ @@ -208,6 +218,10 @@ Once this is done, clicking the trash button will remove the item it's associate ![mutate data](../../images/build-an-app/mutate-data-NerdStorage.png) + + + + ## Delete collection from NerdStorage While the trash button is a good method for removing specific entries one at a time, you may also want the ability to delete a whole NerdStorage document at once. You can do this by adding the **Delete Document** button to your app. From af0f02cf1dfcf38267a17ad6b514b52e078ac48e Mon Sep 17 00:00:00 2001 From: mmfred <58010132+mmfred@users.noreply.github.com> Date: Mon, 29 Jun 2020 10:11:16 -0700 Subject: [PATCH 06/11] Update src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx Co-authored-by: Jerel Miller --- .../build-apps/add-query-mutate-data-NerdStorage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx b/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx index 29909c4fb..e66162100 100644 --- a/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx +++ b/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx @@ -104,7 +104,7 @@ Import the `UserStorageMutation` by adding it to your import statement at the to import {UserStorageMutation } from 'nr1'; ``` -Then update the helper with this code beginning `_addToNerdStorage`: +Then update the helper with this code beginning with `_addToNerdStorage`: ``` _addToNerdStorage(){ From e5bcb311acb724ad9ec9bf3e3a7307a0e53251ad Mon Sep 17 00:00:00 2001 From: mmfred <58010132+mmfred@users.noreply.github.com> Date: Mon, 29 Jun 2020 10:11:38 -0700 Subject: [PATCH 07/11] Update src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx Co-authored-by: Jerel Miller --- .../build-apps/add-query-mutate-data-NerdStorage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx b/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx index e66162100..d88b01976 100644 --- a/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx +++ b/src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx @@ -142,7 +142,7 @@ _addToNerdStorage(){ ## Query data from NerdStorage -Once you get data storage working as described in the section above, you also need to get the app properly reading data from NerdStorage, or the app will reload with an empty state every time you navigate away from the app page and back. To do this, add the `UserStorageQuery` component and update the `1componentDidMount` method. +Once you get data storage working as described in the section above, you also need to get the app properly reading data from NerdStorage, or the app will reload with an empty state every time you navigate away from the app page and back. To do this, add the `UserStorageQuery` component and update the `componentDidMount` method. From d17645b84162863b43078aeb36882003d14ea55c Mon Sep 17 00:00:00 2001 From: mmfred <58010132+mmfred@users.noreply.github.com> Date: Mon, 29 Jun 2020 10:12:52 -0700 Subject: [PATCH 08/11] Update src/markdown-pages/build-apps/publish-deploy.mdx Co-authored-by: Jerel Miller --- src/markdown-pages/build-apps/publish-deploy.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markdown-pages/build-apps/publish-deploy.mdx b/src/markdown-pages/build-apps/publish-deploy.mdx index 36a17a013..14e46490a 100644 --- a/src/markdown-pages/build-apps/publish-deploy.mdx +++ b/src/markdown-pages/build-apps/publish-deploy.mdx @@ -98,4 +98,4 @@ You provide access to the Nerdpacks you create (or manage) by subscribing accoun ### Related info - [Discover and manage applications with New Relic One](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog) -- [Create a "Hello, World! application"](/build-apps/build-hello-world-app) +- [Create a "Hello, World!" application](/build-apps/build-hello-world-app) From b75e3bb873c17578112c0ebb1c4165afb1c349ba Mon Sep 17 00:00:00 2001 From: mmfred <58010132+mmfred@users.noreply.github.com> Date: Mon, 29 Jun 2020 10:13:01 -0700 Subject: [PATCH 09/11] Update src/markdown-pages/explore-docs/newrelic-CLI.mdx Co-authored-by: Jerel Miller --- src/markdown-pages/explore-docs/newrelic-CLI.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/markdown-pages/explore-docs/newrelic-CLI.mdx b/src/markdown-pages/explore-docs/newrelic-CLI.mdx index 14e6d84eb..9b95dfb6e 100644 --- a/src/markdown-pages/explore-docs/newrelic-CLI.mdx +++ b/src/markdown-pages/explore-docs/newrelic-CLI.mdx @@ -44,5 +44,3 @@ Find details for the New Relic CLI command docs in GitHub. ### Related info - [Getting started with the New Relic CLI](/automate-workflows/get-started-new-relic-cli) - - From b380bd783d5fb6ecd85f155138acb62d9471871e Mon Sep 17 00:00:00 2001 From: mmfred Date: Mon, 29 Jun 2020 10:17:49 -0700 Subject: [PATCH 10/11] Fixed case mismatch that Jerel pointed out fix. --- src/markdown-pages/build-apps/set-up-dev-env.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markdown-pages/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx index b690968ed..5bbf3da68 100644 --- a/src/markdown-pages/build-apps/set-up-dev-env.mdx +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -40,7 +40,7 @@ While not strictly necessary for building apps, a GitHub account enables you to On the [Build New Relic One applications page](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==), complete the **Quick start** steps. -These six steps get you an API key for use with developing apps, and the New Relic One CLI, for building and deploying apps. At the end of the **Quick Start**, you have a project consisting of the following: +These six steps get you an API key for use with developing apps, and the New Relic One CLI, for building and deploying apps. At the end of the **Quick start**, you have a project consisting of the following: - A **Nerdpack** - The package containing all the files required by your application. It contains two types of files that you customize to build your app: Nerdlets, and the launcher. - One or more **Nerdlet** files - A specific UI view or window. A Nerdlet is a React JavaScript package that includes an `index.js` file, a `stylesheet`, and a JSON-format `config` file. It can contain any JS functionality (charts, interactive fields, tooltips, etc.). From b1d7817c6d8df1d630831fdd848f7c6b519f70cc Mon Sep 17 00:00:00 2001 From: mmfred <58010132+mmfred@users.noreply.github.com> Date: Mon, 29 Jun 2020 10:50:32 -0700 Subject: [PATCH 11/11] Update src/markdown-pages/build-apps/set-up-dev-env.mdx Co-authored-by: Jerel Miller --- src/markdown-pages/build-apps/set-up-dev-env.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/markdown-pages/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx index 5bbf3da68..17c9a69b4 100644 --- a/src/markdown-pages/build-apps/set-up-dev-env.mdx +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -93,7 +93,7 @@ This site is open source, and we welcome your input. Create a pull request if yo ## Contribute a new guide -- Check out our [contributors guidelines](https://github.com/newrelic/developer-website/blob/master/CONTRIBUTING.md#creating-new-pages], which will walk you through the process. +- Check out our [contributors guidelines](https://github.com/newrelic/developer-website/blob/master/CONTRIBUTING.md#creating-new-pages), which will walk you through the process. @@ -103,4 +103,4 @@ This site is open source, and we welcome your input. Create a pull request if yo ### Related info - The [Build apps](/build-apps) overview page links to other helpful guides for building and enhancing apps -- The [New Relic community site](https://discuss.newrelic.com/c/build-on-new-relic) for ideas and answers from New Relic employees and community members \ No newline at end of file +- The [New Relic community site](https://discuss.newrelic.com/c/build-on-new-relic) for ideas and answers from New Relic employees and community members