grafana-flowcharting icon indicating copy to clipboard operation
grafana-flowcharting copied to clipboard

Compatibility with upcoming Grafana v10.0 ?

Open svestenik opened this issue 1 year ago • 55 comments

Hi,

in pre-relase notes for Grafana 10, it is stated that support for Angular is turned off by default. Hence any plugin not migrated away from Angular will fail to work.

Angular is deprecated and turned off by default for new Grafana Cloud stacks
You are affected if:
You create a new Grafana Cloud stack and intend to use any panel or data source plugins written using the Angular.js JavaScript framework. See the [list of Angular plugins](https://grafana.com/docs/grafana/latest/developers/angular_deprecation/angular-plugins/).

Background
AngularJS is an old frontend framework that stopped active development many years ago. Because of that, it’s a security risk. AngularJS also requires unsafe-eval in the [CSP (Content Security Policy)](https://developer.mozilla.org/en/Security/CSP) settings, which also reduces the security level of how javascript is executed in the browser.

Angular plugin support in Grafana is deprecated, meaning it will be removed in a future release. There are still some community and private plugins built using Angular. Starting with v9.0, Grafana has a server configuration option, called [angular_support_enabled](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#angular_support_enabled), that controls whether Angular plugin support is available.

Change in Grafana v10
Angular is disabled by default for all new Grafana Cloud stacks. Existing stacks in Grafana Cloud, Grafana Enterprise on-premise instances, and Grafana OSS instances will not be automatically impacted.

Are there any plans to move flowcharting plugin from Angular framework ?

svestenik avatar Jun 14 '23 07:06 svestenik

Unfortunately, it does not look like it. Best bet is to migrate to canvas for simpler diagrams and wait for it to mature for more complexe diagrams and worst case run a parallel grafana for one or two diagrams that cannot be migrated. Canvas is nice and ambitious, but far from ready for diagrams with hundreds of rules and objects. It is trying to be a draw.io crossed with a grafana plugin. IMO, it is still a couple of years away from ready, unless they scale up the number of devs on it. I wish them the best, but I feel I will need to go option3 or hold off upgrading for a year or more.. :-(

xkilian avatar Jun 14 '23 14:06 xkilian

Same as my situation.. My network graph using agenty-flowcharting-panel, and now not working anymore... I love draw.io because it's fast for me to build some graphics then connected to the Grafana Prometheus data easily. Now, I need to work from scratch to build the dashboard to use canvas.. :-(

fadjar340 avatar Jun 26 '23 11:06 fadjar340

Please migrate it

yanisbinks avatar Jul 05 '23 08:07 yanisbinks

We need it - please fix this great plugin ! 👍

DM-LUKAD avatar Jul 07 '23 07:07 DM-LUKAD

i believe this is an option to enable support of Angular in 10

        - Name: GF_SECURITY_ANGULAR_SUPPORT_ENABLED
          Value: true

thanissi avatar Jul 13 '23 03:07 thanissi

@thanissi Yes that should work for Grafana 10 but it is to be removed in Grafana 11.

ninkaninus avatar Jul 13 '23 08:07 ninkaninus

of not migrating from angular, will this plugin die slowly ?

celya44 avatar Jul 18 '23 13:07 celya44

Hi @algenty Do you plan to upgrade this plugin to cope with the deprecated Angular?

HakamSaffour avatar Aug 02 '23 12:08 HakamSaffour

I think it's safe to say the project has been abandoned. Either the project should be forked or migrate to Grafana Canvas or some other plugin that can do the job.

RedShift1 avatar Aug 10 '23 09:08 RedShift1

I think it's a huge unrealistic bet that an abandoned project is going to be migrated to an entirely new web framework. +1 because I'd love to still use my dashboards with this epic plugin.

@algenty would be great if we could get info if this project is dead.

abctaylor avatar Aug 29 '23 21:08 abctaylor

Flowchart is a must and will be a pity if the project is abandoned... plse we need for grafana 10

bouyak avatar Aug 30 '23 04:08 bouyak

Such a shame. I love this plugin. I use it for a network Weathermap with Prometheus data feeding it. I suppose I will need to learn Canvas and migrate :/

tomhaslett avatar Sep 06 '23 11:09 tomhaslett

The canvas plugin is still useless for me since it doesn't have an import/export of draw.io. I don't like to redo and lock up my drawings in this clumsy canvas editor.

For me the agenty-flowcharting-panel @1.0.0d) still works in grafana 10.1.1.

Had to make some changes since the metrics are not correctly matching anymore, since grafana decided to mangle the selected datasource name (e.g. $SelectedCT "OfficeCT" is turned into "_T3FFGiVk") that I use in my aliases into jiberish (and flowcharting does not yet allow variables in the metric match). image

I have now hardcoded CT into the alias instead of reusing the datasource variable name. image

Still have issues that not all multi-values are colored, but tooltips are still working fine.

Also online editing of the diagram does no longer seem to work since grafana 9.x and in 10.x grafana is barfing that AngularJS is going to be depricated in future updates.

I can fortunately still edit the figures with the drawio desktop or web-tool and export the result back into the panel, this apparently only works when pasting in XML compressed format.

bijwaard avatar Sep 12 '23 10:09 bijwaard

Looks like we can upgrade grafana until v11 arrives next year (https://grafana.com/docs/grafana/latest/developers/angular_deprecation/):

When will we remove Angular support completely?

Our plan is to completely remove support for Angular plugins in version 11, which will be released in 2024. 
This means that all plugins that depend on Angular will stop working and the temporary option introduced in version 10 to enable Angular will be removed.

bijwaard avatar Sep 12 '23 12:09 bijwaard

Just tested Grafana 10.2, it breaks flowcharting, there seems to be an issues with reading metrics. Flowcharting works if there are no metric.. :-/

EDIT: If any series returns no values, the flowchart will not evaluate rules and no colours appear in the flowchart.

If there are any develepors that could whip up a fix that would at least gives us time to run until the final death of angular. @teguhsatria892 @pauljones0 @icl-rocketry

xkilian avatar Oct 27 '23 14:10 xkilian

Hi xkilian,

Are the measurements correctly shown with panel->inspect->data, or are metric names different than before? E.g. the metric match may not work as I reported above for 10.1, and could be fixed with updated metric aliases.

Kind regards, Dennis

bijwaard avatar Oct 27 '23 15:10 bijwaard

Looks like the mime-type text/html is incorrect for the stylesheet common.css and therefore denied since strict mime-type checking is enabled.

⁣Get TypeApp for Android ​

On 27 Oct 2023, 17:41, at 17:41, xkilian @.***> wrote:

In the inspect panel->Inspect->Data, the data is there, I do not think I am running into the same problem. Here is the web console data from Chrome: image

-- Reply to this email directly or view it on GitHub: https://github.com/algenty/grafana-flowcharting/issues/411#issuecomment-1783128871 You are receiving this because you commented.

Message ID: @.***>

bijwaard avatar Oct 27 '23 17:10 bijwaard

Yeah, but Firefox has the same functional issue and it does not have strict checking.

xkilian avatar Oct 27 '23 18:10 xkilian

Ok, found it. If a time series returns null. (no result) All rules are not evaluated and no colours appear on the flowchart. This is really problematic, as I use extensively the ALERTS{} metrics in my flowcharts, which are often null when there are no active alerts. The way grafana passes empty series to the plugin must have changed. Once again, now that it is easy to reproduce, I hope a developper will fork the projet and fix this specific issue.

xkilian avatar Oct 27 '23 21:10 xkilian

Minor thing, the colour stacking seems to be evaluating a little differently in 10.2 versus 9.2. (my production environment), but it is possible to correct so that they stack appropriately by playing with the rule levels.

xkilian avatar Oct 27 '23 21:10 xkilian

Please migrate it.

MedAzizTousli avatar Nov 23 '23 19:11 MedAzizTousli

I just tried Canvas and eventually it could be a replacement, but now it's horrible and I can't use it. This plugin is exceptional and I think a lot of people would be thrilled to see it migrated. What about some kind of crowdfunding to support the migration with money?

JaSei avatar Nov 24 '23 08:11 JaSei

@bijwaard My collegue fixed the issue of Flowcharting compatibility with 10.2, the way data was passed from grafana for empty series changed. A fork of Flowcharting will be posted to github and maybe we will include some minor fixes from other branches. This should hopefully give us a full extra year for Canvas to mature or someone to rewrite a Flowcharting equivalent in React(For Apache Echarts or Draw.io).

xkilian avatar Nov 24 '23 14:11 xkilian

Can't wait for this fix...

fadjar340 avatar Nov 24 '23 14:11 fadjar340

Hi @xkilian, great news!

Hope someone also finds some time to port Angular to React to extend the plugin munch longer;-)

Kind regards, Dennis

bijwaard avatar Nov 24 '23 20:11 bijwaard

Hi @xkilian, I had the same problem. A workaround if the time series returns null is to add " or vector(0)" at the end of the query. => see https://github.com/algenty/grafana-flowcharting/issues/311

I also tried to use Canvas panel, but it can't replace FlowCharting for now ! I also hope someone could migrate FlowCharting to React.

MarineW29 avatar Nov 28 '23 10:11 MarineW29

@bijwaard My collegue fixed the issue of Flowcharting compatibility with 10.2, the way data was passed from grafana for empty series changed. A fork of Flowcharting will be posted to github and maybe we will include some minor fixes from other branches. This should hopefully give us a full extra year for Canvas to mature or someone to rewrite a Flowcharting equivalent in React(For Apache Echarts or Draw.io).

@bijwaard Any idea on when this fork will be posted ?

madansu avatar Dec 04 '23 19:12 madansu

@bijwaard My collegue fixed the issue of Flowcharting compatibility with 10.2, the way data was passed from grafana for empty series changed. A fork of Flowcharting will be posted to github and maybe we will include some minor fixes from other branches. This should hopefully give us a full extra year for Canvas to mature or someone to rewrite a Flowcharting equivalent in React(For Apache Echarts or Draw.io).

Awesome… Please share the link when is ready:)

soussif avatar Dec 04 '23 20:12 soussif

@bijwaard Any idea on when this fork will be posted ?

Hi @madansu,

Not sure about timing, guess @xkilian and his colleague first want to further integrate some fixes and stress-test their update before making their fork public. I'm also in anxious to test when it arrives.

Kind regards, Dennis

bijwaard avatar Dec 05 '23 12:12 bijwaard

Yeah, kind of busy on urgent deliverables. The plan is to provide a fork with this fix and a fix for the url/save problem when editing draw.io image.

xkilian avatar Dec 05 '23 17:12 xkilian