@@ -42,6 +47,11 @@ const GuideTile = ({
GuideTile.Button = Button;
+GuideTile.ALIGNMENT = {
+ LEFT: 'left',
+ CENTER: 'center',
+};
+
GuideTile.propTypes = {
duration: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
@@ -50,6 +60,11 @@ GuideTile.propTypes = {
icon: PropTypes.string,
children: PropTypes.node,
as: PropTypes.elementType,
+ alignment: PropTypes.oneOf(Object.values(GuideTile.ALIGNMENT)),
+};
+
+GuideTile.defaultProps = {
+ alignment: GuideTile.ALIGNMENT.CENTER,
};
export default GuideTile;
diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
index 4a227de5d..f48a70b8e 100644
--- a/src/components/GuideTile/GuideTile.module.scss
+++ b/src/components/GuideTile/GuideTile.module.scss
@@ -10,9 +10,11 @@
border: 1px solid var(--border-color);
border-radius: 0.25rem;
position: relative;
+ transition: all 0.15s ease-out;
- button:hover {
- transform: translateY(-1px);
+ &:hover {
+ transform: translateY(-2px);
+ border: 1px solid var(--color-neutrals-400);
}
}
@@ -20,11 +22,6 @@
margin-top: 1rem;
}
-.title,
-.description {
- text-align: center;
-}
-
.timeEstimate {
font-size: 0.75rem;
display: flex;
@@ -55,13 +52,40 @@
margin-bottom: 1.5rem;
color: var(--secondary-text-color);
flex: 1;
- padding: 0 0.5rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
}
.button {
justify-self: center;
+
+ &:hover {
+ transform: translateY(-1px);
+ }
}
.timeIcon {
margin-right: 0.25rem;
}
+
+.tileLeftAligned {
+ .title,
+ .description {
+ text-align: left;
+ }
+ .description {
+ padding: 0;
+ }
+}
+
+.tileCenterAligned {
+ .title,
+ .description {
+ text-align: center;
+ }
+ .description {
+ padding: 0 0.5rem;
+ }
+}
diff --git a/src/components/Jumbotron.js b/src/components/Jumbotron.js
deleted file mode 100644
index bc133277a..000000000
--- a/src/components/Jumbotron.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-import CallToAction from './CallToAction';
-import styles from './Jumbotron.module.scss';
-
-const Jumbotron = () => (
-
@@ -29,7 +29,7 @@ We also have a 14-minute video that covers the steps below.
## Before you begin
-To develop projects, you need our New Relic One CLI (command line interface).
+To develop projects, you need our New Relic One CLI (command line interface).
If you haven't already installed it, do the following:
@@ -68,7 +68,7 @@ If you haven't already done so, clone the example applications from our [how-to
-
+
In your preferred text editor, open `index.js`.
@@ -114,13 +114,13 @@ Execute these commands to update the UUID and serve the sample application:
Once the sample application is successfully served, go to the local New Relic One homepage (https://one.newrelic.com/?nerdpacks=local) and click **Use NerdGraph**.
-
+
If you don't see any launchers, click **Your applications**.
-
+
@@ -129,7 +129,7 @@ If you don't see any launchers, click **Your applications**.
After launching the **Use NerdGraph** application, you see a dashboard that gives an overview of the transactions in your New Relic account.
-
+
## Add the `NerdGraphQuery` component
@@ -142,7 +142,7 @@ If you need more details about our example below, see the APIs and components pa
-
+
Add the `NerdGraphQuery` component into the first `StackItem` inside of the `return` in the `index.js` file:
@@ -166,12 +166,12 @@ Add the `NerdGraphQuery` component into the first `StackItem` inside of the `ret
-The `NerdGraphQuery` component takes a query object that states the source you want to access and the data you want returned.
+The `NerdGraphQuery` component takes a query object that states the source you want to access and the data you want returned.
Add the following code to your `index.js` file in the `render` method:
-
+
In the browser console, you can see the data from your query returned in an object that follows the same structure of the object in the initial query.
@@ -195,7 +195,7 @@ In the browser console, you can see the data from your query returned in an obje
To take the data returned by the NerdGraph query and display it in the application, replace the `return null` in the current `NerdGraphQuery` component with this `return` statement:
```jsx
- return {data.actor.account.name} Apps: ;
+ return {data.actor.account.name} Apps: ;
```
@@ -204,7 +204,7 @@ To take the data returned by the NerdGraph query and display it in the applicati
When you go back to the browser and view your application, you see a new headline showing the name of your account returned from NerdGraph.
-
+
## How to use `NerdGraphQuery.query`
@@ -213,7 +213,7 @@ At this point, you implemented the `NerdGraphQuery` component with the applicati
Here's what you need to do next:
* Query NerdGraph inside of the `componentDidMount` lifecycle method.
-* Save the returned data for later usage throughout the New Relic One application.
+* Save the returned data for later usage throughout the New Relic One application.
Complete the following:
@@ -221,16 +221,16 @@ Complete the following:
-The following code takes the response from NerdGraph and makes sure the results are processed, stored into the application state, and logged to the browser console for viewing.
+The following code takes the response from NerdGraph and makes sure the results are processed, stored into the application state, and logged to the browser console for viewing.
-Add the following code into the `index.js` just under the `constructor`:
+Add the following code into the `index.js` just under the `constructor`:
```jsx
componentDidMount() {
const accountId = this.state;
const gql = `{ actor { accounts { id name } } }`;
- const accounts = NerdGraphQuery.query({query: gql}) //The NerdGraphQuery.query method called with the query object to get your account data is stored in the accounts variable.
+ const accounts = NerdGraphQuery.query({query: gql}) //The NerdGraphQuery.query method called with the query object to get your account data is stored in the accounts variable.
accounts.then(results => {
console.log('Nerdgraph Response:', results);
const accounts = results.data.actor.accounts.map(account => {
@@ -246,7 +246,7 @@ Add the following code into the `index.js` just under the `constructor`:
-After the data is stored into state, display a selection so users can change accounts and update the application.
+After the data is stored into state, display a selection so users can change accounts and update the application.
To do this, add the following code to `index.js` for the second `StackItem` in the `return` statement:
@@ -269,10 +269,10 @@ To do this, add the following code to `index.js` for the second `StackItem` in t
After you complete these steps, look at the application in your browser, and note the following:
-* The dropdown menu displays the data returned from the `NerdGraphQuery.query` and allows you to select an account.
+* The dropdown menu displays the data returned from the `NerdGraphQuery.query` and allows you to select an account.
* After you select a new account, the application shows data from the new selection.
-
+
The final `index.js` file should have code similar to the code below. This completed sample code is in your nerdlet `final.js`.
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..443a12264 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](/explore-docs/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.
+
+
+
+
+
## 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 with `_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.
@@ -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 `componentDidMount` 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
+
+
+
+
## 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.
@@ -260,4 +274,4 @@ Now that you’ve successfully implemented NerdStorage into a New Relic One appl
## Related info
-- [New Relic SDK documentation](/reference/intro-to-sdk)
+- [New Relic SDK documentation](/explore-docs/intro-to-sdk)
diff --git a/src/markdown-pages/build-apps/add-time-picker-guide.mdx b/src/markdown-pages/build-apps/add-time-picker-guide.mdx
index ee3734e6f..82043b742 100644
--- a/src/markdown-pages/build-apps/add-time-picker-guide.mdx
+++ b/src/markdown-pages/build-apps/add-time-picker-guide.mdx
@@ -99,7 +99,7 @@ If you don't see any launchers, click **Your applications**.
-
+
@@ -107,7 +107,7 @@ If you don't see any launchers, click **Your applications**.
After launching the **Add Time Picker** application, you see a dashboard that gives an overview of the transactions in your New Relic account:
-
+
By default, the application shows your data within the last 60 minutes. If you toggle the time picker, it doesn't update the charts because the transaction overview application isn't connected to the New Relic One platform. It has no access to the data from the time picker.
@@ -244,7 +244,7 @@ Add a `console.log` statement to make sure you are seeing appropriate data. Inse
After you complete these steps, your browser console displays something like this:
-
+
## Add the time to the queries
diff --git a/src/markdown-pages/build-hello-world-app.mdx b/src/markdown-pages/build-apps/build-hello-world-app.mdx
similarity index 87%
rename from src/markdown-pages/build-hello-world-app.mdx
rename to src/markdown-pages/build-apps/build-hello-world-app.mdx
index 817edf522..77d30cdba 100644
--- a/src/markdown-pages/build-hello-world-app.mdx
+++ b/src/markdown-pages/build-apps/build-hello-world-app.mdx
@@ -1,13 +1,13 @@
---
path: '/build-apps/build-hello-world-app'
duration: '15 min'
-title: 'Create a "Hello, World!" Nerdlet'
+title: 'Create a "Hello, World!" application'
template: 'GuideTemplate'
description: 'Build a "Hello, World!" app and publish it to New Relic One'
---
-Here's how you can quickly build a "Hello, World!" application in New Relic One. In these steps, we'll show you how to create a local version of the New Relic One site where you can prototype your application. Then, when you are ready to share the application with others, you can publish it to New Relic One.
+Here's how you can quickly build a "Hello, World!" application in New Relic One. In these steps, we'll show you how to create a local version of the New Relic One site where you can prototype your application. Then, when you're ready to share the application with others, you can publish it to New Relic One.
We also have a 5-minute video that covers the steps below.
@@ -40,11 +40,11 @@ If you followed all the steps in the CLI wizard, you now have files under a new
Open a code editor and point it to the new directory named after your nerdpack project (for example, `my-awesome-nerdpack`).
-
-
- Your code editor displays two artifacts: `launchers` (containing the homepage tile) and `nerdlets` (containing your application code).
+ Your code editor displays two artifacts:
+ - `launchers` containing the homepage tile
+ - `nerdlets` containing your application code
-
+
@@ -74,9 +74,9 @@ If you followed all the steps in the CLI wizard, you now have files under a new
- As an optional step, you can add a custom launcher icon using any image file named `icon.png`. You can replace the default `icon.png` file under `launcher` by dragging in your new image file:
+ As an optional step, you can add a custom launcher icon using any image file named `icon.png`. Replace the default `icon.png` file under `launcher` by dragging in your new image file:
- 
+ 
@@ -121,15 +121,18 @@ If you followed all the steps in the CLI wizard, you now have files under a new
When the browser opens, click the new launcher for your application. Here's an example where we inserted a leaf icon:
- 
+ 
+
+
+ After you click the new launcher, your "Hello, World!" appears:
+
+ 
- After you click the new launcher, your "Hello, World!" appears:
-
- 
+
## Publish you application to New Relic
@@ -168,7 +171,7 @@ Your colleagues can't see your local application, so when you are ready to share
When your new application opens, notice that it doesn't display any helpful descriptive information. The next section shows you how to add descriptive metadata.
- 
+ 
## Add details to describe your project
@@ -190,7 +193,7 @@ Now that your new application is in the New Relic One catalog, you can add detai
Select **catalog**, which creates a stub in your project under the `catalog` directory. Here's how the results might look in your code editor:
- 
+ 
@@ -259,4 +262,4 @@ Now that you completed the steps in this example, you learned the basic steps to
## Related information
- [New Relic documentation](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-build-your-own-custom-new-relic-one-application)
-- [New Relic's Explorer Hub](https://discuss.newrelic.com/)
\ No newline at end of file
+- [New Relic's Explorer Hub](https://discuss.newrelic.com/)
diff --git a/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx b/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx
index 3038343a0..a0ebd3377 100644
--- a/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx
+++ b/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx
@@ -12,11 +12,11 @@ tileShorthand:
-Tables are a popular way of displaying data in New Relic applications. For example, with the chart builder you can create tables from NRQL queries.
+Tables are a popular way of displaying data in New Relic applications. For example, with the [chart builder](https://docs.newrelic.com/docs/chart-builder/use-chart-builder/get-started/introduction-chart-builder) you can create tables from [NRQL queries](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql).
Whether you need to have more control over tables or you're importing third-party data, you can build your own tables into your New Relic One application.
-In this guide, you are going to build a sample table using various components of the NR1 library.
+In this guide, you are going to build a sample table using various components of the _NR1_ library.
@@ -78,11 +78,11 @@ nr1 nerdpack:serve # Serve the demo app locally
Open [one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local) in your browser. You should see a **Create a table** button in your launcher: That's the demo application you are going to work on. Go ahead and select it.
-
+
Have a good look at the demo app: There is a `TableChart` on the left side named **Transaction Overview**, with an `AreaChart` next to it. You are going to use `Table` components to add a new table in the second row.
-
+
@@ -158,7 +158,7 @@ Since you don't know how many rows you'll need, your best bet is to call a funct
Take a look at the application running in New Relic One: you should see something similar to the screenshot below.
-
+
@@ -205,7 +205,7 @@ Notice that [`EntityTitleTableRowCell`](https://developer.newrelic.com/client-si
Time to give your table a second look: The cell components you've added take care of properly formatting the data.
-
+
@@ -256,7 +256,7 @@ The `TableRow` actions property defines a set of actions that appear when the us
Go back to your application and try hovering over any of the rows: Notice how the two available actions appear. When you click them, a function triggers with the selected row data as an argument, and an alert displays in your browser.
-
+
diff --git a/src/markdown-pages/build-apps/map-pageviews-by-region.mdx b/src/markdown-pages/build-apps/map-pageviews-by-region.mdx
index 1a6ae082c..6ed0a8814 100644
--- a/src/markdown-pages/build-apps/map-pageviews-by-region.mdx
+++ b/src/markdown-pages/build-apps/map-pageviews-by-region.mdx
@@ -39,7 +39,7 @@ To add your data to a world map in the second half of the guide:
The following are some terms used in this guide:
* New Relic application: The finished product where data is rendered in New Relic One. This might look like a series of interactive charts or a map of the world.
-* Nerdpack: New Relic's standard collection of JavaScript, JSON, CSS, and other files that control the functionality and look of your application. For more information, see [Nerdpack file structure](/reference/nerdpack-file-structure).
+* Nerdpack: New Relic's standard collection of JavaScript, JSON, CSS, and other files that control the functionality and look of your application. For more information, see [Nerdpack file structure](/explore-docs/nerdpack-file-structure).
* Launcher: The button on New Relic One that launches your application.
* Nerdlets: New Relic React components used to build your application. The three default files are `index.js`, `nr1.json`, and `styles.scss`, but you can customize and add your own.
@@ -90,7 +90,7 @@ cd pageviews-app && nr1 nerdpack:serve
## Review your app files and view your app locally
1. Navigate to your `pageviews-app` to see how it's structured.
-It contains a launcher folder, where you can customize the description and icon that will be displayed on the app's launcher in New Relic One. It also contains `nerdlets`, which each contain three default files: `index.js`, `nr1.json`, and `styles.scss`. You'll edit some of these files as part of this guide. For more information, see [Nerdpack file structure](/reference/nerdpack-file-structure.mdx).
+It contains a launcher folder, where you can customize the description and icon that will be displayed on the app's launcher in New Relic One. It also contains `nerdlets`, which each contain three default files: `index.js`, `nr1.json`, and `styles.scss`. You'll edit some of these files as part of this guide. For more information, see [Nerdpack file structure](/explore-docs/nerdpack-file-structure.mdx).
2. Now in your browser, open `https://one.newrelic.com/?nerdpacks=local` to see the `pageview-apps` Nerdpack that you served up.
diff --git a/src/markdown-pages/build-apps/publish-deploy.mdx b/src/markdown-pages/build-apps/publish-deploy.mdx
index d3b696d80..14e46490a 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/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx new file mode 100644 index 000000000..17c9a69b4 --- /dev/null +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -0,0 +1,106 @@ +--- +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' +--- + +
+
+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
+You must have:
+
+- 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 + +
+
+
+
+## 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.
+
+
+
+
+
+## Start building
+
+If you're ready to code, `cd` to your Nerdpack and get started.
+
+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.
+
+
+
+
+
+
+## Contributing to developer.newrelic.com
+
+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.
+
+
+
+
+
+## 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**.
+
+
+
+
+
+
+## Make a feature or documentation request
+
+- 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.
+
+
+
+
+
+## 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.
+
+
+
+
+
+
+### 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
diff --git a/src/markdown-pages/collect-data/add-custom-attributes.mdx b/src/markdown-pages/collect-data/add-custom-attributes.mdx
index 4cb7537dc..fc6dfa1fc 100644
--- a/src/markdown-pages/collect-data/add-custom-attributes.mdx
+++ b/src/markdown-pages/collect-data/add-custom-attributes.mdx
@@ -35,7 +35,7 @@ Once added, you can run a NRQL query that uses the 'userid' custom attribute.
Once you have added a custom attribute like 'userid', you can use it to filter and facet your NRQL queries.
-
+
```
-- Get a count of errors experienced by a single filtered userid faceted by date and error message
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.
-
-
-
-```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.)
diff --git a/src/markdown-pages/collect-data/custom-events.mdx b/src/markdown-pages/collect-data/custom-events.mdx
index 129ec35ea..17d9888be 100644
--- a/src/markdown-pages/collect-data/custom-events.mdx
+++ b/src/markdown-pages/collect-data/custom-events.mdx
@@ -60,7 +60,7 @@ end
_Here, a NRQL query retrieves information about the custom event, and the result can be added to a dashboard._
- + ``` SELECT count(*) FROM CLIRun FACET errors SINCE 1 week ago diff --git a/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx b/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx index 63760741d..74a6813ac 100644 --- a/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx +++ b/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx @@ -15,11 +15,13 @@ NerdGraph is New Relic's [GraphQL](https://graphql.org/) API. It allows you to g With NerdGraph API Explorer you don't need to know the query format: using the Query Builder you can browse our entire graph and compose queries just by selecting the items you want and filling out their required values. + +
## Before you begin
-Go to [api.newrelic.com/graphiql](https://api.newrelic.com/graphiql) and log in using your New Relic user ID and password: the NerdGraph API Explorer loads up.
+Go to [api.newrelic.com/graphiql](https://api.newrelic.com/graphiql) and log in using your New Relic user ID and password: the NerdGraph API Explorer loads up.
Make sure you have a valid New Relic API key. You can create one directly from the NerdGraph API Explorer.
@@ -95,7 +97,7 @@ Ready for your first mutation?
In this case, you're trying to add a custom tag to an entity. Notice that the editor complains if you don't select `errors`: mutations must have a way of telling you how the operation performed in the backend (failed requests result in null responses).
-
+
Unlike REST, GraphQL APIs like NerdGraph can return partial responses. For example, if you try adding tags to multiple entities, some mutations can fail and others succeed; all is logged in the GraphQL response you get.
diff --git a/src/markdown-pages/collect-data/index.mdx b/src/markdown-pages/collect-data/index.mdx
index a1f148c1c..a17f48c23 100644
--- a/src/markdown-pages/collect-data/index.mdx
+++ b/src/markdown-pages/collect-data/index.mdx
@@ -7,7 +7,7 @@ description: ''
-Through our agents or APIs, New Relic makes it easy to collect data from any source. The guides in this section provide strategies for collecting and querying data for use in your existing New Relic implmentation, or in apps you build. The opportunities are endless.
+Through our agents or APIs, New Relic makes it easy to collect data from any source. The guides in this section provide strategies for collecting and querying data for use in your existing New Relic implementation, or in apps you build. The opportunities are endless.
diff --git a/src/markdown-pages/collect-data/query-data-nrql.mdx b/src/markdown-pages/collect-data/query-data-nrql.mdx
index 71bf62ac4..7adedc8d8 100644
--- a/src/markdown-pages/collect-data/query-data-nrql.mdx
+++ b/src/markdown-pages/collect-data/query-data-nrql.mdx
@@ -23,7 +23,7 @@ With NRQL, you can query any of the default event data being reported by New Rel
NRQL syntax is comparable to ANSI SQL.
-[Learn mroe about NRQL syntax](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/using-nrql/introduction-nrql)
+[Learn more about NRQL syntax](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/using-nrql/introduction-nrql)
```sql copy=false
SELECT function(attribute) [AS 'label'][, ...]
@@ -76,7 +76,7 @@ SELECT funnel(session,
Using NRQL, you can customize your New Relic experience by crafting diverse dashboards in New Relic One that show your data from multiple angles. These dashboards can be shared with technical and non-technical stakeholders alike.
-
+
diff --git a/src/markdown-pages/explore-docs/index.mdx b/src/markdown-pages/explore-docs/index.mdx
deleted file mode 100644
index 5c83ffeab..000000000
--- a/src/markdown-pages/explore-docs/index.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
----
-path: '/explore-docs'
-title: 'Explore docs'
-template: 'OverviewTemplate'
-description: ''
----
-
-
-
-Whether you're building new apps, or adding a NerdGraph query to your existing New Relic setup, we have the command and API reference info you need.
-
-
-
-
diff --git a/src/markdown-pages/explore-docs/intro-to-sdk.mdx b/src/markdown-pages/explore-docs/intro-to-sdk.mdx
index 1f8f33641..48494d981 100644
--- a/src/markdown-pages/explore-docs/intro-to-sdk.mdx
+++ b/src/markdown-pages/explore-docs/intro-to-sdk.mdx
@@ -1,5 +1,5 @@
---
-path: '/reference/intro-to-sdk'
+path: '/explore-docs/intro-to-sdk'
title: 'Intro to New Relic One API components'
template: 'GuideTemplate'
description: 'Intro to New Relic One API components'
@@ -13,111 +13,82 @@ redirects:
To help you build a New Relic One application we provide you with the New Relic One SDK.
-This page will give you an introduction to the types of API calls and components in the SDK.
-The SDK provides everything you need to build your Nerdlets, create visualizations, and fetch
-data (New Relic or third-party). These components are located in the Node module package named `nr1`,
-which you get when you install [the NR1 CLI](TODOneedURL).
+Here we give you an introduction to the types of API calls and components in the SDK. The SDK provides everything you need to build your Nerdlets, create visualizations, and fetch data (New Relic or third-party).
-## SDK components
+## Components of the New Relic SDK
-The `nr1` components can be divided into several categories:
+SDK components are located in the Node module package named `nr1`, which you get when you install [the NR1 CLI](/explore-docs/nr1-cli). The `nr1` components can be divided into several categories:
-- UI components
-- Chart components
-- Query and storage components
-- Platform APIs
+- UI components
+- Chart components
+- Query and storage components
+- Platform APIs
-## UI components
+### UI components
The **UI components** category of the SDK contains React UI components, including:
-- Text components: These components provide basic font and heading elements.
-These include [`HeadingText`](../components/heading-text)
-and [`BlockText`](../components/block-text).
+- **Text components**: These components provide basic font and heading elements. These include [`HeadingText`](../components/heading-text) and [`BlockText`](../components/block-text).
-- Layout components: These components give you control over the layout, and help you build complex layout designs without having to deal with the CSS. Layout components include:
+- **Layout components**: These components give you control over the layout, and help you build complex layout designs without having to deal with the CSS. Layout components include:
- [`Grid`](../components/grid)
and [`GridItem`:](../components/grid-item)
- for organizing more complex, larger scale page content in rows and columns.
+ for organizing more complex, larger scale page content in rows and columns
- [`Stack`](../components/stack)
and [`StackItem`](../components/stack-item):
- for organizing simpler, smaller scale page content (in column or row).
+ for organizing simpler, smaller scale page content (in column or row)
- [`Tabs`](../components/tabs)
and [`TabsItem`](../components/tabs-item):
- group various related pieces of content into separate hideable sections.
+ group various related pieces of content into separate hideable sections
- [`List`](../components/list)
and [`ListItem`](../components/list-item):
- for providing a basic skeleton of virtualized lists.
+ for providing a basic skeleton of virtualized lists
- [`Card`](../components/card),
[`CardHeader`](../components/card-header) and [`CardBody`](../components/card-body)
- : used to group similar concepts and tasks together.
-
-- Form components: These components provide the basic building blocks to interact with the UI.
-These include [`Button`](../components/button),
-[`TextField`](../components/text-field),
-[`Dropdown`](../components/dropdown)
-and [`DropdownItem`](../components/dropdown-item),
- [`Checkbox`](../components/checkbox),
- [`RadioGroup`](../components/radio-group),
- [`Radio`](../components/radio),
- and [`Checkbox`](../components/checkbox).
-
-- Feedback components: These components are used to provide feedback to users about actions they've taken.
-These include: [`Spinner`](../components/spinner)
-and [`Toast`](../components/toast).
-
-- Overlaid components: These components are used to display contextual information and
-options in the form of an additional child view that appears above other content on screen
-when an action or event is triggered. They can either require user interaction (like modals),
-or be augmenting (like a tooltip). These include: [`Modal`](../components/modal)
-and [`Tooltip`](../components/tooltip).
-
-Note: components suffixed with `Item` can only operate as direct children of that
+ : used to group similar concepts and tasks together
+
+- **Form components**: These components provide the basic building blocks to interact with the UI. These include [`Button`](../components/button), [`TextField`](../components/text-field), [`Dropdown`](../components/dropdown) and [`DropdownItem`](../components/dropdown-item), [`Checkbox`](../components/checkbox), [`RadioGroup`](../components/radio-group), [`Radio`](../components/radio), and [`Checkbox`](../components/checkbox).
+
+- **Feedback components**: These components are used to provide feedback to users about actions they have taken. These include: [`Spinner`](../components/spinner)and [`Toast`](../components/toast).
+
+- **Overlaid components**: These components are used to display contextual information and options in the form of an additional child view that appears above other content on screen when an action or event is triggered. They can either require user interaction (like modals), or be augmenting (like a tooltip). These include: [`Modal`](../components/modal) and [`Tooltip`](../components/tooltip).
+
+> Components suffixed with `Item` can only operate as direct children of that
name without the suffix. For example: [`GridItem`](../components/grid-item)
should only be found as a child of [`Grid`](../components/grid).
-## Chart components
+### Chart components
-The **Charts** category of New Relic One SDK
-contains components representing different types of charts. The [`ChartGroup`](../components/chart-group)
+The **Charts** category of New Relic One SDK contains components representing different types of charts. The [`ChartGroup`](../components/chart-group)
component helps a group of related charts share data and be aligned.
Some chart components can perform NRQL queries on their own; some accept a customized set of data.
-## Query and storage components
+### Query and storage components
The **Query components** category of the New Relic One SDK contains components for fetching and storing New Relic data.
-The main way to fetch New Relic data is with NerdGraph, our GraphQL endpoint.
-This can be queried using [`NerdGraphQuery`](../components/nerd-graph-query).
-To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see
-[Queries and mutations](TODOneedURL).
+The main way to fetch New Relic data is with NerdGraph, our GraphQL endpoint. This can be queried using [`NerdGraphQuery`](../components/nerd-graph-query). To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see [Queries and mutations](../collect-data/get-started-nerdgraph-api-explorer).
-We also provide some storage for storing small data sets, such as configuration settings data, or user-specific data.
-For more on this, see [NerdStorage](TODOneedURL).
+We also provide storage for storing small data sets, such as configuration settings data, or user-specific data. For more on this, see [NerdStorage](/explore-docs/nerdstorage).
-## Platform APIs
+### Platform APIs
-The Platform API components of the New Relic One SDK
-enable your application to interact with different parts of the New Relic One platform,
-by reading and writing state from and to the URL, setting the configuration, etc. They can be divided into these categories:
+The Platform API components of the New Relic One SDK enable your application to interact with different parts of the New Relic One platform, by reading and writing state from and to the URL, setting the configuration, etc. They can be divided into these categories:
- [`PlatformStateContext`](../components/platform-state-context): provides read access to the platform URL state variables.
Example: `timeRange` in the time picker.
-
- [`navigation`](../api/navigation): an object that allows programmatic manipulation of the navigation
in New Relic One. Example: opening a new Nerdlet.
-
- [`NerdletStateContext`](..components/nerdlet-state-context): provides read access to the Nerdlet URL state variables.
Example: an `entityGuid` in the [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts).
-
- [`nerdlet`](../api/navigation): an object that provides write access to the Nerdlet URL state.
## Related info
diff --git a/src/markdown-pages/explore-docs/nerdpack-file-structure.mdx b/src/markdown-pages/explore-docs/nerdpack-file-structure.mdx
index 1d12d3cc7..59e1e3add 100644
--- a/src/markdown-pages/explore-docs/nerdpack-file-structure.mdx
+++ b/src/markdown-pages/explore-docs/nerdpack-file-structure.mdx
@@ -1,10 +1,10 @@
---
-path: '/reference/nerdpack-file-structure'
-title: 'Nerdpack File Structure'
+path: '/explore-docs/nerdpack-file-structure'
+title: 'Nerdpack file structure'
template: 'GuideTemplate'
description: 'An overview of the Nerdpack File Structure'
tileShorthand:
- title: 'Nerdpack File Structure'
+ title: 'Nerdpack file structure'
description: 'Learn the structure of Nerdpacks'
---
@@ -12,15 +12,13 @@ tileShorthand:
A [New Relic One application](https://developer.newrelic.com/use-cases/build-new-relic-one-applications
"Link opens in a new window.") is represented by a **Nerdpack** folder, which can include one or more **Nerdlet** files,
-and (optionally) one or more **launcher** files. This document explains:
+and (optionally) one or more **launcher** files. Here we explain:
-- The file structure for a [Nerdpack](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#file-structure),
-a [Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-files)
-and a [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file)
-- How to [link a launcher file to a Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-json)
-- How to [link your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json)
+- The file structure for a Nerdpack, a Nerdlet, and a launcher
+- How to link a launcher file to a Nerdlet
+- How to link your application with a monitored entity
-For basic component definitions, see our [component reference](/reference/intro-to-sdk).
+For basic component definitions, see our [component reference](/explore-docs/intro-to-sdk).
@@ -28,27 +26,51 @@ For basic component definitions, see our [component reference](/reference/intro-
There are two ways to generate a Nerdpack template:
-- Generate Nerdpack. Use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and select `Nerdpack` to create a Nerdpack template that includes a Nerdlet and a launcher.
-- Generate Nerdlet or launcher individually. You can use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and choose to select either a Nerdlet or launcher. This may be useful when adding Nerdlets to an existing Nerdpack.
+- **Generate a Nerdpack**: Use the [New Relic One CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and select `Nerdpack` to create a Nerdpack template that includes a Nerdlet and a launcher.
+- **Generate Nerdlet or launcher individually**: Use the [New Relic One CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and choose either a Nerdlet or a launcher. This may be useful when adding Nerdlets to an existing Nerdpack.
-For a lesson on generating and connecting Nerdpack components, see [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab0/INSTRUCTIONS.md "Link opens in a new window.") .
+For documentation on generating and connecting Nerdpack components, see [our workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab0/INSTRUCTIONS.md "Link opens in a new window.").
## Nerdpack file structure
-When you generate a Nerdpack template using the CLI `nr1 create` command, it has this file structure:
-
-
-
+When you generate a Nerdpack template using the `nr1 create` command, it has the following file structure:
+
+```bash copy=false lineNumbers=false
+my-nerdlet
+├── README.md
+├── launchers
+│ └── my-nerdlet-launcher
+│ ├── icon.png
+│ └── nr1.json
+├── nerdlets
+│ └── my-nerdlet-nerdlet
+│ ├── index.js
+│ ├── nr1.json
+│ └── styles.scss
+├── node_modules
+│ ├── js-tokens
+│ ├── loose-envify
+│ ├── object-assign
+│ ├── prop-types
+│ ├── react
+│ ├── react-dom
+│ ├── react-is
+│ └── scheduler
+├── nr1.json
+├── package-lock.json
+└── package.json
+```
+
## Nerdlet file structure -A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files: +A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files, `index.js`, `nr1.json`, and `styles.scss`. Here is what the default files look like after being generated using the `nr1 create` command: ### `index.js` -Here is what the default file looks like when a Nerdlet is generated with the CLI `nr1 create`: +The JavaScript code of the Nerdlet. - ```jsx +```jsx copy=false lineNumbers=false import React from 'react'; export default class MyAwesomeNerdpack extends React.Component { @@ -56,13 +78,13 @@ export default class MyAwesomeNerdpack extends React.Component { return
Besides using the [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file) as the access point for your application, you can also associate the application with -a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts). -To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`. -In the following example, the Nerdlet has been associated with all New Relic Browser-monitored -applications and will appear under the **Monitor** UI category : +a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts). To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`. + +In the following example, the Nerdlet has been associated with all New Relic Browser-monitored applications and will appear under the **Monitor** UI category : -```json +```json copy=false lineNumbers=false { "schemaType": "NERDLET", "id": "my-nerdlet", @@ -88,24 +110,52 @@ applications and will appear under the **Monitor** UI category : "actionCategory": "monitor" } ``` +
+ To see this application in the UI, you would go to the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts), select Browser applications, and select a monitored application. ### `styles.scss` -The file is provided for CSS styles (Sass SCSS syntax). - -```css -/* this is an empty file you can use customize to style your nerdlet. */ -``` +An empty SCSS file for styling your application. ### `icon.png` - + The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/) home page when an application is deployed. +## Launcher file structure + +When an application with a launcher file has been deployed, its launcher is located on the New Relic One home page ([one.newrelic.com](http://one.newrelic.com/ "Link opens in a new window.") ). Note that: + +- A launcher is not required; as an alternative to using a launcher, you can [associate your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json). +- An application can have more than one launcher; this may be desired for an application with multiple Nerdlets. + +After generating a launcher using the `nr1 create` command, its folder contains two files: + +### `nr1.json` + +The configuration file. +```json copy=false lineNumbers=false +{ + "schemaType": "LAUNCHER", + "id": "my-awesome-nerdpack-launcher", + "description": "Describe me", + "displayName": "MyAwesomeNerdpack", + "rootNerdletId": "my-awesome-nerdpack-nerdlet" +} +``` +
+ +To connect a launcher to a Nerdlet, the `rootNerdletId` must match the `id` in the launched Nerdlet's `nr1.json` config file. For Nerdpacks with multiple Nerdlets, this needs to be done only for the first-launched Nerdlet. + +### `icon.png` + +The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/ "Link opens in a new window.") home page when an application is deployed. + ### 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) +- [Build apps](/build-apps) - start building applications +- [Intro to New Relic One API components](/explore-docs/intro-to-sdk) + diff --git a/src/markdown-pages/explore-docs/nerdstorage.mdx b/src/markdown-pages/explore-docs/nerdstorage.mdx index 0f7129934..8c06d6863 100644 --- a/src/markdown-pages/explore-docs/nerdstorage.mdx +++ b/src/markdown-pages/explore-docs/nerdstorage.mdx @@ -1,5 +1,5 @@ --- -path: '/reference/nerdstorage' +path: '/explore-docs/nerdstorage' title: 'Intro to NerdStorage' duration: '30 min' template: 'GuideTemplate' @@ -11,31 +11,27 @@ redirects: - /build-tools/new-relic-one-applications/nerdstorage --- -## Use NerdStorage in your apps +
To help you build a [New Relic One application](/use-cases/build-new-relic-one-applications), we provide you with the [New Relic One SDK](/client-side-sdk/index.html). On this page, you’ll learn how to use NerdStorage SDK components.
-NerdStorage is used to store and retrieve simple sets of data, including users' configuration settings and preferences (like favorites), or any other small data sets. This storage is unique per Nerdpack, and can't be shared with any other Nerdpack.
-This type of storage can be broken down into three conceptual categories:
+
-- User storage: Data is attached to a particular user. If you’re authenticated as the user the data is attached to, you’ll be able to read and write.
+## Use NerdStorage in your apps
-- Account storage: Data is attached to a particular account. If you’re authenticated and can access the account, you’ll be able to read and write to account scoped NerdStorage. Note, visibility of account scoped NerdStorage data is also determined by master/sub-account rules. If a user has access to the master account, then they will also have access to NerdStorage data in all sub-accounts.
+NerdStorage is used to store and retrieve simple sets of data, including users's configuration settings and preferences (like favorites), or any other small data sets. This storage is unique per Nerdpack, and can't be shared with any other Nerdpack.
-- Entity storage: Data is attached to a particular entity. If you’re able to see the corresponding entity (meaning that they belong to an account containing the entity), you’ll be able to read and write.
+NerdStorage can be classified into three categories:
+- **User storage**: Data that is attached to a particular user. If you’re authenticated as the user the data is attached to, you can read it and write it.
+- **Account storage**: Data that is attached to a particular account. If you’re authenticated and can access the account, you can read and write to account scoped NerdStorage. Visibility of account data is also determined by master/subaccount rules: If a user has access to the master account, then they also have access to data in all subaccounts.
+- **Entity storage**: Data that is attached to a particular entity. If you can see the corresponding entity, you can read and write data on that entity.
## Data model
-NerdStorage is divided into different levels:
-
-- Collections: From a Nerdpack, you can create multiple collections by giving each of them a name. Inside a collection you’ll be able to put one or more documents. You can think of a collection as a key-value storage, where each document is one of these key-value pairs. There is a limit of 1,000 collections per Nerdpack plus storage type.
-
-- Documents: A document is formed by an identifier (called ```documentId```) and a set of data associated with it. There’s a limit of 1,000 documents per collection, and 10,000 documents per Nerdpack plus storage type.
-- Data associated with a document: NerdStorage accepts any sort of data associated to a documentId, but the query and mutation components that are provided work by serializing and de-serializing JSON. Each document can have a maximum length of 64 KiB when serialized.
+You can imagine NerdStorage as a nested key-value map. Data is inside documents, which are nested inside collections:
-Conceptually, you can imagine NerdStorage as a nested key-value map:
-```shell
+```json copy=false lineNumbers=false
{
'YourNerdpackUuid': {
'collection-1': {
@@ -51,28 +47,38 @@ Conceptually, you can imagine NerdStorage as a nested key-value map:
},
}
```
+
+ +Each NerdStorage level has different properties and purpose: + +- **Collections**: From a Nerdpack, you can create multiple collections by naming each of them. Inside a collection you can put one or more documents. Think of a collection as key-value storage, where each document is a key-value pair. +- **Documents**: A document is formed by an identifier (```documentId```) and a set of data associated with it. +- **Data** associated with a document: NerdStorage accepts any sort of data associated to a ```documentId```. Query and mutation components that are provided work by serializing and deserializing JSON. + +### Limits -To access NerdStorage, you can use either raw NerdGraph queries or (more easily) the provided storage queries. +- A Nerdpack can hold up to 1,000 collections and 10,000 documents, plus storage type. +- A collection can hold up to 1,000 documents, plus storage type. +- Each document can have a maximum length of 64 KiB when serialized. ## Data access -Depending on which storage you want to access, you’ll use a different set of [SDK components](/client-side-sdk/index.html): -- User access: ```UserStorageQuery``` and ```UserStorageMutation```. -- Account access: ```AccountStorageQuery``` and ```AccountStorageMutation```. +To access NerdStorage, you can run NerdGraph queries, or use the provided storage queries. -- Entity access: ```EntityStorageQuery``` and ```EntityStorageMutation```. +Depending on which storage you want to access, you can use a different set of [SDK components](/client-side-sdk/index.html): -Each of these components can operate declaratively (i.e., as part of your React rendering methods) or imperatively (by using the static methods for ```query``` and ```mutation```). For more on this, see [Data querying and mutations](/build-tools/new-relic-one-applications/query-and-store-data). +- **User access**: ```UserStorageQuery``` and ```UserStorageMutation``` +- **Account access**: ```AccountStorageQuery``` and ```AccountStorageMutation``` +- **Entity access**: ```EntityStorageQuery``` and ```EntityStorageMutation``` -Permissions for working with NerdStorage -In order to persist changes on NerdStorage, such as creating, updating, and deleting account and entity storage, you need to have one of the following roles: +Each of these components can operate declaratively (for example, as part of your React rendering methods) or imperatively (by using the static methods for ```query``` and ```mutation```). For more information on this, see [Data querying and mutations](/build-tools/new-relic-one-applications/query-and-store-data). -- ```admin``` +### Permissions for working with NerdStorage -- ```owner``` +In order to persist changes on NerdStorage, such as creating, updating, and deleting account and entity storage, you must have one of the following roles: +- ```admin``` +- ```owner``` - ```user``` - - ```all_product_admin``` - -- ```standard_user``` +- ```standard_user``` \ No newline at end of file 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..9b95dfb6e --- /dev/null +++ b/src/markdown-pages/explore-docs/newrelic-CLI.mdx @@ -0,0 +1,46 @@ +--- +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) diff --git a/src/markdown-pages/explore-docs/nr1-cli.mdx b/src/markdown-pages/explore-docs/nr1-cli.mdx index 039338f7e..9cc540e86 100644 --- a/src/markdown-pages/explore-docs/nr1-cli.mdx +++ b/src/markdown-pages/explore-docs/nr1-cli.mdx @@ -1,5 +1,5 @@ --- -path: '/reference/nr1-cli' +path: '/explore-docs/nr1-cli' title: 'New Relic One CLI reference' template: 'GuideTemplate' description: 'An overview of the CLI to help you build, deploy, and manage New Relic apps.' @@ -54,7 +54,7 @@ This table gives descriptions and context for some of the most important CLI com | Delete CLI config | `nr1 config:delete` | Removes the value of a specific configuration. | | Update | `nr1 update` | Update to newest version of the CLI. | | Profiles | `nr1 profiles` | Controls the profile you'll be running CLI commands as. You can have more than one profile, which is helpful for executing commands on multiple New Relic accounts. For more on this, see [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab-cli/INSTRUCTIONS.md). | -| Create | `nr1 create` | Create a new component template (Nerdpack, Nerdlet, launcher, or catalog). The CLI will walk you through this process. For an explanation of the file structure, see [Nerdpack file structure](/reference/nerdpack-file-structure). | +| Create | `nr1 create` | Create a new component template (Nerdpack, Nerdlet, launcher, or catalog). The CLI will walk you through this process. For an explanation of the file structure, see [Nerdpack file structure](/explore-docs/nerdpack-file-structure). | | Clone | `nr1 nerdpack:clone` | Clone an [open source Nerdpack from our GitHub repository](/open-source/nerdpacks). | | Serve locally | `nr1 nerdpack:serve` | Serves your Nerdpack locally, which makes it visible at [one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local). For details, see [Local development](/client-side-sdk/index.html#cli/LocalDevelopment). | | Change associated accounts | `nr1 nerdpack:uuid` | Commands related to the Nerdpack's UUID (universal unique ID). This ID dictates the data a Nerdpack has access to, and who can subscribe to it. To deploy a Nerdpack you didn't make, you'll have to assign it a new UUID. For details, see [Access to data](/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions#Appaccesstodata) and [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab-cli/INSTRUCTIONS.md). | diff --git a/src/markdown-pages/explore-docs/query-and-store-data.mdx b/src/markdown-pages/explore-docs/query-and-store-data.mdx index 92f8b951e..04dfc315e 100644 --- a/src/markdown-pages/explore-docs/query-and-store-data.mdx +++ b/src/markdown-pages/explore-docs/query-and-store-data.mdx @@ -1,5 +1,5 @@ --- -path: '/reference/query-and-store-data' +path: '/explore-docs/query-and-store-data' duration: '10 min' title: 'Query and store data' template: 'GuideTemplate' @@ -13,40 +13,37 @@ redirects:
-To help you build a [New Relic One application](), we provide you with the [New Relic One SDK](). On this page, you’ll learn how to use SDK query components, which allow you to make queries and mutations via [NerdGraph](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph) (our GraphQL endpoint).
-
-Query-related React components can be identified by the `Query` suffix. Mutation-related components can be identified by the `Mutation` prefix.
+To help you build a [New Relic One application](/build-apps/build-hello-world-app), we provide you with the [New Relic One SDK](/explore-docs/intro-to-sdk). Here you can learn how to use the SDK query components, which allow you to make queries and mutations via [NerdGraph](/collect-data/get-started-nerdgraph-api-explorer), our GraphQL endpoint.
-## Structure
-
-Our data components are based on [React Apollo](https://www.apollographql.com/docs/react/). The most basic component is `NerdGraphQuery`, which accepts any GraphQL (or GraphQL AST generated by the [`graphql-tag` library](https://github.com/apollographql/graphql-tag) as the query parameter, and a set of query variables passed as `variables`.
+> Query-related React components can be identified by the `Query` suffix. Mutation-related components can be identified by the `Mutation` prefix.
-Over this query, we have created an additional set of queries, which can be divided into four groups:
+## Components overview
-- User queries: These allow you to query the current user and its associated accounts. Components in this category: `UserStorageQuery` and `AccountsQuery`.
-- Entities queries: Because [New Relic One is entity-centric](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts), we use queries to make access to your entities easier. You can count, search, list, query, and favorite them. Components in this category: `EntityCountQuery`, `EntitySearchQuery`, `EntitiesByDomainTypeQuery`, `EntitiesByGuidsQuery`, `EntityByGuidQuery`, `EntityByNameQuery`.
-- Storage queries: New Relic One provides a simple storage mechanism that we call [NerdStorage](). This can be used by Nerdpack creators to store application configuration setting data, user-specific data, and other small pieces of data. Components in this category: `UserStorageQuery`, `AccountStorageQuery`, `EntityStorageQuery`, `UserStorageMutation`, `AccountStorageMutation`, and `EntityStorageMutation`. For details, see [NerdStorage]().
+Our data components are based on [React Apollo](https://www.apollographql.com/docs/react/). The most basic component is `NerdGraphQuery`, which accepts any GraphQL (or GraphQL AST generated by the [`graphql-tag` library](https://github.com/apollographql/graphql-tag) as the query parameter, and a set of query variables passed as `variables`. Over this query, we have created an additional set of queries, which can be divided into four groups:
-NRQL query: To be able to query your New Relic data via [NRQL](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql) (New Relic Query Language), we provide a `NrqlQuery` component. This component can return data in different formats, so that you can use it for charting and not only for querying.
+- **User queries**: These allow you to query the current user and its associated accounts. Components in this category: `UserStorageQuery` and `AccountsQuery`.
+- **Entities queries**: Because [New Relic One is entity-centric](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts), we use queries to make access to your entities easier. You can count, search, list, query, and favorite them. Components in this category: `EntityCountQuery`, `EntitySearchQuery`, `EntitiesByDomainTypeQuery`, `EntitiesByGuidsQuery`, `EntityByGuidQuery`, `EntityByNameQuery`.
+- **Storage queries**: New Relic One provides a simple storage mechanism that we call [NerdStorage](). This can be used by Nerdpack creators to store application configuration setting data, user-specific data, and other small pieces of data. Components in this category: `UserStorageQuery`, `AccountStorageQuery`, `EntityStorageQuery`, `UserStorageMutation`, `AccountStorageMutation`, and `EntityStorageMutation`. For details, see [NerdStorage]().
+- **NRQL queries**: To be able to query your New Relic data via [NRQL](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql) (New Relic Query Language), we provide a `NrqlQuery` component. This component can return data in different formats, so that you can use it for charting and not only for querying.
-### Query Components
+## Query components
-All query components accept as a children prop a function where the different statuses will be passed. This callback will receive an object with the following properties:
+All query components accept a function as a children prop where the different statuses can be passed. This callback receives an object with the following properties:
- `loading`: Boolean that is set to true when data fetching is happening. Our components use the `cache-and-network` strategy, meaning that after the data has loaded, subsequent data reloads might be triggered first with stale data, then refreshed when the most recent data has arrived.
- `data`: Root property where the data requested is retrieved. The structure matches a root structure based on the NerdGraph schema. This is true even for highly nested data structures, which means you’ll have to traverse down to find the desired data.
- `error`: Contains an `Error` instance when the query fails. Set to `undefined` when data is loading or the fetch was successful.
- `fetchMore`: Callback function that can be called when the query is being loaded in chunks. The function will only be present when it’s feasible to do so, more data is available, and no `fetchMore` has already been triggered. Data is loaded in batches of 200 by default. Other components provided by the platform (like the `Dropdown` or the `List`) are capable of accepting `fetchMore`, meaning you can combine them easily.
-### Mutation Components
+## Mutation components
- Mutation components also accept, like the query ones, a children as a function. The mutation can be pre-configured at the component level, and a function will be passed back that you can use in your component.
+Mutation components also accept a children as a function, like the query ones. The mutation can be preconfigured at the component level, and a function is passed back that you can use in your component.
- This is the standard React Apollo approach for performing mutations, but you might find it easier to use our static `mutation` method added to the component. More on this topic below.
+This is the standard React Apollo approach for performing mutations, but you might find it easier to use our static `mutation` method added to the component. More on this topic below.
-### Static Methods
+## Static methods
All of the described components also expose a static method so that they can be used imperatively rather than declaratively. All `Query` components have a static `Query` method, and all `Mutation` components have a `mutation` method. These static methods accept the same props as their query component, but passed as an object. For example:
@@ -95,6 +92,6 @@ Similarly, a mutation can happen either way; either declaratively or imperativel
- `NERD_GRAPH`: Returns the format in which it arrives from NerdGraph.
- `RAW`: The format exposed by default in Insights and dashboards when being plotted as JSON. This format is useful if you have a pre-existing script in this format that you're willing to migrate to or incorporate with.
-- `CHART`: The format used by the charting engine that we also expose. You can find a more detailed explanation of how to manipulate this format in the [guide to chart components](), and some examples.
+- `CHART`: The format used by the charting engine that we also expose. You can find a more detailed explanation of how to manipulate this format in the [guide to chart components](/components), and some examples.
If you are willing to push data, we currently do not expose `NrqlMutation`. To do that, see the [Event API]() for how to add custom events.
diff --git a/src/pages/developer-champion.js b/src/pages/developer-champion.js
index db012687d..106ec977e 100644
--- a/src/pages/developer-champion.js
+++ b/src/pages/developer-champion.js
@@ -2,6 +2,7 @@ import React from 'react';
import cx from 'classnames';
import Layout from '../components/Layout';
import SEO from '../components/Seo';
+import Button from '../components/Button';
import PageTitle from '../components/PageTitle';
import ExternalLink from '../components/ExternalLink';
import FeatherIcon from '../components/FeatherIcon';
@@ -21,12 +22,12 @@ const DeveloperChampionPage = () => {
-
@@ -66,29 +67,29 @@ const DeveloperChampionPage = () => {
-
-);
-
-export default Jumbotron;
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 31c2c48f5..f18c11621 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -13,14 +13,14 @@
width: 100%;
@media screen and (max-width: 760px) {
- grid-template-columns: 1fr;
+ grid-template-columns: minmax(0, 1fr);
}
}
.contentContainer {
display: flex;
flex-direction: column;
- padding: 2rem;
+ margin: 2rem;
}
.sidebar {
diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
index 419085090..16f64d274 100644
--- a/src/components/MobileHeader.module.scss
+++ b/src/components/MobileHeader.module.scss
@@ -2,6 +2,8 @@
position: relative;
border-bottom: 1px solid var(--color-neutrals-100);
padding: 0 2rem;
+
+ width: 100vw;
}
.menuBar {
@@ -20,7 +22,6 @@
font-size: 1rem;
padding: 1.5rem 3rem;
position: absolute;
- width: 100vw;
height: calc(
100vh - (var(--height-mobile-nav-bar) + var(--height-global-header))
);
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index 2a11f626d..d9e7357f1 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -86,7 +86,7 @@ button.navLink {
}
.isCurrentPage {
- font-weight: bold;
+ font-weight: bold !important;
}
.filterOn {
diff --git a/src/components/styles.scss b/src/components/styles.scss
index acddb5900..e8276e9f4 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -131,29 +131,6 @@ select {
box-sizing: border-box;
}
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- background-color: var(--primary-button-background-color);
- padding: 10px 16px;
- font-size: 14px;
- font-weight: 600;
- border-radius: 3px;
- border: 1px solid var(--primary-button-color);
- font-family: var(--primary-font-family);
- cursor: pointer;
-
- &.secondary {
- background-color: var(--secondary-button-background-color);
- color: var(--secondary-button-text-color);
- }
-}
-
ul {
margin: 0;
padding-left: 2rem;
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index f317466fc..28d9f0295 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,32 +78,39 @@
{
"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"
}
]
},
{
"displayName": "Explore docs",
- "url": "/explore-docs",
"children": [
{
"displayName": "New Relic One CLI",
- "url": "/reference/nr1-cli"
+ "url": "/explore-docs/nr1-cli"
+ },
+ {
+ "displayName": "New Relic CLI",
+ "url": "/explore-docs/newrelic-cli"
},
{
"displayName": "Nerdpack file structure",
- "url": "/reference/nerdpack-file-structure"
+ "url": "/explore-docs/nerdpack-file-structure"
},
{
"displayName": "Intro to New Relic One API components",
- "url": "/reference/intro-to-sdk"
+ "url": "/explore-docs/intro-to-sdk"
},
{
"displayName": "Intro to Nerdstorage",
- "url": "/reference/nerdstorage"
+ "url": "/explore-docs/nerdstorage"
},
{
"displayName": "Query and store data",
- "url": "/reference/query-and-store-data"
+ "url": "/explore-docs/query-and-store-data"
},
{
"displayName": "Component library",
diff --git a/src/images/add-custom-attributes/UC2-sec1-query.png b/src/images/add-custom-attributes/UC2-sec1-query.png
new file mode 100644
index 000000000..5cb007b33
Binary files /dev/null and b/src/images/add-custom-attributes/UC2-sec1-query.png differ
diff --git a/src/images/developer-champion/dev-champion-badge.png b/src/images/developer-champion/dev-champion-badge.png
new file mode 100644
index 000000000..5d495acdc
Binary files /dev/null and b/src/images/developer-champion/dev-champion-badge.png differ
diff --git a/src/images/nerdpack-file-structure/nerdpack-file-structure.png b/src/images/nerdpack-file-structure/nerdpack-file-structure.png
new file mode 100644
index 000000000..e2822ffde
Binary files /dev/null and b/src/images/nerdpack-file-structure/nerdpack-file-structure.png differ
diff --git a/src/markdown-pages/automate-workflows/5-min-tag-resources.mdx b/src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx
similarity index 99%
rename from src/markdown-pages/automate-workflows/5-min-tag-resources.mdx
rename to src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx
index 0c4a79842..8c52ec4be 100644
--- a/src/markdown-pages/automate-workflows/5-min-tag-resources.mdx
+++ b/src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx
@@ -1,5 +1,5 @@
---
-path: '/guides/5-min-tag-resources'
+path: '/automate-workflows/5-mins-tag-resources'
duration: '5 min'
title: 'Quickly tag a set of resources'
template: 'GuideTemplate'
diff --git a/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx b/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
index 5d47c20ed..127036858 100644
--- a/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
+++ b/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
@@ -11,7 +11,7 @@ This guide steps you through the process of adding the NerdGraphQuery component
NerdGraph is New Relic's GraphQL implementation. GraphQL has some key differences when compared to REST:
-* The client, not the server, determines what data is returned.
+* The client, not the server, determines what data is returned.
* You can easily collect data from multiple sources. For example, in a single New Relic query, you can get account information, infrastructure data, and issue a NRQL request.
Create a free account to get started
-
-
-
- Sign in to New Relic One
-
-
-
- Create a new API key
-
-
-
- Download for other platforms
-
-
- @@ -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/build-apps/set-up-dev-env.mdx b/src/markdown-pages/build-apps/set-up-dev-env.mdx new file mode 100644 index 000000000..17c9a69b4 --- /dev/null +++ b/src/markdown-pages/build-apps/set-up-dev-env.mdx @@ -0,0 +1,106 @@ +--- +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' +--- + +
+ +## Prepare to build or modify apps + +
- + ``` SELECT count(*) FROM CLIRun FACET errors SINCE 1 week ago diff --git a/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx b/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx index 63760741d..74a6813ac 100644 --- a/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx +++ b/src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx @@ -15,11 +15,13 @@ NerdGraph is New Relic's [GraphQL](https://graphql.org/) API. It allows you to g With NerdGraph API Explorer you don't need to know the query format: using the Query Builder you can browse our entire graph and compose queries just by selecting the items you want and filling out their required values. + +
## Nerdlet file structure -A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files: +A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files, `index.js`, `nr1.json`, and `styles.scss`. Here is what the default files look like after being generated using the `nr1 create` command: ### `index.js` -Here is what the default file looks like when a Nerdlet is generated with the CLI `nr1 create`: +The JavaScript code of the Nerdlet. - ```jsx +```jsx copy=false lineNumbers=false import React from 'react'; export default class MyAwesomeNerdpack extends React.Component { @@ -56,13 +78,13 @@ export default class MyAwesomeNerdpack extends React.Component { return
Hello, my-awesome-nerdpack Nerdlet!
} } - ``` +``` ### `nr1.json` -Here is the default file generated by the CLI `nr1 create` command: +The Nerdlet configuration file. -```json +```json copy=false lineNumbers=false { "schemaType": "NERDLET", "id": "my-awesome-nerdpack-nerdlet", @@ -70,15 +92,15 @@ Here is the default file generated by the CLI `nr1 create` command: "displayName": "MyAwesomeNerdpack" } ``` +Besides using the [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file) as the access point for your application, you can also associate the application with -a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts). -To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`. -In the following example, the Nerdlet has been associated with all New Relic Browser-monitored -applications and will appear under the **Monitor** UI category : +a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts). To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`. + +In the following example, the Nerdlet has been associated with all New Relic Browser-monitored applications and will appear under the **Monitor** UI category : -```json +```json copy=false lineNumbers=false { "schemaType": "NERDLET", "id": "my-nerdlet", @@ -88,24 +110,52 @@ applications and will appear under the **Monitor** UI category : "actionCategory": "monitor" } ``` +
+ To see this application in the UI, you would go to the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts), select Browser applications, and select a monitored application. ### `styles.scss` -The file is provided for CSS styles (Sass SCSS syntax). - -```css -/* this is an empty file you can use customize to style your nerdlet. */ -``` +An empty SCSS file for styling your application. ### `icon.png` - + The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/) home page when an application is deployed. +## Launcher file structure + +When an application with a launcher file has been deployed, its launcher is located on the New Relic One home page ([one.newrelic.com](http://one.newrelic.com/ "Link opens in a new window.") ). Note that: + +- A launcher is not required; as an alternative to using a launcher, you can [associate your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json). +- An application can have more than one launcher; this may be desired for an application with multiple Nerdlets. + +After generating a launcher using the `nr1 create` command, its folder contains two files: + +### `nr1.json` + +The configuration file. +```json copy=false lineNumbers=false +{ + "schemaType": "LAUNCHER", + "id": "my-awesome-nerdpack-launcher", + "description": "Describe me", + "displayName": "MyAwesomeNerdpack", + "rootNerdletId": "my-awesome-nerdpack-nerdlet" +} +``` +
+ +To connect a launcher to a Nerdlet, the `rootNerdletId` must match the `id` in the launched Nerdlet's `nr1.json` config file. For Nerdpacks with multiple Nerdlets, this needs to be done only for the first-launched Nerdlet. + +### `icon.png` + +The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/ "Link opens in a new window.") home page when an application is deployed. + ### 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) +- [Build apps](/build-apps) - start building applications +- [Intro to New Relic One API components](/explore-docs/intro-to-sdk) + diff --git a/src/markdown-pages/explore-docs/nerdstorage.mdx b/src/markdown-pages/explore-docs/nerdstorage.mdx index 0f7129934..8c06d6863 100644 --- a/src/markdown-pages/explore-docs/nerdstorage.mdx +++ b/src/markdown-pages/explore-docs/nerdstorage.mdx @@ -1,5 +1,5 @@ --- -path: '/reference/nerdstorage' +path: '/explore-docs/nerdstorage' title: 'Intro to NerdStorage' duration: '30 min' template: 'GuideTemplate' @@ -11,31 +11,27 @@ redirects: - /build-tools/new-relic-one-applications/nerdstorage --- -## Use NerdStorage in your apps +
+ +Each NerdStorage level has different properties and purpose: + +- **Collections**: From a Nerdpack, you can create multiple collections by naming each of them. Inside a collection you can put one or more documents. Think of a collection as key-value storage, where each document is a key-value pair. +- **Documents**: A document is formed by an identifier (```documentId```) and a set of data associated with it. +- **Data** associated with a document: NerdStorage accepts any sort of data associated to a ```documentId```. Query and mutation components that are provided work by serializing and deserializing JSON. + +### Limits -To access NerdStorage, you can use either raw NerdGraph queries or (more easily) the provided storage queries. +- A Nerdpack can hold up to 1,000 collections and 10,000 documents, plus storage type. +- A collection can hold up to 1,000 documents, plus storage type. +- Each document can have a maximum length of 64 KiB when serialized. ## Data access -Depending on which storage you want to access, you’ll use a different set of [SDK components](/client-side-sdk/index.html): -- User access: ```UserStorageQuery``` and ```UserStorageMutation```. -- Account access: ```AccountStorageQuery``` and ```AccountStorageMutation```. +To access NerdStorage, you can run NerdGraph queries, or use the provided storage queries. -- Entity access: ```EntityStorageQuery``` and ```EntityStorageMutation```. +Depending on which storage you want to access, you can use a different set of [SDK components](/client-side-sdk/index.html): -Each of these components can operate declaratively (i.e., as part of your React rendering methods) or imperatively (by using the static methods for ```query``` and ```mutation```). For more on this, see [Data querying and mutations](/build-tools/new-relic-one-applications/query-and-store-data). +- **User access**: ```UserStorageQuery``` and ```UserStorageMutation``` +- **Account access**: ```AccountStorageQuery``` and ```AccountStorageMutation``` +- **Entity access**: ```EntityStorageQuery``` and ```EntityStorageMutation``` -Permissions for working with NerdStorage -In order to persist changes on NerdStorage, such as creating, updating, and deleting account and entity storage, you need to have one of the following roles: +Each of these components can operate declaratively (for example, as part of your React rendering methods) or imperatively (by using the static methods for ```query``` and ```mutation```). For more information on this, see [Data querying and mutations](/build-tools/new-relic-one-applications/query-and-store-data). -- ```admin``` +### Permissions for working with NerdStorage -- ```owner``` +In order to persist changes on NerdStorage, such as creating, updating, and deleting account and entity storage, you must have one of the following roles: +- ```admin``` +- ```owner``` - ```user``` - - ```all_product_admin``` - -- ```standard_user``` +- ```standard_user``` \ No newline at end of file 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..9b95dfb6e --- /dev/null +++ b/src/markdown-pages/explore-docs/newrelic-CLI.mdx @@ -0,0 +1,46 @@ +--- +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' +--- + +
+ +## 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) diff --git a/src/markdown-pages/explore-docs/nr1-cli.mdx b/src/markdown-pages/explore-docs/nr1-cli.mdx index 039338f7e..9cc540e86 100644 --- a/src/markdown-pages/explore-docs/nr1-cli.mdx +++ b/src/markdown-pages/explore-docs/nr1-cli.mdx @@ -1,5 +1,5 @@ --- -path: '/reference/nr1-cli' +path: '/explore-docs/nr1-cli' title: 'New Relic One CLI reference' template: 'GuideTemplate' description: 'An overview of the CLI to help you build, deploy, and manage New Relic apps.' @@ -54,7 +54,7 @@ This table gives descriptions and context for some of the most important CLI com | Delete CLI config | `nr1 config:delete` | Removes the value of a specific configuration. | | Update | `nr1 update` | Update to newest version of the CLI. | | Profiles | `nr1 profiles` | Controls the profile you'll be running CLI commands as. You can have more than one profile, which is helpful for executing commands on multiple New Relic accounts. For more on this, see [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab-cli/INSTRUCTIONS.md). | -| Create | `nr1 create` | Create a new component template (Nerdpack, Nerdlet, launcher, or catalog). The CLI will walk you through this process. For an explanation of the file structure, see [Nerdpack file structure](/reference/nerdpack-file-structure). | +| Create | `nr1 create` | Create a new component template (Nerdpack, Nerdlet, launcher, or catalog). The CLI will walk you through this process. For an explanation of the file structure, see [Nerdpack file structure](/explore-docs/nerdpack-file-structure). | | Clone | `nr1 nerdpack:clone` | Clone an [open source Nerdpack from our GitHub repository](/open-source/nerdpacks). | | Serve locally | `nr1 nerdpack:serve` | Serves your Nerdpack locally, which makes it visible at [one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local). For details, see [Local development](/client-side-sdk/index.html#cli/LocalDevelopment). | | Change associated accounts | `nr1 nerdpack:uuid` | Commands related to the Nerdpack's UUID (universal unique ID). This ID dictates the data a Nerdpack has access to, and who can subscribe to it. To deploy a Nerdpack you didn't make, you'll have to assign it a new UUID. For details, see [Access to data](/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions#Appaccesstodata) and [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab-cli/INSTRUCTIONS.md). | diff --git a/src/markdown-pages/explore-docs/query-and-store-data.mdx b/src/markdown-pages/explore-docs/query-and-store-data.mdx index 92f8b951e..04dfc315e 100644 --- a/src/markdown-pages/explore-docs/query-and-store-data.mdx +++ b/src/markdown-pages/explore-docs/query-and-store-data.mdx @@ -1,5 +1,5 @@ --- -path: '/reference/query-and-store-data' +path: '/explore-docs/query-and-store-data' duration: '10 min' title: 'Query and store data' template: 'GuideTemplate' @@ -13,40 +13,37 @@ redirects:
New Relic Champions are the voice of the developer community. As experts and innovators, they are given the resources to not only - share the newest product innovations and updates but also provide + share the newest product innovations and updates but also to provide feedback of the community back to New Relic product and engineering teams.
- Champions solve big problems using New Relic as their linchpin and + Champions solve big problems using New Relic as their toolkit and are recognized as experts and leaders in the New Relic technical community.{' '}
@@ -41,14 +42,14 @@ const DeveloperChampionPage = () => { />What do developer champions do?
+What do Developer Champions do?
New Relic Champions demonstrate expertise in using New Relic products by solving large problems and positioning New Relic as a central force in their strategies. The New Relic Champions is a recognition and partnership program designed to acknowledge the developers that are driving innovation within their companies and making top contributions - to the developer community. Also committing to making their work + to the developer community.They also commit to making their work public by:
Content creation
Authoring two pieces of content in the New Relic Explorers Hub / Dev - Website + website
Community engagement
- Delivering and/or organizing two events based around an - observability platform theme in which New Relic plays a crucial role + Delivering and/or organizing two events focused on an observability + platform theme in which New Relic plays a crucial role
Why should you join and how will we support?
As a benefit of being a Developer Champion, New Relic provides - Champions unique access to our Developer Advocacy team and the - resources of our product organization as well as specialized - recognition and rewards. + unique access to our Developer Advocacy team and the resources of + our product organization, as well as specialized recognition and + rewards.
Developer Champions Benefits:
+Developer Champions benefits:
- Formal, specialized access to the New Relic Product organization @@ -123,10 +124,10 @@ const DeveloperChampionPage = () => { Public recognition on the New Relic Developer website and badging in the New Relic Explorers Hub as a Champion -
- Exclusive Champion-only SWAG +
- Exclusive Champion-only swag
- Early access program for some of our products (under NDA)
- - Priority access to offsite FutureHack events (including when Lew is + Priority access to off-site FutureHack events (including when Lew is participating)
-
diff --git a/src/pages/index.js b/src/pages/index.js
index b9cb15af7..d408aa1ea 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,10 +1,11 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
-import { graphql, navigate, Link } from 'gatsby';
+import { graphql, Link } from 'gatsby';
import Layout from '../components/Layout';
import SEO from '../components/Seo';
+import Button from '../components/Button';
import GuideListing from '../components/GuideListing/GuideListing';
import GuideTile from '../components/GuideTile/GuideTile';
import PageTitle from '../components/PageTitle';
@@ -14,6 +15,7 @@ import ExternalLink from '../components/ExternalLink';
import { PageContext } from '../components/PageContext';
import { pageContext } from '../types';
import styles from './index.module.scss';
+import devChampionBadge from '../images/developer-champion/dev-champion-badge.png';
const getStartedGuides = [
{
@@ -28,7 +30,7 @@ const getStartedGuides = [
duration: '7 min',
title: 'Add tags to apps',
description: `Add tags to applications you instrument for easier filtering and organization`,
- path: '/automate-workflows/add-tags-to-apps',
+ path: '/automate-workflows/5-mins-tag-resources',
icon: 'automation',
},
{
@@ -103,17 +105,24 @@ const IndexPage = ({ data, pageContext }) => {
Get coding -- - +{getStartedGuides.map((guide, index) => ( - @@ -129,7 +138,6 @@ const IndexPage = ({ data, pageContext }) => {- navigate(guide.path)} - /> + + ))}+ Start the guide + { frontmatter.description } path={frontmatter.path} + alignment={GuideTile.ALIGNMENT.LEFT} /> ))} {guides.length === numberOfPromotedGuides && ( - +)} @@ -170,21 +180,32 @@ const IndexPage = ({ data, pageContext }) => {- diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 1a72dc289..72dbc8b6c 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -20,6 +20,8 @@ } .guideListing { + --guide-list-row-height: auto; + margin-top: 0; } @@ -85,23 +87,20 @@ } .expandGuides { - border: var(--color-neutrals-100); - background: var(--color-neutrals-100); - color: var(--color-neutrals-800); margin-top: 2rem; + + &:hover { + transform: translateY(-1px); + } } .allGuidesListing { margin-top: 1rem; - grid-auto-rows: minmax(180px, 180px); } -.allGuidesGuide { - p, - h2 { - text-align: left; - } - p { - padding: 0; +.featuredGuide { + &:hover { + transform: unset; + border-color: var(--color-neutrals-300); } } diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js index 8c336e921..73bfb6565 100644 --- a/src/templates/OverviewTemplate.js +++ b/src/templates/OverviewTemplate.js @@ -1,5 +1,5 @@ import React from 'react'; -import { graphql } from 'gatsby'; +import { graphql, Link } from 'gatsby'; import PropTypes from 'prop-types'; import Layout from '../components/Layout'; @@ -25,6 +25,8 @@ const OverviewTemplate = ({ data }) => {New Relic developer champions
++
+{' '} + New Relic developer champions +
New Relic Champions are solving big problems using New Relic as their linchpin and are recognized as experts and leaders in the New Relic technical community.
-- - +{guides?.nodes.map(({ frontmatter }, index) => ( diff --git a/src/utils/create-breadcrumbs.js b/src/utils/create-breadcrumbs.js index 8127b9b3e..9b9e9d235 100644 --- a/src/utils/create-breadcrumbs.js +++ b/src/utils/create-breadcrumbs.js @@ -1,3 +1,5 @@ +const URL_WITH_TRAILING_SLASH = /(.+)\/$/; + /** * Create a flat array of breadcrumbs for a given relative url given the * site structure (sidenav). Returns an empty array if no match found. NOTE: @@ -20,7 +22,11 @@ const createBreadcrumbs = (url, links, result = []) => { } // check to see if any of the links at this level match the path - const match = links.find((link) => link.url === url); + const match = links.find( + (link) => + link.url === url || + link.url === url.replace(URL_WITH_TRAILING_SLASH, '$1') + ); // if we have a link, return the displayName at the end of the result if (match) {{ frontmatter.description } path={frontmatter.path} + alignment={GuideTile.ALIGNMENT.LEFT} /> ))}