Merge pull request #838 from KhloeLeclair/clientlog

Improve log parser

1 files changed, 120 insertions, 75 deletions

diff --git a/src/SMAPI.Web/Views/LogParser/Index.cshtml b/src/SMAPI.Web/Views/LogParser/Index.cshtml
index c26ec230..11f15403 100644
--- a/src/SMAPI.Web/Views/LogParser/Index.cshtml
+++ b/src/SMAPI.Web/Views/LogParser/Index.cshtml
@@ -1,7 +1,3 @@
-@{
-    #nullable disable
-}
-
 @using Humanizer
 @using StardewModdingAPI.Toolkit.Utilities
 @using StardewModdingAPI.Web.Framework
@@ -12,17 +8,24 @@
 @{
     ViewData["Title"] = "SMAPI log parser";
 
-    ParsedLog log = Model!.ParsedLog;
+    ParsedLog? log = Model!.ParsedLog;
 
     IDictionary<string, LogModInfo[]> contentPacks = Model.GetContentPacksByMod();
     IDictionary<string, bool> defaultFilters = Enum
-        .GetValues(typeof(LogLevel))
-        .Cast<LogLevel>()
+        .GetValues<LogLevel>()
         .ToDictionary(level => level.ToString().ToLower(), level => level != LogLevel.Trace);
 
+    IDictionary<int, string> logLevels = Enum
+        .GetValues<LogLevel>()
+        .ToDictionary(level => (int)level, level => level.ToString().ToLower());
+
+    IDictionary<int, string> logSections = Enum
+        .GetValues<LogSection>()
+        .ToDictionary(section => (int)section, section => section.ToString());
+
     string curPageUrl = this.Url.PlainAction("Index", "LogParser", new { id = Model.PasteID }, absoluteUrl: true);
 
-    ISet<int> screenIds = new HashSet<int>(log?.Messages?.Select(p => p.ScreenId) ?? Array.Empty<int>());
+    ISet<int> screenIds = new HashSet<int>(log?.Messages.Select(p => p.ScreenId) ?? Array.Empty<int>());
 }
 
 @section Head {
@@ -35,23 +38,53 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabbyjs@12.0.3/dist/css/tabby-ui-vertical.min.css" />
 
     <script src="https://cdn.jsdelivr.net/npm/tabbyjs@12.0.3" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1" crossorigin="anonymous"></script>
     <script src="~/Content/js/file-upload.js"></script>
     <script src="~/Content/js/log-parser.js"></script>
+
+    <script id="serializedData" type="application/json">
+        @if (!Model.ShowRaw)
+        {
+            <text>
+                {
+                    "messages": @this.ForJson(log?.Messages),
+                    "sections": @this.ForJson(logSections),
+                    "logLevels": @this.ForJson(logLevels),
+                    "modSlugs": @this.ForJson(log?.Mods.DistinctBy(p => p.Name).Select(p => new {p.Name, Slug = Model.GetSlug(p.Name)}).Where(p => p.Name != p.Slug).ToDictionary(p => p.Name, p => p.Slug)),
+                    "screenIds": @this.ForJson(screenIds)
+                }
+            </text>
+        }
+        else
+        {
+            <text>
+                {
+                    "messages": [],
+                    "sections": {},
+                    "logLevels": {},
+                    "modSlugs": {},
+                    "screenIds": []
+                }
+            </text>
+        }
+    </script>
+    
     <script>
         $(function() {
-            smapi.logParser({
-                logStarted: new Date(@this.ForJson(log?.Timestamp)),
-                showPopup: @this.ForJson(log == null),
-                showMods: @this.ForJson(log?.Mods?.Select(p => Model.GetSlug(p.Name)).Distinct().ToDictionary(slug => slug, _ => true)),
-                showSections: @this.ForJson(Enum.GetNames(typeof(LogSection)).ToDictionary(section => section, _ => false)),
-                showLevels: @this.ForJson(defaultFilters),
-                enableFilters: @this.ForJson(!Model.ShowRaw),
-                screenIds: @this.ForJson(screenIds)
-            }, '@this.Url.PlainAction("Index", "LogParser", values: null)');
+            smapi.logParser(
+                {
+                    logStarted: new Date(@this.ForJson(log?.Timestamp)),
+                    dataElement: "script#serializedData",
+                    showPopup: @this.ForJson(log == null),
+                    showMods: @this.ForJson(log?.Mods.Select(p => Model.GetSlug(p.Name)).Distinct().ToDictionary(slug => slug, _ => true)),
+                    showSections: @this.ForJson(Enum.GetNames(typeof(LogSection)).ToDictionary(section => section, _ => false)),
+                    showLevels: @this.ForJson(defaultFilters),
+                    enableFilters: @this.ForJson(!Model.ShowRaw)
+                }
+            );
 
-            new Tabby('[data-tabs]');
+            new Tabby("[data-tabs]");
         });
     </script>
 }
@@ -192,12 +225,12 @@ else if (log?.IsValid == true)
                     Consider updating these mods to fix problems:
 
                     <table id="updates" class="table">
-                        @foreach (LogModInfo mod in log.Mods.Where(mod => (mod.HasUpdate && !mod.IsContentPack) || (contentPacks.TryGetValue(mod.Name, out LogModInfo[] contentPackList) && contentPackList.Any(pack => pack.HasUpdate))))
+                        @foreach (LogModInfo mod in log.Mods.Where(mod => (mod.HasUpdate && !mod.IsContentPack) || (contentPacks.TryGetValue(mod.Name, out LogModInfo[]? contentPackList) && contentPackList.Any(pack => pack.HasUpdate))))
                         {
                             <tr class="mod-entry">
                                 <td>
                                     <strong class=@(!mod.HasUpdate ? "hidden" : "")>@mod.Name</strong>
-                                    @if (contentPacks != null && contentPacks.TryGetValue(mod.Name, out LogModInfo[] contentPackList))
+                                    @if (contentPacks != null && contentPacks.TryGetValue(mod.Name, out LogModInfo[]? contentPackList))
                                     {
                                         <div class="content-packs">
                                             @foreach (LogModInfo contentPack in contentPackList.Where(pack => pack.HasUpdate))
@@ -275,29 +308,34 @@ else if (log?.IsValid == true)
                     <span class="notice txt"><i>click any mod to filter</i></span>
                     <span class="notice btn txt" v-on:click="showAllMods" v-bind:class="{ invisible: !anyModsHidden }">show all</span>
                     <span class="notice btn txt" v-on:click="hideAllMods" v-bind:class="{ invisible: !anyModsShown || !anyModsHidden }">hide all</span>
+                    <span class="notice btn txt" v-on:click="toggleContentPacks">toggle content packs in list</span>
                 }
             </caption>
             @foreach (var mod in log.Mods.Where(p => p.Loaded && !p.IsContentPack))
             {
+                if (contentPacks == null || !contentPacks.TryGetValue(mod.Name, out LogModInfo[]? contentPackList))
+                    contentPackList = null;
+
                 <tr v-on:click="toggleMod('@Model.GetSlug(mod.Name)')" class="mod-entry" v-bind:class="{ hidden: !showMods['@Model.GetSlug(mod.Name)'] }">
                     <td><input type="checkbox" v-bind:checked="showMods['@Model.GetSlug(mod.Name)']" v-bind:class="{ invisible: !anyModsHidden }" /></td>
-                    <td v-pre>
-                        <strong>@mod.Name</strong> @mod.Version
-                        @if (contentPacks != null && contentPacks.TryGetValue(mod.Name, out LogModInfo[] contentPackList))
+                    <td>
+                        <strong v-pre>@mod.Name</strong> @mod.Version
+                        @if (contentPackList != null)
                         {
-                            <div class="content-packs">
+                            <div v-if="!hideContentPacks" class="content-packs">
                                 @foreach (var contentPack in contentPackList)
                                 {
                                     <text>+ @contentPack.Name @contentPack.Version</text><br />
                                 }
                             </div>
+                            <span v-else class="content-packs-collapsed"> (+ @contentPackList.Length content packs)</span>
                         }
                     </td>
-                    <td v-pre>
+                    <td>
                         @mod.Author
-                        @if (contentPacks != null && contentPacks.TryGetValue(mod.Name, out contentPackList))
+                        @if (contentPackList != null)
                         {
-                            <div class="content-packs">
+                            <div v-if="!hideContentPacks" class="content-packs">
                                 @foreach (var contentPack in contentPackList)
                                 {
                                     <text>+ @contentPack.Author</text><br />
@@ -323,57 +361,64 @@ else if (log?.IsValid == true)
 
         @if (!Model.ShowRaw)
         {
+            <div id="filterHolder"></div>
             <div id="filters">
-                Filter messages:
-                <span v-bind:class="{ active: showLevels['trace'] }" v-on:click="toggleLevel('trace')">TRACE</span> |
-                <span v-bind:class="{ active: showLevels['debug'] }" v-on:click="toggleLevel('debug')">DEBUG</span> |
-                <span v-bind:class="{ active: showLevels['info'] }" v-on:click="toggleLevel('info')">INFO</span> |
-                <span v-bind:class="{ active: showLevels['alert'] }" v-on:click="toggleLevel('alert')">ALERT</span> |
-                <span v-bind:class="{ active: showLevels['warn'] }" v-on:click="toggleLevel('warn')">WARN</span> |
-                <span v-bind:class="{ active: showLevels['error'] }" v-on:click="toggleLevel('error')">ERROR</span>
+                <div class="toggles">
+                    <div>
+                        Filter messages:
+                    </div>
+                    <div>
+                        <span role="button" v-bind:class="{ active: showLevels['trace'] }" v-on:click="toggleLevel('trace')">TRACE</span> |
+                        <span role="button" v-bind:class="{ active: showLevels['debug'] }" v-on:click="toggleLevel('debug')">DEBUG</span> |
+                        <span role="button" v-bind:class="{ active: showLevels['info'] }" v-on:click="toggleLevel('info')">INFO</span> |
+                        <span role="button" v-bind:class="{ active: showLevels['alert'] }" v-on:click="toggleLevel('alert')">ALERT</span> |
+                        <span role="button" v-bind:class="{ active: showLevels['warn'] }" v-on:click="toggleLevel('warn')">WARN</span> |
+                        <span role="button" v-bind:class="{ active: showLevels['error'] }" v-on:click="toggleLevel('error')">ERROR</span>
+                        <div class="filter-text">
+                            <input
+                                type="text"
+                                v-bind:class="{ active: !!filterText }"
+                                v-on:input="updateFilterText"
+                                placeholder="search to filter log..."
+                            />
+                            <span role="button" v-bind:class="{ active: filterUseRegex }" v-on:click="toggleFilterUseRegex" title="Use regular expression syntax.">.*</span>
+                            <span role="button" v-bind:class="{ active: !filterInsensitive }" v-on:click="toggleFilterInsensitive" title="Match exact capitalization only.">aA</span>
+                            <span role="button" v-bind:class="{ active: filterUseWord, 'whole-word': true }" v-on:click="toggleFilterWord" title="Match whole word only."><i>“ ”</i></span>
+                            <span role="button" v-bind:class="{ active: shouldHighlight }" v-on:click="toggleHighlight" title="Highlight matches in the log text.">HL</span>
+                        </div>
+                        <filter-stats
+                            v-bind:start="start"
+                            v-bind:end="end"
+                            v-bind:pages="totalPages"
+                            v-bind:filtered="filteredMessages.length"
+                            v-bind:total="totalMessages"
+                        />
+                    </div>
+                </div>
+                <pager
+                    v-bind:page="page"
+                    v-bind:pages="totalPages"
+                    v-bind:prevPage="prevPage"
+                    v-bind:nextPage="nextPage"
+                />
             </div>
 
-            <table id="log">
-                @foreach (var message in log.Messages)
-                {
-                    string levelStr = message.Level.ToString().ToLower();
-                    string sectionStartClass = message.IsStartOfSection ? "section-start" : null;
-                    string sectionFilter = message.Section != null && !message.IsStartOfSection ? $"&& sectionsAllow('{message.Section}')" : null; // filter the message by section if applicable
+            <noscript>
+                <div>
+                    This website uses JavaScript to display a filterable table. To view this log, please enable JavaScript or <a href="@this.Url.PlainAction("Index", "LogParser", new { id = Model.PasteID, format = LogViewFormat.RawView })">view the raw log</a>.
+                </div>
+                <br/>
+            </noscript>
 
-                    <tr class="mod @levelStr @sectionStartClass"
-                        @if (message.IsStartOfSection) { <text> v-on:click="toggleSection('@message.Section')" </text> }
-                        v-show="filtersAllow('@Model.GetSlug(message.Mod)', '@levelStr') @sectionFilter">
-                        <td v-pre>@message.Time</td>
-                        @if (screenIds.Count > 1)
-                        {
-                            <td v-pre>screen_@message.ScreenId</td>
-                        }
-                        <td v-pre>@message.Level.ToString().ToUpper()</td>
-                        <td v-pre data-title="@message.Mod">@message.Mod</td>
-                        <td>
-                            <span v-pre class="log-message-text">@message.Text</span>
-                            @if (message.IsStartOfSection)
-                            {
-                                <span class="section-toggle-message">
-                                    <template v-if="sectionsAllow('@message.Section')">
-                                        This section is shown. Click here to hide it.
-                                    </template>
-                                    <template v-else>
-                                        This section is hidden. Click here to show it.
-                                    </template>
-                                </span>
-                            }
-                        </td>
-                    </tr>
-                    if (message.Repeated > 0)
-                    {
-                        <tr class="@levelStr mod mod-repeat" v-show="filtersAllow('@Model.GetSlug(message.Mod)', '@levelStr') @sectionFilter">
-                            <td colspan="4"></td>
-                            <td v-pre><i>repeats [@message.Repeated] times.</i></td>
-                        </tr>
-                    }
-                }
-            </table>
+            <log-table>
+                <log-line
+                    v-for="msg in visibleMessages"
+                    v-bind:key="msg.id"
+                    v-bind:showScreenId="showScreenId"
+                    v-bind:message="msg"
+                    v-bind:highlight="shouldHighlight"
+                />
+            </log-table>
         }
         else
         {