From 7a108d9bf92bdcf4bdab7aefcf71620a6f635438 Mon Sep 17 00:00:00 2001
From: mufaddalWh <mufaddal.motiwala@williamhill.co.uk>
Date: Tue, 23 Nov 2021 00:09:53 +0530
Subject: [PATCH] Added usage information

Signed-off-by: mufaddalWh <mufaddal.motiwala@williamhill.co.uk>
Signed-off-by: mufaddal motiwala <mufaddalmm.52@gmail.com>
---
 plugins/new-relic-dashboard/README.md | 63 ++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/plugins/new-relic-dashboard/README.md b/plugins/new-relic-dashboard/README.md
index 624b839be6..236abdeef4 100644
--- a/plugins/new-relic-dashboard/README.md
+++ b/plugins/new-relic-dashboard/README.md
@@ -5,16 +5,75 @@ Welcome to the new-relic-dashboard plugin!
 ## Features
 
 - Adds New Relic Dashboard Pages Links to Overview section of the catalog
-- Shows snapshot images of dashboards
+- Shows Snapshots of dashboards in New Relic
 
 ## 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:
+This plugin uses the Backstage proxy to securely communicate with New Relic's APIs. We use NerdGraph (New Relic's GraphQL API)
+
+To generate a New Relic API Key , you can visit this [link](https://one.newrelic.com/launcher/api-keys-ui.api-keys-launcher)
+
+1. Add the following to your app-config.yaml to enable this configuration:
 
 ```
+// app-config.yaml
 proxy:
   '/newrelic/apm/api':
     target: https://api.newrelic.com/v2
     headers:
       X-Api-Key: ${NEW_RELIC_REST_API_KEY}
 ```
+
+2. Add the following to `EntityPage.tsx` to display New Relic Dashboard Tab
+
+```
+// In packages/app/src/components/catalog/EntityPage.tsx
+import {
+  isNewRelicDashboardAvailable,
+  EntityNewRelicDashboard,
+  EntityPageNewRelicDashboard,
+} from '@internal/plugin-new-relic-dashboard';
+
+const serviceEntityPage = (
+  <EntityLayout>
+    {/* other tabs... */}
+    <EntityLayout.Route
+      if={isNewRelicDashboardAvailable}
+      path="/new-relic-dashboard"
+      title="New Relic Dashboard"
+    >
+      <EntityNewRelicDashboard />
+    </EntityLayout.Route>
+```
+
+3. Add the following in `EntityPage.tsx` to display dashboard links in overview page
+
+```
+const overviewContent = (
+    {/* other tabs... */}
+    <EntitySwitch>
+      <EntitySwitch.Case if={isNewRelicDashboardAvailable}>
+        <Grid item md={6} xs={12}>
+          <EntityPageNewRelicDashboard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+```
+
+4. Add `newrelic.com/dashboard-guid` annotation in catalog descriptor file
+
+To Obtain the dashboard's GUID: Click the info icon by the dashboard's name to access the See metadata and manage tags modal and see the dashboard's GUID.
+
+```
+// catalog-info.yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  # ...
+  annotations:
+    newrelic.com/dashboard-guid: <dashboard_guid>
+spec:
+  type: service
+```
+
+All set , you will be able to see the plugin in action!