Merge pull request #16574 from juniorsdj/master

docs: improving new relic plugin's docs
2023-02-27 13:46:46 +01:00
parent 991ca57545 c39a08209d
commit b5309c3518
2 changed files with 70 additions and 24 deletions
@@ -8,36 +8,77 @@ Website: [https://newrelic.com](https://newrelic.com)
 ## Getting Started

 This plugin uses the Backstage proxy to securely communicate with New Relic's
-APIs. Add the following to your `app-config.yaml` to enable this configuration:
+APIs.

-```yaml
-proxy:
-  '/newrelic/apm/api':
-    target: https://api.newrelic.com/v2
-    headers:
-      X-Api-Key: ${NEW_RELIC_REST_API_KEY}
-```
+1.  Add the following to your `app-config.yaml` to enable this configuration:

-In your production deployment of Backstage, you would also need to ensure that
-you've set the `NEW_RELIC_REST_API_KEY` environment variable before starting
-the backend.
+    ```yaml
+    proxy:
+      '/newrelic/apm/api':
+        target: https://api.newrelic.com/v2
+        headers:
+          X-Api-Key: ${NEW_RELIC_REST_API_KEY}
+    ```

-While working locally, you may wish to hard-code your API key in your
-`app-config.local.yaml` like this:
+    There is some types of api key on new relic, to this use must be `User` type of key, In your production deployment of Backstage, you would also need to ensure that
+    you've set the `NEW_RELIC_REST_API_KEY` environment variable before starting
+    the backend.

-```yaml
-# app-config.local.yaml
-proxy:
-  '/newrelic/apm/api':
-    headers:
-      X-Api-Key: NRRA-YourActualApiKey
-```
+    While working locally, you may wish to hard-code your API key in your
+    `app-config.local.yaml` like this:

-Read more about how to find or generate this key in
-[New Relic's Documentation](https://docs.newrelic.com/docs/apis/get-started/intro-apis/types-new-relic-api-keys#rest-api-key).
+    ```yaml
+    # app-config.local.yaml
+    proxy:
+      '/newrelic/apm/api':
+        headers:
+          X-Api-Key: NRRA-YourActualApiKey
+    ```

-See if it's working by visiting the New Relic Plugin Path:
-[/newrelic](http://localhost:3000/newrelic)
+    Read more about how to find or generate this key in
+    [New Relic's Documentation](https://docs.newrelic.com/docs/apis/get-started/intro-apis/types-new-relic-api-keys#rest-api-key).
+
+    See if it's working by visiting the New Relic Plugin Path:
+    [/newrelic](http://localhost:3000/newrelic)
+
+2.  Add a dependency to your `packages/app/package.json`:
+    ```sh
+    # From your Backstage root directory
+    yarn add --cwd packages/app @backstage/plugin-newrelic
+    ```
+3.  Add the `NewRelicPage` to your `packages/app/src/App.tsx`:
+
+    ```tsx
+    <FlatRoutes>
+      …
+      <Route path="/newrelic" element={<NewRelicPage />} />
+    </FlatRoutes>
+    ```
+
+4.  Add link to New Relic to your sidebar
+
+    ```typescript
+    // packages/app/src/components/Root/Root.tsx
+     import ExtensionIcon from '@material-ui/icons/ExtensionOutlined';
+
+     ...
+
+     export const Root = ({ children }: PropsWithChildren<{}>) => (
+       <SidebarPage>
+         <Sidebar>
+           ...
+           <SidebarItem icon={ExtensionIcon} to="newrelic" text="New Relic" />
+           ...
+         </Sidebar>
+       </SidebarPage>
+     );
+
+    ```
+
+5.  Navigate to your.domain.com/newrelic.
+
+    At this step you must be able to see a page like that
+    <img src="./src/assets/img/newrelic-plugin-apm.png" alt="New Relic Plugin APM" />

 ## Features