logs refactoring

ui/src/components/logs/PageLogs.svelte

@@ -1,6 +1,8 @@
 <script>
+    import { querystring } from "svelte-spa-router";
     import { pageTitle } from "@/stores/app";
     import CommonHelper from "@/utils/CommonHelper";
+    import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import Searchbar from "@/components/base/Searchbar.svelte";
@@ -8,39 +10,47 @@
     import LogsList from "@/components/logs/LogsList.svelte";
     import LogsChart from "@/components/logs/LogsChart.svelte";
     import LogViewPanel from "@/components/logs/LogViewPanel.svelte";
+    import LogsSettingsPanel from "@/components/logs/LogsSettingsPanel.svelte";
+    import LogsLevelsInfo from "@/components/logs/LogsLevelsInfo.svelte";
 
-    const ADMIN_LOGS_LOCAL_STORAGE_KEY = "includeAdminLogs";
+    $pageTitle = "Logs";
 
-    const autoCompleteKeys = [
-        "method",
-        "url",
-        "remoteIp",
-        "userIp",
-        "referer",
-        "status",
-        "auth",
-        "userAgent",
-        "created",
-    ];
+    const ADMIN_REQUESTS_QUERY_KEY = "adminRequests";
+    const ADMIN_REQUESTS_STORAGE_KEY = "adminLogRequests";
 
-    $pageTitle = "Request logs";
+    const initialQueryParams = new URLSearchParams($querystring);
 
-    let logPanel;
-    let filter = "";
-    let includeAdminLogs = window.localStorage?.getItem(ADMIN_LOGS_LOCAL_STORAGE_KEY) << 0;
+    let logViewPanel;
+    let logsSettingsPanel;
     let refreshKey = 1;
+    let filter = initialQueryParams.get("filter") || "";
+    let withAdminLogs =
+        (initialQueryParams.get(ADMIN_REQUESTS_QUERY_KEY) ||
+            window.localStorage?.getItem(ADMIN_REQUESTS_STORAGE_KEY)) << 0;
+    let initialWithAdminLogs = withAdminLogs;
 
-    $: presets = !includeAdminLogs ? 'auth!="admin"' : "";
+    $: presets = !withAdminLogs ? 'data.auth!="admin"' : "";
 
-    $: if (typeof includeAdminLogs !== "undefined" && window.localStorage) {
-        window.localStorage.setItem(ADMIN_LOGS_LOCAL_STORAGE_KEY, includeAdminLogs << 0);
+    $: if (initialWithAdminLogs != withAdminLogs) {
+        initialWithAdminLogs = withAdminLogs;
+        window.localStorage?.setItem(ADMIN_REQUESTS_STORAGE_KEY, withAdminLogs << 0);
+        updateQueryParams();
     }
 
-    $: normalizedFilter = CommonHelper.normalizeSearchFilter(filter, autoCompleteKeys);
+    $: if (typeof filter !== "undefined") {
+        updateQueryParams();
+    }
 
     function refresh() {
         refreshKey++;
     }
+
+    function updateQueryParams(extra = {}) {
+        let queryParams = {};
+        queryParams.filter = filter || null;
+        queryParams[ADMIN_REQUESTS_QUERY_KEY] = withAdminLogs << 0 || null;
+        CommonHelper.replaceHashQueryParams(Object.assign(queryParams, extra));
+    }
 </script>
 
 <PageWrapper>
@@ -50,13 +60,23 @@
                 <div class="breadcrumb-item">{$pageTitle}</div>
             </nav>
 
+            <button
+                type="button"
+                aria-label="Logs settings"
+                class="btn btn-transparent btn-circle"
+                use:tooltip={{ text: "Logs settings", position: "right" }}
+                on:click={() => logsSettingsPanel?.show()}
+            >
+                <i class="ri-settings-4-line" />
+            </button>
+
             <RefreshButton on:refresh={() => refresh()} />
 
             <div class="flex-fill" />
 
             <div class="inline-flex">
                 <Field class="form-field form-field-toggle m-0" let:uniqueId>
-                    <input type="checkbox" id={uniqueId} bind:checked={includeAdminLogs} />
+                    <input type="checkbox" id={uniqueId} bind:checked={withAdminLogs} />
                     <label for={uniqueId}>Include requests by admins</label>
                 </Field>
             </div>
@@ -64,21 +84,22 @@
 
         <Searchbar
             value={filter}
-            placeholder="Search term or filter like status >= 400"
-            extraAutocompleteKeys={autoCompleteKeys}
+            placeholder="Search term or filter like `level > 0 && data.auth = 'guest'`"
+            extraAutocompleteKeys={["level", "message", "data."]}
             on:submit={(e) => (filter = e.detail)}
         />
-
-        <div class="clearfix m-b-base" />
+        <LogsLevelsInfo class="block txt-sm txt-hint m-t-xs m-b-base" />
 
         {#key refreshKey}
-            <LogsChart filter={normalizedFilter} {presets} />
+            <LogsChart {filter} {presets} />
         {/key}
     </div>
 
     {#key refreshKey}
-        <LogsList filter={normalizedFilter} {presets} on:select={(e) => logPanel?.show(e?.detail)} />
+        <LogsList bind:filter {presets} on:select={(e) => logViewPanel?.show(e?.detail)} />
     {/key}
 </PageWrapper>
 
-<LogViewPanel bind:this={logPanel} />
+<LogViewPanel bind:this={logViewPanel} />
+
+<LogsSettingsPanel bind:this={logsSettingsPanel} on:save={refresh} />