Showing newest logs first. Removed newest entry button

app/config/config_example.yml

@@ -9,7 +9,7 @@ logs:
         Custom Pattern:
             type: local
             path: /path/to/your/monolog-viewer/installation/test/SyonixLogViewer/res/test_no_context.log
-            pattern: /\[(?P<date>.*)\] (?P<logger>\w+).(?P<level>\w+): (?P<message>[^\[\{]+)/
+            pattern: /\[(?P<date>.*)\] (?P<logger>\w+).(?P<level>\w+): (?P<message>.*[^ ]+) (?P<context>[^ ]+) (?P<extra>[^ ]+)/
     Acme:
         Acme App:
             type: ftp

src/Syonix/LogViewer/LogFile.php

@@ -45,7 +45,7 @@ public function load()
         }
 
         $file = $this->filesystem->read($this->args['path']);
-        $lines = explode("\n", $file);
+        $lines = array_reverse(explode("\n", $file));
         $parser = new LineLogParser();
         if(isset($this->args['pattern'])) {
             $hasCustomPattern = true;

views/log.html.twig

@@ -38,7 +38,6 @@
                 {% endfor %}
             </div>
         </li>
-        <li id="jump-to-newest" class="pull-right hide-if-mobile"><a href="#" onclick="$('#content').animate({ scrollTop: $('#content').prop('scrollHeight') - $('#content').height() }, 500); return false;"><i class="fa fa-lg fa-arrow-circle-down"></i> Newest entry</a></li>
         <li id="filter-text" class="pull-right show-if-js">
             <div id="filter-text-wrap">
                 <i class="fa fa-lg fa-search"></i>
@@ -56,24 +55,38 @@
         <tr class="logline level-{{ logLevelStyle[level].class }}">
             <td class="level"><i class="fa fa-{{ logLevelStyle[level].icon }} fa-fw"></i></td>
             <td class="date">{{ line.date|date(app.config.dateFormat) }}</td>
-            <td class="message clearfix{% if line.context|length > 0 %} has-more" onclick="toggleMore({{ id + 1 }});{% endif %}">
+            <td class="message clearfix{% if (line.context|length > 0) or (line.extra|length > 0) %} has-more {% endif %}">
                 {{ line.message }}
                 {% if line.context|length > 0 %}
-                    <div class="context" id="context-{{ id + 1 }}">
+                    <div class="context" id="context-{{ id + 1 }}" onclick="toggleMore({{ id + 1 }});">
                         <table>
                             {% for title, content in line.context %}
                                 <tr><th>{{ title }}</th><td>{{ content|nl2br }}</td></tr>
                             {% endfor %}
                         </table>
                     </div>
                 {% endif %}
+                {% if line.extra|length > 0 %}
+                    <div class="extra" id="extra-{{ id + 1 }}" onclick="toggleMoreExtra({{ id + 1 }});">
+                        <table>
+                            {% for title, content in line.extra %}
+                                <tr><th>{{ title }}</th><td>{{ content|nl2br }}</td></tr>
+                            {% endfor %}
+                        </table>
+                    </div>
+                {% endif %}
             </td>
             {% if app.config.display_logger %}<td class="logger"><i class="fa fa-tag"></i> {{ line.logger }}</td>{% endif %}
             {% if line.context|length > 0 %}
                 <td class="more" id="more-{{ id + 1 }}" onclick="toggleMore({{ id + 1 }});"><i class="fa fa-plus-circle"></i></td>
             {% else %}
                 <td class="more"></td>
             {% endif %}
+            {% if line.extra|length > 0 %}
+                <td class="more" id="moreExtra-{{ id + 1 }}" onclick="toggleMoreExtra({{ id + 1 }});"><i class="fa fa-plus-circle"></i></td>
+            {% else %}
+                <td class="more"></td>
+            {% endif %}
         </tr>
     {% else %}
         <tr class="logline clearfix level-info">

web/css/screen.css

@@ -444,6 +444,8 @@ header#logs .filter-dropdown a.lower {
 .logline.level-emergency td.logger,
 .logline.level-emergency div.context table th,
 .logline.level-emergency div.context table td,
+.logline.level-emergency div.extra table th,
+.logline.level-emergency div.extra table td,
 .logline.level-emergency td.more {
     color: #ff9a9a;
 }
@@ -460,11 +462,10 @@ header#logs .filter-dropdown a.lower {
     display: block;
     font-family: "Source Code Pro", monospace;
     padding-top: 0;
+    word-break: break-all;
 }
 
-.logline td.message.has-more {
-    cursor: pointer;
-}
+
 
 .logline.level-critical .message,
 .logline.level-alert .message {
@@ -520,6 +521,28 @@ div.context table th {
     font-weight: bold;
 }
 
+div.extra {
+    font-family: 'FlexoWebfont', 'Arial', sans-serif;
+    display: none;
+    margin: 5px 0 5px;
+}
+
+div.extra table td,
+div.extra table th {
+    vertical-align: top;
+    color: #8c8c8c;
+    padding: 5px 0 0;
+}
+div.extra table td {
+    padding-left: 20px;
+    word-break: break-all;
+}
+
+div.extra table th {
+    vertical-align: top;
+    font-weight: bold;
+}
+
 div.error-message,
 div.placeholder-message {
     width: 100%;

web/js/log.js

@@ -10,6 +10,18 @@ function toggleMore(id) {
     }
 }
 
+function toggleMoreExtra(id) {
+    var extra = $('#extra-'+id);
+    var more = $('#moreExtra-'+id);
+    if(extra.is(':visible')) {
+        extra.slideUp(200);
+        more.html('<i class="fa fa-plus-circle"></i>');
+    } else {
+        extra.slideDown(200);
+        more.html('<i class="fa fa-minus-circle"></i>');
+    }
+}
+
 function filterContent(string) {
     var count = 0;
     var total = 0;
@@ -45,6 +57,7 @@ function filterContentReset() {
 
 $(document).ready(function() {
     $("div.context").hide();
+    $("div.extra").hide();
     $("#filter-form-toggle").click(function() {
         var arrow = $("#filter-form-arrow");
         var dropdown = $("#filter-form-dropdown");