WebUI: Add log viewer

The javascript implementation of multi-select menu is from the source
https://github.com/PhilippeMarcMeyer/vanillaSelectBox. It is licensed
under the MIT License. Some minor fixes is made to pass the lint.

Co-authored-by: brvphoenix <30111323+brvphoenix@users.noreply.github.com>
Co-authored-by: ttyS3 <ttys3.rust@gmail.com>

PR #18290.

src/webui/www/private/scripts/client.js

@@ -35,6 +35,7 @@ let serverSyncMainDataInterval = 1500;
 let customSyncMainDataInterval = null;
 let searchTabInitialized = false;
 let rssTabInitialized = false;
+let logTabInitialized = false;
 
 let syncRequestInProgress = false;
 
@@ -190,9 +191,21 @@ window.addEvent('load', function() {
         $("rssTabColumn").addClass("invisible");
     };
 
+    const buildLogTab = function() {
+        new MochaUI.Column({
+            id: 'logTabColumn',
+            placement: 'main',
+            width: null
+        });
+
+        // start off hidden
+        $('logTabColumn').addClass('invisible');
+    };
+
     buildTransfersTab();
     buildSearchTab();
     buildRssTab();
+    buildLogTab();
     MochaUI.initializeTabs('mainWindowTabsList');
 
     setCategoryFilter = function(hash) {
@@ -304,6 +317,7 @@ window.addEvent('load', function() {
     // After showing/hiding the toolbar + status bar
     let showSearchEngine = LocalPreferences.get('show_search_engine') !== "false";
     let showRssReader = LocalPreferences.get('show_rss_reader') !== "false";
+    let showLogViewer = LocalPreferences.get('show_log_viewer') === 'true';
 
     // After Show Top Toolbar
     MochaUI.Desktop.setDesktopSize();
@@ -912,6 +926,12 @@ window.addEvent('load', function() {
         updateTabDisplay();
     });
 
+    $('showLogViewerLink').addEvent('click', function(e) {
+        showLogViewer = !showLogViewer;
+        LocalPreferences.set('show_log_viewer', showLogViewer.toString());
+        updateTabDisplay();
+    });
+
     const updateTabDisplay = function() {
         if (showRssReader) {
             $('showRssReaderLink').firstChild.style.opacity = '1';
@@ -941,8 +961,22 @@ window.addEvent('load', function() {
                 $("transfersTabLink").click();
         }
 
+        if (showLogViewer) {
+            $('showLogViewerLink').firstChild.style.opacity = '1';
+            $('mainWindowTabs').removeClass('invisible');
+            $('logTabLink').removeClass('invisible');
+            if (!MochaUI.Panels.instances.LogPanel)
+                addLogPanel();
+        }
+        else {
+            $('showLogViewerLink').firstChild.style.opacity = '0';
+            $('logTabLink').addClass('invisible');
+            if ($('logTabLink').hasClass('selected'))
+                $("transfersTabLink").click();
+        }
+
         // display no tabs
-        if (!showRssReader && !showSearchEngine)
+        if (!showRssReader && !showSearchEngine && !showLogViewer)
             $('mainWindowTabs').addClass('invisible');
     };
 
@@ -954,18 +988,21 @@ window.addEvent('load', function() {
         $("filtersColumn").removeClass("invisible");
         $("filtersColumn_handle").removeClass("invisible");
         $("mainColumn").removeClass("invisible");
+        $('torrentsFilterToolbar').removeClass("invisible");
 
         customSyncMainDataInterval = null;
         syncData(100);
 
         hideSearchTab();
         hideRssTab();
+        hideLogTab();
     };
 
     const hideTransfersTab = function() {
         $("filtersColumn").addClass("invisible");
         $("filtersColumn_handle").addClass("invisible");
         $("mainColumn").addClass("invisible");
+        $('torrentsFilterToolbar').addClass("invisible");
         MochaUI.Desktop.resizePanels();
     };
 
@@ -979,6 +1016,7 @@ window.addEvent('load', function() {
         customSyncMainDataInterval = 30000;
         hideTransfersTab();
         hideRssTab();
+        hideLogTab();
     };
 
     const hideSearchTab = function() {
@@ -999,14 +1037,37 @@ window.addEvent('load', function() {
         customSyncMainDataInterval = 30000;
         hideTransfersTab();
         hideSearchTab();
+        hideLogTab();
     };
 
     const hideRssTab = function() {
         $("rssTabColumn").addClass("invisible");
-        window.qBittorrent.Rss.unload();
+        window.qBittorrent.Rss && window.qBittorrent.Rss.unload();
         MochaUI.Desktop.resizePanels();
     };
 
+    const showLogTab = function() {
+        if (!logTabInitialized) {
+            window.qBittorrent.Log.init();
+            logTabInitialized = true;
+        }
+        else {
+            window.qBittorrent.Log.load();
+        }
+
+        $('logTabColumn').removeClass('invisible');
+        customSyncMainDataInterval = 30000;
+        hideTransfersTab();
+        hideSearchTab();
+        hideRssTab();
+    };
+
+    const hideLogTab = function() {
+        $('logTabColumn').addClass('invisible');
+        MochaUI.Desktop.resizePanels();
+        window.qBittorrent.Log && window.qBittorrent.Log.unload();
+    };
+
     const addSearchPanel = function() {
         new MochaUI.Panel({
             id: 'SearchPanel',
@@ -1045,6 +1106,42 @@ window.addEvent('load', function() {
         });
     };
 
+    var addLogPanel = function() {
+        new MochaUI.Panel({
+            id: 'LogPanel',
+            title: 'Log',
+            header: true,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            },
+            loadMethod: 'xhr',
+            contentURL: 'views/log.html',
+            require: {
+                css: ['css/lib/vanillaSelectBox.css'],
+                js: ['scripts/lib/vanillaSelectBox.js'],
+            },
+            tabsURL: 'views/logTabs.html',
+            tabsOnload: function() {
+                MochaUI.initializeTabs('panelTabs');
+
+                $('logMessageLink').addEvent('click', function(e) {
+                    window.qBittorrent.Log.setCurrentTab('main');
+                });
+
+                $('logPeerLink').addEvent('click', function(e) {
+                    window.qBittorrent.Log.setCurrentTab('peer');
+                });
+            },
+            collapsible: false,
+            content: '',
+            column: 'logTabColumn',
+            height: null
+        });
+    };
+
     new MochaUI.Panel({
         id: 'transferList',
         title: 'Panel',
@@ -1185,6 +1282,7 @@ window.addEvent('load', function() {
     $('transfersTabLink').addEvent('click', showTransfersTab);
     $('searchTabLink').addEvent('click', showSearchTab);
     $('rssTabLink').addEvent('click', showRssTab);
+    $('logTabLink').addEvent('click', showLogTab);
     updateTabDisplay();
 
     const registerDragAndDrop = () => {

src/webui/www/private/scripts/dynamicTable.js

@@ -46,6 +46,8 @@ window.qBittorrent.DynamicTable = (function() {
             SearchPluginsTable: SearchPluginsTable,
             TorrentTrackersTable: TorrentTrackersTable,
             TorrentFilesTable: TorrentFilesTable,
+            LogMessageTable: LogMessageTable,
+            LogPeerTable: LogPeerTable,
             RssFeedTable: RssFeedTable,
             RssArticleTable: RssArticleTable,
             RssDownloaderRulesTable: RssDownloaderRulesTable,
@@ -2610,6 +2612,153 @@ window.qBittorrent.DynamicTable = (function() {
         }
     });
 
+    const LogMessageTable = new Class({
+        Extends: DynamicTable,
+
+        filterText: '',
+
+        filterdLength: function() {
+            return this.tableBody.getElements('tr').length;
+        },
+
+        initColumns: function() {
+            this.newColumn('rowId', '', 'QBT_TR(ID)QBT_TR[CONTEXT=ExecutionLogWidget]', 50, true);
+            this.newColumn('message', '', 'QBT_TR(Message)QBT_TR[CONTEXT=ExecutionLogWidget]', 350, true);
+            this.newColumn('timestamp', '', 'QBT_TR(Timestamp)QBT_TR[CONTEXT=ExecutionLogWidget]', 150, true);
+            this.newColumn('type', '', 'QBT_TR(Log Type)QBT_TR[CONTEXT=ExecutionLogWidget]', 100, true);
+            this.initColumnsFunctions();
+        },
+
+        initColumnsFunctions: function() {
+            this.columns['timestamp'].updateTd = function(td, row) {
+                const date = new Date(this.getRowValue(row) * 1000).toLocaleString();
+                td.set({ 'text': date, 'title': date });
+            };
+
+            this.columns['type'].updateTd = function(td, row) {
+                //Type of the message: Log::NORMAL: 1, Log::INFO: 2, Log::WARNING: 4, Log::CRITICAL: 8
+                let logLevel, addClass;
+                switch (this.getRowValue(row).toInt()) {
+                    case 1:
+                        logLevel = 'QBT_TR(Normal)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                        addClass = 'logNormal';
+                        break;
+                    case 2:
+                        logLevel = 'QBT_TR(Info)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                        addClass = 'logInfo';
+                        break;
+                    case 4:
+                        logLevel = 'QBT_TR(Warning)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                        addClass = 'logWarning';
+                        break;
+                    case 8:
+                        logLevel = 'QBT_TR(Critical)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                        addClass = 'logCritical';
+                        break;
+                    default:
+                        logLevel = 'QBT_TR(Unknown)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                        addClass = 'logUnknown';
+                        break;
+                }
+                td.set({ 'text': logLevel, 'title': logLevel });
+                td.getParent('tr').set('class', 'logTableRow ' + addClass);
+            };
+        },
+
+        getFilteredAndSortedRows: function() {
+            let filteredRows = [];
+            const rows = this.rows.getValues();
+            this.filterText = window.qBittorrent.Log.getFilterText();
+            const filterTerms = (this.filterText.length > 0) ? this.filterText.toLowerCase().split(' ') : [];
+            const logLevels = window.qBittorrent.Log.getSelectedLevels();
+            if (filterTerms.length > 0 || logLevels.length < 4) {
+                for (let i = 0; i < rows.length; ++i) {
+                    if (logLevels.indexOf(rows[i].full_data.type.toString()) == -1)
+                        continue;
+
+                    if (filterTerms.length > 0 && !window.qBittorrent.Misc.containsAllTerms(rows[i].full_data.message, filterTerms))
+                        continue;
+
+                    filteredRows.push(rows[i]);
+                }
+            }
+            else {
+                filteredRows = rows;
+            }
+
+            filteredRows.sort(function(row1, row2) {
+                const column = this.columns[this.sortedColumn];
+                const res = column.compareRows(row1, row2);
+                return (this.reverseSort == '0') ? res : -res;
+            }.bind(this));
+
+            return filteredRows;
+        },
+
+        setupCommonEvents: function() {},
+
+        setupTr: function(tr) {
+            tr.addClass('logTableRow');
+        }
+    });
+
+    const LogPeerTable = new Class({
+        Extends: LogMessageTable,
+
+        initColumns: function() {
+            this.newColumn('rowId', '', 'QBT_TR(ID)QBT_TR[CONTEXT=ExecutionLogWidget]', 50, true);
+            this.newColumn('ip', '', 'QBT_TR(IP)QBT_TR[CONTEXT=ExecutionLogWidget]', 150, true);
+            this.newColumn('timestamp', '', 'QBT_TR(Timestamp)QBT_TR[CONTEXT=ExecutionLogWidget]', 150, true);
+            this.newColumn('blocked', '', 'QBT_TR(Status)QBT_TR[CONTEXT=ExecutionLogWidget]', 150, true);
+            this.newColumn('reason', '', 'QBT_TR(Reason)QBT_TR[CONTEXT=ExecutionLogWidget]', 150, true);
+
+            this.columns['timestamp'].updateTd = function(td, row) {
+                const date = new Date(this.getRowValue(row) * 1000).toLocaleString();
+                td.set({ 'text': date, 'title': date });
+            };
+
+            this.columns['blocked'].updateTd = function(td, row) {
+                let status, addClass;
+                if (this.getRowValue(row)) {
+                    status = 'QBT_TR(Blocked)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                    addClass = 'peerBlocked';
+                }
+                else {
+                    status = 'QBT_TR(Banned)QBT_TR[CONTEXT=ExecutionLogWidget]';
+                    addClass = 'peerBanned';
+                }
+                td.set({ 'text': status, 'title': status });
+                td.getParent('tr').set('class', 'logTableRow ' + addClass);
+            };
+        },
+
+        getFilteredAndSortedRows: function() {
+            let filteredRows = [];
+            const rows = this.rows.getValues();
+            this.filterText = window.qBittorrent.Log.getFilterText();
+            const filterTerms = (this.filterText.length > 0) ? this.filterText.toLowerCase().split(' ') : [];
+            if (filterTerms.length > 0) {
+                for (let i = 0; i < rows.length; ++i) {
+                    if (filterTerms.length > 0 && !window.qBittorrent.Misc.containsAllTerms(rows[i].full_data.ip, filterTerms))
+                        continue;
+
+                    filteredRows.push(rows[i]);
+                }
+            }
+            else {
+                filteredRows = rows;
+            }
+
+            filteredRows.sort(function(row1, row2) {
+                const column = this.columns[this.sortedColumn];
+                const res = column.compareRows(row1, row2);
+                return (this.reverseSort == '0') ? res : -res;
+            }.bind(this));
+
+            return filteredRows;
+        }
+    });
+
     return exports();
 })();