search

algenty / grafana-flowcharting

Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
Apache License 2.0
977 stars 149 forks source link

Flowcharting 0.8.0 in progress #145

Closed algenty closed 4 years ago

algenty commented 4 years ago

Here, you can found adding and fix for the next version : Try it and reply issues and suggestions,

[0.8.0 SNAPSHOT] - 2020-04-13

Add

algenty commented 4 years ago

Hi, Progress bar seems to work progressbar_ani

algenty commented 4 years ago

new snapshot builded https://algenty.github.io/flowcharting-repository/ARCHIVES.html events_examples_ani

algenty commented 4 years ago

Event Expand/Collapse implemented expand_event_ani

algenty commented 4 years ago

Event resize width/height implemented event_size_ani

width positive: size width to the right width negative : size width to the left height positive : size to top height negative : size to bottom

algenty commented 4 years ago

Another example event_size_ani2

algenty commented 4 years ago

You can use custom valariables, see https://algenty.github.io/flowcharting-repository/VARIABLES.html

Variables

Grafana Variables

You can use variables in xml définition or url in link.
Be carreful, at this time, only uncompressed xml supports variables.
Syntax : ${myVariable} Supported field with variables :

animation

Custom variables

Custom variables and eval are availables on fields :

List of custom variables :

algenty commented 4 years ago

New snapshot available

paregupt commented 4 years ago

Just tried it. image

image

Worked one time. But did not work next time. Just to be sure, the width of the shape will be 13804585666.133333 when Value is set to {$_value} and 13.80 when Value is set to ${_formated}. My shape is just a simple rectangle

image

What am I missing? Any logs that I can inspect?

algenty commented 4 years ago

Hi @paregupt, Thx for tried 0.8.0 I don't see values in your color table, normal ? Don't use ${_formated} because in you case, Flowcharting try to convert "13.80 Gps" to a number of pixel and ${_value} is too big for the width. the fied value must be a number of pixels for width and height

You can try : Math.round(${_value}/10000000000) with more or less 0 Other solution, define more level in thresholds like it :

A little animation to explain, thx for your feedback, i need to doc more event_size_explain_ani

BR Arnaud

paregupt commented 4 years ago

Thanks Arnaud. It works for me now. Looks like setting up the Thresholds correctly was mandatory.

Anything you want me to test while this is running in my environment?

Overall, you and the team of the contributors are making it into a killer panel. Great work and than you.

algenty commented 4 years ago

Hi, THANKS A LOT !! I'm alone with a little help from grafana or other users like xkilian and Dennis, for me it's a game, not a job. But I spent some personal money on this project, that's why I opened the "sponsor" section to hope that it will bring me some money.

Draw.io is also an amazing tool, for me, better than visio

BR, Arnaud

algenty commented 4 years ago

Animation of events implemented : events_animation_ani

events_size_ani

algenty commented 4 years ago

@paregupt, Since your test, i modified input help, you can seeen example here events_form_ani

algenty commented 4 years ago

New snapshot pushed https://algenty.github.io/flowcharting-repository/ARCHIVES.html

xkilian commented 4 years ago

Just nuts. Bravo! I will definitely setup 8.0 next week. The latest flowcharts, I set up at work were well received. Can't wait for new requirements to come in to get this up and running. We have a DCIM projet with industrial controls for ventilation and cooling, so the timing is great. I will see if I can get a sponsored feature. :-) If I haven't said enough, great work and I wish there wasn't this virus crazyness, because I could see us presenting something smashing at a conference. Cheers! X

algenty commented 4 years ago

Another example created within one hour

events_pgexample_ani

paregupt commented 4 years ago

Super cool. Wondering what was your approach to make this?

  1. Progress bar: Did you use two rectangles, one as base and another on top of that with solid color?

  2. The VMware topology on right: Is that a static diagram or is it dynamic?

What data source did you use and what was the query?

algenty commented 4 years ago
  1. Yes, You can found template in draw.io In sidebar, "add shapes" and choose Section Ohers, infographic image. You need a percent for you query. For my test, i use Grafana DB with Min : 0 max : 100

For the first, 2 rectangles, one solide in back, the width never changes (note the size, here 120px) The second on front , with event width, field When : All, field value : ${_value} 1.2 why 1.2? because, size must be 120px (1001,2) when value is 100%

For the 3d progress bar, it's more difficult, i have 2 shapes for each. For the base = ${_value} ratio For the transparent shape on top = -(100 - ${_value}) ratio minus to invert it.

  1. it's a static, found in template draw.io, it's just for the example At this time, i test with TestDb from grafana, influxdb and prometheus.

NB : To test, i often use a random value with this formule : Math.floor(Math.random() * 101);
// returns a random integer from 0 to 100

Link to the draw.io template progress bar https://app.diagrams.net/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Untitled%20Diagram.drawio#R7Vxbk6I4GP01Pu4USbjII6I9u1vdNVPVtTuPU7RETS0SC9Orzq8f0AQ1YBunTYJOW%2F0AuXD5zsmXkwN0D8Xz9eciWcyeaIqzHnTSdQ8NexACF8Je9eekm11JELq7gmlBUt5oX%2FBMfmBe6PDSV5Li5VFDRmnGyOK4cEzzHI%2FZUVlSFHR13GxCs%2BOzLpIpbhQ8j5OsWfqNpGy2K%2B3DYF%2F%2BJybTmTgz8MNdzTwRjfmdLGdJSlcHRWjUQ3FBKdttzdcxzqrgibjs%2Bj2cqK0vrMA5U%2Bkwp5vN06P%2F%2FZ8fn%2F%2F6%2B99vDNP%2Blz%2F4Uf5Psld%2Bw6g8isevmG1EGMqLX1SbS4YXPTRY4ILMMcMFL%2Fq63x%2BsZoTh50UyrtqvSlaUZTM2z8o9UG5OyBoLnKv9Jd90tnVZFtOMFtuTIjfyAr9ftWEF%2FQ%2BLmpzmuGpMcyaO4%2FP9g86T7U%2B043dSnbCgr3mKq6BUp%2BT3jwuG1ycDC2q4Sp5jWt5psSmb8A4uB5gzHHh8f7Xni8%2BLZgdUEd0SztBpfeA9iOUGx%2FECTGED0wac18NoAIbDB%2BcURleILgBSeP1meJHTEl%2BoK77IZHyBE6BwdCq%2BdU65EpVVgh2ajLXbiHXgfeSnd%2BUn6FjOT57J8fMQj4J4aDA%2F1crFWn7yjcYXhghYy09twYYiPRgJdtAIdvghoN6ZoGwLqL7RARQNw6FnMkFZF1ChyfhGIxcgaC1BtQQbBiaDLS7oINrwQ0K9L0Mh2xIKNNftGofQIIr7Q2QwRSHrGgoYXUSX48D1TopU3TmqLdqBSQ0Fmivqx%2BSlMhKliFe3TcZJtq39SpeEEZqXVS%2BUMTovoyMaRBmZVhWMSqCIJDdfTyu%2F8hPJJ3S7RcafxpuMlGmjSnBkSaN8ussn3qWLcjkbSVmr7nyY3aAGnD1HmotQE2e3ZVD1teHcXM13G%2Be3FzdncK47a8fZO78oasMZONqAbi7xuw302yLxDNB1Z91A%2B%2FKAhmpAh9pwbloN3cb57Yn2DM51Z%2B04ywO6ZRHRhrOnDeemy9FtnAGMosHJRfW5CVp01o1zII9nVw3nQBvOCs7HKYh3SMr41sBfHeJ4%2B9OqwRJ%2BExmelJEf0FLqE1ZhFWhSaCBUI4CvjQAK1sxdEEBNnOkngPdrBND37LjpFt0nAdREm3YCyJJOlQDapnqo4CzdBQHU1Jx%2BAvxiBtCm6QXed08ANZmnnQCyCFQlgDYRCLvhxlUo4DR%2BfcH36se5ij6NNj8OdsOPuwTp23TkkOKY1ufIwW44cpdAfZuenNvyaNDs%2FN0NT%2B4SpG%2FTlXMV3Rp9Ur0brtxFE%2FVN%2BnKuos%2BuT5JZ9%2BUuAfkenTkUqFFAmzMHrTtzxijwAMIIhPYpIIs4RQpo8%2BbE4%2FvfgALDPowgsk4BWdypUkDblI%2Bsu3PGKFC%2FGdgtf06VAtr0PbLuz5nTAl4Uhb51CshyUJUC2uQgUvgC7VY0%2F7W1e%2F1OjACrDyyD1TTZOgyW4TdRQ%2B8ILFe8CWptflX4Nq07YBn%2BtCGQR5ZneSZU%2BNCtO2AZ%2FlDO9SSwAiWw9DnQqOlWdRgtw59dS5OWK97Duf6ToXJ3%2Fy8ntnUH%2F7gDjX4C

CrashLaker commented 4 years ago

Awesome demos @algenty Wonder if it's possible to dinamically alter the layout. image

algenty commented 4 years ago

@xkilian, Be carefull 0.8.0 is an alpha, not stable, with many trace in console. Not ready for the production. But i need you to test and return a feedback. eval in fields is not secure at this time : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

algenty commented 4 years ago

@CrashLaker Not in this version, because here, it's not a modification of an existant shape nut new shapes. You need to generate dynamically your xml by calling an api and download it in flowchart section : Check download case, and enter your api url or full path of xml repo.

paregupt commented 4 years ago

Agree. I had a prototype of XML fetched from a local http server. Every box had its own XML block. I had a template block and replicating the xml code based on the number of items. Worked like a charm but haven’t productized it yet.

CrashLaker commented 4 years ago

@paregupt Can you elaborate more on the 'Every box had its own XML block' part? From what I saw the steps would be to programatically arrange the "new" shapes in Draw.io to then convert it to XML. Any helpful documentation on that first part? It would be a sick view to have something like kubeopsview image

in flowcharting

paregupt commented 4 years ago

@CrashLaker this is cool view. My guess is this should be possible. Here is what I am thinking:

Make the outer container and keep it static in size and numbers. The number of inner containers can be dynamic. See this draw.io XML code image

<mxGraphModel dx="1422" dy="769" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-1" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
      <mxGeometry x="360" y="280" width="130" height="140" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-2" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="370" y="390" width="20" height="20" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-3" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="400" y="390" width="20" height="20" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-4" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="430" y="390" width="20" height="20" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-5" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="460" y="390" width="20" height="20" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

You can copy this and throw it into https://app.diagrams.net > Extras > Edit Diagram.

The inner container code is 

    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-5" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="460" y="390" width="20" height="20" as="geometry" />
    </mxCell>

Make this code a template and add more as more inner-containers are required, with different coordinates and different id.

When I was trying before, I had this logic sitting outside Grafana. The flowcharting panel was fetching it a local http server. There may be better ways though.

CrashLaker commented 4 years ago

@paregupt but one'd still need to bind the new metric labels to the shapes.

paregupt commented 4 years ago

That’s right. The way I did this is via pre-defining the patterns of shape ID and Query ID and sync up these values in the injected XML and the flow charting panel. There can be better ways though...

CrashLaker commented 4 years ago

@paregupt @algenty Is there a way to bind the Alias (or metric target from QueryInspector) received from the Query to the shapeIDs in the diagram with a single rule?

image

this way I could dynamically generate the layout and also the rules.

algenty commented 4 years ago

@CrashLaker I can't, if i add an eval on each field, the the performances are less good

algenty commented 4 years ago

New snapshot available :

xkilian commented 4 years ago

With a stamp of approval like that, I will run it production right now! lol Errh mm... I will get some test dashboards going in a prepod instance. I do have to know how to do the diagrams correctly and make sure no existing dashboards explode! ;-) Some simple gauges will be good and then maybe something that show an open or closed object. Easiest is probably just to change the whole object, switching from A to B. Hours of fun ahead!

The challenge will be to make it simple enough that people can use it without having their brains explode through configuration complexity. It is an iterative process. We have a way to do it, now it is refining it so that it is easier. (good onscreen controls, good onscreen help/hints, documentation, ways to debug, tutorials, pre-built objects that can be used for complex behaviours, etc.) Arnaud, you will have to think how people will be able to contribute to the code, I think you mentioned there was some housekeeping to be done before you were comfortable with PRs. Somehow, I think your plugin will become a lot more popular! I hope to come back with intelligent and enlightening feedback. No pressure eh.

xkilian commented 4 years ago

The date on the snapshot in the archives is 2020-04-15. So I think the latest one did not make it there.

CrashLaker commented 4 years ago

@algenty

I can't, if i add an eval on each field, the the performances are less good

even though the intention is to bind all metric Alias to all shape IDs? the sugestion was to solve this with a single rule instead of processing it manually a "thousand times"

algenty commented 4 years ago

@xkilian yes i forgot to push sorry it's done

CrashLaker commented 4 years ago

@paregupt thank you for the idea. it's a little bit laggy but it worked just fine

kubeflow2

paregupt commented 4 years ago

Great! Thanks to Arnaud for this plugin. Please document the how-to please. Would love to productize this in the future.

algenty commented 4 years ago

@paregupt Nice demo, can you try with disabled animation in flowcharting section ? And can you give me a screen shot of your rules (only) header to see exetec times?

CrashLaker commented 4 years ago

The way I did it was to plot everything up then bind 1 rule per block so it has nearly 200 rules. Couldn't find where to disable the animation.

kubeflow3

found it. without animation it works super smooth kubeflow5

algenty commented 4 years ago

Disco ! Very good With the same goal. You can use a draw.io Container to hide/collapse a group and/or regular expression in id field. When you hide a contain, all in shapes inside are hidden. First rename Id in Inspect section (don't forget to apply change and save dashboard like me) An example event_hide_group

CrashLaker commented 4 years ago

@algenty problem is: i didn't want it to have empty cells but rather a dynamically placement approach as I won't know the exact number of VMs (larger blocks) and PODs (smaller ones)

In your example the more fluid behaviour when A hides would be for B to go to A's spot followed by C -> B's old spot.

CrashLaker commented 4 years ago

Another plus (suggestion) to the actions list we could also offset elements from the X and Y sides. image

this way we could float objects around. not only change position in bar but rather use the whole plot.

algenty commented 4 years ago

@CrashLaker Not in this version because only one parameter by event in this version to keep simpliest

CrashLaker commented 4 years ago

@algenty It could be as simple as Change height and Change width. >Shape: Collapse/Expande (0|1) +Position: Change X offset (number) +Position: Change Y offset (number) >Label: Replace text(text) >...

algenty commented 4 years ago

I close the list of events for this version maybe in next version. Now i need to spend time to stable it and write doc.

CrashLaker commented 4 years ago

ok. thank you for the active development :) awesome project

xkilian commented 4 years ago

1 - Small issue I noticed, if an object, a square for example has a transparent fill of 0%. If I assign a rule That will change the color to red, then the value becomes null, the color defaults back to white instead of transparent. It seems that the transparency is lost when the threshold fill color is released. With 8.0 latest, though this probably applies to all of them. 2 - The blinking event does not seem to work well. Works inconsistently, I will have to do more testing, in some flowcharts it works (so-so) in others not. Will do more digging. ps. Did some new designs using the prometheus ALERT metrics, works well, to aggregate alarms related to a service or host.

algenty commented 4 years ago

@xkilian Thanks for this feedback. For the blink, when the tab lost focus, it didnt work any more. I use setTimeout, i search a solution

algenty commented 4 years ago

New snapshot available

algenty commented 4 years ago

Another demo cgp_example_ani

CrashLaker commented 4 years ago

@algenty Will you publish those demos somewhere? couldn't find them here https://play.grafana.org/d/Unu5JcjWk/flowcharting-index?orgId=1

algenty commented 4 years ago

I can't on play, only grafana team can. Can you try https://flowcharting.grafana.net/?orgId=1 ?

BR Arnaud