Skip to content

Commit

Permalink
fix: Incorrect image paths in all guides
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerelmiller
jerelmiller committed Jun 28, 2020
1 parent c196f68 commit 76c1f3d
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 29 deletions.
36 changes: 18 additions & 18 deletions src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This guide steps you through the process of adding the NerdGraphQuery component

NerdGraph is New Relic's GraphQL implementation. GraphQL has some key differences when compared to REST:

* The client, not the server, determines what data is returned.
* The client, not the server, determines what data is returned.
* You can easily collect data from multiple sources. For example, in a single New Relic query, you can get account information, infrastructure data, and issue a NRQL request.

<Important>
Expand All @@ -29,7 +29,7 @@ We also have a 14-minute video that covers the steps below.

## Before you begin

To develop projects, you need our New Relic One CLI (command line interface).
To develop projects, you need our New Relic One CLI (command line interface).

If you haven't already installed it, do the following:

Expand Down Expand Up @@ -68,7 +68,7 @@ If you haven't already done so, clone the example applications from our [how-to

</Step>

<Step>
<Step>

In your preferred text editor, open `index.js`.

Expand Down Expand Up @@ -114,13 +114,13 @@ Execute these commands to update the UUID and serve the sample application:

Once the sample application is successfully served, go to the local New Relic One homepage (https://one.newrelic.com/?nerdpacks=local) and click **Use NerdGraph**.

![Use Nerdgraph launcher](../images/nerdgraphquery-guide/use-nerdgraph-launcher.png)
![Use Nerdgraph launcher](../../images/nerdgraphquery-guide/use-nerdgraph-launcher.png)

<Important>

If you don't see any launchers, click **Your applications**.

</Important>
</Important>

</Step>

Expand All @@ -129,7 +129,7 @@ If you don't see any launchers, click **Your applications**.

After launching the **Use NerdGraph** application, you see a dashboard that gives an overview of the transactions in your New Relic account.

![Screenshot showing the sample transaction application](../images/nerdgraphquery-guide/no-name.png)
![Screenshot showing the sample transaction application](../../images/nerdgraphquery-guide/no-name.png)

## Add the `NerdGraphQuery` component

Expand All @@ -142,7 +142,7 @@ If you need more details about our example below, see the APIs and components pa
</Important>

<Steps>

<Step>

Add the `NerdGraphQuery` component into the first `StackItem` inside of the `return` in the `index.js` file:
Expand All @@ -166,12 +166,12 @@ Add the `NerdGraphQuery` component into the first `StackItem` inside of the `ret

<Step>

The `NerdGraphQuery` component takes a query object that states the source you want to access and the data you want returned.
The `NerdGraphQuery` component takes a query object that states the source you want to access and the data you want returned.

Add the following code to your `index.js` file in the `render` method:

<Important>

In the browser console, you can see the data from your query returned in an object that follows the same structure of the object in the initial query.

</Important>
Expand All @@ -195,7 +195,7 @@ In the browser console, you can see the data from your query returned in an obje
To take the data returned by the NerdGraph query and display it in the application, replace the `return null` in the current `NerdGraphQuery` component with this `return` statement:

```jsx
return <HeadingText>{data.actor.account.name} Apps:</HeadingText>;
return <HeadingText>{data.actor.account.name} Apps:</HeadingText>;
```

</Step>
Expand All @@ -204,7 +204,7 @@ To take the data returned by the NerdGraph query and display it in the applicati

When you go back to the browser and view your application, you see a new headline showing the name of your account returned from NerdGraph.

![App Image](../images/nerdgraphquery-guide/with-name.png)
![App Image](../../images/nerdgraphquery-guide/with-name.png)

## How to use `NerdGraphQuery.query`

Expand All @@ -213,24 +213,24 @@ At this point, you implemented the `NerdGraphQuery` component with the applicati
Here's what you need to do next:

* Query NerdGraph inside of the `componentDidMount` lifecycle method.
* Save the returned data for later usage throughout the New Relic One application.
* Save the returned data for later usage throughout the New Relic One application.

Complete the following:

<Steps>

<Step>

The following code takes the response from NerdGraph and makes sure the results are processed, stored into the application state, and logged to the browser console for viewing.
The following code takes the response from NerdGraph and makes sure the results are processed, stored into the application state, and logged to the browser console for viewing.

Add the following code into the `index.js` just under the `constructor`:
Add the following code into the `index.js` just under the `constructor`:

```jsx
componentDidMount() {
const accountId = this.state;
const gql = `{ actor { accounts { id name } } }`;

const accounts = NerdGraphQuery.query({query: gql}) //The NerdGraphQuery.query method called with the query object to get your account data is stored in the accounts variable.
const accounts = NerdGraphQuery.query({query: gql}) //The NerdGraphQuery.query method called with the query object to get your account data is stored in the accounts variable.
accounts.then(results => {
console.log('Nerdgraph Response:', results);
const accounts = results.data.actor.accounts.map(account => {
Expand All @@ -246,7 +246,7 @@ Add the following code into the `index.js` just under the `constructor`:

<Step>

After the data is stored into state, display a selection so users can change accounts and update the application.
After the data is stored into state, display a selection so users can change accounts and update the application.

To do this, add the following code to `index.js` for the second `StackItem` in the `return` statement:

Expand All @@ -269,10 +269,10 @@ To do this, add the following code to `index.js` for the second `StackItem` in t

After you complete these steps, look at the application in your browser, and note the following:

* The dropdown menu displays the data returned from the `NerdGraphQuery.query` and allows you to select an account.
* The dropdown menu displays the data returned from the `NerdGraphQuery.query` and allows you to select an account.
* After you select a new account, the application shows data from the new selection.

![App Complete](../images/nerdgraphquery-guide/complete.png)
![App Complete](../../images/nerdgraphquery-guide/complete.png)

The final `index.js` file should have code similar to the code below. This completed sample code is in your nerdlet `final.js`.

Expand Down
6 changes: 3 additions & 3 deletions src/markdown-pages/build-apps/add-time-picker-guide.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,15 @@ If you don't see any launchers, click **Your applications**.

</Important>

![New Relic One launcher image](../images/time-picker-guide/homepage-launcher.png)
![New Relic One launcher image](../../images/time-picker-guide/homepage-launcher.png)

</Step>

</Steps>

After launching the **Add Time Picker** application, you see a dashboard that gives an overview of the transactions in your New Relic account:

![Transaction overview application](../images/time-picker-guide/add-timepicker.png)
![Transaction overview application](../../images/time-picker-guide/add-timepicker.png)

By default, the application shows your data within the last 60 minutes. If you toggle the time picker, it doesn't update the charts because the transaction overview application isn't connected to the New Relic One platform. It has no access to the data from the time picker.

Expand Down Expand Up @@ -244,7 +244,7 @@ Add a `console.log` statement to make sure you are seeing appropriate data. Inse

After you complete these steps, your browser console displays something like this:

![Browser console image](../images/time-picker-guide/console.png)
![Browser console image](../../images/time-picker-guide/console.png)

## Add the time to the queries

Expand Down
10 changes: 5 additions & 5 deletions src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,11 @@ nr1 nerdpack:serve # Serve the demo app locally

Open [one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local) in your browser. You should see a **Create a table** button in your launcher: That's the demo application you are going to work on. Go ahead and select it.

![app-launcher](../images/nrone-table-guide/demo-app-button.png)
![app-launcher](../../images/nrone-table-guide/demo-app-button.png)

Have a good look at the demo app: There is a `TableChart` on the left side named **Transaction Overview**, with an `AreaChart` next to it. You are going to use `Table` components to add a new table in the second row.

![app-launcher](../images/nrone-table-guide/app-overview.png)
![app-launcher](../../images/nrone-table-guide/app-overview.png)

</Step>
<Step>
Expand Down Expand Up @@ -158,7 +158,7 @@ Since you don't know how many rows you'll need, your best bet is to call a funct

Take a look at the application running in New Relic One: you should see something similar to the screenshot below.

![added-table](../images/nrone-table-guide/newtable.png)
![added-table](../../images/nrone-table-guide/newtable.png)

</Step>
<Step>
Expand Down Expand Up @@ -205,7 +205,7 @@ Notice that [`EntityTitleTableRowCell`](https://developer.newrelic.com/client-si

Time to give your table a second look: The cell components you've added take care of properly formatting the data.

![new-components](../images/nrone-table-guide/table-new-cells.png)
![new-components](../../images/nrone-table-guide/table-new-cells.png)

</Step>
<Step>
Expand Down Expand Up @@ -256,7 +256,7 @@ The `TableRow` actions property defines a set of actions that appear when the us

Go back to your application and try hovering over any of the rows: Notice how the two available actions appear. When you click them, a function triggers with the selected row data as an argument, and an alert displays in your browser.

![interactive-table](../images/nrone-table-guide/interactive-table.png)
![interactive-table](../../images/nrone-table-guide/interactive-table.png)

</Step>
</Steps>
Expand Down
2 changes: 1 addition & 1 deletion src/markdown-pages/collect-data/collect-data-from-any-source.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ Build out your own agent to get deep visibility into highly customized, unique,
Using the [Infrastructure Integrations SDK](https://developer.newrelic.com/technology/infrastructure-sdk), you can get data from specific entities into New Relic without having to worry about timings of harvest cycles. The following example shows a custom Apache Integration built atop the Infrastructure Integrations SDK.
![Infrastructure integrations screenshot](../images/collect-data-from-any-source/UC2-sec3-ohai.png)
![Infrastructure integrations screenshot](../../images/collect-data-from-any-source/UC2-sec3-ohai.png)
```shell lineNumbers=true
# Code snippet from the Apache integration's main method in Go.
Expand Down
2 changes: 1 addition & 1 deletion src/markdown-pages/collect-data/custom-events.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ end
_Here, a NRQL query retrieves information about the custom event, and the result can be added to a dashboard._
<br/>

![nrql query example](../images/UC2-sec2-query.png)
![nrql query example](../../images/UC2-sec2-query.png)

```
SELECT count(*) FROM CLIRun FACET errors SINCE 1 week ago
Expand Down
2 changes: 1 addition & 1 deletion src/markdown-pages/collect-data/query-data-nrql.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ SELECT funnel(session,

Using NRQL, you can customize your New Relic experience by crafting diverse dashboards in New Relic One that show your data from multiple angles. These dashboards can be shared with technical and non-technical stakeholders alike.

![Dashboard created with NRQL](../images/nr1-dashboard.png)
![Dashboard created with NRQL](../../images/nr1-dashboard.png)

</Step>

Expand Down

0 comments on commit 76c1f3d

Please sign in to comment.