Release 4.7.5

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/.kodiak.toml

@@ -1,2 +0,0 @@
-version = 1
-merge.notify_on_conflict = false

.github/dependabot.yml

@@ -1,47 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    labels:
-      - "dependencies"
-      - "automerge"
-    schedule:
-      interval: "daily"
-  - package-ecosystem: "docker"
-    directory: "/"
-    labels:
-      - "dependencies"
-      - "automerge"
-    schedule:
-      interval: "daily"
-  - package-ecosystem: gomod
-    directory: "/"
-    labels:
-      - "gomod"
-      - "dependencies"
-      - "automerge"
-    schedule:
-      interval: daily
-  - package-ecosystem: npm
-    directory: "/"
-    labels:
-      - "npm"
-      - "dependencies"
-      - "automerge"
-    schedule:
-      interval: daily
-  - package-ecosystem: npm
-    directory: "/e2e"
-    labels:
-      - "npm"
-      - "dependencies"
-      - "automerge"
-    schedule:
-      interval: daily
-  - package-ecosystem: "docker"
-    directory: "/e2e"
-    labels:
-      - "dependencies"
-      - "automerge"
-    schedule:
-      interval: "daily"

.github/workflows/deploy.yml

@@ -12,10 +12,12 @@ jobs:
         uses: actions/checkout@v3
       - name: Install Node
         uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.3
         with:
-          version: 6.20.1
+          node-version: latest
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.0
       - name: Install dependencies
         run: pnpm install
       - name: Run Tests
@@ -27,7 +29,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v3
         with:
-          go-version: 1.18.x
+          go-version: 1.19.x
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
@@ -39,9 +41,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Build images
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml build
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose -f e2e/docker-compose.yml build
       - name: Run tests
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
   buildx:
     needs: [go-test, npm-test, int-test]
     name: Release
@@ -53,22 +55,22 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.1.0
+        uses: docker/setup-buildx-action@v2.4.1
       - name: Login to DockerHub
         uses: docker/login-action@v2.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v4.0.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
           build-args: TAG=${{ steps.meta.outputs.version }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=registry,ref=amir20/dozzle:latest
-          cache-to: type=inline
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
   git-release:
     needs: [buildx]
     name: Github Release
@@ -80,8 +82,10 @@ jobs:
           fetch-depth: 0
       - name: Install Node
         uses: actions/setup-node@v3
+        with:
+          node-version: latest
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.3
+        uses: pnpm/action-setup@v2.2.4
         with:
           version: 6.20.1
       - name: Install dependencies

.github/workflows/dev.yml

@@ -10,7 +10,7 @@ jobs:
   buildx:
     name: Push branches and PRs
     runs-on: ubuntu-latest
-    if: ${{ github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle' }}
+    if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
     steps:
       - name: Docker meta
         id: meta
@@ -18,19 +18,19 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.1.0
+        uses: docker/setup-buildx-action@v2.4.1
       - name: Login to DockerHub
         uses: docker/login-action@v2.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v4.0.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
           build-args: TAG=${{ steps.meta.outputs.version }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=registry,ref=amir20/dozzle:master
-          cache-to: type=inline
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/test.yml

@@ -15,14 +15,16 @@ jobs:
         uses: actions/checkout@v3
       - name: Install Node
         uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.3
         with:
-          version: 6.20.1
+          node-version: latest
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.0
       - name: Install dependencies
         run: pnpm install
       - name: Run Tests
-        run: pnpm run test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
@@ -30,7 +32,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v3
         with:
-          go-version: 1.18.x
+          go-version: 1.19.x
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
@@ -44,16 +46,18 @@ jobs:
         with:
           fetch-depth: 2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.1.0
+        uses: docker/setup-buildx-action@v2.4.1
       - name: Login to DockerHub
+        if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork }}
         uses: docker/login-action@v2.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build images
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml build --build-arg BUILDKIT_INLINE_CACHE=1
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose -f e2e/docker-compose.yml build --build-arg BUILDKIT_INLINE_CACHE=1
       - name: Push images
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml push
+        if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork }}
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose -f e2e/docker-compose.yml push
       - name: Set commit message for push
         if: github.event_name == 'push'
         run: |
@@ -67,4 +71,4 @@ jobs:
           git log -1 --pretty=%B ${{github.event.pull_request.head.sha}} >> $GITHUB_ENV
           echo 'EOF' >> $GITHUB_ENV
       - name: Run tests
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

.gitignore

@@ -7,3 +7,4 @@ dozzle
 coverage
 .pnpm-debug.log
 .vscode
+coverage.out

.npmrc

@@ -1 +0,0 @@
-shamefully-hoist=true

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:18-alpine as node
+FROM --platform=$BUILDPLATFORM node:19-alpine as node
 
 RUN npm install -g pnpm
 
@@ -22,7 +22,7 @@ COPY locales ./locales
 # Build assets
 RUN pnpm build
 
-FROM --platform=$BUILDPLATFORM golang:1.19.2-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.20.1-alpine AS builder
 
 RUN apk add --no-cache ca-certificates && mkdir /dozzle
 

README.md

@@ -58,7 +58,6 @@ Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         ports:
           - 9999:8080
 
-
 ### Enabling health check
 
 Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
@@ -81,7 +80,6 @@ Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `health
           retries: 5
           start_period: 30s
 
-
 #### Security
 
 You can control the device Dozzle binds to by passing `--addr` parameter. For example,
@@ -98,7 +96,7 @@ this would then only allow you to view containers with a name starting with "foo
 
 #### Authentication
 
-Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`.
+Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`. You can also use [docker secrets](https://docs.docker.com/engine/swarm/secrets/) `--usernamefile` and `--passwordfile`.
 
 #### Changing base URL
 
@@ -119,17 +117,18 @@ If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag             | Env Variable          | Default |
-| ---------------- | --------------------- | ------- |
-| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
-| `--base`         | `DOZZLE_BASE`         | `/`     |
-| `--level`        | `DOZZLE_LEVEL`        | `info`  |
-| n/a              | `DOCKER_API_VERSION`  | not set |
-| `--tailSize`     | `DOZZLE_TAILSIZE`     | `300`   |
-| `--filter`       | `DOZZLE_FILTER`       | `""`    |
-| `--username`     | `DOZZLE_USERNAME`     | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
+| Flag             | Env Variable           | Default |
+| ---------------- | ---------------------- | ------- |
+| `--addr`         | `DOZZLE_ADDR`          | `:8080` |
+| `--base`         | `DOZZLE_BASE`          | `/`     |
+| `--hostname`     | `DOZZLE_HOSTNAME`      | `""`    |
+| `--level`        | `DOZZLE_LEVEL`         | `info`  |
+| `--filter`       | `DOZZLE_FILTER`        | `""`    |
+| `--username`     | `DOZZLE_USERNAME`      | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
+| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
+| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
 
 ## Troubleshooting and FAQs
 
@@ -181,6 +180,28 @@ Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets
 
 </details>
 
+<details>
+ <summary>I installed Dozzle but memory consumption doesn't show up!</summary>
+
+_This is an issue specific to ARM devices_
+
+Dozzle uses the Docker API to gather information about the containers' memory usage. If the memory usage is not showing up, then it is likely that the Docker API is not returning the memory usage.
+
+You can verify this by running `docker info`, and you should see the following:
+
+```
+WARNING: No memory limit support
+WARNING: No swap limit support
+```
+
+In this case, you'll need to add the following line to your `/boot/cmdline.txt` file and reboot your device.
+
+```
+cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
+```
+
+</details>
+
 ## License
 
 [MIT](LICENSE)

analytics/ga.go

@@ -21,7 +21,25 @@ func SendStartEvent(se StartEvent) error {
 		},
 	}
 
-	jsonValue, err := json.Marshal(postBody)
+	return doRequest(postBody)
+}
+
+func SendRequestEvent(re RequestEvent) error {
+	postBody := map[string]interface{}{
+		"client_id": re.ClientId,
+		"events": []map[string]interface{}{
+			{
+				"name":   "request",
+				"params": re,
+			},
+		},
+	}
+
+	return doRequest(postBody)
+}
+
+func doRequest(body map[string]interface{}) error {
+	jsonValue, err := json.Marshal(body)
 	if err != nil {
 		return err
 	}

analytics/types.go

@@ -6,6 +6,12 @@ type StartEvent struct {
 	FilterLength  int    `json:"filterLength"`
 	CustomAddress bool   `json:"customAddress"`
 	CustomBase    bool   `json:"customBase"`
-	TailSize      int    `json:"tailSize"`
 	Protected     bool   `json:"protected"`
+	HasHostname   bool   `json:"hasHostname"`
+}
+
+type RequestEvent struct {
+	ClientId         string `json:"-"`
+	TotalContainers  int    `json:"totalContainers"`
+	RunningContainers int    `json:"runningContainers"`
 }

assets/auto-imports.d.ts

@@ -14,6 +14,7 @@ declare global {
   const arrayEquals: typeof import('./utils/index')['arrayEquals']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const collapseNav: typeof import('./composables/settings')['collapseNav']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -68,6 +69,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -144,6 +147,7 @@ declare global {
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -207,6 +211,7 @@ declare global {
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useLogStream: typeof import('./composables/eventsource')['useLogStream']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
@@ -230,12 +235,14 @@ declare global {
   const useParallax: typeof import('@vueuse/core')['useParallax']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@@ -250,6 +257,7 @@ declare global {
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
@@ -305,9 +313,14 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
+}
 // for vue template auto import
 import { UnwrapRef } from 'vue'
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   interface ComponentCustomProperties {
     readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
     readonly $: UnwrapRef<typeof import('vue/macros')['$']>
@@ -322,6 +335,7 @@ declare module '@vue/runtime-core' {
     readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly collapseNav: UnwrapRef<typeof import('./composables/settings')['collapseNav']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
@@ -376,6 +390,8 @@ declare module '@vue/runtime-core' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -452,6 +468,7 @@ declare module '@vue/runtime-core' {
     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
     readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
@@ -515,6 +532,7 @@ declare module '@vue/runtime-core' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
@@ -538,12 +556,14 @@ declare module '@vue/runtime-core' {
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
     readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
     readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
@@ -558,6 +578,7 @@ declare module '@vue/runtime-core' {
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>

assets/components.d.ts

@@ -13,7 +13,6 @@ declare module '@vue/runtime-core' {
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
-    CpuSparkline: typeof import('./components/StatSparkline.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
@@ -23,6 +22,7 @@ declare module '@vue/runtime-core' {
     LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
     LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
+    LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
     MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
     MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
+    MdiLightLogout: typeof import('~icons/mdi-light/logout')['default']
     MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
     MobileMenu: typeof import('./components/MobileMenu.vue')['default']
     OcticonContainer24: typeof import('~icons/octicon/container24')['default']
@@ -45,6 +46,7 @@ declare module '@vue/runtime-core' {
     SideMenu: typeof import('./components/SideMenu.vue')['default']
     SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
     SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
+    StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }

assets/components/FuzzySearchModal.vue

@@ -105,6 +105,15 @@ function addColumn(container: Container) {
   width: 580px;
 }
 
+@media screen and (max-width: 768px) {
+  .panel {
+    min-height: 200px;
+    width: auto;
+    margin-left: 0.25rem!important;
+    margin-right: 0.25rem!important;
+  }
+}
+
 .running {
   color: var(--primary-color);
 }

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="columns is-1 is-variable">
+  <div class="columns is-1 is-variable is-mobile">
     <div class="column is-narrow" v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
+    <div class="column is-narrow is-flex">
+      <log-level :level="logEntry.level"></log-level>
+    </div>
     <div class="column">
       <ul class="fields" :class="{ expanded }" @click="expanded = !expanded">
         <li v-for="(value, name) in validValues(logEntry.message)">

assets/components/LogViewer/ContainerStat.vue

@@ -1,30 +1,17 @@
 <template>
   <div class="is-size-7 is-uppercase columns is-marginless is-mobile is-vcentered" v-if="container.stat">
-    <div class="column is-narrow has-text-weight-bold">
-      {{ container.state }}
-    </div>
-    <div class="column is-narrow has-text-centered is-relative">
-      <div class="has-border">
-        <stat-sparkline :data="memoryData"></stat-sparkline>
-      </div>
-
-      <div class="has-background-body-color is-top-left">
-        <span class="has-text-weight-light has-spacer">mem</span>
-        <span class="has-text-weight-bold">
-          {{ formatBytes(container.stat.memoryUsage) }}
-        </span>
-      </div>
-    </div>
-
-    <div class="column is-narrow has-text-centered is-relative">
-      <div class="has-border">
-        <stat-sparkline :data="cpuData"></stat-sparkline>
-      </div>
-      <div class="has-background-body-color is-top-left">
-        <span class="has-text-weight-light has-spacer">load</span>
-        <span class="has-text-weight-bold"> {{ container.stat.cpu }}% </span>
-      </div>
-    </div>
+    <stat-monitor
+      class="column is-narrow"
+      :data="memoryData"
+      label="mem"
+      :stat-value="formatBytes(container.stat.memoryUsage)"
+    ></stat-monitor>
+    <stat-monitor
+      class="column is-narrow"
+      :data="cpuData"
+      label="load"
+      :stat-value="container.stat.cpu + '%'"
+    ></stat-monitor>
   </div>
 </template>
 
@@ -38,7 +25,12 @@ const cpuData = computedWithControl(
   () => container.value.getLastStat(),
   () => {
     const history = container.value.getStatHistory();
-    return history.map((stat, i) => ({ x: history.length - i, y: stat.snapshot.cpu }));
+    const points: Point<unknown>[] = history.map((stat, i) => ({
+      x: i,
+      y: stat.snapshot.cpu,
+      value: stat.snapshot.cpu + "%",
+    }));
+    return points;
   }
 );
 
@@ -46,18 +38,17 @@ const memoryData = computedWithControl(
   () => container.value.getLastStat(),
   () => {
     const history = container.value.getStatHistory();
-    return history.map((stat, i) => ({ x: history.length - i, y: stat.snapshot.memory }));
+    const points: Point<string>[] = history.map((stat, i) => ({
+      x: i,
+      y: stat.snapshot.memory,
+      value: formatBytes(stat.snapshot.memoryUsage),
+    }));
+    return points;
   }
 );
 </script>
 
 <style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
-  }
-}
-
 .has-border {
   border: 1px solid var(--primary-color);
   border-radius: 3px;

assets/components/LogViewer/LogContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template #header v-if="showTitle">
-      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile">
+      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile has-boxshadow">
         <div class="column is-clipped is-paddingless">
           <container-title @close="$emit('close')" />
         </div>

assets/components/LogViewer/LogDate.vue

@@ -13,33 +13,7 @@ defineProps<{
   padding-right: 5px;
   border-radius: 3px;
   white-space: nowrap;
-}
-
-@media (prefers-color-scheme: dark) {
-  .date {
-    background-color: #262626;
-    color: #258ccd;
-  }
-}
-
-[data-theme="dark"] {
-  .date {
-    background-color: #262626;
-    color: #258ccd;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  .date {
-    background-color: #f0f0f0;
-    color: #009900;
-  }
-}
-
-[data-theme="light"] {
-  .date {
-    background-color: #f0f0f0;
-    color: #009900;
-  }
+  background-color: var(--scheme-main-ter);
+  color: #258ccd;
 }
 </style>

assets/components/LogViewer/LogLevel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="level" :data-position="position"></div>
+</template>
+<script lang="ts" setup>
+import { Position } from "@/models/LogEntry";
+
+defineProps<{
+  level?: string;
+  position?: Position;
+}>();
+</script>
+
+<style lang="scss" scoped>
+div {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  border-radius: 0.5em;
+  align-self: auto;
+  margin-top: 0.4em;
+
+  &[data-position="start"] {
+    border-radius: 0.5em 0.5em 0 0;
+    height: 70%;
+    margin-bottom: -0.2em;
+    margin-top: auto;
+    align-self: flex-end;
+  }
+
+  &[data-position="middle"] {
+    border-radius: 0;
+    height: auto;
+    margin: -0.2em 0;
+    align-self: auto;
+  }
+
+  &[data-position="end"] {
+    border-radius: 0 0 0.5em 0.5em;
+    height: 70%;
+    margin-top: -0.2em;
+    align-self: flex-start;
+  }
+
+  &.debug,
+  &.trace {
+    background-color: #9c27b0;
+  }
+
+  &.info {
+    background-color: #00b5ad;
+  }
+
+  &.error,
+  &.fatal {
+    background-color: #f44336;
+  }
+
+  &.warn {
+    background-color: #ff9800;
+  }
+}
+</style>

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="columns is-1 is-variable">
+  <div class="columns is-1 is-variable is-mobile">
     <div class="column is-narrow" v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
+    <div class="column is-narrow is-flex">
+      <log-level :level="logEntry.level" :position="logEntry.position"></log-level>
+    </div>
     <div class="text column" v-html="colorize(logEntry.message)"></div>
   </div>
 </template>

assets/components/LogViewer/StatMonitor.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
+    <div class="has-border has-boxshadow">
+      <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
+    </div>
+    <div class="has-background-body-color is-top-left">
+      <span class="has-text-weight-light">{{ label }}</span>
+      <span class="has-text-weight-bold">
+        {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { data, label, statValue } = defineProps<{ data: Point<unknown>[]; label: string; statValue: string | number }>();
+
+let selectedPoint: Point<unknown> = $ref();
+
+function onSelectedPoint(point: Point<unknown>) {
+  selectedPoint = point;
+}
+
+let mouseOver = $ref(false);
+</script>
+
+<style lang="scss" scoped>
+.has-border {
+  border: 1px solid var(--primary-color);
+  border-radius: 3px;
+  padding: 1px 1px 0 1px;
+  display: flex;
+  overflow: hidden;
+  padding-top: 0.25em;
+}
+
+.has-background-body-color {
+  background-color: var(--body-background-color);
+}
+
+.host:hover span {
+  color: var(--secondary-color);
+}
+
+.is-top-left {
+  position: absolute;
+  top: 0;
+  left: 0.75em;
+}
+</style>

assets/components/LogViewer/StatSparkline.vue

@@ -1,6 +1,7 @@
 <template>
-  <svg :width="width" :height="height">
+  <svg :width="width" :height="height" @mousemove="onMove">
     <path :d="path" class="area" />
+    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="line" />
   </svg>
 </template>
 
@@ -10,12 +11,16 @@ import { scaleLinear } from "d3-scale";
 import { area, curveStep } from "d3-shape";
 
 const d3 = { extent, scaleLinear, area, curveStep };
-const { data, width = 150, height = 30 } = defineProps<{ data: Point[]; width?: number; height?: number }>();
-const x = d3.scaleLinear().range([0, width]);
+const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
+const x = d3.scaleLinear().range([width, 0]);
 const y = d3.scaleLinear().range([height, 0]);
 
+const emit = defineEmits<{
+  (event: "selected-point", value: Point<unknown>): void;
+}>();
+
 const shape = d3
-  .area<Point>()
+  .area<Point<unknown>>()
   .curve(d3.curveStep)
   .x((d) => x(d.x))
   .y0(height)
@@ -24,12 +29,34 @@ const shape = d3
 const path = computed(() => {
   x.domain(d3.extent(data, (d) => d.x) as [number, number]);
   y.domain(d3.extent(data, (d) => d.y) as [number, number]);
+
   return shape(data) ?? "";
 });
+
+let lineX = $ref(0);
+
+function onMove(e: MouseEvent) {
+  const { offsetX } = e;
+  const xValue = x.invert(offsetX);
+  const index = Math.round(xValue);
+  lineX = x(index);
+  const point = data[index];
+  emit("selected-point", point);
+}
 </script>
 
 <style scoped>
 :deep(.area) {
   fill: var(--primary-color);
 }
+
+:deep(.line) {
+  stroke: var(--secondary-color);
+  stroke-width: 2;
+  display: none;
+}
+
+svg:hover :deep(.line) {
+  display: unset;
+}
 </style>

assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap

@@ -1,200 +1,231 @@
 // Vitest Snapshot v1
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                       <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                     </svg></div>
                 </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
                 </div>
               </div>
             </a></div>
         </div>
       </div>
     </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                       <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                     </svg></div>
                 </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
                 </div>
               </div>
             </a></div>
         </div>
       </div>
     </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                       <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                     </svg></div>
                 </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
                 </div>
               </div>
             </a></div>
         </div>
       </div>
     </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">This is a message.</div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">This is a message.</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                       <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                     </svg></div>
                 </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
                 </div>
               </div>
             </a></div>
         </div>
       </div>
     </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"2\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#2\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                       <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                     </svg></div>
                 </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
                 </div>
               </div>
             </a></div>
         </div>
       </div>
     </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><mark>test</mark> bar</div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><mark>test</mark> bar</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                       <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                     </svg></div>
                 </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
                 </div>
               </div>
             </a></div>
         </div>
       </div>
     </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > renders correctly 1`] = `
-"<div class=\\"infinte-loader\\" data-v-1cd63c6e=\\"\\">
-  <div class=\\"spinner\\" data-v-1cd63c6e=\\"\\" style=\\"display: none;\\">
-    <div class=\\"bounce1\\" data-v-1cd63c6e=\\"\\"></div>
-    <div class=\\"bounce2\\" data-v-1cd63c6e=\\"\\"></div>
-    <div class=\\"bounce3\\" data-v-1cd63c6e=\\"\\"></div>
+"<div data-v-1cd63c6e=\\"\\" class=\\"infinte-loader\\">
+  <div data-v-1cd63c6e=\\"\\" class=\\"spinner\\" style=\\"display: none;\\">
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce1\\"></div>
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce2\\"></div>
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce3\\"></div>
   </div>
 </div>
-<ul class=\\"events medium\\" data-v-2e92daca=\\"\\"></ul>"
+
+<ul data-v-2e92daca=\\"\\" class=\\"events medium\\"></ul>"
 `;
 
 exports[`<LogEventSource /> > should parse messages 1`] = `
@@ -202,5 +233,7 @@ SimpleLogEntry {
   "_message": "This is a message.",
   "date": 2019-06-12T10:55:42.459Z,
   "id": 1,
+  "level": undefined,
+  "position": undefined,
 }
 `;

assets/components/MobileMenu.vue

@@ -24,6 +24,36 @@
       </div>
     </div>
 
+    <div class="menu-label level is-mobile is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <div class="level-item has-text-centered">
+        <div>
+          <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
+            <span class="icon">
+              <mdi-light-magnify />
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
+            <span class="icon">
+              <mdi-light-cog />
+            </span>
+          </router-link>
+        </div>
+      </div>
+      <div class="level-item has-text-centered" v-if="secured">
+        <div>
+          <a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
+            <span class="icon">
+              <mdi-light-logout />
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
@@ -42,6 +72,7 @@
 </template>
 
 <script lang="ts" setup>
+const { base, secured } = config;
 const store = useContainerStore();
 const route = useRoute();
 const { visibleContainers, allContainersById } = storeToRefs(store);
@@ -63,6 +94,10 @@ aside {
   max-height: 100vh;
   overflow: auto;
 
+  .level.is-hidden-mobile.is-active {
+    display: flex !important;
+  }
+
   .menu-label {
     margin-top: 1em;
   }

assets/components/RelativeTime.vue

@@ -1,9 +1,12 @@
 <template>
-  <time :datetime="date.toISOString()">{{ format(date) }}</time>
+  <div>
+    <time :datetime="date.toISOString()" class="is-hidden-mobile">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()">{{ timeStr }}</time>
+  </div>
 </template>
 
 <script lang="ts" setup>
-defineProps<{
+const props = defineProps<{
   date: Date;
 }>();
 
@@ -13,9 +16,6 @@ const timeFormatter = $computed(
   () => new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour })
 );
 
-function format(date: Date) {
-  const dateStr = dateFormatter.format(date);
-  const timeStr = timeFormatter.format(date);
-  return `${dateStr} ${timeStr}`;
-}
+const dateStr = $computed(() => dateFormatter.format(props.date));
+const timeStr = $computed(() => timeFormatter.format(props.date));
 </script>

assets/components/ScrollableView.vue

@@ -16,7 +16,12 @@
 
     <div class="is-scrollbar-notification">
       <transition name="fade">
-        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom()" v-show="paused">
+        <button
+          class="button has-boxshadow"
+          :class="hasMore ? 'has-more' : ''"
+          @click="scrollToBottom()"
+          v-show="paused"
+        >
           <mdi-light-chevron-double-down />
         </button>
       </transition>
@@ -109,18 +114,18 @@ section {
     button {
       position: fixed;
       bottom: 30px;
-      background-color: var(--secondary-color);
-      transition: background-color 1s ease-out;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      background-color: var(--primary-color);
+      transition: background-color 0.24s ease-out;
       border: none !important;
-      color: #222;
+      color: #eee;
 
       &.has-more {
-        background-color: var(--primary-color);
+        background-color: var(--secondary-color);
         animation-name: bounce;
         animation-duration: 1000ms;
         animation-fill-mode: both;
-        color: #fff;
+
+        color: #222;
       }
     }
   }

assets/components/SideMenu.vue

@@ -2,26 +2,40 @@
   <aside>
     <div class="columns is-marginless">
       <div class="column is-paddingless">
-        <router-link :to="{ name: 'index' }">
-          <svg class="logo">
-            <use href="#logo"></use>
-          </svg>
-        </router-link>
+        <h1>
+          <router-link :to="{ name: 'index' }">
+            <svg class="logo">
+              <use href="#logo"></use>
+            </svg>
+          </router-link>
+          <small class="subtitle is-6 is-block mb-4" v-if="hostname">
+            {{ hostname }}
+          </small>
+        </h1>
       </div>
-      <div class="column is-narrow has-text-right px-1">
-        <button class="button is-rounded" @click="$emit('search')" title="$t('tooltip.search')">
+    </div>
+    <div class="columns is-marginless">
+      <div class="column is-narrow py-0 pl-0 pr-1">
+        <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
           <span class="icon">
             <mdi-light-magnify />
           </span>
         </button>
       </div>
-      <div class="column is-narrow has-text-right px-0">
-        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded">
+      <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
+        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-small">
           <span class="icon">
             <mdi-light-cog />
           </span>
         </router-link>
       </div>
+      <div class="column is-narrow py-0 px-0" v-if="secured">
+        <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
+          <span class="icon">
+            <mdi-light-logout />
+          </span>
+        </a>
+      </div>
     </div>
     <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" v-if="ready">
@@ -40,7 +54,7 @@
                 class="icon is-small"
                 @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
-                title="$t('tooltip.pin-column')"
+                :title="$t('tooltip.pin-column')"
               >
                 <cil-columns />
               </span>
@@ -56,8 +70,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { Container } from "@/types/Container";
+import { Container } from "@/models/Container";
 
+const { base, secured, hostname } = config;
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);

assets/composables/eventsource.ts

@@ -37,7 +37,7 @@ export function useLogStream(container: ComputedRef<Container>) {
       } else {
         messages.push(...buffer);
         buffer = [];
-        messages.splice(0, messages.length - config.maxLogs);
+        messages = messages.slice(-config.maxLogs);
       }
     } else {
       messages.push(...buffer);

assets/composables/settings.ts

@@ -10,6 +10,7 @@ export const DEFAULT_SETTINGS: {
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
   softWrap: boolean;
+  collapseNav: boolean;
 } = {
   search: true,
   size: "medium",
@@ -20,6 +21,7 @@ export const DEFAULT_SETTINGS: {
   lightTheme: "auto",
   hourStyle: "auto",
   softWrap: true,
+  collapseNav: false,
 };
 
 const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
@@ -69,7 +71,13 @@ const softWrap = computed({
   set: (value) => (settings.value.softWrap = value),
 });
 
+const collapseNav = computed({
+  get: () => settings.value.collapseNav,
+  set: (value) => (settings.value.collapseNav = value),
+});
+
 export {
+  collapseNav,
   softWrap,
   hourStyle,
   lightTheme,

assets/composables/title.ts

@@ -1,5 +1,6 @@
+const { hostname } = config;
 let subtitle = $ref("");
-const title = $computed(() => `${subtitle} - Dozzle`);
+const title = $computed(() => `${subtitle} - Dozzle` + (hostname ? ` @ ${hostname}` : ""));
 
 useTitle($$(title));
 

assets/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <main v-if="!authorizationNeeded">
-    <mobile-menu v-if="isMobile"></mobile-menu>
+    <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
     <splitpanes @resized="onResized($event)">
       <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
         <side-menu @search="showFuzzySearch"></side-menu>
@@ -25,8 +25,8 @@
       </pane>
     </splitpanes>
     <button
-      @click="collapseNav = !collapseNav"
-      class="button is-rounded"
+      @click="collapse"
+      class="button is-small is-rounded"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
       v-if="!isMobile"
@@ -47,7 +47,6 @@ import { Splitpanes, Pane } from "splitpanes";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
 
-const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
 
@@ -74,6 +73,9 @@ function showFuzzySearch() {
     active: true,
   });
 }
+function collapse() {
+  collapseNav.value = !collapseNav.value;
+}
 function onResized(e: any) {
   if (e.length == 2) {
     menuWidth.value = e[0].size;
@@ -112,7 +114,8 @@ function onResized(e: any) {
     left: -40px;
     width: 60px;
     padding-left: 40px;
-    background: rgba(0, 0, 0, 0.95);
+    color: var(--text-strong-color);
+    background: var(--scheme-main);
 
     &:hover {
       left: -25px;

assets/models/LogEntry.ts

@@ -11,16 +11,18 @@ export interface HasComponent {
 
 export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue>;
 export type JSONObject = { [x: string]: JSONValue };
-
+export type Position = "start" | "end" | "middle" | undefined;
 export interface LogEvent {
   readonly m: string | JSONObject;
   readonly ts: number;
   readonly id: number;
+  readonly l: string;
+  readonly p: Position;
 }
 
 export abstract class LogEntry<T extends string | JSONObject> implements HasComponent {
   protected readonly _message: T;
-  constructor(message: T, public readonly id: number, public readonly date: Date) {
+  constructor(message: T, public readonly id: number, public readonly date: Date, public readonly level?: string) {
     this._message = message;
   }
 
@@ -32,6 +34,15 @@ export abstract class LogEntry<T extends string | JSONObject> implements HasComp
 }
 
 export class SimpleLogEntry extends LogEntry<string> {
+  constructor(
+    message: string,
+    id: number,
+    date: Date,
+    public readonly level: string,
+    public readonly position: Position
+  ) {
+    super(message, id, date, level);
+  }
   getComponent(): Component {
     return SimpleLogItem;
   }
@@ -40,8 +51,14 @@ export class SimpleLogEntry extends LogEntry<string> {
 export class ComplexLogEntry extends LogEntry<JSONObject> {
   private readonly filteredMessage: ComputedRef<JSONObject>;
 
-  constructor(message: JSONObject, id: number, date: Date, visibleKeys?: Ref<string[][]>) {
-    super(message, id, date);
+  constructor(
+    message: JSONObject,
+    id: number,
+    date: Date,
+    public readonly level: string,
+    visibleKeys?: Ref<string[][]>
+  ) {
+    super(message, id, date, level);
     if (visibleKeys) {
       this.filteredMessage = computed(() => {
         if (!visibleKeys.value.length) {
@@ -67,13 +84,13 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
   }
 
   static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<string[][]>): ComplexLogEntry {
-    return new ComplexLogEntry(event._message, event.id, event.date, visibleKeys);
+    return new ComplexLogEntry(event._message, event.id, event.date, event.level, visibleKeys);
   }
 }
 
 export class DockerEventLogEntry extends LogEntry<string> {
   constructor(message: string, date: Date, public readonly event: string) {
-    super(message, date.getTime(), date);
+    super(message, date.getTime(), date, "info");
   }
   getComponent(): Component {
     return DockerEventLogItem;
@@ -90,7 +107,7 @@ export class SkippedLogsEntry extends LogEntry<string> {
     public readonly firstSkipped: LogEntry<string | JSONObject>,
     lastSkipped: LogEntry<string | JSONObject>
   ) {
-    super("", date.getTime(), date);
+    super("", date.getTime(), date, "info");
     this._totalSkipped = totalSkipped;
     this.lastSkipped = lastSkipped;
   }
@@ -114,8 +131,8 @@ export class SkippedLogsEntry extends LogEntry<string> {
 
 export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
   if (typeof event.m === "string") {
-    return new SimpleLogEntry(event.m, event.id, new Date(event.ts));
+    return new SimpleLogEntry(event.m, event.id, new Date(event.ts), event.l, event.p);
   } else {
-    return new ComplexLogEntry(event.m, event.id, new Date(event.ts));
+    return new ComplexLogEntry(event.m, event.id, new Date(event.ts), event.l);
   }
 }

assets/pages/Index.vue

@@ -1,170 +0,0 @@
-<template>
-  <div>
-    <section class="hero is-small mt-4">
-      <div class="hero-body">
-        <div class="container">
-          <div class="columns">
-            <div class="column is-narrow" v-if="secured">
-              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="level section">
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ containers.length }}</p>
-          <p class="heading">{{ $t("label.total-containers") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ runningContainers.length }}</p>
-          <p class="heading">{{ $t("label.running") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title" data-ci-skip>{{ totalCpu }}%</p>
-          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
-          <p class="heading">{{ $t("label.total-mem-usage") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ version }}</p>
-          <p class="heading">{{ $t("label.dozzle-version") }}</p>
-        </div>
-      </div>
-    </section>
-
-    <section class="columns is-centered section is-marginless">
-      <div class="column is-4">
-        <div class="panel">
-          <p class="panel-heading">{{ $t("label.containers") }}</p>
-          <div class="panel-block">
-            <p class="control has-icons-left">
-              <input
-                class="input"
-                type="text"
-                :placeholder="$t('placeholder.search-containers')"
-                v-model="query"
-                @keyup.esc="query = ''"
-                @keyup.enter="onEnter()"
-              />
-              <span class="icon is-left">
-                <search-icon />
-              </span>
-            </p>
-          </div>
-          <p class="panel-tabs" v-if="query === ''">
-            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">{{ $t("label.running") }}</a>
-            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">{{ $t("label.all") }}</a>
-          </p>
-          <router-link
-            :to="{ name: 'container-id', params: { id: item.id } }"
-            v-for="item in data.slice(0, 10)"
-            :key="item.id"
-            class="panel-block"
-          >
-            <span class="name">{{ item.name }}</span>
-
-            <div class="subtitle is-7 status">
-              <past-time :date="new Date(item.created * 1000)"></past-time>
-            </div>
-          </router-link>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import SearchIcon from "~icons/mdi-light/magnify";
-import { useFuse } from "@vueuse/integrations/useFuse";
-
-const { base, version, secured } = config;
-const containerStore = useContainerStore();
-const { containers } = storeToRefs(containerStore);
-const router = useRouter();
-
-const sort = $ref("running");
-const query = ref("");
-
-const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => b.created - a.created));
-const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
-
-const { results } = useFuse(query, containers, {
-  fuseOptions: { keys: ["name"] },
-  matchAllWhenSearchEmpty: false,
-});
-const data = computed(() => {
-  if (results.value.length) {
-    return results.value.map(({ item }) => item);
-  }
-  switch (sort) {
-    case "all":
-      return mostRecentContainers;
-    case "running":
-      return runningContainers;
-    default:
-      throw `Invalid sort order: ${sort}`;
-  }
-});
-
-let totalCpu = $ref(0);
-useIntervalFn(
-  () => {
-    totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
-  },
-  1000,
-  { immediate: true }
-);
-
-let totalMem = $ref(0);
-useIntervalFn(
-  () => {
-    totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
-  },
-  1000,
-  { immediate: true }
-);
-
-function onEnter() {
-  if (data.value.length > 0) {
-    const item = data.value[0];
-    router.push({ name: "container-id", params: { id: item.id } });
-  }
-}
-</script>
-<style lang="scss" scoped>
-.panel {
-  border: 1px solid var(--border-color);
-  .panel-block,
-  .panel-tabs {
-    border-color: var(--border-color);
-    .is-active {
-      border-color: var(--border-hover-color);
-    }
-    .name {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-    .status {
-      margin-left: auto;
-      white-space: nowrap;
-    }
-  }
-}
-
-.icon {
-  padding: 10px 3px;
-}
-</style>

assets/pages/Login.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="hero is-halfheight">
-    <div class="hero-body">
-      <div class="container">
-        <section class="columns is-centered section">
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-content">
-                <form action="" method="post" @submit.prevent="onLogin" ref="form">
-                  <div class="field">
-                    <label class="label">{{ $t("label.username") }}</label>
-                    <div class="control">
-                      <input
-                        class="input"
-                        type="text"
-                        name="username"
-                        autocomplete="username"
-                        v-model="username"
-                        autofocus
-                      />
-                    </div>
-                  </div>
-
-                  <div class="field">
-                    <label class="label">{{ $t("label.password") }}</label>
-                    <div class="control">
-                      <input
-                        class="input"
-                        type="password"
-                        name="password"
-                        autocomplete="current-password"
-                        v-model="password"
-                      />
-                    </div>
-                    <p class="help is-danger" v-if="error">{{ $t("error.invalid-auth") }}</p>
-                  </div>
-                  <div class="field is-grouped is-grouped-centered mt-5">
-                    <p class="control">
-                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
-                    </p>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { t } = useI18n();
-
-setTitle(t("title.login"));
-
-let error = $ref(false);
-let username = $ref("");
-let password = $ref("");
-let form: HTMLFormElement = $ref();
-
-async function onLogin() {
-  const response = await fetch(`${config.base}/api/validateCredentials`, {
-    body: new FormData(form),
-    method: "post",
-  });
-
-  if (response.status == 200) {
-    error = false;
-    window.location.href = `${config.base}/`;
-  } else {
-    error = true;
-  }
-}
-</script>
-<route lang="yaml">
-meta:
-  layout: splash
-</route>

assets/pages/Settings.vue

@@ -1,203 +0,0 @@
-<template>
-  <div>
-    <section class="section">
-      <div class="has-underline">
-        <h2 class="title is-4">{{ $t("settings.about") }}</h2>
-      </div>
-
-      <div>
-        <span v-html="$t('settings.using-version', { version: currentVersion })"></span>
-        <div
-          v-if="hasUpdate"
-          v-html="$t('settings.update-available', { nextVersion: nextRelease.name, href: nextRelease.html_url })"
-        ></div>
-      </div>
-    </section>
-
-    <section class="section">
-      <div class="has-underline">
-        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
-      </div>
-
-      <div class="item">
-        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
-      </div>
-      <div class="item">
-        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
-      </div>
-
-      <div class="item">
-        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
-      </div>
-
-      <div class="item">
-        <div class="columns is-vcentered">
-          <div class="column is-narrow">
-            <o-field>
-              <o-dropdown v-model="hourStyle" aria-role="list">
-                <template #trigger>
-                  <o-button variant="primary" type="button">
-                    <span class="is-capitalized">{{ hourStyle }}</span>
-                    <span class="icon">
-                      <carbon-caret-down />
-                    </span>
-                  </o-button>
-                </template>
-
-                <o-dropdown-item :value="value" aria-role="listitem" v-for="value in ['auto', '12', '24']" :key="value">
-                  <span class="is-capitalized">{{ value }}</span>
-                </o-dropdown-item>
-              </o-dropdown>
-            </o-field>
-          </div>
-          <div class="column">
-            {{ $t("settings.12-24-format") }}
-          </div>
-        </div>
-      </div>
-      <div class="item">
-        <div class="columns is-vcentered">
-          <div class="column is-narrow">
-            <o-field>
-              <o-dropdown v-model="size" aria-role="list">
-                <template #trigger>
-                  <o-button variant="primary" type="button">
-                    <span class="is-capitalized">{{ size }}</span>
-                    <span class="icon">
-                      <carbon-caret-down />
-                    </span>
-                  </o-button>
-                </template>
-
-                <o-dropdown-item
-                  :value="value"
-                  aria-role="listitem"
-                  v-for="value in ['small', 'medium', 'large']"
-                  :key="value"
-                >
-                  <span class="is-capitalized">{{ value }}</span>
-                </o-dropdown-item>
-              </o-dropdown>
-            </o-field>
-          </div>
-          <div class="column">{{ $t("settings.font-size") }}</div>
-        </div>
-      </div>
-      <div class="item">
-        <div class="columns is-vcentered">
-          <div class="column is-narrow">
-            <o-field>
-              <o-dropdown v-model="lightTheme" aria-role="list">
-                <template #trigger>
-                  <o-button variant="primary" type="button">
-                    <span class="is-capitalized">{{ lightTheme }}</span>
-                    <span class="icon">
-                      <carbon-caret-down />
-                    </span>
-                  </o-button>
-                </template>
-
-                <o-dropdown-item
-                  :value="value"
-                  aria-role="listitem"
-                  v-for="value in ['auto', 'dark', 'light']"
-                  :key="value"
-                >
-                  <span class="is-capitalized">{{ value }}</span>
-                </o-dropdown-item>
-              </o-dropdown>
-            </o-field>
-          </div>
-          <div class="column">{{ $t("settings.color-scheme") }}</div>
-        </div>
-      </div>
-    </section>
-    <section class="section">
-      <div class="has-underline">
-        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
-      </div>
-
-      <div class="item">
-        <o-switch v-model="search">
-          <span v-html="$t('settings.search')"></span>
-        </o-switch>
-      </div>
-
-      <div class="item">
-        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import gt from "semver/functions/gt";
-import {
-  search,
-  lightTheme,
-  smallerScrollbars,
-  showTimestamp,
-  hourStyle,
-  showAllContainers,
-  size,
-  softWrap,
-} from "@/composables/settings";
-
-const { t } = useI18n();
-
-setTitle(t("title.settings"));
-
-const currentVersion = $ref(config.version);
-let nextRelease = $ref({ html_url: "", name: "" });
-let hasUpdate = $ref(false);
-
-async function fetchNextRelease() {
-  if (!["dev", "master"].includes(currentVersion)) {
-    const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
-    if (response.ok) {
-      const release = await response.json();
-      hasUpdate = gt(release.tag_name, currentVersion);
-      nextRelease = release;
-    }
-  } else {
-    hasUpdate = true;
-    nextRelease = {
-      html_url: "",
-      name: "master",
-    };
-  }
-}
-
-fetchNextRelease();
-</script>
-<style lang="scss" scoped>
-.title {
-  color: var(--title-color);
-}
-
-a.next-release {
-  text-decoration: underline;
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.section {
-  padding: 1rem 1.5rem;
-}
-
-.has-underline {
-  border-bottom: 1px solid var(--border-color);
-  padding: 1em 0px;
-  margin-bottom: 1em;
-}
-
-.item {
-  padding: 1em 0;
-}
-
-code {
-  border-radius: 4px;
-  background-color: #444;
-}
-</style>

assets/pages/Show.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-const router = useRouter();
-const route = useRoute();
-
-const store = useContainerStore();
-const { visibleContainers } = storeToRefs(store);
-
-watch(visibleContainers, (newValue) => {
-  if (newValue) {
-    if (route.query.name) {
-      const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
-      if (container) {
-        router.push({ name: "container-id", params: { id: container.id } });
-      } else {
-        console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
-        router.push({ name: "index" });
-      }
-    } else {
-      console.error(`Expection query parameter name to be set. Redirecting to /`);
-      router.push({ name: "index" });
-    }
-  }
-});
-</script>
-<template></template>

assets/pages/index.vue

@@ -1,17 +1,6 @@
 <template>
   <div>
-    <section class="hero is-small mt-4">
-      <div class="hero-body">
-        <div class="container">
-          <div class="columns">
-            <div class="column is-narrow" v-if="secured">
-              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="level section">
+    <section class="level section pb-0-is-mobile">
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
@@ -44,8 +33,8 @@
       </div>
     </section>
 
-    <section class="columns is-centered section is-marginless">
-      <div class="column is-4">
+    <section class="columns is-centered section is-marginless pt-0-is-mobile">
+      <div class="column is-12-mobile is-6-tablet is-5-desktop is-4-fullhd">
         <div class="panel">
           <p class="panel-heading">{{ $t("label.containers") }}</p>
           <div class="panel-block">
@@ -89,7 +78,7 @@
 import SearchIcon from "~icons/mdi-light/magnify";
 import { useFuse } from "@vueuse/integrations/useFuse";
 
-const { base, version, secured } = config;
+const { version } = config;
 const containerStore = useContainerStore();
 const { containers } = storeToRefs(containerStore);
 const router = useRouter();
@@ -100,10 +89,22 @@ const query = ref("");
 const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => b.created - a.created));
 const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
 
-const { results } = useFuse(query, containers, {
+const list = computed(() => {
+  return containers.value.map(({ id, created, name, state }) => {
+    return {
+      id,
+      created,
+      name,
+      state,
+    };
+  });
+});
+
+const { results } = useFuse(query, list, {
   fuseOptions: { keys: ["name"] },
   matchAllWhenSearchEmpty: false,
 });
+
 const data = computed(() => {
   if (results.value.length) {
     return results.value.map(({ item }) => item);
@@ -164,6 +165,16 @@ function onEnter() {
   }
 }
 
+@media screen and (max-width: 768px) {
+  .pb-0-is-mobile {
+    padding-bottom: 0 !important;
+  }
+
+  .pt-0-is-mobile {
+    padding-top: 0 !important;
+  }
+}
+
 .icon {
   padding: 10px 3px;
 }

assets/stores/config.ts

@@ -6,6 +6,7 @@ interface Config {
   authorizationNeeded: boolean | "false" | "true";
   secured: boolean | "false" | "true";
   maxLogs: number;
+  hostname: string;
 }
 
 const pageConfig = JSON.parse(text);
@@ -20,6 +21,7 @@ if (config.version == "{{ .Version }}") {
   config.base = "";
   config.authorizationNeeded = false;
   config.secured = false;
+  config.hostname = "localhost";
 } else {
   config.version = config.version.replace(/^v/, "");
   config.authorizationNeeded = config.authorizationNeeded === "true";

assets/styles.scss

@@ -75,10 +75,10 @@ $light-toolbar-color: rgba($grey-darker, 0.7);
 
   --border-color: #{$grey-lighter};
   --border-hover-color: var(--secondary-color);
-  --logo-color: #{$grey-darker};
+  --logo-color: var(--secondary-color);
 
   --primary-color: #{$turquoise};
-  --secondary-color: #d8f0ca;
+  --secondary-color: rgb(249 115 22);
 
   --body-background-color: #{$white-bis};
   --action-toolbar-background-color: #{$light-toolbar-color};
@@ -159,6 +159,12 @@ html.has-custom-scrollbars {
   }
 }
 
+@media screen and (max-device-width: 480px) {
+  body {
+    -webkit-text-size-adjust: 100%;
+  }
+}
+
 .splitpanes__splitter {
   z-index: 99;
 }
@@ -177,6 +183,14 @@ html.has-custom-scrollbars {
   display: contents;
 }
 
+.has-dropshadow {
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+}
+
+.has-boxshadow {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
 mark {
   border-radius: 2px;
   background-color: var(--secondary-color);
@@ -192,3 +206,8 @@ mark {
     transform: scale(1.05);
   }
 }
+
+.button.is-rounded:hover {
+  color: var(--text-strong-color);
+  background: var(--scheme-main-ter);
+}

assets/types/Point.d.ts

@@ -1 +1 @@
-type Point = { x: number; y: number };
+type Point<T> = { x: number; y: number; value?: T };

docker/client.go

@@ -35,7 +35,7 @@ type dockerProxy interface {
 type Client interface {
 	ListContainers() ([]Container, error)
 	FindContainer(string) (Container, error)
-	ContainerLogs(context.Context, string, int, string) (io.ReadCloser, error)
+	ContainerLogs(context.Context, string, string) (io.ReadCloser, error)
 	Events(context.Context) (<-chan ContainerEvent, <-chan error)
 	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) (io.ReadCloser, error)
 	ContainerStats(context.Context, string, chan<- ContainerStat) error
@@ -169,7 +169,7 @@ func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan
 	return nil
 }
 
-func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int, since string) (io.ReadCloser, error) {
+func (d *dockerClient) ContainerLogs(ctx context.Context, id string, since string) (io.ReadCloser, error) {
 	log.WithField("id", id).WithField("since", since).Debug("streaming logs for container")
 
 	if since != "" {
@@ -184,7 +184,7 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 		ShowStdout: true,
 		ShowStderr: true,
 		Follow:     true,
-		Tail:       strconv.Itoa(tailSize),
+		Tail:       "300",
 		Timestamps: true,
 		Since:      since,
 	}

docker/client_test.go

@@ -6,7 +6,7 @@ import (
 	"encoding/binary"
 	"errors"
 	"io"
-	"io/ioutil"
+
 	"strings"
 	"testing"
 
@@ -125,7 +125,7 @@ func Test_dockerClient_ContainerLogs_happy(t *testing.T) {
 	binary.BigEndian.PutUint32(b[4:], uint32(len(expected)))
 	b = append(b, []byte(expected)...)
 
-	reader := ioutil.NopCloser(bytes.NewReader(b))
+	reader := io.NopCloser(bytes.NewReader(b))
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true, Since: "since"}
 	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
 
@@ -133,9 +133,9 @@ func Test_dockerClient_ContainerLogs_happy(t *testing.T) {
 	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
 
 	client := &dockerClient{proxy, filters.NewArgs()}
-	logReader, _ := client.ContainerLogs(context.Background(), id, 300, "since")
+	logReader, _ := client.ContainerLogs(context.Background(), id, "since")
 
-	actual, _ := ioutil.ReadAll(logReader)
+	actual, _ := io.ReadAll(logReader)
 	assert.Equal(t, expected, string(actual), "message doesn't match expected")
 	proxy.AssertExpectations(t)
 }
@@ -146,7 +146,7 @@ func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
 	proxy := new(mockedProxy)
 	expected := "INFO Testing logs..."
 
-	reader := ioutil.NopCloser(strings.NewReader(expected))
+	reader := io.NopCloser(strings.NewReader(expected))
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
 	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
 
@@ -154,9 +154,9 @@ func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
 	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
 
 	client := &dockerClient{proxy, filters.NewArgs()}
-	logReader, _ := client.ContainerLogs(context.Background(), id, 300, "")
+	logReader, _ := client.ContainerLogs(context.Background(), id, "")
 
-	actual, _ := ioutil.ReadAll(logReader)
+	actual, _ := io.ReadAll(logReader)
 	assert.Equal(t, expected, string(actual), "message doesn't match expected")
 
 	proxy.AssertExpectations(t)
@@ -170,7 +170,7 @@ func Test_dockerClient_ContainerLogs_error(t *testing.T) {
 
 	client := &dockerClient{proxy, filters.NewArgs()}
 
-	reader, err := client.ContainerLogs(context.Background(), id, 300, "")
+	reader, err := client.ContainerLogs(context.Background(), id, "")
 
 	assert.Nil(t, reader, "reader should be nil")
 	assert.Error(t, err, "error should have been returned")

docker/log_iterator.go

@@ -0,0 +1,154 @@
+package docker
+
+import (
+	"bufio"
+	"encoding/json"
+	"hash/fnv"
+	"regexp"
+	"strings"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+)
+
+type eventGenerator struct {
+	reader    *bufio.Reader
+	channel   chan *LogEvent
+	next      *LogEvent
+	lastError error
+}
+
+func NewEventIterator(reader *bufio.Reader) *eventGenerator {
+	generator := &eventGenerator{reader: reader, channel: make(chan *LogEvent, 100)}
+	go generator.consume()
+	return generator
+}
+
+func (g *eventGenerator) Next() (*LogEvent, error) {
+	var currentEvent *LogEvent
+	var nextEvent *LogEvent
+	if g.next != nil {
+		currentEvent = g.next
+		g.next = nil
+		nextEvent = g.Peek()
+	} else {
+		event, ok := <-g.channel
+		if !ok {
+			return nil, g.lastError
+		}
+
+		currentEvent = event
+		nextEvent = g.Peek()
+	}
+
+	currentLevel := guessLogLevel(currentEvent)
+
+	if nextEvent != nil {
+		if currentEvent.IsCloseToTime(nextEvent) && currentLevel != "" && !nextEvent.HasLevel() {
+			currentEvent.Position = START
+			nextEvent.Position = MIDDLE
+		}
+
+		// If next item is not close to current item or has level, set current item position to end
+		if currentEvent.Position == MIDDLE && (nextEvent.HasLevel() || !currentEvent.IsCloseToTime(nextEvent)) {
+			currentEvent.Position = END
+		}
+
+		// If next item is close to current item and has no level, set next item position to middle
+		if currentEvent.Position == MIDDLE && !nextEvent.HasLevel() && currentEvent.IsCloseToTime(nextEvent) {
+			nextEvent.Position = MIDDLE
+		}
+		// Set next item level to current item level
+		if currentEvent.Position == START || currentEvent.Position == MIDDLE {
+			nextEvent.Level = currentEvent.Level
+		}
+	} else if currentEvent.Position == MIDDLE {
+		currentEvent.Position = END
+	}
+
+	return currentEvent, nil
+}
+
+func (g *eventGenerator) LastError() error {
+	return g.lastError
+}
+
+func (g *eventGenerator) Peek() *LogEvent {
+	if g.next != nil {
+		return g.next
+	}
+	select {
+	case event := <-g.channel:
+		g.next = event
+		return g.next
+	case <-time.After(50 * time.Millisecond):
+		return nil
+	}
+}
+
+func (g *eventGenerator) consume() {
+	for {
+		message, readerError := g.reader.ReadString('\n')
+
+		if message != "" {
+			h := fnv.New32a()
+			h.Write([]byte(message))
+
+			logEvent := &LogEvent{Id: h.Sum32(), Message: message}
+
+			if index := strings.IndexAny(message, " "); index != -1 {
+				logId := message[:index]
+				if timestamp, err := time.Parse(time.RFC3339Nano, logId); err == nil {
+					logEvent.Timestamp = timestamp.UnixMilli()
+					message = strings.TrimSuffix(message[index+1:], "\n")
+					logEvent.Message = message
+					if strings.HasPrefix(message, "{") && strings.HasSuffix(message, "}") {
+						var data map[string]interface{}
+						if err := json.Unmarshal([]byte(message), &data); err != nil {
+							log.Errorf("json unmarshal error while streaming %v", err.Error())
+						} else {
+							logEvent.Message = data
+						}
+					}
+				}
+			}
+			logEvent.Level = guessLogLevel(logEvent)
+			g.channel <- logEvent
+		}
+
+		if readerError != nil {
+			g.lastError = readerError
+			close(g.channel)
+			return
+		}
+	}
+}
+
+var NON_ASCII_REGEX = regexp.MustCompile("^[^a-z ]+[^ewidtf]?")
+var KEY_VALUE_REGEX = regexp.MustCompile(`level=(\w+)`)
+
+func guessLogLevel(logEvent *LogEvent) string {
+	switch value := logEvent.Message.(type) {
+	case string:
+		value = NON_ASCII_REGEX.ReplaceAllString(strings.ToLower(value), "")
+
+		levels := []string{"error", "warn", "info", "debug", "trace", "fatal"}
+		for _, level := range levels {
+			prefix := regexp.MustCompile("^" + level + "[^a-z]")
+			if prefix.MatchString(value) {
+				return level
+			}
+		}
+
+		if matches := KEY_VALUE_REGEX.FindStringSubmatch(value); matches != nil {
+			return matches[1]
+		}
+
+	case map[string]interface{}:
+		if level, ok := value["level"].(string); ok {
+			return level
+		}
+	}
+
+	return ""
+}

docker/log_iterator_test.go

@@ -0,0 +1,56 @@
+package docker
+
+import (
+	"bufio"
+	"io"
+	"strings"
+	"testing"
+
+	"github.com/magiconair/properties/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestNewEventIterator(t *testing.T) {
+	input := "example input"
+	reader := bufio.NewReader(strings.NewReader(input))
+
+	generator := NewEventIterator(reader)
+	require.NotNil(t, generator, "Expected generator to not be nil, but got nil")
+}
+
+func TestEventGenerator_Next(t *testing.T) {
+	input := "example input"
+	reader := bufio.NewReader(strings.NewReader(input))
+
+	generator := NewEventIterator(reader)
+
+	event, err := generator.Next()
+	require.NoError(t, err, "Expected no error, but got: %v", err)
+	require.NotNil(t, event, "Expected event to not be nil, but got nil")
+}
+
+func TestEventGenerator_LastError(t *testing.T) {
+	input := "example input"
+	reader := bufio.NewReader(strings.NewReader(input))
+
+	generator := NewEventIterator(reader)
+
+	require.Nil(t, generator.LastError(), "Expected LastError to return nil, but got: %v", generator.LastError())
+
+	generator.Next()
+
+	// expert error to be EOF
+	assert.Equal(t, generator.LastError(), io.EOF, "Expected LastError to return EOF, but got: %v", generator.LastError().Error())
+}
+
+func TestEventGenerator_Peek(t *testing.T) {
+	input := "example input"
+	reader := bufio.NewReader(strings.NewReader(input))
+
+	generator := NewEventIterator(reader)
+
+	event := generator.Peek()
+
+	require.NotNil(t, event, "Expected event to not be nil, but got nil")
+	assert.Equal(t, event.Message, input, "Expected event message to be %s, but got: %s", input, event.Message.(string))
+}

docker/types.go

@@ -1,5 +1,7 @@
 package docker
 
+import "math"
+
 // Container represents an internal representation of docker containers
 type Container struct {
 	ID      string   `json:"id"`
@@ -27,8 +29,26 @@ type ContainerEvent struct {
 	Name    string `json:"name"`
 }
 
+type LogPosition string
+
+const (
+	START  LogPosition = "start"
+	MIDDLE LogPosition = "middle"
+	END    LogPosition = "end"
+)
+
 type LogEvent struct {
-	Message   any    `json:"m,omitempty"`
-	Timestamp int64  `json:"ts"`
-	Id        uint32 `json:"id,omitempty"`
+	Message   any         `json:"m,omitempty"`
+	Timestamp int64       `json:"ts"`
+	Id        uint32      `json:"id,omitempty"`
+	Level     string      `json:"l,omitempty"`
+	Position  LogPosition `json:"p,omitempty"`
+}
+
+func (l *LogEvent) HasLevel() bool {
+	return l.Level != ""
+}
+
+func (l *LogEvent) IsCloseToTime(other *LogEvent) bool {
+	return math.Abs(float64(l.Timestamp-other.Timestamp)) < 10
 }

e2e/Dockerfile

@@ -1,6 +1,6 @@
-FROM cypress/included:10.10.0
+FROM cypress/included:12.5.1
 
-RUN apt install curl && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+RUN apt update && apt install curl -y && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
 
 WORKDIR /e2e
 

e2e/package.json

@@ -6,8 +6,8 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@frsource/cypress-plugin-visual-regression-diff": "^2.0.0",
-    "cypress": "^10.8.0",
-    "typescript": "^4.8.3"
+    "@frsource/cypress-plugin-visual-regression-diff": "^3.2.8",
+    "cypress": "^12.4.1",
+    "typescript": "^4.9.4"
   }
 }

e2e/pnpm-lock.yaml

@@ -1,14 +1,14 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@frsource/cypress-plugin-visual-regression-diff': ^2.0.0
-  cypress: ^10.8.0
-  typescript: ^4.8.3
+  '@frsource/cypress-plugin-visual-regression-diff': ^3.2.8
+  cypress: ^12.4.1
+  typescript: ^4.9.4
 
 dependencies:
-  '@frsource/cypress-plugin-visual-regression-diff': 2.0.0_cypress@10.8.0
-  cypress: 10.8.0
-  typescript: 4.8.3
+  '@frsource/cypress-plugin-visual-regression-diff': 3.2.8_cypress@12.4.1
+  cypress: 12.4.1
+  typescript: 4.9.4
 
 packages:
 
@@ -19,12 +19,12 @@ packages:
     dev: false
     optional: true
 
-  /@cypress/request/2.88.10:
-    resolution: {integrity: sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==}
+  /@cypress/request/2.88.11:
+    resolution: {integrity: sha512-M83/wfQ1EkspjkE2lNWNV5ui2Cv7UCv1swW1DqljahbzLVWltcsexQh8jYtuS/vzFXP+HySntGM83ZXA9fn17w==}
     engines: {node: '>= 6'}
     dependencies:
       aws-sign2: 0.7.0
-      aws4: 1.11.0
+      aws4: 1.12.0
       caseless: 0.12.0
       combined-stream: 1.0.8
       extend: 3.0.2
@@ -36,7 +36,7 @@ packages:
       json-stringify-safe: 5.0.1
       mime-types: 2.1.35
       performance-now: 2.1.0
-      qs: 6.5.3
+      qs: 6.10.4
       safe-buffer: 5.2.1
       tough-cookie: 2.5.0
       tunnel-agent: 0.6.0
@@ -52,21 +52,28 @@ packages:
       - supports-color
     dev: false
 
-  /@frsource/cypress-plugin-visual-regression-diff/2.0.0_cypress@10.8.0:
-    resolution: {integrity: sha512-hwMEZzD0tFbNNNbEjdF8q2ELpxhby25VQ665QUJy1soGPiGwY+rBDdktFg3EXVGs/Euq0Nj8hq/K18BWYoX10g==}
+  /@frsource/base64/1.0.5:
+    resolution: {integrity: sha512-RIlQtKezeRhNuxIpIc2BuM4kNqAakIarKV/TCgx2EC+zgj1NxX3+Mc80AkJCCMO8dZUuGzbULG7295YeBQZlSA==}
+    dev: false
+
+  /@frsource/cypress-plugin-visual-regression-diff/3.2.8_cypress@12.4.1:
+    resolution: {integrity: sha512-B7TbwdAiql73FxRr2tiFmx8PvpK4a2oCBygPzT1v9IvCxh4XwoXwY47/klKtg2402PrhdXwcqI/NBSVqb4CJnQ==}
     engines: {node: '>=10'}
     peerDependencies:
       cypress: '>=4.5.0'
     dependencies:
-      cypress: 10.8.0
+      '@frsource/base64': 1.0.5
+      cypress: 12.4.1
+      glob: 8.0.3
+      meta-png: 1.0.5
       move-file: 2.1.0
       pixelmatch: 5.3.0
       pngjs: 6.0.0
-      sharp: 0.30.7
+      sharp: 0.31.2
     dev: false
 
-  /@types/node/14.18.29:
-    resolution: {integrity: sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==}
+  /@types/node/14.18.36:
+    resolution: {integrity: sha512-FXKWbsJ6a1hIrRxv+FoukuHnGTgEzKYGi7kilfMae96AL9UNkPFNWJEEYWzdRI9ooIkbr4AKldyuSTLql06vLQ==}
     dev: false
 
   /@types/sinonjs__fake-timers/8.1.1:
@@ -81,7 +88,7 @@ packages:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 14.18.29
+      '@types/node': 14.18.36
     dev: false
     optional: true
 
@@ -154,8 +161,8 @@ packages:
     resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==}
     dev: false
 
-  /aws4/1.11.0:
-    resolution: {integrity: sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==}
+  /aws4/1.12.0:
+    resolution: {integrity: sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==}
     dev: false
 
   /balanced-match/1.0.2:
@@ -195,6 +202,12 @@ packages:
       concat-map: 0.0.1
     dev: false
 
+  /brace-expansion/2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: false
+
   /buffer-crc32/0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: false
@@ -211,6 +224,13 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /call-bind/1.0.2:
+    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+    dependencies:
+      function-bind: 1.1.1
+      get-intrinsic: 1.2.0
+    dev: false
+
   /caseless/0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
     dev: false
@@ -232,8 +252,9 @@ packages:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
     dev: false
 
-  /ci-info/3.4.0:
-    resolution: {integrity: sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==}
+  /ci-info/3.7.1:
+    resolution: {integrity: sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==}
+    engines: {node: '>=8'}
     dev: false
 
   /clean-stack/2.2.0:
@@ -329,15 +350,15 @@ packages:
       which: 2.0.2
     dev: false
 
-  /cypress/10.8.0:
-    resolution: {integrity: sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==}
-    engines: {node: '>=12.0.0'}
+  /cypress/12.4.1:
+    resolution: {integrity: sha512-IFMPzc1RJ22Fac+YbdqywtpcuqZXqQJh+JqZDXn+A15zG/dw99njfv8f0bTvD+WAHhP118+xWG/VwilkFg1rnA==}
+    engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@cypress/request': 2.88.10
+      '@cypress/request': 2.88.11
       '@cypress/xvfb': 1.2.4_supports-color@8.1.1
-      '@types/node': 14.18.29
+      '@types/node': 14.18.36
       '@types/sinonjs__fake-timers': 8.1.1
       '@types/sizzle': 2.3.3
       arch: 2.2.0
@@ -351,7 +372,7 @@ packages:
       cli-table3: 0.6.3
       commander: 5.1.0
       common-tags: 1.8.2
-      dayjs: 1.11.5
+      dayjs: 1.11.7
       debug: 4.3.4_supports-color@8.1.1
       enquirer: 2.3.6
       eventemitter2: 6.4.7
@@ -367,12 +388,12 @@ packages:
       listr2: 3.14.0_enquirer@2.3.6
       lodash: 4.17.21
       log-symbols: 4.1.0
-      minimist: 1.2.6
+      minimist: 1.2.7
       ospath: 1.2.2
       pretty-bytes: 5.6.0
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
-      semver: 7.3.7
+      semver: 7.3.8
       supports-color: 8.1.1
       tmp: 0.2.1
       untildify: 4.0.0
@@ -386,8 +407,8 @@ packages:
       assert-plus: 1.0.0
     dev: false
 
-  /dayjs/1.11.5:
-    resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
     dev: false
 
   /debug/3.2.7_supports-color@8.1.1:
@@ -564,6 +585,18 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: false
 
+  /function-bind/1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: false
+
+  /get-intrinsic/1.2.0:
+    resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==}
+    dependencies:
+      function-bind: 1.1.1
+      has: 1.0.3
+      has-symbols: 1.0.3
+    dev: false
+
   /get-stream/5.2.0:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
     engines: {node: '>=8'}
@@ -598,8 +631,19 @@ packages:
       path-is-absolute: 1.0.1
     dev: false
 
-  /global-dirs/3.0.0:
-    resolution: {integrity: sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==}
+  /glob/8.0.3:
+    resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.2
+      once: 1.4.0
+    dev: false
+
+  /global-dirs/3.0.1:
+    resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
     engines: {node: '>=10'}
     dependencies:
       ini: 2.0.0
@@ -614,6 +658,18 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /has-symbols/1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
+  /has/1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+    dev: false
+
   /http-signature/1.3.6:
     resolution: {integrity: sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==}
     engines: {node: '>=0.10'}
@@ -665,7 +721,7 @@ packages:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.4.0
+      ci-info: 3.7.1
     dev: false
 
   /is-fullwidth-code-point/3.0.0:
@@ -677,7 +733,7 @@ packages:
     resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==}
     engines: {node: '>=10'}
     dependencies:
-      global-dirs: 3.0.0
+      global-dirs: 3.0.1
       is-path-inside: 3.0.3
     dev: false
 
@@ -758,7 +814,7 @@ packages:
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.3.0
-      rxjs: 7.5.6
+      rxjs: 7.8.0
       through: 2.3.8
       wrap-ansi: 7.0.0
     dev: false
@@ -800,6 +856,10 @@ packages:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: false
 
+  /meta-png/1.0.5:
+    resolution: {integrity: sha512-kR/npdqfnlB8HycaDImcpauYh/l1ldvuDoT/QhWazSD9jDHJ8v9tankLhjN5ea8OKV1Amp4v/xxNYG2WiQYEgg==}
+    dev: false
+
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -828,8 +888,15 @@ packages:
       brace-expansion: 1.1.11
     dev: false
 
-  /minimist/1.2.6:
-    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+  /minimatch/5.1.2:
+    resolution: {integrity: sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: false
+
+  /minimist/1.2.7:
+    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
     dev: false
 
   /mkdirp-classic/0.5.3:
@@ -855,11 +922,11 @@ packages:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     dev: false
 
-  /node-abi/3.24.0:
-    resolution: {integrity: sha512-YPG3Co0luSu6GwOBsmIdGW6Wx0NyNDLg/hriIyDllVsNwnI6UeqaWShxC3lbH4LtEQUgoLP3XR1ndXiDAWvmRw==}
+  /node-abi/3.30.0:
+    resolution: {integrity: sha512-qWO5l3SCqbwQavymOmtTVuCWZE23++S+rxyoHjXqUmPyzRcaoI4lA2gO55/drddGnedAyjA7sk76SfQ5lfUMnw==}
     engines: {node: '>=10'}
     dependencies:
-      semver: 7.3.7
+      semver: 7.3.8
     dev: false
 
   /node-addon-api/5.0.0:
@@ -873,6 +940,10 @@ packages:
       path-key: 3.1.1
     dev: false
 
+  /object-inspect/1.12.3:
+    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
+    dev: false
+
   /once/1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -945,10 +1016,10 @@ packages:
       detect-libc: 2.0.1
       expand-template: 2.0.3
       github-from-package: 0.0.0
-      minimist: 1.2.6
+      minimist: 1.2.7
       mkdirp-classic: 0.5.3
       napi-build-utils: 1.0.2
-      node-abi: 3.24.0
+      node-abi: 3.30.0
       pump: 3.0.0
       rc: 1.2.8
       simple-get: 4.0.1
@@ -976,14 +1047,16 @@ packages:
       once: 1.4.0
     dev: false
 
-  /punycode/2.1.1:
-    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
+  /punycode/2.3.0:
+    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
     dev: false
 
-  /qs/6.5.3:
-    resolution: {integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==}
+  /qs/6.10.4:
+    resolution: {integrity: sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==}
     engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.4
     dev: false
 
   /rc/1.2.8:
@@ -992,7 +1065,7 @@ packages:
     dependencies:
       deep-extend: 0.6.0
       ini: 1.3.8
-      minimist: 1.2.6
+      minimist: 1.2.7
       strip-json-comments: 2.0.1
     dev: false
 
@@ -1030,10 +1103,10 @@ packages:
       glob: 7.2.3
     dev: false
 
-  /rxjs/7.5.6:
-    resolution: {integrity: sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==}
+  /rxjs/7.8.0:
+    resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /safe-buffer/5.2.1:
@@ -1044,24 +1117,24 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
-  /semver/7.3.7:
-    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
+  /semver/7.3.8:
+    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
       lru-cache: 6.0.0
     dev: false
 
-  /sharp/0.30.7:
-    resolution: {integrity: sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==}
-    engines: {node: '>=12.13.0'}
+  /sharp/0.31.2:
+    resolution: {integrity: sha512-DUdNVEXgS5A97cTagSLIIp8dUZ/lZtk78iNVZgHdHbx1qnQR7JAHY0BnXnwwH39Iw+VKhO08CTYhIg0p98vQ5Q==}
+    engines: {node: '>=14.15.0'}
     requiresBuild: true
     dependencies:
       color: 4.2.3
       detect-libc: 2.0.1
       node-addon-api: 5.0.0
       prebuild-install: 7.1.1
-      semver: 7.3.7
+      semver: 7.3.8
       simple-get: 4.0.1
       tar-fs: 2.1.1
       tunnel-agent: 0.6.0
@@ -1079,6 +1152,14 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /side-channel/1.0.4:
+    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+      object-inspect: 1.12.3
+    dev: false
+
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: false
@@ -1221,11 +1302,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.1.1
+      punycode: 2.3.0
     dev: false
 
-  /tslib/2.4.0:
-    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+  /tslib/2.5.0:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
     dev: false
 
   /tunnel-agent/0.6.0:
@@ -1243,8 +1324,8 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /typescript/4.8.3:
-    resolution: {integrity: sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==}
+  /typescript/4.9.4:
+    resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
     engines: {node: '>=4.2.0'}
     hasBin: true
     dev: false

go.mod

@@ -1,43 +1,45 @@
 module github.com/amir20/dozzle
 
 require (
-	github.com/Microsoft/go-winio v0.5.1 // indirect
+	github.com/Microsoft/go-winio v0.6.0 // indirect
 	github.com/alexflint/go-arg v1.4.3
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/docker/distribution v2.7.1+incompatible // indirect
-	github.com/docker/docker v20.10.19+incompatible
+	github.com/docker/distribution v2.8.1+incompatible // indirect
+	github.com/docker/docker v23.0.1+incompatible
 	github.com/docker/go-connections v0.4.0 // indirect
-	github.com/docker/go-units v0.4.0 // indirect
-	github.com/dustin/go-humanize v1.0.0
+	github.com/docker/go-units v0.5.0 // indirect
+	github.com/dustin/go-humanize v1.0.1
 	github.com/gogo/protobuf v1.3.2 // indirect
 	github.com/gorilla/mux v1.8.0
 	github.com/gorilla/sessions v1.2.1
-	github.com/magiconair/properties v1.8.6
+	github.com/magiconair/properties v1.8.7
 	github.com/moby/term v0.0.0-20201216013528-df9cb8a40635 // indirect
 	github.com/morikuni/aec v1.0.0 // indirect
 	github.com/opencontainers/go-digest v1.0.0 // indirect
-	github.com/opencontainers/image-spec v1.0.1 // indirect
+	github.com/opencontainers/image-spec v1.0.2 // indirect
 	github.com/sergi/go-diff v1.1.0 // indirect
 	github.com/sirupsen/logrus v1.9.0
-	github.com/spf13/afero v1.9.2
-	github.com/stretchr/objx v0.4.0 // indirect
-	github.com/stretchr/testify v1.8.0
-	golang.org/x/net v0.0.0-20211104170005-ce137452f963 // indirect
-	golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 // indirect
+	github.com/spf13/afero v1.9.3
+	github.com/stretchr/objx v0.5.0 // indirect
+	github.com/stretchr/testify v1.8.1
+	golang.org/x/net v0.5.0 // indirect
+	golang.org/x/sys v0.4.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
 
 require (
-	github.com/alexflint/go-scalar v1.1.0 // indirect
+	github.com/alexflint/go-scalar v1.2.0 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/google/go-cmp v0.5.5 // indirect
 	github.com/gorilla/securecookie v1.1.1 // indirect
 	github.com/kr/pretty v0.2.1 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
-	golang.org/x/text v0.3.6 // indirect
+	golang.org/x/mod v0.7.0 // indirect
+	golang.org/x/text v0.6.0 // indirect
 	golang.org/x/time v0.0.0-20200630173020-3af7569d3a1e // indirect
+	golang.org/x/tools v0.5.0 // indirect
 	gotest.tools/v3 v3.0.3 // indirect
 )
 
-go 1.18
+go 1.19

go.sum

@@ -40,12 +40,13 @@ github.com/Azure/go-ansiterm v0.0.0-20170929234023-d6e3b3328b78 h1:w+iIsaOQNcT7O
 github.com/Azure/go-ansiterm v0.0.0-20170929234023-d6e3b3328b78/go.mod h1:LmzpDX56iTiv29bbRTIsUNlaFfuhWRQBWjQdVyAevI8=
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym/WlBOVXweHU+Q+/VP0lqqI8lqeDx9IjBqo=
-github.com/Microsoft/go-winio v0.5.1 h1:aPJp2QD7OOrhO5tQXqQoGSJc+DjDtWTGLOmNyAm6FgY=
-github.com/Microsoft/go-winio v0.5.1/go.mod h1:JPGBdM1cNvN/6ISo+n8V5iA4v8pBzdOpzfwIujj1a84=
+github.com/Microsoft/go-winio v0.6.0 h1:slsWYD/zyx7lCXoZVlvQrj0hPTM1HI4+v1sIda2yDvg=
+github.com/Microsoft/go-winio v0.6.0/go.mod h1:cTAf44im0RAYeL23bpB+fzCyDH2MJiz2BO69KH/soAE=
 github.com/alexflint/go-arg v1.4.3 h1:9rwwEBpMXfKQKceuZfYcwuc/7YY7tWJbFsgG5cAU/uo=
 github.com/alexflint/go-arg v1.4.3/go.mod h1:3PZ/wp/8HuqRZMUUgu7I+e1qcpUbvmS258mRXkFH4IA=
-github.com/alexflint/go-scalar v1.1.0 h1:aaAouLLzI9TChcPXotr6gUhq+Scr8rl0P9P4PnltbhM=
 github.com/alexflint/go-scalar v1.1.0/go.mod h1:LoFvNMqS1CPrMVltza4LvnGKhaSpc3oyLEBUZVhhS2o=
+github.com/alexflint/go-scalar v1.2.0 h1:WR7JPKkeNpnYIOfHRa7ivM21aWAdHD0gEWHCx+WQBRw=
+github.com/alexflint/go-scalar v1.2.0/go.mod h1:LoFvNMqS1CPrMVltza4LvnGKhaSpc3oyLEBUZVhhS2o=
 github.com/beme/abide v0.0.0-20190723115211-635a09831760 h1:FvTM5NSN5HYvfKpgL+8x73U5v063vHsd7AX05eV1DnM=
 github.com/beme/abide v0.0.0-20190723115211-635a09831760/go.mod h1:6+8gCKsZnxzhGTmKRh4BSkLos9CbWRJNcrp55We4SqQ=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
@@ -60,16 +61,18 @@ github.com/creack/pty v1.1.11/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/docker/distribution v2.7.1+incompatible h1:a5mlkVzth6W5A4fOsS3D2EO5BUmsJpcB+cRlLU7cSug=
-github.com/docker/distribution v2.7.1+incompatible/go.mod h1:J2gT2udsDAN96Uj4KfcMRqY0/ypR+oyYUYmja8H+y+w=
-github.com/docker/docker v20.10.19+incompatible h1:lzEmjivyNHFHMNAFLXORMBXyGIhw/UP4DvJwvyKYq64=
-github.com/docker/docker v20.10.19+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
+github.com/docker/distribution v2.8.1+incompatible h1:Q50tZOPR6T/hjNsyc9g8/syEs6bk8XXApsHjKukMl68=
+github.com/docker/distribution v2.8.1+incompatible/go.mod h1:J2gT2udsDAN96Uj4KfcMRqY0/ypR+oyYUYmja8H+y+w=
+github.com/docker/docker v23.0.0+incompatible h1:L6c28tNyqZ4/ub9AZC9d5QUuunoHHfEH4/Ue+h/E5nE=
+github.com/docker/docker v23.0.0+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
+github.com/docker/docker v23.0.1+incompatible h1:vjgvJZxprTTE1A37nm+CLNAdwu6xZekyoiVlUZEINcY=
+github.com/docker/docker v23.0.1+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
 github.com/docker/go-connections v0.4.0 h1:El9xVISelRB7BuFusrZozjnkIM5YnzCViNKohAFqRJQ=
 github.com/docker/go-connections v0.4.0/go.mod h1:Gbd7IOopHjR8Iph03tsViu4nIes5XhDvyHbTtUxmeec=
-github.com/docker/go-units v0.4.0 h1:3uh0PgVws3nIA0Q+MwDC8yjEPf9zjRfZZWXZYDct3Tw=
-github.com/docker/go-units v0.4.0/go.mod h1:fgPhTUdO+D/Jk86RDLlptpiXQzgHJF7gydDDbaIK4Dk=
-github.com/dustin/go-humanize v1.0.0 h1:VSnTsYCnlFHaM2/igO1h6X3HA71jcobQuxemgkq4zYo=
-github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
+github.com/docker/go-units v0.5.0 h1:69rxXcBk27SvSaaxTtLh/8llcHD8vYHT7WSdRZ/jvr4=
+github.com/docker/go-units v0.5.0/go.mod h1:fgPhTUdO+D/Jk86RDLlptpiXQzgHJF7gydDDbaIK4Dk=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
@@ -158,16 +161,16 @@ github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfn
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
 github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
-github.com/magiconair/properties v1.8.6 h1:5ibWZ6iY0NctNGWo87LalDlEZ6R41TqbbDamhfG/Qzo=
-github.com/magiconair/properties v1.8.6/go.mod h1:y3VJvCyxH9uVvJTWEGAELF3aiYNyPKd5NZ3oSwXrF60=
+github.com/magiconair/properties v1.8.7 h1:IeQXZAiQcpL9mgcAe1Nu6cX9LLw6ExEHKjN0VQdvPDY=
+github.com/magiconair/properties v1.8.7/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
 github.com/moby/term v0.0.0-20201216013528-df9cb8a40635 h1:rzf0wL0CHVc8CEsgyygG0Mn9CNCCPZqOPaz8RiiHYQk=
 github.com/moby/term v0.0.0-20201216013528-df9cb8a40635/go.mod h1:FBS0z0QWA44HXygs7VXDUOGoN/1TV3RuWkLO04am3wc=
 github.com/morikuni/aec v1.0.0 h1:nP9CBfwrvYnBRgY6qfDQkygYDmYwOilePFkwzv4dU8A=
 github.com/morikuni/aec v1.0.0/go.mod h1:BbKIizmSmc5MMPqRYbxO4ZU0S0+P200+tUnFx7PXmsc=
 github.com/opencontainers/go-digest v1.0.0 h1:apOUWs51W5PlhuyGyz9FCeeBIOUDA/6nW8Oi/yOhh5U=
 github.com/opencontainers/go-digest v1.0.0/go.mod h1:0JzlMkj0TRzQZfJkVvzbP0HBR3IKzErnv2BNG4W4MAM=
-github.com/opencontainers/image-spec v1.0.1 h1:JMemWkRwHx4Zj+fVxWoMCFm/8sYGGrUVojFA6h/TRcI=
-github.com/opencontainers/image-spec v1.0.1/go.mod h1:BtxoFyWECRxE4U/7sNtV5W15zMzWCbyJoFRP3s7yZA0=
+github.com/opencontainers/image-spec v1.0.2 h1:9yCKha/T5XdGtO0q9Q9a6T5NUCsTn/DrBg0D7ufOcFM=
+github.com/opencontainers/image-spec v1.0.2/go.mod h1:BtxoFyWECRxE4U/7sNtV5W15zMzWCbyJoFRP3s7yZA0=
 github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
@@ -178,22 +181,23 @@ github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/sergi/go-diff v1.1.0 h1:we8PVUC3FE2uYfodKH/nBHMSetSfHDR6scGdBi+erh0=
 github.com/sergi/go-diff v1.1.0/go.mod h1:STckp+ISIX8hZLjrqAeVduY0gWCT9IjLuqbuNXdaHfM=
-github.com/sirupsen/logrus v1.7.0/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0=
 github.com/sirupsen/logrus v1.9.0 h1:trlNQbNUG3OdDrDil03MCb1H2o9nJ1x4/5LYw7byDE0=
 github.com/sirupsen/logrus v1.9.0/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
-github.com/spf13/afero v1.9.2 h1:j49Hj62F0n+DaZ1dDCvhABaPNSGNkt32oRFxI33IEMw=
-github.com/spf13/afero v1.9.2/go.mod h1:iUV7ddyEEZPO5gA3zD4fJt6iStLlL+Lg4m2cihcDf8Y=
+github.com/spf13/afero v1.9.3 h1:41FoI0fD7OR7mGcKE/aOiLkGreyf8ifIOQmJANWogMk=
+github.com/spf13/afero v1.9.3/go.mod h1:iUV7ddyEEZPO5gA3zD4fJt6iStLlL+Lg4m2cihcDf8Y=
 github.com/spf13/pflag v1.0.3/go.mod h1:DYY7MBk1bdzusC3SYhjObp+wFpr4gzcvqqNjLnInEg4=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/objx v0.4.0 h1:M2gUjqZET1qApGOWNSnZ49BAIMX4F/1plDv3+l31EJ4=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0 h1:1zr/of2m5FGMsad5YfcqgdqdWrIhu+EBEJRhR1U7z/c=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
 github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
 github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.0 h1:pSgiaMZlXftHpm5L7V1+rVB+AZJydKsMxsQBIJw4PKk=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
@@ -244,6 +248,8 @@ golang.org/x/mod v0.2.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.1/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/mod v0.7.0 h1:LapD9S96VoQRhi/GrNTqeBJFrUjs5UHCAtTlgwA5oZA=
+golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190108225652-1e06a53dbb7e/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -275,8 +281,8 @@ golang.org/x/net v0.0.0-20201031054903-ff519b6c9102/go.mod h1:sp8m0HH+o8qH0wwXwY
 golang.org/x/net v0.0.0-20201209123823-ac852fbbde11/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20201224014010-6772e930b67b/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
-golang.org/x/net v0.0.0-20211104170005-ce137452f963 h1:8gJUadZl+kWvZBqG/LautX0X6qe5qTC2VI/3V3NBRAY=
-golang.org/x/net v0.0.0-20211104170005-ce137452f963/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.5.0 h1:GyT4nK/YDHSqa1c4753ouYCDajOYKTja9Xb/OHtgvSw=
+golang.org/x/net v0.5.0/go.mod h1:DivGGAXEgPSlEBzxGzZI+ZLohi+xUj054jfeKui00ws=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -296,6 +302,7 @@ golang.org/x/sync v0.0.0-20200317015054-43a5402ce75a/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20200625203802-6e8e738ad208/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0 h1:wsuoTGHzEhffawBOhz5CYhcrV4IdKZbEyZjBMuTp12o=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190312061237-fead79001313/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -306,7 +313,6 @@ golang.org/x/sys v0.0.0-20190606165138-5da285871e9c/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190726091711-fc99dfbffb4e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20191001151750-bb3f8db39f24/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20191026070338-33540a1f6037/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20191204072324-ce4227a45e2e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20191228213918-04cbcbbfeed8/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200113162924-86b910548bc1/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -329,12 +335,12 @@ golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20201201145000-ef89a241ccb3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210104204734-6f8348627aad/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210119212857-b64e53b001e4/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210124154548-22da62e12c0c/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210225134936-a50acf3fe073/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423185535-09eb48e85fd7/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 h1:0A+M6Uqn+Eje4kHMK80dtF3JCXC4ykBgQG4Fe06QRhQ=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.4.0 h1:Zr2JFtRQNX3BCZ8YtxRE9hNJYC8J6I1MVbMg6owUp18=
+golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -342,8 +348,8 @@ golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.4/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.6 h1:aRYxNxv6iGQlyVaZmk6ZgYEDa+Jg18DxebPSrd6bg1M=
-golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.6.0 h1:3XmdazWV+ubf7QgHSTWeykHOci5oeekaGJBLkrkaw4k=
+golang.org/x/text v0.6.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
@@ -399,6 +405,8 @@ golang.org/x/tools v0.0.0-20210105154028-b0ab187a4818/go.mod h1:emZCQorbCU4vsT4f
 golang.org/x/tools v0.0.0-20210106214847-113979e3529a/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
 golang.org/x/tools v0.0.0-20210108195828-e2f9c7f1fc8e/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
 golang.org/x/tools v0.1.0/go.mod h1:xkSsbof2nBLbhDlRMhhhyNLN/zl3eTqcnHD5viDpcZ0=
+golang.org/x/tools v0.5.0 h1:+bSpV5HIeWkuvgaMfI3UmKRThoTA5ODJTUd8T17NO+4=
+golang.org/x/tools v0.5.0/go.mod h1:N+Kgy78s5I24c24dU8OfWNEotWjutIs8SnJvn5IDq+k=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=

index.html

@@ -9,7 +9,8 @@
         "base": "{{ .Base }}",
         "version": "{{ .Version }}",
         "authorizationNeeded": "{{ .AuthorizationNeeded }}",
-        "secured": "{{ .Secured }}"
+        "secured": "{{ .Secured }}",
+        "hostname": "{{ .Hostname }}"
       }
     </script>
     <link

locales/ru.yml

@@ -0,0 +1,49 @@
+toolbar:
+  clear: Очистить
+  download: Скачать
+  search: Поиск
+label:
+  containers: Контейнеры
+  total-containers: Всего Контейнеров
+  running: Запущенные
+  total-cpu-usage: Использование процессора
+  total-mem-usage: Использование памяти
+  dozzle-version: Версия Dozzle
+  all: Все
+  password: Пароль
+  username: Имя пользователя
+tooltip:
+  search: Поиск контейнеров (⌘ + k, ⌃k)
+  pin-column: Закрепить столбец
+error:
+  page-not-found: Эта страница не доступна.
+  invalid-auth: Имя пользователя или пароль неверны.
+  logs-skipped: Пропущено {total} записей
+title:
+  page-not-found: Страница не найдена
+  login: Требуется авторизация
+  settings: Настройки
+button:
+  logout: Выйти
+  login: Войти
+placeholder:
+  search-containers: Поиск контейнеров (⌘ + k, ⌃k)
+settings:
+  display: Вид
+  small-scrollbars: Уменьшенная полоса прокрутки
+  show-timesamps: Показывать временные метки
+  soft-wrap: Плавный перенос текста
+  12-24-format: >-
+    Формат времени. По умолчанию, Dozzle будет использовать локализацию вашего браузера.
+  font-size: Размер шрифта
+  color-scheme: Цветовая схема
+  options: Опции
+  show-stopped-containers: Показывать остановленные контейнеры
+  about: Информация
+  search: >-
+    Включить поиск с помощью Dozzle, используя <code>command+f</code> или
+    <code>ctrl+f</code>
+  using-version: Вы используете версию Dozzle {version}.
+  update-available: >-
+    Доступна новая версия! Обновить до <a :href="{href}" class="next-release"
+    target="_blank" rel="noreferrer noopener">{nextVersion}</a>.

main.go

@@ -24,13 +24,25 @@ var (
 	version = "head"
 )
 
+type DockerSecret struct {
+	Value string
+}
+
+func (s *DockerSecret) UnmarshalText(b []byte) error {
+	v, err := os.ReadFile(string(b))
+	s.Value = strings.Trim(string(v), "\r\n")
+	return err
+}
+
 type args struct {
 	Addr                 string              `arg:"env:DOZZLE_ADDR" default:":8080" help:"sets host:port to bind for server. This is rarely needed inside a docker container."`
 	Base                 string              `arg:"env:DOZZLE_BASE" default:"/" help:"sets the base for http router."`
+	Hostname             string              `arg:"env:DOZZLE_HOSTNAME" help:"sets the hostname for display. This is useful with multiple Dozzle instances."`
 	Level                string              `arg:"env:DOZZLE_LEVEL" default:"info" help:"set Dozzle log level. Use debug for more logging."`
-	TailSize             int                 `arg:"env:DOZZLE_TAILSIZE" default:"300" help:"update the initial tail size when fetching logs."`
 	Username             string              `arg:"env:DOZZLE_USERNAME" help:"sets the username for auth."`
 	Password             string              `arg:"env:DOZZLE_PASSWORD" help:"sets password for auth"`
+	UsernameFile         *DockerSecret       `arg:"env:DOZZLE_USERNAME_FILE" help:"sets the secret path read username for auth."`
+	PasswordFile         *DockerSecret       `arg:"env:DOZZLE_PASSWORD_FILE" help:"sets the secret path read password for auth"`
 	NoAnalytics          bool                `arg:"--no-analytics,env:DOZZLE_NO_ANALYTICS" help:"disables anonymous analytics"`
 	WaitForDockerSeconds int                 `arg:"--wait-for-docker-seconds,env:DOZZLE_WAIT_FOR_DOCKER_SECONDS" help:"wait for docker to be available for at most this many seconds before starting the server."`
 	FilterStrings        []string            `arg:"env:DOZZLE_FILTER,--filter,separate" help:"filters docker containers using Docker syntax."`
@@ -93,6 +105,14 @@ func main() {
 		}
 	}
 
+	if args.Username == "" && args.UsernameFile != nil {
+		args.Username = args.UsernameFile.Value
+	}
+
+	if args.Password == "" && args.PasswordFile != nil {
+		args.Password = args.PasswordFile.Value
+	}
+
 	if args.Username != "" || args.Password != "" {
 		if args.Username == "" || args.Password == "" {
 			log.Fatalf("Username AND password are required for authentication")
@@ -103,9 +123,10 @@ func main() {
 		Addr:     args.Addr,
 		Base:     args.Base,
 		Version:  version,
-		TailSize: args.TailSize,
 		Username: args.Username,
 		Password: args.Password,
+		Hostname: args.Hostname,
+		NoAnalytics: args.NoAnalytics,
 	}
 
 	assets, err := fs.Sub(content, "dist")
@@ -155,8 +176,8 @@ func doStartEvent(arg args) {
 		FilterLength:  len(arg.Filter),
 		CustomAddress: arg.Addr != ":8080",
 		CustomBase:    arg.Base != "/",
-		TailSize:      arg.TailSize,
 		Protected:     arg.Username != "",
+		HasHostname:   arg.Hostname != "",
 	}
 
 	if err := analytics.SendStartEvent(event); err != nil {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dozzle",
-  "version": "4.2.0",
+  "version": "4.7.5",
   "description": "Realtime log viewer for docker containers. ",
   "homepage": "https://github.com/amir20/dozzle#readme",
   "bugs": {
@@ -14,7 +14,7 @@
   "author": "Amir Raminfar <findamir@gmail.com>",
   "scripts": {
     "watch:assets": "vite --open",
-    "watch:server": "LIVE_FS=true DOZZLE_ADDR=:3100 reflex -c .reflex",
+    "watch:server": "LIVE_FS=true DOZZLE_ADDR=localhost:3100 reflex -c .reflex",
     "dev": "make fake_assets && npm-run-all -p watch:assets watch:server",
     "build": "vite build",
     "release": "release-it",
@@ -22,69 +22,69 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.1.8",
-    "@iconify-json/cil": "^1.1.2",
-    "@iconify-json/mdi": "^1.1.33",
-    "@iconify-json/mdi-light": "^1.1.2",
-    "@iconify-json/octicon": "^1.1.20",
-    "@oruga-ui/oruga-next": "^0.5.6",
-    "@oruga-ui/theme-bulma": "^0.2.7",
-    "@vueuse/core": "^9.3.0",
-    "@vueuse/integrations": "^9.3.0",
-    "@vueuse/router": "^9.3.0",
+    "@iconify-json/carbon": "^1.1.15",
+    "@iconify-json/cil": "^1.1.4",
+    "@iconify-json/mdi": "^1.1.47",
+    "@iconify-json/mdi-light": "^1.1.6",
+    "@iconify-json/octicon": "^1.1.32",
+    "@intlify/unplugin-vue-i18n": "^0.8.2",
+    "@oruga-ui/oruga-next": "^0.5.10",
+    "@oruga-ui/theme-bulma": "^0.2.8",
+    "@vueuse/core": "^9.12.0",
+    "@vueuse/integrations": "^9.12.0",
+    "@vueuse/router": "^9.12.0",
     "ansi-to-html": "^0.7.2",
     "bulma": "^0.9.4",
-    "d3-array": "^3.2.0",
+    "d3-array": "^3.2.2",
     "d3-ease": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
-    "d3-shape": "^3.1.0",
+    "d3-shape": "^3.2.0",
     "d3-transition": "^3.0.1",
     "date-fns": "^2.29.3",
     "fuse.js": "^6.6.2",
     "lodash.debounce": "^4.0.8",
-    "pinia": "^2.0.23",
+    "pinia": "^2.0.30",
     "semver": "^7.3.8",
-    "splitpanes": "^3.1.1",
-    "vue": "^3.2.40",
+    "splitpanes": "^3.1.5",
+    "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.5"
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "@pinia/testing": "^0.0.14",
-    "@types/d3-array": "^3.0.3",
+    "@types/d3-array": "^3.0.4",
     "@types/d3-ease": "^3.0.0",
-    "@types/d3-scale": "^4.0.2",
-    "@types/d3-selection": "^3.0.3",
-    "@types/d3-shape": "^3.1.0",
-    "@types/d3-transition": "^3.0.2",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-selection": "^3.0.4",
+    "@types/d3-shape": "^3.1.1",
+    "@types/d3-transition": "^3.0.3",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^18.8.5",
-    "@types/semver": "^7.3.12",
-    "@vitejs/plugin-vue": "3.1.2",
-    "@vue/compiler-sfc": "^3.2.40",
-    "@vue/test-utils": "^2.1.0",
+    "@types/node": "^18.13.0",
+    "@types/semver": "^7.3.13",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/test-utils": "^2.2.10",
     "c8": "^7.12.0",
     "eventsourcemock": "^2.0.0",
-    "husky": "^8.0.1",
-    "jest-serializer-vue": "^2.0.2",
-    "jsdom": "^20.0.1",
-    "lint-staged": "^13.0.3",
+    "husky": "^8.0.3",
+    "jest-serializer-vue": "^3.0.0",
+    "jsdom": "^21.1.0",
+    "lint-staged": "^13.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "release-it": "^15.5.0",
-    "sass": "^1.55.0",
+    "prettier": "^2.8.4",
+    "release-it": "^15.6.0",
+    "sass": "^1.58.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
-    "unplugin-auto-import": "^0.11.2",
-    "unplugin-icons": "^0.14.11",
-    "unplugin-vue-components": "^0.22.8",
-    "vite": "3.1.8",
-    "vite-plugin-pages": "^0.26.0",
+    "typescript": "^4.9.5",
+    "unplugin-auto-import": "^0.14.0",
+    "unplugin-icons": "^0.15.3",
+    "unplugin-vue-components": "^0.23.0",
+    "vite": "4.1.1",
+    "vite-plugin-pages": "^0.28.0",
     "vite-plugin-vue-layouts": "^0.7.0",
-    "vitest": "^0.24.1",
-    "vue-tsc": "^1.0.7"
+    "vitest": "^0.28.5",
+    "vue-tsc": "^1.0.24"
   },
   "lint-staged": {
     "*.{js,vue,css}": [

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

vite.config.ts

@@ -7,18 +7,30 @@ import AutoImport from "unplugin-auto-import/vite";
 import IconsResolver from "unplugin-icons/resolver";
 import Pages from "vite-plugin-pages";
 import Layouts from "vite-plugin-vue-layouts";
-import VueI18n from "@intlify/vite-plugin-vue-i18n";
+import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 
-export default defineConfig(({ mode }) => ({
+export default defineConfig(() => ({
   resolve: {
     alias: {
       "@/": `${path.resolve(__dirname, "assets")}/`,
     },
   },
-  base: mode === "production" ? "/{{ .Base }}/" : "/",
+  experimental: {
+    renderBuiltUrl(filename: string, { type }: { type: "public" | "asset" }) {
+      if (type === "asset") {
+        return `{{ .Base }}/${filename}`;
+      }
+      return filename;
+    },
+  },
   plugins: [
     vue({
       reactivityTransform: true,
+      template: {
+        compilerOptions: {
+          whitespace: "preserve",
+        },
+      },
     }),
     Icons({
       autoInstall: true,
@@ -46,28 +58,21 @@ export default defineConfig(({ mode }) => ({
       dirs: ["assets/composables", "assets/stores", "assets/utils"],
       vueTemplate: true,
     }),
-    VueI18n({
+    VueI18nPlugin({
       runtimeOnly: true,
       compositionOnly: true,
       include: [path.resolve(__dirname, "locales/**")],
     }),
-    htmlPlugin(mode),
   ],
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:3100/",
+        target: {
+          host: "127.0.0.1",
+          port: 3100
+        },
+        changeOrigin: false
       },
     },
   },
 }));
-
-const htmlPlugin = (mode) => {
-  return {
-    name: "html-transform",
-    enforce: "post" as const,
-    transformIndexHtml(html) {
-      return mode === "production" ? html.replaceAll("/{{ .Base }}/", "{{ .Base }}/") : html;
-    },
-  };
-};

web/__snapshots__/web.snapshot

@@ -71,6 +71,14 @@ Content-Type: text/html
 
 <pre>dev</pre>
 
+/* snapshot: Test_handler_between_dates */
+HTTP/1.1 200 OK
+Connection: close
+Content-Type: application/ld+json; charset=UTF-8
+
+{"m":"INFO Testing logs...","ts":1589396137772,"id":2908612274,"l":"info"}
+{"m":"INFO Testing logs...","ts":1589396137772,"id":2908612274,"l":"info"}
+
 /* snapshot: Test_handler_streamEvents_error */
 HTTP/1.1 200 OK
 Connection: close
@@ -144,7 +152,7 @@ Connection: keep-alive
 Content-Type: text/event-stream
 X-Accel-Buffering: no
 
-data: {"m":"INFO Testing logs...","ts":0,"id":4256192898}
+data: {"m":"INFO Testing logs...","ts":0,"id":4256192898,"l":"info"}
 
 event: container-stopped
 data: end of stream
@@ -170,7 +178,7 @@ Connection: keep-alive
 Content-Type: text/event-stream
 X-Accel-Buffering: no
 
-data: {"m":"INFO Testing logs...","ts":1589396137772,"id":1469707724}
+data: {"m":"INFO Testing logs...","ts":1589396137772,"id":1469707724,"l":"info"}
 id: 1589396137772
 
 event: container-stopped

web/logs.go

@@ -5,13 +5,11 @@ import (
 	"compress/gzip"
 	"context"
 	"encoding/json"
-	"hash/fnv"
 
 	"fmt"
 	"io"
 	"net/http"
 	"runtime"
-	"strings"
 
 	"time"
 
@@ -48,35 +46,6 @@ func (h *handler) downloadLogs(w http.ResponseWriter, r *http.Request) {
 	io.Copy(zw, reader)
 }
 
-func logEventIterator(reader *bufio.Reader) func() (docker.LogEvent, error) {
-	return func() (docker.LogEvent, error) {
-		message, readerError := reader.ReadString('\n')
-
-		h := fnv.New32a()
-		h.Write([]byte(message))
-
-		logEvent := docker.LogEvent{Id: h.Sum32(), Message: message}
-
-		if index := strings.IndexAny(message, " "); index != -1 {
-			logId := message[:index]
-			if timestamp, err := time.Parse(time.RFC3339Nano, logId); err == nil {
-				logEvent.Timestamp = timestamp.UnixMilli()
-				message = strings.TrimSuffix(message[index+1:], "\n")
-				logEvent.Message = message
-				if strings.HasPrefix(message, "{") && strings.HasSuffix(message, "}") {
-					var data map[string]interface{}
-					if err := json.Unmarshal([]byte(message), &data); err != nil {
-						log.Errorf("json unmarshal error while streaming %v", err.Error())
-					}
-					logEvent.Message = data
-				}
-			}
-		}
-
-		return logEvent, readerError
-	}
-}
-
 func (h *handler) fetchLogsBetweenDates(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/ld+json; charset=UTF-8")
 
@@ -93,13 +62,14 @@ func (h *handler) fetchLogsBetweenDates(w http.ResponseWriter, r *http.Request)
 	}
 
 	buffered := bufio.NewReader(reader)
-	eventIterator := logEventIterator(buffered)
+	iterator := docker.NewEventIterator(buffered)
 
 	for {
-		logEvent, readerError := eventIterator()
+		logEvent, readerError := iterator.Next()
 		if readerError != nil {
 			break
 		}
+
 		if err := json.NewEncoder(w).Encode(logEvent); err != nil {
 			log.Errorf("json encoding error while streaming %v", err.Error())
 		}
@@ -136,7 +106,7 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 		lastEventId = r.URL.Query().Get("lastEventId")
 	}
 
-	reader, err := h.client.ContainerLogs(r.Context(), container.ID, h.config.TailSize, lastEventId)
+	reader, err := h.client.ContainerLogs(r.Context(), container.ID, lastEventId)
 	if err != nil {
 		if err == io.EOF {
 			fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
@@ -164,13 +134,15 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 	}()
 
 	buffered := bufio.NewReader(reader)
-	var readerError error
-	eventIterator := logEventIterator(buffered)
+	iterator := docker.NewEventIterator(buffered)
 
 	for {
 
-		var logEvent docker.LogEvent
-		logEvent, readerError = eventIterator()
+		logEvent, err := iterator.Next()
+		if err != nil {
+			break
+		}
+
 		if buf, err := json.Marshal(logEvent); err != nil {
 			log.Errorf("json encoding error while streaming %v", err.Error())
 		} else {
@@ -181,19 +153,16 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 		}
 		fmt.Fprintf(w, "\n")
 		f.Flush()
-		if readerError != nil {
-			break
-		}
 	}
 
 	log.Debugf("streaming stopped: %v", container.ID)
 
-	if readerError == io.EOF {
+	if iterator.LastError() == io.EOF {
 		log.Debugf("container stopped: %v", container.ID)
 		fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
 		f.Flush()
-	} else if readerError != context.Canceled {
-		log.Errorf("unknown error while streaming %v", readerError.Error())
+	} else if iterator.LastError() != context.Canceled {
+		log.Errorf("unknown error while streaming %v", iterator.LastError().Error())
 	}
 
 	log.WithField("routines", runtime.NumGoroutine()).Debug("runtime goroutine stats")

web/routes.go

@@ -6,8 +6,10 @@ import (
 	"io/fs"
 	"io/ioutil"
 	"net/http"
+	"os"
 	"path"
 
+	"github.com/amir20/dozzle/analytics"
 	"github.com/amir20/dozzle/docker"
 
 	"github.com/gorilla/mux"
@@ -16,12 +18,13 @@ import (
 
 // Config is a struct for configuring the web service
 type Config struct {
-	Base     string
-	Addr     string
-	Version  string
-	TailSize int
-	Username string
-	Password string
+	Base        string
+	Addr        string
+	Version     string
+	Username    string
+	Password    string
+	Hostname    string
+	NoAnalytics bool
 }
 
 type handler struct {
@@ -78,6 +81,27 @@ func (h *handler) index(w http.ResponseWriter, req *http.Request) {
 	_, err := h.content.Open(req.URL.Path)
 	if err == nil && req.URL.Path != "" && req.URL.Path != "/" {
 		fileServer.ServeHTTP(w, req)
+		if !h.config.NoAnalytics {
+			go func() {
+				host, _ := os.Hostname()
+
+				if containers, err := h.client.ListContainers(); err == nil {
+					totalContainers := len(containers)
+					runningContainers := 0
+					for _, container := range containers {
+						if container.State == "running" {
+							runningContainers++
+						}
+					}
+					re := analytics.RequestEvent{
+						ClientId:          host,
+						TotalContainers:   totalContainers,
+						RunningContainers: runningContainers,
+					}
+					analytics.SendRequestEvent(re)
+				}
+			}()
+		}
 	} else {
 		if !isAuthorized(req) && req.URL.Path != "login" {
 			http.Redirect(w, req, path.Clean(h.config.Base+"/login"), http.StatusTemporaryRedirect)
@@ -111,11 +135,13 @@ func (h *handler) executeTemplate(w http.ResponseWriter, req *http.Request) {
 		Version             string
 		AuthorizationNeeded bool
 		Secured             bool
+		Hostname            string
 	}{
 		path,
 		h.config.Version,
 		h.isAuthorizationNeeded(req),
 		secured,
+		h.config.Hostname,
 	}
 	err = tmpl.Execute(w, data)
 	if err != nil {

web/routes_auth_test.go

@@ -0,0 +1,214 @@
+package web
+
+import (
+	"bytes"
+
+	"io"
+
+	"io/ioutil"
+	"mime/multipart"
+	"net/http"
+	"net/http/httptest"
+
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/magiconair/properties/assert"
+
+	"github.com/amir20/dozzle/docker"
+	"github.com/beme/abide"
+	"github.com/stretchr/testify/mock"
+	"github.com/stretchr/testify/require"
+
+	"github.com/spf13/afero"
+)
+
+func Test_createRoutes_index(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/"})
+	req, err := http.NewRequest("GET", "/", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_redirect(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
+
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
+	req, err := http.NewRequest("GET", "/foobar", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_redirect_with_auth(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
+
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar", Username: "amir", Password: "password"})
+	req, err := http.NewRequest("GET", "/foobar/", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_foobar(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("foo page"), 0644), "WriteFile should have no error.")
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
+	req, err := http.NewRequest("GET", "/foobar/", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_foobar_file(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
+	require.NoError(t, afero.WriteFile(fs, "test", []byte("test page"), 0644), "WriteFile should have no error.")
+
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
+	req, err := http.NewRequest("GET", "/foobar/test", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	assert.Equal(t, rr.Body.String(), "test page", "page doesn't match")
+}
+
+func Test_createRoutes_version(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/", Version: "dev"})
+	req, err := http.NewRequest("GET", "/version", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password(t *testing.T) {
+
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
+	req, err := http.NewRequest("GET", "/", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password_invalid(t *testing.T) {
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
+	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password_login_happy(t *testing.T) {
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
+
+	body := &bytes.Buffer{}
+	writer := multipart.NewWriter(body)
+
+	fw, err := writer.CreateFormField("username")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("amir"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	fw, err = writer.CreateFormField("password")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("password"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	writer.Close()
+
+	req, err := http.NewRequest("POST", "/api/validateCredentials", bytes.NewReader(body.Bytes()))
+	req.Header.Set("Content-Type", writer.FormDataContentType())
+
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+
+	assert.Equal(t, rr.Code, 200)
+	cookie := rr.Header().Get("Set-Cookie")
+	assert.Matches(t, cookie, "session=.+")
+}
+
+func Test_createRoutes_username_password_login_failed(t *testing.T) {
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
+
+	body := &bytes.Buffer{}
+	writer := multipart.NewWriter(body)
+
+	fw, err := writer.CreateFormField("username")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("amir"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	fw, err = writer.CreateFormField("password")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("bad"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	writer.Close()
+
+	req, err := http.NewRequest("POST", "/api/validateCredentials", bytes.NewReader(body.Bytes()))
+	req.Header.Set("Content-Type", writer.FormDataContentType())
+
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	assert.Equal(t, rr.Code, 401)
+}
+
+func Test_createRoutes_username_password_valid_session(t *testing.T) {
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", "123").Return(docker.Container{ID: "123"}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, "123", "").Return(ioutil.NopCloser(strings.NewReader("test data")), io.EOF)
+	handler := createHandler(mockedClient, nil, Config{Base: "/", Username: "amir", Password: "password"})
+
+	// Get cookie first
+	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	session, _ := store.Get(req, sessionName)
+	session.Values[authorityKey] = time.Now().Unix()
+	recorder := httptest.NewRecorder()
+	session.Save(req, recorder)
+	cookies := recorder.Result().Cookies()
+
+	// Test with cookie
+	req, err = http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	req.AddCookie(cookies[0])
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password_invalid_session(t *testing.T) {
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", "123").Return(docker.Container{ID: "123"}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, "since").Return(ioutil.NopCloser(strings.NewReader("test data")), io.EOF)
+	handler := createHandler(mockedClient, nil, Config{Base: "/", Username: "amir", Password: "password"})
+	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	req.AddCookie(&http.Cookie{Name: "session", Value: "baddata"})
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	assert.Equal(t, rr.Code, 401)
+}

web/routes_logs_test.go

@@ -0,0 +1,223 @@
+package web
+
+import (
+	"context"
+	"errors"
+	"io"
+	"time"
+
+	"io/ioutil"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/amir20/dozzle/docker"
+	"github.com/beme/abide"
+	"github.com/stretchr/testify/mock"
+	"github.com/stretchr/testify/require"
+)
+
+func Test_handler_streamLogs_happy(t *testing.T) {
+	id := "123456"
+	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
+	q := req.URL.Query()
+	q.Add("id", id)
+	req.URL.RawQuery = q.Encode()
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	mockedClient := new(MockedClient)
+	reader := ioutil.NopCloser(strings.NewReader("INFO Testing logs..."))
+	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, mock.Anything, "").Return(reader, nil)
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamLogs)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamLogs_happy_with_id(t *testing.T) {
+	id := "123456"
+	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
+	q := req.URL.Query()
+	q.Add("id", id)
+	req.URL.RawQuery = q.Encode()
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	mockedClient := new(MockedClient)
+	reader := ioutil.NopCloser(strings.NewReader("2020-05-13T18:55:37.772853839Z INFO Testing logs..."))
+	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, mock.Anything, "").Return(reader, nil)
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamLogs)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamLogs_happy_container_stopped(t *testing.T) {
+	id := "123456"
+	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
+	q := req.URL.Query()
+	q.Add("id", id)
+	req.URL.RawQuery = q.Encode()
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, id, "").Return(ioutil.NopCloser(strings.NewReader("")), io.EOF)
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamLogs)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamLogs_error_finding_container(t *testing.T) {
+	id := "123456"
+	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
+	q := req.URL.Query()
+	q.Add("id", id)
+	req.URL.RawQuery = q.Encode()
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", id).Return(docker.Container{}, errors.New("error finding container"))
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamLogs)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamLogs_error_reading(t *testing.T) {
+	id := "123456"
+	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
+	q := req.URL.Query()
+	q.Add("id", id)
+	req.URL.RawQuery = q.Encode()
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, id, "").Return(ioutil.NopCloser(strings.NewReader("")), errors.New("test error"))
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamLogs)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamEvents_happy(t *testing.T) {
+	req, err := http.NewRequest("GET", "/api/events/stream", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	mockedClient := new(MockedClient)
+	messages := make(chan docker.ContainerEvent)
+	errChannel := make(chan error)
+	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
+	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
+
+	go func() {
+		messages <- docker.ContainerEvent{
+			Name:    "start",
+			ActorID: "1234",
+		}
+		messages <- docker.ContainerEvent{
+			Name:    "something-random",
+			ActorID: "1234",
+		}
+		close(messages)
+	}()
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamEvents)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamEvents_error(t *testing.T) {
+	req, err := http.NewRequest("GET", "/api/events/stream", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	mockedClient := new(MockedClient)
+	messages := make(chan docker.ContainerEvent)
+	errChannel := make(chan error)
+	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
+	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
+
+	go func() {
+		errChannel <- errors.New("fake error")
+		close(messages)
+	}()
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamEvents)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+func Test_handler_streamEvents_error_request(t *testing.T) {
+	req, err := http.NewRequest("GET", "/api/events/stream", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	mockedClient := new(MockedClient)
+
+	messages := make(chan docker.ContainerEvent)
+	errChannel := make(chan error)
+	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
+	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
+
+	ctx, cancel := context.WithCancel(context.Background())
+	req = req.WithContext(ctx)
+
+	go func() {
+		cancel()
+	}()
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.streamEvents)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}
+
+// for /api/logs
+func Test_handler_between_dates(t *testing.T) {
+	req, err := http.NewRequest("GET", "/api/logs", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+
+	from, _ := time.Parse(time.RFC3339, "2018-01-01T00:00:00Z")
+	to, _ := time.Parse(time.RFC3339, "2018-01-01T010:00:00Z")
+
+	q := req.URL.Query()
+	q.Add("from", from.Format(time.RFC3339))
+	q.Add("to", to.Format(time.RFC3339))
+	q.Add("id", "123456")
+	req.URL.RawQuery = q.Encode()
+
+	mockedClient := new(MockedClient)
+	reader := ioutil.NopCloser(strings.NewReader("2020-05-13T18:55:37.772853839Z INFO Testing logs...\n2020-05-13T18:55:37.772853839Z INFO Testing logs...\n"))
+	mockedClient.On("ContainerLogsBetweenDates", mock.Anything, "123456", from, to).Return(reader, nil)
+
+	h := handler{client: mockedClient, config: &Config{}}
+	handler := http.HandlerFunc(h.fetchLogsBetweenDates)
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+	mockedClient.AssertExpectations(t)
+}

web/routes_test.go

@@ -1,27 +1,17 @@
 package web
 
 import (
-	"bytes"
 	"context"
-	"errors"
-	"io"
-	"io/fs"
-	"io/ioutil"
-	"mime/multipart"
-	"net/http"
-	"net/http/httptest"
-	"os"
-	"strings"
-	"testing"
 	"time"
 
+	"io"
+	"io/fs"
+
 	"github.com/gorilla/mux"
-	"github.com/magiconair/properties/assert"
 
 	"github.com/amir20/dozzle/docker"
-	"github.com/beme/abide"
+
 	"github.com/stretchr/testify/mock"
-	"github.com/stretchr/testify/require"
 
 	"github.com/spf13/afero"
 )
@@ -41,8 +31,8 @@ func (m *MockedClient) ListContainers() ([]docker.Container, error) {
 	return args.Get(0).([]docker.Container), args.Error(1)
 }
 
-func (m *MockedClient) ContainerLogs(ctx context.Context, id string, tailSize int, since string) (io.ReadCloser, error) {
-	args := m.Called(ctx, id, tailSize)
+func (m *MockedClient) ContainerLogs(ctx context.Context, id string, since string) (io.ReadCloser, error) {
+	args := m.Called(ctx, id, since)
 	return args.Get(0).(io.ReadCloser), args.Error(1)
 }
 
@@ -64,376 +54,15 @@ func (m *MockedClient) ContainerStats(context.Context, string, chan<- docker.Con
 	return nil
 }
 
-func Test_handler_streamLogs_happy(t *testing.T) {
-	id := "123456"
-	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
-	q := req.URL.Query()
-	q.Add("id", id)
-	req.URL.RawQuery = q.Encode()
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	mockedClient := new(MockedClient)
-	reader := ioutil.NopCloser(strings.NewReader("INFO Testing logs..."))
-	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
-	mockedClient.On("ContainerLogs", mock.Anything, mock.Anything, 300).Return(reader, nil)
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamLogs)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamLogs_happy_with_id(t *testing.T) {
-	id := "123456"
-	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
-	q := req.URL.Query()
-	q.Add("id", id)
-	req.URL.RawQuery = q.Encode()
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	mockedClient := new(MockedClient)
-	reader := ioutil.NopCloser(strings.NewReader("2020-05-13T18:55:37.772853839Z INFO Testing logs..."))
-	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
-	mockedClient.On("ContainerLogs", mock.Anything, mock.Anything, 300).Return(reader, nil)
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamLogs)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamLogs_happy_container_stopped(t *testing.T) {
-	id := "123456"
-	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
-	q := req.URL.Query()
-	q.Add("id", id)
-	req.URL.RawQuery = q.Encode()
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	mockedClient := new(MockedClient)
-	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
-	mockedClient.On("ContainerLogs", mock.Anything, id, 300).Return(ioutil.NopCloser(strings.NewReader("")), io.EOF)
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamLogs)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamLogs_error_finding_container(t *testing.T) {
-	id := "123456"
-	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
-	q := req.URL.Query()
-	q.Add("id", id)
-	req.URL.RawQuery = q.Encode()
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	mockedClient := new(MockedClient)
-	mockedClient.On("FindContainer", id).Return(docker.Container{}, errors.New("error finding container"))
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamLogs)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamLogs_error_reading(t *testing.T) {
-	id := "123456"
-	req, err := http.NewRequest("GET", "/api/logs/stream", nil)
-	q := req.URL.Query()
-	q.Add("id", id)
-	req.URL.RawQuery = q.Encode()
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	mockedClient := new(MockedClient)
-	mockedClient.On("FindContainer", id).Return(docker.Container{ID: id}, nil)
-	mockedClient.On("ContainerLogs", mock.Anything, id, 300).Return(ioutil.NopCloser(strings.NewReader("")), errors.New("test error"))
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamLogs)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamEvents_happy(t *testing.T) {
-	req, err := http.NewRequest("GET", "/api/events/stream", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	mockedClient := new(MockedClient)
-	messages := make(chan docker.ContainerEvent)
-	errChannel := make(chan error)
-	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
-	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
-
-	go func() {
-		messages <- docker.ContainerEvent{
-			Name:    "start",
-			ActorID: "1234",
-		}
-		messages <- docker.ContainerEvent{
-			Name:    "something-random",
-			ActorID: "1234",
-		}
-		close(messages)
-	}()
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamEvents)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamEvents_error(t *testing.T) {
-	req, err := http.NewRequest("GET", "/api/events/stream", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	mockedClient := new(MockedClient)
-	messages := make(chan docker.ContainerEvent)
-	errChannel := make(chan error)
-	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
-	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
-
-	go func() {
-		errChannel <- errors.New("fake error")
-		close(messages)
-	}()
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamEvents)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_handler_streamEvents_error_request(t *testing.T) {
-	req, err := http.NewRequest("GET", "/api/events/stream", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	mockedClient := new(MockedClient)
-
-	messages := make(chan docker.ContainerEvent)
-	errChannel := make(chan error)
-	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
-	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
-
-	ctx, cancel := context.WithCancel(context.Background())
-	req = req.WithContext(ctx)
-
-	go func() {
-		cancel()
-	}()
-
-	h := handler{client: mockedClient, config: &Config{TailSize: 300}}
-	handler := http.HandlerFunc(h.streamEvents)
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
-}
-
-func Test_createRoutes_index(t *testing.T) {
-	fs := afero.NewMemMapFs()
-	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/"})
-	req, err := http.NewRequest("GET", "/", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_redirect(t *testing.T) {
-	fs := afero.NewMemMapFs()
-	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-
-	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
-	req, err := http.NewRequest("GET", "/foobar", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_redirect_with_auth(t *testing.T) {
-	fs := afero.NewMemMapFs()
-	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-
-	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar", Username: "amir", Password: "password"})
-	req, err := http.NewRequest("GET", "/foobar/", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_foobar(t *testing.T) {
-	fs := afero.NewMemMapFs()
-	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("foo page"), 0644), "WriteFile should have no error.")
-	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
-	req, err := http.NewRequest("GET", "/foobar/", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_foobar_file(t *testing.T) {
-	fs := afero.NewMemMapFs()
-	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-	require.NoError(t, afero.WriteFile(fs, "test", []byte("test page"), 0644), "WriteFile should have no error.")
-
-	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
-	req, err := http.NewRequest("GET", "/foobar/test", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-
-	handler.ServeHTTP(rr, req)
-	assert.Equal(t, rr.Body.String(), "test page", "page doesn't match")
-}
-
-func Test_createRoutes_version(t *testing.T) {
-	fs := afero.NewMemMapFs()
-	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/", Version: "dev"})
-	req, err := http.NewRequest("GET", "/version", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_username_password(t *testing.T) {
-
-	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
-	req, err := http.NewRequest("GET", "/", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_username_password_invalid(t *testing.T) {
-	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
-	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_username_password_login_happy(t *testing.T) {
-	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
-
-	body := &bytes.Buffer{}
-	writer := multipart.NewWriter(body)
-
-	fw, err := writer.CreateFormField("username")
-	require.NoError(t, err, "Creating field should not be error.")
-	_, err = io.Copy(fw, strings.NewReader("amir"))
-	require.NoError(t, err, "Copying field should not result in error.")
-
-	fw, err = writer.CreateFormField("password")
-	require.NoError(t, err, "Creating field should not be error.")
-	_, err = io.Copy(fw, strings.NewReader("password"))
-	require.NoError(t, err, "Copying field should not result in error.")
-
-	writer.Close()
-
-	req, err := http.NewRequest("POST", "/api/validateCredentials", bytes.NewReader(body.Bytes()))
-	req.Header.Set("Content-Type", writer.FormDataContentType())
-
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-
-	assert.Equal(t, rr.Code, 200)
-	cookie := rr.Header().Get("Set-Cookie")
-	assert.Matches(t, cookie, "session=.+")
-}
-
-func Test_createRoutes_username_password_login_failed(t *testing.T) {
-	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password"})
-
-	body := &bytes.Buffer{}
-	writer := multipart.NewWriter(body)
-
-	fw, err := writer.CreateFormField("username")
-	require.NoError(t, err, "Creating field should not be error.")
-	_, err = io.Copy(fw, strings.NewReader("amir"))
-	require.NoError(t, err, "Copying field should not result in error.")
-
-	fw, err = writer.CreateFormField("password")
-	require.NoError(t, err, "Creating field should not be error.")
-	_, err = io.Copy(fw, strings.NewReader("bad"))
-	require.NoError(t, err, "Copying field should not result in error.")
-
-	writer.Close()
-
-	req, err := http.NewRequest("POST", "/api/validateCredentials", bytes.NewReader(body.Bytes()))
-	req.Header.Set("Content-Type", writer.FormDataContentType())
-
-	require.NoError(t, err, "NewRequest should not return an error.")
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	assert.Equal(t, rr.Code, 401)
-}
-
-func Test_createRoutes_username_password_valid_session(t *testing.T) {
-	mockedClient := new(MockedClient)
-	mockedClient.On("FindContainer", "123").Return(docker.Container{ID: "123"}, nil)
-	mockedClient.On("ContainerLogs", mock.Anything, "123", 0).Return(ioutil.NopCloser(strings.NewReader("test data")), io.EOF)
-	handler := createHandler(mockedClient, nil, Config{Base: "/", Username: "amir", Password: "password"})
-
-	// Get cookie first
-	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	session, _ := store.Get(req, sessionName)
-	session.Values[authorityKey] = time.Now().Unix()
-	recorder := httptest.NewRecorder()
-	session.Save(req, recorder)
-	cookies := recorder.Result().Cookies()
-
-	// Test with cookie
-	req, err = http.NewRequest("GET", "/api/logs/stream?id=123", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	req.AddCookie(cookies[0])
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-}
-
-func Test_createRoutes_username_password_invalid_session(t *testing.T) {
-	mockedClient := new(MockedClient)
-	mockedClient.On("FindContainer", "123").Return(docker.Container{ID: "123"}, nil)
-	mockedClient.On("ContainerLogs", mock.Anything, "123", 0).Return(ioutil.NopCloser(strings.NewReader("test data")), io.EOF)
-	handler := createHandler(mockedClient, nil, Config{Base: "/", Username: "amir", Password: "password"})
-	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-	req.AddCookie(&http.Cookie{Name: "session", Value: "baddata"})
-	rr := httptest.NewRecorder()
-	handler.ServeHTTP(rr, req)
-	assert.Equal(t, rr.Code, 401)
+func (m *MockedClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) (io.ReadCloser, error) {
+	args := m.Called(ctx, id, from, to)
+	return args.Get(0).(io.ReadCloser), args.Error(1)
 }
 
 func createHandler(client docker.Client, content fs.FS, config Config) *mux.Router {
 	if client == nil {
 		client = new(MockedClient)
+		client.(*MockedClient).On("ListContainers").Return([]docker.Container{}, nil)
 	}
 
 	if content == nil {
@@ -448,9 +77,3 @@ func createHandler(client docker.Client, content fs.FS, config Config) *mux.Rout
 		config:  &config,
 	})
 }
-
-func TestMain(m *testing.M) {
-	exit := m.Run()
-	abide.Cleanup()
-	os.Exit(exit)
-}