[tor-commits] [metrics-web/master] Apply new design to bubbles page.
karsten at torproject.org
karsten at torproject.org
Mon Jan 9 17:03:42 UTC 2017
commit fb496966a7f5500db4e97625670d318912ee2380
Author: Karsten Loesing <karsten.loesing at 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 — 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> — 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} – 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"/>
More information about the tor-commits
mailing list