Compatibility with upcoming Grafana v10.0 ?

[svestenik]

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 ?

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

[yanisbinks]

Please migrate it

[DM-LUKAD]

We need it - please fix this great plugin ! 👍

[thanissi]

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

        - Name: GF_SECURITY_ANGULAR_SUPPORT_ENABLED
          Value: true

[ninkaninus]

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

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

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

[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: https://github.com/algenty/grafana-flowcharting/issues/411#issuecomment-1783128871 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.

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

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

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

[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

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

[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

[madansu]

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

[bijwaard]

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

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

[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

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

[xkilian]

For those who missed it, a new plugin very similar to flowcharting (based off draw.io) has been created: flow-panel Canvas will also have a few usability enhancements that should bring it closer to what is required to replace flowcharting for a few more use cases. Things are looking up. @bijwaard

[abctaylor]

Nice, 10 sec glance and it looks very viable.

[bijwaard]

Flow-panel looks cool, they seem to have a nice separation between rules file (yaml), globals (yaml) and visualisation (svg), but will need an webserver to host the files. Editing all the drawio IDs becomes a nightmare in complex diagrams, I would rather use a custom data-item like "name" and preferably with recursive paths for grouped objects, e.g. reference group/object for object contained within group.

[andymchugh]

Flow-panel looks cool, they seem to have a nice separation between rules file (yaml), globals (yaml) and visualisation (svg), but will need an webserver to host the files. Editing all the drawio IDs becomes a nightmare in complex diagrams, I would rather use a custom data-item like "name" and preferably with recursive paths for grouped objects, e.g. reference group/object for object contained within group.

Thanks for the feedback.

re the webserver, that's optional. You can just paste the svg/yaml file content direct into the panel.

re the ids. I thought it just used the same ids that the flowcharting panel did. You should be able to export your flowcharting svg into the draw.io app. resave with the svgdata plugin installed and have all the same ids as you had before. Albeit they'll now have a 'cell-' preamble on them but that's taken care of in the yaml cellidpreamble field. I'm not saying it's the best solution, just that I believe it treats ids the same way flowcharting did. Really do recommend using the draw.io app to edit the ids. it's only a right-click->select->doubleclick->apply->apply for each one. And once they're done they're done :)

[bijwaard]

Thanks Andy, I see now, you can just paste code instead of the URL;-) Just pasted my transparent draw.io graph from an old flowcharting dashboard as SVG and could hardly see it because I could not yet set the background color in the flow-panel..., set background in draw.io for now.

The IDs was something that was discussed here in flowcharting as well, it could be made selectable whether to use IDs, another attribute, and/or group/child hierarchy using e.g. the "name" attribute.

There seem to be some restrictions on symbols that can be used in IDs, my old dashboard uses ":" as a separator within IDs like "CT:L1" that need to be escaped as e.g. "CT\:L1" in YAML to bind them to actions.

Guess we can take further discussion in issue tickets in the flow_panel github page

[Di0g00]

Hi guys! I would like to now if it is possible to create dynamic dashboards using FlowPanel? Similar to the FlowCharting plugin. Thanks in advance

[xkilian]

Yes. It is grossly equivalent.

[Di0g00]

Yes. It is grossly equivalent. Ok thanks @xkilian! Can you explain me how to do it? Because in the other plugin you had a specific field to do the dynamic part, and i didn't find that in this one.

[bijwaard]

The main difference of Flow panel is that the rules are specified in the YAML language. This language is quite simple and is split in an global config (siteConfig) that can be reused for multiple panels and a panel specific one (panelConfig) that applies to the current panel. You can either use a hyperlink to a configuration file or type the YAML configuration in the box. There are example configurations with descriptions in the README

[Di0g00]

Is it possible to integrate with "PRTG" DataSource?

[bijwaard]

Don't know the PRTG datasource, but in general panel plugins are mostly independent of the datasource type. Just try it.

[MarineW29]

Hi, Has anyone tried migrating their FlowCharting panels to the FlowPanel plugin ? Is this migration hard work? I assume the drawio chart can be retrieved and reused. But what about YAML rules? Everything has to be written from scratch? Thanks for your feedback

[bijwaard]

I have converted one of my flowcharting flows, it is different since the rules are specified in panel YAML file, and there are examples available to help you. The site configuration helps to configure thresholds in one place instead of repeating them everywhere. For a simple flow it may take some extra time since you need to get familiar with the syntax, for multiple rules it goes faster once you get the hang of it. There are example YAML filles available in the documentation.

[MarineW29]

I have converted one of my flowcharting flows, it is different since the rules are specified in panel YAML file, and there are examples available to help you. The site configuration helps to configure thresholds in one place instead of repeating them everywhere. For a simple flow it may take some extra time since you need to get familiar with the syntax, for multiple rules it goes faster once you get the hang of it. There are example YAML filles available in the documentation.

Thanks for your reply @bijwaard