newrelic/nr1-community

An open-source library of useful components for building on New Relic One's programmability platform.

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

nr1-community's Issues

Create UserSecretQuery to align with related NerdGraph feature

Create a data fetching component that wraps a NerdGraph request like the following (currently only accessible in the Product schema, but to be released in some modified form later in the year).

{
  actor {
    nerdStorageVault {
      secret(name: "my-token")
    }
  }
}

UserSecretQuery

Query Storage Vault (i.e. secrets encrypted at rest) for user scoped secrets.

Retrieve a secret by name.

Declarative query

//retrieve and use a stored secret
import { UserSecretQuery } from '@newrelic/nr1-community';
//SomeOutsideDataComponent takes a token and makes an external call
import { SomeOutsideDataComponent } from './SomeOutsideDataComponent';

<UserSecretQuery secret="outside_token">
  {({ loading, error, data }) => {
    if (loading) {
      return <Spinner />;
    }
    if (error) {
      return 'Error!';
    }
    const { outside_token } = data;
    return <SomeOutsideDataComponent token={outside_token} />;
  }}
</UserSecretQuery>;

Imperative query

UserSecretQuery.query({
  secret: 'mytoken'
}).then(({ data }) => console.log(data));

Props

prop	REQUIRED	type	description
children	TRUE	function	Render prop function as a child.
secret	TRUE	string	Name of secret for search

Unable to run timeline demo page

Description

I am trying to open the timeline demo but I get an error page every time I try. This is the only page that isn't working as it should for me. All the other (detail panel, empty state, etc.) are fine.
Here are some steps I took to fix this issue.

• Updated the NR1 CLI

• Double checked to make sure my fork was up to date with upstream repo

• Been sure to nom install in both the root and demo directories

• I’ve closed and reopened the nerdlet via the launcher on the homepage

• And finally restarted my computer and started up the project again and still I’m getting the following errors when I try to open the timeline page

Steps to Reproduce

Go into the nr1-community nerdpack and navigate to the timeline demo.

Expected Behaviour

It should look like the rest of the other pages do when I click into it.

Relevant Logs / Console output

There are five errors in the console. A detailed log is below.

Your Environment

• NR1 CLI version used: 10.16.3
• Browser name and version: Chrome 80.0.3987.132 (Official Build) (64-bit)
• Operating System and version: Mac Os Mojave 10.14.6

Additional context

Below are the following errors I'm receiving in the console.

    at BasicExample.render (b1ec85b5-c8c4-41f4-bfa1-f1618fb1b48e--nr1-community-demo-nerdlet.js:7899)
    at finishClassComponent (react-dom.development.js:14425)
    at updateClassComponent (react-dom.development.js:14388)
    at beginWork (react-dom.development.js:15206)
    at performUnitOfWork (react-dom.development.js:17944)
    at workLoop (react-dom.development.js:17984)
    at HTMLUnknownElement.callCallback (react-dom.development.js:143)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:17231)

- The above error occurred in the <BasicExample> component:
    in BasicExample (at Timeline/index.js:125)
    in div (created by t)
    in t (created by GridItem)
    in GridItem (at Timeline/index.js:111)
    in div (created by t)
    in t (created by t)
    in t (created by Grid)
    in Grid (at Timeline/index.js:110)
    in TimelineDemo (at nr1-community-demo-nerdlet/index.js:191)
    in main (at nr1-community-demo-nerdlet/index.js:190)
    in div (created by t)
    in t (created by GridItem)
    in GridItem (at nr1-community-demo-nerdlet/index.js:189)
    in div (created by t)
    in t (created by t)
    in t (created by Grid)
    in Grid (at nr1-community-demo-nerdlet/index.js:147)
    in NerdpackLayoutStandard
    in t

React will try to recreate this component tree from scratch using the error boundary you provided, t

- Warning: t: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
- Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in AccountDropdown (at basic.js:80)
    in div (at basic.js:73)
    in BasicExample (at Timeline/index.js:125)
    in div (created by t)
    in t (created by GridItem)
    in GridItem (at Timeline/index.js:111)
    in div (created by t)
    in t (created by t)
    in t (created by Grid)
    in Grid (at Timeline/index.js:110)
    in TimelineDemo (at nr1-community-demo-nerdlet/index.js:191)
    in main (at nr1-community-demo-nerdlet/index.js:190)
    in div (created by t)
    in t (created by GridItem)
    in GridItem (at nr1-community-demo-nerdlet/index.js:189)
    in div (created by t)
    in t (created by t)
    in t (created by Grid)
    in Grid (at nr1-community-demo-nerdlet/index.js:147)
    in NerdpackLayoutStandard

- Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in KitchenSinkExample (at Timeline/index.js:126)
    in div (created by t)
    in t (created by GridItem)
    in GridItem (at Timeline/index.js:111)
    in div (created by t)
    in t (created by t)
    in t (created by Grid)
    in Grid (at Timeline/index.js:110)
    in TimelineDemo (at nr1-community-demo-nerdlet/index.js:191)
    in main (at nr1-community-demo-nerdlet/index.js:190)
    in div (created by t)
    in t (created by GridItem)
    in GridItem (at nr1-community-demo-nerdlet/index.js:189)
    in div (created by t)
    in t (created by t)
    in t (created by Grid)
    in Grid (at nr1-community-demo-nerdlet/index.js:147)
    in NerdpackLayoutStandard

Standard graphql-apollo-style Error component

Summary

Create a standard error output component to deal with the GraphQL output in the data fetching interface.

({ loading, error, data}) => {
  if (error) {
    return <StandardErrorComponent error={error} />
  }
}

Add description content Event Stream component example docs

Allow empty state button to link to a separate page

Summary

We do not give users access to the to prop on the <Button /> component in the <EmptyState /> component, this makes it difficult for users to make that button link to a url.

Desired Behaviour

When you want the button to navigate to a URL, you should just be able to say something like <EmptyState buttonUrl="http://google.com/" />.

Possible Solution

Just add buttonUrl prop onto the <EmptyState /> component.

chore: upgrade eslint

rm -r node_modules
npm uninstall eslint
npm install --save-dev eslint

NR1 library deprecation issues

Repolinter Report

This report was generated automatically by the Repolinter.

This Repolinter run generated the following results:

❗ Error	❌ Fail	⚠️ Warn	✅ Pass	Ignored	Total
0	1	0	6	0	7

• Fail
  • ❌ nr1-lib-deprecation-icon-sizetype
• Passed
  • ✅ nr1-lib-deprecation-dropdown-label
  • ✅ nr1-lib-deprecation-accountpicker-onchange
  • ✅ nr1-lib-deprecation-entity-title-table-row-cell-value-reporting
  • ✅ nr1-lib-deprecation-tooltip-classname
  • ✅ nr1-lib-deprecation-tooltip-style
  • ✅ nr1-lib-deprecation-tablerow-actions-icontype

Fail #

❌ nr1-lib-deprecation-icon-sizetype #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/icon. For more information please visit newrelic/developer-website#1033. Below is a list of files or patterns that failed:

• src/components/DetailPanel/index.js: Contains The Icon sizeType property is deprecated.

Passed #

Click to see rules

✅ nr1-lib-deprecation-dropdown-label #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/dropdown. For more information please visit newrelic/developer-website#1033. All files passed this test.

✅ nr1-lib-deprecation-accountpicker-onchange #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/account-picker. For more information please visit newrelic/developer-website#1033. All files passed this test.

✅ nr1-lib-deprecation-entity-title-table-row-cell-value-reporting #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/entity-title-table-row-cell. For more information please visit newrelic/developer-website#1033. All files passed this test.

✅ nr1-lib-deprecation-tooltip-classname #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/tooltip. For more information please visit newrelic/developer-website#1033. All files passed this test.

✅ nr1-lib-deprecation-tooltip-style #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/tooltip. For more information please visit newrelic/developer-website#1033. All files passed this test.

✅ nr1-lib-deprecation-tablerow-actions-icontype #

See the New Relic Developer docs for current API details https://developer.newrelic.com/components/table-row. For more information please visit newrelic/developer-website#1033. All files passed this test.

I think the height on the EmptyState component is always too long

Description

I think every time I've seen the <EmptyState /> component used outside of the nr1-community docs, it's always extended past the vertical bounds of it's container. I think this is because the height: 100% property isn't taking into account the 16px of margin-top and margin-bottom.

Steps to Reproduce

Go drop <EmptyState /> in a nerdlet and you'll see you either have to scroll to see the bottom of it or it just extends past it's containers height.

Expected Behaviour

I expect that it would sit inside of it's container without the need for scrolling to view it nor would it extend past it's container's height.
NOTE: # ( Tell us what you expected to happen. )

Possible solution

Swap out the height: 100% rule for height: calc(100% - 32px). this removes the extra 32px of height that are coming from the margin top and bottom of .empty-state.
TIP: # ( Include as many relevant details about your environment as possible. )

Additional Context

• NR1 CLI version used: @datanerd/nr1/1.16.1 darwin-x64 node-v10.16.3
• Browser name and version: Firefox 72.0.2
• Operating System and version: MacOS Catalina 10.15.2 (19C57)

feat(ChartComparison): Chart Comparison Group

This is a series of Charts that are adjusting their output based on a common input. Think of this like the ChartGroup component but with an input.

feat(FunnelChart): Add nr1-funnel-component to community library

https://github.com/newrelic/nr1-funnel-component

Event Stream

The origin of this component is derived from an internal customer solution wanting to display PageAction's in a "stream of events".

The initial usage looked like:

<EventStream
  accountId={1}
  session={sessionEntityGuid}
  eventType="PageAction"
  durationInMinutes={60}
/>

Which assumed another part of the UI was going to pass it an entityGuid for a Session, run NRQL to fetch all PageActions tied to that Session and render them in the list.

We decoupled this into a more generic list component:

<EventStream
  eventType="PageAction"
  events={events}
  iconType={data => iconTypeHandler(data)}
/>

Then we built it back up into its current form:

<EventStream
    data={[]}

    // https://date-fns.org/v2.9.0/docs/format
    timeStampField={timestamp}
    timestampFormat={'h:mm:ss a'}
    dateFormat={'MM/dd/yyyy'}

    labelField={label}
    labelFormatter={(label) => label.toUpperCase()}

    eventContent={({ event }) => <pre>JSON.stringify(event)</pre>}

    iconType={(data) => {
      return {
        icon: Icon.TYPE.DOCUMENTS__DOCUMENTS__NOTES,
        color: '#9C5400',
        backgroundColor: '' // Default to white
      }
    }} // Support as an object and as a function, if false (either as a prop or return value from a function) don't render an icon, 
  >
</EventStream>

feat(EmptyState): allow props to be functions for maximum flexibility

Summary

The current prop list for <EmptyState> looks like:

    heading: PropTypes.string,
    description: PropTypes.string,
    buttonText: PropTypes.string,
    buttonOnClick: PropTypes.func,
    buttonUrl: PropTypes.string,
    className: PropTypes.string,
    featuredImage: PropTypes.string,
    footer: PropTypes.func

Desired Behavior

More flexible options for customization. For example:

    <EmptyState description={() => {
        return (
            <React.Fragment>
                <p>Paragraph 1</p>
                <br/>
                <p>Paragraph 2</p>
            </React.fragment>
        )
      }}
    </EmptyState>

Possible Solution

Let's investigate and make a change to allow for any of them to be a function OR a string, like this:

    heading: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    description: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    buttonOnClick: PropTypes.func,
    buttonUrl: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    featuredImage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    footer: PropTypes.func

Additional context

Allow for illustration/icon at the top of the <EmptyState /> component

Summary

Everything the screenshot below is possible with the <EmptyState /> component right now except for the icon/illustration at the top. It would be really nice to just have a featuredImage prop that we could pass an image into in order to display it at the top of the empty state.

Desired Behaviour

It would be cool to enable users to include a icon/illustration in their uses of the <EmptyState /> component.

Possible Solution

Add a featuredImage prop onto the <EmptyState /> component that accepts an image and centers it just above the header of the empty state.

Timeline: Allow for default expanded item

Summary

It would be nice to be able to have a timeline item expanded by default and to be able to choose which one is expanded. That way we could do something like expand one based on something else that had been click.

Desired Behavior

The ability to define an item that is expanded by default.

Implement documentation for components as a Launcher/Nerdlet

• Listing of components on the left
• Rendered code
• Code snippet + documentation

Allow for style overrides in <EmptyState /> component

Summary

Would be nice to allow users to override the styles of the empty state in cases where they want a feature that we don't yet support (like including and icon/illustration, different border type, etc.)

Desired Behaviour

The ability to change the styles of <EmptyState /> component directly

Possible solution

Maybe just create a classNames prop that users can hook into.

feat(Demo) - Navigation aware sidebar

Summary

The original design https://www.figma.com/proto/YAkXjlXfvOZaWaKtIEQynq/NR1-Community?node-id=1%3A1372&viewport=-306%2C237%2C0.8856343030929565&scaling=min-zoom calls for a sidebar navigation allowing for easier access to headers in the documentation.

Desired Behaviour

• A user is contextually aware based on the currently highlighted item in the sidebar navigation
• Clicking one of the items in the sidebar takes the user to that header in the documentation

Possible Solution

Assuming a similar structure to what we have currently we would need to:

• Define a set of headers/children for navigation items from the main body of example code
• Derive an aggregate of headers included in the README.md of the component
• Merge these two together into one navigation tree for the sidebar
• Add visibility awareness in the documentation to both
• Upon become visible or being clicked, navigate to the correct header

Currently we have some visibility awareness handler/callbacks for the Markdown headers.

feat(durationToAbsoluteRange): Utility function for converting duration to begin_time/end_time

Summary

A given duration does not indicate exact time only an interval. To say "last 30 min" means nothing without knowing when you said "last 30 min" from.

Desired Behaviour

Users will want an ability to "freeze time" by specifying something akin to "last x time from when I made this selection". This utility function will allow us to convert that to an absolute timeRange.

Possible Solution

export const durationToAbsoluteRange = (timeRange) => {
  if (!timeRange) {
    return durationToAbsoluteRange({
      duration: 30 * 60 * 1000
    });
  } else if (timeRange.begin_time && timeRange.end_time) {
    return timeRange;
  } else if (timeRange.duration) {
    const now = Math.floor(new Date().getTime() / 1000);
    return {
      begin_time: now - (timeRange.duration / 1000),
      end_time: now
    };
  }
};

Additional context

Unable to find usage of this in any of the current public apps but it seems useful depending on how the TimePicker evolves and is presented in NR1.

feat(MultiFacetPicker): Multi-select facet picker

Summary

See the example in the Mande project. https://github.com/newrelic/nr1-mande/blob/master/components/facet-filter/index.js

Additional context

https://user-images.githubusercontent.com/812989/66426048-09a07400-e9df-11e9-94d3-89dee54824b9.png

Create UserSecretNameListQuery to align with related NerdGraph feature

Create a data fetching component that wraps a NerdGraph request like the following (currently only accessible in the Product schema, but to be released in some modified form later in the year).

{
  actor {
    nerdStorageVault {
      secrets
    }
  }
}

UserSecretNameListQuery

Query Storage Vault (i.e. secrets encrypted at rest) for user scoped list of secrets.

Declarative query

//retrieve and use a stored secret
import { UserSecretNameListQuery } from '@newrelic/nr1-community';

<UserSecretNameListQuery>
  {({ loading, error, data }) => {
    if (loading) {
      return <Spinner />;
    }
    if (error) {
      return 'Error!';
    }
    const { secrets } = data;
    return (<ul>
      {data.secrets.map((secret, i) => <li key={i}>{secret}</li>)}
    </ul>);
  }}
</UserSecretNameListQuery>;

Imperative query

UserSecretNameListQuery.query().then(({ data }) => console.log(data));

Props

prop	REQUIRED	type	description
children	TRUE	function	Render prop function as a child.

feat(NerdStoreEdit): Standard Edit Modal

Summary

Create a standard edit modal that handles three pieces of "mechanics":

• A styled NR1 Modal wrapper
• That receives props for the NerdStorage scope
• and a variable name / array of variable names
• along with a handle to automatically serialize/deserialize the variables into NerdStorage
• and broker those changes between the main Nerdlet and the Modal

General purpose Error that follows a common pattern as NerdGraphError

Summary

For repos like the following, we need a common component and design guidance for general errors similar to NerdGraphError. https://github.com/newrelic/nr1-github/blob/master/nerdlets/github-about/repo-picker.js#L229-L232

NOTE: # ( Provide a brief overview of what the new component does and what problem(s) it solves. )

Account Picker

See conversation in https://github.com/newrelic/open-source-office-private/issues/3

Community Components v. 1 (Roadmap issue)

See the milestone for updates https://github.com/newrelic/nr1-community/milestone/1

README: Contribution Guidelines

Allow users to render whatever they want in place of the <Button /> in the empty state component

Summary

In the <EmptyState /> component, rather than passing up each prop from the <Button /> component that we want to give users access to, we should just allow them to render whatever they want in place of the button. Maybe leaving a button as the default. I think we could support both use-cases. We would just need to define precedence.

Desired Behaviour

Allow users of the <EmptyState /> component to render whatever they want in place of the <Button /> at the bottom of the empty state or just provide props for the button, like so:

• If a user passes a render prop, that suggests they want complete control, ignore the button* props, render the render prop
• If a user does not pass a render prop, we do the bulk of the work for them and just render a button with whatever props they pass through (buttonUrl, buttonText, etc.)

Possible Solution

Use a render prop.

Additional context

Suggested during team meeting in response to #42.

Typo in README missing @newrelic in Import statement

The import statement for the community components needs an @newrelic

Description

README states
import { DetailPanel, EmptyState, Timeline, NerdGraphError, timeRangeToNrql } from 'nr1-community';

BUT the nr1-community needs to have the @newrelic so it needs to be
import { DetailPanel, EmptyState, Timeline, NerdGraphError, timeRangeToNrql } from '@newrelic/nr1-community';

Steps to Reproduce

Expected Behaviour

Relevant Logs / Console output

Your Environment

• NR1 CLI version used:
• Browser name and version:
• Operating System and version:

Additional context

Time Picker

feat(Demo): Support live-code updates in the component library Nerdlet

Add this capability to the artifact generated by #14

buttonUrl prop missing from props table of <EmptyState />

Description

The buttonUrl prop on the <EmptyState /> component was added in #42, but it's not yet been included in the props table at the bottom of the page for that component.

Steps to Reproduce

Start up the nerdpack and scroll down the props section of the EmptyState component and you won't see buttonUrl prop included in there.

Expected Behavior

I expect to see a listing of every available prop in the props table for a given component.

TimeRangeToNRQL example is wrong

Description

The timeRangeToNRQL() example in the screenshot provided shows passing in the timeRange to the module.

The result of this was null,

Instead we had to pass in the full platformState to get the right output

timeRangeToNrql(platformState)

CC @jsbnr

NerdGraphError - cannot read property length of undefined

Description

When running a NerdGraph query for accounts, if we errantly ask for a field that isn't allowed to be returned we get:

TypeError: Cannot read property 'length' of undefined
at _defaultDetails (vendors~40e251de-1278-49dd-9ce0-9a09006e79f4--vendors.js:30580)

This happens because we're making some assumptions about the shape of the response from NerdGraph, we're expecting graphQLErrors to be available and in this case its not.

Instead we get:

{
    "errors": [{
        "locations": [{
            "column": 7,
            "line": 5
        }],
        "message": "Cannot query field \"derp\" on type \"AccountOutline\"."
    }]
}

Steps to Reproduce

1. Make a NerdGraph request like this:

NerdGraphQuery.query({
    query: `
      {
        actor {
          accounts {
            id
            derp
          }
        }
      }
    `,
    fetchPolicyType: NerdGraphQuery.FETCH_POLICY_TYPE.NO_CACHE
  });

Note: 'derp' is an invalid field.

Expected Behaviour

When no graphQLErrors are available, still render and show us what information is there.

Relevant Logs / Console output

TypeError: Cannot read property 'length' of undefined
at _defaultDetails (vendors~40e251de-1278-49dd-9ce0-9a09006e79f4--vendors.js:30580)
at NerdGraphError.render (vendors~40e251de-1278-49dd-9ce0-9a09006e79f4--vendors.js:30654)
at finishClassComponent (react-dom.development.js:14425)
at updateClassComponent (react-dom.development.js:14388)
at beginWork (react-dom.development.js:15206)
at performUnitOfWork (react-dom.development.js:17944)
at workLoop (react-dom.development.js:17984)
at renderRoot (react-dom.development.js:18070)
at performWorkOnRoot (react-dom.development.js:18961)
at performWork (react-dom.development.js:18873)

feat(Layout): Layout component

Provide developer's a starting point with respect to overall Nerdpack layout. Current proposed solution is providing some templates in the form of Github repos to be used as starting points for developing a Nerdpack.

Still a WIP, but the first two:

Standard Layout
Double Sidebar Layout

More to come...

feat(SlackWriter): Write a message to Slack

Summary

Create a common component / service for writing a message to Slack.

Add description copy to AccountPicker demo

Standard Detail Panel

Summary

Create standard markup/styling for a detail panel. https://user-images.githubusercontent.com/812989/66426047-0907dd80-e9df-11e9-9315-fa5092180765.png

Empty state dialog

Summary

Move the empty state styling / content into the community lib.

Desired Behaviour

Possible Solution

Additional context

Create UserSecretMutation to align with related NerdGraph feature

Create a data fetching component that wraps a NerdGraph request like the following (currently only accessible in the Product schema, but to be released in some modified form later in the year).

Write Secret

mutation StoreUserToken($userId: ID!, $tokenName: String!, $userToken: SecureValue!) {
  nerdStorageVaultWriteSecret(
    scope: ACTOR
    scopeId: $userId
    name: $tokenName
    value: $userToken
  ) {
    status
  }
}

Delete Secret

mutation DeleteUserToken($userId: ID!, $tokenName: String!) {
  nerdStorageVaultWriteSecret(
    scope: ACTOR
    scopeId: $userId
    name: $tokenName
  ) {
    status
  }
}

UserSecretMutation

Save, delete, or update a user scoped secret.

Write Secret

//retrieve and use a stored secret
import { UserSecretMutation } from '@newrelic/nr1-community';

UserSecretMutation.mutate({
  actionType: UserSecretMutation.ACTION_TYPE.WRITE_SECRET,
  name: 'mysecret',
  value: 'mysecretvalue'
});

Note: Behind the scenes, it populates the required scopeId using an nr1 UserQuery to retrieve the user Id.

Delete Secret

//retrieve and use a stored secret
import { UserSecretMutation } from '@newrelic/nr1-community';

UserSecretMutation.mutate({
  actionType: UserSecretMutation.ACTION_TYPE.DELETE_SECRET,
  name: 'mysecret'
});

Note: Behind the scenes, it populates the required scopeId using an nr1 UserQuery to retrieve the user Id.

Props

prop	REQUIRED	type	description
name	TRUE	string	Name of the secret.
value	Only for Write	string	value content.

Move the documentation for nr1-community components into developer.newrelic.com

Add a new subsection under the Explore docs menu option called Open source components that follows the same structure as the Component library pages/components.

feat(GaugeChart): Horizontal "timeline"

Summary

A horizontal time breakdown chart. We originally called this a "timeline", but its also referenced as a different take on a "GaugeChart".

Kind of similar to the way Chrome has a "timing" chart for a given network request. How much time was spent where and when during the request.

Possible Solution

https://www.dropbox.com/s/yhe6kwy8e29jdp8/Screenshot%202020-01-27%2015.43.07.png?dl=0

Additional Context

The code for this largely exists with a bit of alteration to fit a more generic use-case. The question is - is this useful? What does it show me? What are some additional examples of how this would be utilized (i.e. additional NRQL or data samples)?

Add description content for Detail Pane

This may be helpful: https://docs.google.com/document/d/1ApRGewCYzh--7OeJPWzYri6Y5uCcq11mvzBl3wBRzy4/edit?usp=sharing

Remove the Account Picker from the v. 1.0 library

Given the impending NR1 Core roadmap deliverables, drop this feature from the library.

Contributing guidelines links broken

Summary

The code of conduct links are leading to 404 pages on the contributing guidelines page.

Desired Behavior

Links should lead to the correct page instead of 404 error page.

so how can I take a try of nr1 cli?

Summary

I can not find any document about how to get a try of nr1 cli, does it have any cummunity version?

Add a component for standard a MetadataTable

Summary

A standard component for displaying a series of metadata. We use this in a lot of example Nerdpacks. It would be a solid contribution.

Desired Behaviour

Possible Solution

Additional context

We use this a lot. It seems a component non-designers could benefit from having.

feat(Demo): Implement a search filter

Searching the component/utility name and (optimally) related documentation and metadata.

Makes links in the Timeline clickable

When a piece of data is printed in the timeline that matches a URL pattern, turn that content in an anchor tag that opens a new window when clicked.

Rename EventStream to EventTimeline or other

Given we have a nerdpack called "Event Stream" already https://github.com/newrelic/nr1-event-stream

I think this component should be better named to Timeline since it is clearly a time based component, more-so then offering any streaming capabilities itself.

Also to avoid any confusion with an already used name within the same programmability ecosystem.

Design the nerdlet screens

Add description content for Empty State