Skip to content

Commit

Permalink
Implemented better styling for span details section (#15)
Browse files Browse the repository at this point in the history 
* Fixed format issues

* Implemented better styling for span details section, removed mock file
  • Loading branch information
@wty27
wty27 authored Jun 29, 2020
1 parent 6d3236a commit 5c866b1
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 122 deletions.
76 changes: 51 additions & 25 deletions sdk_contrib/zpages/src/main/java/io/opentelemetry/sdk/contrib/zpages/TracezZPageHandler.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ int getValue() {

private static final String TRACEZ_URL = "/tracez";
// Background color used for zebra striping rows of summary table
private static final String ZEBRA_STRIPE_COLOR = "#f0f0f0";
private static final String ZEBRA_STRIPE_COLOR = "#e6e6e6";
// Color for sampled traceIds
private static final String SAMPLED_TRACE_ID_COLOR = "#C1272D";
private static final String SAMPLED_TRACE_ID_COLOR = "#c1272d";
// Color for not sampled traceIds
private static final String NOT_SAMPLED_TRACE_ID_COLOR = "black";
// Query string parameter name for span name
Expand Down Expand Up @@ -271,44 +271,58 @@ private static void emitSpanNameAndCount(

private static void emitSpanDetails(
PrintWriter out, Formatter formatter, Collection<SpanData> spans) {
out.write("<pre>\n");
formatter.format("%-23s %18s%n", "When", "Elapsed(s)");
out.write("-------------------------------------------\n");
out.write("<table style=\"border-spacing: 0; border: 1px solid #363636;\">");
out.write("<tr class=\"bg-color\">");
out.write(
"<td style=\"color: #fff;\"><pre class=\"no-margin wrap-text\"><b>When</b></pre></td>");
out.write(
"<td class=\"border-left-white\" style=\"color: #fff;\">"
+ "<pre class=\"no-margin wrap-text\"><b>Elapsed(s)</b></pre></td>");
out.write("<td class=\"border-left-white\"></td>");
out.write("</tr>");
boolean zebraStripe = false;
for (SpanData span : spans) {
emitSingleSpan(formatter, span);
zebraStripe = emitSingleSpan(out, formatter, span, zebraStripe);
}
out.write("</pre>\n");
out.write("</table>");
}

private static void emitSingleSpan(Formatter formatter, SpanData span) {
private static boolean emitSingleSpan(
PrintWriter out, Formatter formatter, SpanData span, boolean zebraStripe) {
Calendar calendar = Calendar.getInstance();
calendar.setTimeInMillis(TimeUnit.NANOSECONDS.toMillis(span.getStartEpochNanos()));
long microsField = TimeUnit.NANOSECONDS.toMicros(span.getStartEpochNanos());
String elapsedSecondsStr =
span.getHasEnded()
? String.format(
"%13.6f", (span.getEndEpochNanos() - span.getStartEpochNanos()) * 1.0e-9)
: String.format("%13s", " ");

? String.format("%.6f", (span.getEndEpochNanos() - span.getStartEpochNanos()) * 1.0e-9)
: String.format("%s", "");
formatter.format(
"<tr style=\"background-color: %s;\">", zebraStripe ? ZEBRA_STRIPE_COLOR : "#fff");
formatter.format(
"<b>%04d/%02d/%02d-%02d:%02d:%02d.%06d %s",
"<td class=\"align-right\"><pre class=\"no-margin wrap-text\"><b>"
+ "%04d/%02d/%02d-%02d:%02d:%02d.%06d</b></pre></td>",
calendar.get(Calendar.YEAR),
calendar.get(Calendar.MONTH) + 1,
calendar.get(Calendar.DAY_OF_MONTH),
calendar.get(Calendar.HOUR_OF_DAY),
calendar.get(Calendar.MINUTE),
calendar.get(Calendar.SECOND),
microsField,
microsField);
formatter.format(
"<td class=\"border-left-dark\"><pre class=\"no-margin wrap-text\"><b>%s</b></pre></td>",
elapsedSecondsStr);

formatter.format(
" TraceId: <b style=\"color:%s;\">%s</b> " + "SpanId: %s ParentSpanId: %s</b>%n",
"<td class=\"border-left-dark\"><pre class=\"no-margin wrap-text\"><b>"
+ "TraceId: <b style=\"color:%s;\">%s</b> "
+ " | SpanId: %s | ParentSpanId: %s</b></pre></td>",
span.getTraceFlags().isSampled() ? SAMPLED_TRACE_ID_COLOR : NOT_SAMPLED_TRACE_ID_COLOR,
span.getTraceId().toLowerBase16(),
span.getSpanId().toLowerBase16(),
(span.getParentSpanId() == null
? SpanId.getInvalid().toLowerBase16()
: span.getParentSpanId().toLowerBase16()));
out.write("</tr>");
zebraStripe = !zebraStripe;

int lastEntryDayOfYear = calendar.get(Calendar.DAY_OF_YEAR);

Expand All @@ -317,31 +331,41 @@ private static void emitSingleSpan(Formatter formatter, SpanData span) {
Collections.sort(timedEvents, new EventComparator());
for (Event event : timedEvents) {
calendar.setTimeInMillis(TimeUnit.NANOSECONDS.toMillis(event.getEpochNanos()));
emitSingleEvent(formatter, event, calendar, lastEntryDayOfYear, lastEpochNanos);
formatter.format(
"<tr style=\"background-color: %s;\">", zebraStripe ? ZEBRA_STRIPE_COLOR : "#fff");
emitSingleEvent(out, formatter, event, calendar, lastEntryDayOfYear, lastEpochNanos);
out.write("</tr>");
if (calendar.get(Calendar.DAY_OF_YEAR) != lastEntryDayOfYear) {
lastEntryDayOfYear = calendar.get(Calendar.DAY_OF_YEAR);
}
lastEpochNanos = event.getEpochNanos();
zebraStripe = !zebraStripe;
}
formatter.format(
"<tr style=\"background-color: %s;\"><td></td><td class=\"border-left-dark\">"
+ "</td><td class=\"border-left-dark\"><pre class=\"no-margin wrap-text\">",
zebraStripe ? ZEBRA_STRIPE_COLOR : "#fff");
Status status = span.getStatus();
if (status != null) {
formatter.format("%5s %s", "", htmlEscaper().escape(status.toString()));
formatter.format("%s | ", htmlEscaper().escape(status.toString()));
}
formatter.format(
"%5s %s", "", htmlEscaper().escape(renderAttributes(span.getResource().getAttributes())));
formatter.format("%s</pre></td>", htmlEscaper().escape(renderAttributes(span.getAttributes())));
zebraStripe = !zebraStripe;
return zebraStripe;
}

private static void emitSingleEvent(
PrintWriter out,
Formatter formatter,
Event event,
Calendar calendar,
int lastEntryDayOfYear,
long lastEpochNanos) {
if (calendar.get(Calendar.DAY_OF_YEAR) == lastEntryDayOfYear) {
formatter.format("%11s", "");
out.write("<td class=\"align-right\"><pre class=\"no-margin wrap-text\">");
} else {
formatter.format(
"%04d/%02d/%02d-",
"<td class=\"align-right\"><pre class=\"no-margin wrap-text\">%04d/%02d/%02d-",
calendar.get(Calendar.YEAR),
calendar.get(Calendar.MONTH) + 1,
calendar.get(Calendar.DAY_OF_MONTH));
Expand All @@ -359,12 +383,14 @@ private static void emitSingleEvent(
if (deltaMicros >= 1000000) {
deltaString = String.format("%.6f", (deltaMicros / 1000000.0));
} else {
deltaString = String.format(".%6d", deltaMicros);
deltaString = String.format("%1s.%6d", "", deltaMicros);
}

long microsField = TimeUnit.NANOSECONDS.toMicros(event.getEpochNanos());
formatter.format(
"%02d:%02d:%02d.%06d %13s ... %s",
"%02d:%02d:%02d.%06d</pre></td> "
+ "<td class=\"border-left-dark\"><pre class=\"no-margin wrap-text\">%s</pre></td>"
+ "<td class=\"border-left-dark\"><pre class=\"no-margin wrap-text\">%s</pre></td>",
calendar.get(Calendar.HOUR_OF_DAY),
calendar.get(Calendar.MINUTE),
calendar.get(Calendar.SECOND),
Expand Down Expand Up @@ -395,7 +421,7 @@ private static String renderEvent(Event event) {
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append(event.getName());
if (!event.getAttributes().isEmpty()) {
stringBuilder.append(" ");
stringBuilder.append(" | ");
stringBuilder.append(renderAttributes(event.getAttributes()));
}
return stringBuilder.toString();
Expand Down
97 changes: 0 additions & 97 deletions sdk_contrib/zpages/src/main/java/io/opentelemetry/sdk/contrib/zpages/TracezZPageMock.html
View file

This file was deleted.

3 changes: 3 additions & 0 deletions sdk_contrib/zpages/src/main/java/io/opentelemetry/sdk/contrib/zpages/ZPageStyle.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,8 @@ private ZPageStyle() {}
+ ".border-left-dark{border-left: 1px solid #363636;}"
+ "th.header-text{color: #fff; line-height: 3.0;}"
+ ".align-center{text-align: center;}"
+ ".align-right{text-align: right;}"
+ "pre.no-margin{margin: 0;}"
+ "pre.wrap-text{white-space:pre-wrap;}"
+ "td.bg-white{background-color: #fff;}";
}

0 comments on commit 5c866b1

Please sign in to comment.