DOT: Add images of the resources

[xescugc]

Using tfdocs we know the link to the images, would improve a lot if we added those images to the result graph.

[pabluk]

Hi,

It's a good idea, I just tried a simple PoC using an example from this repo https://github.com/diodonfrost/terraform-openstack-examples and it looks like this:

Default graph

Using images from https://github.com/openstack/horizon/tree/master/openstack_dashboard/static/dashboard/img

and here's the diff for the generated dot file:

--- instance-with-loadbalancer-default.dot  2020-07-16 12:28:43.148535357 +0200
+++ instance-with-loadbalancer-images.dot   2020-07-16 12:28:52.060530686 +0200
@@ -1,4 +1,7 @@
 strict digraph G {
+
+        node [ shape=plaintext, labelloc="b", fontname="mono" ];
+
    "openstack_lb_loadbalancer_v2.db"->"openstack_networking_subnet_v2.db";
    "openstack_lb_loadbalancer_v2.db"->"openstack_compute_instance_v2.db";
    "openstack_networking_subnet_v2.db"->"openstack_networking_network_v2.generic";
@@ -25,21 +28,21 @@
    "openstack_lb_loadbalancer_v2.http"->"openstack_compute_instance_v2.http";
    "openstack_lb_loadbalancer_v2.http"->"openstack_networking_subnet_v2.http";
    "openstack_networking_subnet_v2.http"->"openstack_networking_network_v2.generic";
-   "openstack_compute_instance_v2.db" [ shape=ellipse ];
-   "openstack_compute_instance_v2.http" [ shape=ellipse ];
-   "openstack_compute_keypair_v2.user_key" [ shape=ellipse ];
-   "openstack_compute_secgroup_v2.db" [ shape=ellipse ];
-   "openstack_compute_secgroup_v2.http" [ shape=ellipse ];
-   "openstack_compute_secgroup_v2.ssh" [ shape=ellipse ];
-   "openstack_lb_loadbalancer_v2.db" [ shape=ellipse ];
-   "openstack_lb_loadbalancer_v2.http" [ shape=ellipse ];
-   "openstack_lb_monitor_v2.db" [ shape=ellipse ];
-   "openstack_lb_monitor_v2.http" [ shape=ellipse ];
-   "openstack_networking_network_v2.generic" [ shape=ellipse ];
-   "openstack_networking_router_interface_v2.db" [ shape=ellipse ];
-   "openstack_networking_router_interface_v2.http" [ shape=ellipse ];
-   "openstack_networking_router_v2.generic" [ shape=ellipse ];
-   "openstack_networking_subnet_v2.db" [ shape=ellipse ];
-   "openstack_networking_subnet_v2.http" [ shape=ellipse ];
+   "openstack_compute_instance_v2.db" [ image="instance.png" ];
+   "openstack_compute_instance_v2.http" [ image="instance.png" ];
+   "openstack_compute_keypair_v2.user_key" [ image="keypair.png" ];
+   "openstack_compute_secgroup_v2.db" [ image="securitygroup.png" ];
+   "openstack_compute_secgroup_v2.http" [ image="securitygroup.png" ];
+   "openstack_compute_secgroup_v2.ssh" [ image="securitygroup.png" ];
+   "openstack_lb_loadbalancer_v2.db" [ image="lb.png" ];
+   "openstack_lb_loadbalancer_v2.http" [ image="lb.png" ];
+   "openstack_lb_monitor_v2.db" [ image="lb.png" ];
+   "openstack_lb_monitor_v2.http" [ image="lb.png" ];
+   "openstack_networking_network_v2.generic" [ image="network.png" ];
+   "openstack_networking_router_interface_v2.db" [ image="router.png" ];
+   "openstack_networking_router_interface_v2.http" [ image="router.png" ];
+   "openstack_networking_router_v2.generic" [ image="router.png" ];
+   "openstack_networking_subnet_v2.db" [ image="network.png" ];
+   "openstack_networking_subnet_v2.http" [ image="network.png" ];

 }

Thanks for this tool :+1: !

[xescugc]

I've been playing with this this weekend, sharing what I've found:

• Graphviz does not support images that are not in the filesystem, so we cannot have direct URLs.
• The example from @pabluk uses png but they only have svg
• svg have directly some sizes set so I have so fix those on the Node rendering but then the label is on top of the image or the labels overlap with other elements/nodes (due to the fixedsize=true|shape)
• Some svg are not in valid format, the aws ones are invalid for Graphviz as they do not have the <?xml version="1.0" standalone="no"?> (https://stackoverflow.com/questions/49819164/graphviz-nodes-of-svg-images-do-not-get-inserted-if-output-is-svg)

This let's me to discard several options that I had in mind, the ones that are most valid right now are:

1) To basically push the icons to inframap/assets and basically download them to a cache $XDG_CACHE_HOME 2) Embed the icons on the binary (will increase the size of it) and then the ones that are used we could write them to $XDG_CACHE_HOME if they do not exists yet so Graphviz can find them.

With this solutions we'll have:

• Full control over the images and types of the images (I believe png would be better but IDK) and sizes
• A deterministic output of the images

The only drawback is to maintain those images that should also be on the same path as defined on https://github.com/cycloidio/tfdocs.

I think that the one about embedding (2) is the best and it also removes the network from the problem because we do not have to download anything.

BTW @pabluk where did you find the png? or you converted them?

[xescugc]

Ok I've pushed an implementation that work with OpenStack to https://github.com/cycloidio/inframap/tree/fg-icons.

I'll wait until we have FlexibleEngine and AWS icons as those are the providers we support to open the PR.

If some icons are "missing" on the end graph could be related to https://github.com/cycloidio/tfdocs/blob/master/assets/openstack/icons.json that it's not fully complete yet :).

[pabluk]

BTW @pabluk where did you find the png? or you converted them?

Yes, I just used Inkscape to convert .svg files to .png.

[pabluk]

Ok I've pushed an implementation that work with OpenStack to https://github.com/cycloidio/inframap/tree/fg-icons.

I built that branch and using the same example it looks great, even without all the missing icons :+1:

[xescugc]

I built that branch and using the same example it looks great, even without all the missing icons +1

Cool! I'm not an expert (or have knowdlage) on OpenStack, if you could open a PR to fix the mapping of https://github.com/cycloidio/inframap/tree/fg-icons or I can do it if you provide me with it :).

[pabluk]

Cool! I'm not an expert (or have knowdlage) on OpenStack, if you could open a PR to fix the mapping of https://github.com/cycloidio/inframap/tree/fg-icons or I can do it if you provide me with it :).

@xescugc I looked at that and I found that the mapping for Openstack Horizon and Heat (for stack) is maintained on this file heat_dashboard/content/stacks/mappings.py and that file also include some Python function to resolve resource names to images URLs.

But as you mentioned before the question is how to keep in sync that mapping (files, resource names) with this repo. Maybe having a script that will be run at every new release of openstack/heat-dashboard to generate the Go mapping and converting .svg icons to .png. Do you have other ideas in mind?

[xescugc]

@xescugc I looked at that and I found that the mapping for Openstack Horizon and Heat (for stack) is maintained on this file heat_dashboard/content/stacks/mappings.py and that file also include some Python function to resolve resource names to images URLs.

Ok that's cool at least I know where is it haha.

But as you mentioned before the question is how to keep in sync that mapping (files, resource names) with this repo. Maybe having a script that will be run at every new release of openstack/heat-dashboard to generate the Go mapping and converting .svg icons to .png. Do you have other ideas in mind?

For what I see https://github.com/openstack/heat-dashboard/commits/master/heat_dashboard/content/stacks/mappings.py it's not updated that much and what we would need to do is have a mapping similar to https://github.com/openstack/heat-dashboard/blob/master/heat_dashboard/content/stacks/mappings.py#L255 but with actual resource names. I assume it can be automated, but I think It'll be better for now to manually do it and open an issue to maybe later automate it.

I'll update the tf-docs mapping with the info on the mappings.py :smile:

[xescugc]

Right now on master we have this implemented :)

We'll do a release soon