Release 3.10.2

* Tries to use-scroll instead of scroll listener

* Moves observer to scrollable content only

* Fixes bugs

.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [["env", { "modules": false }]],
-  "env": {
-    "test": {
-      "presets": [["env", { "targets": { "node": "current" } }]]
-    }
-  }
-}

.dockerignore

@@ -1,8 +1,8 @@
 node_modules
 .cache
 .idea
+.github
 dist
 .git
-static
-integration
-demo.gif
+e2e
+

.github/.kodiak.toml

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

.github/dependabot.yml

@@ -31,7 +31,7 @@ updates:
     schedule:
       interval: daily
   - package-ecosystem: npm
-    directory: "/integration"
+    directory: "/e2e"
     labels:
       - "npm"
       - "dependencies"

.github/workflows/deploy.yml

@@ -9,23 +9,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Install Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.5.1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.20.1
       - name: Install dependencies
-        run: yarn
+        run: pnpm install
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v2.1.3
+        uses: actions/setup-go@v2.1.5
         with:
-          go-version: 1.16.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
@@ -33,11 +37,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build
+        run: docker-compose -f e2e/docker-compose.yml build
       - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+        run: 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
@@ -45,52 +49,46 @@ jobs:
     steps:
       - name: Docker meta
         id: meta
-        uses: crazy-max/ghaction-docker-meta@v2
+        uses: docker/metadata-action@v3
         with:
           images: amir20/dozzle
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v1.6.0
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v1.12.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Cache Docker layers
-        uses: actions/cache@v2
-        with:
-          path: /tmp/.buildx-cache
-          key: ${{ runner.os }}-buildx-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-buildx-
       - name: Build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v2.8.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
-          cache-from: type=local,src=/tmp/.buildx-cache
-          cache-to: type=local,dest=/tmp/.buildx-cache-new
-      - # Temp fix
-        # https://github.com/docker/build-push-action/issues/252
-        # https://github.com/moby/buildkit/issues/1896
-        name: Move cache
-        run: |
-          rm -rf /tmp/.buildx-cache
-          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+          build-args: TAG=${{ steps.meta.outputs.version }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=amir20/dozzle:latest
+          cache-to: type=inline
   git-release:
     needs: [buildx]
     name: Github Release
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
         with:
           fetch-depth: 0
       - name: Install Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.5.1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.20.1
       - name: Install dependencies
-        run: yarn
+        run: pnpm install
       - name: Release to Github
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn release --github.release --no-increment --no-git --ci
+        run: pnpm run release -- --github.release --no-increment --no-git --ci

.github/workflows/dev.yml

@@ -0,0 +1,37 @@
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+name: Push container
+jobs:
+  buildx:
+    name: Push branches and PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: amir20/dozzle
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v1.12.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v2.8.0
+        with:
+          push: true
+          platforms: linux/amd64
+          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

.github/workflows/test.yml

@@ -1,4 +1,10 @@
-on: push
+on:
+  push:
+    branches:
+      - "**"
+  pull_request:
+    branches:
+      - master
 name: Test
 jobs:
   npm-test:
@@ -6,23 +12,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Install Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.5.1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.20.1
       - name: Install dependencies
-        run: yarn
+        run: pnpm install
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v2.1.3
+        uses: actions/setup-go@v2.1.5
         with:
-          go-version: 1.16.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
@@ -30,8 +40,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build
+        run: docker-compose -f e2e/docker-compose.yml build
       - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+        run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

.gitignore

@@ -3,6 +3,5 @@ dist
 node_modules
 .cache
 static
-a_main-packr.go
 dozzle
-gin-bin
+coverage

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

.kodiak.toml

@@ -1 +0,0 @@
-version = 1

Dockerfile

@@ -1,27 +1,29 @@
 # Build assets
-FROM node:current-alpine as node
+FROM node:17-alpine as node
 
-RUN apk add --no-cache git openssh python make g++ util-linux
+RUN apk add --no-cache git openssh make g++ util-linux curl python3 && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
 
 WORKDIR /build
 
-# Install dependencies
-COPY package*.json yarn.lock ./
-RUN yarn install --ignore-scripts --network-timeout 1000000
+# Install dependencies from lock file
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch --prod
 
-# Copy config files
-COPY .* webpack*.js ./
+# Copy files
+COPY package.json .* vite.config.ts index.html ./
 
 # Copy assets to build
 COPY assets ./assets
 
+# Install dependencies
+RUN pnpm install -r --offline --prod
+
 # Do the build
-RUN yarn build
+RUN pnpm build
 
-FROM golang:1.16-alpine AS builder
+FROM golang:1.17.6-alpine AS builder
 
-RUN apk add --no-cache git ca-certificates
-RUN mkdir /dozzle
+RUN apk add --no-cache git ca-certificates && mkdir /dozzle
 
 WORKDIR /dozzle
 
@@ -30,10 +32,13 @@ COPY go.* ./
 RUN go mod download
 
 # Copy assets built with node
-COPY --from=node /build/static ./static
+COPY --from=node /build/dist ./dist
 
 # Copy all other files
-COPY . .
+COPY analytics ./analytics
+COPY docker ./docker
+COPY web ./web
+COPY main.go ./
 
 # Args
 ARG TAG=dev

Makefile

@@ -1,24 +1,24 @@
 .PHONY: clean
 clean:
-	@rm -rf static
-	@go clean
+	@rm -rf dist
+	@go clean -i
 
-.PHONY: static
-static:
-	@yarn build
+.PHONY: dist
+dist:
+	@pnpm build
 
-.PHONY: fake_static
-fake_static:
-	@echo 'Skipping yarn build'
-	@mkdir -p static
-	@echo "yarn build was skipped" > static/index.html
+.PHONY: fake_assets
+fake_assets:
+	@echo 'Skipping asset build'
+	@mkdir -p dist
+	@echo "assets build was skipped" > dist/index.html
 
 .PHONY: test
-test: fake_static
+test: fake_assets
 	go test -cover ./...
 
 .PHONY: build
-build: static
+build: dist
 	CGO_ENABLED=0 go build -ldflags "-s -w"
 
 .PHONY: docker
@@ -27,8 +27,8 @@ docker:
 
 .PHONY: dev
 dev:
-	yarn dev
+	pnpm dev
 
 .PHONY: int
 int:
-	docker-compose -f integration/docker-compose.test.yml up --build --force-recreate --exit-code-from integration
+	docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

README.md

@@ -1,13 +1,12 @@
 # Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-Dozzle is a simple, lightweight application that provides you with a web based interface to monitor your Docker container logs live. It doesn’t store log information, it is for live monitoring of your container logs only.
+Dozzle is a small lightweight application with a web based interface to monitor Docker logs. It doesn’t store any log files. It is for live monitoring of your container logs only.
 
 ![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
 
 [![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-[![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-[![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+[![Docker Version](https://img.shields.io/docker/v/amir20/dozzle?sort=semver)](https://hub.docker.com/r/amir20/dozzle/)
 ![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
 
 ## Features
@@ -20,9 +19,9 @@ Dozzle is a simple, lightweight application that provides you with a web based i
 - Live stats with memory and CPU usage
 - Authentication with username and password 🚨
 
-While Dozzle should work for most, it is not meant to be a full logging solution. For enterprise applications, products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited.
+Dozzle should work for most. It has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
 
-Dozzle won't cost any money and aims to focus only on real-time logs.
+Dozzle doesn't cost any money and aims to focus on real-time debugging.
 
 ## Getting Dozzle
 
@@ -71,9 +70,11 @@ If you wish to restrict the containers shown you can pass the `--filter` paramet
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters.
+this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters. Multiple `--filter` arguments can be provided.
 
-Dozzle supports very simple authentication out of the box with username and password. You should deploy using SSL to keep the credentials safe.
+#### 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`.
 
 #### Changing base URL
 
@@ -84,21 +85,28 @@ then you can override by using `--base /foobar`. See env variables below for usi
 
 Dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
 
+#### Analytics collected
+
+Dozzle collects anonymous user configurations using Google Analytics. Why? Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [ Data Studio dashboard](https://datastudio.google.com/s/naeIu0MiWsY).
+
+If you do not want to be tracked at all, see the `--no-analytics` flag below.
+
 #### Environment variables and configuration
 
-Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or enviroment variables. The table below outlines all supported options and their respective env vars.
+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`    | `""`    |
-| `--key`      | `DOZZLE_KEY`         | `""`    |
+| 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`     | `""`    |
+| `--key`          | `DOZZLE_KEY`          | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
 
 Note: When using username and password `DOZZLE_KEY` is required for session management.
 
@@ -134,7 +142,9 @@ Below is an example with nginx and using `proxy_pass` to disable buffering.
 <details>
  <summary>What data does Dozzle collect?</summary>
 
-Dozzle does not collect any metrics or analytics. Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/routes.go#L33-L38) Content Security Policy which only allows the following policies:
+Dozzle does collect some analytics. Analytics is anonymous usage tracking of the features which are used the most. See the section above on how to disable any analytic collection.
+
+In the browser, Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/web/csp.go#L9) Content Security Policy which only allows the following policies:
 
 - Allow connect to `api.github.com` to fetch most recent version.
 - Only allow `<script>` and `<style>` files from `self`
@@ -143,6 +153,13 @@ Dozzle opens all links with `rel="noopener"`.
 
 </details>
 
+<details>
+ <summary>We have tools that uses Dozzle when a new container is created. How can I get a direct link to a container by name?</summary>
+
+Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets/pages/Show.vue) that can be used to search containers by name and then forward to that container. For example, if you have a container with name `"foo.bar"` and id `abc123`, you can send your users to `/show?name=foo.bar` which will be forwarded to `/container/abc123`.
+
+</details>
+
 ## License
 
 [MIT](LICENSE)
@@ -154,5 +171,5 @@ To Build and test locally:
 1. Install NodeJs.
 2. Install Go.
 3. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
-4. Install node modules with `yarn`.
-5. Do `yarn dev`
+4. Install node modules with `pnpm`.
+5. Do `pnpm dev`

analytics/ga.go

@@ -0,0 +1,55 @@
+package analytics
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/http/httputil"
+
+	log "github.com/sirupsen/logrus"
+)
+
+func SendStartEvent(se StartEvent) error {
+	postBody := map[string]interface{}{
+		"client_id": se.ClientId,
+		"events": []map[string]interface{}{
+			{
+				"name":   "start",
+				"params": se,
+			},
+		},
+	}
+
+	jsonValue, err := json.Marshal(postBody)
+	if err != nil {
+		return err
+	}
+
+	req, err := http.NewRequest("POST", "https://www.google-analytics.com/mp/collect", bytes.NewBuffer(jsonValue))
+	if err != nil {
+		return err
+	}
+
+	q := req.URL.Query()
+	q.Add("measurement_id", "G-S6NT05VXK9")
+	q.Add("api_secret", "7FFhe65HQK-bXvujpQMquQ")
+	req.URL.RawQuery = q.Encode()
+
+	response, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return err
+	}
+	defer response.Body.Close()
+
+	if response.StatusCode/100 != 2 {
+		dump, err := httputil.DumpResponse(response, true)
+		if err != nil {
+			return err
+		}
+		log.Debugf("%v", string(dump))
+		return fmt.Errorf("google analytics returned non-2xx status code: %v", response.Status)
+	}
+
+	return nil
+}

analytics/types.go

@@ -0,0 +1,11 @@
+package analytics
+
+type StartEvent struct {
+	ClientId      string `json:"-"`
+	Version       string `json:"version"`
+	FilterLength  int    `json:"filterLength"`
+	CustomAddress bool   `json:"customAddress"`
+	CustomBase    bool   `json:"customBase"`
+	TailSize      int    `json:"tailSize"`
+	Protected     bool   `json:"protected"`
+}

assets/App.spec.js

@@ -1,54 +0,0 @@
-import EventSource from "eventsourcemock";
-import { shallowMount, RouterLinkStub, createLocalVue } from "@vue/test-utils";
-import Vuex from "vuex";
-import App from "./App";
-
-jest.mock("./store/config.js", () => ({ base: "" }));
-
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
-describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true, icon: true };
-  let store;
-
-  beforeEach(() => {
-    global.EventSource = EventSource;
-    const state = {
-      settings: { menuWidth: 15 },
-      containers: [{ id: "abc", name: "Test 1" }],
-    };
-
-    const getters = {
-      visibleContainers(store) {
-        return store.containers;
-      },
-      activeContainers() {
-        return [];
-      },
-    };
-
-    store = new Vuex.Store({
-      state,
-      getters,
-    });
-  });
-
-  test("has right title", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    wrapper.vm.$store.state.containers = [
-      { id: "abc", name: "Test 1" },
-      { id: "xyz", name: "Test 2" },
-    ];
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.title).toContain("2 containers");
-  });
-
-  test("renders correctly", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});

assets/App.vue

@@ -3,7 +3,7 @@
     <mobile-menu v-if="isMobile && !authorizationNeeded"></mobile-menu>
 
     <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="settings.menuWidth" v-if="!authorizationNeeded && !isMobile && !collapseNav">
+      <pane min-size="10" :size="menuWidth" v-if="!authorizationNeeded && !isMobile && !collapseNav">
         <side-menu @search="showFuzzySearch"></side-menu>
       </pane>
       <pane min-size="10">
@@ -18,7 +18,7 @@
                 show-title
                 scrollable
                 closable
-                @close="removeActiveContainer(other)"
+                @close="containerStore.removeActiveContainer(other)"
               ></log-container>
             </pane>
           </template>
@@ -27,121 +27,97 @@
     </splitpanes>
     <button
       @click="collapseNav = !collapseNav"
-      class="button is-small is-rounded is-settings-control"
+      class="button is-rounded"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
       v-if="!isMobile && !authorizationNeeded"
     >
-      <span class="icon">
-        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
+      <span class="icon ml-2" v-if="collapseNav">
+        <mdi-light-chevron-right />
+      </span>
+      <span class="icon" v-else>
+        <mdi-light-chevron-left />
       </span>
     </button>
   </main>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<script lang="ts" setup>
 import { Splitpanes, Pane } from "splitpanes";
-
+import { ref, onMounted, watchEffect } from "vue";
+import { storeToRefs } from "pinia";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
 import hotkeys from "hotkeys-js";
 
-import LogContainer from "./components/LogContainer";
-import SideMenu from "./components/SideMenu";
-import MobileMenu from "./components/MobileMenu";
+import { setTitle } from "@/composables/title";
+import { isMobile } from "@/composables/media";
+import { smallerScrollbars, lightTheme, menuWidth } from "@/composables/settings";
+import { useContainerStore } from "@/stores/container";
+import config from "@/stores/config";
 
-import PastTime from "./components/PastTime";
-import Icon from "./components/Icon";
-import FuzzySearchModal from "./components/FuzzySearchModal";
+import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
+import LogContainer from "@/components/LogContainer.vue";
+import SideMenu from "@/components/SideMenu.vue";
+import MobileMenu from "@/components/MobileMenu.vue";
 
-export default {
-  name: "App",
-  components: {
-    Icon,
-    SideMenu,
-    LogContainer,
-    MobileMenu,
-    Splitpanes,
-    PastTime,
-    Pane,
-  },
-  data() {
-    return {
-      title: "",
-      collapseNav: false,
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-      titleTemplate: "%s - Dozzle",
-    };
-  },
-  mounted() {
-    if (this.hasSmallerScrollbars) {
-      document.documentElement.classList.add("has-custom-scrollbars");
-    }
-    if (this.hasLightTheme) {
-      document.documentElement.setAttribute("data-theme", "light");
-    }
-    this.menuWidth = this.settings.menuWidth;
-    hotkeys("command+k, ctrl+k", (event, handler) => {
-      this.showFuzzySearch();
-    });
-  },
-  watch: {
-    hasSmallerScrollbars(newValue, oldValue) {
-      if (newValue) {
-        document.documentElement.classList.add("has-custom-scrollbars");
-      } else {
-        document.documentElement.classList.remove("has-custom-scrollbars");
-      }
-    },
-    hasLightTheme(newValue, oldValue) {
-      if (newValue) {
-        document.documentElement.setAttribute("data-theme", "light");
-      } else {
-        document.documentElement.removeAttribute("data-theme");
-      }
-    },
-    visibleContainers() {
-      this.title = `${this.visibleContainers.length} containers`;
-    },
-  },
-  computed: {
-    ...mapState(["isMobile", "settings", "containers", "authorizationNeeded"]),
-    ...mapGetters(["visibleContainers", "activeContainers"]),
-    hasSmallerScrollbars() {
-      return this.settings.smallerScrollbars;
-    },
-    hasLightTheme() {
-      return this.settings.lightTheme;
-    },
-  },
-  methods: {
-    ...mapActions({
-      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
-      updateSetting: "UPDATE_SETTING",
-    }),
-    onResized(e) {
-      if (e.length == 2) {
-        const menuWidth = e[0].size;
-        this.updateSetting({ menuWidth });
-      }
-    },
-    showFuzzySearch() {
-      this.$buefy.modal.open({
-        parent: this,
-        component: FuzzySearchModal,
-        animation: "false",
-        width: 600,
-      });
-    },
-  },
-};
+const collapseNav = ref(false);
+const { oruga } = useProgrammatic();
+const { authorizationNeeded } = config;
+
+const containerStore = useContainerStore();
+
+const { activeContainers, visibleContainers } = storeToRefs(containerStore);
+
+onMounted(() => {
+  if (smallerScrollbars.value) {
+    document.documentElement.classList.add("has-custom-scrollbars");
+  }
+  if (lightTheme.value) {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+
+  hotkeys("command+k, ctrl+k", (event, handler) => {
+    event.preventDefault();
+    showFuzzySearch();
+  });
+});
+
+watchEffect(() => {
+  setTitle(`${visibleContainers.value.length} containers`);
+});
+
+watchEffect(() => {
+  if (smallerScrollbars.value) {
+    document.documentElement.classList.add("has-custom-scrollbars");
+  } else {
+    document.documentElement.classList.remove("has-custom-scrollbars");
+  }
+
+  if (lightTheme.value) {
+    document.documentElement.setAttribute("data-theme", "light");
+  } else {
+    document.documentElement.removeAttribute("data-theme");
+  }
+});
+
+function showFuzzySearch() {
+  oruga.modal.open({
+    // parent: this,
+    component: FuzzySearchModal,
+    animation: "false",
+    width: 600,
+    active: true,
+  });
+}
+function onResized(e) {
+  if (e.length == 2) {
+    menuWidth.value = e[0].size;
+  }
+}
 </script>
 
 <style scoped lang="scss">
-::v-deep .splitpanes--vertical > .splitpanes__splitter {
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
   min-width: 3px;
   background: var(--border-color);
   &:hover {

assets/__snapshots__/App.spec.js.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<App /> renders correctly 1`] = `
-<main>
-  <!---->
-   
-  <splitpanes-stub
-    dblclicksplitter="true"
-    pushotherpanes="true"
-  >
-    <pane-stub
-      maxsize="100"
-      minsize="10"
-      size="15"
-    >
-      <side-menu-stub />
-    </pane-stub>
-     
-    <pane-stub
-      maxsize="100"
-      minsize="10"
-    >
-      <splitpanes-stub
-        dblclicksplitter="true"
-        pushotherpanes="true"
-      >
-        <pane-stub
-          class="has-min-height router-view"
-          maxsize="100"
-          minsize="0"
-        >
-          <router-view-stub />
-        </pane-stub>
-         
-      </splitpanes-stub>
-    </pane-stub>
-  </splitpanes-stub>
-   
-  <button
-    class="button is-small is-rounded is-settings-control"
-    id="hide-nav"
-  >
-    <span
-      class="icon"
-    >
-      <icon-stub
-        name="chevron-left"
-      />
-    </span>
-  </button>
-</main>
-`;

assets/components.d.ts

@@ -0,0 +1,26 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ContainerStat: typeof import('./components/ContainerStat.vue')['default']
+    ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
+    FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
+    InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
+    LogActionsToolbar: typeof import('./components/LogActionsToolbar.vue')['default']
+    LogContainer: typeof import('./components/LogContainer.vue')['default']
+    LogEventSource: typeof import('./components/LogEventSource.vue')['default']
+    LogViewer: typeof import('./components/LogViewer.vue')['default']
+    LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
+    MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    PastTime: typeof import('./components/PastTime.vue')['default']
+    RelativeTime: typeof import('./components/RelativeTime.vue')['default']
+    ScrollableView: typeof import('./components/ScrollableView.vue')['default']
+    ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
+    Search: typeof import('./components/Search.vue')['default']
+    SideMenu: typeof import('./components/SideMenu.vue')['default']
+  }
+}
+
+export { }

assets/components/ContainerStat.vue

@@ -4,37 +4,44 @@
       {{ state }}
     </div>
     <div class="column is-narrow" v-if="stat.memoryUsage !== null">
-      <span class="has-text-weight-light">mem</span>
+      <span class="has-text-weight-light has-spacer">mem</span>
       <span class="has-text-weight-bold">
         {{ formatBytes(stat.memoryUsage) }}
       </span>
     </div>
 
     <div class="column is-narrow" v-if="stat.cpu !== null">
-      <span class="has-text-weight-light">load</span>
+      <span class="has-text-weight-light has-spacer">load</span>
       <span class="has-text-weight-bold"> {{ stat.cpu }}% </span>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    stat: Object,
-    state: String,
+<script lang="ts" setup>
+import { ContainerStat } from "@/types/Container";
+import { PropType } from "vue";
+
+defineProps({
+  stat: {
+    type: Object as PropType<ContainerStat>,
+    required: true,
   },
-  name: "ContainerStat",
-  methods: {
-    formatBytes(bytes, decimals = 2) {
-      if (bytes === 0) return "0 Bytes";
-      const k = 1024;
-      const dm = decimals < 0 ? 0 : decimals;
-      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-    },
-  },
-};
+  state: String,
+});
+function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.has-spacer {
+  &::after {
+    content: " ";
+  }
+}
+</style>

assets/components/ContainerTitle.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="columns is-marginless has-text-weight-bold is-family-monospace">
-    <span class="column is-ellipsis">{{ value }}</span>
+    <span class="column is-ellipsis">
+      {{ container.name }}
+      <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
+    </span>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    value: String,
+<script lang="ts" setup>
+import { Container } from "@/types/Container";
+import { PropType } from "vue";
+defineProps({
+  container: {
+    type: Object as PropType<Container>,
+    required: true,
   },
-  name: "ContainerTitle",
-};
+});
 </script>
 
 <style lang="scss" scoped></style>

assets/components/FuzzySearchModal.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="panel">
-    <b-autocomplete
+    <o-autocomplete
       ref="autocomplete"
       v-model="query"
-      placeholder="Search containers using ⌘ + k, ⌃k"
+      placeholder="Search containers using ⌘ + k or ctrl + k"
       field="name"
       open-on-focus
       keep-first
@@ -11,101 +11,96 @@
       :data="results"
       @select="selected"
     >
-      <template slot-scope="props">
+      <template #default="props">
         <div class="media">
           <div class="media-left">
-            <span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
+            <span class="icon is-small" :class="props.option.state">
+              <octicon-container-24 />
+            </span>
           </div>
           <div class="media-content">
             {{ props.option.name }}
           </div>
           <div class="media-right">
             <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
-              <icon name="column"></icon>
+              <cil-columns />
             </span>
           </div>
         </div>
       </template>
-    </b-autocomplete>
+    </o-autocomplete>
   </div>
 </template>
 
-<script>
-import { mapState, mapActions } from "vuex";
+<script lang="ts" setup>
 import fuzzysort from "fuzzysort";
+import { computed, nextTick, onMounted, ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { Container } from "@/types/Container";
 
-import PastTime from "./PastTime";
-import Icon from "./Icon";
+const props = defineProps({
+  maxResults: {
+    default: 20,
+    type: Number,
+  },
+});
 
-export default {
-  props: {
-    maxResults: {
-      default: 20,
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      query: "",
-    };
-  },
-  name: "FuzzySearchModal",
-  components: {
-    Icon,
-    PastTime,
-  },
-  mounted() {
-    this.$nextTick(() => this.$refs.autocomplete.focus());
-  },
-  watch: {},
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-    selected(item) {
-      this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
-      this.$emit("close");
-    },
-    addColumn(container) {
-      this.appendActiveContainer(container);
-      this.$emit("close");
-    },
-  },
-  computed: {
-    ...mapState(["containers"]),
-    preparedContainers() {
-      return this.containers.map((c) => ({
-        name: c.name,
-        id: c.id,
-        created: c.created,
-        state: c.state,
-        preparedName: fuzzysort.prepare(c.name),
-      }));
-    },
-    results() {
-      const options = {
-        limit: this.maxResults,
-        key: "preparedName",
-      };
-      if (this.query) {
-        const results = fuzzysort.go(this.query, this.preparedContainers, options);
-        results.forEach((result) => {
-          if (result.obj.state === "running") {
-            result.score += 1;
-          }
-        });
-        return results.sort((a, b) => b.score - a.score).map((i) => i.obj);
-      } else {
-        return [...this.containers].sort((a, b) => b.created - a.created);
+const emit = defineEmits(["close"]);
+
+const query = ref("");
+const autocomplete = ref<HTMLElement>();
+const router = useRouter();
+const store = useContainerStore();
+const { containers } = storeToRefs(store);
+const preparedContainers = computed(() =>
+  containers.value.map(({ name, id, created, state }) =>
+    reactive({
+      name,
+      id,
+      created,
+      state,
+      preparedName: fuzzysort.prepare(name),
+    })
+  )
+);
+
+const results = computed(() => {
+  const options = {
+    limit: props.maxResults,
+    key: "preparedName",
+  };
+  if (query.value) {
+    const results = fuzzysort.go(query.value, preparedContainers.value, options);
+    results.forEach((result) => {
+      if (result.obj.state === "running") {
+        // @ts-ignore
+        result.score += 1;
       }
-    },
-  },
-};
+    });
+    return [...results].sort((a, b) => b.score - a.score).map((i) => i.obj);
+  } else {
+    return [...preparedContainers.value].sort((a, b) => b.created - a.created);
+  }
+});
+
+onMounted(() => nextTick(() => autocomplete.value?.focus()));
+
+function selected(item: { id: string; name: string }) {
+  router.push({ name: "container", params: { id: item.id, name: item.name } });
+  emit("close");
+}
+function addColumn(container: Container) {
+  store.appendActiveContainer(container);
+  emit("close");
+}
 </script>
 
 <style lang="scss" scoped>
 .panel {
   min-height: 400px;
+  width: 580px;
 }
 
 .running {
@@ -122,7 +117,7 @@ export default {
   }
 }
 
-::v-deep a.dropdown-item {
+:deep(a.dropdown-item) {
   padding-right: 1em;
   .media-right {
     visibility: hidden;
@@ -131,4 +126,8 @@ export default {
     visibility: visible;
   }
 }
+
+.icon {
+  vertical-align: middle;
+}
 </style>

assets/components/Icon.vue

@@ -1,32 +0,0 @@
-<template functional>
-  <svg class="icomoon" :class="['icon-' + props.name]">
-    <use :href="'#icon-' + props.name"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      required: true,
-      type: String,
-    },
-  },
-  name: "Icon",
-};
-</script>
-<style lang="scss" scoped>
-.icomoon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-
-  .icon:not(.keep-size) & {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

assets/components/InfiniteLoader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="observer" class="infinte-loader">
+  <div ref="root" class="infinte-loader">
     <div class="spinner" v-show="isLoading">
       <div class="bounce1"></div>
       <div class="bounce2"></div>
@@ -8,40 +8,34 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "InfiniteLoader",
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  props: {
-    onLoadMore: Function,
-    enabled: Boolean,
-  },
-  mounted() {
-    const intersectionObserver = new IntersectionObserver(
-      async (entries) => {
-        if (entries[0].intersectionRatio <= 0) return;
-        if (this.onLoadMore && this.enabled) {
-          const scrollingParent = this.$el.closest("[data-scrolling]") || document.documentElement;
-          const previousHeight = scrollingParent.scrollHeight;
-          this.isLoading = true;
-          await this.onLoadMore();
-          this.isLoading = false;
-          this.$nextTick(() => (scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight));
-        }
-      },
-      { threshholds: 1 }
-    );
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
-    intersectionObserver.observe(this.$refs.observer);
+const props = defineProps({
+  onLoadMore: Function,
+  enabled: Boolean,
+});
 
-    this.$once("hook:beforeDestroy", () => intersectionObserver.disconnect());
-  },
-};
+const isLoading = ref(false);
+const root = ref<HTMLElement>();
+
+const observer = new IntersectionObserver(async (entries) => {
+  if (entries[0].intersectionRatio <= 0) return;
+  if (props.onLoadMore && props.enabled) {
+    const scrollingParent = root.value.closest("[data-scrolling]") || document.documentElement;
+    const previousHeight = scrollingParent.scrollHeight;
+    isLoading.value = true;
+    await props.onLoadMore();
+    isLoading.value = false;
+    await nextTick();
+    scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
+  }
+});
+
+onMounted(() => observer.observe(root.value));
+onUnmounted(() => observer.disconnect());
 </script>
+
 <style scoped lang="scss">
 .infinte-loader {
   min-height: 1px;

assets/components/LogActionsToolbar.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="dropdown is-right is-hoverable">
+    <div class="dropdown-trigger">
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <mdi-dots-vertical />
+        </span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <a class="dropdown-item" @click="onClearClicked">
+          <div class="level is-justify-content-start">
+            <div class="level-left">
+              <div class="level-item">
+                <octicon-trash-24 class="mr-4" />
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">Clear</div>
+            </div>
+          </div>
+        </a>
+        <a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
+          <div class="level is-justify-content-start">
+            <div class="level-left">
+              <div class="level-item">
+                <octicon-download-24 class="mr-4" />
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">Download</div>
+            </div>
+          </div>
+        </a>
+        <hr class="dropdown-divider" />
+        <a class="dropdown-item" @click="showSearch = true">
+          <div class="level is-justify-content-start">
+            <div class="level-left">
+              <div class="level-item">
+                <mdi-light-magnify class="mr-4" />
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">Search</div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, PropType } from "vue";
+import hotkeys from "hotkeys-js";
+import config from "@/stores/config";
+import { Container } from "@/types/Container";
+import { useSearchFilter } from "@/composables/search";
+
+const { showSearch } = useSearchFilter();
+
+const { base } = config;
+
+const props = defineProps({
+  onClearClicked: {
+    type: Function as PropType<(e: Event) => void>,
+    default: (e: Event) => {},
+  },
+  container: {
+    type: Object as () => Container,
+    required: true,
+  },
+});
+
+const onHotkey = (event: Event) => {
+  props.onClearClicked(event);
+  event.preventDefault();
+};
+
+onMounted(() => hotkeys("shift+command+l, shift+ctrl+l", onHotkey));
+onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
+</script>
+
+<style lang="scss" scoped>
+#download.button,
+#clear.button {
+  .icon {
+    height: 80%;
+  }
+
+  &:hover {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+}
+
+.toolbar {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  background-color: var(--action-toolbar-background-color);
+  border-radius: 8em;
+  margin-top: 0.5em;
+
+  & > div {
+    margin: 0 2em;
+    padding: 0.5em 0;
+  }
+
+  .button {
+    background-color: rgba(0, 0, 0, 0) !important;
+
+    &.is-small {
+      font-size: 0.65rem;
+    }
+  }
+}
+</style>

assets/components/LogContainer.vue

@@ -1,83 +1,64 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
-    <template v-slot:header v-if="showTitle">
-      <div class="mr-0 columns is-vcentered is-hidden-mobile">
-        <div class="column is-clipped">
-          <container-title :value="container.name" @close="$emit('close')"></container-title>
+    <template #header v-if="showTitle">
+      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile">
+        <div class="column is-clipped is-paddingless">
+          <container-title :container="container" @close="$emit('close')" />
         </div>
-        <div class="column is-clipped">
-          <container-stat :stat="container.stat" :state="container.state"></container-stat>
+        <div class="column is-narrow is-paddingless">
+          <container-stat :stat="container.stat" :state="container.state" v-if="container.stat" />
         </div>
-        <div class="column is-narrow">
-          <a
-            class="button is-small is-outlined"
-            id="download"
-            :href="`${base}/api/logs/download?id=${container.id}`"
-            download
-          >
-            <span class="icon">
-              <icon name="save"></icon>
-            </span>
-            Download
-          </a>
+
+        <div class="mr-2 column is-narrow is-paddingless">
+          <log-actions-toolbar :container="container" :onClearClicked="onClearClicked" />
         </div>
-        <div class="column is-narrow" v-if="closable">
-          <button class="delete is-medium" @click="$emit('close')"></button>
+        <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
+          <button class="delete is-medium" @click="emit('close')"></button>
         </div>
       </div>
     </template>
-    <template v-slot="{ setLoading }">
-      <log-viewer-with-source :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>
+    <template #default="{ setLoading }">
+      <log-viewer-with-source ref="viewer" :id="id" @loading-more="setLoading($event)" />
     </template>
   </scrollable-view>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import LogViewerWithSource from "./LogViewerWithSource.vue";
+import { useContainerStore } from "@/stores/container";
 
-import LogViewerWithSource from "./LogViewerWithSource";
-import ScrollableView from "./ScrollableView";
-import ContainerTitle from "./ContainerTitle";
-import ContainerStat from "./ContainerStat";
-import Icon from "./Icon";
-import config from "../store/config";
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  showTitle: {
+    type: Boolean,
+    default: false,
+  },
+  scrollable: {
+    type: Boolean,
+    default: false,
+  },
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-export default {
-  props: {
-    id: {
-      type: String,
-    },
-    showTitle: {
-      type: Boolean,
-      default: false,
-    },
-    scrollable: {
-      type: Boolean,
-      default: false,
-    },
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  name: "LogContainer",
-  components: {
-    LogViewerWithSource,
-    ScrollableView,
-    ContainerTitle,
-    ContainerStat,
-    Icon,
-  },
-  computed: {
-    ...mapGetters(["allContainersById"]),
-    container() {
-      return this.allContainersById[this.id];
-    },
-    base() {
-      return config.base;
-    },
-  },
-};
+const emit = defineEmits(["close"]);
+
+const { id } = toRefs(props);
+const store = useContainerStore();
+
+const container = store.currentContainer(id);
+
+const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
+
+function onClearClicked() {
+  viewer.value?.clear();
+}
 </script>
 <style lang="scss" scoped>
 button.delete {
@@ -92,16 +73,4 @@ button.delete {
     opacity: 1;
   }
 }
-
-#download.button {
-  .icon {
-    margin-right: 5px;
-    height: 80%;
-  }
-
-  &:hover {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
-}
 </style>

assets/components/LogEventSource.spec.js

@@ -1,230 +0,0 @@
-import debounce from "lodash.debounce";
-import EventSource from "eventsourcemock";
-import { sources } from "eventsourcemock";
-import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
-import Vuex from "vuex";
-import LogEventSource from "./LogEventSource.vue";
-import LogViewer from "./LogViewer.vue";
-
-jest.mock("lodash.debounce", () =>
-  jest.fn((fn) => {
-    return fn;
-  })
-);
-
-jest.mock("../store/config.js", () => ({ base: "" }));
-
-describe("<LogEventSource />", () => {
-  beforeEach(() => {
-    global.EventSource = EventSource;
-    window.scrollTo = jest.fn();
-    const observe = jest.fn();
-    const disconnect = jest.fn();
-    global.IntersectionObserver = jest.fn(() => ({
-      observe,
-      disconnect,
-    }));
-    debounce.mockClear();
-  });
-
-  function createLogEventSource({ hourStyle = "auto", searchFilter = null } = {}) {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-
-    localVue.component("log-viewer", LogViewer);
-
-    const state = { searchFilter, settings: { size: "medium", showTimestamp: true, hourStyle } };
-
-    const store = new Vuex.Store({
-      state,
-    });
-
-    return mount(LogEventSource, {
-      localVue,
-      store,
-      scopedSlots: {
-        default: `
-        <log-viewer :messages="props.messages"></log-viewer>
-        `,
-      },
-      propsData: { id: "abc" },
-    });
-  }
-
-  test("renders correctly", async () => {
-    const wrapper = createLogEventSource();
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  test("should connect to EventSource", async () => {
-    shallowMount(LogEventSource);
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
-  });
-
-  test("should close EventSource", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    wrapper.destroy();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
-  });
-
-  test("should parse messages", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-
-    const [message, _] = wrapper.vm.messages;
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
-      }
-    `);
-  });
-
-  test("should parse messages with loki's timestamp format", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
-
-    const [message, _] = wrapper.vm.messages;
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2020-04-27T12:35:43.272974324+02:00");
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2020-04-27T10:35:43.272Z,
-        "message": " xxxxx",
-      }
-    `);
-  });
-
-  test("should pass messages to slot", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.findComponent(LogViewer).vm.messages;
-
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
-
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
-      }
-    `);
-  });
-
-  describe("render html correctly", () => {
-    const RealDate = Date;
-    beforeAll(() => {
-      global.Date = class extends RealDate {
-        constructor(arg) {
-          if (arg) {
-            return new RealDate(arg);
-          } else {
-            return new RealDate(1560336936000);
-          }
-        }
-      };
-    });
-    afterAll(() => (global.Date = RealDate));
-
-    test("should render messages", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> "This is a message."</span></li>
-        </ul>
-      `);
-    });
-
-    test("should render messages with color", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> <span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
-        </ul>
-      `);
-    });
-
-    test("should render messages with html entities", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>
-      `);
-    });
-
-    test("should render dates with 12 hour style", async () => {
-      const wrapper = createLogEventSource({ hourStyle: "12" });
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T23:55:42.459Z">today at 11:55:42 PM</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>
-      `);
-    });
-
-    test("should render dates with 24 hour style", async () => {
-      const wrapper = createLogEventSource({ hourStyle: "24" });
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T23:55:42.459Z">today at 23:55:42</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>
-      `);
-    });
-
-    test("should render messages with filter", async () => {
-      const wrapper = createLogEventSource({ searchFilter: "test" });
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-11T10:55:42.459034602Z Foo bar`,
-      });
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
-        </ul>
-      `);
-    });
-  });
-});

assets/components/LogEventSource.spec.ts

@@ -0,0 +1,223 @@
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+// @ts-ignore
+import EventSource, { sources } from "eventsourcemock";
+import LogEventSource from "./LogEventSource.vue";
+import LogViewer from "./LogViewer.vue";
+import { settings } from "../composables/settings";
+import { useSearchFilter } from "@/composables/search";
+import { vi, describe, expect, beforeEach, test, beforeAll, afterAll } from "vitest";
+import { computed, Ref } from "vue";
+
+vi.mock("lodash.debounce", () => ({
+  __esModule: true,
+  default: vi.fn((fn) => {
+    fn.cancel = () => {};
+    return fn;
+  }),
+}));
+
+vi.mock("@/stores/container", () => ({
+  __esModule: true,
+  useContainerStore() {
+    return {
+      currentContainer(id: Ref<string>) {
+        return computed(() => ({ id: id.value }));
+      },
+    };
+  },
+}));
+
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "" },
+}));
+
+/**
+ * @vitest-environment jsdom
+ */
+describe("<LogEventSource />", () => {
+  const search = useSearchFilter();
+
+  beforeEach(() => {
+    global.EventSource = EventSource;
+    window.scrollTo = vi.fn();
+    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+  });
+
+  function createLogEventSource(
+    {
+      searchFilter = undefined,
+      hourStyle = "auto",
+    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
+      hourStyle: "auto",
+    }
+  ) {
+    settings.value.hourStyle = hourStyle;
+    search.searchFilter.value = searchFilter;
+    return mount(LogEventSource, {
+      global: {
+        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        components: {
+          LogViewer,
+        },
+      },
+      slots: {
+        default: `
+        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
+        `,
+      },
+      props: { id: "abc" },
+    });
+  }
+
+  test("renders correctly", async () => {
+    const wrapper = createLogEventSource();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(1);
+    wrapper.unmount();
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    wrapper.unmount();
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(2);
+  });
+
+  test("should parse messages", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
+    });
+
+    const [message, _] = wrapper.vm.messages;
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
+    expect(messageWithoutKey).toMatchSnapshot();
+  });
+
+  test("should parse messages with loki's timestamp format", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
+
+    const [message, _] = wrapper.vm.messages;
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBe("2020-04-27T12:35:43.272974324+02:00");
+    expect(messageWithoutKey).toMatchSnapshot();
+  });
+
+  test("should pass messages to slot", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
+    });
+    const [message, _] = wrapper.getComponent(LogViewer).vm.messages;
+
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
+
+    expect(messageWithoutKey).toMatchSnapshot();
+  });
+
+  describe("render html correctly", () => {
+    const RealDate = Date;
+    beforeAll(() => {
+      // @ts-ignore
+      global.Date = class extends RealDate {
+        constructor(arg: any | number) {
+          super(arg);
+          if (arg) {
+            return new RealDate(arg);
+          } else {
+            return new RealDate(1560336936000);
+          }
+        }
+      };
+    });
+    afterAll(() => (global.Date = RealDate));
+
+    test("should render messages", async () => {
+      const wrapper = createLogEventSource();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with color", async () => {
+      const wrapper = createLogEventSource();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with html entities", async () => {
+      const wrapper = createLogEventSource();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render dates with 12 hour style", async () => {
+      const wrapper = createLogEventSource({ hourStyle: "12" });
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render dates with 24 hour style", async () => {
+      const wrapper = createLogEventSource({ hourStyle: "24" });
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with filter", async () => {
+      const wrapper = createLogEventSource({ searchFilter: "test" });
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-11T10:55:42.459034602Z Foo bar`,
+      });
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`,
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+  });
+});

assets/components/LogEventSource.vue

@@ -1,99 +1,133 @@
 <template>
-  <div>
-    <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
-    <slot :messages="messages"></slot>
-  </div>
+  <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
+  <slot :messages="messages"></slot>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { toRefs, ref, watch, onUnmounted } from "vue";
 import debounce from "lodash.debounce";
-import InfiniteLoader from "./InfiniteLoader";
-import config from "../store/config";
 
-export default {
-  props: ["id"],
-  name: "LogEventSource",
-  components: {
-    InfiniteLoader,
+import { LogEntry } from "@/types/LogEntry";
+import InfiniteLoader from "./InfiniteLoader.vue";
+import config from "@/stores/config";
+import { useContainerStore } from "@/stores/container";
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      messages: [],
-      buffer: [],
-    };
-  },
-  created() {
-    this.es = null;
-    this.loadLogs(this.id);
-    this.flushBuffer = debounce(this.flushNow, 250, { maxWait: 1000 });
-  },
-  methods: {
-    loadLogs(id) {
-      this.reset();
-      this.es = new EventSource(`${config.base}/api/logs/stream?id=${id}`);
-      this.es.addEventListener("container-stopped", (e) => {
-        this.es.close();
-        this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
-        this.flushBuffer();
-        this.flushBuffer.flush();
+});
+
+const { id } = toRefs(props);
+const emit = defineEmits(["loading-more"]);
+const store = useContainerStore();
+const container = store.currentContainer(id);
+
+const messages = ref<LogEntry[]>([]);
+const buffer = ref<LogEntry[]>([]);
+
+function flushNow() {
+  messages.value.push(...buffer.value);
+  buffer.value = [];
+}
+
+const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
+
+let es: EventSource | null = null;
+let lastEventId = "";
+
+function connect({ clear } = { clear: true }) {
+  es?.close();
+
+  if (clear) {
+    flushBuffer.cancel();
+    messages.value = [];
+    buffer.value = [];
+    lastEventId = "";
+  }
+
+  es = new EventSource(`${config.base}/api/logs/stream?id=${props.id}&lastEventId=${lastEventId}`);
+  es.addEventListener("container-stopped", () => {
+    es?.close();
+    es = null;
+    buffer.value.push({
+      event: "container-stopped",
+      message: "Container stopped",
+      date: new Date(),
+      key: new Date().toString(),
+    });
+    flushBuffer();
+    flushBuffer.flush();
+  });
+  es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
+  es.onmessage = (e) => {
+    lastEventId = e.lastEventId;
+    if (e.data) {
+      buffer.value.push(parseMessage(e.data));
+      flushBuffer();
+    }
+  };
+}
+
+async function loadOlderLogs() {
+  if (messages.value.length < 300) return;
+
+  emit("loading-more", true);
+  const to = messages.value[0].date;
+  const last = messages.value[299].date;
+  const delta = to.getTime() - last.getTime();
+  const from = new Date(to.getTime() + delta);
+  const logs = await (
+    await fetch(`${config.base}/api/logs?id=${props.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
+  ).text();
+  if (logs) {
+    const newMessages = logs
+      .trim()
+      .split("\n")
+      .map((line) => parseMessage(line));
+    messages.value.unshift(...newMessages);
+  }
+  emit("loading-more", false);
+}
+
+function parseMessage(data: String): LogEntry {
+  let i = data.indexOf(" ");
+  if (i == -1) {
+    i = data.length;
+  }
+  const key = data.substring(0, i);
+  const date = new Date(key);
+  const message = data.substring(i + 1);
+  return { key, date, message };
+}
+
+watch(
+  () => container.value.state,
+  (newValue, oldValue) => {
+    console.log("LogEventSource: container changed", newValue, oldValue);
+    if (newValue == "running" && newValue != oldValue) {
+      buffer.value.push({
+        event: "container-started",
+        message: "Container started",
+        date: new Date(),
+        key: new Date().toString(),
       });
-      this.es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
-      this.es.onmessage = (e) => {
-        this.buffer.push(this.parseMessage(e.data));
-        this.flushBuffer();
-      };
-      this.$once("hook:beforeDestroy", () => this.es.close());
-    },
-    flushNow() {
-      this.messages.push(...this.buffer);
-      this.buffer = [];
-    },
-    reset() {
-      if (this.es) {
-        this.es.close();
-        this.es = null;
-        this.flushBuffer.cancel();
-      }
-      this.messages = [];
-      this.buffer = [];
-    },
-    async loadOlderLogs() {
-      if (this.messages.length < 300) return;
+      connect({ clear: false });
+    }
+  }
+);
 
-      this.$emit("loading-more", true);
-      const to = this.messages[0].date;
-      const last = this.messages[299].date;
-      const delta = to - last;
-      const from = new Date(to.getTime() + delta);
-      const logs = await (
-        await fetch(`${config.base}/api/logs?id=${this.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
-      ).text();
-      if (logs) {
-        const newMessages = logs
-          .trim()
-          .split("\n")
-          .map((line) => this.parseMessage(line));
-        this.messages.unshift(...newMessages);
-      }
-      this.$emit("loading-more", false);
-    },
-    parseMessage(data) {
-      let i = data.indexOf(" ");
-      if (i == -1) {
-        i = data.length;
-      }
-      const key = data.substring(0, i);
-      const date = new Date(key);
-      const message = data.substring(i);
-      return { key, date, message };
-    },
-  },
-  watch: {
-    id(newValue, oldValue) {
-      if (oldValue !== newValue) {
-        this.loadLogs(newValue);
-      }
-    },
-  },
-};
+onUnmounted(() => {
+  if (es) {
+    es.close();
+  }
+});
+
+connect();
+watch(id, () => connect());
+
+defineExpose({
+  clear: () => (messages.value = []),
+});
 </script>

assets/components/LogViewer.vue

@@ -1,65 +1,33 @@
 <template>
-  <ul class="events" :class="settings.size">
-    <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
-      <span class="date" v-if="settings.showTimestamp"><relative-time :date="item.date"></relative-time></span>
+  <ul class="events" :class="size">
+    <li v-for="item in filtered" :key="item.key" :data-event="item.event">
+      <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
   </ul>
 </template>
-<script>
-import { mapState } from "vuex";
+
+<script lang="ts" setup>
+import { PropType, toRefs } from "vue";
+
+import { size, showTimestamp } from "@/composables/settings";
+import RelativeTime from "./RelativeTime.vue";
 import AnsiConvertor from "ansi-to-html";
-import DOMPurify from "dompurify";
-import RelativeTime from "./RelativeTime";
+import { LogEntry } from "@/types/LogEntry";
+import { useSearchFilter } from "@/composables/search";
+
+const props = defineProps({
+  messages: {
+    type: Array as PropType<LogEntry[]>,
+    required: true,
+  },
+});
 
 const ansiConvertor = new AnsiConvertor({ escapeXML: true });
-
-if (window.trustedTypes && trustedTypes.createPolicy) {
-  trustedTypes.createPolicy("default", {
-    createHTML: (string, sink) => DOMPurify.sanitize(string, { RETURN_TRUSTED_TYPE: true }),
-  });
-}
-
-export default {
-  props: ["messages"],
-  name: "LogViewer",
-  components: { RelativeTime },
-  data() {
-    return {
-      showSearch: false,
-    };
-  },
-  methods: {
-    colorize: function (value) {
-      return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
-    },
-  },
-  computed: {
-    ...mapState(["searchFilter", "settings"]),
-    filtered() {
-      const { searchFilter, messages } = this;
-      if (searchFilter) {
-        const isSmartCase = searchFilter === searchFilter.toLowerCase();
-        try {
-          const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
-          return messages
-            .filter((d) => d.message.match(regex))
-            .map((d) => ({
-              ...d,
-              message: d.message.replace(regex, "<mark>$&</mark>"),
-            }));
-        } catch (e) {
-          if (e instanceof SyntaxError) {
-            console.info(`Ignoring SytaxError from search.`, e);
-            return messages;
-          }
-          throw e;
-        }
-      }
-      return messages;
-    },
-  },
-};
+const colorize = (value: string) =>
+  ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+const { messages } = toRefs(props);
+const filtered = useSearchFilter().filteredMessages(messages);
 </script>
 <style scoped lang="scss">
 .events {
@@ -73,6 +41,12 @@ export default {
       scroll-snap-align: end;
       scroll-margin-block-end: 5rem;
     }
+    &[data-event="container-stopped"] {
+      color: #f14668;
+    }
+    &[data-event="container-started"] {
+      color: hsl(141, 53%, 53%);
+    }
   }
 
   &.small {
@@ -102,13 +76,12 @@ export default {
 
 .text {
   white-space: pre-wrap;
+  &::before {
+    content: " ";
+  }
 }
 
-li.event {
-  color: #f14668;
-}
-
-::v-deep mark {
+:deep(mark) {
   border-radius: 2px;
   background-color: var(--secondary-color);
   animation: pops 200ms ease-out;

assets/components/LogViewerWithSource.vue

@@ -1,19 +1,26 @@
 <template>
-  <log-event-source :id="id" v-slot="eventSource" @loading-more="$emit('loading-more', $event)">
-    <log-viewer :messages="eventSource.messages"></log-viewer>
+  <log-event-source ref="source" :id="id" #default="{ messages }" @loading-more="emit('loading-more', $event)">
+    <log-viewer :messages="messages"></log-viewer>
   </log-event-source>
 </template>
 
-<script>
-import LogEventSource from "./LogEventSource";
-import LogViewer from "./LogViewer";
-
-export default {
-  props: ["id"],
-  name: "LogViewerWithSource",
-  components: {
-    LogEventSource,
-    LogViewer,
+<script lang="ts" setup>
+import LogViewer from "./LogViewer.vue";
+import { ref } from "vue";
+defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-};
+});
+
+const emit = defineEmits(["loading-more"]);
+
+const source = ref<InstanceType<typeof LogViewer>>();
+function clear() {
+  source.value?.clear();
+}
+defineExpose({
+  clear,
+});
 </script>

assets/components/MobileMenu.vue

@@ -9,7 +9,7 @@
         </router-link>
       </div>
       <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
-        {{ allContainersById[$route.params.id].name }}
+        {{ allContainersById[route.params.id].name }}
       </div>
 
       <div class="column is-narrow push-right">
@@ -41,32 +41,26 @@
   </aside>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
 
-export default {
-  props: [],
-  name: "MobileMenu",
-  data() {
-    return {
-      showNav: false,
-    };
-  },
-  computed: {
-    ...mapGetters(["visibleContainers", "allContainersById"]),
-  },
-  watch: {
-    $route(to, from) {
-      this.showNav = false;
-    },
-  },
-};
+const store = useContainerStore();
+const route = useRoute();
+const { visibleContainers, allContainersById } = storeToRefs(store);
+
+const showNav = ref(false);
+
+watch(route, () => {
+  showNav.value = false;
+});
 </script>
 <style scoped lang="scss">
 aside {
   padding: 1em;
   position: fixed;
-  top: 0;
   left: 0;
   right: 0;
   background: var(--scheme-main-ter);

assets/components/PastTime.vue

@@ -2,38 +2,23 @@
   <time :datetime="date.toISOString()">{{ text }}</time>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { useIntervalFn } from "@vueuse/core";
 import formatDistance from "date-fns/formatDistance";
+import { PropType, ref } from "vue";
 
-export default {
-  props: {
-    date: {
-      required: true,
-      type: Date,
-    },
+const props = defineProps({
+  date: {
+    required: true,
+    type: Object as PropType<Date>,
   },
-  data() {
-    return {
-      text: "",
-      interval: null,
-    };
-  },
-  name: "PastTime",
-  mounted() {
-    this.updateFromNow();
-    this.interval = setInterval(() => this.updateFromNow(), 30000);
-  },
-  destroyed() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    updateFromNow() {
-      this.text = formatDistance(this.date, new Date(), {
-        addSuffix: true,
-      });
-    },
-  },
-};
+});
+
+const text = ref<string>();
+function updateFromNow() {
+  text.value = formatDistance(props.date, new Date(), {
+    addSuffix: true,
+  });
+}
+useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
 </script>
-
-<style scoped lang="scss"></style>

assets/components/RelativeTime.vue

@@ -1,50 +1,44 @@
 <template>
-  <time :datetime="date.toISOString()">{{ date | relativeTime(locale) }}</time>
+  <time :datetime="date.toISOString()">{{ relativeTime(date, locale) }}</time>
 </template>
 
-<script>
-import { mapState } from "vuex";
-import { formatRelative } from "date-fns";
-import enGB from "date-fns/locale/en-GB";
-import enUS from "date-fns/locale/en-US";
-
+<script lang="ts">
 const use24Hr =
   new Intl.DateTimeFormat(undefined, {
     hour: "numeric",
   })
     .formatToParts(new Date(2020, 0, 1, 13))
-    .find((part) => part.type === "hour").value.length === 2;
+    .find((part) => part.type === "hour")?.value.length === 2;
 
 const auto = use24Hr ? enGB : enUS;
 const styles = { auto, 12: enUS, 24: enGB };
-
-export default {
-  props: {
-    date: {
-      required: true,
-      type: Date,
-    },
-  },
-  name: "RelativeTime",
-  components: {},
-
-  computed: {
-    ...mapState(["settings"]),
-    locale() {
-      const locale = styles[this.settings.hourStyle];
-      const oldFormatter = locale.formatRelative;
-      return {
-        ...locale,
-        formatRelative(token) {
-          return oldFormatter(token) + "p";
-        },
-      };
-    },
-  },
-  filters: {
-    relativeTime(date, locale) {
-      return formatRelative(date, new Date(), { locale });
-    },
-  },
-};
+</script>
+
+<script lang="ts" setup>
+import { formatRelative } from "date-fns";
+import { hourStyle } from "@/composables/settings";
+import enGB from "date-fns/locale/en-GB";
+import enUS from "date-fns/locale/en-US";
+import { computed, PropType } from "vue";
+defineProps({
+  date: {
+    required: true,
+    type: Object as PropType<Date>,
+  },
+});
+
+const locale = computed(() => {
+  const locale = styles[hourStyle.value];
+  const oldFormatter = locale.formatRelative as (d: Date | number) => string;
+  return {
+    ...locale,
+    formatRelative(date: Date | number) {
+      return oldFormatter(date) + "p";
+    },
+  };
+});
+
+function relativeTime(date: Date, locale: Locale) {
+  return formatRelative(date, new Date(), { locale });
+}
 </script>

assets/components/ScrollProgress.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="scroll-progress">
+  <div class="scroll-progress" ref="root">
     <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
-      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
+      <circle r="44" cx="50" cy="50" />
     </svg>
     <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
       <template v-if="indeterminate">
@@ -17,79 +17,66 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
-import throttle from "lodash.throttle";
+<script lang="ts" setup>
+import { useContainerStore } from "@/stores/container";
+import { useScroll } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+import { onMounted, ref, watch, watchPostEffect } from "vue";
 
-export default {
-  name: "ScrollProgress",
-  props: {
-    indeterminate: {
-      default: false,
-      type: Boolean,
-    },
-    autoHide: {
-      default: true,
-      type: Boolean,
-    },
+const props = defineProps({
+  indeterminate: {
+    default: false,
+    type: Boolean,
   },
-  data() {
-    return {
-      scrollProgress: 0,
-      animation: { cancel: () => {} },
-      parentElement: document,
-    };
+  autoHide: {
+    default: true,
+    type: Boolean,
   },
-  created() {
-    this.onScrollThrottled = throttle(this.onScroll, 150);
-  },
-  mounted() {
-    this.attachEvents();
-    this.$once("hook:beforeDestroy", this.detachEvents);
-  },
-  watch: {
-    activeContainers() {
-      this.detachEvents();
-      this.attachEvents();
+});
+
+const scrollProgress = ref(0);
+const animation = ref({ cancel: () => {} });
+const root = ref<HTMLElement>();
+const store = useContainerStore();
+const { activeContainers } = storeToRefs(store);
+const scrollElement = ref<HTMLElement | Document>((root.value?.closest("[data-scrolling]") as HTMLElement) ?? document);
+const { y: scrollY } = useScroll(scrollElement, { throttle: 100 });
+
+onMounted(() => {
+  watch(
+    activeContainers,
+    () => {
+      scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
     },
-    indeterminate() {
-      this.$nextTick(() => this.onScroll());
-    },
-  },
-  computed: {
-    ...mapGetters(["activeContainers"]),
-  },
-  methods: {
-    attachEvents() {
-      this.parentElement = this.$el.closest("[data-scrolling]") || document;
-      this.parentElement.addEventListener("scroll", this.onScrollThrottled);
-    },
-    detachEvents() {
-      this.parentElement.removeEventListener("scroll", this.onScrollThrottled);
-    },
-    onScroll() {
-      const p = this.parentElement == document ? document.documentElement : this.parentElement;
-      this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
-      this.animation.cancel();
-      if (this.autoHide) {
-        this.animation = this.$el.animate(
-          { opacity: [1, 0] },
-          {
-            duration: 500,
-            delay: 2000,
-            fill: "both",
-            easing: "ease-out",
-          }
-        );
+    { immediate: true, flush: "post" }
+  );
+});
+
+watchPostEffect(() => {
+  const parent =
+    scrollElement.value === document
+      ? (scrollElement.value as Document).documentElement
+      : (scrollElement.value as HTMLElement);
+  scrollProgress.value = scrollY.value / (parent.scrollHeight - parent.clientHeight);
+  animation.value.cancel();
+  if (props.autoHide && root.value) {
+    animation.value = root.value.animate(
+      { opacity: [1, 0] },
+      {
+        duration: 500,
+        delay: 2000,
+        fill: "both",
+        easing: "ease-out",
       }
-    },
-  },
-};
+    );
+  }
+});
 </script>
 <style scoped lang="scss">
 .scroll-progress {
   display: inline-block;
   position: relative;
+  pointer-events: none;
 
   svg {
     filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
@@ -108,7 +95,7 @@ export default {
       transform: rotate(-90deg);
       transform-origin: 50% 50%;
       stroke: var(--primary-color);
-      stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+      stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
       stroke-dasharray: 276.32px 276.32px;
       stroke-linecap: round;
       stroke-width: 3;

assets/components/ScrollableView.vue

@@ -3,28 +3,28 @@
     <header v-if="$slots.header">
       <slot name="header"></slot>
     </header>
-    <main ref="content" :data-scrolling="scrollable">
+    <main :data-scrolling="scrollable ? true : undefined">
       <div class="is-scrollbar-progress is-hidden-mobile">
         <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
       </div>
-      <slot :setLoading="setLoading"></slot>
+      <div ref="scrollableContent">
+        <slot :setLoading="setLoading"></slot>
+      </div>
+
       <div ref="scrollObserver" class="is-scroll-observer"></div>
     </main>
 
     <div class="is-scrollbar-notification">
       <transition name="fade">
         <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <icon name="download"></icon>
+          <mdi-light-chevron-double-down />
         </button>
       </transition>
     </div>
   </section>
 </template>
 
-<script>
-import Icon from "./Icon";
-import ScrollProgress from "./ScrollProgress";
-
+<script lang="ts">
 export default {
   props: {
     scrollable: {
@@ -32,21 +32,20 @@ export default {
       default: true,
     },
   },
-  components: {
-    Icon,
-    ScrollProgress,
-  },
+
   name: "ScrollableView",
   data() {
     return {
       paused: false,
       hasMore: false,
       loading: false,
+      mutationObserver: null,
+      intersectionObserver: null,
     };
   },
   mounted() {
-    const { content } = this.$refs;
-    const mutationObserver = new MutationObserver((e) => {
+    const { scrollableContent } = this.$refs;
+    this.mutationObserver = new MutationObserver((e) => {
       if (!this.paused) {
         this.scrollToBottom("instant");
       } else {
@@ -58,17 +57,18 @@ export default {
         }
       }
     });
-    mutationObserver.observe(content, { childList: true, subtree: true });
-    this.$once("hook:beforeDestroy", () => mutationObserver.disconnect());
+    this.mutationObserver.observe(scrollableContent, { childList: true, subtree: true });
 
-    const intersectionObserver = new IntersectionObserver(
+    this.intersectionObserver = new IntersectionObserver(
       (entries) => (this.paused = entries[0].intersectionRatio == 0),
       { threshholds: [0, 1], rootMargin: "80px 0px" }
     );
-    intersectionObserver.observe(this.$refs.scrollObserver);
-    this.$once("hook:beforeDestroy", () => intersectionObserver.disconnect());
+    this.intersectionObserver.observe(this.$refs.scrollObserver);
+  },
+  beforeUnmount() {
+    this.mutationObserver.disconnect();
+    this.intersectionObserver.disconnect();
   },
-
   methods: {
     scrollToBottom(behavior = "instant") {
       this.$refs.scrollObserver.scrollIntoView({ behavior });

assets/components/Search.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="settings.search">
+  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="search">
     <div class="column">
       <p class="control has-icons-left">
         <input
           class="input"
           type="text"
           placeholder="Find / RegEx"
-          ref="filter"
-          v-model="filter"
+          ref="input"
+          v-model="searchFilter"
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
-          <icon name="search"></icon>
+          <mdi-light-magnify />
         </span>
       </p>
     </div>
@@ -21,57 +21,36 @@
   </div>
 </template>
 
-<script>
-import { mapActions, mapState } from "vuex";
+<script lang="ts" setup>
 import hotkeys from "hotkeys-js";
-import Icon from "./Icon";
 
-export default {
-  props: [],
-  name: "Search",
-  components: {
-    Icon,
-  },
-  data() {
-    return {
-      showSearch: false,
-    };
-  },
-  mounted() {
-    hotkeys("command+f, ctrl+f", (event, handler) => {
-      this.showSearch = true;
-      this.$nextTick(() => this.$refs.filter.focus() || this.$refs.filter.select());
-      event.preventDefault();
-    });
-    hotkeys("esc", (event, handler) => {
-      this.resetSearch();
-    });
-  },
-  beforeDestroy() {
-    this.updateSearchFilter("");
-    hotkeys.unbind("command+f, ctrl+f, esc");
-  },
-  methods: {
-    ...mapActions({
-      updateSearchFilter: "SET_SEARCH",
-    }),
-    resetSearch() {
-      this.showSearch = false;
-      this.filter = "";
-    },
-  },
-  computed: {
-    ...mapState(["searchFilter", "settings"]),
-    filter: {
-      get() {
-        return this.searchFilter;
-      },
-      set(value) {
-        this.updateSearchFilter(value);
-      },
-    },
-  },
-};
+import { search } from "@/composables/settings";
+import { useSearchFilter } from "@/composables/search";
+import { ref, nextTick, onMounted, onUnmounted } from "vue";
+
+const input = ref<HTMLInputElement>();
+const { searchFilter, showSearch } = useSearchFilter();
+
+onMounted(() => {
+  hotkeys("command+f, ctrl+f", (event, handler) => {
+    showSearch.value = true;
+    nextTick(() => input.value?.focus() || input.value?.select());
+    event.preventDefault();
+  });
+  hotkeys("esc", () => resetSearch());
+});
+
+onUnmounted(() => {
+  searchFilter.value = "";
+  showSearch.value = false;
+  hotkeys.unbind("command+f, ctrl+f");
+  hotkeys.unbind("esc");
+});
+
+function resetSearch() {
+  searchFilter.value = "";
+  showSearch.value = false;
+}
 </script>
 
 <style lang="scss" scoped>

assets/components/SideMenu.vue

@@ -9,24 +9,16 @@
         </router-link>
       </div>
       <div class="column is-narrow has-text-right px-1">
-        <button
-          class="button is-small is-rounded is-settings-control"
-          @click="$emit('search')"
-          title="Search containers (⌘ + k, ⌃k)"
-        >
+        <button class="button is-rounded" @click="$emit('search')" title="Search containers (⌘ + k, ⌃k)">
           <span class="icon">
-            <icon name="search"></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-small is-rounded is-settings-control"
-        >
+        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded">
           <span class="icon">
-            <icon name="cog"></icon>
+            <mdi-light-cog />
           </span>
         </router-link>
       </div>
@@ -46,11 +38,11 @@
             <div class="is-flex-shrink-1 column-icon">
               <span
                 class="icon is-small"
-                @click.stop.prevent="appendActiveContainer(item)"
+                @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
                 title="Pin as column"
               >
-                <icon name="column"></icon>
+                <cil-columns />
               </span>
             </div>
           </div>
@@ -60,35 +52,22 @@
   </aside>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useContainerStore } from "@/stores/container";
+import type { Container } from "@/types/Container";
 
-import Icon from "./Icon";
+const store = useContainerStore();
 
-export default {
-  props: [],
-  name: "SideMenu",
-  components: {
-    Icon,
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapGetters(["visibleContainers", "activeContainers"]),
-    activeContainersById() {
-      return this.activeContainers.reduce((map, obj) => {
-        map[obj.id] = obj;
-        return map;
-      }, {});
-    },
-  },
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-  },
-};
+const { activeContainers, visibleContainers } = storeToRefs(store);
+
+const activeContainersById = computed(() =>
+  activeContainers.value.reduce((acc, item) => {
+    acc[item.id] = item;
+    return acc;
+  }, {} as Record<string, Container>)
+);
 </script>
 <style scoped lang="scss">
 aside {
@@ -116,6 +95,10 @@ li.exited a {
 .menu-list li {
   .column-icon {
     visibility: hidden;
+
+    & > span {
+      vertical-align: middle;
+    }
   }
 
   &:hover .column-icon {

assets/components/__snapshots__/LogEventSource.spec.js.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LogEventSource /> renders correctly 1`] = `
-<div>
-  <div
-    class="infinte-loader"
-  >
-    <div
-      class="spinner"
-      style="display: none;"
-    >
-      <div
-        class="bounce1"
-      />
-       
-      <div
-        class="bounce2"
-      />
-       
-      <div
-        class="bounce3"
-      />
-    </div>
-  </div>
-   
-  <ul
-    class="events medium"
-  />
-</div>
-`;

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

@@ -0,0 +1,69 @@
+// Vitest Snapshot v1
+
+exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 11:55:42 PM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 23:55:42</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">\\"This is a message.\\"</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
+"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
+  <li data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > renders correctly 1`] = `
+"<div class=\\"infinte-loader\\" data-v-48dce4fc=\\"\\">
+  <div class=\\"spinner\\" data-v-48dce4fc=\\"\\" style=\\"display: none;\\">
+    <div class=\\"bounce1\\" data-v-48dce4fc=\\"\\"></div>
+    <div class=\\"bounce2\\" data-v-48dce4fc=\\"\\"></div>
+    <div class=\\"bounce3\\" data-v-48dce4fc=\\"\\"></div>
+  </div>
+</div>
+<ul class=\\"events medium\\" data-v-28f125ea=\\"\\"></ul>"
+`;
+
+exports[`<LogEventSource /> > should parse messages 1`] = `
+{
+  "date": 2019-06-12T10:55:42.459Z,
+  "message": "\\"This is a message.\\"",
+}
+`;
+
+exports[`<LogEventSource /> > should parse messages with loki's timestamp format 1`] = `
+{
+  "date": 2020-04-27T10:35:43.272Z,
+  "message": "xxxxx",
+}
+`;
+
+exports[`<LogEventSource /> > should pass messages to slot 1`] = `
+{
+  "date": 2019-06-12T10:55:42.459Z,
+  "message": "\\"This is a message.\\"",
+}
+`;

assets/composables/media.ts

@@ -0,0 +1,3 @@
+import { useMediaQuery } from "@vueuse/core";
+
+export const isMobile = useMediaQuery("(max-width: 770px)");

assets/composables/search.ts

@@ -0,0 +1,39 @@
+import { ref, computed, Ref } from "vue";
+
+const searchFilter = ref<string>();
+const showSearch = ref(false);
+
+import type { LogEntry } from "@/types/LogEntry";
+
+export function useSearchFilter() {
+  function filteredMessages(messages: Ref<LogEntry[]>) {
+    return computed(() => {
+      if (searchFilter && searchFilter.value) {
+        const isSmartCase = searchFilter.value === searchFilter.value.toLowerCase();
+        try {
+          const regex = isSmartCase ? new RegExp(searchFilter.value, "i") : new RegExp(searchFilter.value);
+          return messages.value
+            .filter((d) => d.message.match(regex))
+            .map((d) => ({
+              ...d,
+              message: d.message.replace(regex, "<mark>$&</mark>"),
+            }));
+        } catch (e) {
+          if (e instanceof SyntaxError) {
+            console.info(`Ignoring SytaxError from search.`, e);
+            return messages.value;
+          }
+          throw e;
+        }
+      }
+
+      return messages.value;
+    });
+  }
+
+  return {
+    filteredMessages,
+    searchFilter,
+    showSearch
+  };
+}

assets/composables/settings.ts

@@ -0,0 +1,65 @@
+import { useStorage } from "@vueuse/core";
+import { computed } from "vue";
+
+export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
+
+export const DEFAULT_SETTINGS: {
+  search: boolean;
+  size: "small" | "medium" | "large";
+  menuWidth: number;
+  smallerScrollbars: boolean;
+  showTimestamp: boolean;
+  showAllContainers: boolean;
+  lightTheme: boolean;
+  hourStyle: "auto" | "24" | "12";
+} = {
+  search: true,
+  size: "medium",
+  menuWidth: 15,
+  smallerScrollbars: false,
+  showTimestamp: true,
+  showAllContainers: false,
+  lightTheme: false,
+  hourStyle: "auto",
+};
+
+export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+
+export const search = computed({
+  get: () => settings.value.search,
+  set: (value) => (settings.value.search = value),
+});
+
+export const size = computed({
+  get: () => settings.value.size,
+  set: (value) => (settings.value.size = value),
+});
+
+export const menuWidth = computed({
+  get: () => settings.value.menuWidth,
+  set: (value) => (settings.value.menuWidth = value),
+});
+export const smallerScrollbars = computed({
+  get: () => settings.value.smallerScrollbars,
+  set: (value) => (settings.value.smallerScrollbars = value),
+});
+
+export const showTimestamp = computed({
+  get: () => settings.value.showTimestamp,
+  set: (value) => (settings.value.showTimestamp = value),
+});
+
+export const showAllContainers = computed({
+  get: () => settings.value.showAllContainers,
+  set: (value) => (settings.value.showAllContainers = value),
+});
+
+export const lightTheme = computed({
+  get: () => settings.value.lightTheme,
+  set: (value) => (settings.value.lightTheme = value),
+});
+
+export const hourStyle = computed({
+  get: () => settings.value.hourStyle,
+  set: (value) => (settings.value.hourStyle = value),
+});

assets/composables/title.ts

@@ -0,0 +1,12 @@
+import { useTitle } from "@vueuse/core";
+import { ref, computed } from "vue";
+
+const subtitle = ref("");
+
+const title = computed(() => `${subtitle.value} - Dozzle`);
+
+useTitle(title);
+
+export function setTitle(t: string) {
+  subtitle.value = t;
+}

assets/main.js

@@ -1,72 +0,0 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Meta from "vue-meta";
-import Switch from "buefy/dist/esm/switch";
-import Radio from "buefy/dist/esm/radio";
-import Field from "buefy/dist/esm/field";
-import Modal from "buefy/dist/esm/modal";
-import Autocomplete from "buefy/dist/esm/autocomplete";
-
-import store from "./store";
-import config from "./store/config";
-import App from "./App.vue";
-import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound, Login } from "./pages";
-
-Vue.use(VueRouter);
-Vue.use(Meta);
-Vue.use(Switch);
-Vue.use(Radio);
-Vue.use(Field);
-Vue.use(Modal);
-Vue.use(Autocomplete);
-
-const routes = [
-  {
-    path: "/",
-    component: Index,
-    name: "default",
-  },
-  {
-    path: "/container/:id",
-    component: Container,
-    name: "container",
-    props: true,
-  },
-  {
-    path: "/container/*",
-    component: ContainerNotFound,
-    name: "container-not-found",
-  },
-  {
-    path: "/settings",
-    component: Settings,
-    name: "settings",
-  },
-  {
-    path: "/show",
-    component: Show,
-    name: "show",
-  },
-  {
-    path: "/login",
-    component: Login,
-    name: "login",
-  },
-  {
-    path: "/*",
-    component: PageNotFound,
-    name: "page-not-found",
-  },
-];
-
-const router = new VueRouter({
-  mode: "history",
-  base: config.base + "/",
-  routes,
-});
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");

assets/main.ts

@@ -0,0 +1,67 @@
+import "./styles.scss";
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { Autocomplete, Button, Dropdown, Switch, Radio, Field, Tooltip, Modal, Config } from "@oruga-ui/oruga-next";
+import { bulmaConfig } from "@oruga-ui/theme-bulma";
+import { createPinia } from "pinia";
+import config from "./stores/config";
+import App from "./App.vue";
+import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound, Login } from "./pages";
+
+const routes = [
+  {
+    path: "/",
+    component: Index,
+    name: "default",
+  },
+  {
+    path: "/container/:id",
+    component: Container,
+    name: "container",
+    props: true,
+  },
+  {
+    path: "/container/:pathMatch(.*)",
+    component: ContainerNotFound,
+    name: "container-not-found",
+  },
+  {
+    path: "/settings",
+    component: Settings,
+    name: "settings",
+  },
+  {
+    path: "/show",
+    component: Show,
+    name: "show",
+  },
+  {
+    path: "/login",
+    component: Login,
+    name: "login",
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    component: PageNotFound,
+    name: "page-not-found",
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(`${config.base}/`),
+  routes,
+});
+
+createApp(App)
+  .use(router)
+  .use(createPinia())
+  .use(Autocomplete)
+  .use(Button)
+  .use(Dropdown)
+  .use(Switch)
+  .use(Tooltip)
+  .use(Modal)
+  .use(Radio)
+  .use(Field)
+  .use(Config, bulmaConfig)
+  .mount("#app");

assets/pages/Container.vue

@@ -5,43 +5,33 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
-import Search from "../components/Search";
-import LogContainer from "../components/LogContainer";
+<script lang="ts" setup>
+import { onMounted, toRefs, watchEffect } from "vue";
+import Search from "@/components/Search.vue";
+import LogContainer from "@/components/LogContainer.vue";
+import { setTitle } from "@/composables/title";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
 
-export default {
-  props: ["id"],
-  name: "Container",
-  components: {
-    LogContainer,
-    Search,
+const store = useContainerStore();
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      title: "loading",
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-    };
-  },
-  mounted() {
-    if (this.allContainersById[this.id]) {
-      this.title = this.allContainersById[this.id].name;
-    }
-  },
-  computed: {
-    ...mapGetters(["allContainersById", "activeContainers"]),
-  },
-  watch: {
-    id() {
-      this.title = this.allContainersById[this.id].name;
-    },
-    allContainersById() {
-      this.title = this.allContainersById[this.id].name;
-    },
-  },
-};
+});
+
+const { id } = toRefs(props);
+
+const currentContainer = store.currentContainer(id);
+const { activeContainers } = storeToRefs(store);
+
+setTitle("loading");
+
+onMounted(() => {
+  setTitle(currentContainer.value?.name);
+});
+
+watchEffect(() => setTitle(currentContainer.value?.name));
 </script>

assets/pages/ContainerNotFound.vue

@@ -11,13 +11,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { setTitle } from "@/composables/title";
+
 export default {
   name: "ContainerNotFound",
-  metaInfo() {
-    return {
-      title: "Not Found",
-    };
+  setup() {
+    setTitle("Container not found");
   },
 };
 </script>

assets/pages/Index.vue

@@ -50,7 +50,7 @@
                 @keyup.enter="onEnter()"
               />
               <span class="icon is-left">
-                <icon name="search"></icon>
+                <search-icon />
               </span>
             </p>
           </div>
@@ -76,60 +76,47 @@
   </div>
 </template>
 
-<script>
-import { mapState } from "vuex";
-import Icon from "../components/Icon";
-import PastTime from "../components/PastTime";
-import config from "../store/config";
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useContainerStore } from "@/stores/container";
 import fuzzysort from "fuzzysort";
+import SearchIcon from "~icons/mdi-light/magnify";
+import PastTime from "../components/PastTime.vue";
+import config from "@/stores/config";
 
-export default {
-  name: "Index",
-  components: { Icon, PastTime },
-  data() {
-    return {
-      version: config.version,
-      search: null,
-      sort: "running",
-      secured: config.secured,
-      base: config.base,
-    };
-  },
-  methods: {
-    onEnter() {
-      if (this.results.length == 1) {
-        const [item] = this.results;
-        this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
-      }
-    },
-  },
-  computed: {
-    ...mapState(["containers"]),
-    mostRecentContainers() {
-      return [...this.containers].sort((a, b) => b.created - a.created);
-    },
-    runningContainers() {
-      return this.mostRecentContainers.filter((c) => c.state === "running");
-    },
-    allContainers() {
-      return this.containers;
-    },
-    results() {
-      if (this.search) {
-        return fuzzysort.go(this.search, this.allContainers, { key: "name" }).map((i) => i.obj);
-      }
-      switch (this.sort) {
-        case "all":
-          return this.mostRecentContainers;
-        case "running":
-          return this.runningContainers;
+const { base, version, secured } = config;
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore);
+const router = useRouter();
 
-        default:
-          throw `Invalid sort order: ${this.sort}`;
-      }
-    },
-  },
-};
+const sort = ref("running");
+const search = ref();
+
+const results = computed(() => {
+  if (search.value) {
+    return fuzzysort.go(search.value, containers.value, { key: "name" }).map((i) => i.obj);
+  }
+  switch (sort.value) {
+    case "all":
+      return mostRecentContainers.value;
+    case "running":
+      return runningContainers.value;
+    default:
+      throw `Invalid sort order: ${sort.value}`;
+  }
+});
+
+const mostRecentContainers = computed(() => [...containers.value].sort((a, b) => b.created - a.created));
+const runningContainers = computed(() => mostRecentContainers.value.filter((c) => c.state === "running"));
+
+function onEnter() {
+  if (results.value.length == 1) {
+    const [item] = results.value;
+    router.push({ name: "container", params: { id: item.id, name: item.name } });
+  }
+}
 </script>
 <style lang="scss" scoped>
 .panel {

assets/pages/Login.vue

@@ -49,8 +49,9 @@
   </div>
 </template>
 
-<script>
-import config from "../store/config";
+<script lang="ts">
+import config from "@/stores/config";
+import { setTitle } from "@/composables/title";
 export default {
   name: "Login",
   data() {
@@ -60,10 +61,8 @@ export default {
       error: false,
     };
   },
-  metaInfo() {
-    return {
-      title: "Authentication Required",
-    };
+  setup() {
+    setTitle("Authentication Required");
   },
   methods: {
     async onLogin() {

assets/pages/PageNotFound.vue

@@ -3,21 +3,20 @@
     <div class="hero-body">
       <div class="container has-text-centered">
         <h1 class="title">
-          Oops,
-          <small class="subtitle">this page doesn't exist</small>
+          404.
+          <small class="subtitle">This page does not exist.</small>
         </h1>
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { setTitle } from "@/composables/title";
 export default {
   name: "PageNotFound",
-  metaInfo() {
-    return {
-      title: "404 Error",
-    };
+  setup() {
+    setTitle("Page not found");
   },
 };
 </script>

assets/pages/Settings.vue

@@ -10,9 +10,8 @@
         >.
         <span v-if="hasUpdate">
           New version is available! Update to
-          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">{{
-            nextRelease.name
-          }}</a
+          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">
+            {{ nextRelease.name }}</a
           >.
         </span>
       </div>
@@ -25,16 +24,22 @@
       <div class="item">
         <div class="columns is-vcentered">
           <div class="column is-narrow">
-            <b-field>
-              <b-radio-button
-                v-model="hourStyle"
-                :native-value="value"
-                v-for="value in ['auto', '12', '24']"
-                :key="value"
-              >
-                <span class="is-capitalized">{{ value }}</span>
-              </b-radio-button>
-            </b-field>
+            <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">
             By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
@@ -42,26 +47,37 @@
         </div>
 
         <div class="item">
-          <b-switch v-model="smallerScrollbars"> Use smaller scrollbars </b-switch>
+          <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
         </div>
         <div class="item">
-          <b-switch v-model="showTimestamp"> Show timestamps </b-switch>
+          <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
         </div>
       </div>
 
       <div class="item">
         <div class="columns is-vcentered">
           <div class="column is-narrow">
-            <b-field>
-              <b-radio-button
-                v-model="size"
-                :native-value="value"
-                v-for="value in ['small', 'medium', 'large']"
-                :key="value"
-              >
-                <span class="is-capitalized">{{ value }}</span>
-              </b-radio-button>
-            </b-field>
+            <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">Font size to use for logs</div>
         </div>
@@ -73,78 +89,57 @@
       </div>
 
       <div class="item">
-        <b-switch v-model="search">
+        <o-switch v-model="search">
           Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
-        </b-switch>
+        </o-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="showAllContainers"> Show stopped containers </b-switch>
+        <o-switch v-model="showAllContainers"> Show stopped containers </o-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="lightTheme"> Use light theme </b-switch>
+        <o-switch v-model="lightTheme"> Use light theme </o-switch>
       </div>
     </section>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { ref } from "vue";
 import gt from "semver/functions/gt";
-import { mapActions, mapState } from "vuex";
-import Icon from "../components/Icon";
-import config from "../store/config";
+import config from "@/stores/config";
+import { setTitle } from "@/composables/title";
+import {
+  search,
+  lightTheme,
+  smallerScrollbars,
+  showTimestamp,
+  hourStyle,
+  showAllContainers,
+  size,
+} from "@/composables/settings";
 
-export default {
-  props: [],
-  name: "Settings",
-  components: {
-    Icon,
-  },
-  data() {
-    return {
-      currentVersion: config.version,
-      nextRelease: null,
-      hasUpdate: false,
-    };
-  },
-  async created() {
-    const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
-    if (this.currentVersion !== "dev") {
-      this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
-    } else {
-      this.hasUpdate = true;
+setTitle("Settings");
+
+const currentVersion = config.version;
+const nextRelease = ref({ html_url: "", name: "" });
+const hasUpdate = ref(false);
+
+async function fetchNextRelease() {
+  if (!["dev", "master"].includes(currentVersion)) {
+    const response = await fetch("https://api.github.com/repos/dozzle/dozzle/releases/latest");
+    if (response.ok) {
+      const releases = await response.json();
+      hasUpdate.value = gt(releases[0].tag_name, currentVersion);
+      nextRelease.value = releases[0];
     }
-    this.nextRelease = releases[0];
-  },
-  metaInfo() {
-    return {
-      title: "Settings",
-    };
-  },
-  methods: {
-    ...mapActions({
-      updateSetting: "UPDATE_SETTING",
-    }),
-  },
-  computed: {
-    ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme", "hourStyle"].reduce(
-      (map, name) => {
-        map[name] = {
-          get() {
-            return this.settings[name];
-          },
-          set(value) {
-            this.updateSetting({ [name]: value });
-          },
-        };
-        return map;
-      },
-      {}
-    ),
-  },
-};
+  } else {
+    hasUpdate.value = true;
+  }
+}
+
+fetchNextRelease();
 </script>
 <style lang="scss" scoped>
 .title {

assets/pages/Show.vue

@@ -1,29 +1,29 @@
-<template></template>
+<script lang="ts" setup>
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-export default {
-  props: [],
-  name: "Show",
-  computed: mapGetters(["visibleContainers"]),
-  watch: {
-    visibleContainers(newValue) {
-      if (newValue) {
-        if (this.$route.query.name) {
-          const [container, _] = this.visibleContainers.filter((c) => c.name == this.$route.query.name);
-          if (container) {
-            this.$router.push({ name: "container", params: { id: container.id } });
-          } else {
-            console.error(`No containers found matching name=${this.$route.query.name}. Redirecting to /`);
-            this.$router.push({ name: "default" });
-          }
-        } else {
-          console.error(`Expection query parameter name to be set. Redirecting to /`);
-          this.$router.push({ name: "default" });
-        }
+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", params: { id: container.id } });
+      } else {
+        console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
+        router.push({ name: "default" });
       }
-    },
-  },
-};
+    } else {
+      console.error(`Expection query parameter name to be set. Redirecting to /`);
+      router.push({ name: "default" });
+    }
+  }
+});
 </script>
-<style scoped></style>

assets/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

assets/store/index.js

@@ -1,121 +0,0 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import storage from "store/dist/store.modern";
-import { DEFAULT_SETTINGS, DOZZLE_SETTINGS_KEY } from "./settings";
-import config from "./config";
-
-Vue.use(Vuex);
-
-const mql = window.matchMedia("(max-width: 770px)");
-
-storage.set(DOZZLE_SETTINGS_KEY, { ...DEFAULT_SETTINGS, ...storage.get(DOZZLE_SETTINGS_KEY) });
-
-const state = {
-  containers: [],
-  activeContainerIds: [],
-  searchFilter: null,
-  isMobile: mql.matches,
-  settings: storage.get(DOZZLE_SETTINGS_KEY),
-  authorizationNeeded: config.authorizationNeeded,
-};
-
-const mutations = {
-  SET_CONTAINERS(state, containers) {
-    const containersById = getters.allContainersById({ containers });
-
-    containers.forEach(
-      (container) =>
-        (container.stat =
-          containersById[container.id] && containersById[container.id].stat
-            ? containersById[container.id].stat
-            : { memoryUsage: 0, cpu: 0 })
-    );
-
-    state.containers = containers;
-  },
-  ADD_ACTIVE_CONTAINERS(state, { id }) {
-    state.activeContainerIds.push(id);
-  },
-  REMOVE_ACTIVE_CONTAINER(state, { id }) {
-    state.activeContainerIds.splice(state.activeContainerIds.indexOf(id), 1);
-  },
-  SET_SEARCH(state, filter) {
-    state.searchFilter = filter;
-  },
-  SET_MOBILE_WIDTH(state, value) {
-    state.isMobile = value;
-  },
-  UPDATE_SETTINGS(state, newValues) {
-    state.settings = { ...state.settings, ...newValues };
-    storage.set(DOZZLE_SETTINGS_KEY, state.settings);
-  },
-  UPDATE_CONTAINER(_, { container, data }) {
-    for (const [key, value] of Object.entries(data)) {
-      Vue.set(container, key, value);
-    }
-  },
-};
-
-const actions = {
-  APPEND_ACTIVE_CONTAINER({ commit }, container) {
-    commit("ADD_ACTIVE_CONTAINERS", container);
-  },
-  REMOVE_ACTIVE_CONTAINER({ commit }, container) {
-    commit("REMOVE_ACTIVE_CONTAINER", container);
-  },
-  SET_SEARCH({ commit }, filter) {
-    commit("SET_SEARCH", filter);
-  },
-  UPDATE_SETTING({ commit }, setting) {
-    commit("UPDATE_SETTINGS", setting);
-  },
-  UPDATE_STATS({ commit, getters: { allContainersById } }, stat) {
-    const container = allContainersById[stat.id];
-    if (container) {
-      commit("UPDATE_CONTAINER", { container, data: { stat } });
-    }
-  },
-  UPDATE_CONTAINER({ commit, getters: { allContainersById } }, event) {
-    switch (event.name) {
-      case "die":
-        const container = allContainersById[event.actorId];
-        commit("UPDATE_CONTAINER", { container, data: { state: "exited" } });
-        break;
-      default:
-    }
-  },
-};
-
-const getters = {
-  allContainersById({ containers }) {
-    return containers.reduce((map, obj) => {
-      map[obj.id] = obj;
-      return map;
-    }, {});
-  },
-  visibleContainers({ containers, settings: { showAllContainers } }) {
-    const filter = showAllContainers ? () => true : (c) => c.state === "running";
-    return containers.filter(filter);
-  },
-  activeContainers({ activeContainerIds }, { allContainersById }) {
-    return activeContainerIds.map((id) => allContainersById[id]);
-  },
-};
-
-if (!config.authorizationNeeded) {
-  const es = new EventSource(`${config.base}/api/events/stream`);
-  es.addEventListener("containers-changed", (e) => store.commit("SET_CONTAINERS", JSON.parse(e.data)), false);
-  es.addEventListener("container-stat", (e) => store.dispatch("UPDATE_STATS", JSON.parse(e.data)), false);
-  es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
-}
-
-mql.addEventListener("change", (e) => store.commit("SET_MOBILE_WIDTH", e.matches));
-
-const store = new Vuex.Store({
-  state,
-  getters,
-  actions,
-  mutations,
-});
-
-export default store;

assets/store/settings.js

@@ -1,11 +0,0 @@
-export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
-export const DEFAULT_SETTINGS = {
-  search: true,
-  size: "medium",
-  menuWidth: 15,
-  smallerScrollbars: false,
-  showTimestamp: true,
-  showAllContainers: false,
-  lightTheme: false,
-  hourStyle: "auto",
-};

assets/stores/config.ts

@@ -1,6 +1,8 @@
-const config = JSON.parse(document.querySelector("script#config__json").textContent);
+const text = document.querySelector("script#config__json")?.textContent || "{}";
+
+const config = JSON.parse(text);
 if (config.version == "{{ .Version }}") {
-  config.version = "dev";
+  config.version = "master";
   config.base = "";
   config.authorizationNeeded = false;
   config.secured = false;
@@ -9,5 +11,4 @@ if (config.version == "{{ .Version }}") {
   config.authorizationNeeded = config.authorizationNeeded === "true";
   config.secured = config.secured === "true";
 }
-
 export default config;

assets/stores/container.ts

@@ -0,0 +1,66 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref, Ref, computed } from "vue";
+
+import { showAllContainers } from "@/composables/settings";
+import config from "@/stores/config";
+import type { Container, ContainerStat } from "@/types/Container";
+
+export const useContainerStore = defineStore("container", () => {
+  const containers = ref<Container[]>([]);
+  const activeContainerIds = ref<string[]>([]);
+
+  const allContainersById = computed(() =>
+    containers.value.reduce((acc, container) => {
+      acc[container.id] = container;
+      return acc;
+    }, {} as Record<string, Container>)
+  );
+
+  const visibleContainers = computed(() => {
+    const filter = showAllContainers.value ? () => true : (c: Container) => c.state === "running";
+    return containers.value.filter(filter);
+  });
+
+  const activeContainers = computed(() => activeContainerIds.value.map((id) => allContainersById.value[id]));
+
+  const es = new EventSource(`${config.base}/api/events/stream`);
+  es.addEventListener(
+    "containers-changed",
+    (e: Event) => (containers.value = JSON.parse((e as MessageEvent).data)),
+    false
+  );
+  es.addEventListener(
+    "container-stat",
+    (e) => {
+      const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
+      const container = allContainersById.value[stat.id];
+      if (container) {
+        container.stat = stat;
+      }
+    },
+    false
+  );
+  // es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
+
+  const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
+  const appendActiveContainer = ({ id }: Container) => activeContainerIds.value.push(id);
+  const removeActiveContainer = ({ id }: Container) =>
+    activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
+    
+  return {
+    containers,
+    activeContainerIds,
+    allContainersById,
+    visibleContainers,
+    activeContainers,
+    currentContainer,
+    appendActiveContainer,
+    removeActiveContainer,
+  };
+});
+
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept(acceptHMRUpdate(useContainerStore, import.meta.hot));
+}

assets/styles.scss

@@ -1,6 +1,5 @@
 @charset "utf-8";
-@import "~bulma/sass/utilities/initial-variables.sass";
-
+@import "bulma/sass/utilities/initial-variables.sass";
 
 $body-background-color: var(--body-background-color);
 
@@ -25,13 +24,18 @@ $panel-heading-color: var(--panel-heading-color);
 $link: $turquoise;
 $link-active: $grey-dark;
 
-@import "~bulma";
-@import "../node_modules/splitpanes/dist/splitpanes.css";
-@import "~buefy/src/scss/utils/_all";
-@import "~buefy/src/scss/components/_switch";
-@import "~buefy/src/scss/components/_radio";
-@import "~buefy/src/scss/components/_modal";
-@import "~buefy/src/scss/components/_autocomplete";
+$dark-toolbar-color: rgba($black-bis, 0.7);
+$light-toolbar-color: rgba($grey-darker, 0.7);
+
+@import "bulma/bulma.sass";
+@import "@oruga-ui/theme-bulma/dist/scss/components/utils/all.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/autocomplete.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/button.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/modal.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/tooltip.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss";
+@import "splitpanes/dist/splitpanes.css";
 
 html {
   --scheme-main: #{$black};
@@ -46,6 +50,7 @@ html {
   --secondary-color: #{$yellow};
 
   --body-background-color: #{$black-bis};
+  --action-toolbar-background-color: #{$dark-toolbar-color};
 
   --menu-item-active-background-color: var(--primary-color);
   --menu-item-color: hsl(0, 6%, 87%);
@@ -72,6 +77,7 @@ html {
   --secondary-color: #d8f0ca;
 
   --body-background-color: #{$white-bis};
+  --action-toolbar-background-color: #{$light-toolbar-color};
   --body-color: #{$grey-darker};
 
   --menu-item-color: #{$grey-dark};
@@ -121,22 +127,6 @@ html.has-custom-scrollbars {
   }
 }
 
-.is-settings-control {
-  background: rgba(0, 0, 0, 0.4);
-  color: #fff;
-  border-color: transparent;
-  &:hover {
-    border-color: var(--border-hover-color) !important;
-    background: rgba(0, 0, 0, 0.8) !important;
-    color: #fff !important;
-  }
-
-  &:focus {
-    box-shadow: none !important;
-    color: unset;
-    border-color: transparent;
-  }
-}
 @media screen and (min-width: 770px) {
   .splitpanes__pane {
     overflow: unset;
@@ -156,3 +146,7 @@ html.has-custom-scrollbars {
 .modal {
   z-index: 1000;
 }
+
+.button .button-wrapper > span {
+  display: contents;
+}

assets/types/Container.d.ts

@@ -0,0 +1,16 @@
+export interface Container {
+  readonly id: string;
+  readonly created: number;
+  readonly image: string;
+  readonly name: string;
+  readonly state: "created" | "running" | "exited" | "dead" | "paused" | "restarting";
+  readonly status: string;
+  stat?: ContainerStat;
+}
+
+export interface ContainerStat {
+  readonly id: string;
+  readonly cpu: number;
+  readonly memory: number;
+  readonly memoryUsage: number;
+}

assets/types/LogEntry.d.ts

@@ -0,0 +1,6 @@
+export interface LogEntry {
+  date: Date;
+  message: string;
+  key: string;
+  event?: string;
+}

docker/client.go

@@ -40,16 +40,13 @@ type Client interface {
 	ContainerStats(context.Context, string, chan<- ContainerStat) error
 }
 
-// NewClient creates a new instance of Client
-func NewClient() Client {
-	return NewClientWithFilters(map[string]string{})
-}
-
 // NewClientWithFilters creates a new instance of Client with docker filters
-func NewClientWithFilters(f map[string]string) Client {
+func NewClientWithFilters(f map[string][]string) Client {
 	filterArgs := filters.NewArgs()
-	for k, v := range f {
-		filterArgs.Add(k, v)
+	for key, values := range f {
+		for _, value := range values {
+			filterArgs.Add(key, value)
+		}
 	}
 
 	log.Debugf("filterArgs = %v", filterArgs)
@@ -78,8 +75,8 @@ func (d *dockerClient) FindContainer(id string) (Container, error) {
 			break
 		}
 	}
-	if found == false {
-		return container, fmt.Errorf("Unable to find container with id: %s", id)
+	if !found {
+		return container, fmt.Errorf("unable to find container with id: %s", id)
 	}
 
 	return container, nil
@@ -177,6 +174,7 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 		Since:      since,
 	}
 
+	log.Debugf("streaming logs from Docker with option: %+v", options)
 	reader, err := d.cli.ContainerLogs(ctx, id, options)
 	if err != nil {
 		return nil, err
@@ -205,9 +203,12 @@ func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-cha
 				if !ok {
 					return
 				}
-				messages <- ContainerEvent{
-					ActorID: message.Actor.ID[:12],
-					Name:    message.Action,
+
+				if message.Type == "container" && len(message.Actor.ID) > 0 {
+					messages <- ContainerEvent{
+						ActorID: message.Actor.ID[:12],
+						Name:    message.Action,
+					}
 				}
 			}
 		}
@@ -221,10 +222,12 @@ func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string,
 		ShowStdout: true,
 		ShowStderr: true,
 		Timestamps: true,
-		Since:      strconv.FormatInt(from.Unix(), 10),
-		Until:      strconv.FormatInt(to.Unix(), 10),
+		Since:      from.Format(time.RFC3339),
+		Until:      to.Format(time.RFC3339),
 	}
 
+	log.Debugf("fetching logs from Docker with option: %+v", options)
+
 	reader, err := d.cli.ContainerLogs(ctx, id, options)
 
 	if err != nil {

e2e/.gitignore

@@ -0,0 +1,3 @@
+videos
+screenshots
+__diff_output__

e2e/Dockerfile

@@ -0,0 +1,12 @@
+FROM cypress/included:9.0.0
+
+RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /e2e
+
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch
+
+COPY package.json ./
+RUN pnpm install -r --offline
+

e2e/cypress.env.json

@@ -0,0 +1,3 @@
+{
+  "DOZZLE_DEFAULT": "http://localhost:3000/"
+}

e2e/cypress.json

@@ -0,0 +1,3 @@
+{
+  "fixturesFolder": false
+}

e2e/cypress/integration/dozze_dark.spec.js

@@ -0,0 +1,25 @@
+/// <reference types="cypress" />
+
+context("Dozzle default mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("home screen", () => {
+    cy.get("li.running", { timeout: 10000 }).removeDates().matchImageSnapshot();
+  });
+
+  it("correct title", () => {
+    cy.title().should("eq", "1 containers - Dozzle");
+
+    cy.get("li.running:first a").click();
+
+    cy.title().should("include", "- Dozzle");
+  });
+
+  it("settings page", () => {
+    cy.get("a[href='/settings']").click();
+
+    cy.contains("About");
+  });
+});

e2e/cypress/integration/dozze_settings.spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+context("Dozzle settings mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  beforeEach(() => {
+    cy.visit("/version").clearLocalStorage().visit("/settings");
+  });
+
+  it("scrollbars", () => {
+    cy.contains("Use smaller scrollbars").click();
+    cy.get("html").should("have.class", "has-custom-scrollbars");
+  });
+
+  it("stopped containers", () => {
+    cy.contains("Show stopped containers")
+      .click()
+      .then(() => {
+        expect(JSON.parse(localStorage.getItem("DOZZLE_SETTINGS")).showAllContainers).to.be.true;
+      });
+  });
+});

e2e/cypress/integration/dozzle_light.spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+context("Dozzle light mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  before(() => {
+    cy.visit("/settings");
+    cy.contains("Use light theme").click();
+  });
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("home screen", () => {
+    cy.get("li.running", { timeout: 10000 }).removeDates().matchImageSnapshot();
+  });
+});

e2e/cypress/integration/dozzle_routes.spec.js

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+
+context("Dozzle routes", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  it("show", () => {
+    cy.visit("/show?name=dozzle").url().should("include", "/container/");
+  });
+});

e2e/cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { addMatchImageSnapshotPlugin } = require("cypress-image-snapshot/plugin");
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  addMatchImageSnapshotPlugin(on, config);
+};

e2e/cypress/support/commands.js

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
+
+addMatchImageSnapshotCommand();
+
+Cypress.Commands.add("removeDates", () => {
+  cy.window().then((win) => win.document.querySelectorAll("time").forEach((el) => el.remove()));
+});

e2e/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

e2e/docker-compose.yml

@@ -7,6 +7,9 @@ services:
     environment:
       - DOZZLE_FILTER=name=custom_base
       - DOZZLE_BASE=/foobarbase
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - "8080:8080"
     build:
       context: ..
   dozzle:
@@ -15,17 +18,21 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
     environment:
       - DOZZLE_FILTER=name=dozzle
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - "9090:8080"
     build:
       context: ..
-  integration:
+  cypress:
     build:
       context: .
-    command: yarn test
+    working_dir: /e2e
     volumes:
-      - ./__tests__:/app/__tests__
+      - ./cypress:/e2e/cypress
+      - ./cypress.json:/e2e/cypress.json
     environment:
-      - DEFAULT_URL=http://dozzle:8080/
-      - CUSTOM_URL=http://custom_base:8080/foobarbase
+      - CYPRESS_DOZZLE_DEFAULT=http://dozzle:8080/
+      - CYPRESS_CUSTOM_DEFAULT=http://custom_base:8080/foobarbase
     depends_on:
       - dozzle
       - custom_base

e2e/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "e2e",
+  "version": "1.0.0",
+  "scripts": {},
+  "license": "ISC",
+  "dependencies": {
+    "cypress": "^9.0.0",
+    "cypress-image-snapshot": "^4.0.1"
+  }
+}

go.mod

@@ -1,44 +1,44 @@
 module github.com/amir20/dozzle
 
 require (
-	github.com/Microsoft/go-winio v0.4.16 // indirect
+	github.com/Microsoft/go-winio v0.5.1 // indirect
+	github.com/alexflint/go-arg v1.4.2
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/containerd/containerd v1.4.4 // indirect
+	github.com/containerd/containerd v1.5.7 // indirect
 	github.com/docker/distribution v2.7.1+incompatible // indirect
-	github.com/docker/docker v20.10.6+incompatible
+	github.com/docker/docker v20.10.12+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/fsnotify/fsnotify v1.4.9 // indirect
 	github.com/gogo/protobuf v1.3.2 // indirect
-	github.com/golang/protobuf v1.5.1 // indirect
 	github.com/gorilla/mux v1.8.0
 	github.com/gorilla/sessions v1.2.1
 	github.com/magiconair/properties v1.8.5
-	github.com/mitchellh/mapstructure v1.4.1 // indirect
 	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/pelletier/go-toml v1.8.1 // indirect
 	github.com/sergi/go-diff v1.1.0 // indirect
 	github.com/sirupsen/logrus v1.8.1
-	github.com/spf13/afero v1.6.0
-	github.com/spf13/cast v1.3.1 // indirect
-	github.com/spf13/jwalterweatherman v1.1.0 // indirect
-	github.com/spf13/pflag v1.0.5
-	github.com/spf13/viper v1.7.1
+	github.com/spf13/afero v1.8.0
 	github.com/stretchr/objx v0.3.0 // indirect
 	github.com/stretchr/testify v1.7.0
-	golang.org/x/net v0.0.0-20210316092652-d523dce5a7f4 // indirect
-	golang.org/x/sys v0.0.0-20210320140829-1e4c9ba3b0c4 // indirect
-	golang.org/x/text v0.3.5 // indirect
-	google.golang.org/genproto v0.0.0-20210319143718-93e7006c17a6 // indirect
-	google.golang.org/grpc v1.36.0 // indirect
-	gopkg.in/ini.v1 v1.62.0 // indirect
-	gopkg.in/yaml.v2 v2.4.0 // indirect
+	golang.org/x/net v0.0.0-20211104170005-ce137452f963 // indirect
+	golang.org/x/sys v0.0.0-20211103235746-7861aae1554b // indirect
+	google.golang.org/genproto v0.0.0-20211104193956-4c6863e31247 // indirect
+	google.golang.org/grpc v1.42.0 // indirect
 	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect
-	gotest.tools/v3 v3.0.3 // indirect
 )
 
-go 1.16
+require (
+	github.com/alexflint/go-scalar v1.1.0 // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/golang/protobuf v1.5.2 // indirect
+	github.com/gorilla/securecookie v1.1.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
+	google.golang.org/protobuf v1.27.1 // indirect
+)
+
+go 1.17

integration/.dockerignore

@@ -1 +0,0 @@
-node_modules

integration/.gitignore

@@ -1 +0,0 @@
-__diff_output__

integration/Dockerfile

@@ -1,8 +0,0 @@
-FROM amir20/docker-alpine-puppeteer:v1
-
-COPY package*.json yarn.lock /app/
-RUN yarn
-
-COPY . /app/
-
-CMD ["yarn", "test"]

integration/__tests__/custom_base.js

@@ -1,22 +0,0 @@
-const { removeTimes } = require("../utils");
-const { CUSTOM_URL: URL } = process.env;
-
-describe("Dozzle with custom base", () => {
-  beforeEach(async () => {
-    await page.goto(URL, { waitUntil: "networkidle2" });
-  });
-
-  it("renders full page on desktop", async () => {
-    await removeTimes(page);
-    const image = await page.screenshot({ fullPage: true });
-
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it("and shows one container with correct title", async () => {
-    await removeTimes(page);
-    const menuTitle = await page.$eval("aside ul.menu-list li a", (e) => e.title);
-
-    expect(menuTitle).toEqual("custom_base");
-  });
-});

integration/__tests__/default.js

@@ -1,76 +0,0 @@
-const puppeteer = require("puppeteer");
-const { removeTimes } = require("../utils");
-const iPhoneX = puppeteer.devices["iPhone X"];
-const iPadLandscape = puppeteer.devices["iPad landscape"];
-
-const { DEFAULT_URL: URL } = process.env;
-
-describe("home page", () => {
-  beforeEach(async () => {
-    await page.goto(URL, { waitUntil: "networkidle2" });
-  });
-
-  it("renders full page on desktop", async () => {
-    await removeTimes(page);
-    const image = await page.screenshot({ fullPage: true });
-
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it("renders ipad viewport", async () => {
-    await page.emulate(iPadLandscape);
-    await removeTimes(page);
-    const image = await page.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it("renders iphone viewport", async () => {
-    await page.emulate(iPhoneX);
-    await removeTimes(page);
-    const image = await page.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it("displays iphone menu", async () => {
-    await page.emulate(iPhoneX);
-    await page.click("a.navbar-burger");
-
-    const menuText = await page.$eval("aside ul.menu-list.is-hidden-mobile li a", (e) => e.textContent);
-    expect(menuText.trim()).toEqual("dozzle");
-  });
-
-  describe("has menu visible", () => {
-    beforeAll(async () => {
-      await jestPuppeteer.resetBrowser();
-    });
-
-    beforeEach(async () => {
-      await page.goto(URL, { waitUntil: "networkidle2" });
-    });
-
-    it("and shows one container with correct title", async () => {
-      const menuTitle = await page.$eval("aside ul.menu-list li a", (e) => e.title);
-
-      expect(menuTitle).toEqual("dozzle");
-    });
-
-    it("and menu is clickable", async () => {
-      await page.click("aside ul.menu-list li a");
-
-      const className = await page.$eval("aside ul.menu-list li a", (e) => e.className);
-
-      expect(className).toContain("router-link-exact-active");
-    });
-
-    it("and when clicked shows logs", async () => {
-      await page.click("aside ul.menu-list li a");
-
-      await page.waitForSelector("ul.events li span.text");
-      const text = await page.$eval("ul.events li:nth-child(2) span.text", (e) => e.textContent);
-
-      expect(text).toContain("Dozzle version dev");
-    });
-  });
-});

integration/__tests__/light_mode.js

@@ -1,41 +0,0 @@
-const puppeteer = require("puppeteer");
-const { removeTimes } = require("../utils");
-const iPhoneX = puppeteer.devices["iPhone X"];
-const iPadLandscape = puppeteer.devices["iPad landscape"];
-
-const { DEFAULT_URL: URL } = process.env;
-
-describe("Dozzle with light mode", () => {
-  beforeAll(async () => {
-    await page.goto(URL + "/settings", { waitUntil: "networkidle2" });
-    await page.$$eval("label.switch", (elements) => {
-      elements.filter((e) => e.textContent.trim() === "Use light theme")[0].click();
-    });
-  });
-  beforeEach(async () => {
-    await page.goto(URL, { waitUntil: "networkidle2" });
-  });
-
-  it("renders full page on desktop", async () => {
-    await removeTimes(page);
-    const image = await page.screenshot({ fullPage: true });
-
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it("renders ipad viewport", async () => {
-    await page.emulate(iPadLandscape);
-    await removeTimes(page);
-    const image = await page.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it("renders iphone viewport", async () => {
-    await page.emulate(iPhoneX);
-    await removeTimes(page);
-    const image = await page.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-  });
-});

integration/jest-puppeteer.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  launch: {
-    headless: process.env.HEADLESS !== "false",
-    defaultViewport: { width: 1920, height: 1200 },
-    args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    executablePath: process.env.CHROME_EXE_PATH || "",
-  },
-  browserContext: "incognito",
-};

integration/jest-setup.js

@@ -1,5 +0,0 @@
-const { toMatchImageSnapshot } = require("jest-image-snapshot");
-
-expect.extend({ toMatchImageSnapshot });
-
-jest.setTimeout(5000);

integration/package.json

@@ -1,24 +0,0 @@
-{
- "name": "test",
- "version": "1.0.0",
- "description": "",
- "scripts": {
-  "test": "jest"
- },
- "author": "",
- "license": "ISC",
- "dependencies": {
-  "jest": "^26.0.1",
-  "jest-image-snapshot": "^4.0.0",
-  "puppeteer": "^8.0.0"
- },
- "jest": {
-  "preset": "jest-puppeteer",
-  "setupFilesAfterEnv": [
-   "<rootDir>/jest-setup.js"
-  ]
- },
- "devDependencies": {
-  "jest-puppeteer": "^4.4.0"
- }
-}

integration/utils.js

@@ -1,8 +0,0 @@
-async function removeTimes(page) {
-  await page.waitForSelector("time");
-  await page.evaluate(() => {
-    (document.querySelectorAll("time") || []).forEach((el) => el.remove());
-  });
-}
-
-module.exports = { removeTimes };