SRM Plugin for IDP (#98)

* SRM Plugin for IDP

* Fixed lint error

* Fixed Prettier error

* Fixed more prettier checks

* Added log for HarnessToken

examples/catalog-harness-srm.yaml

@@ -0,0 +1,38 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: demo
+  description: demo
+  annotations:
+    harness.io/services: |
+      Service: <harness_service_url>
+
+  tags:
+    - java
+
+  links:
+    - url: https://example.com/user
+      title: Examples Users
+      icon: user
+    - url: https://example.com/group
+      title: Example Group
+      icon: group
+    - url: https://example.com/cloud
+      title: Link with Cloud Icon
+      icon: cloud
+    - url: https://example.com/dashboard
+      title: Dashboard
+      icon: dashboard
+    - url: https://example.com/help
+      title: Support
+      icon: help
+    - url: https://example.com/web
+      title: Website
+      icon: web
+    - url: https://example.com/alert
+      title: Alerts
+      icon: alert
+spec:
+  type: service
+  lifecycle: experimental
+  owner: team-a

package.json

@@ -33,9 +33,9 @@
     "@spotify/prettier-config": "^12.0.0",
     "concurrently": "^6.0.0",
     "lerna": "^4.0.0",
+    "node-gyp": "^9.0.0",
     "prettier": "^2.3.2",
-    "typescript": "~4.6.4",
-    "node-gyp": "^9.0.0"
+    "typescript": "~4.6.4"
   },
   "resolutions": {
     "@types/react": "^17",
@@ -50,5 +50,6 @@
     "*.{json,md}": [
       "prettier --write"
     ]
-  }
+  },
+  "dependencies": {}
 }

packages/app/package.json

@@ -45,6 +45,7 @@
     "@backstage/theme": "^0.2.16",
     "@harnessio/backstage-plugin-ci-cd": "^0.6.0",
     "@harnessio/backstage-plugin-feature-flags": "^0.2.0",
+    "@harnessio/backstage-plugin-harness-srm": "^0.1.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "history": "^5.0.0",

packages/app/src/components/catalog/EntityPage.tsx

@@ -65,6 +65,11 @@ import {
   EntityHarnessFeatureFlagContent,
 } from '@harnessio/backstage-plugin-feature-flags';
 
+import {
+  EntityHarnessSrmContent,
+  isHarnessSRMAvailable,
+} from '@harnessio/backstage-plugin-harness-srm';
+
 const techdocsContent = (
   <EntityTechdocsContent>
     <TechDocsAddons>
@@ -148,6 +153,31 @@ const entityWarningContent = (
   </>
 );
 
+const srmContent = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isHarnessSRMAvailable}>
+      <EntityHarnessSrmContent />
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case>
+      <EmptyState
+        title="No SRM available for this entity"
+        missing="info"
+        description="You need to add an annotation to your component if you want to enable SRM for it. You can read more about annotations in Backstage by clicking the button below."
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
+          >
+            Read more
+          </Button>
+        }
+      />
+    </EntitySwitch.Case>
+  </EntitySwitch>
+);
+
 const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
     {entityWarningContent}
@@ -177,6 +207,10 @@ const serviceEntityPage = (
       {cicdContent}
     </EntityLayout.Route>
 
+    <EntityLayout.Route path="/srm" title="Service Reliability">
+      {srmContent}
+    </EntityLayout.Route>
+
     <EntityLayout.Route path="/feature-flag" title="Feature Flags">
       {featureFlagList}
     </EntityLayout.Route>

plugins/harness-srm/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/harness-srm/README.md

@@ -0,0 +1,131 @@
+# Harness Service Reliability Management Plugin
+
+Website: [https://harness.io/](https://harness.io/)
+
+Welcome to the Harness Service Reliability Management plugin for Backstage!
+
+## Screenshots
+
+<img src="./src/assets/MonitoredServicesList.png" />
+
+## Setup steps
+
+1. Open terminal and navigate to the _root of your Backstage app_. Then run
+
+```
+yarn add --cwd packages/app @harnessio/backstage-plugin-srm
+
+yarn install
+```
+
+If you are looking to get started with Backstage, check out [backstage.io/docs](https://backstage.io/docs/getting-started/).
+
+For testing purposes, you can also clone this repository to try out the plugin. It contains an example Backstage app setup which is pre-installed with Harness plugins. However, you must create a new Backstage app if you are looking to get started with Backstage.
+
+2. Configure proxy for harness in your `app-config.yaml` under the `proxy` config. Add your Harness Personal Access Token or Service Account Token for `x-api-key`. See the [Harness docs](https://docs.harness.io/article/tdoad7xrh9-add-and-manage-api-keys) for generating an API Key.
+
+```yaml
+# In app-config.yaml
+
+proxy:
+  # ... existing proxy settings
+  '/harness':
+    target: 'https://app.harness.io/'
+    headers:
+      'x-api-key': '<YOUR PAT/SAT>'
+# ...
+```
+
+Notes:
+
+- Plugin uses token configured here to make Harness API calls. Make sure this token has the necessary permissions
+
+- Set the value of target to your on-prem URL if you are using the Harness on-prem offering
+
+3. Inside your Backstage's `EntityPage.tsx`, update the `srmContent` component to render `<EntityHarnessSrmContent />` whenever the service is using Harness SRM. Something like this -
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+
+import {
+  EntityHarnessSrmContent,
+  isHarnessSRMAvailable
+} from '@harnessio/backstage-plugin-harness-srm';
+
+...
+
+const srmContent = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isHarnessSRMAvailable}>
+      <EntityHarnessSrmContent />
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case>
+      <EmptyState
+        title="No SRM available for this entity"
+        missing="info"
+        description="You need to add an annotation to your component if you want to enable SRM for it. You can read more about annotations in Backstage by clicking the button below."
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
+          >
+            Read more
+          </Button>
+        }
+      />
+    </EntitySwitch.Case>
+  </EntitySwitch>
+);
+
+...
+
+const serviceEntityPage = (
+  <EntityLayout>
+    <EntityLayout.Route path="/srm" title="Service Reliability">
+      {srmContent}
+    </EntityLayout.Route>
+  </EntityLayout>
+);
+
+...
+
+```
+
+4. Add required harness specific annotations to your software component's respective `catalog-info.yaml` file.
+
+Here is an example: [catalog-info.yaml](../../examples/catalog-harness-srm.yaml)
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  # ...
+  annotations:
+    harness.io/services: |
+      labelA: <harness_service_url>
+
+spec:
+  type: service
+  # ...
+```
+
+## Other configurations
+
+- (Optional) Harness URL
+
+If you have a separate Harness hosted URL other than `https://app.harness.io`, you can configure `baseUrl` for `harness` in `app-config.yaml` This step is optional. The default value of `harness.baseUrl` is https://app.harness.io/
+
+```yaml
+# In app-config.yaml
+
+harness:
+  baseUrl: https://app.harness.io/
+```
+
+## Features
+
+- Connect a Backstage service with a Harness project and view the Monitored Services associated with that service.
+- See details about Monitored Service - the changes, health score, and the SLOs asscoiated with it.
+- See details about the SLOs like their status, burn rate, target, error budget remaining for a given Monitored Service on clicking the dropdown.

plugins/harness-srm/dev/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import { harnessSrmPlugin, HarnessSrmPage } from '../src/plugin';
+
+createDevApp()
+  .registerPlugin(harnessSrmPlugin)
+  .addPage({
+    element: <HarnessSrmPage />,
+    title: 'Root Page',
+    path: '/harness-srm',
+  })
+  .render();

plugins/harness-srm/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@harnessio/backstage-plugin-harness-srm",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.11.2",
+    "@backstage/core-plugin-api": "^1.0.7",
+    "@backstage/theme": "^0.2.16",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "react-use": "^17.2.4",
+    "path-to-regexp": "^6.2.1",
+    "@mui/material": "^5.10.13",
+    "@backstage/plugin-catalog-react": "^1.3.0",
+    "@backstage/catalog-model": "^1.1.3"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0",
+    "react-router": "6.0.0-beta.0 || ^6.3.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.20.0",
+    "@backstage/core-app-api": "^1.1.1",
+    "@backstage/dev-utils": "^1.0.6",
+    "@backstage/test-utils": "^1.2.1",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "*",
+    "msw": "^0.47.0",
+    "cross-fetch": "^3.1.5"
+  },
+  "files": [
+    "dist"
+  ]
+}