← Index

03UX / Front-end

Ambari Dashboard

Ambari Dashboard

Summary

A control plane for Apache Hadoop clusters, redrawn from operator pain points into a dashboard that ships in production today.

Intro

Apache Ambari, part of the Hortonworks Data Platform, lets enterprises provision, manage, monitor and secure Hadoop clusters. The Dashboard is Ambari's home — where operators detect problems and monitor cluster health.

I worked on it as both designer and front-end engineer alongside tech lead Yusaku Sako and PM Jeff Sposetti.

01 — Overview

Operating Hadoop without guesswork.

Apache Ambari gives operators an intuitive web UI to manage Hadoop clusters effortlessly — it takes the guesswork out of running Hadoop. The Dashboard is the home page where they detect problems and monitor cluster health.

Before this work, service status (HDFS, YARN, etc.) was surfaced as plain text hidden inside tables. "It took me 30 mins before realizing the cluster was broken!" — a real quote from a real operator. The design goal was to visualize that data so the state of a cluster could be read in a second, the way a driver reads a car dashboard.

Apache Ambari — operating a Hadoop cluster
Apache Ambari — operating a Hadoop cluster
Original dashboard — status hidden inside tables
Original dashboard — status hidden inside tables

02 — Into the Design

Four tile types, one grammar.

Texts were categorized into four tile types: Gauge, Number, Links, and Graph. Gauge and Number tiles took customizable color ranges — set a gauge red above 90% capacity and it announces itself across the room. All tiles are moveable by drag and drop.

Layouts went through several iterations. The final grid kept tiles draggable and reorderable while staying legible no matter how the operator arranged them. Sometimes less is more.

Four tile types — Gauge, Number, Links, Graph
Four tile types — Gauge, Number, Links, Graph
Layout iterations — the third option, draggable and reorderable, was chosen
Layout iterations — the third option, draggable and reorderable, was chosen

03 — Into the Details

Hovering reveals; clicking commits.

Tiles are scannable but light on context, so hover surfaces descriptions and actions. Clicking a link tile jumps into a deeper view; clicking a graph tile zooms it in.

The custom color ranges turned a passive monitor into an early-warning system — the moment a metric enters the danger zone, the dashboard changes color.

Hover reveals descriptions and actions
Hover reveals descriptions and actions
Custom color ranges — a red gauge announces itself
Custom color ranges — a red gauge announces itself

04 — A Long-Term Story

Ambari 1.6 → 2.4 → still shipping.

The new dashboard shipped in Ambari 1.6 in June 2014 and earned significant credit from customers. By Ambari 2.4 (2016) we paired the dashboard with a redesigned side menu.

Working as both designer and engineer on the same surface for four years remains the single most formative project of my career.

Ambari 1.6 — 2014
Ambari 1.6 — 2014
Ambari 2.4 — 2016, with redesigned side menu
Ambari 2.4 — 2016, with redesigned side menu

Next — 04

People @ Hortonworks