Heatmap Thresholds
Assign to virtual machines and virtual domains thresholds
to monitor the health of the system.
Heatmap Thresholds
CloudApex is a graphical user interface called an affinity-based UI that displays the relationships between the physical and virtual network resources. This is significantly better than tabular formats seen in many networking products. It's used by companies that work with SDN (Software Defined Network) Technology. Enables users to run a search across their entire cloud infrastructure and display relevant data about performance and security. This cloud network visualization platform also provides:
Health status with a real-time display of virtual machine and network status. It highlights relevant elements based on health threshold criteria by self-organizing the information in its display.
Diagnostics that use an in-kernel telemetry framework that provides real-time data across a distributed framework.
The Problem
Allow users to create custom thresholds by applying rules to specific objects at the virtual and physical level. Users should be able to create, edit, and eliminate parameters.
Build an interface that’s simple to understand, and provide guidance by input-response, to help cloud administrators
Backend engine should computes user thresholds and provide color coded to finals metrics in real time.
Monitoring Goals
UI has the responsibility to tell the user what is happening right now in their environment/cluster and provide information of the performance.
The UI must highlight anything that needs the viewer's attention.
Technology Platform
Web Server/browser
Screen Type
Standard and extra-large screen
User manage more than one monitor
Critical Design Practices
Organize information to support its meaning and use.
Maintain consistency to enable quick and accurate interpretation.
Make the experience aesthetically pleasing and ordered.
Support meaningful comparisons.
Some of the sketches in the process
Defining functionalities and content during wireframing
UX Solution
Resource Map
This visualization represents on the top the virtual resources (Virtual Machines and Virtual Domains) and the bottom the physical resources (Servers and Racks). Rectangles are the representation of each element that through the interaction allows the use map where is located and performing. Heatmap is on until a metrics is created and applied. It's a dynamic and scalable UI.
Heatmap Settings
This UI allows creating the thresholds bringing the object, select the metric (Packets and Bytes), and correlate those metrics in a bar with the Heat Map colors for troubleshooting at Resources Map.
Thresholds Table
The table displays a set of metrics that allow edit, disable, enable, delete, and correlate those metrics applied to user resources.
Heatmap On
Resource Map with virtual machines Heatmap on and dropdown to select a monitoring metric at servers. Those metrics are synchronizing with logs in real-time.
Main User Flow - Metrics applied
and heatmap in action
Key Learnings
The metrics are represented with the universal meaning of color, red represented that the metric has been met something to worry about it, yellow represents awareness, grayscale represents from dark low traffic to white high traffic of the performance of the virtual machines just that are working well and working in their maximum allowed.