Improve trace entries display and related UI work

See #71
glowroot · Mar 2, 2016 · 570ac18 · 570ac18
1 parent 3f7bfc0
commit 570ac18
Show file tree

Hide file tree

Showing 22 changed files with 243 additions and 161 deletions.
diff --git a/agent-parent/ui-sandbox/src/test/java/org/glowroot/agent/ui/sandbox/ExpensiveCall.java b/agent-parent/ui-sandbox/src/test/java/org/glowroot/agent/ui/sandbox/ExpensiveCall.java
@@ -173,8 +173,8 @@ private String getTraceEntryMessage(boolean spaces) {
         for (int i = 0; i < traceEntryMessageLength; i++) {
             // random lowercase character
             sb.append((char) ('a' + random.nextInt(26)));
-            if (spaces && random.nextInt(6) == 0) {
-                // on average, one of six characters will be a space
+            if (spaces && random.nextInt(6) == 0 && i != 0 && i != traceEntryMessageLength - 1) {
+                // on average, one of six characters will be a space (but not first or last char)
                 sb.append(' ');
             }
         }

diff --git a/...parent/webdriver-tests/src/test/java/org/glowroot/agent/webdriver/tests/BasicSmokeIT.java b/...parent/webdriver-tests/src/test/java/org/glowroot/agent/webdriver/tests/BasicSmokeIT.java
@@ -115,7 +115,7 @@ public void shouldCheckTransactionPages() throws Exception {
         Utils.withWait(driver, By.partialLinkText("percentiles")).click();
         Utils.withWait(driver, By.partialLinkText("throughput")).click();
         Utils.withWait(driver, By.partialLinkText("Slow traces")).click();
-        Utils.withWait(driver, By.partialLinkText("External queries")).click();
+        Utils.withWait(driver, By.partialLinkText("Queries")).click();
         Utils.withWait(driver, By.partialLinkText("Continuous profiling")).click();
         Utils.withWait(driver, By.xpath("//input[@ng-model='filter']")).sendKeys("JdbcServlet");
         Utils.withWait(driver, By.xpath("//button[@ng-click='refreshButtonClick()']")).click();
@@ -129,7 +129,7 @@ public void shouldCheckTransactionPages() throws Exception {
         Utils.withWait(driver, By.partialLinkText("/jdbcservlet")).click();
         Utils.withWait(driver, By.partialLinkText("percentiles")).click();
         Utils.withWait(driver, By.partialLinkText("Slow traces")).click();
-        Utils.withWait(driver, By.partialLinkText("External queries")).click();
+        Utils.withWait(driver, By.partialLinkText("Queries")).click();
         Utils.withWait(driver, By.partialLinkText("Continuous profiling")).click();
         Utils.withWait(driver, By.linkText("View flame graph (experimental)")).click();
     }

diff --git a/ui/app/fonts/Cousine-regular.woff b/ui/app/fonts/Cousine-regular.woff
diff --git a/ui/app/fonts/Cousine-regular.woff2 b/ui/app/fonts/Cousine-regular.woff2
diff --git a/ui/app/fonts/opensans-bold-webfont.woff → ui/app/fonts/opensans-bold.woff b/ui/app/fonts/opensans-bold-webfont.woff → ui/app/fonts/opensans-bold.woff
diff --git a/ui/app/fonts/opensans-bold-webfont.woff2 → ui/app/fonts/opensans-bold.woff2 b/ui/app/fonts/opensans-bold-webfont.woff2 → ui/app/fonts/opensans-bold.woff2
diff --git a/ui/app/fonts/opensans-regular-webfont.woff → ui/app/fonts/opensans-regular.woff b/ui/app/fonts/opensans-regular-webfont.woff → ui/app/fonts/opensans-regular.woff
diff --git a/ui/app/fonts/opensans-regular-webfont.woff2 → ui/app/fonts/opensans-regular.woff2 b/ui/app/fonts/opensans-regular-webfont.woff2 → ui/app/fonts/opensans-regular.woff2
diff --git a/ui/app/fonts/opensans-semibold-webfont.woff → ui/app/fonts/opensans-semibold.woff b/ui/app/fonts/opensans-semibold-webfont.woff → ui/app/fonts/opensans-semibold.woff
diff --git a/ui/app/fonts/opensans-semibold-webfont.woff2 → ui/app/fonts/opensans-semibold.woff2 b/ui/app/fonts/opensans-semibold-webfont.woff2 → ui/app/fonts/opensans-semibold.woff2
diff --git a/ui/app/hbs/trace-entry.hbs b/ui/app/hbs/trace-entry.hbs
@@ -1,57 +1,51 @@
-<div class="clearfix">
-  <div class="gt-indent1 gt-left-numeric-column" style="width: {{offsetColumnWidth}}em; float: left;">
-    +{{nanosToMillis startOffsetNanos}}
-  </div>
-  {{! +1 at the beginning is for the indent1 of the offset column }}
-  <div style="margin-left: {{traceEntryIndent .}}em; float: left;">
-      <span class="gt-inline-block gt-left-numeric-column" style="width: {{durationColumnWidth}}em;">
-        {{nanosToMillis durationNanos}}{{#if active}}..{{/if}}
-      </span>
+<div id="gtTraceEntry{{index}}">
+  <div style="width: 102px; vertical-align: top; float: left;"
+       title="duration {{nanosToMillis durationNanos}} milliseconds, offset {{nanosToMillis startOffsetNanos}} milliseconds">
+    <div class="gt-trace-entry-bar-outer">
+      <div class="gt-trace-entry-bar"
+           style="margin-left: {{traceEntryBarLeft startOffsetNanos}}px; width: {{traceEntryBarWidth durationNanos}}px;">
+      </div>
+    </div>
   </div>
-  <div style="overflow: hidden; padding-left: 0.5em;">
+  <div style="overflow: hidden; padding-left: {{traceEntryIndentPx .}}px;">
+    {{#if childEntries}}
+      <div class="gt-width2 gt-trace-entry-toggle" data-index="{{index}}" style="float: left;">
+        <i title="Collapse" class="fa fa-minus-square-o" style="padding: 5px; margin-left: -5px;"></i>
+      </div>
+    {{/if}}
     {{#ifDisplayMessage .}}
       {{#ifLongMessage message}}
       {{! surrounding div is needed as common parent for toggling unexpanded/expanded content }}
-        <div>
-          <div class="gt-inline-block gt-unexpanded-content">
-            {{firstPart message}}
-            <span class="gt-link-color"><strong>...</strong></span>
-            {{lastPart message}}
+        <div class="gt-indent2">
+          <div class="gt-inline-block gt-unexpanded-content gt-monospace">
+            {{firstPart .}}&nbsp;<span class="gt-link-color"><strong
+              class="gt-opensans">...</strong></span>&nbsp;{{lastPart .}}
           </div>
           <!-- only convert newlines to <br>s for long messages -->
           <div class="gt-expanded-content gt-with-clip hide"
                style="position: relative; display: inline-block;">
             <i class="fa fa-clipboard gt-clip"></i>
 
-            <div class="gt-break-word gt-pre-wrap"><!--
+            <div class="gt-break-word gt-pre-wrap gt-monospace"><!--
                 lack of space here is significant because of gt-pre-wrap
              -->{{message}}<!--
            --></div>
           </div>
         </div>
       {{^}}
-      {{! surrounding div is needed as common parent for toggling unexpanded/expanded content }}
-        <div>
-          <div class="gt-inline-block gt-unexpanded-content">
+        <div class="gt-indent2">
+          <div class="gt-inline-block gt-content-padding gt-monospace">
             {{message}}
           </div>
-          <div class="gt-expanded-content gt-with-clip hide"
-               style="position: relative; display: inline-block;">
-            <i class="fa fa-clipboard gt-clip"></i>
-
-            <div class="gt-break-word gt-pre-wrap"><!--
-                lack of space here is significant because of gt-pre-wrap
-             -->{{message}}<!--
-           --></div>
-          </div>
         </div>
       {{/ifLongMessage}}
       {{#ifNonEmptyObject detail}}
         <div class="gt-content-detail">
-          <span class="gt-inline-block gt-unexpanded-content gt-link-color">detail</span>
-            <span class="gt-inline-block gt-expanded-content hide">
-              {{{entryDetailHtml detail}}}
-            </span>
+          <span class="gt-inline-block gt-unexpanded-content gt-link-color gt-opensans">detail</span>
+        <span class="gt-inline-block gt-expanded-content hide">
+          <span class="gt-inline-block gt-link-color gt-opensans">detail</span>
+          {{{entryDetailHtml detail}}}
+        </span>
         </div>
       {{/ifNonEmptyObject}}
     {{/ifDisplayMessage}}
@@ -67,10 +61,11 @@
         </div>
         {{#if error.exception}}
           <div class="{{{exceptionIndentClass message}}}">
-            <div class="gt-inline-block gt-unexpanded-content gt-link-color">exception</div>
+            <div class="gt-inline-block gt-unexpanded-content gt-link-color gt-opensans">exception</div>
             {{! using span so background will stretch beyond page border if needed }}
             <div class="gt-inline-block gt-expanded-content gt-nowrap gt-with-clip hide"
                  style="overflow-x: auto;">
+              <div class="gt-inline-block gt-link-color gt-opensans">exception</div>
               {{{exceptionHtml error.exception}}}
               <i class="fa fa-clipboard gt-clip"></i>
             </div>
@@ -79,11 +74,12 @@
       </div>
     {{/if}}
     {{#if locationStackTraceElements}}
-      <div class="gt-indent2">
-        <div class="gt-inline-block gt-unexpanded-content gt-link-color">location stack trace</div>
+      <div class="gt-indent6">
+        <div class="gt-inline-block gt-unexpanded-content gt-link-color gt-opensans">location stack trace</div>
         {{! using span so background will stretch beyond page border if needed }}
         <div class="gt-inline-block gt-expanded-content gt-nowrap gt-with-clip hide"
              style="overflow-x: auto;">
+          <div class="gt-inline-block gt-link-color gt-opensans">location stack trace</div>
           {{{locationStackTraceHtml locationStackTraceElements}}}
           <i class="fa fa-clipboard gt-clip"></i>
         </div>

diff --git a/ui/app/hbs/trace.hbs b/ui/app/hbs/trace.hbs
@@ -39,7 +39,10 @@
       <span class="gt-inline-block gt-unexpanded-content gt-link-color">exception</span>
       {{! using span so background will stretch beyond page border if needed }}
       <div class="gt-inline-block gt-expanded-content gt-nowrap gt-with-clip hide">
-        {{{exceptionHtml error.exception}}}
+        <div class="gt-link-color">exception</div>
+        <div class="gt-monospace">
+          {{{exceptionHtml error.exception}}}
+        </div>
         <i class="fa fa-clipboard gt-clip"></i>
       </div>
     </div>
@@ -118,7 +121,7 @@
         <tr class="align-top">
           <td style="text-align: left;">
             <div class="gt-indent2">
-              <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}em;">
+              <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}px;">
                 {{name}}{{#if extended}} (extended){{/if}}
               </div>
             </div>
@@ -186,7 +189,7 @@
         <tr class="align-top">
           <td style="text-align: left;">
             <div class="gt-indent2">
-              <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}em;">
+              <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}px;">
                 {{name}}{{#if extended}} (extended){{/if}}
               </div>
             </div>
@@ -254,7 +257,7 @@
         <tr class="align-top">
           <td style="text-align: left;">
             <div class="gt-indent2">
-              <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}em;">
+              <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}px;">
                 {{name}}{{#if extended}} (extended){{/if}}
               </div>
             </div>
@@ -337,13 +340,13 @@
       <div class="hide gt-trace-detail-spinner"></div>
     </div>
   </div>
-  <div style="margin: 10px 0;">
-    <div id="sps"></div>
+  <div style="margin: 10px 0 0 1em;">
+    <div id="sps" style="font-family: Cousine;"></div>
   </div>
 {{/ifExistenceYes}}
 {{#ifExistenceYes profileExistence}}
   {{#if mainThreadProfileSampleCount}}
-    <div>
+    <div style="margin-top: 10px;">
       <button class="gt-flat-btn gt-flat-btn-big-pad1aligned gt-main-thread-profile-toggle">
         <span class="gt-link-color">Profile ({{mainThreadProfileSampleCount}})</span>
       </button>
@@ -353,19 +356,19 @@
       </div>
     </div>
     <div style="margin: 10px 0;">
-      <div class="gt-nowrap hide" id="mainThreadProfileOuter">
+      <div class="gt-indent2 gt-nowrap hide" id="mainThreadProfileOuter">
         <div style="padding-bottom: 10px;">
           <input class="form-control gt-profile-text-filter"
                  style="display: inline-block; width: 25em;"
                  placeholder="filter the profile tree">
         </div>
 
-        <div class="gt-profile gt-indent1"></div>
+        <div class="gt-profile"></div>
       </div>
     </div>
   {{/if}}
   {{#if auxThreadProfileSampleCount}}
-    <div>
+    <div style="margin-top: 10px;">
       <button class="gt-flat-btn gt-flat-btn-big-pad1aligned gt-aux-thread-profile-toggle">
         <span class="gt-link-color">Auxiliary Thread Profile ({{auxThreadProfileSampleCount}})</span>
       </button>
@@ -375,14 +378,14 @@
       </div>
     </div>
     <div style="margin: 10px 0;">
-      <div class="gt-nowrap hide" id="auxThreadProfileOuter">
+      <div class="gt-indent2 gt-nowrap hide" id="auxThreadProfileOuter">
         <div style="padding-bottom: 10px;">
           <input class="form-control gt-profile-text-filter"
                  style="display: inline-block; width: 25em;"
                  placeholder="filter the profile tree">
         </div>
 
-        <div class="gt-profile gt-indent1"></div>
+        <div class="gt-profile"></div>
       </div>
     </div>
   {{/if}}

diff --git a/ui/app/index.html b/ui/app/index.html
@@ -39,20 +39,24 @@
   <script>
     if (document.fonts) {
       new FontFace('Open Sans',
-          'url(fonts/opensans-regular-webfont.woff2) format("woff2"),' +
-          ' url(fonts/opensans-regular-webfont.woff) format("woff")',
+          'url(fonts/opensans-regular.woff2) format("woff2"),' +
+          ' url(fonts/opensans-regular.woff) format("woff")',
           {weight: '400'}).load();
       new FontFace('Open Sans',
-          'url(fonts/opensans-semibold-webfont.woff2) format("woff2"),' +
-          ' url(fonts/opensans-semibold-webfont.woff) format("woff")',
+          'url(fonts/opensans-semibold.woff2) format("woff2"),' +
+          ' url(fonts/opensans-semibold.woff) format("woff")',
           {weight: '600'}).load();
       new FontFace('Open Sans',
-          'url(fonts/opensans-bold-webfont.woff2) format("woff2"),' +
-          ' url(fonts/opensans-bold-webfont.woff) format("woff")',
+          'url(fonts/opensans-bold.woff2) format("woff2"),' +
+          ' url(fonts/opensans-bold.woff) format("woff")',
           {weight: '700'}).load();
       new FontFace('FontAwesome',
           'url(fonts/fontawesome-webfont.woff2) format("woff2"),' +
           'url(fonts/fontawesome-webfont.woff) format("woff")').load();
+      new FontFace('Cousine',
+          'url(fonts/cousine-regular.woff2) format("woff2"),' +
+          ' url(fonts/cousine-regular.woff) format("woff")',
+          {weight: '400'}).load();
     }
   </script>
 </head>

diff --git a/ui/app/scripts/controllers/transaction/average.js b/ui/app/scripts/controllers/transaction/average.js
@@ -88,8 +88,11 @@ glowroot.controller('TransactionAverageCtrl', [
     function createTreeTimers(rootTimer) {
       var treeTimers = [];
 
+      // indent1 must be sync'd with $indent1 variable in common-trace.less
+      var indent1 = 8.41; // px
+
       function traverse(timer, nestingLevel) {
-        timer.nestingLevel = nestingLevel;
+        timer.nestingIndent = nestingLevel * indent1 * 2;
         treeTimers.push(timer);
         if (timer.childTimers) {
           timer.childTimers.sort(function (a, b) {