From 76c1f3d5a454c0b4af6daa9757272f66969ebbed Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Sat, 27 Jun 2020 20:25:17 -0700 Subject: [PATCH] fix: Incorrect image paths in all guides --- .../build-apps/add-nerdgraphquery-guide.mdx | 36 +++++++++---------- .../build-apps/add-time-picker-guide.mdx | 6 ++-- .../howto-use-nrone-table-components.mdx | 10 +++--- .../collect-data-from-any-source.mdx | 2 +- .../collect-data/custom-events.mdx | 2 +- .../collect-data/query-data-nrql.mdx | 2 +- 6 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx b/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx index 5d47c20ed..127036858 100644 --- a/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx +++ b/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx @@ -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. @@ -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: @@ -68,7 +68,7 @@ If you haven't already done so, clone the example applications from our [how-to - + In your preferred text editor, open `index.js`. @@ -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) If you don't see any launchers, click **Your applications**. - + @@ -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 @@ -142,7 +142,7 @@ If you need more details about our example below, see the APIs and components pa - + Add the `NerdGraphQuery` component into the first `StackItem` inside of the `return` in the `index.js` file: @@ -166,12 +166,12 @@ Add the `NerdGraphQuery` component into the first `StackItem` inside of the `ret -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: - + 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. @@ -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 {data.actor.account.name} Apps:; + return {data.actor.account.name} Apps:; ``` @@ -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` @@ -213,7 +213,7 @@ 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: @@ -221,16 +221,16 @@ Complete the following: -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 => { @@ -246,7 +246,7 @@ Add the following code into the `index.js` just under the `constructor`: -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: @@ -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`. diff --git a/src/markdown-pages/build-apps/add-time-picker-guide.mdx b/src/markdown-pages/build-apps/add-time-picker-guide.mdx index ee3734e6f..82043b742 100644 --- a/src/markdown-pages/build-apps/add-time-picker-guide.mdx +++ b/src/markdown-pages/build-apps/add-time-picker-guide.mdx @@ -99,7 +99,7 @@ If you don't see any launchers, click **Your applications**. -![New Relic One launcher image](../images/time-picker-guide/homepage-launcher.png) +![New Relic One launcher image](../../images/time-picker-guide/homepage-launcher.png) @@ -107,7 +107,7 @@ If you don't see any launchers, click **Your applications**. 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. @@ -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 diff --git a/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx b/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx index 3038343a0..9420db3b1 100644 --- a/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx +++ b/src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx @@ -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) @@ -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) @@ -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) @@ -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) diff --git a/src/markdown-pages/collect-data/collect-data-from-any-source.mdx b/src/markdown-pages/collect-data/collect-data-from-any-source.mdx index 6af389ad1..cd3f1329e 100644 --- a/src/markdown-pages/collect-data/collect-data-from-any-source.mdx +++ b/src/markdown-pages/collect-data/collect-data-from-any-source.mdx @@ -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. diff --git a/src/markdown-pages/collect-data/custom-events.mdx b/src/markdown-pages/collect-data/custom-events.mdx index 129ec35ea..17d9888be 100644 --- a/src/markdown-pages/collect-data/custom-events.mdx +++ b/src/markdown-pages/collect-data/custom-events.mdx @@ -60,7 +60,7 @@ end _Here, a NRQL query retrieves information about the custom event, and the result can be added to a dashboard._
-![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 diff --git a/src/markdown-pages/collect-data/query-data-nrql.mdx b/src/markdown-pages/collect-data/query-data-nrql.mdx index 71bf62ac4..393d898a6 100644 --- a/src/markdown-pages/collect-data/query-data-nrql.mdx +++ b/src/markdown-pages/collect-data/query-data-nrql.mdx @@ -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)