fix #306

opcodesio · Dec 14, 2023 · 647b0c4 · 647b0c4
1 parent f5ac2df
commit 647b0c4
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 36 deletions.
diff --git a/public/app.css b/public/app.css
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,6 +1,6 @@
 {
-    "/app.js": "/app.js?id=957d67186ab2055921321370e7dc21a5",
-    "/app.css": "/app.css?id=46e730db84da71f61a3f42fe6b08d8eb",
+    "/app.js": "/app.js?id=a28614dd177a85f2b1dd85d86a167c1a",
+    "/app.css": "/app.css?id=8e28997d012793c246fb3c0743b54545",
     "/img/log-viewer-128.png": "/img/log-viewer-128.png?id=d576c6d2e16074d3f064e60fe4f35166",
     "/img/log-viewer-32.png": "/img/log-viewer-32.png?id=f8ec67d10f996aa8baf00df3b61eea6d",
     "/img/log-viewer-64.png": "/img/log-viewer-64.png?id=8902d596fc883ca9eb8105bb683568c6"

diff --git a/resources/js/components/BaseLogTable.vue b/resources/js/components/BaseLogTable.vue
@@ -70,7 +70,7 @@
         </td>
       </tr>
       <tr v-show="logViewerStore.isOpen(index)">
-        <td colspan="6">
+        <td :colspan="tableColumns">
           <div class="lg:hidden flex justify-between px-2 pt-2 pb-1 text-xs">
             <div class="flex-1"><span class="font-semibold">Datetime:</span> {{ log.datetime }}</div>
             <div>
@@ -151,6 +151,7 @@ import TabContainer from "./TabContainer.vue";
 import TabContent from "./TabContent.vue";
 import MailHtmlPreview from "./MailHtmlPreview.vue";
 import MailTextPreview from "./MailTextPreview.vue";
+import {computed} from "vue";
 
 const fileStore = useFileStore();
 const logViewerStore = useLogViewerStore();
@@ -209,4 +210,9 @@ const prepareContextForOutput = (context) => {
     return value;
   }, 2);
 }
+
+const tableColumns = computed(() => {
+  // the extra two columns are for the expand/collapse and log index columns
+  return logViewerStore.columns.length + 2;
+});
 </script>
diff --git a/resources/js/components/LogList.vue b/resources/js/components/LogList.vue
@@ -23,30 +23,20 @@
         </div>
       </div>
 
+      <div v-if="!inlinePaginationSettingsIntoTableHeader" class="flex justify-end md:px-4 my-1 mx-2">
+        <pagination-options />
+      </div>
+
       <div v-if="displayLogs" class="relative overflow-hidden h-full text-sm">
         <!-- pagination settings -->
-        <div class="mx-2 mt-1 mb-2 text-right lg:mx-0 lg:mt-0 lg:mb-0 lg:absolute lg:top-2 lg:right-6 z-20 text-sm text-gray-500 dark:text-gray-400">
-          <label for="log-sort-direction" class="sr-only">Sort direction</label>
-          <select id="log-sort-direction" v-model="logViewerStore.direction" class="select mr-4">
-            <option value="desc">Newest first</option>
-            <option value="asc">Oldest first</option>
-          </select>
-          <label for="items-per-page" class="sr-only">Items per page</label>
-          <select id="items-per-page" v-model="logViewerStore.resultsPerPage" class="select">
-            <option value="10">10 items per page</option>
-            <option value="25">25 items per page</option>
-            <option value="50">50 items per page</option>
-            <option value="100">100 items per page</option>
-            <option value="250">250 items per page</option>
-            <option value="500">500 items per page</option>
-          </select>
-        </div>
+        <pagination-options
+          v-if="inlinePaginationSettingsIntoTableHeader"
+          class="mx-2 mt-1 mb-2 text-right lg:mx-0 lg:mt-0 lg:mb-0 lg:absolute lg:top-2 lg:right-6 z-20"
+        />
 
         <div class="log-item-container h-full overflow-y-auto md:px-4" @scroll="(event) => logViewerStore.onScroll(event)">
           <div class="inline-block min-w-full max-w-full align-middle">
-
             <base-log-table />
-
           </div>
         </div>
 
@@ -77,9 +67,8 @@
 </template>
 
 <script setup>
-import { computed, watch } from 'vue';
+import {computed, ref, watch} from 'vue';
 import { useRouter } from 'vue-router';
-import { replaceQuery } from '../helpers.js';
 import { ArrowPathIcon, Bars3Icon } from '@heroicons/vue/24/solid';
 import { useLogViewerStore } from '../stores/logViewer.js';
 import { useSearchStore } from '../stores/search.js';
@@ -91,14 +80,13 @@ import SearchInput from './SearchInput.vue';
 import SiteSettingsDropdown from './SiteSettingsDropdown.vue';
 import SpinnerIcon from './SpinnerIcon.vue';
 import BaseLogTable from './BaseLogTable.vue';
-import { useSeverityStore } from '../stores/severity.js';
+import PaginationOptions from './PaginationOptions.vue';
 
 const router = useRouter();
 const fileStore = useFileStore();
 const logViewerStore = useLogViewerStore();
 const searchStore = useSearchStore();
 const paginationStore = usePaginationStore();
-const severityStore = useSeverityStore();
 
 const showLevelsDropdown = computed(() => {
   return fileStore.selectedFile || String(searchStore.query || '').trim().length > 0;
@@ -108,19 +96,20 @@ const displayLogs = computed(() => {
   return logViewerStore.logs && (logViewerStore.logs.length > 0 || !logViewerStore.hasMoreResults) && (logViewerStore.selectedFile || searchStore.hasQuery);
 });
 
-const clearSelectedFile = () => {
-  replaceQuery(router, 'file', null);
-}
-
-const clearQuery = () => {
-  replaceQuery(router, 'query', null);
-}
-
 watch(
   [
     () => logViewerStore.direction,
     () => logViewerStore.resultsPerPage,
   ],
   () => logViewerStore.loadLogs()
 )
+
+const inlinePaginationSettingsIntoTableHeader = ref(true);
+
+watch(() => logViewerStore.columns, () => {
+  // only if the last column is the message column, which is usually a wide column
+  // and leaves space for the pagination settings to be displayed in the table's header.
+  inlinePaginationSettingsIntoTableHeader.value =
+    logViewerStore.columns[logViewerStore.columns.length - 1].data_path === 'message';
+});
 </script>
diff --git a/resources/js/components/PaginationOptions.vue b/resources/js/components/PaginationOptions.vue
@@ -0,0 +1,24 @@
+<script setup>
+import {useLogViewerStore} from "../stores/logViewer";
+
+const logViewerStore = useLogViewerStore();
+</script>
+
+<template>
+<div class="text-sm text-gray-500 dark:text-gray-400">
+  <label for="log-sort-direction" class="sr-only">Sort direction</label>
+  <select id="log-sort-direction" v-model="logViewerStore.direction" class="select mr-4">
+    <option value="desc">Newest first</option>
+    <option value="asc">Oldest first</option>
+  </select>
+  <label for="items-per-page" class="sr-only">Items per page</label>
+  <select id="items-per-page" v-model="logViewerStore.resultsPerPage" class="select">
+    <option value="10">10 items per page</option>
+    <option value="25">25 items per page</option>
+    <option value="50">50 items per page</option>
+    <option value="100">100 items per page</option>
+    <option value="250">250 items per page</option>
+    <option value="500">500 items per page</option>
+  </select>
+</div>
+</template>
diff --git a/src/Logs/LaravelLog.php b/src/Logs/LaravelLog.php
@@ -13,7 +13,6 @@ class LaravelLog extends Log
 {
     public static string $name = 'Laravel';
     public static string $regex = '/\[(?P<datetime>[^\]]+)\] (?P<environment>\S+)\.(?P<level>\S+): (?P<message>.*)/';
-    public int $fullTextLength;
     public static array $columns = [
         ['label' => 'Severity', 'data_path' => 'level'],
         ['label' => 'Datetime', 'data_path' => 'datetime'],