Heatmap Thresholds

Assign to virtual machines and virtual domains thresholds

to monitor the health of the system.

Frame 8.jpg

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.

heatmap threshoulds.jpg

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

Sketch (4).jpg

Defining functionalities and content during wireframing

 
ezgif.com-gif-maker (7).gif

Theshoulds Settings

Apply metrics to Virtual Domains, Virtual Machines, and Servers.

 

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.