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

FlowCharting 1.0.0 (old 0.9.1) in progress

Open algenty opened this issue 5 years ago • 61 comments

Hi dear users, I need your feedback for the next version of Flowcharting :

[0.9.1b SNAPSHOT] - 2020-11-08

Added

  • New initialization engine for drawio libs
  • New notifier handler in panel.
  • Change default url draw.io by https://embed.diagrams.net
  • New edit design for grafana v7 (See example)
  • Add shape name and properties in inspect console (See example)
  • Add gaugePos property in Event Mapping for the gauge draw.io models See example)

Fixed

  • Fixed : Inspect mode (issue #209) (See example)
  • Fixed : Label position in shape (issue #147)
  • Fixed : Initialization of first model
  • Fixed : Display refresh between "edit mode" and "dashboard mode" in grafana v7 (issue #205)
  • Fixed : zoom on text without witdth and height
  • Fixed : Disable select text when double click for zoom
  • Fixed : retro compatibility with grafana 6.x (issue #218)
  • Fixed : Zoom when with 2 or mode panels with flowcharting (issue #214)

rulesv7_ani

inspectv7_ani

gaugePos_ani

Download it at https://algenty.github.io/flowcharting-repository/ARCHIVES.html

BR, Arnaud

algenty avatar Nov 08 '20 22:11 algenty

Hi Arnaud,

Great work! New edit design works fine, good to see some more shape detail in inspector. Curious what the Lvl column in the expector is for.

I found some minor issues in 0.9.1b snapshot (tried using firefox and chromium-browser in Linux with grafana 7.2.2):

  • when editing the drawing, I still get warning about app.diagram.net
  • as reported before in edit mode need to fit/fill/exact or enlarge diagram area to see diagram

Kind regards, Dennis

bijwaard avatar Nov 10 '20 16:11 bijwaard

Hi Dennis,

Thx for your feedback, if it is an existing panel, you need to change url in flowcharting section by https://embed.diagrams.net. If you're adding a new panel, url has the good value.

algenty avatar Nov 10 '20 16:11 algenty

Hi Arnaud, Yes, that works, thanks.

Note that when no URL is filled in, it will open a browser with grafana main window.... image

bijwaard avatar Nov 10 '20 16:11 bijwaard

Hi Arnaud, all, I'll be showing our flowcharting and other dashboards as part of the advanced measurement solution in a webinar next week. Kind regards, Dennis

bijwaard avatar Nov 12 '20 16:11 bijwaard

Sorry Arnaud, I have no feedback for you at this time, I am not running any Grafana 7.x yet. I was waiting for legacy panels to be converted and all our plugins to be upgraded to be compatible with Grafana 7. The only outstanding issue is worldmap map and alexandra map panels cannot be both installed and used in different dashboards. An odd bug. Keep up the excellent work.

xkilian avatar Nov 14 '20 21:11 xkilian

hi @xkilian This version works with v6 off course

algenty avatar Nov 15 '20 22:11 algenty

Ah, I stand corrected, I will give it a try.

xkilian avatar Nov 16 '20 03:11 xkilian

Hi Arnaud,

I found a bug in v[0.9.1] - 2020-07-04 regarding the threshold section for mapping rules. I've noticed that sometimes only 1 or 2 of the 3 metrics (there should be L1, L2, L3 values for power P) are appended with the label/text mappings (append new line), and I could temporarily work around this by disabling the threshold invert on a number of mapping rules. I used the inspect function to show the metric values, and they were present when this happened.

I can try to test with the newest 0.9.1 snapshot after our webinar this afternoon. image

Kind regards, Dennis

bijwaard avatar Nov 18 '20 08:11 bijwaard

Hi Arnaud, I just installed 0.9.1b snapshot in the substation and reverted my work-around. I can reproduce the issue above. Note that it happens mostly with selected influxdb datasource F0. I have not seen it with other selected fields F1..F8 yet. I added the inspect window to show that the metrics are available. I'm also showing the metric definition for Power (P) and its metric usage in the mapping. image image

The webinar was a success yesterday, the replay is now available online. The presentation gives more insight in our measurement solution, I guess the live demo is most interesting for grafana/flowcharting users, and shows powerful capabilities of a number of panels and data sources.

  1. The demo starts using alexandra-trackmap to show the location of the measured substations using their GPS coordinates
  2. next the flowcharting panel is used for the substation overview and feeder diagrams
  3. next graph, plotly and SVG panels are used to display phasors, realtime signal and harmonics.
  4. next the flowcharting panel is used to show the DSP flow within/between sensors, and realtime output signals in tooltips.
  5. next the commandline usage of measurements and developing DSPs using measurements via an encrypted tunnel is demonstrated

We use the influxdb datasource for point 2,3 above and the simpod-json datasource for the realtime data (snapshots) in point 3 and 4. Point 1 for now uses the testdata db as datasource.

Kind regards, Dennis

bijwaard avatar Nov 19 '20 12:11 bijwaard

Hi Dennis, Congratulation for your webinar ! For the bug, il don't understand. have you the same pb in 0.9.0 ? it's a regression ?

algenty avatar Nov 19 '20 12:11 algenty

Hi Arnaud, Thanks. I have not tried 0.9.0. Thusfar, I tried 2 snapshots of 0.9.1, the newest one (0.9.1b) and an older snapshot from july.

bijwaard avatar Nov 19 '20 12:11 bijwaard

@Dennis,

I'am watching your webinar, and at 22:30 and for history, i suggest to activate graphover on your dashboard to change color on flowcharting panel too (Ctrl+o). i return to the video ...

PS : Can i share the webinar on twitter ?

algenty avatar Nov 19 '20 12:11 algenty

Hi Arnaud, You can of course share the webinar on twitter, the more publicity the better;-) I tried with the graphover, didn't know this feature, and now my issue now changes to 1, 2, and three values whenever I hover between graph panel and flowcharting panel, see movie below. I now also see the same for rms (current) in the Feeder. vokoscreen-2020-11-19_14-00-15.mkv.zip Forgot to capture the power graph with (bottom right), but it doesn't show obvious holes in the graphs. image

Kind regards, Dennis

bijwaard avatar Nov 19 '20 13:11 bijwaard

@algenty Keep in mind, you might trigger an notification when you do @[username]

dennis avatar Nov 19 '20 13:11 dennis

I am finally doing a test run this week on flowcharting beta with Grafana 6.7, do you have a newer version to test or is it still pertinent to test the current beta?

xkilian avatar Nov 29 '20 15:11 xkilian

All my dashboards are functional. Suggestions:

  • Documentation: When attaching multiple rules to the same object, links should be handled at the draw.io layer and not in the plugin, because then you need to add the link to all rules that relate to the object, otherwise depending on which rule is the active on, the link may not be available. I use this to show metrics and coloring based of Prometheus ALERTS metrics states on top of a simple metric show availability (like a ping metric).
  • Thank you for the coloring change on edit button. :-)
  • Having learned to use label_replace function of PromQ, to reduce the number of caracters in my legends they now fit in popup graph legends without wrapping.
  • The editing interface, with 200 hundred rules defined loads about as quick as the old version. Nothing noticeable in any case. But once loaded, it is very responsive and I like the new rule liste UI, it is more compact, no need click from right to left everytime you need to clone and edit.. 👍

I will proceed to testing the shared crosshairs with my metrics and changes based on state or metrics. Thank you for your work.

xkilian avatar Dec 05 '20 15:12 xkilian

thx @xkilian and @bijwaard for you feedback I rename 0.9.1 with 1.0.0. For this version, a big work on UX Design and prepartion for multi diagram.

[1.0.0a SNAPSHOT] - 2020-12-06

TODO

  • Disable anim not work
  • message console size
  • display zoom percent
  • align icons
  • Column resize
  • Size of plugin

Added

  • New initialization engine for drawio libs
  • New draw.io libs (13.10.9)
  • New notifier handler in panel.
  • Change default url draw.io with https://embed.diagrams.net
  • New edit design for grafana v7 (See example)
  • New UX design and new concept "fast edit" :
    • Can edit without expand rules and flowcharts with icons
    • Advanced/detail mode on expand.
  • Add shape name and properties in inspect console (See example)
  • Add gaugePos property in Event Mapping for the gauge draw.io models See example)
  • Plugin is signed
  • Add Light theme support
  • New thresholds on dates (accept units like d, w, m, y, h, s or a date)
  • Can Enable/Disable each element.
  • Colors (threshold and background) can be empty.

Fixed

  • Fixed : Inspect mode (issue #209) (See example)
  • Fixed : Label position in shape (issue #147)
  • Fixed : Initialization of first model
  • Fixed : Display refresh between "edit mode" and "dashboard mode" in grafana v7 (issue #205)
  • Fixed : zoom on text without witdth and height
  • Fixed : Disable select text when double click for zoom
  • Fixed : retro compatibility with grafana 6.x (issue #218)
  • Fixed : Zoom with 2 or more FlowCharting (issue #214)
  • Fixed : Background color edition in flowchart tab

design_7_2

Now, the plugin is signed image

Still some bugs like column resize or format message in console.

algenty avatar Dec 06 '20 10:12 algenty

Hi Arnaud,

Great work, you have been busy! I would like to test it, but the download does not seem to work for me. Moreover, the new 1.0.0a snapshot does not (yet) show up in the archive list and changelog.

Kind regards, Dennis

bijwaard avatar Dec 06 '20 10:12 bijwaard

pushed, try again

algenty avatar Dec 06 '20 10:12 algenty

Great, thanks!

bijwaard avatar Dec 06 '20 10:12 bijwaard

Hi Arnaud,

Here is my first feedback for 1.0.0a:

  • nice that you can now do basic operations on the collapsed rules and inspect items
  • maybe you can make the different mapping categories/types collapsible as well, since rules are often longer than a page
  • I notices the button "Reduce the rule" at the bottom of an expanded rule, you may want to rename it to "Collapse" and change its tooltip from "Refresh/apply" to something else. image
  • in the inspect, the labels do not expand the placeholders, this could also be done through a tooltip like is done for the shapes image
  • still not sure what the Lvl column is for in the inspector
  • some performance tweaks may be required to speed up Panel Edit, uncollapse list of mapping Rules, etc.

Kind regards, Dennis

bijwaard avatar Dec 06 '20 11:12 bijwaard

ok, thx @bijwaard for this feedback

algenty avatar Dec 06 '20 12:12 algenty

Are dashboard variables supported, so that we can make a generic dashboard? (if the layout is always the same and the object ids remain consistent, or could be named to match a variable) We have lots of recurring system patterns that could modeled in flowcharting.

Even in rules, when cloning rules I often find myself changing always the same key in the rule name, metric filter and URL and the only unique thing is the mapping to the object. Definately need to find some way to have rules autogenerated based on template variables and pre-defined object IDs that could match the same variable name. This would make my 200 rules be generated in two template rules. I think you are not far from being able to do this.

Great job, I will run off and test this new version and hopefully have some intelligent feedback. :-)

xkilian avatar Dec 06 '20 18:12 xkilian

Hi my best beta users @xkilian, @bijwaard and @CrashLaker. In this beta, i introduce to you the concept of "fast edit" : Change metric name and targets very fast with only one button. Create your rule model, duplicate it and change targets and metric name.

fastedit_ani

[1.0.0b SNAPSHOT] - 2020-12-08

TODO

  • Disable anim not work
  • display zoom percent
  • align icons
  • Size of plugin
  • Styles on firefox

Added

  • New initialization engine for drawio libs
  • New draw.io libs (13.10.9)
  • New notifier handler in panel.
  • Change default url draw.io with https://embed.diagrams.net
  • New edit design for grafana v7 (See example)
  • New UX design and new concept "fast edit" :
    • Can edit without expand rules and flowcharts with icons
    • Advanced/detail mode on expand.
    • Fast edit mode
  • Add shape name and properties in inspect console (See example)
  • Add gaugePos property in Event Mapping for the gauge draw.io models See example)
  • Plugin is signed
  • Add Light theme support
  • New thresholds type : dates (accept units like d, w, m, y, h, s or a date)
  • New event mapping operators
  • Can Enable/Disable each element.
  • Colors (threshold and background) can be empty.

BR Arnaud

algenty avatar Dec 08 '20 19:12 algenty

Woah! Very very nice, that will be a great time saver in the current configuration method! Did you figure out how to fix the colomn sizing in the rule editor for grafana 6.x users? I think you hinted that this was a problem. Anyway, I guess I will see tomorrow how it looks. Once again, great work!

xkilian avatar Dec 08 '20 23:12 xkilian

Hi Arnaud,

Great work, some remarks:

  • when I fast-edit the rule metric, the old value (e.g. a regular expression) disappears. It would be great if we can edit/copy it in fast edit mode. image
  • is the Lvl column in the inspector related to the threshold levels? If so, I suggest to change tooltip to "Current threshold level"
  • thanks for changing "Reduce the rule" to "Collapse", the tooltip "Refresh/Apply" on this button is still the same
  • thanks for handling placeholders in inspector labels

Kind regards, Dennis

bijwaard avatar Dec 09 '20 08:12 bijwaard

Hi Arnaud, I'm a very fan of your work since the beginning. Your plugin is outstanting. Is it possible to send you a mail on any @ ? Chris

cbtsgithub avatar Dec 20 '20 07:12 cbtsgithub

Hi @cbtsgithub My email is available at the end of readme

algenty avatar Dec 23 '20 07:12 algenty

I have found, that the usage of Grafana Transformations will break the plugin. As soon as i add a "Field from calculation" transformation, all my values are empty- image

If I remove the transformation again, all seems to work correctly. image

[tested with 1.0.0b from 2020-12-08]

Schrolli91 avatar Dec 30 '20 08:12 Schrolli91

Dear all,

We just got a Grafana blog post published mentioning flowcharting as the most useful plugin;-)

Kind regards, Dennis

bijwaard avatar Jan 06 '21 19:01 bijwaard