nr1-community

A community-driven library of useful components for building on New Relic One's programmability platform.

This library is built on top of and requires the 'nr1' core library available to Nerdpacks as part of running inside of the New Relic One platform, documentation on this underlying library can be found on our developer site

Table of Contents generated with DocToc

• Links
• Usage
• Components
  • DetailPanel
  • EmptyState
  • Timeline
  • Funnel (coming soon)
  • NerdGraphError
• Utilities
  • timeRangeToNrql
  • bytesToSize (coming soon)
• Local Development
• How do I add my component?
  • Add to component library
  • Add to demo/examples
• Related work
  • New Relic One SDK
  • NewRelic Developer Site
  • Boilerplate Nerdpack Layouts
• Open Source License
• Support
  • Community
  • Issues / Enhancement Requests
• Contributing

Links

• 📘New Relic One's core components
• 🔨Change Log
• 📓Demo

Usage

Install in your project:

npm install --save @newrelic/nr1-community

Import the component/utils into your nerdlet:

import { DetailPanel, EmptyState, Timeline, NerdGraphError, timeRangeToNrql } from '@newrelic/nr1-community';

Import styles into your styles.scss (or similar):

@import '~@newrelic/nr1-community/dist/index.css'

Components

For complete documentation and a demo, please visit Demo and follow the instructions for viewing.

DetailPanel

EmptyState

Timeline

Funnel (coming soon)

NerdGraphError

Utilities

timeRangeToNrql

bytesToSize (coming soon)

Local Development

The /demo folder of this project is a Nerdpack that references the local copy of the components. You are able to develop the components and see how they function in a live environment as you develop them!

1. Open two terminals, navigate both to the root of this repository
2. In one, start up the demo site with the following commands (Full Demo Info)

  cd demo
  npm install
  nr1 nerdpack:uuid -gf # Only needed the first time
  npm start

3. In the other, navigate to the root of this repository and run:

  npm install
  npm start

Note: You're running npm install twice, once for nr1-community and once for the /demo Nerdpack.

Our bundler will watch for changes in /src and auto-build the library. The Demo Nerdpack will see these changes and perform its own live-reloading, referencing the local copy of the library.

How do I add my component?

Add to component library

1. Fork this repository
2. Create a new folder under src/components or src/utils with the name of your component (subject to review)
   1. Create a index.js so that the full path looks like src/components/<name of component>/index.js
   2. Create a README.md that will serve as the primary documentation for your component
   3. Create a meta.json and define the props your component requires/accepts
3. Export your component by adding an export line: export { <name of component> } from './<name of component>'; to src/components/index.js or src/utils/index.js

Add to demo/examples

Our goal here is to aggregate helpful information from your component, like the README.md and the meta.json (as some structured documentation of the component) alongside live code examples. We aim to keep each component's page as similar as possible and have a pattern we'd like you to follow, the easiest approach is to reference an existing one, but if you have troubles, open a pull-request as-is and we're happy to assist.

1. Create a new "page" (folder) in our demo Nerdpack under <location-of-repo>/demo/nerdlets/nr1-community-demo-nerdlet/pages. See existing components for a pattern to follow.
2. Your component's folder should contain the following:
   1. An index.js
   2. An /examples directory
3. Export your component's page in <location-of-repo>/demo/nerdlets/nr1-community-demo-nerdlet/pages/index.js like: export { default as FooComponent } from './FooComponent';
4. Add your component to the "page list" in <location-of-repo>/demo/nerdlets/nr1-community-demo-nerdlet/index.js

Note: You'll notice us referencing the local components with the @, this isn't new JS magic. We've extended the typical Nerdpack's webpack config with an alias @ for the "src" folder of the library to make imports a little less painful.

Related work

New Relic One SDK

https://developer.newrelic.com/client-side-sdk/index.html

NewRelic Developer Site

https://developer.newrelic.com

Boilerplate Nerdpack Layouts

• Standard
• Double Sidebar
• 4x2 Grid
• 4 Column
• 3 Column
• T-bone
• 2x2 Grid
• 3x2 Grid

All of these and more can be found on our public Github - Layout template Nerdpacks

Open Source License

This project is distributed under the Apache 2 license.

Support

New Relic has open-sourced this project. This project is provided AS-IS WITHOUT WARRANTY OR DEDICATED SUPPORT. Issues and contributions should be reported to the project here on GitHub.

We encourage you to bring your experiences and questions to the Explorers Hub where our community members collaborate on solutions and new ideas.

Community

New Relic hosts and moderates an online forum where customers can interact with New Relic employees as well as other customers to get help and share best practices. Like all official New Relic open source projects, there's a related Community topic in the New Relic Explorers Hub.

Issues / Enhancement Requests

Issues and enhancement requests can be submitted in the Issues tab of this repository. Please search for and review the existing open issues before submitting a new issue.

Contributing

Contributions are welcome (and if you submit a Enhancement Request, expect to be invited to contribute it yourself 😁). Please review our Contribution Guide.

Keep in mind that when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. If you'd like to execute our corporate CLA, or if you have any questions, please drop us an email at [email protected].