Update logview.html

Added more logview logic

src/web/snippet/logview.html

@@ -14,6 +14,15 @@
         .clickable:hover{
             opacity: 0.7;
         }
+
+        /* Panel menu */
+        .logfile_menu_btn{
+            height: 2.8em !important;
+            margin-top: 0.4em !important;
+            margin-right: 0 !important;
+        }
+
+        /* Log file list */
         .logfile{
             padding-left: 1em !important;
             position: relative;
@@ -113,6 +122,14 @@
             #logfileDropdown {
                 margin-left: 0.4em !important;
             }
+
+            .logfile_menu_btn{
+                margin-left:0.4em !important;
+            }
+
+            #logfileDropdown{
+                margin-left: 0.4em !important;
+            }
         }
     </style>
 </head>
@@ -138,28 +155,38 @@
     </div>
     <div class="ui container">
         <div class="ui divider"></div>
-            <div class="ui stackable secondary menu">
+        <div class="ui stackable secondary menu">
-                <!-- Filter Dropdown -->
+            <!-- Filter Dropdown -->
-                <div class="ui selection dropdown" id="filterDropdown" style="margin-top:0.4em;">
+            <div class="ui selection dropdown" id="filterDropdown" style="margin-top:0.4em;">
-                    <div class="text">Select Filter</div>
+                <div class="text">Select Filter</div>
-                    <i class="dropdown icon"></i>
+                <i class="dropdown icon"></i>
-                    <div class="menu">
+                <div class="menu">
-                        <div class="item" data-value="all"><i class="filter icon"></i> All</div>
+                    <div class="item" data-value="all"><i class="filter icon"></i> All</div>
-                        <div class="item" data-value="system"><i class="blue info circle icon"></i> System</div>
+                    <div class="item" data-value="system"><i class="blue info circle icon"></i> System</div>
-                        <div class="item" data-value="request"><i class="green exchange icon"></i> Request</div>
+                    <div class="item" data-value="request"><i class="green exchange icon"></i> Request</div>
-                        <div class="item" data-value="error"><i class="red exclamation triangle icon"></i> Error</div>
+                    <div class="item" data-value="error"><i class="red exclamation triangle icon"></i> Error</div>
-                    </div>
-                </div>
-
-                <!-- Log File Dropdown -->
-                <div class="ui selection dropdown" id="logfileDropdown" style="margin-top:0.4em;">
-                    <div class="text">Select Log File</div>
-                    <i class="dropdown icon"></i>
-                    <div class="menu" id="logfileDropdownMenu">
-                        <!-- Log files will be populated here -->
-                    </div>
                 </div>
             </div>
+
+            <!-- Log File Dropdown -->
+            <div class="ui selection dropdown" id="logfileDropdown" style="margin-top: 0.4em; height: 2.8em;">
+                <div class="text">Select Log File</div>
+                <i class="dropdown icon"></i>
+                <div class="menu" id="logfileDropdownMenu">
+                    <!-- Log files will be populated here -->
+                </div>
+            </div>
+            
+            <!-- Download Button -->
+            <button class="ui icon basic button logfile_menu_btn" id="downloadLogBtn" title="Download Current Log File">
+                <i class="black download icon"></i>
+            </button>
+
+            <!-- Open in New Tab Button -->
+            <button class="ui icon basic button logfile_menu_btn" onclick="openLogInNewTab();" title="Open in New Tab">
+                <i class="external alternate icon"></i>
+            </button>
+        </div>
     </div>
     <br><br>
     <!-- Dashboard View -->
@@ -169,7 +196,6 @@
         </h3>
         <div class="ui divider"></div>
         <p>Welcome to LogVPro! Use the left menu to select a log file </p>
-        
         <div id="analyzer">
 
         </div>
@@ -177,7 +203,18 @@
 
     <!-- Log Viewer -->
     <div id="logviewer" class="ui container subpanel" style="display:none;">
-    
+        <textarea id="logrender" spellcheck="false" readonly="true">
+Pick a log file from the menu to start debugging
+        </textarea>
+        <br><br>
+        <div class="ui divider"></div>
+        <div class="ui toggle checkbox">
+            <input type="checkbox" id="enableAutoScroll" onchange="handleAutoScrollTicker(event, this.checked);">
+            <label>Auto Refresh<br>
+            <small>Refresh the viewing log every 10 seconds</small></label>
+        </div>
+        <div class="ui divider"></div>
+        <small>Notes: Some log files might be huge. Make sure you have checked the log file size before opening</small>
     </div>
 
     <!-- Settings -->
@@ -187,54 +224,21 @@
         </h3>
     </div> 
 
-    <br><br>
-
-    <div class="ui container">
-        <div class="ui stackable grid">
-            <div class="four wide column loglist">
-                <h3 class="ui header" style="padding-top: 1em;">
-                    <div class="content">
-                        Log View
-                        <div class="sub header">Check System Log in Real Time</div>
-                    </div>
-                </h3>
-                <div class="ui divider"></div>
-                <div id="logList" class="ui accordion">
-                    
-                </div>
-                <div class="ui divider"></div>
-                <h5>Filters</h5>
-                <button style="margin-top: 0.4em;" filter="system" class="ui fluid basic small button filterbtn"><i class="ui blue info circle icon"></i> System</button>
-                <button style="margin-top: 0.4em;" filter="request" class="ui fluid basic small button filterbtn"><i class="green exchange icon"></i> Request</button>
-                <button style="margin-top: 0.4em;" filter="error" class="ui fluid basic small button filterbtn"><i class="red exclamation triangle icon"></i> Error</button>
-                <button style="margin-top: 0.4em;" filter="all" class="ui fluid basic active small button filterbtn">All</button>
-                <div class="ui divider"></div>
-                <div class="ui toggle checkbox">
-                    <input type="checkbox" id="enableAutoScroll" onchange="handleAutoScrollTicker(event, this.checked);">
-                    <label>Auto Refresh<br>
-                    <small>Refresh the viewing log every 10 seconds</small></label>
-                </div>
-                <div class="ui divider"></div>
-                <small>Notes: Some log files might be huge. Make sure you have checked the log file size before opening</small>
-            </div>
-            <div class="twelve wide column">
-                <textarea id="logrender" spellcheck="false" readonly="true">
-← Pick a log file from the left menu to start debugging
-                </textarea>
-                <a href="#" onclick="openLogInNewTab();">Open In New Tab</a>
-                <br><br>
-            </div>
-        </div>
-    </div>
     <br>
-
+    <div class="ui container">
-    
+        <div class="ui divider"></div>
+        <small>Zoraxy LogVPro - Advance log viewer for Zoraxy log files</small>
+        <br><br><br>
+    </div>
 </body>
 <script>
     //LogVPro Implemnetation
     var currentFilter = "all";
     var currentOpenedLogURL = "";
     var currentLogFile = "";
+    var autoscroll = false;
+
+    $(".checkbox").checkbox();
 
     /* Menu Subpanel Switch */
     $(".subpanel").hide();
@@ -272,7 +276,7 @@
     $('#logfileDropdown').dropdown({
         onChange: function(value, text, $choice) {
             if (value) {
-                openLog(null, $choice.data('category'), value);
+                openLog(null, $choice.data('category'), value, currentFilter || "all");
             }
         }
     });
@@ -282,40 +286,54 @@
     $('#filterDropdown').dropdown({
         onChange: function(value) {
             currentFilter = value;
+            if (!currentLogFile) {
+                return;
+            }
             $(".filterbtn.active").removeClass("active");
             $(`.filterbtn[filter="${value}"]`).addClass("active");
-            if (currentOpenedLogURL != "") {
+            openLog(null, null, currentLogFile, currentFilter);
-                $.get(currentOpenedLogURL, function(data){
-                    if (data.error !== undefined){
-                        alert(data.error);
-                        return;
-                    }
-                    renderLogWithCurrentFilter(data);
-                });
-            }
         }
     });
 
     // Set default filter to "error"
-    $('#filterDropdown').dropdown('set selected', 'error');
+    $('#filterDropdown').dropdown('set selected', 'all');
-    currentFilter = "error";
+    currentFilter = "all";
-</script>
-<script>
-    var autoscroll = false;
 
-    $(".checkbox").checkbox();
+    /* Log download button */
-
+    $("#downloadLogBtn").on("click", function() {
-    function openLogInNewTab(){
+        if (!currentLogFile) {
-        if (currentOpenedLogURL != ""){
+            alert("Please select a log file first.");
-            window.open(currentOpenedLogURL);
+            return;
         }
-    }
+        if (!currentOpenedLogURL) {
+            alert("No log file is currently opened.");
+            return;
+        }
+        $.get(currentOpenedLogURL, function(data) {
+            if (data.error !== undefined) {
+                alert(data.error);
+                return;
+            }
+            let blob = new Blob([data], {type: "text/plain"});
+            let url = URL.createObjectURL(blob);
+            let a = document.createElement("a");
+            a.href = url;
+            a.download = currentLogFile || "log.txt";
+            document.body.appendChild(a);
+            a.click();
+            setTimeout(function() {
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            }, 100);
+        });
+    });
 
-    function openLog(object, catergory, filename){
+
+    function openLog(object, catergory, filename, filter="all"){
         $(".logfile.active").removeClass('active');
         $(object).addClass("active");
         currentLogFile = filename;
-        currentOpenedLogURL = "/api/log/read?file=" + filename;
+        currentOpenedLogURL = "/api/log/read?file=" + filename + "&filter=" + filter;
         $.get(currentOpenedLogURL, function(data){
             if (data.error !== undefined){
                 alert(data.error);
@@ -324,6 +342,13 @@
             renderLogWithCurrentFilter(data);
         });
     }
+</script>
+<script>
+    function openLogInNewTab(){
+        if (currentOpenedLogURL != ""){
+            window.open(currentOpenedLogURL);
+        }
+    }
 
     function initLogList(){
         $("#logList").html("");
@@ -370,23 +395,7 @@
 
     //Filter the log and render it to text area based on current filter choice
     function renderLogWithCurrentFilter(data){
-        if (currentFilter == "all"){
+        $("#logrender").val(data);
-            $("#logrender").val(data);
-        }else{
-            let filterLines = data.split("\n");
-            let filteredLogFile = "";
-            for (var i = 0; i < filterLines.length; i++){
-                const thisLine = filterLines[i];
-                if (currentFilter == "system" && thisLine.indexOf("[system:") >= 0){
-                    filteredLogFile += thisLine + "\n";
-                }else if (currentFilter == "request" && thisLine.indexOf("[router:") >= 0){
-                    filteredLogFile += thisLine + "\n";
-                }else if (currentFilter == "error" && thisLine.indexOf(":error]") >= 0){
-                    filteredLogFile += thisLine + "\n";
-                }
-            }
-            $("#logrender").val(filteredLogFile);
-        }
         var textarea = document.getElementById('logrender');
         textarea.scrollTop = textarea.scrollHeight;
     }