Adobe Contributes to Netflix’s Vizceral Open Source Code

Our team is working on the Adobe Cloud Platform Observability, collecting different types of data metrics. Presenting data visualizations in an intuitive, easy to understand format is very important, and my team is developing a dashboard for data flow visualizations, traffic flow, etc.

After we did some research into the existing open source tools on the market, we have picked one from Netflix: its component called Vizceral.

Vizceral, from Netflix’s tech blog
“Vizceral has transformed the way we understand and digest information about the state of traffic flowing into the Netflix control plane. We wanted to be able to intuit decisions based on the holistic state of the system. To get that, we needed a tool that gives us an intuitive understanding of the entire system at a glance,” said Netflix on its tech blog.
“We can’t afford to be bogged down in analysis of quantitative or numerical data, or otherwise ‘parse’ the information in a typical dashboard. When we can apply an intuitive approach instead of relying on the need to parse data, we can minimize the time an outage impacts millions of members. We call the practice of building these types of systems Intuition Engineering. Vizceral is our first, flagship example of Intuition Engineering.”

How Adobe Is Using Vizceral

As you can see, Vizceral is a very graphical tool, which is ideal for visualizing complex data flows and nodes connections. What’s also so important is that it exists as a React.js component, so it can be easily integrated with the existing UI interfaces here at Adobe.

Despite its ‘coolness,’ Vizceral lacks the ability to visually code the nodes. As demonstrated in the screenshot below, the user sees dozens of circles, each of them represents a node. By clicking on them, we are drilling down to the deeper level of node relationships and so on. What we see is a cloud of circles, each of them with a text label and the node description. This is nice, but we want to be able to pass the data and let the Vizceral component pick the right node icon. Using data, we also want to pass the information about the node’s ‘status,’ not just the connection line status as it was originally implemented in Vizceral.

How Adobe Is Contributing to Vizceral

While developing the Data Platform Observability dashboard, we decided to contribute back to the Open Source.

Our implementation features Custom Shapes Factory, where custom node shapes are registered, and an extendable set of data-driven node shapes:

The implementation does not break the existing functionality of Vizceral, but simply specifies the node type and/or the node status in your data:

If nothing is specified for node_type and/or nodeStatus (or something of an unknown type), the default UI will be rendered.

The new functionality is now available from Vizceral master (starting from Release version 4.6.0 and up) at Git Hub, and this helps to visually code our data displayed on the dashboard. Currently, this is what one of the Adobe Cloud Platform Observability dashboards looks like :

Here we have database nodes, service nodes, pipeline nodes, MS Azure node, etc. Nodes are also color-coded to represent node status (or node ‘health’).

Check out another example of nested color-coded nodes below (the data in these examples is generic and does not represent actual process):

One of the Vizceral’s features is to click at the node to drill down and expand it and see detailed info in a separate table.
Sample data

While working further with Vizceral, we still see room for improvement of the tool, and we are planning on contributing back to Vizceral. Open Source helps us a lot, saving time on developing ‘tools,’ so we can concentrate more on developing products and further perfecting the performance of our apps.

Showing Off Our Demo

We, at Platform Engineering have in-Adobe ‘Open House’ events once a month where the teams show their progress, share ideas, give on-stage demos, and more.

Among the most noticeable guests at our open houses are Brad Rencher, Abhay Parasnis, etc.

Data Platform booth at Platform Engineering Open House on November 9, 2017

Our team showed a demo of the Adobe Cloud Platform Observability dashboard during an internal Adobe Engineering Open House last month. We want to encourage more people to learn from our work and see the power of open source.

Data Platform booth at Platform Engineering Open House on November 9, 2017

To learn more about Adobe’s developer efforts, head over to Adobe I/O’s website or get in touch with Vlad via his Twitter.