POC another potential log page implementation while looking into #609

hawtio · Oct 3, 2013 · 3bdd09a · 3bdd09a
1 parent 27e5326
commit 3bdd09a
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 0 deletions.
diff --git a/hawtio-web/src/main/webapp/app/log/html/logs.html b/hawtio-web/src/main/webapp/app/log/html/logs.html
@@ -39,7 +39,48 @@
   </div>
 
   <div class="controller-section log-main" ng-show="logs.length > 0">
+
     <div class="gridStyle" hawtio-datatable="gridOptions"></div>
+
+    <!--
+    <ul class="log-table">
+      <li class="table-head">
+        <div>
+          <div></div>
+          <div>Timestamp</div>
+          <div>Level</div>
+          <div>Logger</div>
+          <div>Message</div>
+        </div>
+      </li>
+      <li class="table-row" ng-repeat="log in logs">
+        <div class="expandable closed" model="log">
+          <div class="title">
+            <i class="expandable-indicator"></i>
+          </div>
+          <div class="title">{{log.timestamp | logDateFilter}}</div>
+          <div class="title"><span class="text-{{logClass(log)}}"><i class="{{logIcon(log)}}"></i> {{log.level}}</span></div>
+          <div class="title" title="{{log.logger}}">{{log.logger}}</div>
+          <div class="title">{{log.message}}</div>
+          <div class="expandable-body well">
+
+            {{log.message}}
+
+            <dl ng-hide="!row.exception">
+              <dt>Stack Trace:</dt>
+              <dd>
+                <ul class="unstyled" ng-repeat="line in log.exception">
+                  <li class="stacktrace" ng-bind-html-unsafe="formatException(line)"></li>
+                </ul>
+              </dd>
+            </dl>
+
+          </div>
+        </div>
+      </li>
+    </ul>
+    -->
+
   </div>
   <div class="controller-section no-log" ng-show="logs.length == 0">
     Loading...

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2037,3 +2037,103 @@ a.dashboard-link:hover {
   text-align: center;
 
 }
+
+.log-table li {
+  position: relative;
+  list-style-type: none;
+  min-height: 32px;
+  max-width: 100%;
+  padding: 0;
+}
+
+.log-table .table-head div div {
+  font-weight: bold;
+  text-align: center !important;
+  direction: ltr !important;
+}
+
+.log-table .table-head div div:nth-child(4) {
+  font-weight: bold;
+  left: 225px;
+  width: 326px;
+  text-align: center !important;
+  direction: ltr !important;
+}
+
+
+.log-table li div div {
+  position: absolute;
+  display: inline-block;
+  white-space: nowrap;
+
+  text-overflow: ellipsis;
+  font-family: monospace;
+  font-size: 12px;
+  min-height: 28px;
+  overflow-x: hidden;
+  padding: 3px;
+  padding-top: 6px;
+  width: auto;
+}
+
+.log-table {
+  margin: 0;
+}
+
+.log-table li:nth-child(odd) div div {
+  background-color: white;
+}
+
+
+.log-table li:nth-child(even) div div {
+  background-color: #f3f3f3;
+}
+
+
+.log-table li div div:nth-child(1) {
+  border-right: 1px solid #d4d4d4;
+  left: 0;
+  width: 11px;
+  z-index: 5;
+}
+
+.log-table li div div:nth-child(2) {
+  border-right: 1px solid #d4d4d4;
+  left: 18px;
+  width: 143px;
+  z-index: 5;
+}
+
+.log-table li div div:nth-child(3) {
+  border-right: 1px solid #d4d4d4;
+  left: 168px;
+  width: 50px;
+  z-index: 5;
+}
+
+.log-table li div div:nth-child(4) {
+  padding-right: 5px;
+  border-right: 1px solid #d4d4d4;
+  text-align: right;
+  direction: rtl;
+  z-index: 3;
+  left: 0;
+  width: 551px;
+}
+
+.log-table li div div:nth-child(5) {
+  left: 558px;
+  right: 0;
+  padding-left: 5px;
+}
+
+.log-table li div div:nth-child(6) {
+  background: white;
+  position: static;
+  margin-top: 43px;
+  /*top: 20px; */
+  white-space: normal;
+  display: block;
+}
+
+