open-telemetry / opentelemetry.io

The OpenTelemetry website and documentation
https://opentelemetry.io
Creative Commons Attribution 4.0 International
535 stars 1.17k forks source link

Add a visualization to "Zero-code instrumentation" #5354

Open svrnm opened 2 weeks ago

svrnm commented 2 weeks ago

It would be great to have a visualization for the Zero-code instrumentation page, that demonstrates that the "Zero Code Solution" is something that injects the otel components (sdk, exporters, instrumentation libraries, etc.) from the outside into the application.

Visually it should be aligned existing visualizations, e.g.

Special Note for Outreachy Contributors: if you want to work on this issue, please make sure that you have completed the small steps and at least one assigned issue as outlined here: https://github.com/open-telemetry/opentelemetry.io/issues/5290

mercybassey commented 2 weeks ago

Hi @svrnm can I work on this?

svrnm commented 2 weeks ago

Hi @svrnm can I work on this?

let's finish https://github.com/open-telemetry/opentelemetry.io/pull/5330 first. I'll take another look at it tomorrow, and if things are good you can pick this one.

svrnm commented 2 weeks ago

@mercybassey with #5330 you can work on this now! Thanks.

mercybassey commented 1 week ago

@svrnm I did a sketch, but the SVG version doesn't look nice. zero-code-1 zero-code-2

I'd like to know your take on the sketch if it aligns with what Zero-code does.

svrnm commented 1 week ago

@mercybassey good start thank you!

A few comments:

mercybassey commented 1 week ago

@mercybassey good start thank you!

A few comments:

  • Can you let me know where the icons you are using come from? If you created them yourself, we are good, otherwise we need to make sure that they are covered by an open license. Note that we have some of our own icones @ https://github.com/open-telemetry/opentelemetry.io/tree/main/iconography/512x512 you can use (e.g. the exporter and SDK)
  • The "application" we are talking about is in most cases a server-side application not a mobile application, if you'd like to pick from our exising iconography, service is a possible choice: https://github.com/open-telemetry/opentelemetry.io/blob/main/iconography/512x512/Service.png
  • The zero code solutions bundles SDK, libraries & exporter, not sure if this can be visualized somehow. Easiest solution is labelling the lines with "bundles" or something similar
  • The arrow between the zero code solution and the application should visualize an "injection", so maybe you have a good idea to make this visual, otherwise labeling is a solution ("injects")

Currently, the icons are from SVG Repo. However, I will use Open Telemetry icons instead and address your comments. Thank you.

svrnm commented 1 week ago

Currently, the icons are from SVG Repo. However, I will use Open Telemetry icons instead and address your comments. Thank you.

Thanks. Note, that we can use images from other sources, but we need to know under which license they are released. SVG Repo states that the icons they show are "free", but not all licenses might be compatible with our licenses, and some of their licenses would come with implications, e.g. a license that requires attribution

mercybassey commented 1 week ago

Currently, the icons are from SVG Repo. However, I will use Open Telemetry icons instead and address your comments. Thank you.

Thanks. Note, that we can use images from other sources, but we need to know under which license they are released. SVG Repo states that the icons they show are "free", but not all licenses might be compatible with our licenses, and some of their licenses would come with implications, e.g. a license that requires attribution

Noted. Here's the new design:

Concept map - Page 1

All the icons used are from Open Telemetry.

I'd appreciate your review. Thank you.

svrnm commented 1 week ago

This looks really good already, can you do the following: