Reading HTTP access logs

.gitignore

@@ -10,3 +10,4 @@ phpstan.neon
 testbench.yaml
 vendor
 node_modules
+tests/Feature/performance_test.log

config/log-viewer.php

@@ -1,7 +1,5 @@
 <?php
 
-use Opcodes\LogViewer\Level;
-
 return [
 
     /*
@@ -134,6 +132,19 @@
     'include_files' => [
         '*.log',
         '**/*.log',
+
+        // You can include paths to other log types as well, such as apache, nginx, and more.
+        '/var/log/httpd/*',
+        '/var/log/nginx/*',
+
+        // MacOS Apple Silicon logs
+        '/opt/homebrew/var/log/nginx/*',
+        '/opt/homebrew/var/log/httpd/*',
+        '/opt/homebrew/var/log/php-fpm.log',
+        '/opt/homebrew/var/log/postgres*log',
+        '/opt/homebrew/var/log/redis*log',
+        '/opt/homebrew/var/log/supervisor*log',
+
         // '/absolute/paths/supported',
     ],
 
@@ -164,35 +175,6 @@
         '/vendor/barryvdh/laravel-debugbar/',
     ],
 
-    /*
-    |--------------------------------------------------------------------------
-    | Log matching patterns
-    |--------------------------------------------------------------------------
-    | Regexes for matching log files
-    |
-    */
-
-    'patterns' => [
-        'laravel' => [
-            'log_matching_regex' => '/^\[(\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}\.?(\d{6}([\+-]\d\d:\d\d)?)?)\].*/',
-
-            /**
-             * This pattern, used for processing Laravel logs, returns these results:
-             * $matches[0] - the full log line being tested.
-             * $matches[1] - full timestamp between the square brackets (includes microseconds and timezone offset)
-             * $matches[2] - timestamp microseconds, if available
-             * $matches[3] - timestamp timezone offset, if available
-             * $matches[4] - contents between timestamp and the severity level
-             * $matches[5] - environment (local, production, etc)
-             * $matches[6] - log severity (info, debug, error, etc)
-             * $matches[7] - the log text, the rest of the text.
-             */
-            'log_parsing_regex' => '/^\[(\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}\.?(\d{6}([\+-]\d\d:\d\d)?)?)\](.*?(\w+)\.|.*?)('
-                .implode('|', array_filter(Level::caseValues()))
-                .')?: (.*?)( in [\/].*?:[0-9]+)?$/is',
-        ],
-    ],
-
     /*
     |--------------------------------------------------------------------------
     | Cache driver

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/app.js": "/app.js?id=2ca3fa12f273bd645611f1acf3d81355",
-    "/app.css": "/app.css?id=93151d8b186ef7758df8582425ff8082",
+    "/app.js": "/app.js?id=4e92d6b3e88d6701d24f412e6aec4727",
+    "/app.css": "/app.css?id=2644d93568c08a41a0612c7c2c38618e",
     "/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"

resources/css/app.scss

@@ -323,7 +323,7 @@ html.dark {
 
 .log-list {
     table > thead th {
-        @apply sticky top-0 z-10 bg-gray-100 dark:bg-gray-900 py-2 px-2 text-left text-sm font-semibold text-gray-500 dark:text-gray-400;
+        @apply sticky top-0 z-10 bg-gray-100 dark:bg-gray-900 py-2 px-1 lg:px-2 text-left text-xs lg:text-sm font-semibold text-gray-500 dark:text-gray-400;
     }
 
     .log-group {

resources/js/components/BaseLogTable.vue

@@ -0,0 +1,159 @@
+<template>
+  <table class="table-fixed min-w-full max-w-full border-separate" style="border-spacing: 0">
+    <thead class="bg-gray-50">
+    <tr>
+      <th class="hidden lg:table-cell"><span class="sr-only">Expand/Collapse</span></th>
+      <th v-for="(column) in logViewerStore.columns" scope="col">
+        <div>{{ column.label }}</div>
+      </th>
+      <th scope="col" class="hidden lg:table-cell"><span class="sr-only">Log index</span></th>
+    </tr>
+    </thead>
+
+    <template v-if="logViewerStore.logs && logViewerStore.logs.length > 0">
+      <tbody v-for="(log, index) in logViewerStore.logs" :key="index"
+             :class="[index === 0 ? 'first' : '', 'log-group']"
+             :id="`tbody-${index}`" :data-index="index"
+      >
+      <tr @click="logViewerStore.toggle(index)"
+          :class="['log-item group', log.level_class, logViewerStore.isOpen(index) ? 'active' : '', logViewerStore.shouldBeSticky(index) ? 'sticky z-2' : '']"
+          :style="{ top: logViewerStore.stackTops[index] || 0 }"
+      >
+        <td class="log-level hidden lg:table-cell">
+          <div class="flex items-center lg:pl-2">
+            <button :aria-expanded="logViewerStore.isOpen(index)"
+                    @keydown="handleLogToggleKeyboardNavigation"
+                    class="log-level-icon opacity-75 w-5 h-5 hidden lg:block group focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-brand-500 rounded-md"
+            >
+              <span class="sr-only" v-if="!logViewerStore.isOpen(index)">Expand log entry</span>
+              <span class="sr-only" v-if="logViewerStore.isOpen(index)">Collapse log entry</span>
+              <span class="w-full h-full group-hover:hidden group-focus:hidden">
+                <ExclamationCircleIcon v-if="log.level_class === 'danger'" />
+                <ExclamationTriangleIcon v-else-if="log.level_class === 'warning'" />
+                <CheckCircleIcon v-else-if="log.level_class === 'success'" />
+                <InformationCircleIcon v-else />
+              </span>
+              <span class="w-full h-full hidden group-hover:inline-block group-focus:inline-block">
+                <ChevronRightIcon :class="[logViewerStore.isOpen(index) ? 'rotate-90' : '', 'transition duration-100']" />
+              </span>
+            </button>
+          </div>
+        </td>
+
+        <template v-for="(column, colIndex) in logViewerStore.columns">
+          <!-- Severity -->
+          <td :key="`${log.index}-column-${colIndex}`" v-if="column.data_path === 'level'" class="log-level truncate">
+            <span>{{ log.level_name }}</span>
+          </td>
+          <!-- /Severity -->
+
+          <!-- Datetime -->
+          <td :key="`${log.index}-column-${colIndex}`" v-else-if="column.data_path === 'datetime'" class="whitespace-nowrap text-gray-900 dark:text-gray-200">
+            <span class="hidden lg:inline" v-html="highlightSearchResult(log.datetime, searchStore.query)"></span>
+            <span class="lg:hidden">{{ log.time }}</span>
+          </td>
+          <!-- /Datetime -->
+
+          <!-- Message -->
+          <td :key="`${log.index}-column-${colIndex}`" v-else-if="column.data_path === 'message'" class="max-w-[1px] w-full truncate text-gray-500 dark:text-gray-300 dark:opacity-90">
+            <span v-html="highlightSearchResult(`${log.message}`, searchStore.query)"></span>
+          </td>
+          <!-- /Message -->
+
+          <td :key="`${log.index}-column-${colIndex}`" v-else class="text-gray-500 dark:text-gray-300 dark:opacity-90" :class="column.class || ''">
+            <span v-html="highlightSearchResult(getDataAtPath(log, column.data_path), searchStore.query)"></span>
+          </td>
+        </template>
+
+        <td class="whitespace-nowrap text-gray-500 dark:text-gray-300 dark:opacity-90 text-xs hidden lg:table-cell">
+          <LogCopyButton :log="log" class="pr-2 large-screen" />
+        </td>
+      </tr>
+      <tr v-show="logViewerStore.isOpen(index)">
+        <td colspan="6">
+          <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>
+              <LogCopyButton :log="log" />
+            </div>
+          </div>
+          <pre class="log-stack" v-html="highlightSearchResult(log.full_text, searchStore.query)"></pre>
+          <template v-if="hasContext(log)">
+            <p class="mx-2 lg:mx-8 pt-2 border-t font-semibold text-gray-700 dark:text-gray-400 text-xs lg:text-sm">Context:</p>
+            <pre class="log-stack" v-html="highlightSearchResult(JSON.stringify(log.context, null, 2), searchStore.query)"></pre>
+          </template>
+
+          <div v-if="log.extra && log.extra.log_text_incomplete" class="py-4 px-8 text-gray-500 italic">
+            The contents of this log have been cut short to the first {{ LogViewer.max_log_size_formatted }}.
+            The full size of this log entry is <strong>{{ log.extra.log_size_formatted }}</strong>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </template>
+
+    <tbody v-else class="log-group">
+    <tr>
+      <td colspan="6">
+        <div class="bg-white text-gray-600 dark:bg-gray-800 dark:text-gray-200 p-12">
+          <div class="text-center font-semibold">No results</div>
+          <div class="text-center mt-6">
+            <button v-if="searchStore.query?.length > 0"
+              class="px-3 py-2 border dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-brand-600 dark:hover:border-brand-700 rounded-md"
+              @click="clearQuery">Clear search query
+            </button>
+            <button v-if="searchStore.query?.length > 0 && fileStore.selectedFile"
+              class="px-3 ml-3 py-2 border dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-brand-600 dark:hover:border-brand-700 rounded-md"
+              @click.prevent="clearSelectedFile">Search all files
+            </button>
+            <button
+              v-if="severityStore.levelsFound.length > 0 && severityStore.levelsSelected.length === 0"
+              class="px-3 ml-3 py-2 border dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-brand-600 dark:hover:border-brand-700 rounded-md"
+              @click="severityStore.selectAllLevels">Select all severities
+            </button>
+          </div>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import {
+  ChevronRightIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  InformationCircleIcon,
+} from '@heroicons/vue/24/solid';
+import { highlightSearchResult } from '../helpers.js';
+import { useLogViewerStore } from '../stores/logViewer.js';
+import { useSearchStore } from '../stores/search.js';
+import { useFileStore } from '../stores/files.js';
+import LogCopyButton from './LogCopyButton.vue';
+import { handleLogToggleKeyboardNavigation } from '../keyboardNavigation';
+import { useSeverityStore } from '../stores/severity.js';
+
+const fileStore = useFileStore();
+const logViewerStore = useLogViewerStore();
+const searchStore = useSearchStore();
+const severityStore = useSeverityStore();
+const emit = defineEmits(['clearSelectedFile', 'clearQuery']);
+
+const clearSelectedFile = () => {
+  emit('clearSelectedFile');
+}
+
+const clearQuery = () => {
+  emit('clearQuery');
+}
+
+const getDataAtPath = (obj, path) => {
+  return String(path.split('.').reduce((acc, part) => acc && acc[part], obj));
+}
+
+const hasContext = (log) => {
+  return log.context && Object.keys(log.context).length > 0;
+}
+</script>

resources/js/components/FileList.vue

@@ -36,7 +36,11 @@
         <host-selector class="mb-8 mt-6" />
       </template>
 
-      <div class="flex justify-between items-baseline mt-6" v-if="fileStore.folders?.length > 0">
+      <template v-if="fileStore.fileTypesAvailable && fileStore.fileTypesAvailable.length > 1">
+        <file-type-selector class="mb-8 mt-6" />
+      </template>
+
+      <div class="flex justify-between items-baseline mt-6" v-if="fileStore.filteredFolders?.length > 0">
         <div class="ml-1 block text-sm text-gray-500 dark:text-gray-400 truncate">Log files on {{ fileStore.selectedHost?.name }}</div>
         <div class="text-sm text-gray-500 dark:text-gray-400">
           <label for="file-sort-direction" class="sr-only">Sort direction</label>
@@ -72,7 +76,7 @@
 
     <div id="file-list-container" class="relative h-full overflow-hidden">
       <div class="file-list" @scroll="(event) => fileStore.onScroll(event)">
-        <div v-for="folder in fileStore.folders"
+        <div v-for="folder in fileStore.filteredFolders"
              :key="folder.identifier"
              :id="`folder-${folder.identifier}`"
              class="relative folder-container"
@@ -215,6 +219,7 @@ import SpinnerIcon from './SpinnerIcon.vue';
 import SiteSettingsDropdown from './SiteSettingsDropdown.vue';
 import HostSelector from './HostSelector.vue';
 import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation';
+import FileTypeSelector from './FileTypeSelector.vue';
 
 const router = useRouter();
 const route = useRoute();

resources/js/components/FileTypeSelector.vue

@@ -0,0 +1,38 @@
+<template>
+  <Listbox as="div" v-model="fileStore.selectedFileTypes" multiple>
+    <ListboxLabel class="ml-1 block text-sm text-gray-500 dark:text-gray-400">Selected file types</ListboxLabel>
+
+    <div class="relative mt-1">
+      <ListboxButton id="hosts-toggle-button" class="cursor-pointer relative text-gray-800 dark:text-gray-200 w-full cursor-default rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-2 pl-4 pr-10 text-left hover:border-brand-600 hover:dark:border-brand-800 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 text-sm">
+        <span class="block truncate">{{ fileStore.selectedFileTypesString }}</span>
+        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </span>
+      </ListboxButton>
+
+      <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+        <ListboxOptions class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md shadow-md bg-white dark:bg-gray-800 py-1 border border-gray-200 dark:border-gray-700 ring-1 ring-brand ring-opacity-5 focus:outline-none text-sm">
+          <ListboxOption as="template" v-for="fileType in fileStore.fileTypesAvailable" :key="fileType.identifier" :value="fileType.identifier" v-slot="{ active, selected }">
+            <li :class="[active ? 'text-white bg-brand-600' : 'text-gray-900 dark:text-gray-300', 'relative cursor-default select-none py-2 pl-3 pr-9']">
+              <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">{{ fileType.name }}</span>
+
+              <span v-if="selected" :class="[active ? 'text-white' : 'text-brand-600', 'absolute inset-y-0 right-0 flex items-center pr-4']">
+                <CheckIcon class="h-5 w-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>
+
+<script setup>
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/20/solid'
+import { useRouter } from 'vue-router';
+import { useFileStore } from '../stores/files.js';
+
+const router = useRouter();
+const fileStore = useFileStore();
+</script>

resources/js/components/LevelButtons.vue

@@ -80,7 +80,7 @@ const logViewerStore = useLogViewerStore();
 const severityStore = useSeverityStore();
 
 watch(
-  () => severityStore.selectedLevels,
+  () => severityStore.excludedLevels,
   () => logViewerStore.loadLogs()
 );
 </script>