AngularJS support will be removed in Grafana 12: what you need to know

Last year, we detailed our plan to phase out legacy AngularJS support in Grafana, following its deprecation in Grafana 9 in favor of React. As part of this transition, AngularJS support was disabled by default in Grafana 11, but users could re-enable it through the angular_support_enabled=true toggle. 

With the release of Grafana 12 — scheduled for early May, with Grafana Cloud instances getting the update in April — we are taking the final step: AngularJS support will be fully removed in all Grafana OSS, Cloud, and Enterprise instances.

This means that you will no longer be able to enable AngularJS in your instances. If you are still relying on Angular-based plugins or panels, it’s critical to migrate now to avoid disruptions.

In this blog post, we will review the steps you can take to determine if you’re impacted, as well as provide guidance on how to migrate, so you can ensure a smooth experience with Grafana 12.

How do I know if I’m using Angular-based plugins in Grafana?

We covered this in detail in a previous blog post, but as a brief reminder, there are four ways to tell if your instance is impacted:

• In dashboards: A warning icon and banner are displayed when editing a dashboard that uses an AngularJS panel plugin or data source, and a warning banner is displayed at the top of a dashboard when there is any AngularJS plugin dependency, as shown below.
• On the Plugins page in Grafana: Plugins that have a dependency on AngularJS or are deprecated display a warning icon.
• Checking Grafana documentation: We list every plugin that has ever depended on AngularJS. If the plugin has been subsequently updated to React, we provide the minimum plugin version to update to, as well as potential alternative plugins that can either replace the original plugin or provide similar functionality.
• Listing all your dashboards with a dependency on Angular: We created detect-angular-dashboards, an open source tool that allows you to query a given Grafana instance for a list of all dashboards that have a dependency on AngularJS plugins.

Note: Any users who started using Grafana OSS, Cloud, and Enterprise with v11.0 (released in May 2024) or subsequent minor releases will have AngularJS disabled by default, and therefore shouldn’t notice any difference when AngularJS support is removed in Grafana 12.

How to plan your AngularJS migration

We also cover this topic in detail in our previous blog post, but here’s a summary: 

• Check if you are running the latest version of a plugin. A large number of Angular-based plugins have been updated to React, and you can avoid disruption simply with an update. 
• Search for the plugin in our documentation to find any available migration advice. 
• Start your migrations. Prioritize your most important impacted dashboards. If using Grafana Enterprise or Grafana Cloud, you can use usage insights to help with this prioritization.
• Try removing AngularJS support on your instance prior to Grafana 12 to verify everything is working as expected.

How to migrate from an AngularJS plugin in Grafana

Core (pre-installed) visualization panels will be migrated automatically. Automatic migration is supported for the plugins shown in the following table. Each of the target plugins is also included in Grafana and doesn’t require installation.

*The auto-migration for the Graph (old) will target one of these four panels depending on the previous Graph configuration.

You will need to click Save to persist these changes. If you don’t, the migration will re-run every time the dashboard loads and it can become difficult to separate changes made by the migration vs. user-initiated changes. 

If a dashboard uses Angular-based plugins other than those listed above, it will not be automatically migrated. You will need to select and configure a replacement plugin manually: 

• For data source plugins, you will need to install and configure an appropriate data source, then select it within a query editor for a dashboard panel. 
• Similarly, panel plugins will need to be installed, selected as the chosen visualization, and then configured as appropriate to display your data.

The case of provisioned dashboards

Even if auto-migration applies, you won’t be able to save provisioned dashboards through the UI. In such cases, you will have to either copy/paste the auto-migrated dashboard JSON into your provisioning source (e.g., Git or a configuration file), or manually update the dashboard at its source.

What will happen when AngularJS is finally removed?

If your instance has been running with AngularJS disabled, you won’t see any difference, but we still encourage you to migrate any affected dashboards. However, if you have enabled AngularJS to continue using plugins or dashboards built with it, you will be affected.

Plugins dependent on AngularJS will fail to load. They will not appear as installed in the plugin catalog, previously configured data sources using such plugins will not show up in the data sources list, and any dashboard panels requiring these plugins will display an error message, such as Error loading: plugin_name or Panel plugin not found: plugin_name.

Plugins that automatically migrate to their React replacements will be loaded instead.

Configuration is not lost. The dashboard.json remains intact and can be edited to use an alternative plugin.

In summary 

Once Grafana 12 is released, AngularJS support will be fully and permanently removed. There will be no way to re-enable it. Ensure your dashboards and plugins are updated in advance to avoid disruptions:

• Plan your migration before Grafana 12 to avoid surprises.
• Check for any dependency on AngularJS plugins via in-product warnings and use of our tooling.
• Review the guidance to update or migrate as appropriate.

We want to reiterate that we know deprecations of this scale are never easy. We hope this guidance helps, but if you have any questions at all or run into any issues, please feel free to reach out on either GitHub or our community forum.