diff --git a/oncall/client/browser/appstate-manager.js b/oncall/client/browser/appstate-manager.js
deleted file mode 100644
index 22c39b1..0000000
--- a/oncall/client/browser/appstate-manager.js
+++ /dev/null
@@ -1,132 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * App state manager.
- */
-
-var hg = require('mercury');
-var qs = require('qs');
-var url = require('url');
-
-module.exports = {
-  init: init,
-  getAppState: getAppState,
-  setAppState: setAppState,
-  getCurState: getCurState,
-};
-
-/**
- * An observable to store app's state which will be encoded in url parameters.
- */
-var appState = hg.varhash({});
-
-/** The default app state. */
-var defaultAppState = {
-  // The level of view.
-  // - global: all (aggregated) metrics in all zones.
-  // - zone: all metrics in a specific zone.
-  // - instance: all metrics for a specific instance.
-  level: 'global',
-
-  // The data aggregation type for global view.
-  // In global view, each metric (e.g. nginx qps) in a certain zone might have
-  // multiple instances (e.g. multiple nginx workers). We need to aggregate data
-  // from all those instances to a single one.
-  // We currently support 'Max' and 'Average'.
-  globalLevelAggType: 'Max',
-
-  // The zone to show in the zone level.
-  zoneLevelZone: '',
-
-  // The type of metrics to show in the zone level.
-  // This could either be 'CloudServices' or 'Nginx'.
-  zoneLevelType: '',
-
-  // The instance to show in the instance level.
-  instanceLevelInstance: '',
-
-  // The zone of the instance in the instance level.
-  instanceLevelZone: ''
-};
-
-/**
- * A flag indicating whether to trigger history.pushState when
- * app state changes.
- */
-var pushHistoryState = true;
-
-/**
- * Sets up app state and its various event listeners.
- * @param {callback} stateChangedListener - The callback that handles app state
- *     changes.
- */
-function init(stateChangedListener) {
-  // When appState changes, push the state to browser's history.
-  appState(function(data) {
-    if (pushHistoryState) {
-      var str = qs.stringify(data);
-      window.history.pushState(undefined, '',
-          window.location.origin + window.location.pathname + '?' + str);
-    }
-    stateChangedListener(getCurState());
-  });
-
-  // Get the current state from url parameters.
-  var initState = qs.parse(url.parse(window.location.href).query);
-  // Fill in default values.
-  Object.keys(defaultAppState).forEach(function(key) {
-    if (!initState[key]) {
-      initState[key] = defaultAppState[key];
-    }
-  });
-  appState.set(initState);
-
-  // When the history state changes, we update the appState observable
-  // which will trigger its change listener defined above.
-  window.addEventListener('popstate', function(event) {
-    // We don't want to mess with history states in this case.
-    pushHistoryState = false;
-    appState.set(qs.parse(url.parse(window.location.href).query));
-    pushHistoryState = true;
-  });
-}
-
-/**
- * Gets an app state entry for the given name.
- * @param {string} name - The name of the app state entry.
- * @return {string}
- */
-function getAppState(name) {
-  return appState()[name];
-}
-
-/**
- * Sets app state.
- * @param {Object} stateObj - The state object to set.
- */
-function setAppState(stateObj) {
-  var curState = appState();
-  Object.keys(stateObj).forEach(function(key) {
-    curState[key] = stateObj[key];
-  });
-  appState.set(curState);
-}
-
-/**
- * Gets the current app state.
- * @return {Object}
- */
-function getCurState() {
-  // For some reason, the object returned by appState() doesn't have
-  // Object.prototype as its prototype, which will cause issues in some other
-  // places. To workaround this, we return a cloned object which has
-  // Object.prototype.
-  var obj = {};
-  var curAppState = appState();
-  Object.keys(curAppState).forEach(function(key) {
-    obj[key] = curAppState[key];
-  });
-  return obj;
-}
diff --git a/oncall/client/browser/components/data-table/index.js b/oncall/client/browser/components/data-table/index.js
deleted file mode 100644
index 53bdf2d..0000000
--- a/oncall/client/browser/components/data-table/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * A simple data table.
- */
-
-var hg = require('mercury');
-var h = require('mercury').h;
-
-module.exports = create;
-module.exports.render = render;
-
-/** Constructor. */
-function create(data) {
-  var state = hg.state({
-    title: data.title,
-    rows: data.rows
-  });
-  return state;
-}
-
-/** The main render function. */
-function render(state) {
-  return h('div.data-table', [
-    h('div.data-table-title', state.title),
-    h('table', state.rows.map(function(row) {
-      return h('tr', row.map(function(col) {
-        return h('td', col !== '' ? col : 'n/a');
-      }));
-    }))
-  ]);
-}
diff --git a/oncall/client/browser/components/full-graph/index.js b/oncall/client/browser/components/full-graph/index.js
deleted file mode 100644
index ada32a1..0000000
--- a/oncall/client/browser/components/full-graph/index.js
+++ /dev/null
@@ -1,266 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * A graph showing multiple metrics in different colors along with their
- * summary items showing their current/pass values and line colors. User can
- * "select" one or more metrics by clicking on their summary items. The graph
- * then will only show selected metrics (if the selection is not empty).
- *
- * The graph will also overlay a graph of the metric stored in the
- * "hoveredMetric" observable passed from some other component.
- */
-
-var hg = require('mercury');
-var h = require('mercury').h;
-var svg = require('virtual-dom/virtual-hyperscript/svg');
-var dateformat = require('dateformat');
-
-var Consts = require('../../constants');
-var MouseMoveEvent = require('../../mousemove-handler');
-var Util = require('../../util.js');
-
-module.exports = create;
-module.exports.render = render;
-
-var colors = [
-  '#16a085',
-  '#2980b9',
-  '#8e44ad',
-  '#808B96',
-  '#f39c12',
-  '#d35400',
-  '#27ae60',
-  '#c0392b'
-];
-
-/** Constructor. */
-function create(data) {
-  // Transform the raw data to metrics array.
-  // Also calculate time and value range across all metrics.
-  var minTime = Number.MAX_VALUE;
-  var maxTime = 0;
-  var minValue = Number.MAX_VALUE;
-  var maxValue = 0;
-  var metrics = data.metrics.map(function(metric, index) {
-    minTime = Math.min(minTime, metric.MinTime);
-    maxTime = Math.max(maxTime, metric.MaxTime);
-    minValue = Math.min(minValue, metric.MinValue);
-    maxValue = Math.max(maxValue, metric.MaxValue);
-    return {
-      label: metric.Name,
-      value: metric.CurrentValue,
-      color: colors[index % colors.length],
-      threshold: metric.Threshold,
-      healthy: metric.Healthy,
-      historyTimestamps: metric.HistoryTimestamps,
-      historyValues: metric.HistoryValues,
-    };
-  });
-
-  // Calculate the overall health for all metrics.
-  var healthy = true;
-  metrics.forEach(function(metric) {
-    healthy &= metric.healthy;
-  });
-
-  var state = hg.state({
-    // The timestamp when the data is loaded from the backend server.
-    collectionTimestamp: data.collectionTimestamp,
-
-    // The graph title.
-    title: data.title,
-
-    // Time range.
-    minTime: minTime,
-    maxTime: maxTime,
-
-    // Value range.
-    minValue: minValue,
-    maxValue: maxValue,
-
-    // Metrics shown in this graph.
-    metrics: metrics,
-
-    // Overall health.
-    healthy: healthy,
-
-    // Keep track of selected metrics.
-    // A metric line will be visible if it is selected.
-    selectedMetrics: hg.varhash({}),
-
-    // See comments in instance-view/index.js.
-    mouseOffsetFactor: data.mouseOffsetFactor,
-    hoveredMetric: data.hoveredMetric,
-
-    channels: {
-      mouseMove: mouseMove,
-      mouseOut: mouseOut,
-      mouseClickOnSummaryItem: mouseClickOnSummaryItem
-    }
-  });
-
-  return state;
-}
-
-/** Callback when mouse is moving on the graph. */
-function mouseMove(state, data) {
-  if (state.mouseOffsetFactor() !== data.f) {
-    state.mouseOffsetFactor.set(data.f);
-  }
-}
-
-/** Callback when mouse moves out of the graph. */
-function mouseOut(state) {
-  state.mouseOffsetFactor.set(-1);
-}
-
-/** Callback when user clicks on a metric's summary item. */
-function mouseClickOnSummaryItem(state, label) {
-  if (!state.selectedMetrics.get(label)) {
-    state.selectedMetrics.put(label, 1);
-  } else {
-    state.selectedMetrics.delete(label);
-  }
-}
-
-/** The main render function. */
-function render(state) {
-  // Render graphs.
-  var items = [
-    renderContent(state),
-    renderThreshold(state)
-  ];
-
-  // Render an overlay graph for the metric stored in state.hoveredMetric.
-  if (Object.keys(state.hoveredMetric).length !== 0) {
-    var metric = state.hoveredMetric;
-    var numPoints = metric.historyTimestamps.length;
-    var minTime = metric.historyTimestamps[0];
-    var maxTime = metric.historyTimestamps[numPoints - 1];
-    items.push(svg('svg', {
-      'viewBox': '0 0 100 100',
-      'preserveAspectRatio': 'none'
-    }, [
-      Util.renderMetric(state.hoveredMetric,
-        minTime, maxTime, metric.minValue, metric.maxValue, 1, '#AAA', 1)
-    ]));
-  }
-
-  // Render mouse line.
-  var offset = 100 * state.mouseOffsetFactor;
-  items.push(svg('svg', {
-   'class': 'overlay',
-   'viewBox': '0 0 100 100',
-   'preserveAspectRatio': 'none'
-  }, [
-    svg('polyline', {
-      'points': offset + ',0 ' + offset + ',100'
-    })
-  ]));
-
-  var endDate = new Date(state.collectionTimestamp * 1000);
-  var startDate = new Date((state.collectionTimestamp - 3600) * 1000);
-  return h('div.full-graph-container', [
-      h('div.full-graph-title', state.title),
-      h('div.content-container', [
-        // The summary row at the top of the graph.
-        renderSummaryRow(state),
-        // The main graph.
-        h('div.full-graph', {
-          'ev-mousemove': new MouseMoveEvent(state.channels.mouseMove),
-          'ev-mouseout': hg.send(state.channels.mouseOut)
-        }, items),
-        // The time axis at the bottom.
-        h('div.time', [
-          h('div.time-label', dateformat(startDate, 'HH:MM')),
-          h('div.time-label', dateformat(endDate, 'HH:MM'))
-        ])
-      ])
-  ]);
-}
-
-/** Renders the main graph. */
-function renderContent(state) {
-  var items = state.metrics.map(function(metric) {
-    var strokeOpacity = isMetricVisible(state.selectedMetrics, metric.label) ?
-        1 : 0.1;
-    var metricLine = Util.renderMetric(
-        metric, state.minTime, state.maxTime,
-        state.minValue, state.maxValue, 1.5, metric.color, strokeOpacity);
-    return metricLine;
-  });
-  return svg('svg', {
-    'class': 'content',
-    'viewBox': '0 0 100 100',
-    'preserveAspectRatio': 'none'
-  }, items);
-}
-
-/** Renders the threshold line. */
-function renderThreshold(state) {
-  var minThreshold = Number.MAX_VALUE;
-  state.metrics.forEach(function(metric) {
-    minThreshold = Math.min(minThreshold, metric.threshold);
-  });
-  var thresholdOffset = Util.getOffsetForValue(
-      minThreshold, state.minValue, state.maxValue);
-  return svg('svg', {
-    'class': 'threshold-line',
-    'viewBox': '0 0 100 100',
-    'preserveAspectRatio': 'none',
-  }, [
-    svg('path', {
-      'd': 'M0 ' + thresholdOffset + ' L 100 ' + thresholdOffset,
-      'stroke-dasharray': '2,2'
-    })
-  ]);
-}
-
-/** Renders the summary row. */
-function renderSummaryRow(state) {
-  var items = state.metrics.map(function(metric) {
-    var curValue = Util.formatValue(
-        Util.interpolateValue(metric.value, state.mouseOffsetFactor,
-          metric.historyTimestamps, metric.historyValues));
-    var metricSummaryClassNames = [];
-    if (!isMetricVisible(state.selectedMetrics, metric.label)) {
-      metricSummaryClassNames.push('hidden');
-    }
-    if (!metric.healthy) {
-      metricSummaryClassNames.push('unhealthy');
-    }
-    var metricValueClassNames = [];
-    if (state.mouseOffsetFactor >= 0) {
-      metricValueClassNames.push('historyValue');
-    }
-    if (!metric.healthy) {
-      metricValueClassNames.push('unhealthy');
-    }
-    return h('div.metric-summary-item', {
-      className: metricSummaryClassNames.join(' '),
-      'ev-click': hg.send(state.channels.mouseClickOnSummaryItem, metric.label)
-    }, [
-        h('div.metric-summary-title', Consts.getDisplayName(metric.label)),
-        h('div.metric-summary-value', {
-          className: metricValueClassNames.join(' ')
-        }, curValue),
-        h('div.metric-summary-color', {
-          'style': {backgroundColor: metric.color}
-        })
-    ]);
-  });
-  return h('div.metric-summary-container', items);
-}
-
-/**
- * Checks whether the given metric is visible based on the metrics stored in
- * the selectedMetrics object.
- * @param {Object} selectedMetrics - An object indexed by metric names.
- * @param {string} metric - The name of the metric to check.
- * @return {boolean}
- */
-function isMetricVisible(selectedMetrics, metric) {
-  return Object.keys(selectedMetrics).length === 0 || selectedMetrics[metric];
-}
diff --git a/oncall/client/browser/components/instance-view/index.js b/oncall/client/browser/components/instance-view/index.js
deleted file mode 100644
index c6f9c05..0000000
--- a/oncall/client/browser/components/instance-view/index.js
+++ /dev/null
@@ -1,180 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/*
- * The instance view.
- *
- * In this view, we show detailed data of vanadium services or nginx servers for
- * a single GCE instance.
- *
- * The page is divided into several sections:
- * - We first show a large graph for the main metrics we care about the most,
- *   such as "vanadium services request latency".
- * - We then show various "helper" stats that can help people diagnose problems
- *   in the main metrics, such as "mounted nodes in mounttable".
- * - After that, we show metrics for the GCE instance itself, such as CPU usage,
- *   disk usage, etc. It also has links to let user ssh into the machine and see
- *   its log.
- * - For vanadium services, it will also show a table for services'
- *   metadata/buildinfo.
- */
-
-var hg = require('mercury');
-var h = require('mercury').h;
-var dateformat = require('dateformat');
-
-var Consts = require('../../constants');
-var fullGraphComponent = require('../full-graph');
-var metricsGroupComponent = require('../metrics-group');
-var dataTableComponent = require('../data-table');
-var Util = require('../../util');
-
-module.exports = create;
-module.exports.render = render;
-
-/** Constructor. */
-function create(data) {
-  if (data === null) {
-    return null;
-  }
-
-  var instance = data.appState.instanceLevelInstance;
-  var isVanadiumServices = instance.startsWith('vanadium');
-
-  // Main metrics.
-  // For vanadium services, we show request latency as the main metrics.
-  // For nginx servers, we show its load.
-  var mainMetrics = isVanadiumServices ?
-      data.data.CloudServiceLatency : data.data.NginxLoad;
-  var mainMetricsTitle = isVanadiumServices ? 'REQUEST LATENCY' : 'SERVER LOAD';
-  var mainMetricKeys = isVanadiumServices ?
-      Consts.metricKeys.latency : Consts.metricKeys.nginxLoad;
-  var sortedMainMetrics = mainMetricKeys.map(function(metric) {
-    return mainMetrics[metric];
-  });
-
-  // Helper metrics.
-  // For now, we only have helper metrics for vanadium services, which are
-  // various stats from mounttable.
-  var helperMetrics = isVanadiumServices ? data.data.CloudServiceStats : null;
-  var helperMetricsTitle = isVanadiumServices ? 'STATS' : '';
-  var helperMetricKeys = isVanadiumServices ? Consts.metricKeys.stats : null;
-  var sortedHelperMetrics = [];
-  if (isVanadiumServices) {
-    sortedHelperMetrics = helperMetricKeys.map(function(metric) {
-      return helperMetrics[metric];
-    });
-  }
-
-  // GCE metrics.
-  var gceMetrics = isVanadiumServices ?
-      data.data.CloudServiceGCE : data.data.NginxGCE;
-  var gceMetricsTitle = 'GCE';
-  var gceMetricKeys = Consts.metricKeys.gce;
-  var sortedGCEMetrics = gceMetricKeys.map(function(metric) {
-    return gceMetrics[metric];
-  });
-  var instanceId = data.data.GCEInfo.Id;
-
-  // Data table for showing vanadium services' metadata/buildinfo.
-  var dataTableData = data.data.CloudServiceBuildInfo;
-  var rows = [];
-  if (!Util.isEmptyObj(dataTableData)) {
-    rows.push(['SERVICE', 'PRISTINE', 'SNAPSHOT', 'TIME', 'USER', 'LINKS']);
-    Object.keys(dataTableData).sort().forEach(function(serviceName) {
-      var rowData = dataTableData[serviceName];
-      var curRow = [
-        Consts.getDisplayName(serviceName),
-        rowData.IsPristine, rowData.Snapshot,
-        dateformat(new Date(rowData.Time * 1000), 'yyyymmdd-HH:MM'),
-        rowData.User,
-        h('a', {
-          href: genLogsLink(instanceId, 'v-' + rowData.ServiceName + '.info'),
-          target: '_blank'
-        }, 'log')];
-      rows.push(curRow);
-    });
-  }
-
-  // These two observables keep track of which non-main metric the mouse cursor
-  // is currently hovering over, as well as its relative X position.
-  //
-  // When a non-main metric is hovered over, we will overlay its data points in
-  // the main metrics graph for easier comparison. We also render a "mouse line"
-  // across all graphs.
-  var hoveredMetric = hg.struct({});
-  var mouseOffsetFactor = hg.value(-1);
-
-  var state = hg.state({
-    data: data.data,
-    appState: hg.struct(data.appState),
-
-    mainMetricsGraph: fullGraphComponent({
-      title: mainMetricsTitle,
-      collectionTimestamp: data.collectionTimestamp,
-      metrics: sortedMainMetrics,
-      mouseOffsetFactor: mouseOffsetFactor,
-      hoveredMetric: hoveredMetric
-    }),
-
-    helperMetricsGroup: isVanadiumServices ? metricsGroupComponent({
-      title: helperMetricsTitle,
-      metrics: sortedHelperMetrics,
-      mouseOffsetFactor: mouseOffsetFactor,
-      hoveredMetric: hoveredMetric
-    }) : null,
-
-    gceMetricsGroup: metricsGroupComponent({
-      title: gceMetricsTitle,
-      metrics: sortedGCEMetrics,
-      mouseOffsetFactor: mouseOffsetFactor,
-      hoveredMetric: hoveredMetric,
-      links: [
-        {
-          name: 'ssh',
-          link: genCloudSSHLink(data.appState.instanceLevelZone, instance)
-        },
-        {
-          name: 'log',
-          link: genLogsLink(instanceId, '')
-        }
-      ],
-    }),
-
-    dataTable: rows.length > 0 ? dataTableComponent({
-      title: 'BUILD INFO',
-      rows: rows
-    }) : null
-  });
-
-  return state;
-}
-
-/** The main render function. */
-function render(state) {
-  var items = [
-    fullGraphComponent.render(state.mainMetricsGraph)
-  ];
-  if (state.helperMetricsGroup) {
-    items.push(metricsGroupComponent.render(state.helperMetricsGroup));
-  }
-  items.push(metricsGroupComponent.render(state.gceMetricsGroup));
-  if (state.dataTable) {
-    items.push(dataTableComponent.render(state.dataTable));
-  }
-  return h('div.instance-view', items);
-}
-
-function genCloudSSHLink(zone, instance) {
-  return 'https://cloudssh.developers.google.com/projects/' +
-      'vanadium-production/zones/' + zone +
-      '/instances/' + instance + '?authuser=0&hl=en_US';
-}
-
-function genLogsLink(instanceId, logName) {
-  return 'https://pantheon.corp.google.com/project/vanadium-production/logs?' +
-      'service=compute.googleapis.com&key1=instance&key2=' + instanceId +
-      '&logName=' + logName +
-      '&minLogLevel=0&expandAll=false&timezone=America%2FLos_Angeles';
-}
diff --git a/oncall/client/browser/components/metric-actions-panel/index.js b/oncall/client/browser/components/metric-actions-panel/index.js
new file mode 100644
index 0000000..6ddec8e
--- /dev/null
+++ b/oncall/client/browser/components/metric-actions-panel/index.js
@@ -0,0 +1,90 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var hg = require('mercury');
+var h = require('mercury').h;
+
+var Util = require('../../util');
+
+module.exports = {
+  render: render
+};
+
+var DEFAULT_NAMESPACE_ID = '4b20e0dc-cacf-11e5-87ec-42010af0020b';
+
+/** The main render function. */
+function render(state, selectedMetric, data) {
+  var panel = h('div.metric-actions-content', [
+      h('div.row', [
+        h('div.item-label', 'Service Name'),
+        h('div.item-value', selectedMetric.serviceName)
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Service Version'),
+        h('div.item-value', selectedMetric.metricData.ServiceVersion)
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Metric Type'),
+        h('div.item-value',
+          selectedMetric.metricData.ResultType.replace('resultType', ''))
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Metric Name'),
+        h('div.item-value', selectedMetric.metricData.MetricName)
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Current Value'),
+        h('div.item-value',
+          Util.formatValue(selectedMetric.metricData.CurrentValue))
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Logs'),
+        h('div.item-value', h('a', {
+          href: 'logs?p=' + selectedMetric.metricData.Project +
+              '&z=' + selectedMetric.metricData.Zone +
+              '&d=' + selectedMetric.metricData.PodName +
+              '&c=' + selectedMetric.metricData.MainContainer,
+          target: '_blank'
+        }, selectedMetric.metricData.MainContainer)),
+      ]),
+      h('div.space'),
+      h('div.row', [
+        h('div.item-label', 'Pod Name'),
+        h('div.item-value', h('a', {
+          href: 'https://app.google.stackdriver.com/gke/pod/1009941:vanadium:' +
+              DEFAULT_NAMESPACE_ID + ':' + selectedMetric.metricData.PodUID,
+          target: '_blank'
+        }, selectedMetric.metricData.Instance)),
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Pod Node'),
+        h('div.item-value', h('a', {
+          href: 'https://app.google.stackdriver.com/instances/' +
+              data.Instances[selectedMetric.metricData.PodNode],
+          target: '_blank'
+        }, selectedMetric.metricData.PodNode)),
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Pod Config'),
+        h('div.item-value', h('a', {
+          href: 'cfg?p=' + selectedMetric.metricData.Project +
+              '&z=' + selectedMetric.metricData.Zone +
+              '&d=' + selectedMetric.metricData.PodName,
+          target: '_blank'
+        }, 'cfg')),
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Pod Status'),
+        h('div.item-value', selectedMetric.metricData.PodStatus)
+      ]),
+      h('div.row', [
+        h('div.item-label', 'Zone'),
+        h('div.item-value', selectedMetric.metricData.Zone)
+      ]),
+      h('div.btn-close', {
+        'ev-click': hg.send(state.channels.closeMetricActionsPanel)
+      }, 'Close')
+  ]);
+  return h('div.metric-actions-container', panel);
+}
diff --git a/oncall/client/browser/components/page-header/index.js b/oncall/client/browser/components/page-header/index.js
index f1178b8..342c4e7 100644
--- a/oncall/client/browser/components/page-header/index.js
+++ b/oncall/client/browser/components/page-header/index.js
@@ -17,7 +17,6 @@
 var h = require('mercury').h;
 var dateformat = require('dateformat');
 
-var AppStateMgr = require('../../appstate-manager');
 var staleDataThresholdInSec = 900;
 
 module.exports = create;
@@ -26,8 +25,9 @@
 /** Constructor. */
 function create(data) {
   var state = hg.state({
-    // The timestamp when the current data was loaded from the backend server.
-    collectionTimestamp: hg.value(data.collectionTimestamp),
+    // The time period of the current data.
+    startTimestamp: hg.value(data.startTimestamp),
+    endTimestamp: hg.value(data.endTimestamp),
 
     // IDs of current oncalls.
     oncallIds: hg.array(data.oncallIds),
@@ -36,35 +36,12 @@
     loadingData: hg.value(data.loadingData),
 
     // Whether there is any error loading data.
-    hasLoadingFailure: hg.value(data.hasLoadingFailure),
-
-    channels: {
-      clickNavItem: clickNavItem
-    }
+    hasLoadingFailure: hg.value(data.hasLoadingFailure)
   });
 
   return state;
 }
 
-/** Callback when a navigation item is clicked. */
-function clickNavItem(state, data) {
-  if (data.level ==='global') {
-    AppStateMgr.setAppState({
-      'level': data.level,
-      'zoneLevelZone': '',
-      'zoneLevelType': '',
-      'instanceLevelInstance': '',
-      'instanceLevelZone': ''
-    });
-  } else if (data.level === 'zone') {
-    AppStateMgr.setAppState({
-      'level': data.level,
-      'instanceLevelInstance': '',
-      'instanceLevelZone': ''
-    });
-  }
-}
-
 /** The main render function. */
 function render(state) {
   // Oncalls' pictures.
@@ -82,13 +59,13 @@
   var timeClass = '.time';
   var infoClass = '.info';
   var staleData = false;
-  if (state.collectionTimestamp >= 0) {
-    var date = new Date(state.collectionTimestamp * 1000);
+  if (state.endTimestamp >= 0) {
+    var date = new Date(state.endTimestamp * 1000);
     strTime = dateformat(date);
 
     // Check stale data.
     var curTs = Math.round(new Date().getTime() / 1000.0);
-    if (curTs - state.collectionTimestamp > staleDataThresholdInSec) {
+    if (curTs - state.endTimestamp > staleDataThresholdInSec) {
       infoClass += '.stale-data';
       staleData = true;
     }
@@ -107,49 +84,15 @@
     timeClass += '.failure';
   }
 
-  // Current view level and navigation items.
-  var navTitle = '';
-  var navItems = [];
-  var level = AppStateMgr.getAppState('level');
-  var zoneLevelZone = AppStateMgr.getAppState('zoneLevelZone');
-  if (level === 'global') {
-    navTitle = 'Global Status';
-  } else if (level === 'zone') {
-    var zoneType = AppStateMgr.getAppState('zoneLevelType')
-        .startsWith('CloudService') ? 'Vanadium Services' : 'Nginx';
-    navTitle = zoneType + ' @ ' + zoneLevelZone;
-    navItems.push(h('div.navitems-container', [
-      h('div.navitem', {
-        'ev-click': hg.send(state.channels.clickNavItem, {level: 'global'})
-      }, 'GLOBAL ←')
-    ]));
-  } else if (level === 'instance') {
-    var instanceType = AppStateMgr.getAppState('instanceLevelInstance')
-        .startsWith('vanadium') ? 'Vanadium Services' : 'Nginx';
-    navTitle =
-        instanceType + ' @ ' + AppStateMgr.getAppState('instanceLevelInstance');
-    navItems.push(h('div.navitems-container', [
-      h('div.navitem', {
-        'ev-click': hg.send(state.channels.clickNavItem, {level: 'global'})
-      }, 'GLOBAL ←'),
-      h('div.navitem', {
-        'ev-click': hg.send(state.channels.clickNavItem,
-            {level: 'zone', zone: zoneLevelZone})
-      }, zoneLevelZone.toUpperCase() + ' ←')
-    ]));
-  }
-
-  navItems.push(h('div.navtitle', h('span', navTitle.toUpperCase())));
   return h('div.header', [
       h('div' + infoClass, [
         h('div.dashboard-title', [
           h('div#logo', ''),
-          h('div.title-and-time', [
-            h('div.title', 'Oncall Dashboard'),
-            h('div' + timeClass, strTime)
-          ])
         ]),
-        h('div.navtitle-container', navItems),
+        h('div.title-and-time', [
+          h('div.title', 'Vanadium Oncall Dashboard'),
+          h('div' + timeClass, strTime)
+        ]),
         h('div.pics', pics)
       ])
   ]);
diff --git a/oncall/client/browser/components/status-table/index.js b/oncall/client/browser/components/status-table/index.js
new file mode 100644
index 0000000..43246f9
--- /dev/null
+++ b/oncall/client/browser/components/status-table/index.js
@@ -0,0 +1,291 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var hg = require('mercury');
+var h = require('mercury').h;
+var svg = require('virtual-dom/virtual-hyperscript/svg');
+
+var Consts = require('../../constants');
+var MouseMoveHandler = require('../../mousemove-handler.js');
+var Util = require('../../util');
+
+module.exports = create;
+module.exports.render = render;
+
+var tableRows = [
+  // Mounttable.
+  {
+    rowHeader: Consts.metricNames.MN_MOUNTTABLE,
+    columns: [
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_LATENCY,
+        label: 'LATENCY',
+        metricName: Consts.metricNames.MN_MOUNTTABLE,
+        threshold: 2000
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_QPS,
+        label: 'QPS',
+        metricName: Consts.metricNames.MN_MOUNTTABLE
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_METADATA,
+        label: 'BUILD AGE (h)',
+        metricName: Consts.metricNames.MN_MOUNTTABLE
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_COUNTERS,
+        label: 'MOUNTED SERVERS',
+        metricName: Consts.metricNames.MN_MT_MOUNTED_SERVERS
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_COUNTERS,
+        label: 'NODES',
+        metricName: Consts.metricNames.MN_MT_NODES
+      },
+    ]
+  },
+  // Roled.
+  {
+    rowHeader: Consts.metricNames.MN_ROLE,
+    columns: [
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_LATENCY,
+        label: 'LATENCY',
+        metricName: Consts.metricNames.MN_ROLE,
+        threshold: 2000
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_QPS,
+        label: 'QPS',
+        metricName: Consts.metricNames.MN_ROLE
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_METADATA,
+        label: 'BUILD AGE (h)',
+        metricName: Consts.metricNames.MN_ROLE
+      }
+    ]
+  },
+  // Proxy.
+  {
+    rowHeader: Consts.metricNames.MN_PROXY,
+    columns: [
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_LATENCY,
+        label: 'LATENCY',
+        metricName: Consts.metricNames.MN_PROXY,
+        threshold: 2000
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_QPS,
+        label: 'QPS',
+        metricName: Consts.metricNames.MN_PROXY
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_METADATA,
+        label: 'BUILD AGE (h)',
+        metricName: Consts.metricNames.MN_PROXY
+      }
+    ]
+  },
+  // Identityd.
+  {
+    rowHeader: Consts.metricNames.MN_IDENTITY,
+    columns: [
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_LATENCY,
+        label: 'LATENCY (MACAROON)',
+        metricName: Consts.metricNames.MN_MACAROON,
+        threshold: 2000
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_LATENCY,
+        label: 'LATENCY (BINARY DISCHARGER)',
+        metricName: Consts.metricNames.MN_BINARY_DISCHARGER,
+        threshold: 2000
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_LATENCY,
+        label: 'LATENCY (GOOGLE IDENTITY)',
+        metricName: Consts.metricNames.MN_GOOGLE_IDEN,
+        threshold: 2000
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_QPS,
+        label: 'QPS',
+        metricName: Consts.metricNames.MN_IDENTITY
+      },
+      {
+        dataKey: Consts.dataKeys.DK_SERVICE_METADATA,
+        label: 'BUILD AGE (h)',
+        metricName: Consts.metricNames.MN_IDENTITY
+      }
+    ]
+  }
+];
+
+/** Constructor. */
+function create(data) {
+  if (!data) {
+    return null;
+  }
+
+  return hg.state({
+    // Raw data.
+    data: hg.struct(data.data),
+
+    mouseOffsetFactor: hg.value(-1),
+    showMetricActionsPanel: hg.value(false),
+
+    channels: {
+      mouseMoveOnSparkline: mouseMoveOnSparkline,
+      mouseOutOfSparkline: mouseOutOfSparkline,
+    }
+  });
+}
+
+/** Callback for moving mouse on sparkline. */
+function mouseMoveOnSparkline(state, data) {
+  state.mouseOffsetFactor.set(data.f);
+}
+
+/** Callback for moving mouse out of sparkline. */
+function mouseOutOfSparkline(state) {
+  state.mouseOffsetFactor.set(-1);
+}
+
+/** The main render function. */
+function render(globalState, state) {
+  var data = state.data;
+
+  var rows = tableRows.map(function(rowData) {
+    var cols = rowData.columns.map(function(colData) {
+      // Create a column for a metric.
+      var colHeader = h('div.col-header', colData.label);
+      var metricsData = data[colData.dataKey][colData.metricName];
+      var sparkLines = metricsData.map(function(metricData) {
+        // 100 is the default logical width of any svg graphs.
+        var points = '0,100 100,100';
+        if (metricData && metricData.HistoryTimestamps) {
+          points = Util.genPolylinePoints(
+            metricData.HistoryTimestamps, metricData.HistoryValues,
+            data.MinTime, data.MaxTime,
+            metricData.MinValue, metricData.MaxValue);
+        }
+        var curValue = Util.formatValue(metricData.CurrentValue);
+        // Handle error when getting time series.
+        var hasErrors = metricData.ErrMsg !== '';
+        var extraColMetricClass = '';
+        if (hasErrors) {
+          curValue = '?';
+          extraColMetricClass = '.err';
+        }
+        // Handle current value over threshold.
+        var overThreshold = (
+            colData.threshold && metricData.CurrentValue >= colData.threshold);
+        var thresholdValue = -1;
+        if (overThreshold) {
+          extraColMetricClass = '.unhealthy';
+          thresholdValue = (colData.threshold-metricData.MinValue)/
+              (metricData.MaxValue-metricData.MinValue)*100.0;
+        }
+        // Handle stale data.
+        var tsLen = metricData.HistoryTimestamps.length;
+        if (tsLen > 0) {
+          var lastTimestamp = metricData.HistoryTimestamps[tsLen - 1];
+          if (data.MaxTime - lastTimestamp > 300) {
+            extraColMetricClass = '.stale';
+          }
+        } else {
+          extraColMetricClass = '.unhealthy';
+        }
+
+        // Mouse line.
+        var extraCurValueClass = '';
+        var mouseOffset = 100 * state.mouseOffsetFactor;
+        if (!hasErrors && mouseOffset >= 0) {
+          curValue = Util.formatValue(Util.interpolateValue(
+              metricData.CurrentValue, state.mouseOffsetFactor,
+              metricData.HistoryTimestamps, metricData.HistoryValues));
+          extraCurValueClass = '.history';
+        }
+
+        return h('div.col-metric' + extraColMetricClass, {
+          'title': hasErrors ?
+              metricData.ErrMsg : metricData.Instance + ', ' + metricData.Zone,
+          'ev-click': hg.send(globalState.channels.mouseClickOnMetric, {
+            metricData: metricData,
+            serviceName: rowData.rowHeader
+          })
+        }, [
+          h('div.highlight-overlay'),
+          renderMouseLine(mouseOffset),
+          h('div.sparkline', {
+            'ev-mousemove': new MouseMoveHandler(
+                state.channels.mouseMoveOnSparkline),
+            'ev-mouseout': hg.send(state.channels.mouseOutOfSparkline)
+          }, [
+            renderThreshold(thresholdValue),
+            renderSparkline(points)
+          ]),
+          h('div.cur-value' + extraCurValueClass, [curValue])
+        ]);
+      });
+      var items = [colHeader];
+      items = items.concat(sparkLines);
+      return h('div.col', items);
+    });
+    cols.unshift(h('div.row-header', Consts.getDisplayName(rowData.rowHeader)));
+    return h('div.row', cols);
+  });
+
+  return h('div.status-table', rows);
+}
+
+/**
+ * Renders sparkline for the given points.
+ * @param {string} points - A string in the form of "x1,y1 x2,y2 ...".
+ */
+function renderSparkline(points) {
+  return svg('svg', {
+    'class': 'content',
+    'viewBox': '0 0 100 100',
+    'preserveAspectRatio': 'none'
+  }, [
+    svg('polyline', {'points': points}),
+  ]);
+}
+
+/**
+ * Renders threshold line.
+ */
+function renderThreshold(value) {
+  return svg('svg', {
+    'class': 'threshold',
+    'viewBox': '0 0 100 100',
+    'preserveAspectRatio': 'none'
+  }, [
+    svg('path', {
+      'd': 'M 0 ' + value + ' L 100 ' + value,
+      'stroke-dasharray': '2,2'
+    }),
+  ]);
+}
+
+/**
+ * Renders mouse line at the given offset.
+ * @param {Number} mouseOffset - The logical offset for the mouse line.
+ */
+function renderMouseLine(mouseOffset) {
+  return svg('svg', {
+    'class': 'mouse-line',
+    'viewBox': '0 0 100 100',
+    'preserveAspectRatio': 'none'
+  }, [
+    svg('polyline', {
+      'points': mouseOffset + ',0 ' + mouseOffset + ',100'
+    })
+  ]);
+}
diff --git a/oncall/client/browser/components/summary-table/columns.js b/oncall/client/browser/components/summary-table/columns.js
deleted file mode 100644
index c58c3a1..0000000
--- a/oncall/client/browser/components/summary-table/columns.js
+++ /dev/null
@@ -1,230 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * Columns of the summary table.
- */
-
-var hg = require('mercury');
-var h = require('mercury').h;
-var svg = require('virtual-dom/virtual-hyperscript/svg');
-
-var AppStateMgr = require('../../appstate-manager');
-var Consts = require('../../constants');
-var MouseMoveHandler = require('../../mousemove-handler.js');
-var Util = require('../../util');
-var summaryTableMetricNamesColumnComponent = require('./metricnames-column');
-
-module.exports = {
-  render: render
-};
-
-/** The main render function. */
-function render(state) {
-  var data = state.data.Zones;
-  var level = AppStateMgr.getAppState('level');
-
-  var cols = [hg.partial(summaryTableMetricNamesColumnComponent.render, state)];
-  if (level === 'global') {
-    cols = cols.concat(genCellsInGlobalLevel(state, data));
-  } else if (level === 'zone') {
-    cols = cols.concat(genCellsInZoneLevel(state, data));
-  }
-  return h('div.columns-container', cols);
-}
-
-/** Generates data cells in the "globel" level. */
-function genCellsInGlobalLevel(state, data) {
-  var aggType = AppStateMgr.getAppState('globalLevelAggType');
-  var cols = Consts.orderedZones.filter(function(zone) {
-    return data[zone];
-  }).map(function(zone) {
-    var aggData = data[zone][aggType];
-    var rows = [];
-    Consts.mainMetrics.forEach(function(curMetric, index) {
-      var dataKey = curMetric.dataKey;
-      var metricKey = curMetric.metricKey;
-      if (!Util.isEmptyObj(aggData[dataKey])) {
-        rows.push(renderCell(
-            state, aggData, aggData.Range.MinTime, aggData.Range.MaxTime,
-            dataKey, metricKey, zone, zone));
-      } else {
-        rows.push(renderFillerCell(state));
-      }
-      if (curMetric.addMinorDivider) {
-        rows.push(h('div.minor-divider'));
-      }
-      if (curMetric.addMajorDivider) {
-        rows.push(h('div.major-divider'));
-      }
-    });
-    return h('div.zone-col', rows);
-  });
-  return cols;
-}
-
-/** Generates data cells in the "zone" level. */
-function genCellsInZoneLevel(state, data) {
-  var zoneLevelZone = AppStateMgr.getAppState('zoneLevelZone');
-  var zoneLevelType = AppStateMgr.getAppState('zoneLevelType');
-
-  // Filter metrics and instances by zone level type (CloudService or Nginx).
-  var metrics = (zoneLevelType === 'CloudService' ?
-      Consts.cloudServiceMetrics.concat(Consts.cloudServiceGCEMetrics) :
-      Consts.nginxMetrics.concat(Consts.nginxGCEMetrics));
-  var instancePrefix = (zoneLevelType === 'CloudService' ?
-      'vanadium-' : 'nginx-');
-  var instanceNames = Object.keys(data[zoneLevelZone].Instances);
-  var cols = instanceNames.sort().filter(function(name) {
-    return name.startsWith(instancePrefix);
-  }).map(function(instance) {
-    var instanceData = data[zoneLevelZone].Instances[instance];
-    var rows = [];
-    // Calculate the min/max timestamps across all metrics.
-    var minTime = Number.MAX_VALUE;
-    var maxTime = 0;
-    metrics.forEach(function(curMetric) {
-      var dataKey = curMetric.dataKey;
-      var metricKey = curMetric.metricKey;
-      if (!Util.isEmptyObj(instanceData[dataKey])) {
-        var metricData = instanceData[dataKey][metricKey];
-        if (metricData) {
-          if (metricData.MinTime < minTime) {
-            minTime = metricData.MinTime;
-          }
-          if (metricData.MaxTime > maxTime) {
-            maxTime = metricData.MaxTime;
-          }
-        }
-      }
-    });
-    metrics.forEach(function(curMetric, index) {
-      var dataKey = curMetric.dataKey;
-      var metricKey = curMetric.metricKey;
-      if (!Util.isEmptyObj(instanceData[dataKey])) {
-        rows.push(renderCell(
-            state, instanceData, minTime, maxTime,
-            dataKey, metricKey, instance, zoneLevelZone));
-      } else {
-        rows.push(renderFillerCell(state));
-      }
-      if (curMetric.addMinorDivider) {
-        rows.push(h('div.minor-divider'));
-      }
-      if (curMetric.addMajorDivider) {
-        rows.push(h('div.major-divider'));
-      }
-    });
-    return h('div.zone-col', rows);
-  });
-  return cols;
-}
-
-/**
- * Renders a single table cell.
- * @param {hg.state} state - The component's state.
- * @param {Object} cellData - The data object for the cell.
- * @param {Number} minTime - The minimum time to render the sparkline for.
- * @param {Number} maxTime - The maximum time to render the sparkline for.
- * @param {string} dataKey - See comments of createMetric function in
- *     constants.js.
- * @param {string} metricKey - See comments of createMetric function in
- *     constants.js.
- * @param {string} column - The column name of the cell.
- * @param {string} zone - The zone name associated with the cell.
- */
-function renderCell(state, cellData, minTime, maxTime,
-    dataKey, metricKey, column, zone) {
-  var data = cellData[dataKey][metricKey];
-  var health = 'unhealthy';
-  if (data) {
-    health = (data.Healthy ? 'healthy' : 'unhealthy');
-  }
-
-  // 100 is the default logical width of any svg graphs.
-  var points = '0,100 100,100';
-  var mouseOffset = 100 * state.mouseMoveCellData.offsetFactor;
-  var mouseEventData = {column: column, dataKey: dataKey, metricKey: metricKey};
-  if (data && data.HistoryTimestamps) {
-    points = Util.genPolylinePoints(
-      data.HistoryTimestamps, data.HistoryValues,
-      minTime, maxTime, data.MinValue, data.MaxValue);
-  }
-
-  // Show mouse line based on the dataKey type (CloudService or Nginx).
-  var mouseMoveOnCloudServices =
-      state.mouseMoveCellData.dataKey.startsWith('CloudService');
-  var mouseMoveOnNginx = state.mouseMoveCellData.dataKey.startsWith('Nginx');
-  var showMouseLine = (column === state.mouseMoveCellData.column &&
-      ((dataKey.startsWith('CloudService') && mouseMoveOnCloudServices) ||
-       (dataKey.startsWith('Nginx') && mouseMoveOnNginx)));
-
-  var curValue = data ? data.CurrentValue : 0;
-  var curValueClass = 'value';
-  if (data && showMouseLine) {
-    curValue = Util.interpolateValue(
-        data.CurrentValue, state.mouseMoveCellData.offsetFactor,
-        data.HistoryTimestamps, data.HistoryValues);
-    curValueClass += '.history';
-  }
-  var formattedCurValue = data ? Util.formatValue(curValue) : '?';
-  var items = [
-    h('div.highlight-overlay'),
-    h('div.mouse-line', showMouseLine ? renderMouseLine(mouseOffset) : []),
-    h('div.sparkline', {
-      'ev-mousemove': new MouseMoveHandler(
-          state.channels.mouseMoveOnSparkline, mouseEventData),
-      'ev-mouseout': hg.send(state.channels.mouseOutOfSparkline)
-    }, renderSparkline(points)),
-    h('div.' + curValueClass, formattedCurValue)
-  ];
-
-  var cellClassName = 'zone-col-cell.cell.' + health;
-  return h('div.' + cellClassName, {
-    'ev-mouseout': hg.send(state.channels.mouseOutOfTableCell),
-    'ev-mouseover': hg.send(state.channels.mouseOverTableCell, mouseEventData),
-    'ev-click': hg.send(state.channels.clickCell, {
-      column: column,
-      dataKey: dataKey,
-      zone: zone
-    })
-  }, items);
-}
-
-/** Renders a empty filler table cell. */
-function renderFillerCell(state) {
-  return h('div.zone-col-cell-filler.cell', {
-    'ev-mouseout': hg.send(state.channels.mouseOutOfTableCell)
-  });
-}
-
-/**
- * Renders sparkline for the given points.
- * @param {string} points - A string in the form of "x1,y1 x2,y2 ...".
- */
-function renderSparkline(points) {
-  return svg('svg', {
-    'class': 'content',
-    'viewBox': '0 0 100 100',
-    'preserveAspectRatio': 'none'
-  }, [
-    svg('polyline', {'points': points}),
-  ]);
-}
-
-/**
- * Renders mouse line at the given offset.
- * @param {Number} mouseOffset - The logical offset for the mouse line.
- */
-function renderMouseLine(mouseOffset) {
-  return svg('svg', {
-    'class': 'mouse-line',
-    'viewBox': '0 0 100 100',
-    'preserveAspectRatio': 'none'
-  }, [
-    svg('polyline', {
-      'points': mouseOffset + ',0 ' + mouseOffset + ',100'
-    })
-  ]);
-}
diff --git a/oncall/client/browser/components/summary-table/header.js b/oncall/client/browser/components/summary-table/header.js
deleted file mode 100644
index cc5230d..0000000
--- a/oncall/client/browser/components/summary-table/header.js
+++ /dev/null
@@ -1,161 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * The header row of the summary table.
- *
- * In the "global" view, it shows the aggregation switch and all the zones. In
- * the "zone" view, it shows all the instances for that zone.
- */
-
-var hg = require('mercury');
-var h = require('mercury').h;
-
-var Consts = require('../../constants');
-var AppStateMgr = require('../../appstate-manager');
-var Util = require('../../util');
-
-module.exports = {
-  render: render
-};
-
-/** The main render function. */
-function render(state) {
-  var data = state.data.Zones;
-  var level = AppStateMgr.getAppState('level');
-
-  // First column is the aggregation switch.
-  var cols = [renderGlobalLevelAggSwitch(state)];
-
-  // Generate the rest of the columns.
-  var headers = [];
-  if (level === 'global') {
-    // In the "global" level, add all the zones.
-    headers = Consts.orderedZones.filter(function(zone) {
-      return data[zone];
-    });
-  } else if (level === 'zone') {
-    // In the "zone" level, add instances based on the type.
-    var zoneLevelZone = AppStateMgr.getAppState('zoneLevelZone');
-    var zoneLevelType = AppStateMgr.getAppState('zoneLevelType');
-    var instancePrefix =
-        (zoneLevelType === 'CloudService' ? 'vanadium-' : 'nginx-');
-    // Filter instances by instancePrefix (determined by zoneLevelType).
-    headers = Object.keys(data[zoneLevelZone].Instances)
-        .sort().filter(function(name) {
-      return name.startsWith(instancePrefix);
-    });
-  }
-  cols = cols.concat(renderHeaders(state, headers));
-
-  return h('div.zone-names-row', cols);
-}
-
-/** Renders the aggregtion type switch. */
-function renderGlobalLevelAggSwitch(state) {
-  var aggType = AppStateMgr.getAppState('globalLevelAggType');
-  var level = AppStateMgr.getAppState('level');
-  if (level === 'global') {
-    // Only generate the switch (two links: average and max) in the "global"
-    // level to specify the aggregation method for all the cell data.
-    return h('div.view-type.zone-name-cell', [
-      h('div.average', {
-        className: aggType  === 'Average' ? 'selected' : '',
-        'ev-click': hg.send(state.channels.changeGlobalLevelAggType, 'Average')
-      }, 'average'),
-      h('div.max', {
-        className: aggType === 'Max' ? 'selected' : '',
-        'ev-click': hg.send(state.channels.changeGlobalLevelAggType, 'Max')
-      }, 'max')
-    ]);
-  } else {
-    // In the "zone" level, don't show the switch.
-    return h('div.view-type-dummy');
-  }
-}
-
-/**
- * Renders the given headers.
- * @param {hg.state} state
- * @param {Array<string>} headers
- */
-function renderHeaders(state, headers) {
-  var hoveredColumn = state.hoveredCellData.column;
-  return headers.map(function(header) {
-    var className = 'zone-name-cell';
-    if (header === hoveredColumn) {
-      className += '.highlight';
-    }
-    if (!checkMetricsHealthForHeader(state, header)) {
-      className += '.unhealthy';
-    }
-    return h('div.' + className, h('span', shortenHeaderLabel(header)));
-  });
-}
-
-/**
- * Checks whether all the metrics for the given header are healthy.
- * @param {hg.state} state
- * @param {string} header
- * @return {boolean}
- */
-function checkMetricsHealthForHeader(state, header) {
-  var data = state.data.Zones;
-  var aggType = AppStateMgr.getAppState('globalLevelAggType');
-  var level = AppStateMgr.getAppState('level');
-  var isHealthy = true;
-
-  // In different levels, we check different health data for a given header.
-  // The health data is already calculated and recorded in the data object
-  // loaded from the backend server.
-  var i, curMetric;
-  if (level === 'global') {
-    var zone = header;
-    var aggData = data[zone][aggType];
-    for (i = 0; i < Consts.mainMetrics.length; i++) {
-      curMetric = Consts.mainMetrics[i];
-      if (!Util.isEmptyObj(aggData[curMetric.dataKey])) {
-        var metricAggData = aggData[curMetric.dataKey][curMetric.metricKey];
-        if (!metricAggData || !metricAggData.Healthy) {
-          isHealthy = false;
-          break;
-        }
-      }
-    }
-  } else if (level === 'zone') {
-    var instance = header;
-    var zoneLevelZone = AppStateMgr.getAppState('zoneLevelZone');
-    var zoneLevelType = AppStateMgr.getAppState('zoneLevelType');
-    var metrics = (zoneLevelType === 'CloudService' ?
-        Consts.cloudServiceMetrics : Consts.nginxMetrics);
-    var instanceData = data[zoneLevelZone].Instances[instance];
-    for (i = 0; i < metrics.length; i++) {
-      curMetric = metrics[i];
-      if (!Util.isEmptyObj(instanceData[curMetric.dataKey])) {
-        var metricData = instanceData[curMetric.dataKey][curMetric.metricKey];
-        if (!metricData || !metricData.Healthy) {
-          isHealthy = false;
-          break;
-        }
-      }
-    }
-  }
-
-  return isHealthy;
-}
-
-/**
- * Shortens the header label by removing the common prefix.
- * @param {string} header
- * @return {string} The shortened header label.
- */
-function shortenHeaderLabel(header) {
-  if (header.startsWith('vanadium')) {
-    return header.replace('vanadium-', '');
-  }
-  if (header.startsWith('nginx')) {
-    return header.replace('nginx-', '');
-  }
-  return header;
-}
diff --git a/oncall/client/browser/components/summary-table/index.js b/oncall/client/browser/components/summary-table/index.js
deleted file mode 100644
index f2c8117..0000000
--- a/oncall/client/browser/components/summary-table/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * The summary table showing the data in "global" and "zone" level.
- *
- * In the "global" level, the table's columnes are zones with available data,
- * and its rows are metrics for vanadium services and nginx servers. Each table
- * cell (for zone Z and metric M) shows data aggregated across all the instances
- * in that zone for that metric.The aggregation method is either "average" or
- * "max", and can be selected at the top left corner of the summary table.
- *
- * Users can "drill down" to the "zone" level by clicking on any table cell.
- *
- * In the "zone" level, the table's columns are instances in that zone, and its
- * rows are metrics for EITHER vanadium services or nginx servers (depending on
- * which cell users click in the "global" level). In this level, users can drill
- * further down to the "instance" level by clicking on any table cell. The
- * instance view will be rendered by the "instance-view" component.
- */
-
-var hg = require('mercury');
-var h = require('mercury').h;
-
-var AppStateMgr = require('../../appstate-manager');
-var summaryTableHeaderComponent = require('./header');
-var summaryTableColumnsComponent = require('./columns');
-
-module.exports = create;
-module.exports.render = render;
-
-/** Constructor. */
-function create(data) {
-  if (!data) {
-    return null;
-  }
-
-  return hg.state({
-    // Raw data.
-    data: hg.struct(data.data),
-
-    // Keeps track of which cell the mouse cursor is hovering over.
-    //
-    // This will be used to highlight the hovered table cell as well as the
-    // corresponding column/row header cell.
-    hoveredCellData: hg.struct({
-      // Column name.
-      column: '',
-      // See "createMetric" function in constants.js.
-      dataKey: '',
-      // See "createMetric" function in constants.js.
-      metricKey: ''
-    }),
-
-    // Keeps track of the cell and relative location of the mouse cursor.
-    //
-    // This will be used to render a mouse line in all related table cells for
-    // easier data comparison.
-    mouseMoveCellData: hg.struct({
-      // Column name.
-      column: '',
-      // See "createMetric" function in constants.js.
-      dataKey: '',
-      // See "createMetric" function in constants.js.
-      offsetFactor: -1
-    }),
-
-    channels: {
-      changeGlobalLevelAggType: changeGlobalLevelAggType,
-      clickCell: clickCell,
-      mouseMoveOnSparkline: mouseMoveOnSparkline,
-      mouseOutOfSparkline: mouseOutOfSparkline,
-      mouseOverTableCell: mouseOverTableCell,
-      mouseOutOfTableCell: mouseOutOfTableCell
-    }
-  });
-}
-
-/**
- * Callback for changing the aggregation type in the "global" level.
- */
-function changeGlobalLevelAggType(state, newAggType) {
-  AppStateMgr.setAppState({'globalLevelAggType': newAggType});
-}
-
-/**
- * Callback for clicking a table cell.
- */
-function clickCell(state, data) {
-  var level = AppStateMgr.getAppState('level');
-  if (level === 'global') {
-    // Clicking a cell in the "global" level will go to the corresponding "zone"
-    // level.
-    var zoneLevelType =
-        data.dataKey.startsWith('CloudService') ? 'CloudService' : 'Nginx';
-    AppStateMgr.setAppState({
-      'level': 'zone',
-      'zoneLevelZone': data.column,
-      'zoneLevelType': zoneLevelType
-    });
-  } else if (level === 'zone') {
-    // Clicking a cell in the "zone" level will go to the corresponding
-    // "instance" level.
-    AppStateMgr.setAppState({
-      'level': 'instance',
-      'instanceLevelInstance': data.column,
-      'instanceLevelZone': data.zone,
-    });
-  }
-}
-
-/** Callback for moving mouse on sparkline. */
-function mouseMoveOnSparkline(state, data) {
-  state.mouseMoveCellData.set({
-    column: data.column,
-    dataKey: data.dataKey,
-    offsetFactor: data.f
-  });
-}
-
-/** Callback for moving mouse out of sparkline. */
-function mouseOutOfSparkline(state) {
-  state.mouseMoveCellData.set({
-    column: '',
-    dataKey: '',
-    offsetFactor: -1
-  });
-}
-
-/** Callback for moving mouse over a table cell. */
-function mouseOverTableCell(state, data) {
-  state.hoveredCellData.set({
-    column: data.column,
-    dataKey: data.dataKey,
-    metricKey: data.metricKey
-  });
-}
-
-/** Callback for moving mouse out of a table cell. */
-function mouseOutOfTableCell(state) {
-  state.hoveredCellData.set({
-    column: '',
-    dataKey: '',
-    metricKey: ''
-  });
-}
-
-/** The main render function. */
-function render(state) {
-  // Delegate rendering to sub-components.
-  return h('div.summary-table', [
-    hg.partial(summaryTableHeaderComponent.render, state),
-    hg.partial(summaryTableColumnsComponent.render, state)
-  ]);
-}
diff --git a/oncall/client/browser/components/summary-table/metricnames-column.js b/oncall/client/browser/components/summary-table/metricnames-column.js
deleted file mode 100644
index 0e0bf74..0000000
--- a/oncall/client/browser/components/summary-table/metricnames-column.js
+++ /dev/null
@@ -1,115 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**
- * Metric names column (the 1st column) of the summary table.
- */
-
-var h = require('mercury').h;
-
-var AppStateMgr = require('../../appstate-manager');
-var Consts = require('../../constants');
-var Util = require('../../util');
-
-module.exports = {
-  render: render
-};
-
-/** The main render function. */
-function render(state) {
-  var dataKey = state.hoveredCellData.dataKey;
-  var metricKey = state.hoveredCellData.metricKey;
-  var level = AppStateMgr.getAppState('level');
-
-  // In the "globel" level, we show all metrics.
-  // In the "zone" level, we only show either cloud services metrics or nginx
-  // metrics.
-  var metricNameRows = [];
-  var metrics = Consts.mainMetrics;
-  if (level === 'zone') {
-    var zoneLevelType = AppStateMgr.getAppState('zoneLevelType');
-    metrics = (zoneLevelType === 'CloudService' ?
-        Consts.cloudServiceMetrics.concat(Consts.cloudServiceGCEMetrics) :
-        Consts.nginxMetrics.concat(Consts.nginxGCEMetrics));
-  }
-
-  metrics.forEach(function(curMetric, index) {
-    var className = 'metric-name-cell.cell';
-    if (curMetric.dataKey === dataKey && curMetric.metricKey === metricKey) {
-      className += '.highlight';
-    }
-    if (!checkHealthForMetric(state, curMetric)) {
-      className += '.unhealthy';
-    }
-    // secontionLabel is the light grey label above each section of the table.
-    // For example: NGINX SERVER LOAD, NGINX GCE, etc.
-    if (curMetric.sectionLabel) {
-      var sectionLabelClassName = '.section-label';
-      if (curMetric.dataKey === dataKey) {
-        sectionLabelClassName += '.highlight-section';
-      }
-      metricNameRows.push(h('div.' + className, [
-        h('div' + sectionLabelClassName , h('span', curMetric.sectionLabel)),
-        h('div', h('span', curMetric.label))
-      ]));
-    } else {
-      metricNameRows.push(h('div.' + className, h('span', curMetric.label)));
-    }
-    if (curMetric.addMinorDivider) {
-      metricNameRows.push(h('div.minor-divider'));
-    }
-    if (curMetric.addMajorDivider) {
-      metricNameRows.push(h('div.major-divider'));
-    }
-  });
-  return h('div.metric-names-col', metricNameRows);
-}
-
-
-/**
- * Checks whether the given metric across all the zones/instances is healthy.
- * @param {hg.state} state
- * @param {Object} metric
- * @return {boolean}
- */
-function checkHealthForMetric(state, metric) {
-  var data = state.data.Zones;
-  var aggType = AppStateMgr.getAppState('globalLevelAggType');
-  var level = AppStateMgr.getAppState('level');
-  var isHealthy = true;
-
-  var i;
-  if (level === 'global') {
-    var availableZones = Consts.orderedZones.filter(function(zone) {
-      return data[zone];
-    });
-    for (i = 0; i < availableZones.length; i++) {
-      var zone = availableZones[i];
-      var aggData = data[zone][aggType];
-      if (!Util.isEmptyObj(aggData[metric.dataKey])) {
-        var metricAggData = aggData[metric.dataKey][metric.metricKey];
-        if (!metricAggData || !metricAggData.Healthy) {
-          isHealthy = false;
-          break;
-        }
-      }
-    }
-  } else if (level === 'zone') {
-    var zoneLevelZone = AppStateMgr.getAppState('zoneLevelZone');
-    var instances = Object.keys(data[zoneLevelZone].Instances).sort();
-    for (i = 0; i < instances.length; i++) {
-      var instance = instances[i];
-      var instanceData = data[zoneLevelZone].Instances[instance];
-      if (!Util.isEmptyObj(instanceData[metric.dataKey])) {
-        var metricData = instanceData[metric.dataKey][metric.metricKey];
-        if (!metricData || !metricData.Healthy) {
-          isHealthy = false;
-          break;
-        }
-      }
-    }
-  }
-
-  return isHealthy;
-}
diff --git a/oncall/client/browser/constants.js b/oncall/client/browser/constants.js
index db66902..6963893 100644
--- a/oncall/client/browser/constants.js
+++ b/oncall/client/browser/constants.js
@@ -16,6 +16,27 @@
   ASIA_EAST1_C: 'asia-east1-c',
 });
 
+/** Constants for all the metric names in the raw data. */
+var metricNames = Object.freeze({
+  MN_BINARY_DISCHARGER: 'binary discharger',
+  MN_GOOGLE_IDEN: 'google identity service',
+  MN_IDENTITY: 'identity service',
+  MN_MACAROON: 'macaroon service',
+  MN_MOUNTTABLE: 'mounttable',
+  MN_PROXY: 'proxy service',
+  MN_ROLE: 'role service',
+  MN_MT_MOUNTED_SERVERS: 'mounttable mounted servers',
+  MN_MT_NODES: 'mounttable nodes'
+});
+
+/** Constants for all the keys in raw data. */
+var dataKeys = Object.freeze({
+  DK_SERVICE_LATENCY: 'ServiceLatency',
+  DK_SERVICE_COUNTERS: 'ServiceCounters',
+  DK_SERVICE_QPS: 'ServiceQPS',
+  DK_SERVICE_METADATA: 'ServiceMetadata'
+});
+
 /** A map from long name strings to their shorter forms. */
 var displayNames = Object.freeze({
   'active-connections': 'ACTIVE CONN',
@@ -35,10 +56,11 @@
   'groups service latency': 'GROUPS',
   'healthCheckLatency': 'HEALTH LAT',
   'identityd': 'IDEN',
+  'identity service': 'IDENTITY',
   'macaroon service': 'MACAROON',
   'macaroon service latency': 'MACAROON',
   'memory-usage': 'RAM%',
-  'mounttable': 'MTB',
+  'mounttable': 'MOUNTTABLE',
   'mounttabled': 'MTB',
   'mounttable latency': 'MTB',
   'mounttable mounted servers': 'MTB SERVERS',
@@ -197,6 +219,8 @@
 
 module.exports = {
   zones: zones,
+  metricNames: metricNames,
+  dataKeys: dataKeys,
   orderedZones: [
     zones.US_CENTRAL1_C,
     zones.US_CENTRAL1_A,
diff --git a/oncall/client/browser/index.js b/oncall/client/browser/index.js
index 75ce280..8151bc9 100644
--- a/oncall/client/browser/index.js
+++ b/oncall/client/browser/index.js
@@ -7,11 +7,10 @@
 var request = require('superagent');
 var cookie = require('cookie');
 
-var AppStateMgr = require('./appstate-manager');
-var instanceViewComponent = require('./components/instance-view');
 var pageHeaderComponent = require('./components/page-header');
 var settingsPanelComponent = require('./components/settings');
-var summaryTableComponent = require('./components/summary-table');
+var statusTableComponent = require('./components/status-table');
+var metricActionsPanelComponent = require('./components/metric-actions-panel');
 
 /**
  * A variable to store the most update-to-date dashboard data.
@@ -20,9 +19,11 @@
  */
 var curData;
 
-// Initializes the app state manager and sets appStateChanged function as the
-// callback for app state changes.
-AppStateMgr.init(appStateChanged);
+/**
+ * A variable to keep track of current metric data shown in the
+ * metric actions panel.
+ */
+var selectedMetricData;
 
 // Ask mercury to listen to mousemove/mouseout/mouseover events.
 hg.Delegator().listenTo('mousemove');
@@ -36,35 +37,50 @@
 var state = hg.state({
   // The header panel at the top of the page.
   pageHeader: pageHeaderComponent({
-    collectionTimestamp: -1,
+    startTimestamp: -1,
+    endTimestamp: -1,
     oncallIds: ['_unknown', '_unknown'],
     loadingData: false,
     hasLoadingFailure: false
   }),
 
   components: hg.varhash({
-    // The summary table showing data on the "global" and "zone" level.
-    summaryTable: summaryTableComponent(null),
+    // The status table showing service status.
+    statusTable: statusTableComponent(null),
 
     // The view showing data on the "instance" level.
-    instanceView: instanceViewComponent(null),
+    // instanceView: instanceViewComponent(null),
   }),
 
   // Whether to show settings panel.
   showSettingsPanel: hg.value(false),
 
+  showMetricActionsPanel: hg.value(false),
+
   // Settings stored in cookies.
   settings: hg.varhash({
     darkTheme: hg.value(cookies.darkTheme === 'true')
   }),
 
   channels: {
+    mouseClickOnMetric: mouseClickOnMetric,
     changeTheme: changeTheme,
     clickOnSettingsGear: clickOnSettingsGear,
-    closeSettingsPanel: closeSettingsPanel
+    closeSettingsPanel: closeSettingsPanel,
+    closeMetricActionsPanel: closeMetricActionsPanel
   }
 });
 
+/** Callback for clicking on a metric. */
+function mouseClickOnMetric(state, data) {
+  selectedMetricData = data;
+  state.showMetricActionsPanel.set(true);
+}
+
+function closeMetricActionsPanel(state) {
+  state.showMetricActionsPanel.set(false);
+}
+
 /** Callback when user clicks on the settings gear. */
 function clickOnSettingsGear(state) {
   state.showSettingsPanel.set(true);
@@ -88,23 +104,26 @@
   var mainContent = [
     pageHeaderComponent.render(state.pageHeader),
   ];
-  if (state.components.summaryTable) {
+  if (state.components.statusTable) {
     mainContent.push(
-        h('div.main-container',
-          summaryTableComponent.render(state.components.summaryTable)));
+      h('div.main-container',
+          statusTableComponent.render(state, state.components.statusTable))
+    );
   }
-  if (state.components.instanceView) {
-    mainContent.push(
-        h('div.main-container',
-          instanceViewComponent.render(state.components.instanceView)));
-  }
-  mainContent.push(h('div.settings-gear', {
-    'ev-click': hg.send(state.channels.clickOnSettingsGear)
-  }));
+  mainContent.push(
+    h('div.settings-gear', {
+      'ev-click': hg.send(state.channels.clickOnSettingsGear)
+    })
+  );
   if (state.showSettingsPanel) {
     mainContent.push(hg.partial(settingsPanelComponent.render, state));
   }
 
+  if (state.showMetricActionsPanel) {
+    mainContent.push(hg.partial(metricActionsPanelComponent.render, state,
+          selectedMetricData, curData));
+  }
+
   var className = state.settings.darkTheme ? 'main.darkTheme' : 'main';
   return h('div.' + className, mainContent);
 };
@@ -121,7 +140,7 @@
       .accept('json')
       .timeout(30000)
       .end(function(err, res) {
-    if (!res.ok || err) {
+    if (!res || !res.ok || err) {
       state.pageHeader.hasLoadingFailure.set(true);
     } else {
       state.pageHeader.hasLoadingFailure.set(false);
@@ -137,58 +156,36 @@
 function processData(newData) {
   // Update components.
   curData = newData;
-  updateComponents(AppStateMgr.getCurState());
+  updateComponents();
 
   // Update the data loading indicator.
   state.pageHeader.loadingData.set(false);
 }
 
 /**
- * Callback function for app state changes.
- * @param {Object} curAppState - App's current state object.
- */
-function appStateChanged(curAppState) {
-  if (!state) {
-    return;
-  }
-  updateComponents(curAppState);
-}
-
-/**
  * Updates all page components.
- * @param {Object} curAppState - App's current state object.
  */
-function updateComponents(curAppState) {
+function updateComponents() {
   // Update page header.
-  state.pageHeader.collectionTimestamp.set(curData.CollectionTimestamp);
-  state.pageHeader.oncallIds.set(curData.OncallIDs.split(','));
+  state.pageHeader.endTimestamp.set(curData.MaxTime);
+  state.pageHeader.oncallIds.set(curData.Oncalls);
 
-  // Update summary table when the current view level is NOT "instance".
-  var summaryTableData = null;
-  if (curAppState.level !== 'instance') {
-    summaryTableData = summaryTableComponent({
-      data: curData
-    });
-  }
-  state.components.put('summaryTable', summaryTableData);
-
-  // Update instance view when the current view level is "instance".
-  var instanceViewData = null;
-  if (curAppState.level === 'instance') {
-    var instance = curAppState.instanceLevelInstance;
-    instanceViewData = instanceViewComponent({
-      collectionTimestamp: curData.CollectionTimestamp,
-      data: curData.Zones[curAppState.instanceLevelZone].Instances[instance],
-      appState: curAppState
-    });
-  }
-  state.components.put('instanceView' ,instanceViewData);
+  // Update status table.
+  var statusTableData = statusTableComponent({
+    data: curData
+  });
+  state.components.put('statusTable', statusTableData);
 }
 
 // Add an event handler for closing settings panel when esc key is pressed.
 document.onkeydown = function(evt) {
-  if (evt.keyCode === 27 && state.showSettingsPanel()) {
-    state.showSettingsPanel.set(false);
+  if (evt.keyCode === 27) {
+    if (state.showSettingsPanel()) {
+      state.showSettingsPanel.set(false);
+    }
+    if (state.showMetricActionsPanel()) {
+      state.showMetricActionsPanel.set(false);
+    }
   }
 };
 
diff --git a/oncall/client/stylesheets/components/data-table.css b/oncall/client/stylesheets/components/data-table.css
deleted file mode 100644
index 7495350..0000000
--- a/oncall/client/stylesheets/components/data-table.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/* Copyright 2015 The Vanadium Authors. All rights reserved. */
-/* Use of this source code is governed by a BSD-style */
-/* license that can be found in the LICENSE file. */
-
-div.data-table {
-  margin-top: var(--subsection-margin-top);
-}
-
-
-div.data-table div.data-table-title {
-  inherits: div.group-title;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-div.data-table tr {
-  line-height: 14px;
-}
-
-div.data-table tr:first-child {
-  line-height: 18px;
-}
-
-div.data-table td {
-  padding-right: 12px;
-}
-
-div.data-table table {
-  color: var(--dark-green-grey);
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.darkTheme div.data-table table {
-  color: var(--light-green-grey);
-}
-
-.darkTheme div.data-table a {
-  color: LightBlue;
-}
-
-div.data-table tr:first-child td {
-  font-weight: var(--font-weight-medium);
-}
-
-div.data-table div.data-table-content {
-  padding-top: 2px;
-  font-size: 12px;
-  display: flex;
-}
-
-div.data-table div.type-header {
-  font-weight: var(--font-weight-medium);
-  line-height: 20px;
-}
-
-div.data-table div.column {
-  margin-right: 20px;
-}
diff --git a/oncall/client/stylesheets/components/full-graph.css b/oncall/client/stylesheets/components/full-graph.css
deleted file mode 100644
index 23f2575..0000000
--- a/oncall/client/stylesheets/components/full-graph.css
+++ /dev/null
@@ -1,149 +0,0 @@
-/* Copyright 2015 The Vanadium Authors. All rights reserved. */
-/* Use of this source code is governed by a BSD-style */
-/* license that can be found in the LICENSE file. */
-
-div.full-graph-container {
-}
-
-div.full-graph-container div.full-graph-title {
-  inherits: div.group-title;
-}
-
-div.full-graph-container div.metric-summary-container {
-  display: flex;
-}
-
-div.full-graph-container div.metric-summary-item {
-  flex-grow: 1;
-  padding-top: 4px;
-  position: relative;
-  width: 100%;
-  cursor: pointer;
-  margin-right: 2px;
-}
-
-div.full-graph-container div.metric-summary-item.hidden {
-  opacity: 0.15;
-}
-
-div.full-graph-container div.metric-summary-item.unhealthy {
-  background: var(--red-stripes-background-dimmed);
-}
-
-div.full-graph-container div.metric-summary-item:last-child {
-  margin-right: 0px !important;
-}
-
-div.full-graph-container div.metric-summary-title {
-  font-size: 12px;
-  color: var(--dark-green-grey);
-  line-height: 14px;
-  padding-top: 4px;
-}
-
-.darkTheme div.full-graph-container div.metric-summary-title {
-  color: var(--light-green-grey);
-}
-
-div.full-graph-container div.metric-summary-value {
-  font-size: 16px;
-  color: var(--cyan-800);
-  font-weight: var(--font-weight-medium);
-  line-height: 20px;
-  margin-bottom: 4px;
-}
-
-.darkTheme div.full-graph-container div.metric-summary-value {
-  color: var(--light-green);
-}
-
-div.full-graph-container div.metric-summary-value.unhealthy {
-  color: var(--dark-red);
-}
-
-.darkTheme div.full-graph-container div.metric-summary-value.unhealthy {
-  color: var(--light-red);
-}
-
-div.full-graph-container div.metric-summary-color {
-  height: 2px;
-}
-
-div.full-graph-container div.full-graph {
-  width: 100%;
-  height: var(--full-graph-height);
-  position: relative;
-}
-
-div.full-graph-container div.full-graph div.graph-y-axis {
-  width: var(--graph-number-div-width);
-}
-
-div.full-graph-container div.full-graph svg {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
-}
-
-div.full-graph-container div.full-graph svg polyline {
-  vector-effect: non-scaling-stroke;
-  fill: none;
-}
-
-div.full-graph-container div.full-graph svg.content polyline {
-  stroke: var(--light-grey);
-  stroke-width: 2;
-}
-
-div.full-graph-container svg.threshold-line {
-  shape-rendering: crispedges;
-}
-
-div.full-graph-container svg.threshold-line path {
-  vector-effect: non-scaling-stroke;
-  fill: none;
-  stroke: var(--dark-red);
-  stroke-width: 1;
-}
-
-div.full-graph-container div.full-graph div.threshold {
-  border-bottom: 2px dotted var(--dark-red);
-}
-
-div.full-graph-container div.full-graph svg.overlay polyline {
-  stroke: #CCC;
-  stroke-width: 1;
-}
-
-.darkTheme div.full-graph-container div.full-graph svg.overlay polyline {
-  stroke: #666;
-}
-
-div.full-graph-container svg.overlay {
-  shape-rendering: crispedges;
-}
-
-div.full-graph-container div.full-graph div.number {
- /* background-color: var(--light-grey);*/
-  width: var(--graph-number-div-width);
-  height: var(--full-graph-height);
-}
-
-div.full-graph-container div.time {
-  height: var(--graph-time-div-height);
-  border-top: 1px solid var(--light-grey);
-  justify-content: space-between;
-  display: flex;
-}
-
-.darkTheme div.full-graph-container div.time {
-  border-top: 1px solid #333;
-}
-
-div.full-graph-container div.time-label {
-  font-size: 10px;
-  color: var(--medium-grey);
-  padding: 0px 2px;
-}
diff --git a/oncall/client/stylesheets/components/header.css b/oncall/client/stylesheets/components/header.css
index 470c123..f16e3f1 100644
--- a/oncall/client/stylesheets/components/header.css
+++ b/oncall/client/stylesheets/components/header.css
@@ -29,6 +29,7 @@
 }
 
 div.header div.dashboard-title {
+  width: 120px;
   padding-left: 10px;
   display: flex;
 }
@@ -54,21 +55,19 @@
 div.header div.title-and-time {
   display: flex;
   flex-direction: column;
-  padding-top: 1px;
+  align-items: center;
 }
 
 div.header div.title {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: var(--font-weight-medium);
-  line-height: 22px;
-  height: 22px;
+  padding-bottom: 4px;
 }
 
 div.header div.time {
   font-size: 10px;
   height: 12px;
   line-height: 12px;
-  padding-left: 1px;
 }
 
 div.header div.time.failure {
@@ -85,6 +84,8 @@
 div.header div.pics {
   display: flex;
   padding-right: 5px;
+  width: 120px;
+  justify-content: flex-end;
 }
 
 div.header div.pics img {
diff --git a/oncall/client/stylesheets/components/instance-view.css b/oncall/client/stylesheets/components/instance-view.css
deleted file mode 100644
index a65d674..0000000
--- a/oncall/client/stylesheets/components/instance-view.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Copyright 2015 The Vanadium Authors. All rights reserved. */
-/* Use of this source code is governed by a BSD-style */
-/* license that can be found in the LICENSE file. */
-
-div.instance-view {
-  margin-top: 12px;
-  width: 640px;
-}
diff --git a/oncall/client/stylesheets/components/metric-actions-panel.css b/oncall/client/stylesheets/components/metric-actions-panel.css
new file mode 100644
index 0000000..5507a61
--- /dev/null
+++ b/oncall/client/stylesheets/components/metric-actions-panel.css
@@ -0,0 +1,59 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+div.metric-actions-container {
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.metric-actions-container div.metric-actions-content {
+  background-color: white;
+  border: 1px black solid;
+  width: 440px;
+  padding: 12px;
+  padding-top: 16px;
+}
+
+div.metric-actions-container div.title {
+  font-weight: var(--font-weight-medium);
+  padding: 4px 0px 16px 0px;
+}
+
+div.metric-actions-container div.btn-close {
+  padding-top: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #999;
+}
+
+div.metric-actions-container div.btn-close:hover {
+  color: #444;
+}
+
+div.metric-actions-container div.row {
+  display: flex;
+  flex-direction: row;
+}
+
+div.metric-actions-container div.space {
+  height: 14px;
+  width: 100%;
+}
+
+div.metric-actions-container div.item-label {
+  font-weight: var(--font-weight-medium);
+  width: 140px;
+  padding-right: 10px;
+}
+
+div.metric-actions-container div.item-link {
+  margin-left: 10px;
+}
+
diff --git a/oncall/client/stylesheets/components/metrics-group.css b/oncall/client/stylesheets/components/metrics-group.css
deleted file mode 100644
index 0b12cfd..0000000
--- a/oncall/client/stylesheets/components/metrics-group.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* Copyright 2015 The Vanadium Authors. All rights reserved. */
-/* Use of this source code is governed by a BSD-style */
-/* license that can be found in the LICENSE file. */
-
-div.metrics-group {
-  margin-top: var(--subsection-margin-top);
-}
-
-div.metrics-group div.link-container {
-  display: flex;
-}
-
-div.metrics-group a {
-  text-decoration: none;
-  height: 100%;
-  color: var(--dark-green-grey);
-  padding: 0px 4px;
-  cursor: pointer;
-  font-size: 12px;
-  width: 30px;
-  text-align: center;
-}
-
-.darkTheme div.metrics-group a {
-  color: var(--light-green-grey);
-}
-
-div.metrics-group a:hover {
-  background-color: #DDD;
-}
-
-.darkTheme div.metrics-group a:hover {
-  background-color: var(--dark-highlight);
-}
-
-div.metrics-group-title-container {
-  inherits: div.group-title;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-div.metrics-group-title {
-  width: 100%;
-}
-
-div.metrics-group-row {
-  display: flex;
-}
-
-div.metrics-group-row div:last-child {
-  border-right: none !important;
-}
diff --git a/oncall/client/stylesheets/components/status-table.css b/oncall/client/stylesheets/components/status-table.css
new file mode 100644
index 0000000..3926cf8
--- /dev/null
+++ b/oncall/client/stylesheets/components/status-table.css
@@ -0,0 +1,154 @@
+/* Copyright 2016 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+div.status-table {
+  color: var(--dark-green-grey);
+  padding-top: 20px;
+  margin-right: 120px;
+}
+
+.darkTheme div.status-table {
+  color: var(--light-green-grey);
+}
+
+div.status-table .row {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 30px;
+}
+
+div.status-table .row-header {
+  width: 120px;
+  text-align: right;
+  padding-top: 15px;
+  padding-right: 10px;
+}
+
+div.status-table .col {
+  margin-left: 8px;
+}
+
+div.status-table .col-header {
+  font-size: 12px;
+  height: 21px;
+}
+
+div.status-table .col-metric {
+  position: relative;
+  padding: 6px 4px 6px 4px;
+  display: flex;
+  width: var(--col-metric-width);
+  height: var(--col-metric-height);
+  background: var(--cyan-800);
+  flex-direction: row;
+  cursor: pointer;
+}
+
+div.status-table .col-metric.err {
+  background-color: #ffbb55 !important;
+}
+
+div.status-table .col-metric.unhealthy {
+  background-color: #AA0000 !important;
+}
+
+div.status-table .col-metric.stale {
+  background-color: #ffbb55 !important;
+}
+
+.darkTheme div.status-table .col-metric {
+  background: DarkGreen;
+}
+
+div.status-table .col-metric .cur-value {
+  position: absolute;
+  left: 166px;
+  top: 6px;
+  color: white;
+  font-size: 14px;
+  height: 38px;
+  line-height: 38px;
+}
+
+div.status-table .col-metric div.cur-value.history {
+  color: #B2DADD !important;
+}
+
+.darkTheme div.status-table .col-metric div.cur-value.history {
+  color: #AAA !important;
+}
+
+div.status-table .col-metric.err .cur-value {
+  color: red !important;
+}
+
+div.status-table .col-metric div.sparkline {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: 156px;
+  height: 40px;
+}
+
+div.status-table .col-metric svg {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 156px;
+  height: 40px;
+}
+
+div.status-table .col-metric svg.mouse-line {
+  position: absolute;
+  top: 0px;
+  left: 6px;
+  width: 156px;
+  height: 50px;
+}
+
+div.status-table .col-metric svg.content {
+}
+
+div.status-table .col-metric svg.content polyline {
+  vector-effect: non-scaling-stroke;
+  fill: none;
+  stroke: white;
+  stroke-width: 0.8;
+}
+
+div.status-table .col-metric svg.threshold path {
+  vector-effect: non-scaling-stroke;
+  fill: none;
+  stroke: white;
+  stroke-width: 0.8;
+}
+
+div.status-table .col-metric svg.mouse-line {
+  shape-rendering: crispedges;
+}
+
+div.status-table .col-metric svg.mouse-line polyline {
+  vector-effect: non-scaling-stroke;
+  fill: none;
+  stroke: #339CA5;
+  stroke-width: 1;
+}
+
+.darkTheme div.status-table .col-metric svg.mouse-line polyline {
+  stroke: #338333;
+}
+
+div.status-table .col-metric div.highlight-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  background-color: white;
+  opacity: 0;
+}
+
+div.status-table .col-metric:hover div.highlight-overlay {
+  opacity: 0.1;
+}
diff --git a/oncall/client/stylesheets/components/summary-table.css b/oncall/client/stylesheets/components/summary-table.css
deleted file mode 100644
index 8b9aa36..0000000
--- a/oncall/client/stylesheets/components/summary-table.css
+++ /dev/null
@@ -1,297 +0,0 @@
-/* Copyright 2015 The Vanadium Authors. All rights reserved. */
-/* Use of this source code is governed by a BSD-style */
-/* license that can be found in the LICENSE file. */
-
-div.summary-table {
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-  color: var(--dark-green-grey);
-  margin-top: 12px;
-  margin-bottom: 12px;
-  margin-right: var(--summary-table-metric-names-col-width);
-  width: 100%;
-}
-
-.darkTheme div.summary-table {
-  color: var(--light-green-grey);
-}
-
-div.summary-table .columns-container {
-  display: flex;
-  flex-grow: 1;
-  justify-content: center;
-}
-
-div.summary-table .subtable-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  transform: rotate(-90deg);
-  padding: 0px 6px;
-  width: 30px;
-  white-space: nowrap;
-}
-
-div.summary-table .cell {
-  flex-grow: 1;
-  min-height: 24px;
-  max-height: 50px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-div.summary-table .cell.healthy {
-  background: var(--cyan-800);
-}
-
-.darkTheme div.summary-table .cell.healthy {
-  background: DarkGreen;
-}
-
-div.summary-table .cell.unhealthy {
-  background: #AA0000;
-}
-
-div.summary-table .metric-names-col {
-  display: flex;
-  flex-direction: column;
-  font-weight: var(--font-weight-medium);
-  text-align: right;
-  width: var(--summary-table-metric-names-col-width);
-  font-size: 15px;
-}
-
-div.summary-table .metric-name-cell {
-  padding-right: 10px;
-  position: relative;
-}
-
-div.summary-table .section-label {
-  position: absolute;
-  top: -19px;
-  left: var(--summary-table-metric-names-col-width);
-  width: 100%;
-  font-size: 12px;
-  font-weight: var(--font-weight-regular) !important;
-  color: #999;
-  text-align: left;
-}
-
-.darkTheme div.summary-table .section-label {
-  color: #666;
-}
-
-div.summary-table .section-label.highlight-section {
-  color: var(--dark-green-grey);
-}
-
-.darkTheme div.summary-table .section-label.highlight-section {
-  color: #999;
-}
-
-div.summary-table .metric-name-cell.unhealthy {
-  background-color: white;
-  color: #AA0000;
-}
-
-.darkTheme div.summary-table .metric-name-cell.unhealthy {
-  background-color: var(--dark-background);
-}
-
-div.summary-table .highlight {
-  background-color: var(--light-grey) !important;
-}
-
-.darkTheme div.summary-table .highlight {
-  background-color: var(--dark-highlight) !important;
-}
-
-div.summary-table .minor-divider {
-  min-height: 30px;
-  max-height: 30px;
-  flex-grow: 0;
-}
-
-div.summary-table .major-divider {
-  min-height: 30px;
-  max-height: 30px;
-  flex-grow: 0;
-}
-
-div.summary-table .dummy-divider {
-  min-height: 1px;
-  max-height: 1px;
-  flex-grow: 0;
-}
-
-div.summary-table .zone-names-row {
-  display: flex;
-  min-height: var(--summary-table-zone-row-height);
-  margin-bottom: 20px;
-  justify-content: center;
-}
-
-div.summary-table .zone-names-col {
-}
-
-div.summary-table .view-type {
-  display: flex;
-  justify-content: flex-end;
-  text-transform: none !important;
-  color: #AAA;
-  width: var(--summary-table-metric-names-col-width) !important;
-  padding-right: 10px;
-  font-size: 12px !important;
-  flex-grow: 0 !important;
-}
-
-div.summary-table .view-type div {
-  margin-left: 8px;
-  cursor: pointer;
-}
-
-div.summary-table .view-type div.selected {
-  color: var(--cyan-800) !important;
-  cursor: default !important;
-}
-
-.darkTheme div.summary-table .view-type div.selected {
-  color: var(--light-green) !important;
-}
-
-div.summary-table .view-type div:hover {
-  color: var(--dark-green-grey);
-}
-
-div.summary-table .view-type-dummy {
-  height: var(--summary-table-zone-row-height);
-  width: var(--summary-table-metric-names-col-width) !important;
-}
-
-div.summary-table .zone-name-cell {
-  height: var(--summary-table-zone-row-height);
-  line-height: var(--summary-table-zone-row-height);
-  text-transform: uppercase;
-  font-weight: var(--font-weight-medium);
-  min-width: var(--zone-column-min-width);
-  max-width: var(--zone-column-max-width);
-  text-align: center;
-  flex-grow: 1;
-  font-size: 16px;
-}
-
-div.summary-table .zone-name-cell.unhealthy {
-  background-color: white;
-  color: #AA0000;
-}
-
-.darkTheme div.summary-table .zone-name-cell.unhealthy {
-  background-color: var(--dark-background);
-}
-
-div.summary-table .zone-col {
-  display: flex;
-  flex-direction: column;
-  min-width: var(--zone-column-min-width);
-  max-width: var(--zone-column-max-width);
-  flex-grow: 1;
-}
-
-div.summary-table div.zone-col-cell {
-  position: relative;
-  cursor: pointer;
-}
-
-div.summary-table div.zone-col-cell div.highlight-overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  background-color: white;
-  opacity: 0;
-}
-
-div.summary-table div.zone-col-cell:hover div.highlight-overlay {
-  opacity: 0.1;
-}
-
-div.summary-table div.zone-col-cell div.value {
-  position: absolute;
-  height: 100%;
-  top: 0px;
-  right: 6px;
-  font-size: 18px;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 48px;
-}
-
-div.summary-table div.zone-col-cell div.value.history {
-  color: #B2DADD !important;
-}
-
-.darkTheme div.summary-table div.zone-col-cell div.value.history {
-  color: #AAA !important;
-}
-
-div.summary-table div.zone-col-cell.unhealthy div.value.history {
-  color: #EECCCC !important;
-}
-
-div.summary-table div.zone-col-cell div.sparkline {
-  position: absolute;
-  top: 0px;
-  right: 60px;
-  left: 10px;
-  bottom: 0px;
-  display: flex;
-}
-
-div.summary-table div.zone-col-cell div.mouse-line {
-  position: absolute;
-  top: 0px;
-  right: 60px;
-  left: 10px;
-  bottom: 0px;
-  display: flex;
-}
-
-div.summary-table div.zone-col-cell svg.mouse-line {
-  shape-rendering: crispedges;
-}
-
-div.summary-table div.zone-col-cell svg.mouse-line polyline {
-  vector-effect: non-scaling-stroke;
-  fill: none;
-  stroke: #339CA5;
-  stroke-width: 1;
-}
-
-.darkTheme div.summary-table div.zone-col-cell svg.mouse-line polyline {
-  stroke: #338333;
-}
-
-div.summary-table div.zone-col-cell.unhealthy svg.mouse-line polyline {
-  stroke: #C44D4D !important;
-}
-
-div.summary-table div.zone-col-cell svg {
-  width: 100%;
-}
-
-div.summary-table div.zone-col-cell svg.content {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-div.summary-table div.zone-col-cell svg.content polyline {
-  vector-effect: non-scaling-stroke;
-  fill: none;
-  stroke: white;
-  stroke-width: 0.8;
-}
diff --git a/oncall/client/stylesheets/index.css b/oncall/client/stylesheets/index.css
index cbef6db..10beca3 100644
--- a/oncall/client/stylesheets/index.css
+++ b/oncall/client/stylesheets/index.css
@@ -6,12 +6,9 @@
 @import "./reset.css";
 @import "./typography.css";
 @import "./common.css";
-@import "./components/data-table.css";
 @import "./components/header.css";
-@import "./components/full-graph.css";
-@import "./components/instance-view.css";
 @import "./components/main.css";
-@import "./components/metrics-group.css";
+@import "./components/metric-actions-panel.css";
 @import "./components/metric-item.css";
+@import "./components/status-table.css";
 @import "./components/settings.css";
-@import "./components/summary-table.css";
diff --git a/oncall/client/stylesheets/variables.css b/oncall/client/stylesheets/variables.css
index e0ea8f8..1edc3cd 100644
--- a/oncall/client/stylesheets/variables.css
+++ b/oncall/client/stylesheets/variables.css
@@ -49,7 +49,6 @@
     rgba(255, 0, 0, 0.3) 20px
   );
   --white-transparent: rgba(255, 255, 255, 0.4);
-  --blueish-white: #EBECEC;
   --dark-background: #222;
   --dark-highlight: #333;
 
@@ -64,24 +63,18 @@
   --section-shadow: rgba(0, 0, 0, 0.30) 0px 0px 4px 0px;
 
   /* Heights */
+  --col-metric-height: 50px;
   --header-height: 60px;
   --zone-title-height: 40px;
   --full-graph-height: 240px;
   --graph-time-div-height: 20px;
-  --metric-item-height: 58px;
+  --metric-item-height: 50px;
   --metric-item-title-height: 16px;
   --metric-item-value-height: 16px;
-  --gce-instance-name-height: 30px;
   --sparkline-height: 24px;
-  --group-title-height: 20px;
-  --subsection-margin-top: 36px;
-  --summary-table-zone-row-height: 30px;
 
   /* Width */
+  --col-metric-width: 206px;
   --graph-number-div-width: 30px;
-  --metric-item-width: 20%;
-  --zone-header-width: 160px;
-  --summary-table-metric-names-col-width: 150px;
-  --zone-column-min-width: 130px;
-  --zone-column-max-width: 240px;
+  --metric-item-width: 200px;
 }