Update microservices architecture diagram

[mraible]

Overview of the issue

The current microservices architecture diagram needs to be updated.

https://www.jhipster.tech/microservices-architecture/

I think it'd also be good to include an architecture diagram of micro frontends.

Motivation for or Use Case

People should be able to use our diagrams in their blog posts and presentations. We don't want them to show information that's 5+ years old. Especially since the current diagram uses AngularJS and JHipster Console, both of which are no longer supported.

Suggest a Fix

I created a couple of ideas in OmniGraffle, but I think it might be better to use the same mechanism that was used before. You can find the artifacts I created and a link to how the current one was created on our jhipster-dev mailing list.

JHipster Version(s)

7.9.3

[A-5ingh]

@mraible Can I work on this? I have contributed to jhipster-dotnetcore in the past but would require support in completing this task.

[mraible]

Yes! Please let me know if I can help.

[A-5ingh]

Thanks, @mraible. I'll go through the docs already available and if you can share the components to be added. I can work on it. Do we need to stick to the same design/look or it can also be changed?

[mraible]

This details how the diagram was originally created:

https://github.com/jhipster/generator-jhipster/issues/2785#issuecomment-192944329

I'm not sure we need to use the same system. For example, I created one with OmniGraffle, but it's difficult to tell what changed since it's not text-based.

https://speakerdeck.com/mraible/micro-frontends-for-java-developers-javaone-2022?slide=29

[A-5ingh]

I think using asciiflow will be beneficial as it will be easy to see what gets changed. I have converted OmniGraffle version into ASCII. Please review if this helps.

JHipster Microservices Architecture

                                                                                        /------------------------------------------------------------------\
                                                                                        |cBLU                                                              |
                                                                                        | Gateway                                                          |           /---------------\
                                                                                        |   +-------------+      +--------------+      +-------------+     |           |cC02           |
/-------------------------------------------------------------------\                   |   |cRED         |      |              |      |             |     |           |               |
|                                                                   |                   |   |   Angular   |      | Spring Cloud |      |   Access    +-----|---------->|   KeyCloak    |
|                                                                   |                   |   |     App     |      |    Gateway   |      |   Control   |     |           |               |
|                                     /-----------------------\     |                   |   |             |      |              |      |             |     |           |               |
|                                     |cBLU                   |     |                   |   +-------------+      +--------------+      +-------------+     |           \---------------/
|                                     | JHipster Registry     |     |                   |                                                                  |
|                                     |                       |     |                   |                                                                  |           +-------+
|                                     |                       |     |                   \---+-----------------------------+--------------------------------/           |{s}    |
|                                     |   +---------------+   |     |                       |                             |                                            | Users |
|                                     |   | Eureka Server |   |     |                       |                             |                                            | Roles |
|     +---------------+               |   +---------------+   |     |                       |                             |                                            +-------+
|     |               |               |   | Config Server |   |     |                       |                             |
|     | HashiCorp     |               |   +---------------+   |     |                       |                             |
|     | Consul        |               |                       |     |                       |                       8081  v                  8082
|     |               |               |                       |     |                       |       /------------------\     /------------------\
|     +--------+------+               \----------+------------/     |                       |       |cGRE              |     |cGRE              |
|              |                                 |                  |                       |       |  Microservice 1  |     |  Microservice 2  |
|              |                                 |                  |                       |       |                  |     |                  |
|              +--------------+------------------+                  |                       |       \-----+------------/     +------------------/
|                             |                                     |                       |             |
|                             |                                     |<----------------------+-------------+
|                             |                                     |                                     |         8083                      ...
|                             |                                     | 8500 Consul                   /-----+------------\     /------------------\
|                             |                                     | 8761 Eureka                   |cGRE              |     |cGRE              |
\-------------------------------------------------------------------/                               |  Microservice 3  |     |  microservice n  |
                              |                                                                     |                  |     |                  |
                              V                                                                     \------------------/     \------------------/
                         +---------+
                         |cGRE {s} |
                         |Git Repo |
                         |         |
                         +---------+

and generated png using dtaa

JHipster Micro Frontends Architecture

                                                                                        /------------------------------------------------------------------\
                                                                                        |cBLU                                                              |
                                                                                        | Gateway                                                          |           /---------------\
                                                                                        |   +-------------+      +--------------+      +-------------+     |           |cC02           |
/-------------------------------------------------------------------\                   |   |c1FF         |      |              |      |             |     |           |               |
|                                                                   |                   |   |    React    |      | Spring Cloud |      |   Access    +-----|---------->|   KeyCloak    |
|                                                                   |                   |   |    Shell    |      |    Gateway   |      |   Control   |     |           |               |
|                                     /-----------------------\     |                   |   |             |      |              |      |             |     |           |               |
|                                     |cBLU                   |     |                   |   +-------------+      +--------------+      +-------------+     |           \---------------/
|                                     | JHipster Registry     |     |                   |       ^ ^  ^  ^                 |                                |
|                                     |                       |     |                   |       | |  |  |                 |                                |           +-------+
|                                     |                       |     |                   \---+---|----------------------------------------------------------/           |{s}    |
|                                     |   +---------------+   |     |                       |   | |  |  |                 |                                            | Users |
|                                     |   | Eureka Server |   |     |                       |   | |  |  +-----------------|-+ /-------\                                | Roles |
|     +---------------+               |   +---------------+   |     |                       |   | |  +-------------------+| | |       |                                +-------+
|     |               |               |   | Config Server |   |     |                       |  /+---------\              || | | React |
|     |   HashiCorp   |               |   +---------------+   |     |                       |  |c1FF      |              || +-+  App  |
|     |    Consul     |               |                       |     |                       |  |React App |              ||   | c1FF  |
|     |               |               |                       |     |                       |  \----------/         8081 |V   \-------/      8082
|     +--------+------+               \----------+------------/     |                       |     | /------------------\ |   /------------------\
|              |                                 |                  |                       |     | |cGRE              | |   |cGRE              |
|              |                                 |                  |                       |     | |  Microservice 1  | |   |  Microservice 2  |
|              +--------------+------------------+                  |                       |     | |                  | |   |                  |
|                             |                                     |                       |     | \-----+------------/ |   +------------------/
|                             |                                     |                       |     |       |              |
|                             |                                     |<----------------------+-------------+              |
|                             |                                     | 8500 Consul                 |       |         8083 |                    ...
|                             |                                     | 8761 Eureka                 | /-----+------------\ |   /------------------\
\-------------------------------------------------------------------/                             | |cGRE              | |   |cGRE              |
                              |                                                                   | |  Microservice 3  | |   |  microservice n  |
                              V                                                                   | |                  | |   |                  |
                         +---------+                                                              | \------------------/ |   \------------------/
                         |cGRE {s} |                                                           /--+----\                 |  /-------\
                         |Git Repo |                                                           |       |                 |  |       |
                         |         |                                                           | React |                 |  | React |
                         +---------+                                                           |  App  |                 +--+  App  |
                                                                                               | c1FF  |                    | c1FF  |
                                                                                               \-------/                    \-------/

[A-5ingh]

@mraible any feedback on these two diagrams? I know they look too basic and definitely would add a jazz if we use images/icons of respective technologies.

[dpalic]

This created image can be provided as image, SVG or as text. Original is a text based source file (as DSL)

Here in sketch status, during developing/creating:

and here in finalized status for release:

@mraible if you are interested ( ;-) and I have a good chance for bug bounty) will provide you more details and of course create more diagrams like required

[mraible]

@A-5ingh These look great! Is there anyway to make the text white when the background is red? On the Keycloak box, for instance.

[mraible]

@dpalic This looks awesome! I was going to mention that the wavy lines look funny in the first graphic, but you fixed that in the 2nd one. Is it possible to add more colors, like red or green? Also, we shouldn't use the coffee cup because Oracle will send us a message telling us not too. It's better to use Duke to indicate Java.

[A-5ingh]

@A-5ingh These look great! Is there anyway to make the text white when the background is red? On the Keycloak box, for instance.

Thanks @mraible, I couldn't see any option in ditaa to change the font color but it has different color codes available if you feel like using some other color instead of red.

It would look like this with Blue background.

[A-5ingh]

or @mraible we can use a darker shade of red which automatically uses the font color as white.

[A-5ingh]

So @mraible, we can add logs too but it will be a manual process. Do you want me to do it or do we want to keep it like that so that anyone can generate the png just by using ditaa on the ASCII diagram?

[mraible]

What do you mean by "add logs"? I don't understand what this means.On Nov 4, 2022, at 13:58, A. Singh @.***> wrote: So @mraible, we can add logs too but it will be a manual process. Do you want me to do it or do we want to keep it like that so that anyone can generate the png just by using ditaa on the ASCII diagram?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[A-5ingh]

For instance, adding the git logo to the git repo, react logo to react app, etc. It was a typo, I mean to say logos. @mraible

[mraible]

Thanks for the clarification. Logos would be cool, but if they can't be generated from source, it's probably not worth it. We need to have something that's easy to update.

[A-5ingh]

Right, that's why I didn't do much research. But I see we can give a background image using ditaa. I'll see what I can do. Please do let me know if there is any other feedback or improvement you feel we can do to it

[dpalic]

@dpalic This looks awesome! I was going to mention that the wavy lines look funny in the first graphic, but you fixed that in the 2nd one. Is it possible to add more colors, like red or green? Also, we shouldn't use the coffee cup because Oracle will send us a message telling us not too. It's better to use Duke to indicate Java.

regarding the both image types. It is intentionally. The first image is a sketch / work in progress view to visualize the diagram is not in finished status

regarding logo, sure can replace

regarding the colors, do you have a CI color set/book which we could use?.

[mraible]

@dpalic There are some colors for the website redesign in https://github.com/jhipster/generator-jhipster/issues/13595. Not sure if that's what you're looking for.

[dpalic]

@mraible you mean https://rebrand.ly/jhipster ? the colors of the new website?

If so, I can try to use them

[mraible]

Yes. This might help too. https://github.com/jhipster/jhipster-artwork/issues/21

[deepu105]

@dpalic do you plan to complete this?

[A-5ingh]

@deepu105 / @mraible Please let me know if you are going to consider asciiflow and dtaa for it as showed in previous comments. Just in case @dpalic solution isn't complete.

[mraible]

Looks good! https://www.jhipster.tech/microservices-architecture/