[metrics-web/master] Apply new design to bubbles page. - tor-commits

9 Jan 2017

commit fb496966a7f5500db4e97625670d318912ee2380
Author: Karsten Loesing karsten.loesing@gmx.net
Date:   Wed Dec 21 12:45:22 2016 +0100
Apply new design to bubbles page.
---
 .../metrics/web/graphs/BubblesServlet.java         | 35 ++++++++++--
 website/web/WEB-INF/bubbles.jsp                    | 64 +++++++++++++---------
 2 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/website/src/org/torproject/metrics/web/graphs/BubblesServlet.java b/website/src/org/torproject/metrics/web/graphs/BubblesServlet.java
index c990eac..685f30c 100644
--- a/website/src/org/torproject/metrics/web/graphs/BubblesServlet.java
+++ b/website/src/org/torproject/metrics/web/graphs/BubblesServlet.java
@@ -3,22 +3,49 @@
package org.torproject.metrics.web.graphs;
+import org.torproject.metrics.web.Category;
+import org.torproject.metrics.web.MetricServlet;
+
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
import javax.servlet.ServletException;
-import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
-public class BubblesServlet extends HttpServlet {
+public class BubblesServlet extends MetricServlet {
private static final long serialVersionUID = -6011833075497881033L;
@Override
+  public void init() throws ServletException {
+    super.init();
+  }
+
+  @Override
   public void doGet(HttpServletRequest request,
       HttpServletResponse response) throws IOException, ServletException {
-
-    /* Forward the request to the JSP that does all the hard work. */
+    String requestUri = request.getRequestURI();
+    if (requestUri == null || !requestUri.endsWith(".html")) {
+      response.sendError(HttpServletResponse.SC_BAD_REQUEST);
+      return;
+    }
+    String requestedId = requestUri.substring(
+        requestUri.contains("/") ? requestUri.lastIndexOf("/") + 1 : 0,
+        requestUri.length() - 5);
+    request.setAttribute("categories", this.categories);
+    request.setAttribute("id", requestedId);
+    if (this.categoriesById.containsKey(requestedId)) {
+      Category category = this.categoriesById.get(requestedId);
+      request.setAttribute("categoryHeader", category.getHeader());
+      request.setAttribute("categoryDescription", category.getDescription());
+      List<String[]> categoryTabs = new ArrayList<String[]>();
+      for (String metricId : category.getMetrics()) {
+        categoryTabs.add(new String[] { this.titles.get(metricId), metricId });
+      }
+      request.setAttribute("categoryTabs", categoryTabs);
+    }
     request.getRequestDispatcher("WEB-INF/bubbles.jsp").forward(request,
         response);
   }
diff --git a/website/web/WEB-INF/bubbles.jsp b/website/web/WEB-INF/bubbles.jsp
index 9edc575..70af5d0 100644
--- a/website/web/WEB-INF/bubbles.jsp
+++ b/website/web/WEB-INF/bubbles.jsp
@@ -1,21 +1,35 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-  <title>Tor Metrics &mdash; Network bubble graphs</title>
-  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-  <link href="css/stylesheet-ltr.css" type="text/css" rel="stylesheet">
-  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
-  <link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon">
-  <script src="js/d3.min.js"></script>
-  <script src="js/bubbles.js"></script>
-</head>
-<body>
-  <div class="center">
-    <div class="main-column">
-
-<h2><a href="/"><img src="images/metrics-wordmark-small.png" width="138" height="18" alt="Metrics wordmark"></a> &mdash; Network bubble graphs</h2>
-<br>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<jsp:include page="top.jsp">
+  <jsp:param name="pageTitle" value="${categoryHeader} &ndash; Tor Metrics"/>
+  <jsp:param name="navActive" value="${categoryHeader}"/>
+</jsp:include>
+
+    <div class="container">
+      <ul class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li class="active">${categoryHeader}</li>
+      </ul>
+    </div>
+
+    <div class="container">
+      <h1>${categoryHeader}</h1>
+      <p>${categoryDescription}</p>
+    </div>
+
+    <div class="container">
+
+      <!-- tabs -->
+      <ul class="nav nav-tabs">
+        <c:forEach var="tab" items="${categoryTabs}">
+        <li role="presentation"<c:if test="${id.equals(tab[1])}"> class="active"</c:if>><a href="${tab[1]}.html" data-tab="${tab[1]}">${tab[0]}</a></li>
+        </c:forEach>
+      </ul>
+
+      <!-- tab-content -->
+      <div class="tab-content">
+        <div class="tab-pane active" id="tab-${tab[1]}">
+
 <p>The following graph visualizes diversity of currently running
 <a href="about.html#relay">relays</a> in terms of their probability to be
 selected for <a href="about.html#circuit">circuits</a>.
@@ -48,14 +62,14 @@ information, country, or network family.</p>
         <a href="#country-exits-only" onclick="make_bubble_graph('country-exits-only');">Country</a> |
         <a href="#network-family-exits-only" onclick="make_bubble_graph('network-family-exits-only');">Network family (/16)</a>
       </p>
+      <script src="js/d3.min.js"></script>
+      <script src="js/bubbles.js"></script>
       <script>make_bubble_graph();</script>
-      <noscript>Sorry, you need to turn on JavaScript.</script>
+      <noscript>Sorry, you need to turn on JavaScript.</noscript>
-    </div>
-  </div>
-  <div class="bottom" id="bottom">
-    <%@ include file="footer.jsp"%>
-  </div>
-</body>
-</html>
+        </div>
+      </div><!-- tab-content -->
+    </div><!-- container -->
+
+<jsp:include page="bottom.jsp"/>

    