@newrelic/nr1-community

    1.3.0-alpha.5 • Public • Published

    Community Project header

    nr1-community

    GitHub release (latest SemVer including pre-releases) Snyk

    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

    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

    Screenshot #1

    EmptyState

    Screenshot #1

    Timeline

    Screenshot #1

    Funnel (coming soon)

    Screenshot #1

    NerdGraphError

    Screenshot #1

    Utilities

    timeRangeToNrql

    Screenshot #1

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

    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 opensource+nr1-community@newrelic.com.

    Keywords

    none

    Install

    npm i @newrelic/[email protected]

    Version

    1.3.0-alpha.5

    License

    Apache-2.0

    Unpacked Size

    1.13 MB

    Total Files

    9

    Last publish

    Collaborators

    • newrelic