Web UI (d3.js) to explore a microservice landscape with applications and their dependencies.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Henning Jacobs f6c02657bc allow groupby=team 1 week ago
application_landscape_explorer allow groupby=team 1 week ago
deploy allow filtering by tags 2 weeks ago
.flake8 allow loading real data 2 weeks ago
.gitignore allow loading real data 2 weeks ago
.pre-commit-config.yaml "permalink" with location.hash 2 weeks ago
Dockerfile initial project setup 2 weeks ago
LICENSE add LICENSE 2 weeks ago
Makefile fix Makefile 2 weeks ago
README.md add screenshot 2 weeks ago
poetry.lock allow loading real data 2 weeks ago
pyproject.toml allow loading real data 2 weeks ago
screenshot1.png add second screenshot 2 weeks ago
screenshot2.png add second screenshot 2 weeks ago
screenshot3.png add screenshot 2 weeks ago

README.md

Application Landscape Explorer

Explore your landscape of applications/services with this interactive web UI built with d3.js. Application/service and dependency information must be provided as input data in TSV format.

screenshot 2 (many services) screenshot 3 (partitioning)

Current features:

  • search by application ID, team ID, or arbitrary tags
  • hide nodes “far away” from the selection (press “1” to only show applications directly connected to the selection)
  • keyboard shortcuts for pan/zoom (arrow keys, +/-, “C” to center on selection)
  • color applications by owning team

Applications can represent any software component, not only microservices, e.g. background jobs, web frontends, or even an external SaaS provider. Every application is identified by a unique ID. The ID can be any string, but should not contain whitespace or “special” characters (otherwise searching for the ID will be difficult for humans). Each application is owned by one team. Teams are identified by string ID (again without whitespace).

Usage

Run with Docker

Run the web app with example data on port 8080:

docker run -it -p 8080:8080 hjacobs/application-landscape-explorer:latest

Open localhost:8080 in your browser and Use the “Help” button in the top right corner to learn about keyboard shortcuts.

Run from source

The backend requires Python 3.7+ and Poetry.

This will run the app with example data:

make install
make run

Data

Data for applications and their dependencies can be provided by plain TSV files. Example with dependencies between applications ‘myapp’, ‘foo’, and ‘bar’:

echo -e "myapp\tfoo" > mydependencies.tsv
echo -e "foo\tbar" >> mydependencies.tsv
echo -e "myapp\tbar" >> mydependencies.tsv
poetry run python3 -m application_landscape_explorer --dependencies-file mydependencies.tsv

The --dependencies-file argument takes a path to a TSV file with at least two columns, named source and target:

  • source: source application ID (“caller”, “client”, “consumer”)
  • target: target application ID (“callee”, “server”, “provider”)
  • type: optional type of the dependency, e.g. “http” or “event”
  • tags: comma-separated list of arbitrary key:value labels

The optional --applications-file argument expects a path to a TSV file with these columns (all of them except id are optional):

  • id: unique application ID
  • name: human-readable name of the application
  • team: ID of the owning team
  • tier: application's criticality
  • tags: comma-separated list of arbitrary key:value labels

You can transform existing JSON files to TSV with jq, e.g. to take an JSON array with application objects:

echo -e "id\tname\tteam" > applications.tsv
cat applications.json | jq '.[]|[.id,.name,.team_id]|@tsv' -r >> applications.tsv

URL Parameters

The frontend code reads a number of fragment parameters. Some of them enable hidden features which are not exposed in the UI. Parameters are passed in the URL as key=value after the hash (#) symbol and separated by semicolon (;).

Available URL parameters:

  • q: the search query (application ID, team ID, tag)
  • nodecolor: how to color nodes, can be team (default) or tag:<tag-prefix> (e.g. nodecolor=tag:dc to color data centers differently)
  • partitionx: comma-separated list of tags to partition the nodes on the horizontal axis (e.g. partitionx=dc:dc1,dc:dc2 will move nodes of DC1 to the left and nodes of DC2 to the right)
  • partitiony: comma-separated list of tags to partition the nodes on the vertical axis