feat: Generate map of an entire system

Feature Suggestion

Using the <DependencyGraph> component, visualize a map of an entire system.

In @Fox32 's #4392, among other PRs, we’re really starting to flesh out the linkages that the individual elements in the catalog include. We’re getting tables, pages in the org plugin, info on the entity AboutCards, etc.

The current system model is documented here: https://backstage.io/docs/features/software-catalog/system-model#ecosystem-modeling

Visualizing this model representing the as-is state, provides the following benefits:

• Shows the current state of the system, as opposed to a ideal intended architecture
• Allows new users to more easily understand how all of the components fit together
• Provides those performing operations a better understanding of impacts of service degredation
• Identifies gaps in an intended architecture: are we missing an API? maybe it exists but it hasn’t yet been added to the catalog? etc.

This example just uses this rough code:

 const exampleNodes = [
    { id: 'supporting-functions-domain' },
    { id: 'reporting-system' },
    { id: 'service-a' },
    { id: 'service-b' },
    { id: 'service-b' },
    { id: 'corporate-reporting-website' },
    { id: 'api-a' },
    { id: 'api-b' },
  ];
  
  const exampleEdges = [
    { from: 'reporting-system', to: 'supporting-functions-domain', label: 'part of' },
    { from: 'api-a', to: 'reporting-system', label: 'part of' },
    { from: 'api-b', to: 'reporting-system', label: 'part of' },
    { from: 'service-a', to: 'reporting-system', label: 'part of' },
    { from: 'service-b', to: 'reporting-system', label: 'part of' },
    { from: 'service-b', to: 'reporting-system', label: 'part of' },
    { from: 'corporate-reporting-website', to: 'reporting-system' },
    { from: 'corporate-reporting-website', to: 'reporting-system', label: 'part of' },
    { from: 'service-a', to: 'api-a', label: 'provides' },
    { from: 'service-b', to: 'api-b', label: 'provides' },

  ];

  ... snip ...

  return (
            <DependencyGraph
                nodes={exampleNodes}
                edges={exampleEdges}
                paddingX={50}
                paddingY={50}
                direction={'BT'}
              />
  );

Possible Implementation

• I feel like this should be front and center as a simple way to digest a system, before drilling down further into tables of information, so maybe visible on the main System card in the org plugin? And/or, potentially exposable by the new explore plugin in some way as well, but I’m sure it can be iterated. But to be honest, once the component itself exists and is put into the code base, the project can continue to iterate as it finds it’s ideal home.
• Each element in the graph should ideally be clickable, but if not in the first iteration I think that’s fine.

Context

[andrewthauer]

@adamdmharvey - This is really neat 🌮! We’ve been slowing starting to use C4 Model to describe systems and I think the Backstage ecosystem model maps quite nicely to the context/container/component diagrams within C4. Been meaning to try to model out one our our systems in the catalog. Would love to collaborate and/or help out on this 😄.

[adamdmharvey]

I took a very quick stab at this yesterday, and wanted to just share here for feedback. I’d likely need to submit a draft PR for collaboration as the more advanced JavaScript programming is a bit beyond my skills.

• In the picture, the map is still mostly static but I do generate the system name dynamically as a start.
• This includes a new <SystemDiagram> card. At the moment, I placed it in plugin-catalog - does that make sense?
• To freben’s point re hot take, I can see two ways of doing this, any thoughts on either?
  • Use the getEntityRelations() helper in a loop, collecting the relations suffixing results to the nodes/edges arrays.
  • Use the getEntities() for everything in a massive catalog in mem, and then loop through that (is this what you were eluding to @freben ?)

It’s for sure that last point I’ll be weak on, and to be fair what I did so far is the “easy part”. If others are willing, could open up a branch in the repo rather than my fork and throw up what I’ve got to see if it sticks. There’s free 🍕 in it for you. 😁