Intro to the New Relic One API and components

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 CLI.

Here's an example of using a button component from the SDK:


import {Button} from 'nr1';

SDK components

The nr1 components can be divided into several categories:

  • UI components
  • Chart components
  • Query and storage components
  • Platform APIs

You can view and interact with these components in this component library. These categories are explained in more detail below. 

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 and BlockText.

  • 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 and GridItem: for organizing more complex, larger scale page content in rows and columns.

    • Stack and StackItem: for organizing simpler, smaller scale page content (in column or row).

    • Tabs and TabsItem: group various related pieces of content into separate hideable sections.

    • List and ListItem: for providing a basic skeleton of virtualized lists.

    • Card, CardHeader and CardBody: 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, TextFieldDropdown and DropdownItem, Checkbox, RadioGroup, Radio, and Checkbox.

  • Feedback components: These components are used to provide feedback to users about actions they’ve taken. These include: Spinner and 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 and Tooltip.

Note: components suffixed with Item can only operate as direct children of that name without the suffix. For example: GridItem should only be found as a child of Grid.

Chart components

The Charts category of the SDK contains components representing different types of charts. The ChartGroup 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.

For more on using chart components, see Chart components.

Query and storage components

The Query components category of the 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. To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see Queries and mutations.

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.

Platform APIs

The Platform API components of the 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: provides read access to the platform URL state variables. Example: timeRange in the time picker.

  • navigation: an object that allows programmatic manipulation of the navigation in New Relic One. Example: opening a new Nerdlet.

  • NerdletStateContext: provides read access to the Nerdlet URL state variables. Example: an entityGuid in the entity explorer.

  • nerdlet: an object that provides write access to the Nerdlet URL state.