Compatibility with upcoming Grafana v10.0 ? about grafana-flowcharting

[DM-LUKAD]

We need it - please fix this great plugin ! 👍

[xkilian]

@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).

[yanisbinks]

Please migrate it

[xkilian]

Well, happy campers.
Here is the link to the fix: flowcharting fork
It includes a zoom fix, the embed url fix and the compatibility fix with Grafana 10.2.x

[soussif]

Well, happy campers. Here is the link to the fix: flowcharting fork It includes a zoom fix, the embed url fix and the compatibility fix with Grafana 10.2.x

hi @xkilian i tried upgrading to your fork, it works perfectly except tooltip doesn't show, when i click edit and save on graph it start showing, when i refresh the page the tooltip doesn't show again. Can you take a look?

created a petition https://chng.it/FVjYwTP27D please sign in

[xkilian]

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.

[ninkaninus]

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

[JaSei]

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?

[bijwaard]

thanks @xkilian, @skyfrank et all, the zoom and edit seem to work great so far in v1.0.0.e!

[RedShift1]

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.

[abctaylor]

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.

[xkilian]

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.. :-(

[fadjar340]

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.. :-(

[thanissi]

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

        - Name: GF_SECURITY_ANGULAR_SUPPORT_ENABLED
          Value: true

[celya44]

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

[HakamSaffour]

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

[bouyak]

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

[tomhaslett]

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 :/

[bijwaard]

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).

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

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]

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.

[xkilian]

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

[bijwaard]

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]

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:  -- Reply to this email directly or view it on GitHub: #411 (comment) You are receiving this because you commented. Message ID: ***@***.***>

[xkilian]

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

[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]

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.

[MedAzizTousli]

Please migrate it.

[fadjar340]

Can't wait for this fix...

[bijwaard]

Hi @xkilian, great news!

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

Kind regards,
Dennis

[MarineW29]

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 #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.

[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).

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

[soussif]

@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:)

[bijwaard]

@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

[madansu]

Thank you ! I will try this out in our sandbox environment over the next week !

[soussif]

Well, happy campers. Here is the link to the fix: flowcharting fork It includes a zoom fix, the embed url fix and the compatibility fix with Grafana 10.2.x

hi @xkilian i tried upgrading to your fork, it works perfectly except tooltip doesn't show, when i click edit and save on graph it start showing, when i refresh the page the tooltip doesn't show again. Can you take a look?

[bigvzhang]

After i upgrade, it works but grafana reports error '...path=/d/acea34ea-7fbf-4f9e-abd6-7a989bdc2c73/img/lib/clip_art/networking/Bridge_128x128.png... referer="https://localhost:3000/d/acea34ea-7fbf-4f9e-abd6-7a989bdc2c73/img/lib/clip_art/networking/Bridge_128x128.png...handler not found' in the copy of demo 'Flowcharting - Network diagram'. But it works for a copy of demo 'FlowCharting - Hierarchical state level'. Is there any place where I can configure it so that it can use the correct image URL?