[!] bump Grafana to v11

[muni106]

Description
This pull request addresses the impending deprecation of AngularJS support in Grafana starting from version 11. To ensure continued functionality and compatibility, I have migrated the majority of the panels from AngularJS to React. The migration process involved careful comparison of the new React panels with their previous AngularJS counterparts to ensure parity in functionality and appearance.

Changes Made

1. Migrated panels from AngularJS to React.
2. Conducted thorough comparison between old and new panels to verify consistency.
3. Updated all links to ensure compatibility with the new version.
4. Retained system stats panels in AngularJS temporarily due to lack of testing data; this decision was made to ensure a deliberate and well-informed migration process.

Notes

• System stats panels were not migrated due to the absence of testing data. This decision was made to prioritize stability and ensure that the migration is warranted before altering critical components.
• In the new React panels, two notable changes have been implemented:

1. The grid is no longer displayed when there is no data available, enhancing the clarity of the interface.
2. Row color mode has been replaced with cell color mode, particularly in the "Postgres version Overview" Dashboard, to align with changes in Grafana's specifications.

Testing

• testing was conducted to ensure the functionality and appearance of the migrated panels match their AngularJS counterparts in base of appearance and behavior.

links about migration

• https://grafana.com/docs/grafana/latest/developers/angular_deprecation/
• Epic: [Deprecation] Graph old -> Time series / histogram / bar chart panel features parity and improvements grafana/grafana#49670

Your feedback on the migration process would be greatly appreciated.

[pashagolub]

Hello!

Thanks for your help. It's better to have v11 folder with updated dashboards and keep v10 for backward compatibility.

[muni106]

Hi @pashagolub!!
Thank you for your feedback, I've made the necessary adjustments to the code accordingly, in particular i added a new container for the Grafana latest and restored v10.
Let me know if it's ok ^^

[muni106]

I added a brief documentation for a better understanding of behavior

[pashagolub]

I don't like the tree structure. Please, do not add anything or change unless we agreed on it. v11 folder must be on the same level as v10. No new folders, please. Also prometheus dashboards must be updated. Tree should look like this:

- grafana
  - postgres
    - v10
    - v11
  - prometheus
    - v10
    - v11

It's OK to change docker-compose to use the v11 Grafana image.

Thanks for your help!

[muni106]

Excuse me for not asking before changing the tree structure first, you were right, it's more simpler now and it works better with less complexity, I've made the adjustments asked, and removed the brief documentation as it is no longer necessary, thanks for the feedback again!!

[pashagolub]

Thanks! I will test and review this PR next week due to holidays and vacations.

Please, feel free to improve it if you will find anything else.

Best regards!

[muni106]

very good, happy holidays!!

[pashagolub]

@muni106 what are the steps to migrate old dashboards to new format? Are there any migration scripts/tools?

[muni106]

Hi @pashagolub, how to migrate from old to new dashboards is explained on the docker compose file, you can decide which version to use just by commenting and uncommenting the related volumes, I hope I have resolved your doubts.

[muni106]

instead, if you meant the steps of what I did to migrate the old dashboards to new format: I used the automatic migration tool on the grafana dashboard, but sometimes it works badly, for example links are always broken, in these cases you need to fix things manually from the dashboard

[pashagolub]

No. My question was how to migrare angularjs dashboards to react?

[ondar]

No. My question was how to migrare angularjs dashboards to react?

Grafana have a tool for that. See https://grafana.com/docs/grafana/latest/developers/angular_deprecation/angular-plugins/#automatic-migration-of-plugins

[muni106]

No. My question was how to migrare angularjs dashboards to react?

Grafana have a tool for that.

yes, you can click on edit dashboard and then it suggest you to migrate to the new react version

[pashagolub]

Thanks guys! The reason I'm asking, there are some more dashboards in a wild, e.g. by postgres.ai. Just want to know where to send people with new issues. :)

[muni106]

Thanks guys! The reason I'm asking, there are some more dashboards in a wild, e.g. by postgres.ai. Just want to know where to send people with new issues. :)

I'm happy to have been of help

[pashagolub]

Thanks @muni106! Great work!