Merge pull request #15052 from padupe/docs/plugin-dynatrace-update

docs(plugins/dynatrace): update doc with install processing.

plugins/dynatrace/README.md

@@ -2,13 +2,17 @@
 
 Welcome to the Dynatrace plugin!
 
+![Example of the Dynatrace plugin](./assets/plugin.png)
+
 ## Getting started
 
 This plugin uses the Backstage proxy to communicate with Dynatrace's REST APIs.
 
 ### Setup
 
-#### Dynatrace API Key
+#### Requirements
+
+##### Dynatrace API Key
 
 The Dynatrace plugin will require the following information, to be used in the configuration options detailed below:
 
@@ -17,6 +21,39 @@ The Dynatrace plugin will require the following information, to be used in the c
   - `entities.read`
   - `problems.read`
 
+#### Install
+
+1. Install the plugin on your frontend:
+
+```
+yarn add --cwd packages/app @backstage/plugin-dynatrace
+```
+
+2. We created in our catalog the interface for using the integration with Dynatrace.
+
+```diff
+# packages/app/src/components/catalog/EntityPage.tsx
+
+[...]
++ import { DynatraceTab, isDynatraceAvailable } from '@backstage/plugin-dynatrace'
+
+[...]
+
+const serviceEntityPage = (
+  <EntityLayout>
+    [...]
++    <EntityLayout.Route
++      path="/dynatrace"
++      title="Dynatrace"
++      if={isDynatraceAvailable}
++    >
++      <DynatraceTab />
++    </EntityLayout.Route>
+  </EntityLaytou>
+)
+
+```
+
 #### Plugin Configuration
 
 This plugin requires a proxy endpoint for Dynatrace configured in `app-config.yaml` like so:

plugins/dynatrace/package.json

@@ -12,6 +12,11 @@
   "backstage": {
     "role": "frontend-plugin"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/dynatrace"
+  },
   "scripts": {
     "start": "backstage-cli package start",
     "build": "backstage-cli package build",