Add support for multiple hosts (#63)

Author: frankdekker

.github/workflows/test.yml

@@ -85,6 +85,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
       - name: Use Node.js 21.x
         uses: actions/setup-node@v4
         with:
@@ -97,10 +98,17 @@ jobs:
         run: cd frontend && npm run lint
 
   build-assets-check:
-    name: Check build assets
+    name: Build assets
     runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
     steps:
       - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+
       - name: Use Node.js 21.x
         uses: actions/setup-node@v4
         with:
@@ -112,5 +120,6 @@ jobs:
       - name: Build assets
         run: cd frontend && npm run build
 
-      - name: Git diff - expecting no changes
-        run: git status | grep "nothing to commit, working tree clean"
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: 'Auto build assets [skip ci]'

CONTRIBUTING.md

@@ -35,8 +35,6 @@ A minimal Symfony project has been setup under `/dev/`. To start development, in
 After the containers are up and running, the project is available at http://localhost:8888.
 
 > **_NOTE:_**  the nodejs container will automatically rebuild the frontend assets and deploy them in the `/public/` directory
-
-> **_NOTE:_**  When making changes to the frontend, ensure committing the compiled assets.  
  
 ## Running tests and code style checks
 

README.md

@@ -19,10 +19,12 @@ read logs from any directory.
 
 ### Features
 
-- 📂 **View all the Monolog, Apache2 or Nginx logs** in specified directories,
+- 📂 View all the **Monolog logs** in the `%kernel.logs_dir%` directory,
+- 📂 **View other types of logs** - Apache, Nginx, or custom logs,
 - 🔍 **Search** the logs,
-- 🎚 **Filter** by log level (error, info, debug, etc.), by channel, date range or log content,
+- 🔍 **Filter** by log level (error, info, debug, etc.), by channel, date range or log content inclusion or exclusion,
 - 🌑 **Dark mode**,
+- 🖥️ **Multiple host** support,
 - 💾 **Download** or **delete** log files from the UI,
 - ☎️ **API access** for folders, files & log entries,
 
@@ -83,6 +85,7 @@ By default, it is available at: `/log-viewer` on your domain.
 - [Adding additional log files](docs/adding-additional-log-files.md)
 - [Adding apache logs](docs/configuring-apache-logs.md)
 - [Adding nginx logs](docs/configuring-nginx-logs.md)
+- [Adding remote hosts](docs/adding-remote-hosts.md)
 - [Configuring the back home url](docs/configuring-the-back-home-route.md)
 - [Advanced search queries](docs/advanced-search-queries.md)
 - [Full configuration reference](docs/configuration-reference.md)

composer.json

@@ -20,6 +20,7 @@
     "minimum-stability": "stable",
     "config": {
         "sort-packages": true,
+        "lock": false,
         "allow-plugins": {
             "symfony/runtime": true,
             "phpstan/extension-installer": true
@@ -56,6 +57,7 @@
         "symfony/browser-kit": "^6.0||^7.0",
         "symfony/console": "^6.0||^7.0",
         "symfony/css-selector": "^6.0||^7.0",
+        "symfony/http-client": "^6.0||^7.0",
         "symfony/monolog-bridge": "^6.0||^7.0",
         "symfony/monolog-bundle": "^3.10",
         "symfony/phpunit-bridge": "^6.4||^7.0",
@@ -81,7 +83,8 @@
         }
     },
     "suggest": {
-        "ext-zip": "To use the zip download feature"
+        "ext-zip": "To use the zip download feature",
+        "symfony/http-client": "Required for the remote hosts feature"
     },
     "scripts": {
         "check": ["@check:phpstan", "@check:phpmd", "@check:phpcs"],

dev/config/config.yml

@@ -4,6 +4,7 @@ parameters:
 framework:
   test: ~
   secret: dev
+  ide: "javascript:fetch('http://localhost:63342/api/file?file=%%f&line=%%l'.replace('/app/', ''));"
   router:
     resource: "%kernel.project_dir%/config/routing.yml"
     strict_requirements: true
@@ -13,6 +14,8 @@ framework:
     log: true
   handle_all_throwables: true
   default_locale: en
+  http_client:
+    enabled: true
   profiler:
     enabled: true
     only_exceptions: false

docs/adding-remote-hosts.md

@@ -0,0 +1,56 @@
+## Add remote hosts
+
+By default the log viewer only shows logs from the local server. If you want to add logs from a remote server, you can do so by adding a `hosts` 
+section to the `fd_log_viewer` configuration.
+
+### Configuration
+Add one or more hosts to the `fd_log_viewer` configuration. Each host should have a unique key. Different types of authentication can be used.
+```yaml
+fd_log_viewer:
+    hosts:
+        # The default localhost. Can be removed to only have remote hosts. 
+        localhost:
+            name: Local
+            host: null
+            
+        remote-public:
+            name: Remote without authentication
+            host: https://example.com/log-viewer
+            
+        # basic auth. Header: Authorization: Basic dXNlcjpwYXNz 
+        remote-basic:
+            name: Remote basic auth
+            host: https://example.com/log-viewer
+            auth:
+                type: basic
+                options:
+                    username: user
+                    password: pass
+                    
+        # bearer token. Header: Authorization: Bearer my-token                      
+        remote-bearer:
+            name: Remote bearer
+            host: https://example.com/log-viewer
+            auth:
+                type: bearer
+                options:
+                    token: my-token
+                    
+        # custom header. Header: X-Private-Token: my-token                    
+        remote-header:
+            name: Remote custom header
+            host: https://example.com/log-viewer
+            auth:
+                type: header
+                options:
+                    x-private-token: my-token
+                    
+        # custom authentication class                    
+        remote-custom:
+            name: Remote custom authenticator
+            host: https://example.com/log-viewer
+            auth:
+                type: My\Class\That\Implements\AuthenticatorInterface
+                options:
+                    key: value   
+```

docs/configuration-reference.md

@@ -6,7 +6,6 @@ Out of the box, [Log viewer](../README.md) will have the following configuration
 
 ```yaml
 fd_log_viewer:
-    enable_default_monolog: true
     home_route: null
 
     log_files:
@@ -25,17 +24,14 @@ fd_log_viewer:
             log_message_pattern: '/^\[(?P<date>[^\]]+)\]\s+(?P<channel>[^\.]+)\.(?P<severity>[^:]+):\s+(?P<message>.*)\s+(?P<context>[[{].*?[\]}])\s+(?P<extra>[[{].*?[\]}])\s+$/s'
             date_format: "Y-m-d H:i:s"
 
+    hosts:
+        localhost:
+            name: Local
+            host: null
 ```
 
 ## Configuration
 
-### enable_default_monolog
-
-**type**: `boolean`. Default: `true`
-
-Out of the box the bundle is configured with a default monolog configuration. Set this to `false` to override this behaviour.
-<br><br>
-
 ### home_route
 
 **type**: `string|null`. Default: `null`
@@ -54,13 +50,14 @@ This entry allows you to add more log file directories to the Log Viewer. Each e
 
 **type**: `string` (`enum: monolog(.json)|http-access|apache-error|nginx-error`)
 
-This is the type of log file that will be read. 
+This is the type of log file that will be read.
+
 - `monolog` is the default type and will read the default monolog log files.
 - `monolog.json` will read the monolog log files that use `formatter: 'monolog.formatter.json'`.
 - `http-access` will read the access log files of Apache and Nginx.
 - `apache-error` will read the error log files of Apache.
 - `nginx-error` will read the error log files of Nginx.
-<br><br>
+  <br><br>
 
 ### log_files.name
 
@@ -101,19 +98,21 @@ Example:
 ```text
 *.log,*.txt
 ```
+
 <br>
 
 ### log_files.finder.depth
+
 **type**: `int|string|string[]|null`. Default: `'== 0'`
 
 The maximum depth of directories to search for log files. If set to null all subdirectories will be added.
 
 Example:
+
 - `'== 0'` will only search in the specified directory.
 - `'>= 0'` will search in the specified directory and all subdirectories.
 - `['>= 0', '< 3]` will search in the specified directory and all subdirectories up to a depth of 2.
-<br><br>
-
+  <br><br>
 
 ### log_files.finder.ignoreUnreadableDirs
 
@@ -188,3 +187,65 @@ If you use a custom monolog format, adjust this pattern to your needs.
 
 This is the date format that will be used to format the date in frontend.
 <br><br>
+
+### hosts
+
+**type**: `array<string, mixed>`
+
+This entry allows you to add more hosts to the log viewer
+
+**Full example:**
+```yaml
+hosts:
+    local:
+        name: Local
+        host: null
+    remote:
+        name: Remote
+        host: https://example.com/log-viewer
+        auth:
+            type: basic
+            options:
+                username: user
+                password: pass
+```
+<br>
+
+### hosts.name
+
+**type**: `string`
+
+The display name of the host. Will be shown in the UI host selector.
+<br><br>
+
+### hosts.host
+
+**type**: `string|null`
+
+The url to the remote host log-viewer API. If null, the local host will be used. Must include the log-viewer route prefix.
+Example: `host: https://example.com/log-viewer`
+
+### hosts.auth
+
+**type**: `array<string, mixed>`
+
+For remote hosts, specifies the authentication method.
+<br><br>
+
+### hosts.auth.type
+
+**type**: `string` (`enum: basic|bearer|header|class-string`)
+
+The remote host authentication method:
+
+- `basic`: Basic authentication. Requires `username` and `password` option.
+- `bearer`: Bearer token authentication. Requires `token` option.
+- `header`: Custom header authentication. The key-values in the options will be added to the request headers.
+- `class-string`: Custom authentication. The class must implement `FD\LogViewerBundle\Authentication\AuthenticationInterface`.
+<br><br>
+
+### hosts.auth.options
+
+**type**: `array<string, string>`
+The options specific for the authentication method.
+<br><br>

frontend/src/components/FileTree.vue

@@ -2,8 +2,13 @@
 import LogFolder from '@/components/LogFolder.vue';
 import bus from '@/services/EventBus';
 import {useFolderStore} from '@/stores/folders';
+import {useHostsStore} from '@/stores/hosts';
+import {watch} from 'vue';
 
 const folderStore = useFolderStore();
+const hostsStore  = useHostsStore();
+
+watch(() => hostsStore.selected, () => folderStore.update());
 
 bus.on('file-deleted', () => folderStore.update());
 bus.on('folder-deleted', () => folderStore.update());
@@ -13,10 +18,16 @@ bus.on('folder-deleted', () => folderStore.update());
     <!-- FileTree -->
     <div class="p-1 pe-2 overflow-auto">
         <div class="slv-control-layout m-0">
-            <div><!-- Host: Local --></div>
+            <div>
+                <select class="form-select pb-0 pt-0 ps-0 slv-form-select border-0"
+                        v-model="hostsStore.selected"
+                        v-if="Object.keys(hostsStore.hosts).length > 0">
+                    <option v-for="(name, key) in hostsStore.hosts" :value="key" :key="key">{{ name }}</option>
+                </select>
+            </div>
             <div></div>
             <div>
-                <select class="form-control p-0 border-0" v-model="folderStore.direction" v-on:change="folderStore.update">
+                <select class="form-select pb-0 pt-0 ps-0 slv-form-select border-0" v-model="folderStore.direction" v-on:change="folderStore.update">
                     <option value="desc">Newest First</option>
                     <option value="asc">Oldest First</option>
                 </select>
@@ -34,4 +45,9 @@ bus.on('folder-deleted', () => folderStore.update());
     display: grid;
     grid-template-columns: auto 1fr auto;
 }
+
+.slv-form-select {
+    padding-right: 1.8rem;
+    background-position: right 0.35rem center;
+}
 </style>

frontend/src/components/LogFile.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import ButtonGroup from '@/components/ButtonGroup.vue';
 import type LogFile from '@/models/LogFile';
+import ParameterBag from '@/models/ParameterBag';
 import bus from '@/services/EventBus';
+import {useHostsStore} from '@/stores/hosts';
 import {useSearchStore} from '@/stores/search';
 import axios from 'axios';
 import {ref, watch} from 'vue';
@@ -16,9 +18,12 @@ const selectedFile = ref<string | null>(null);
 const route        = useRoute();
 const router       = useRouter();
 const searchStore  = useSearchStore();
-const baseUri      = axios.defaults.baseURL;
-const deleteFile   = (identifier: string) => {
-    axios.delete('/api/file/' + encodeURI(identifier))
+const hostsStore   = useHostsStore();
+
+const baseUri    = axios.defaults.baseURL;
+const deleteFile = (identifier: string) => {
+    const params = new ParameterBag().set('host', hostsStore.selected, 'localhost').all();
+    axios.delete('/api/file/' + encodeURI(identifier), {params: params})
         .then(() => {
             if (selectedFile.value === identifier) {
                 router.push({name: 'home'});
@@ -53,7 +58,9 @@ watch(() => route.query.file, () => selectedFile.value = String(route.query.file
         </template>
         <template v-slot:dropdown>
             <li>
-                <a class="dropdown-item" :href="baseUri + 'api/file/' + encodeURI(file.identifier)" v-if="file.can_download">
+                <a class="dropdown-item"
+                   :href="baseUri + 'api/file/' + encodeURI(file.identifier) + '?' + new ParameterBag().set('host', hostsStore.selected, 'localhost').toString()"
+                   v-if="file.can_download">
                     <i class="bi bi-cloud-download me-3"></i>Download
                 </a>
             </li>