I am seeing in the logs

.. backstage info ::1 - - [04/Aug/2022:10:23:04 +0000] "GET /api/proxy/grafana/api/api/alerts?dashboardTag=test-deployment-helm HTTP/1.1" 404 23 "-" "M...

but when I query directly it works

curl -s  "https://grafana.NNNN/api/alerts?dashboardTag=test-deployment-helm" -H 'Authorization: Bearer xxx' | jq .
[
  {
    "id": 143,
    "dashboardId": 216,
....
  }
]

my app-config looks like this

  '/grafana/api':
    target: https://grafana.NNNN/
    headers:
      Authorization: Bearer xxx

Don't know why..thanks!

In our company we have been using this plugin for quite some time already. The work done here was pretty good so far, but we have noticed that it is not being maintained that often anymore (the last release was in March, already 6 months ago) and some of the features we wanted to have, which might be really useful for others as well, are not merged at all.

Due to this situation, we ended up creating a fork of this project, add our suggestions to it and keep all the backstage dependencies up to date, to avoid any possible issue. However, we would like to get rid of our forked repo and use the actual plugin again.

I've already mentioned it in the Backstage's discord channel, and we would like to know if this plugin is going to be maintained in the near future or not. Otherwise, it might be a good idea if somebody decides to get the ownership of this plugin and bring it to life again. I was also thinking about adding it directly to the list of open-sourced plugins maintained by the backstage community.

What do you think about it?

Embedding dashboard is not working , configuration done as mentioned in "/embed-dashboards-on-page.md" .

using , reported error: unknown node type Compound

node: v18.12.0
yarn: 1.22.19
cli: 0.26.2 (installed)
backstage: 1.25.2

Dependencies:
@backstage/app-defaults 1.5.3
@backstage/backend-app-api 0.4.3, 0.6.2
@backstage/backend-common 0.18.5, 0.21.6
@backstage/backend-defaults 0.2.16
@backstage/backend-dev-utils 0.1.4
@backstage/backend-openapi-utils 0.1.9
@backstage/backend-plugin-api 0.5.2, 0.6.16
@backstage/backend-tasks 0.5.21
@backstage/backend-test-utils 0.3.6
@backstage/catalog-client 1.6.3
@backstage/catalog-model 1.4.5
@backstage/cli-common 0.1.13
@backstage/cli-node 0.2.4
@backstage/cli 0.26.2
@backstage/config-loader 1.7.0
@backstage/config 1.2.0
@backstage/core-app-api 1.12.3
@backstage/core-compat-api 0.2.3
@backstage/core-components 0.12.5, 0.13.10, 0.14.3
@backstage/core-plugin-api 1.9.1
@backstage/dev-utils 1.0.30
@backstage/errors 1.2.4
@backstage/eslint-plugin 0.1.6
@backstage/frontend-app-api 0.6.3
@backstage/frontend-plugin-api 0.6.3
@backstage/integration-aws-node 0.1.12
@backstage/integration-react 1.1.25
@backstage/integration 1.9.1
@backstage/plugin-api-docs 0.11.3
@backstage/plugin-app-backend 0.3.64
@backstage/plugin-app-node 0.1.16
@backstage/plugin-auth-backend-module-atlassian-provider 0.1.8
@backstage/plugin-auth-backend-module-aws-alb-provider 0.1.8
@backstage/plugin-auth-backend-module-gcp-iap-provider 0.2.11
@backstage/plugin-auth-backend-module-github-provider 0.1.13
@backstage/plugin-auth-backend-module-gitlab-provider 0.1.13
@backstage/plugin-auth-backend-module-google-provider 0.1.13
@backstage/plugin-auth-backend-module-guest-provider 0.1.2
@backstage/plugin-auth-backend-module-microsoft-provider 0.1.11
@backstage/plugin-auth-backend-module-oauth2-provider 0.1.13
@backstage/plugin-auth-backend-module-oauth2-proxy-provider 0.1.9
@backstage/plugin-auth-backend-module-oidc-provider 0.1.7
@backstage/plugin-auth-backend-module-okta-provider 0.0.9
@backstage/plugin-auth-backend 0.22.3
@backstage/plugin-auth-node 0.2.14, 0.4.11
@backstage/plugin-auth-react 0.0.3
@backstage/plugin-badges-backend 0.3.13
@backstage/plugin-badges 0.2.57
@backstage/plugin-catalog-backend-module-gitlab 0.3.14
@backstage/plugin-catalog-backend-module-ldap 0.5.32
@backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.14
@backstage/plugin-catalog-backend 1.21.0
@backstage/plugin-catalog-common 1.0.22
@backstage/plugin-catalog-graph 0.4.3
@backstage/plugin-catalog-import 0.10.9
@backstage/plugin-catalog-node 1.11.0
@backstage/plugin-catalog-react 1.11.2
@backstage/plugin-catalog 1.18.2
@backstage/plugin-devtools-backend 0.3.2
@backstage/plugin-devtools-common 0.1.9
@backstage/plugin-devtools 0.1.12
@backstage/plugin-events-backend 0.3.3
@backstage/plugin-events-node 0.3.2
@backstage/plugin-github-actions 0.6.14
@backstage/plugin-home-react 0.1.11
@backstage/plugin-home 0.7.2
@backstage/plugin-kubernetes-backend 0.16.4
@backstage/plugin-kubernetes-common 0.7.5
@backstage/plugin-kubernetes-node 0.1.10
@backstage/plugin-kubernetes-react 0.3.3
@backstage/plugin-kubernetes 0.11.8
@backstage/plugin-org 0.6.23
@backstage/plugin-permission-backend-module-allow-all-policy 0.1.13
@backstage/plugin-permission-backend 0.5.40
@backstage/plugin-permission-common 0.7.13
@backstage/plugin-permission-node 0.7.27
@backstage/plugin-permission-react 0.4.21
@backstage/plugin-proxy-backend 0.4.14
@backstage/plugin-scaffolder-backend-module-azure 0.1.8
@backstage/plugin-scaffolder-backend-module-bitbucket-cloud 0.1.6
@backstage/plugin-scaffolder-backend-module-bitbucket-server 0.1.6
@backstage/plugin-scaffolder-backend-module-bitbucket 0.2.6
@backstage/plugin-scaffolder-backend-module-gerrit 0.1.8
@backstage/plugin-scaffolder-backend-module-gitea 0.1.6
@backstage/plugin-scaffolder-backend-module-github 0.2.6
@backstage/plugin-scaffolder-backend-module-gitlab 0.3.2
@backstage/plugin-scaffolder-backend 1.22.3
@backstage/plugin-scaffolder-common 1.5.1
@backstage/plugin-scaffolder-node 0.4.2
@backstage/plugin-scaffolder-react 1.8.3
@backstage/plugin-scaffolder 1.19.2
@backstage/plugin-search-backend-module-catalog 0.1.21
@backstage/plugin-search-backend-module-pg 0.5.25
@backstage/plugin-search-backend-module-techdocs 0.1.21
@backstage/plugin-search-backend-node 1.2.20
@backstage/plugin-search-backend 1.5.6
@backstage/plugin-search-common 1.2.11
@backstage/plugin-search-react 1.7.9
@backstage/plugin-search 1.4.9
@backstage/plugin-shortcuts 0.3.22
@backstage/plugin-sonarqube-backend 0.2.18
@backstage/plugin-sonarqube-react 0.1.14
@backstage/plugin-sonarqube 0.7.15
@backstage/plugin-tech-insights-backend-module-jsonfc 0.1.48
@backstage/plugin-tech-insights-backend 0.5.30
@backstage/plugin-tech-insights-common 0.2.12
@backstage/plugin-tech-insights-node 0.5.2
@backstage/plugin-tech-insights 0.3.25
@backstage/plugin-tech-radar 0.7.2
@backstage/plugin-techdocs-backend 1.10.3
@backstage/plugin-techdocs-module-addons-contrib 1.1.8
@backstage/plugin-techdocs-node 1.12.2
@backstage/plugin-techdocs-react 1.2.2
@backstage/plugin-techdocs 1.10.3
@backstage/plugin-user-settings 0.8.4
@backstage/release-manifests 0.0.11
@backstage/test-utils 1.5.3
@backstage/theme 0.2.19, 0.4.4, 0.5.2
@backstage/types 1.1.1
@backstage/version-bridge 1.0.7

Hello!

I'm trying to build out some unit tests against our implementation of this plugin, and I don't have the ability to easily mock out the API Client details, like I would be able to with other plugins (eg: with the Github CI/CD tab that Backstage uses).

Hoping it'd be not too much of a lift to enable those endpoints to be exposed out of the plugin?

Trying to add the grafana plugin to a new Backstage app and encountering the following error when attempting to load Backstage after adding the plugin:

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465:1)
    at Object.useRef (react.development.js:1504:1)
    at Object.useAsyncFn [as default] (useAsyncFn.js:9:1)
    at useAsync (useAsync.js:8:1)
    at useConfigLoader (index.esm.js:2285:1)
    at Provider (index.esm.js:2381:1)
    at ProxyFacade (react-hot-loader.development.js:830:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)

AFAICT this is being caused by mismatched versions of React (16 in the grafana plugin vs 17 in backstage):
backstage/backstage#9119

Will the plugin be updated to support Backstage with React 17?

On an unrelated side note, for anyone else having trouble installing the grafana plugin it looks like the Backstage scaffold no longer includes a plugins.tsx file. The Backstage shortcuts plugin includes documentation on how to add a plugins.ts file to the app again:
https://github.com/backstage/backstage/blob/master/plugins/shortcuts/README.md#troubleshooting

I want to see a dashboard's graphs directly in Backstage

Ideally there is a component DashboardGraphs which takes in a single prop dashboardId

I see 2 options to implement this:

1. An iframe with the link directly to the dashboard page (https://mygrafana.xom/d/dashboardId). But this will also show the navigation, the edit controls etc...
2. The component makes a request to the Grafana API -> From here I can find all the panels and their IDs -> I generate a separate iframe for each panel, using the d-solo options (https://mygrafana.xom/d-solo/dashboardId/dashboardSlug?panelId=1 (I can get dashboardSlug from the same API request)

Option 2 seems better for me. It's more compact and there is no risk of navigating / editing. I'm just not sure if all the different iframes will have an impact on the perfomance...

I'm available to work on this. I would just like some input to make this better for everyone else!

Current Behavior

The alert state is not surfaced on the EntityGrafanaAlertsCard component when using Grafana Unified Alerting.

Expected Behavior

We expect that the alert state be surfaced on the EntityGrafanaAlertsCard component when using Grafana Unified Alerting, just as it is for the Grafana Legacy Alerts.

Troubleshooting

We identified that the alert state is intentionally disabled when using Grafana Unified Alerting. We suspect this was the case as the API that is currently used to retrieve the alerts (/api/ruler/grafana/api/v1/rules) does not return the alert state.

Can you provide context as to why the /api/ruler/grafana/api/v1/rules endpoint was chosen?

Possible Solutions

The /api/prometheus/grafana/api/v1/alerts endpoint could be called in conjunction with the /api/ruler/grafana/api/v1/rules endpoint to retrieve the alert state.

Alternatively, the /api/prometheus/grafana/api/v1/rules endpoint appears to return the majority of the needed information, however this does not seem to include rule_uid.

It should upgrade the dependencies to properly support backstage 1.4.0

I tried to use with folderTitle variable like folderTitle @> 'foo' expecting it to find dashboards that are in folder that have foo in title. Instead, I'm getting error @> operator can only be used on an array.

Dashboard component is not usable without entity context, even though only the entity tags are required in order to work.

I propose a modification of the component so it can be used like this:

Hi,
I've encountered a problem while trying to add the Grafana plugin to the Backstage.

I have a Grafana tile on the component page but it shows an error:

Error

Missing required config value at 'grafana.domain'

Error: Missing required config value at 'grafana.domain'
    at I.getString (http://localhost:7007/static/module-backstage.43ebf01d.js:9:31881)
    at Object.factory (http://localhost:7007/static/module-k-phoen.ad3b7d0d.js:1:5163)
    at Y.load (http://localhost:7007/static/module-backstage.43ebf01d.js:9:34243)
    at Y.get (http://localhost:7007/static/module-backstage.43ebf01d.js:9:33998)
    at n (http://localhost:7007/static/module-backstage.43ebf01d.js:40:85264)
    at y (http://localhost:7007/static/870.829e099c.chunk.js:1:1011)
    at Gl (http://localhost:7007/static/module-react-dom.cde93b43.js:12:52799)
    at hs (http://localhost:7007/static/module-react-dom.cde93b43.js:16:8596)
    at cs (http://localhost:7007/static/module-react-dom.cde93b43.js:16:930)
    at Za (http://localhost:7007/static/module-react-dom.cde93b43.js:16:861)

Plugin installed as described here: https://github.com/K-Phoen/backstage-plugin-grafana/blob/main/docs/index.md#installation

My configuration:

EntityPage.tsx

import { EntityGrafanaDashboardsCard } from '@k-phoen/backstage-plugin-grafana';
// ...
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    (...)
    <Grid item md={6}>
      <EntityGrafanaDashboardsCard />
    </Grid>
    (...)
  </Grid>
);

app-config.yaml

proxy:
//...
  '/grafana/api':
    target: https://grafana.my.tech
    headers:
      Authorization: Bearer {API_token}

//...      
      
grafana:
  domain: https://grafana.my.tech
  unifiedAlerting: false

catalog-info.yaml

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: Training
  description: Training
  annotations:
    grafana/dashboard-selector: alerts-test

In config.d.ts. of the plugin there is domain: string declared in the Config interface.

I have also a Sonarqube plugin and it does not have problem with baseUrl.
Backstage is running localy in Docker container. Network traffic to Grafana is open.

When I tried to Embed dashboards on a component page (as described here:
https://github.com/K-Phoen/backstage-plugin-grafana/blob/main/docs/embed-dashboards-on-page.md )
I've got grafana.my.tech is blocked so I assume in that case grafana.domain value has been passed as expected.

I will be grateful for help.

I'd like to hide theEntityGrafanaDashboardsCard if the annotation is not defined for the entity.
This is commonly done in other plugin with someting similar to:

    <EntitySwitch>
      <EntitySwitch.Case if={isDashboardSelectorAvailable}>
        <Grid item sm={6}>
          <EntityGrafanaDashboardsCard />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>

But here, the snippet does not work since isDashboardSelectorAvailable is not a boolean for some reasons.
I believe we should have someting like

// src/components/grafanaData.ts
export const isDashboardSelectorAvailable = (entity: Entity) => Boolean(entity?.metadata.annotations?.[GRAFANA_ANNOTATION_DASHBOARD_SELECTOR] || entity?.metadata.annotations?.[GRAFANA_ANNOTATION_TAG_SELECTOR]);

instead of

// src/components/grafanaData.ts
export const isDashboardSelectorAvailable = (entity: Entity) => entity?.metadata.annotations?.[GRAFANA_ANNOTATION_DASHBOARD_SELECTOR] || entity?.metadata.annotations?.[GRAFANA_ANNOTATION_TAG_SELECTOR];

What do you think ?
Please let me know if you want me to open a PR.

Thanks in advance

I have followed the explanation to add the plugin to backstage but when building I have the following error

Failed to compile.


Error: Failed to compile.
./src/components/catalog/EntityPage.tsx 217:6
Module parse failed: Identifier 'overviewContent' has already been declared (217:6)
File was processed with these loaders:
 * ../../node_modules/@sucrase/webpack-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| );
|
> const overviewContent = (
|   React.createElement(Grid, { container: true, spacing: 3, alignItems: "stretch",}
|     , React.createElement(EntitySwitch, null

I am a noob in js, nodes and type script.

We are trying to make use of this plugin. We encountered an issue when trying to display dashboards in the component page.

This is the example dashboard we are using, but we are not getting any response.
grafana/dashboard-selector: "url == 'https://<grafana-url>/d/<dashboard-id>/<dashboard-name>?orgId=1'"

But it's working fine when we use folder url mentioned belw:
https://github.com/K-Phoen/backstage-plugin-grafana/blob/main/docs/dashboards-on-component-page.md

Could you please help take a look into this issue?

What is the reason behind using tags? It's almost useless, consider you have a bunch of boards for K8S monitoring and they all have one tag and you don't have permission to change this but you only need one exact dashboard about pod resources for your services. So when you push this tag to backstage, you get a useless list with many links.
And for the alerts - do you have any examples where one use the same tag for dashboard and a couple of alerts? (usually you create more then one alert in Grafana for an object).
I guess the best way is to get dashboards by UID, which one can pick up easily and it won't be changed or deleted.
And for alerts it's better to have dedicated parameter in config and query them by name.
Also both parameters should accept more then one value.
Regards.

Hi :-) I'm currently getting a 500 gateway timeout in backstage after deploying the plugin to a/ the sample application:
GET http://localhost:7007/api/proxy/grafana/api/api/alerts?dashboardTag=my-tag 500 (Internal Server Error)

I've followed the installation steps, as: https://github.com/K-Phoen/backstage-plugin-grafana/blob/main/docs/index.md#installation
and my proxy settings look like:
proxy:
 '/grafana/api':
  # May be a public or an internal DNS
  target: http://grafana.host:8080/
  headers:
   Authorization: Bearer ${GRAFANA_TOKEN}
grafana:
 domain: http://localhost:8080

And my prometheus/ grafana is locally hosted/ localhost.

It seems proxy-related but I'm not sure. Has anyone seen/ have related ideas on this? Do I need to adopt certain host/ port conventions?

Thanks :-)

Hello, me again! :)

I've been trying to import the alerts from Grafana using the plugin, but for some reason it can't find them when I'm using Grafana Cloud.

I've followed the instructions, and my catalog-info.yaml looks like this:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: Mventory
  description: The inventory backend for Makerspaces
  annotations:
    grafana/tag-selector: "mventory"
spec:
  type: service
  owner: [email protected]
  lifecycle: production
  providesApis:
    - mventory-api
---
apiVersion: backstage.io/v1alpha1
kind: API
metadata:
  name: mventory-api
  description: The MVentory API
spec:
  type: internal
  lifecycle: production
  owner: [email protected]
  definition: "The MVentory API"

The challenge I'm having is that in Grafana Cloud it uses the new Grafana Alerts platform and you can't tag an alert, you can only tag a dashboard.

I've tagged the dashboard as appropriate, but the alerts are still not showing up:

I'm also struggling to work out how to debug a plugin within Backstage, so I can't really provide you with any relevant log entries because they just come back as the equivalent of "successful, no data was found".

Thanks for this awesome plugin,

i tried to setup this locally in my backstage instance, but i getting this error Missing required config value at 'grafana.domain',
as i see for every plugin there are front end and backend but in grafana plugin setup there is only frontend.

and

Expose the plugin to Backstage:

// packages/app/src/plugins.tsx

// other plugins...

export { grafanaPlugin } from '@k-phoen/backstage-plugin-grafana';

is this export required, beacuse for other plugins it is not required i guess, correct me if i am not right.

Is it possible to configure multiple environments of grafana?

E.g.
grafana-dev.example.com
grafana-qa.example.com
grafana.example.com

I have installed and configured grafana plugin in Backstage, but now when I am specifying proper annotation for grafana plugin it is giving 401 error:

app-config.yaml conf for Grafana:

proxy:
  '/grafana/api':
    target: https://myorg.io
    headers:
      Authorization: GenieKey ${GRAFANA_API_KEY}
grafana:
  domain: https://myorg.io


opsgenie:
  domain: https://proficloud.app.eu.opsgenie.com/

Backstage Logs Related to Grafana Plugin:

[1] 2022-09-30T10:22:13.093Z proxy info [HPM] Proxy created: /grafana/api  -> https://myorg.io type=plugin
[1] 2022-09-30T10:22:13.093Z proxy info [HPM] Proxy rewrite rule created: "^/api/proxy/grafana/api/?" ~> "/" type=plugin


[1] 2022-09-30T10:22:53.250Z backstage info 192.168.63.1 - - [30/Sep/2022:10:22:53 +0000] "GET /api/proxy/grafana/api/api/alerts?dashboardTag=prometheus HTTP/1.1" 401 85 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36" type=incomingRequest
[1] 2022-09-30T10:22:53.268Z backstage info 192.168.63.1 - - [30/Sep/2022:10:22:53 +0000] "GET /api/proxy/grafana/api/api/search?type=dash-db&tag=prometheus HTTP/1.1" 401 85 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36" type=incomingRequest

Backstage-cli-info

[backstage@backstage backstage-conf-repo_my]$ yarn backstage-cli info
yarn run v1.22.19
$ /home/backstage/backstage-conf-repo_my/node_modules/.bin/backstage-cli info
OS:   Linux 3.10.0-1160.71.1.el7.x86_64 - linux/x64
node: v16.14.0
yarn: 1.22.19
cli:  0.17.2 (installed)

Dependencies:
  @backstage/app-defaults                          1.0.3
  @backstage/backend-common                        0.0.0-nightly-20220923030237, 0.14.1, 0.15.1
  @backstage/backend-plugin-api                    0.1.0
  @backstage/backend-tasks                         0.3.3
  @backstage/catalog-client                        0.0.0-nightly-20220923030237, 0.5.5, 1.1.0
  @backstage/catalog-model                         0.0.0-nightly-20220923030237, 0.9.10, 1.1.1
  @backstage/cli-common                            0.1.10
  @backstage/cli                                   0.17.2
  @backstage/config-loader                         0.0.0-nightly-20220923030237, 1.1.4
  @backstage/config                                0.0.0-nightly-20220923030237, 0.1.15, 1.0.2
  @backstage/core-app-api                          1.0.3
  @backstage/core-components                       0.0.0-nightly-2022122206, 0.10.0, 0.11.1, 0.9.5
  @backstage/core-plugin-api                       0.0.0-nightly-20220923030237, 0.6.1, 1.0.6
  @backstage/errors                                1.1.0, 0.0.0-nightly-20220923030237, 0.2.2, 1.1.1
  @backstage/integration-react                     1.1.2
  @backstage/integration                           0.0.0-nightly-20220923030237, 0.7.5, 1.3.1
  @backstage/plugin-api-docs                       0.8.6
  @backstage/plugin-app-backend                    0.3.33
  @backstage/plugin-auth-backend                   0.14.1
  @backstage/plugin-auth-node                      0.2.3
  @backstage/plugin-catalog-backend-module-github  0.1.5
  @backstage/plugin-catalog-backend                1.3.0
  @backstage/plugin-catalog-common                 1.0.6
  @backstage/plugin-catalog-graph                  0.2.18
  @backstage/plugin-catalog-import                 0.8.9
  @backstage/plugin-catalog-node                   1.0.0
  @backstage/plugin-catalog-react                  0.0.0-nightly-2022122206, 1.1.4
  @backstage/plugin-catalog                        1.3.0
  @backstage/plugin-github-actions                 0.5.6
  @backstage/plugin-home                           0.4.23
  @backstage/plugin-org                            0.5.6
  @backstage/plugin-permission-common              0.4.0, 0.5.3, 0.6.4
  @backstage/plugin-permission-node                0.6.3
  @backstage/plugin-permission-react               0.3.4, 0.4.5
  @backstage/plugin-proxy-backend                  0.2.27
  @backstage/plugin-scaffolder-backend             1.3.0
  @backstage/plugin-scaffolder-common              1.1.2
  @backstage/plugin-scaffolder                     1.3.0
  @backstage/plugin-search-backend-module-pg       0.3.4
  @backstage/plugin-search-backend-node            0.6.2
  @backstage/plugin-search-backend                 0.5.3
  @backstage/plugin-search-common                  0.3.5, 1.0.1
  @backstage/plugin-search-react                   0.2.1
  @backstage/plugin-search                         0.9.0
  @backstage/plugin-shortcuts                      0.2.8
  @backstage/plugin-stack-overflow                 0.1.3
  @backstage/plugin-tech-radar                     0.5.13
  @backstage/plugin-techdocs-backend               1.1.2
  @backstage/plugin-techdocs-module-addons-contrib 1.0.1
  @backstage/plugin-techdocs-node                  1.1.2
  @backstage/plugin-techdocs-react                 1.0.1
  @backstage/plugin-techdocs                       1.2.0
  @backstage/plugin-todo-backend                   0.0.0-nightly-20220923030237, 0.1.33
  @backstage/plugin-todo                           0.0.0-nightly-20220923030237
  @backstage/plugin-user-settings                  0.4.5
  @backstage/release-manifests                     0.0.4
  @backstage/test-utils                            1.1.1
  @backstage/theme                                 0.2.16
  @backstage/types                                 0.1.3, 1.0.0
  @backstage/version-bridge                        0.1.2, 1.0.1
Done in 0.50s.

Will this plugin be ported to the new versions of these dependencies? Backstage seems to make the move soon.

Hi,
Thanks for the plugin, its awesome :).

Is there a way to configure multiple Grafana Instance on the app-config.yaml?.

Hi,

I'm back looking at this again and I'm struggling to get it authenticating with Grafana Cloud.

I have the following configuration:

proxy:
  '/grafana/api':
    target: ${GRAFANA_URI}
    headers:
      Authorization: Bearer ${GRAFANA_TOKEN}

grafana:
  # Publicly accessible domain
  domain: ${GRAFANA_URI}

and GRAFANA_URI is set to https://<myaccount>.grafana.net/ with GRAFANA_TOKEN set to the appropriate value from the grafana.com console.

In the UI, I'm seeing

but even though LOG_LEVEL is set to debug, I can't see any debug messages from the plugin in the logs.

Is there a way to enable debug logging via environment variables for this plugin, or another way to troubleshoot it?

I am trying to use EntityOverviewDashboardViewer in order to view in my component a graph from grafana.
I managed to view the page of grafana after enabling allow_embedding = true in my grafana, but when I try to login to grafana it keeps sending me again to the login page even though the login was successful .

Important things to know:
I tried also to use port-forwarding for grafana and when I used it it worked but when I use the endpoint configured in the ingress it does not work.
Also., I have noticed that when I use the ingress I get reposnse 302 from grafana.
It is only happening when I try to use the backstage plugin. when I use it from browser everything is working as usual
Can you please assist ?

I am seeing alert names in Backstage when using the EntityGrafanaAlertsCard but the state column is missing. Similar to the open issue for when unified is true but in my case this is happening with unified alerting set to false.

I am using version 0.1.22

Is this still up-to-date?
https://github.com/K-Phoen/backstage-plugin-grafana/blob/main/docs/setup.md

I don't have the plugin.tsx file (packages/app/src/plugins.tsx) on a fresh backstage installation.

When setting the annotation in a catalog I get the following error in the logs:
2023-02-03T14:21:34.031Z proxy error [HPM] Error occurred while proxying request localhost:7007/api/search?type=dash-db&tag=kubernetes-mixin to https://grafana.mgmtbi.ch/ [EPROTO] (https://nodejs.org/api/errors.html#errors_common_system_errors) type=plugin

Hi,

We would like to set multiple dashboards + some generic ones on each of our components, this would require us to use multiple tags that act as OR to display these dashboards that use different tags.

e.g.

genericdash1 with tags: generic
genericdash2 with tags: generic
specificAdash with tags: specificA
specificBdash with tags: specificB

For component specificA and component specificB we would like to display their own dashboard with corresponding tag but also the generic one. Instead of adding the specific[A-Z] tag to the generic dashboards, I would suggest adding some extra logic to handle a list of tags as an OR operation to display multiple dashboards.

We can also use this suggestion to allow the declaration of multiple tags e.g. /api/search?tag=app&tag=specificA that by default works in an AND way in the Grafana API.

Simple suggestion as example but could definitely use feedback:

grafana/tag-selector: "specificA, generic"
grafana/method: "OR"

https://github.com/grafana/grafana-iframe-oauth-sample

Similar to this -- my problem is that setting samesite to 'none' breaks okta auth for grafana.

It seems like the jwt auth is the current supported way of having embedded dashboards that are behind auth, and it would require some support at the plugin level to get the token i believe.

Hey,

This is awesome, I'd love to get it working!

I've followed the instructions to install it, however when I add the details to EntityPage.tsx I get the following error when I access a resource:

[0] ERROR in ./src/components/catalog/EntityPage.tsx 63:0-65:43
[0] Module not found: Error: Can't resolve '@k-phoen/backstage-plugin-grafana' in '/<REDACTED>/home-backstage/packages/app/src/components/catalog'
[0] 
[0] webpack compiled with 1 error

I'm not a JS Dev at all, but I love the idea of having all this data into my Backstage installation - where should I start looking to troubleshoot this?

Relevant config

EntityPage.tsx

import {
  EntityGrafanaAlertsCard,
} from '@k-phoen/backstage-plugin-grafana';

...

  const overviewContent = (
    <Grid container spacing={3} alignItems="stretch">
      {entityWarningContent}
      <Grid item md={4}>
        <EntityAboutCard variant="gridItem" />
      </Grid>
     <Grid item md={6}>
       {/* Grafana alert card start */}
       <EntityGrafanaAlertsCard />
       {/* Grafana alert card end */}
     </Grid>

packages/app/src/plugins.tsx

export { grafanaPlugin } from '@k-phoen/backstage-plugin-grafana';

Note that this is the only entry in that file?

Is it possible to search for tags in other orgs? Here we use more than one Organization and from what I understand the plugin is only looking for tags in Org=1.

Thanks!

Stack Trace:

Error: Missing required config value at 'grafana.domain'
    at ConfigReader.getString (webpack-internal:///../../node_modules/@backstage/config/dist/index.esm.js:183:13)
    at Object.factory (webpack-internal:///../../node_modules/@k-phoen/backstage-plugin-grafana/dist/esm/index-b703a46a.esm.js:81:27)
    at ApiResolver.load (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:215:25)
    at ApiResolver.get (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:200:17)
    at useApi (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/index.esm.js:99:25)
    at Dashboards (webpack-internal:///../../node_modules/@k-phoen/backstage-plugin-grafana/dist/esm/index-b370840e.esm.js:53:88)
    at renderWithHooks (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:14804:18)
    at mountIndeterminateComponent (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:17483:13)
    at beginWork (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:18597:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:189:14)

However, in my app-config.yaml I have:

proxy:
  '/test':
    target: 'https://example.com'
    changeOrigin: true
  '/pagerduty':
    target: https://api.pagerduty.com
    headers:
      Authorization: Token token=${PAGERDUTY_TOKEN}
  '/grafana/api':
    # May be an internal DNS
    target: https://grafana.mycompany.dev
    headers:
      Authorization: Bearer ${GRAFANA_TOKEN}

grafana:
  # Publicly accessible domain
  domain: https://grafana.mycompany.dev

Do I need to set the domain somewhere else?

Found this plugin and gave it a test run. The goal:

On a Group entity page, list the dashboards owned by the group.

First I added simple tag selectors like this:

apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: team-atlas
  annotations:
    grafana/dashboard-selector: "owner:team-atlas"

Result:

Unexpected ":" at character 5

However this worked:

apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: team-atlas
  annotations:
    grafana/dashboard-selector: "tags @> 'owner:team-atlas'"

Hi,

Great to see this work!
I know it's not "ready" yet, but I tested it out and seems that I can not authenticate against my grafana, I always get 401 Unauthorized. I guess that I could something wrong also though...
When I am trying the same auth token localy, it works fine.

Hi,

I am trying to get the plugin up and running as part of a POC for my company as we would like to bring this into our space however I am getting the below error:

Module not found: Error: Can't resolve '@k-phoen/backstage-plugin-grafana' in '/home/qsmidt/backstage-1/packages/app/src/components/catalog'

I have tried running the install command : cd packages/app && yarn add @k-phoen/backstage-plugin-grafana with the following output:

`cd packages/app && yarn add @k-phoen/backstage-plugin-grafana
yarn add v1.22.19
warning package.json: "dependencies" has dependency "react" with range "^17.0.2" that collides with a dependency in "devDependencies" of the same name with version "^16.14.0"
warning package.json: "dependencies" has dependency "react-dom" with range "^17.0.2" that collides with a dependency in "devDependencies" of the same name with version "^15.0.0"
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["app@link:packages/app"] is trying to unpack in the same destination "/home/qsmidt/.cache/yarn/v6/npm-app-0.0.0/node_modules/app" as pattern ["[email protected]","[email protected]"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "@types/react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "react-dom@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "@types/react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "@types/react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @backstage/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/plugin-data-file-plugin > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/plugin-data-file-plugin > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > [email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@k-phoen/backstage-plugin-grafana > [email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/plugin-data-file-plugin > @backstage/[email protected]" has unmet peer dependency "@types/react@^16.13.1 || ^17.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/plugin-data-file-plugin > @backstage/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/plugin-data-file-plugin > @backstage/[email protected]" has unmet peer dependency "react-dom@^16.13.1 || ^17.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @internal/plugin-data-file-plugin > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @backstage/cli > @hot-loader/[email protected]" has unmet peer dependency "react@^16.14.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @backstage/cli > @hot-loader/[email protected]" has unmet peer dependency "[email protected]".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @backstage/cli > @svgr/[email protected]" has unmet peer dependency "@svgr/core@^6.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @backstage/cli > @svgr/[email protected]" has unmet peer dependency "@svgr/core@^6.0.0".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @backstage/cli > [email protected]" has unmet peer dependency "react@^15.0.0 || ^16.0.0 || ^17.0.0 ".
warning "workspace-aggregator-3ef177af-8e4e-41aa-80f4-2278598a37ac > @backstage/cli > [email protected]" has unmet peer dependency "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 ".
warning " > @k-phoen/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning " > @k-phoen/[email protected]" has unmet peer dependency "react-dom@^16.13.1 || ^17.0.0".
warning "@k-phoen/backstage-plugin-grafana > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0".
warning "@k-phoen/backstage-plugin-grafana > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0".
[4/4] Building fresh packages...
warning Error running install script for optional dependency: "/home/qsmidt/backstage-1/node_modules/cpu-features: Command failed.
Exit code: 1
Command: node buildcheck.js > buildcheck.gypi && node-gyp rebuild
Arguments:
Directory: /home/qsmidt/backstage-1/node_modules/cpu-features
Output:
/home/qsmidt/backstage-1/node_modules/buildcheck/lib/index.js:115
throw new Error('Unable to detect compiler type');
^

Error: Unable to detect compiler type
at BuildEnvironment.getKind (/home/qsmidt/backstage-1/node_modules/buildcheck/lib/index.js:115:9)
at BuildEnvironment.tryCompile (/home/qsmidt/backstage-1/node_modules/buildcheck/lib/index.js:537:15)
at BuildEnvironment.checkHeader (/home/qsmidt/backstage-1/node_modules/buildcheck/lib/index.js:423:25)
at Object. (/home/qsmidt/backstage-1/node_modules/cpu-features/buildcheck.js:16:4)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47"
info This module is OPTIONAL, you can safely ignore this error
success Saved 1 new dependency.
info Direct dependencies
info All dependencies
└─ @k-phoen/[email protected]
Done in 12.53s.`

Any info to get me going in the right direction would be greatly appreciated.