Dependency Viewer presents application dependency information in graphs.

Table of Contents

• Introduction
• Features
• Tools

Introduction

Dependency Viewer dynamically obtains app lists from Prometheus. Then, each app’s dependency information is fetched from the apps’ Spring Boot endpoints.

It greatly simplifies debugging production issues that are spanned across multiple applications and also familiarizes developers with app dependency relationships.

Note: Dependency Viewer is a project that I created during my internship at the Ontario Teachers’ Pension Plan. Sensitive company information has been changed or blurred out and graph generations have been sped up.

Features

Main Tool Bar

Select an app to generate a graph: By selecting an app type (UI, API, or core), an environment (dev, stg, or prd), and an app name, you can generate a dependency graph.

Favourite an app: Click on the hollow green star to save an app to favourites. You can access your favourite apps within advanced options (more on this later).

Graph

Hover to show more: Hover over nodes to see how this app is connected to other apps, and this app’s environment and version information.

Click on nodes to show a pop-up app panel: Looking for more information on this app? Click to expand the pop-up app panel. More on this below.

Extra tools panel

Select a layout: Choose between different layouts to optimize node placement.

Highlight a keyword: Also in the extra tools panel, you can highlight a keyword to quickly filter through apps.

Select a view: You can toggle between colour-coding app statuses (green for up and red for down) and environments (light blue for development, medium blue for staging, dark blue for production).

Show circular dependencies:

• A. Highlight different instances of the same apps (e.g., different versions of an app exist in the graph)

• B. Highlight same instances of the same apps (e.g., the edges within a circular loop of “app1 → app2 → app3 → app1”).

Collapse duplicate apps: Collapse apps that have the same name / url but different versions to show a more concise graph. This is to priorize the understanding of app relationships.

Show more information: Click on the ⓘ icon or alternatively press ‘?’ on the keyboard to see a guide to reading a graph.

App Panel

View info link: Open the app’s information link in a new tab.

View sub-dependencies: See a graph of a chosen app’s sub-dependencies in a new tab.

Advanced Options

Under ⚙️ tab

Clear cache: To get realtime app lists (for example, a new app is deployed), you can click the Clear Cache button to refresh the cached app lists.

Enter custom URL: In the case when you can’t find an app, you can enter your own URL.

Manage favourite apps: Use the dropdowns to add or remove favourite apps, and you can generate graphs from there. The graphs will be presented in a new tab.

Tools

• Frontend: StencilJS (JavaScript, HTML, and CSS)
• Graph library: Cytoscape
• Backend: NodeJS and Express)
• CI/CD: Bamboo and Pivotal Cloud Foundry]
• Testing: Jest