Intro to the SDK component library

To help you build New Relic applications, we provide you with the New Relic SDK components, which are used to build New Relic apps.

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 New Relic or third-party data.

Components of the SDK

You can find the SDK components in the Node module package named nr1, which you get when you install the New Relic CLI. The nr1 components are divided into several categories:

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

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, TextField, Dropdown, DropdownItem, Checkbox, RadioGroup, and Radio.

• Feedback components: Use these components to provide feedback to users about actions they have taken. These include: Spinner and Toast.

• Overlaid components: Use these components 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.

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.

Query and storage components

The Query components category contains components for fetching and storing New Relic data.

The main way to fetch 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. See our docs about NerdGraph for more info.

We also provide 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 platform, by reading and writing state from and to the URL, setting the configuration, etc. They are divided into these categories:

• PlatformStateContext: Provides read access to the platform URL state variables. For example timeRange in the time picker.
• navigation: An object that allows programmatic manipulation of the navigation in New Relic. Example: opening a new Nerdlet.
• NerdletStateContext: Provides read access to the Nerdlet URL state variables. For example an entityGuid in the entity explorer.
• nerdlet: Allows you to configure your Nerdlet and write to your Nerdlet's URL state.