Release 4.2.3

Bump cypress/included from 10.10.0 to 10.11.0 in /e2e

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.3
+        uses: pnpm/action-setup@v2.2.4
         with:
           version: 6.20.1
       - name: Install dependencies
@@ -53,7 +53,7 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.1.0
+        uses: docker/setup-buildx-action@v2.2.1
       - name: Login to DockerHub
         uses: docker/login-action@v2.1.0
         with:
@@ -81,7 +81,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.3
+        uses: pnpm/action-setup@v2.2.4
         with:
           version: 6.20.1
       - name: Install dependencies

.github/workflows/dev.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.1.0
+        uses: docker/setup-buildx-action@v2.2.1
       - name: Login to DockerHub
         uses: docker/login-action@v2.1.0
         with:

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.3
+        uses: pnpm/action-setup@v2.2.4
         with:
           version: 6.20.1
       - name: Install dependencies
@@ -44,7 +44,7 @@ jobs:
         with:
           fetch-depth: 2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.1.0
+        uses: docker/setup-buildx-action@v2.2.1
       - name: Login to DockerHub
         uses: docker/login-action@v2.1.0
         with:

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:18-alpine as node
+FROM --platform=$BUILDPLATFORM node:19-alpine as node
 
 RUN npm install -g pnpm
 

assets/auto-imports.d.ts

@@ -68,6 +68,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -207,6 +209,7 @@ declare global {
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useLogStream: typeof import('./composables/eventsource')['useLogStream']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
@@ -250,6 +253,7 @@ declare global {
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
@@ -376,6 +380,8 @@ declare module '@vue/runtime-core' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -515,6 +521,7 @@ declare module '@vue/runtime-core' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
@@ -558,6 +565,7 @@ declare module '@vue/runtime-core' {
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>

assets/components.d.ts

@@ -13,7 +13,6 @@ declare module '@vue/runtime-core' {
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
-    CpuSparkline: typeof import('./components/StatSparkline.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
@@ -45,6 +44,7 @@ declare module '@vue/runtime-core' {
     SideMenu: typeof import('./components/SideMenu.vue')['default']
     SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
     SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
+    StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }

assets/components/LogViewer/ContainerStat.vue

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

assets/components/LogViewer/LogContainer.vue

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

assets/components/LogViewer/LogDate.vue

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

assets/components/LogViewer/StatMonitor.vue

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

assets/components/LogViewer/StatSparkline.vue

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

assets/components/ScrollableView.vue

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

assets/components/SideMenu.vue

@@ -9,7 +9,7 @@
         </router-link>
       </div>
       <div class="column is-narrow has-text-right px-1">
-        <button class="button is-rounded" @click="$emit('search')" title="$t('tooltip.search')">
+        <button class="button is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
           <span class="icon">
             <mdi-light-magnify />
           </span>
@@ -40,7 +40,7 @@
                 class="icon is-small"
                 @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
-                title="$t('tooltip.pin-column')"
+                :title="$t('tooltip.pin-column')"
               >
                 <cil-columns />
               </span>

assets/composables/eventsource.ts

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

assets/styles.scss

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

assets/types/Point.d.ts

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

e2e/Dockerfile

@@ -1,4 +1,4 @@
-FROM cypress/included:10.10.0
+FROM cypress/included:10.11.0
 
 RUN apt install curl && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
 

go.mod

@@ -5,7 +5,7 @@ require (
 	github.com/alexflint/go-arg v1.4.3
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
 	github.com/docker/distribution v2.7.1+incompatible // indirect
-	github.com/docker/docker v20.10.19+incompatible
+	github.com/docker/docker v20.10.21+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
@@ -20,8 +20,8 @@ require (
 	github.com/sergi/go-diff v1.1.0 // indirect
 	github.com/sirupsen/logrus v1.9.0
 	github.com/spf13/afero v1.9.2
-	github.com/stretchr/objx v0.4.0 // indirect
-	github.com/stretchr/testify v1.8.0
+	github.com/stretchr/objx v0.5.0 // indirect
+	github.com/stretchr/testify v1.8.1
 	golang.org/x/net v0.0.0-20211104170005-ce137452f963 // indirect
 	golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect

go.sum

@@ -62,8 +62,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/docker/distribution v2.7.1+incompatible h1:a5mlkVzth6W5A4fOsS3D2EO5BUmsJpcB+cRlLU7cSug=
 github.com/docker/distribution v2.7.1+incompatible/go.mod h1:J2gT2udsDAN96Uj4KfcMRqY0/ypR+oyYUYmja8H+y+w=
-github.com/docker/docker v20.10.19+incompatible h1:lzEmjivyNHFHMNAFLXORMBXyGIhw/UP4DvJwvyKYq64=
-github.com/docker/docker v20.10.19+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
+github.com/docker/docker v20.10.21+incompatible h1:UTLdBmHk3bEY+w8qeO5KttOhy6OmXWsl/FEet9Uswog=
+github.com/docker/docker v20.10.21+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
 github.com/docker/go-connections v0.4.0 h1:El9xVISelRB7BuFusrZozjnkIM5YnzCViNKohAFqRJQ=
 github.com/docker/go-connections v0.4.0/go.mod h1:Gbd7IOopHjR8Iph03tsViu4nIes5XhDvyHbTtUxmeec=
 github.com/docker/go-units v0.4.0 h1:3uh0PgVws3nIA0Q+MwDC8yjEPf9zjRfZZWXZYDct3Tw=
@@ -185,15 +185,17 @@ github.com/spf13/afero v1.9.2 h1:j49Hj62F0n+DaZ1dDCvhABaPNSGNkt32oRFxI33IEMw=
 github.com/spf13/afero v1.9.2/go.mod h1:iUV7ddyEEZPO5gA3zD4fJt6iStLlL+Lg4m2cihcDf8Y=
 github.com/spf13/pflag v1.0.3/go.mod h1:DYY7MBk1bdzusC3SYhjObp+wFpr4gzcvqqNjLnInEg4=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/objx v0.4.0 h1:M2gUjqZET1qApGOWNSnZ49BAIMX4F/1plDv3+l31EJ4=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0 h1:1zr/of2m5FGMsad5YfcqgdqdWrIhu+EBEJRhR1U7z/c=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
 github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
 github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.0 h1:pSgiaMZlXftHpm5L7V1+rVB+AZJydKsMxsQBIJw4PKk=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=

main.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"embed"
 	"io/fs"
+	"io/ioutil"
 	"net/http"
 	"os"
 	"os/signal"
@@ -31,6 +32,8 @@ type args struct {
 	TailSize             int                 `arg:"env:DOZZLE_TAILSIZE" default:"300" help:"update the initial tail size when fetching logs."`
 	Username             string              `arg:"env:DOZZLE_USERNAME" help:"sets the username for auth."`
 	Password             string              `arg:"env:DOZZLE_PASSWORD" help:"sets password for auth"`
+	UsernameFILE         string              `arg:"env:DOZZLE_USERNAME_FILE" help:"sets the secret path read username for auth."`
+	PasswordFILE         string              `arg:"env:DOZZLE_PASSWORD_FILE" help:"sets the secret path read password for auth"`
 	NoAnalytics          bool                `arg:"--no-analytics,env:DOZZLE_NO_ANALYTICS" help:"disables anonymous analytics"`
 	WaitForDockerSeconds int                 `arg:"--wait-for-docker-seconds,env:DOZZLE_WAIT_FOR_DOCKER_SECONDS" help:"wait for docker to be available for at most this many seconds before starting the server."`
 	FilterStrings        []string            `arg:"env:DOZZLE_FILTER,--filter,separate" help:"filters docker containers using Docker syntax."`
@@ -92,9 +95,27 @@ func main() {
 			args.WaitForDockerSeconds -= 5
 		}
 	}
+	
+	username := args.Username
+	password := args.Password
+	
+	if args.UsernameFILE != "" && args.PasswordFILE != "" {
+		contentUser, err := ioutil.ReadFile(args.UsernameFILE)
+		if err != nil {
+	  		log.Fatal(err)
+		}
+		username = string(contentUser)
+		
+		contentPassword, err := ioutil.ReadFile(args.PasswordFILE)
+		if err != nil {
+	  		log.Fatal(err)
+		}
+		
+		password = string(contentPassword)
+	}
 
-	if args.Username != "" || args.Password != "" {
-		if args.Username == "" || args.Password == "" {
+	if (args.Username != "" || args.Password != "") || (args.UsernameFILE != "" || args.PasswordFILE != "") {
+		if username == "" || password == "" {
 			log.Fatalf("Username AND password are required for authentication")
 		}
 	}
@@ -104,8 +125,8 @@ func main() {
 		Base:     args.Base,
 		Version:  version,
 		TailSize: args.TailSize,
-		Username: args.Username,
-		Password: args.Password,
+		Username: username,
+		Password: password,
 	}
 
 	assets, err := fs.Sub(content, "dist")
@@ -119,7 +140,7 @@ func main() {
 	}
 
 	srv := web.CreateServer(dockerClient, assets, config)
-	go doStartEvent(args)
+	go doStartEvent(args, username)
 	go func() {
 		log.Infof("Accepting connections on %s", srv.Addr)
 		if err := srv.ListenAndServe(); err != http.ErrServerClosed {
@@ -138,7 +159,7 @@ func main() {
 	os.Exit(0)
 }
 
-func doStartEvent(arg args) {
+func doStartEvent(arg args, username string) {
 	if arg.NoAnalytics {
 		log.Debug("Analytics disabled.")
 		return
@@ -156,7 +177,7 @@ func doStartEvent(arg args) {
 		CustomAddress: arg.Addr != ":8080",
 		CustomBase:    arg.Base != "/",
 		TailSize:      arg.TailSize,
-		Protected:     arg.Username != "",
+		Protected:     username != "",
 	}
 
 	if err := analytics.SendStartEvent(event); err != nil {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dozzle",
-  "version": "4.2.0",
+  "version": "4.2.3",
   "description": "Realtime log viewer for docker containers. ",
   "homepage": "https://github.com/amir20/dozzle#readme",
   "bugs": {
@@ -22,16 +22,16 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.1.8",
+    "@iconify-json/carbon": "^1.1.9",
     "@iconify-json/cil": "^1.1.2",
-    "@iconify-json/mdi": "^1.1.33",
+    "@iconify-json/mdi": "^1.1.34",
     "@iconify-json/mdi-light": "^1.1.2",
-    "@iconify-json/octicon": "^1.1.20",
+    "@iconify-json/octicon": "^1.1.21",
     "@oruga-ui/oruga-next": "^0.5.6",
     "@oruga-ui/theme-bulma": "^0.2.7",
-    "@vueuse/core": "^9.3.0",
-    "@vueuse/integrations": "^9.3.0",
-    "@vueuse/router": "^9.3.0",
+    "@vueuse/core": "^9.4.0",
+    "@vueuse/integrations": "^9.4.0",
+    "@vueuse/router": "^9.4.0",
     "ansi-to-html": "^0.7.2",
     "bulma": "^0.9.4",
     "d3-array": "^3.2.0",
@@ -45,10 +45,10 @@
     "lodash.debounce": "^4.0.8",
     "pinia": "^2.0.23",
     "semver": "^7.3.8",
-    "splitpanes": "^3.1.1",
-    "vue": "^3.2.40",
+    "splitpanes": "^3.1.5",
+    "vue": "^3.2.41",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.5"
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
@@ -60,11 +60,11 @@
     "@types/d3-shape": "^3.1.0",
     "@types/d3-transition": "^3.0.2",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^18.8.5",
-    "@types/semver": "^7.3.12",
-    "@vitejs/plugin-vue": "3.1.2",
-    "@vue/compiler-sfc": "^3.2.40",
-    "@vue/test-utils": "^2.1.0",
+    "@types/node": "^18.11.7",
+    "@types/semver": "^7.3.13",
+    "@vitejs/plugin-vue": "3.2.0",
+    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/test-utils": "^2.2.0",
     "c8": "^7.12.0",
     "eventsourcemock": "^2.0.0",
     "husky": "^8.0.1",
@@ -77,14 +77,14 @@
     "sass": "^1.55.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
-    "unplugin-auto-import": "^0.11.2",
-    "unplugin-icons": "^0.14.11",
-    "unplugin-vue-components": "^0.22.8",
-    "vite": "3.1.8",
-    "vite-plugin-pages": "^0.26.0",
+    "unplugin-auto-import": "^0.11.4",
+    "unplugin-icons": "^0.14.12",
+    "unplugin-vue-components": "^0.22.9",
+    "vite": "3.2.1",
+    "vite-plugin-pages": "^0.27.1",
     "vite-plugin-vue-layouts": "^0.7.0",
-    "vitest": "^0.24.1",
-    "vue-tsc": "^1.0.7"
+    "vitest": "^0.24.3",
+    "vue-tsc": "^1.0.9"
   },
   "lint-staged": {
     "*.{js,vue,css}": [