Improve visual design of log viewer in admin console

capedwarf · Mar 14, 2014 · e8daf9b · e8daf9b
1 parent 2926ab8
commit e8daf9b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 19 deletions.
diff --git a/admin/src/main/resources/org/jboss/capedwarf/admin/logs.vm b/admin/src/main/resources/org/jboss/capedwarf/admin/logs.vm
@@ -20,27 +20,29 @@
 
 <br/><br/>
 
-<table width="100%">
+<ul class="ae-logs">
     #foreach ($requestLog in $logViewer.requestLogs)
-        <tr>
-            <td colspan="3">
-                $timeFormatter.format($requestLog.endTimeUsec)
-                <strong>$esc.html($requestLog.resource)</strong>
-                $requestLog.status
-                ${requestLog.pendingTimeUsec}ms
-                $sizeFormatter.format($requestLog.responseSize)
-                $requestLog.userAgent
-            </td>
-        </tr>
-        #foreach ($appLogLine in $requestLog.appLogLines)
-            <tr>
-                <td><span class="ae-log-severity ae-log-severity-$appLogLine.logLevel.name().charAt(0)">$appLogLine.logLevel.name().charAt(0)</span></td>
-                <td>$timeFormatter.format($appLogLine.timeUsec)</td>
-                <td>$appLogLine.logMessage</td>
-            </tr>
-        #end
+        <li class="ae-log">
+            <span class="time">$timeFormatter.format($requestLog.endTimeUsec)</span>
+            <span class="file">$esc.html($requestLog.resource)</span>
+            <span class="snippet" title="Status">$requestLog.status</span>
+            <span class="snippet" title="Request time/Latency">${requestLog.pendingTimeUsec}ms</span>
+            <span class="snippet" title="Response size">$sizeFormatter.format($requestLog.responseSize)</span>
+            <span class="snippet" title="User Agent">$requestLog.userAgent</span>
+            #if($requestLog.appLogLines.size() > 0)
+                <ul class="ae-log-lines">
+                #foreach ($appLogLine in $requestLog.appLogLines)
+                    <li>
+                        <span class="ae-log-severity ae-log-severity-$appLogLine.logLevel.name().charAt(0)">$appLogLine.logLevel.name().charAt(0)</span>
+                        <span>$timeFormatter.format($appLogLine.timeUsec)</span>
+                        <span class="snippet">$appLogLine.logMessage</span>
+                    </li>
+                #end
+                </ul>
+            #end
+        </li>
     #end
-</table>
+</ul>
 
 
 

diff --git a/admin/src/main/resources/org/jboss/capedwarf/admin/res/main.css b/admin/src/main/resources/org/jboss/capedwarf/admin/res/main.css
@@ -151,6 +151,47 @@ h2 {
     padding-bottom: 10px;
 }
 
+ul.ae-logs {
+    list-style: none;
+}
+
+.ae-log:nth-child(odd) {
+    background-color: #eee;
+}
+
+.ae-log {
+    padding: 0.5em 0 0.5em 1em;
+}
+
+.ae-log span {
+    margin: 0 .3em;
+}
+
+.ae-log .file {
+    font-weight: bold;
+}
+
+.ae-log-line {
+    margin: 0 0 0 3em;
+}
+
+.ae-log-lines {
+    margin: 0.5em 0 0 0;
+    list-style: none;
+}
+
+.ae-log-lines li {
+    height: 1.6em;
+}
+
+.ae-log-lines span {
+    margin-right: 1em;
+}
+
+.ae-log-lines .snippet {
+    color: #666;
+}
+
 .ae-log-legend {
     margin: 1em 0;
 }