Skip to content
This repository has been archived by the owner. It is now read-only.
An alternative UI for Zipkin (Distributed Tracing), this repo is no longer used as it's already merged into upstream, please go to https://github.com/openzipkin/zipkin/tree/master/zipkin-lens
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit e191664 Dec 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
jest Initial commit Dec 6, 2018
scss Initial commit Dec 6, 2018
src Initial commit Dec 6, 2018
static Initial commit Dec 6, 2018
.babelrc Initial commit Dec 6, 2018
.eslintrc
.gitignore Initial commit Dec 6, 2018
CODE_OF_CONDUCT.md Initial commit Dec 6, 2018
CONTRIBUTING.md Initial commit Dec 6, 2018
LICENSE.txt Initial commit Dec 6, 2018
NOTICE.md Initial commit Dec 6, 2018
README.md Update README.md Dec 7, 2018
package-lock.json Initial commit Dec 6, 2018
package.json Initial commit Dec 6, 2018
webpack.dev.config.js Initial commit Dec 6, 2018
webpack.prod.config.js Initial commit Dec 6, 2018

README.md

Note

This codebase is moved to https://github.com/openzipkin/zipkin/tree/master/zipkin-lens, to be bundled in the default server. Please raise issue and pull request there.

Zipkin Lens

Zipkin-lens is an alternative UI for OpenZipkin, which based on React, Netflix/vizceral and chartjs.

Here are a couple example screen shots:

Search Screen

Trace Detail Screen

Quick start

Zipkin-lens required nodejs 10.2.0 to start. You could easily try Zipkin-lens at local using any zipkin deployment using below command:

$ npm install --dev
$ API_BASE="http://localhost:9411" npm run start

Production build

$ npm run build

Authentication / Authorization

Zipkin Lens can be secured by running it behind an authenticating proxy like Apache HTTPD, Nginx or similar.

Acknowledgements

Zipkin Lens design includes facets of old and new designs. Here are some notable new aspects borrowed or adapted from others.

Trace Mini Map

The original Zipkin UI trace detail screen had a Zoom feature which is helpful for looking at nuance in a large trace by expanding the timeline around a group of spans. However, it did not help with navigating to these spans. We discussed the idea of a mini-map, similar to what video games use to quickly scroll to a place of interest in a game. This is especially important in messaging spans where there can be a large time gap separating clusters of spans. The initial mini-map implementation in Lens is very similar to work in Jaeger Ui, as a mini-map occurs over the trace and lets you zoom to a timeframe similar to Chrome or FireFox debug tools. The implementation was different as it is implemented with SVG, which is easier to debug than Canvas.

Span Detail pop-under

The original Zipkin UI trace detail screen would pop-out span details when clicking on a span. This had two problems: One was that the pop-out blocked your position in the trace, so after you close the pop-out you need to find it again. Another problem was that you cannot view two span details at the same time. Lens pops these details under a selected span. Although the data is the same as the old Zipkin UI, the gesture is the same as in Jaeger's UI and inspired by them.

Vizceral Dependencies graph

The original Zipkin UI dependencies screen used a D3 library which connected services with curved arrows. These arrows varied in thickness depending on the traffic. When you clicked an arrow, details would pop out. The initial version of Lens uses the same library as Haystack Ui to present service dependencies: Netflix Vizceral.

You can’t perform that action at this time.