Support for multihost and status for alerts

README.md

@@ -1,6 +1,7 @@
 # Grafana plugin for Backstage
 
-The Grafana plugin is a frontend plugin that lists Grafana alerts and dashboards. It includes two components that can be integrated into Backstage:
+The Grafana plugin is a frontend plugin that lists Grafana alerts and dashboards. It supports multiple Grafana hosts configuration.
+It includes several components that can be integrated into Backstage:
 
 * The `EntityGrafanaDashboardsCard` component which can display dashboards for a specific entity
 * The `EntityGrafanaAlertsCard` component which can display recent alerts for a specific entity

config.d.ts

@@ -15,24 +15,54 @@
  */
 
 export interface Config {
-    grafana: {
-        /**
-         * Domain used by users to access Grafana web UI.
-         * Example: https://monitoring.eu.my-company.com/
-         * @visibility frontend
-         */
-        domain: string;
+  grafana: {
+    /**
+     * Domain used by users to access Grafana web UI.
+     * Example: https://monitoring.eu.my-company.com/
+     * @visibility frontend
+     */
+    domain?: string;
 
-        /**
-         * Path to use for requests via the proxy, defaults to /grafana/api
-         * @visibility frontend
-         */
-        proxyPath?: string;
+    /**
+     * Path to use for requests via the proxy, defaults to /grafana/api
+     * @visibility frontend
+     */
+    proxyPath?: string;
 
-        /**
-         * Is Grafana using unified alerting?
-         * @visibility frontend
-         */
-        unifiedAlerting?: boolean;
-    }
-}
+    /**
+     * Is Grafana using unified alerting?
+     * @visibility frontend
+     */
+    unifiedAlerting?: boolean;
+
+    /**
+     * List of the grafana hosts
+     * @visibility frontend
+     */
+    hosts: {
+      /**
+       * Unique ID of the grafana host. This value should be used in the catalog Yaml files to match grafana/source-id.
+       * @visibility frontend
+       */
+      id: string;
+      /**
+       * Domain used by users to access Grafana web UI.
+       * Example: https://monitoring.eu.my-company.com/
+       * @visibility frontend
+       */
+      domain: string;
+
+      /**
+       * Path to use for requests via the proxy, defaults to /grafana/api
+       * @visibility frontend
+       */
+      proxyPath?: string;
+
+      /**
+       * Is Grafana using unified alerting?
+       * @visibility frontend
+       */
+      unifiedAlerting?: boolean;
+    }[];
+  };
+}

docs/alerts-on-component-page.md

@@ -41,6 +41,7 @@ If Grafana's [Unified Alerting](https://grafana.com/blog/2021/06/14/the-new-unif
 
 ```yaml
 annotations:
+  # grafana/source-id: 'my-instance-id' # use in case of multiple Grafana instances
   grafana/alert-label-selector: "service=awesome-service"
 ```
 
@@ -52,7 +53,8 @@ If Grafana's [Unified Alerting](https://grafana.com/blog/2021/06/14/the-new-unif
 
 ```yaml
 annotations:
+  # grafana/source-id: 'my-instance-id' # use in case of multiple Grafana instances
   grafana/tag-selector: "my-tag"
 ```
 
-The `EntityGrafanaAlertsCard` component will then display alerts matching the given tag.
+The `EntityGrafanaAlertsCard` component will then display alerts matching the given tag.

docs/dashboards-on-component-page.md

@@ -40,6 +40,7 @@ The following selector will return dashboards that have a `my-service` or a `my-
 
 ```yml
 annotations:
+  # grafana/source-id: 'my-instance-id' # use in case of multiple Grafana instances  
   grafana/dashboard-selector: "(tags @> 'my-service' || tags @> 'my-service-slo') && tags @> 'generated'"
 ```
 
@@ -67,5 +68,6 @@ Note that the `tags @> "my-service"` selector can be simplified as:
 
 ```yaml
 annotations:
+  # grafana/source-id: 'my-instance-id' # use in case of multiple Grafana instances
   grafana/dashboard-selector: my-service
 ```

docs/setup.md

@@ -10,26 +10,79 @@ Configure the plugin in `app-config.yaml`. The proxy endpoint described below wi
 to authenticate with Grafana without exposing your API key to users.
 [Create an API key](https://grafana.com/docs/grafana/latest/http_api/auth/#create-api-token) if you don't already have one. `Viewer` access will be enough.
 
+#### Minimal configuration for a single instance: 
 ```yaml
 # app-config.yaml
 proxy:
   '/grafana/api':
-    # May be a public or an internal DNS
+    # Maybe a public or an internal DNS
     target: https://grafana.host/
     headers:
       Authorization: Bearer ${GRAFANA_TOKEN}
 
 grafana:
   # Publicly accessible domain
   domain: https://monitoring.company.com
-
+
+  # Path to use for requests via the proxy, defaults to /grafana/api        
+  # proxyPath: '/grafana/api'
+
   # Is unified alerting enabled in Grafana?
   # See: https://grafana.com/blog/2021/06/14/the-new-unified-alerting-system-for-grafana-everything-you-need-to-know/
   # Optional. Default: false
   unifiedAlerting: false
 ```
 
-Expose the plugin to Backstage:
+You don't need to specify `grafana/source-id` annotation in Catalog yaml files in this case. It's matched to the value `default`.
+
+####  Multiple Grafana instances
+If you need to use multiple Grafana instances, use `hosts` field. You also need to define a proxy for each host:
+
+```yaml
+# app-config.yaml
+proxy:
+  '/grafana/api':
+    # Maybe a public or an internal DNS
+    target: https://grafana.host/
+    headers:
+      Authorization: Bearer ${GRAFANA_TOKEN}
+  '/grafana2/api':
+    # Maybe a public or an internal DNS
+    target: https://grafana2.host/
+    headers:
+      Authorization: Bearer ${GRAFANA2_TOKEN}
+
+grafana:
+  hosts:                
+    - id: 'default' #unique host identifier used in Catalog Yaml annotation `grafana/source-id`
+
+      # Publicly accessible domain
+      domain: https://monitoring.company.com
+
+      # Path to use for requests via the proxy, defaults to /grafana/api        
+      proxyPath: '/grafana/api'
+
+      # Is unified alerting enabled in Grafana?
+      # See: https://grafana.com/blog/2021/06/14/the-new-unified-alerting-system-for-grafana-everything-you-need-to-know/
+      # Optional. Default: false
+      unifiedAlerting: false
+
+    - id: 'my-second-instance' #unique host identifier used in Catalog Yaml annotation `grafana/source-id`     
+
+      # Publicly accessible domain
+      domain: https://monitoring2.company.com 
+
+      # Path to use for requests via the proxy, defaults to /grafana/api        
+      proxyPath: '/grafana2/api'      
+
+      # Is unified alerting enabled in Grafana?
+      # See: https://grafana.com/blog/2021/06/14/the-new-unified-alerting-system-for-grafana-everything-you-need-to-know/
+      # Optional. Default: false
+      unifiedAlerting: false
+```
+
+
+### Expose the plugin to Backstage:
 
 ```ts
 // packages/app/src/plugins.tsx
@@ -39,4 +92,4 @@ Expose the plugin to Backstage:
 export { grafanaPlugin } from '@k-phoen/backstage-plugin-grafana';
 ```
 
-That's it! You can now update your entities pages to [display alerts](alerts-on-component-page.md) or [dashboards](dashboards-on-component-page.md) related to them.
+That's it! You can now update your entities pages to [display alerts](alerts-on-component-page.md) or [dashboards](dashboards-on-component-page.md) related to them.

package.json

@@ -30,23 +30,22 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
-    "@backstage/catalog-model": "^1.2.1",
-    "@backstage/core-components": "^0.12.5",
-    "@backstage/core-plugin-api": "^1.5.0",
-    "@backstage/plugin-catalog-react": "^1.4.0",
+    "@backstage/core-components": "^0.13.4",
+    "@backstage/core-plugin-api": "^1.5.3",
+    "@backstage/plugin-catalog-react": "^1.8.3",
     "@material-ui/core": "^4.12.2",
     "@material-ui/lab": "4.0.0-alpha.57",
     "jsep": "^1.3.8",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0",
+    "react": "^16.13.1 || ^17.2.0",
     "react-dom": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.22.5",
-    "@backstage/core-app-api": "^1.6.0",
-    "@backstage/dev-utils": "^1.0.13",
+    "@backstage/cli": "^0.22.12",
+    "@backstage/core-app-api": "^1.9.1",
+    "@backstage/dev-utils": "^1.0.20",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",