Release 3.12.2

* Adds log message using new syntax

.github/workflows/test.yml

@@ -1,7 +1,7 @@
 on:
   push:
     branches:
-      - "**"
+      - master
   pull_request:
     branches:
       - master
@@ -41,7 +41,15 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
       - name: Build images
         run: docker-compose -f e2e/docker-compose.yml build
+      - name: Set commit message for push
+        if: github.event_name == 'push'
+        run: echo "GIT_LOG_MESSAGE=$(git log -1 --pretty=%B ${GITHUB_SHA})" >> $GITHUB_ENV
+      - name: Set commit message for pull request
+        if: github.event_name == 'pull_request'
+        run: echo "GIT_LOG_MESSAGE=$(git log -1 --pretty=%B ${{github.event.pull_request.head.sha}})" >> $GITHUB_ENV
       - name: Run tests
         run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

assets/components.d.ts

@@ -5,6 +5,8 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    CilColumns: typeof import('~icons/cil/columns')['default']
     CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
     ContainerStat: typeof import('./components/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
@@ -17,7 +19,15 @@ declare module '@vue/runtime-core' {
     LogViewer: typeof import('./components/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
+    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
+    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
+    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
+    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
     MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
+    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
+    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
     PastTime: typeof import('./components/PastTime.vue')['default']
     RelativeTime: typeof import('./components/RelativeTime.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

assets/components/ContainerStat.vue

@@ -20,6 +20,7 @@
 <script lang="ts" setup>
 import { ContainerStat } from "@/types/Container";
 import { PropType } from "vue";
+import { formatBytes } from "@/utils";
 
 defineProps({
   stat: {
@@ -28,14 +29,6 @@ defineProps({
   },
   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>

assets/components/FuzzySearchModal.vue

@@ -88,7 +88,7 @@ const results = computed(() => {
 onMounted(() => nextTick(() => autocomplete.value?.focus()));
 
 function selected(item: { id: string; name: string }) {
-  router.push({ name: "container", params: { id: item.id, name: item.name } });
+  router.push({ name: "container", params: { id: item.id } });
   emit("close");
 }
 function addColumn(container: Container) {

assets/components/LogEventSource.spec.ts

@@ -8,6 +8,7 @@ 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";
+import { createRouter, createWebHistory } from "vue-router";
 
 vi.mock("lodash.debounce", () => ({
   __esModule: true,
@@ -50,7 +51,7 @@ describe("<LogEventSource />", () => {
 
   function createLogEventSource(
     {
-      searchFilter = undefined,
+      searchFilter = "",
       hourStyle = "auto",
     }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
       hourStyle: "auto",
@@ -58,9 +59,22 @@ describe("<LogEventSource />", () => {
   ) {
     settings.value.hourStyle = hourStyle;
     search.searchFilter.value = searchFilter;
+
+    const router = createRouter({
+      history: createWebHistory("/"),
+      routes: [
+        {
+          path: "/",
+          component: {
+            template: "Test from createLogEventSource",
+          },
+        },
+      ],
+    });
+
     return mount(LogEventSource, {
       global: {
-        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
         components: {
           LogViewer,
         },

assets/components/LogViewer.vue

@@ -1,15 +1,15 @@
 <template>
-  <ul class="events" :class="size" ref="events">
+  <ul class="events" ref="events" :class="{ 'disable-wrap': !softWrap, [size]: true }">
     <li
       v-for="(item, index) in filtered"
       :key="item.key"
-      :data-event="item.event"
       :data-key="item.key"
-      :class="item.selected ? 'selected' : ''"
+      :data-event="item.event"
+      :class="{ selected: item.selected }"
     >
-      <div class="line-options" v-if="isSearching()">
+      <div class="line-options" v-show="isSearching()">
         <dropdown-menu :class="{ 'is-last': index === filtered.length - 1 }" class="is-top minimal">
-          <a class="dropdown-item" @click="handleJumpLineSelected">
+          <a class="dropdown-item" @click="handleJumpLineSelected($event, item)" :href="`#${item.key}`">
             <div class="level is-justify-content-start">
               <div class="level-left">
                 <div class="level-item">
@@ -32,15 +32,13 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref, toRefs, watch, nextTick } from "vue";
-
-import { size, showTimestamp } from "@/composables/settings";
+import { PropType, ref, toRefs, watch } from "vue";
+import { useRouteHash } from "@vueuse/router";
+import { size, showTimestamp, softWrap } from "@/composables/settings";
 import RelativeTime from "./RelativeTime.vue";
 import AnsiConvertor from "ansi-to-html";
 import { LogEntry } from "@/types/LogEntry";
 import { useSearchFilter } from "@/composables/search";
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
 
 const props = defineProps({
   messages: {
@@ -50,49 +48,41 @@ const props = defineProps({
 });
 
 const ansiConvertor = new AnsiConvertor({ escapeXML: true });
-const colorize = (value: string) =>
-  ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+const { filteredMessages, resetSearch, markSearch, isSearching } = useSearchFilter();
+const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
 const { messages } = toRefs(props);
-const { filteredMessages, searchFilter, resetSearch, isSearching } = useSearchFilter();
-const store = useContainerStore();
-const { activeContainers } = storeToRefs(store);
 const filtered = filteredMessages(messages);
-const events = ref(null);
-let selectedLine;
-const handleJumpLineSelected = async (e) => {
-  const line = e.target.closest("li");
-  if (line.tagName !== "LI") {
-    return;
+const events = ref<HTMLElement>();
+let lastSelectedItem: LogEntry | undefined = undefined;
+function handleJumpLineSelected(e: Event, item: LogEntry) {
+  if (lastSelectedItem) {
+    lastSelectedItem.selected = false;
   }
-  selectedLine = line;
+  lastSelectedItem = item;
+  item.selected = true;
   resetSearch();
-};
-watch(filtered, async (newVal, oldVal) => {
-  if (selectedLine == null) {
-    return;
-  }
-  await nextTick();
-  for (const item of messages.value) {
-    item.selected = false;
-    if (item.key === selectedLine.dataset.key) {
-      item.selected = true;
-    }
-  }
-  // when in split pane mode - scroll the pane element, when not in split pane mode - scroll the window element
-  const inSplitPane = activeContainers.value.length > 0;
-  const elemToScroll = inSplitPane ? events.value.closest("main") : window;
-  elemToScroll.scrollTo(0, 0);
-  // wait 1s before jumping when in split pane mode to ensure the correct line is scrolled to, single pane mode does not have this issue thus only 10ms is needed
-  await new Promise((resolve) => setTimeout(resolve, inSplitPane ? 1000 : 10));
-  elemToScroll.scrollTo(0, selectedLine.offsetTop - 200);
-  selectedLine = null;
-});
+}
+
+const routeHash = useRouteHash();
+watch(
+  routeHash,
+  (hash) => {
+    document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
+  },
+  { immediate: true, flush: "post" }
+);
 </script>
 <style scoped lang="scss">
 .events {
   padding: 1em;
   font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
-  overflow: hidden;
+
+  &.disable-wrap {
+    .line,
+    .text {
+      white-space: nowrap;
+    }
+  }
 
   & > li {
     display: flex;
@@ -108,9 +98,10 @@ watch(filtered, async (newVal, oldVal) => {
     &[data-event="container-started"] {
       color: hsl(141, 53%, 53%);
     }
-    &.selected {
+    &.selected .date {
       background-color: var(--menu-item-active-background-color);
-      color: black;
+
+      color: var(--text-color);
     }
     &.selected > .date {
       background-color: white;
@@ -170,6 +161,7 @@ watch(filtered, async (newVal, oldVal) => {
 .date {
   padding-left: 5px;
   padding-right: 5px;
+  border-radius: 3px;
 }
 
 .text {

assets/components/MobileMenu.vue

@@ -27,11 +27,7 @@
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
-        <router-link
-          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
-          active-class="is-active"
-          :title="item.name"
-        >
+        <router-link :to="{ name: 'container', params: { id: item.id } }" active-class="is-active" :title="item.name">
           <div class="is-ellipsis">
             {{ item.name }}
           </div>

assets/components/SideMenu.vue

@@ -26,11 +26,7 @@
     <p class="menu-label is-hidden-mobile">Containers</p>
     <ul class="menu-list is-hidden-mobile">
       <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
-        <router-link
-          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
-          active-class="is-active"
-          :title="item.name"
-        >
+        <router-link :to="{ name: 'container', params: { id: item.id } }" active-class="is-active" :title="item.name">
           <div class="container is-flex is-align-items-center">
             <div class="is-flex-grow-1 is-ellipsis">
               {{ item.name }}

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

@@ -3,7 +3,26 @@
 exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
 "<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
   <li data-key=\\"2019-06-12T23:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <!--v-if-->
+    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-3af6a38b=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T23:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
+                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
     <div class=\\"line\\" 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></div>
   </li>
 </ul>"
@@ -12,7 +31,26 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
 exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
 "<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
   <li data-key=\\"2019-06-12T23:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <!--v-if-->
+    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-3af6a38b=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T23:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
+                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
     <div class=\\"line\\" 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></div>
   </li>
 </ul>"
@@ -21,7 +59,26 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
 exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
 "<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
   <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <!--v-if-->
+    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-3af6a38b=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
+                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
     <div class=\\"line\\" 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></div>
   </li>
 </ul>"
@@ -30,7 +87,26 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
 exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
 "<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
   <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <!--v-if-->
+    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-3af6a38b=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
+                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
     <div class=\\"line\\" 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></div>
   </li>
 </ul>"
@@ -39,7 +115,26 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
 "<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
   <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <!--v-if-->
+    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-3af6a38b=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
+                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
     <div class=\\"line\\" 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></div>
   </li>
 </ul>"
@@ -48,7 +143,26 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
 "<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
   <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <!--v-if-->
+    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-3af6a38b=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
+                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-28f125ea=\\"\\">
+                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
     <div class=\\"line\\" 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></div>
   </li>
 </ul>"

assets/composables/search.ts

@@ -1,26 +1,24 @@
 import { ref, computed, Ref } from "vue";
 
-const searchFilter = ref<string>();
+const searchFilter = ref<string>("");
 const showSearch = ref(false);
 
 import type { LogEntry } from "@/types/LogEntry";
 
 export function useSearchFilter() {
+  const regex = computed(() => {
+    const isSmartCase = searchFilter.value === searchFilter.value.toLowerCase();
+    return isSmartCase ? new RegExp(searchFilter.value, "i") : new RegExp(searchFilter.value);
+  });
+
   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>"),
-            }));
+          return messages.value.filter((d) => d.message.match(regex.value));
         } catch (e) {
           if (e instanceof SyntaxError) {
-            console.info(`Ignoring SytaxError from search.`, e);
+            console.info(`Ignoring SyntaxError from search.`, e);
             return messages.value;
           }
           throw e;
@@ -31,6 +29,13 @@ export function useSearchFilter() {
     });
   }
 
+  function markSearch(log: string) {
+    if (searchFilter && searchFilter.value) {
+      return log.replace(regex.value, `<mark>$&</mark>`);
+    }
+    return log;
+  }
+
   function resetSearch() {
     searchFilter.value = "";
     showSearch.value = false;
@@ -44,6 +49,7 @@ export function useSearchFilter() {
     filteredMessages,
     searchFilter,
     showSearch,
+    markSearch,
     resetSearch,
     isSearching,
   };

assets/composables/settings.ts

@@ -12,6 +12,7 @@ export const DEFAULT_SETTINGS: {
   showAllContainers: boolean;
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
+  softWrap: boolean;
 } = {
   search: true,
   size: "medium",
@@ -21,9 +22,11 @@ export const DEFAULT_SETTINGS: {
   showAllContainers: false,
   lightTheme: "auto",
   hourStyle: "auto",
+  softWrap: true,
 };
 
 export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+settings.value = {...DEFAULT_SETTINGS, ...settings.value};
 
 export const search = computed({
   get: () => settings.value.search,
@@ -63,3 +66,8 @@ export const hourStyle = computed({
   get: () => settings.value.hourStyle,
   set: (value) => (settings.value.hourStyle = value),
 });
+
+export const softWrap = computed({
+  get: () => settings.value.softWrap,
+  set: (value) => (settings.value.softWrap = value),
+});

assets/pages/Container.vue

@@ -1,8 +1,6 @@
 <template>
-  <div>
-    <search></search>
-    <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
-  </div>
+  <search></search>
+  <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
 </template>
 
 <script lang="ts" setup>

assets/pages/Index.vue

@@ -14,7 +14,7 @@
         </div>
       </div>
     </section>
-    <section class="level section is-mobile">
+    <section class="level section">
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
@@ -27,6 +27,18 @@
           <p class="heading">Running</p>
         </div>
       </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title" data-ci-skip>{{ totalCpu }}%</p>
+          <p class="heading">Total CPU Usage</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
+          <p class="heading">Total Mem Usage</p>
+        </div>
+      </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ version }}</p>
@@ -81,6 +93,7 @@ import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
 import { useContainerStore } from "@/stores/container";
+import { formatBytes } from "@/utils";
 import fuzzysort from "fuzzysort";
 import SearchIcon from "~icons/mdi-light/magnify";
 import PastTime from "../components/PastTime.vue";
@@ -110,6 +123,8 @@ const results = computed(() => {
 
 const mostRecentContainers = computed(() => [...containers.value].sort((a, b) => b.created - a.created));
 const runningContainers = computed(() => mostRecentContainers.value.filter((c) => c.state === "running"));
+const totalCpu = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0));
+const totalMem = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0));
 
 function onEnter() {
   if (results.value.length == 1) {

assets/pages/Settings.vue

@@ -21,6 +21,18 @@
       <div class="has-underline">
         <h2 class="title is-4">Display</h2>
       </div>
+
+      <div class="item">
+        <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
+      </div>
+      <div class="item">
+        <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="softWrap"> Soft wrap lines</o-switch>
+      </div>
+
       <div class="item">
         <div class="columns is-vcentered">
           <div class="column is-narrow">
@@ -45,15 +57,7 @@
             By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
           </div>
         </div>
-
-        <div class="item">
-          <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
-        </div>
-        <div class="item">
-          <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
-        </div>
       </div>
-
       <div class="item">
         <div class="columns is-vcentered">
           <div class="column is-narrow">
@@ -142,6 +146,7 @@ import {
   hourStyle,
   showAllContainers,
   size,
+  softWrap,
 } from "@/composables/settings";
 
 setTitle("Settings");

assets/stores/container.ts

@@ -40,13 +40,23 @@ export const useContainerStore = defineStore("container", () => {
     },
     false
   );
-  // es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
+  es.addEventListener(
+    "container-die",
+    (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
+      const container = allContainersById.value[event.actorId];
+      if (container) {
+        container.state = "dead";
+      }
+    },
+    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,

assets/types/Container.d.ts

@@ -3,8 +3,8 @@ export interface Container {
   readonly created: number;
   readonly image: string;
   readonly name: string;
-  readonly state: "created" | "running" | "exited" | "dead" | "paused" | "restarting";
   readonly status: string;
+  state: "created" | "running" | "exited" | "dead" | "paused" | "restarting";
   stat?: ContainerStat;
 }
 

assets/types/LogEntry.d.ts

@@ -3,4 +3,5 @@ export interface LogEntry {
   message: string;
   key: string;
   event?: string;
+  selected?: boolean;
 }

assets/utils/index.ts

@@ -0,0 +1,8 @@
+export 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];
+}

e2e/Dockerfile

@@ -1,6 +1,6 @@
-FROM cypress/included:9.0.0
+FROM cypress/included:9.5.4
 
-RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+RUN apt install curl && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
 
 WORKDIR /e2e
 
@@ -9,4 +9,3 @@ RUN pnpm fetch
 
 COPY package.json ./
 RUN pnpm install -r --offline
-

e2e/cypress.json

@@ -1,3 +1,4 @@
 {
-  "fixturesFolder": false
+  "fixturesFolder": false,
+  "projectId": "8cua4m"
 }

e2e/cypress/integration/dozze_dark.spec.js

@@ -6,7 +6,7 @@ context("Dozzle default mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () =>
   });
 
   it("home screen", () => {
-    cy.get("li.running", { timeout: 10000 }).removeDates().matchImageSnapshot();
+    cy.get("li.running", { timeout: 10000 }).removeDates().replaceSkippedElements().matchImageSnapshot();
   });
 
   it("correct title", () => {

e2e/cypress/support/commands.js

@@ -31,3 +31,7 @@ addMatchImageSnapshotCommand();
 Cypress.Commands.add("removeDates", () => {
   cy.window().then((win) => win.document.querySelectorAll("time").forEach((el) => el.remove()));
 });
+
+Cypress.Commands.add("replaceSkippedElements", () => {
+  cy.window().then((win) => win.document.querySelectorAll("[data-ci-skip]").forEach((el) => el.remove()));
+});

e2e/docker-compose.yml

@@ -33,6 +33,13 @@ services:
     environment:
       - CYPRESS_DOZZLE_DEFAULT=http://dozzle:8080/
       - CYPRESS_CUSTOM_DEFAULT=http://custom_base:8080/foobarbase
+      - CYPRESS_RECORD_KEY=155c3cf8-b2dd-4f5e-9fb3-7635f5b79d4d
+      - COMMIT_INFO_BRANCH=${GITHUB_REF_NAME}
+      - COMMIT_INFO_AUTHOR=${GITHUB_ACTOR}
+      - COMMIT_INFO_SHA=${GITHUB_SHA}
+      - COMMIT_INFO_MESSAGE=${GIT_LOG_MESSAGE}
+      - COMMIT_INFO_REMOTE=https://github.com/amir20/dozzle
+    command: cypress run --record
     depends_on:
       - dozzle
       - custom_base

e2e/package.json

@@ -4,7 +4,7 @@
   "scripts": {},
   "license": "ISC",
   "dependencies": {
-    "cypress": "^9.0.0",
+    "cypress": "^9.5.4",
     "cypress-image-snapshot": "^4.0.1"
   }
 }

e2e/pnpm-lock.yaml

@@ -1,17 +1,24 @@
 lockfileVersion: 5.3
 
 specifiers:
-  cypress: ^9.0.0
+  cypress: ^9.5.4
   cypress-image-snapshot: ^4.0.1
 
 dependencies:
-  cypress: 9.0.0
-  cypress-image-snapshot: 4.0.1_cypress@9.0.0
+  cypress: 9.5.4
+  cypress-image-snapshot: 4.0.1_cypress@9.5.4
 
 packages:
 
-  /@cypress/request/2.88.7:
-    resolution: {integrity: sha512-FTULIP2rnDJvZDT9t6B4nSfYR40ue19tVmv3wUcY05R9/FPCoMl1nAPJkzWzBCo7ltVn5ThQTbxiMoGBN7k0ig==}
+  /@colors/colors/1.5.0:
+    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
+    engines: {node: '>=0.1.90'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@cypress/request/2.88.10:
+    resolution: {integrity: sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==}
     engines: {node: '>= 6'}
     dependencies:
       aws-sign2: 0.7.0
@@ -21,14 +28,13 @@ packages:
       extend: 3.0.2
       forever-agent: 0.6.1
       form-data: 2.3.3
-      har-validator: 5.1.5
-      http-signature: 1.2.0
+      http-signature: 1.3.6
       is-typedarray: 1.0.0
       isstream: 0.1.2
       json-stringify-safe: 5.0.1
-      mime-types: 2.1.34
+      mime-types: 2.1.35
       performance-now: 2.1.0
-      qs: 6.5.2
+      qs: 6.5.3
       safe-buffer: 5.2.1
       tough-cookie: 2.5.0
       tunnel-agent: 0.6.0
@@ -42,23 +48,23 @@ packages:
       lodash.once: 4.1.1
     dev: false
 
-  /@types/node/14.17.33:
-    resolution: {integrity: sha512-noEeJ06zbn3lOh4gqe2v7NMGS33jrulfNqYFDjjEbhpDEHR5VTxgYNQSBqBlJIsBJW3uEYDgD6kvMnrrhGzq8g==}
+  /@types/node/14.18.13:
+    resolution: {integrity: sha512-Z6/KzgyWOga3pJNS42A+zayjhPbf2zM3hegRQaOPnLOzEi86VV++6FLDWgR1LGrVCRufP/ph2daa3tEa5br1zA==}
     dev: false
 
-  /@types/sinonjs__fake-timers/6.0.4:
-    resolution: {integrity: sha512-IFQTJARgMUBF+xVd2b+hIgXWrZEjND3vJtRCvIelcFB5SIXfjV4bOHbHJ0eXKh+0COrBRc8MqteKAz/j88rE0A==}
+  /@types/sinonjs__fake-timers/8.1.1:
+    resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==}
     dev: false
 
   /@types/sizzle/2.3.3:
     resolution: {integrity: sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==}
     dev: false
 
-  /@types/yauzl/2.9.2:
-    resolution: {integrity: sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==}
+  /@types/yauzl/2.10.0:
+    resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 14.17.33
+      '@types/node': 14.18.13
     dev: false
     optional: true
 
@@ -70,15 +76,6 @@ packages:
       indent-string: 4.0.0
     dev: false
 
-  /ajv/6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: false
-
   /ansi-colors/4.1.1:
     resolution: {integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==}
     engines: {node: '>=6'}
@@ -147,8 +144,8 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /async/3.2.2:
-    resolution: {integrity: sha512-H0E+qZaDEfx/FY4t7iLRv1W2fFI6+pyCeTw1uN20AQPiwqwM6ojPxHxdLv4z8hi2DtnW9BOckSspLucW7pIE5g==}
+  /async/3.2.3:
+    resolution: {integrity: sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==}
     dev: false
 
   /asynckit/0.4.0:
@@ -201,6 +198,13 @@ packages:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
     dev: false
 
+  /buffer/5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /cachedir/2.3.0:
     resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==}
     engines: {node: '>=6'}
@@ -243,8 +247,8 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: false
 
-  /ci-info/3.2.0:
-    resolution: {integrity: sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==}
+  /ci-info/3.3.0:
+    resolution: {integrity: sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==}
     dev: false
 
   /clean-stack/2.2.0:
@@ -259,14 +263,13 @@ packages:
       restore-cursor: 3.1.0
     dev: false
 
-  /cli-table3/0.6.0:
-    resolution: {integrity: sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==}
+  /cli-table3/0.6.2:
+    resolution: {integrity: sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==}
     engines: {node: 10.* || >= 12.*}
     dependencies:
-      object-assign: 4.1.1
       string-width: 4.2.3
     optionalDependencies:
-      colors: 1.4.0
+      '@colors/colors': 1.5.0
     dev: false
 
   /cli-truncate/2.1.0:
@@ -277,11 +280,6 @@ packages:
       string-width: 4.2.3
     dev: false
 
-  /clone/2.1.2:
-    resolution: {integrity: sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=}
-    engines: {node: '>=0.8'}
-    dev: false
-
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -307,13 +305,6 @@ packages:
     resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
     dev: false
 
-  /colors/1.4.0:
-    resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==}
-    engines: {node: '>=0.1.90'}
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /combined-stream/1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -326,8 +317,8 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
-  /common-tags/1.8.1:
-    resolution: {integrity: sha512-uOZd85rJqrdEIE/JjhW5YAeatX8iqjjvVzIyfx7JL7G5r9Tep6YpYT9gEJWhWpVyDQEyzukWd6p2qULpJ8tmBw==}
+  /common-tags/1.8.2:
+    resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
     dev: false
 
@@ -359,14 +350,14 @@ packages:
       which: 2.0.2
     dev: false
 
-  /cypress-image-snapshot/4.0.1_cypress@9.0.0:
+  /cypress-image-snapshot/4.0.1_cypress@9.5.4:
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
     peerDependencies:
       cypress: ^4.5.0
     dependencies:
       chalk: 2.4.2
-      cypress: 9.0.0
+      cypress: 9.5.4
       fs-extra: 7.0.1
       glob: 7.2.0
       jest-image-snapshot: 4.2.0
@@ -376,29 +367,30 @@ packages:
       - jest
     dev: false
 
-  /cypress/9.0.0:
-    resolution: {integrity: sha512-/93SWBZTw7BjFZ+I9S8SqkFYZx7VhedDjTtRBmXO0VzTeDbmxgK/snMJm/VFjrqk/caWbI+XY4Qr80myDMQvYg==}
+  /cypress/9.5.4:
+    resolution: {integrity: sha512-6AyJAD8phe7IMvOL4oBsI9puRNOWxZjl8z1lgixJMcgJ85JJmyKeP6uqNA0dI1z14lmJ7Qklf2MOgP/xdAqJ/Q==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@cypress/request': 2.88.7
+      '@cypress/request': 2.88.10
       '@cypress/xvfb': 1.2.4
-      '@types/node': 14.17.33
-      '@types/sinonjs__fake-timers': 6.0.4
+      '@types/node': 14.18.13
+      '@types/sinonjs__fake-timers': 8.1.1
       '@types/sizzle': 2.3.3
       arch: 2.2.0
       blob-util: 2.0.2
       bluebird: 3.7.2
+      buffer: 5.7.1
       cachedir: 2.3.0
       chalk: 4.1.2
       check-more-types: 2.24.0
       cli-cursor: 3.1.0
-      cli-table3: 0.6.0
+      cli-table3: 0.6.2
       commander: 5.1.0
-      common-tags: 1.8.1
-      dayjs: 1.10.7
-      debug: 4.3.2_supports-color@8.1.1
+      common-tags: 1.8.2
+      dayjs: 1.11.1
+      debug: 4.3.4_supports-color@8.1.1
       enquirer: 2.3.6
       eventemitter2: 6.4.5
       execa: 4.1.0
@@ -410,18 +402,18 @@ packages:
       is-ci: 3.0.1
       is-installed-globally: 0.4.0
       lazy-ass: 1.6.0
-      listr2: 3.13.3_enquirer@2.3.6
+      listr2: 3.14.0_enquirer@2.3.6
       lodash: 4.17.21
       log-symbols: 4.1.0
-      minimist: 1.2.5
+      minimist: 1.2.6
       ospath: 1.2.2
       pretty-bytes: 5.6.0
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
+      semver: 7.3.7
       supports-color: 8.1.1
       tmp: 0.2.1
       untildify: 4.0.0
-      url: 0.11.0
       yauzl: 2.10.0
     dev: false
 
@@ -432,8 +424,8 @@ packages:
       assert-plus: 1.0.0
     dev: false
 
-  /dayjs/1.10.7:
-    resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
+  /dayjs/1.11.1:
+    resolution: {integrity: sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA==}
     dev: false
 
   /debug/3.2.7:
@@ -442,8 +434,8 @@ packages:
       ms: 2.1.3
     dev: false
 
-  /debug/4.3.2_supports-color@8.1.1:
-    resolution: {integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==}
+  /debug/4.3.4_supports-color@8.1.1:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -502,7 +494,7 @@ packages:
       is-stream: 1.1.0
       npm-run-path: 2.0.2
       p-finally: 1.0.0
-      signal-exit: 3.0.5
+      signal-exit: 3.0.7
       strip-eof: 1.0.0
     dev: false
 
@@ -517,7 +509,7 @@ packages:
       merge-stream: 2.0.0
       npm-run-path: 4.0.1
       onetime: 5.1.2
-      signal-exit: 3.0.5
+      signal-exit: 3.0.7
       strip-final-newline: 2.0.0
     dev: false
 
@@ -537,11 +529,11 @@ packages:
     engines: {node: '>= 10.17.0'}
     hasBin: true
     dependencies:
-      debug: 4.3.2_supports-color@8.1.1
+      debug: 4.3.4_supports-color@8.1.1
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
-      '@types/yauzl': 2.9.2
+      '@types/yauzl': 2.10.0
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -551,14 +543,6 @@ packages:
     engines: {'0': node >=0.6.0}
     dev: false
 
-  /fast-deep-equal/3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: false
-
-  /fast-json-stable-stringify/2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: false
-
   /fd-slicer/1.1.0:
     resolution: {integrity: sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=}
     dependencies:
@@ -589,7 +573,7 @@ packages:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
-      mime-types: 2.1.34
+      mime-types: 2.1.35
     dev: false
 
   /fs-extra/7.0.1:
@@ -606,7 +590,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       at-least-node: 1.0.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.10
       jsonfile: 6.1.0
       universalify: 2.0.0
     dev: false
@@ -637,7 +621,7 @@ packages:
   /getos/3.2.1:
     resolution: {integrity: sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==}
     dependencies:
-      async: 3.2.2
+      async: 3.2.3
     dev: false
 
   /getpass/0.1.7:
@@ -668,24 +652,14 @@ packages:
     resolution: {integrity: sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=}
     dev: false
 
+  /graceful-fs/4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+    dev: false
+
   /graceful-fs/4.2.8:
     resolution: {integrity: sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==}
     dev: false
 
-  /har-schema/2.0.0:
-    resolution: {integrity: sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=}
-    engines: {node: '>=4'}
-    dev: false
-
-  /har-validator/5.1.5:
-    resolution: {integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==}
-    engines: {node: '>=6'}
-    deprecated: this library is no longer supported
-    dependencies:
-      ajv: 6.12.6
-      har-schema: 2.0.0
-    dev: false
-
   /has-ansi/2.0.0:
     resolution: {integrity: sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=}
     engines: {node: '>=0.10.0'}
@@ -703,13 +677,13 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /http-signature/1.2.0:
-    resolution: {integrity: sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=}
-    engines: {node: '>=0.8', npm: '>=1.3.7'}
+  /http-signature/1.3.6:
+    resolution: {integrity: sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==}
+    engines: {node: '>=0.10'}
     dependencies:
       assert-plus: 1.0.0
-      jsprim: 1.4.1
-      sshpk: 1.16.1
+      jsprim: 2.0.2
+      sshpk: 1.17.0
     dev: false
 
   /human-signals/1.1.1:
@@ -717,6 +691,10 @@ packages:
     engines: {node: '>=8.12.0'}
     dev: false
 
+  /ieee754/1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
   /indent-string/4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
@@ -742,7 +720,7 @@ packages:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.2.0
+      ci-info: 3.3.0
     dev: false
 
   /is-fullwidth-code-point/3.0.0:
@@ -819,12 +797,8 @@ packages:
     resolution: {integrity: sha1-peZUwuWi3rXyAdls77yoDA7y9RM=}
     dev: false
 
-  /json-schema-traverse/0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: false
-
-  /json-schema/0.2.3:
-    resolution: {integrity: sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=}
+  /json-schema/0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
     dev: false
 
   /json-stringify-safe/5.0.1:
@@ -842,16 +816,16 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.10
     dev: false
 
-  /jsprim/1.4.1:
-    resolution: {integrity: sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=}
+  /jsprim/2.0.2:
+    resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==}
     engines: {'0': node >=0.6.0}
     dependencies:
       assert-plus: 1.0.0
       extsprintf: 1.3.0
-      json-schema: 0.2.3
+      json-schema: 0.4.0
       verror: 1.10.0
     dev: false
 
@@ -860,19 +834,22 @@ packages:
     engines: {node: '> 0.8'}
     dev: false
 
-  /listr2/3.13.3_enquirer@2.3.6:
-    resolution: {integrity: sha512-VqAgN+XVfyaEjSaFewGPcDs5/3hBbWVaX1VgWv2f52MF7US45JuARlArULctiB44IIcEk3JF7GtoFCLqEdeuPA==}
+  /listr2/3.14.0_enquirer@2.3.6:
+    resolution: {integrity: sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       enquirer: '>= 2.3.0 < 3'
+    peerDependenciesMeta:
+      enquirer:
+        optional: true
     dependencies:
       cli-truncate: 2.1.0
-      clone: 2.1.2
       colorette: 2.0.16
       enquirer: 2.3.6
       log-update: 4.0.0
       p-map: 4.0.0
-      rxjs: 7.4.0
+      rfdc: 1.3.0
+      rxjs: 7.5.5
       through: 2.3.8
       wrap-ansi: 7.0.0
     dev: false
@@ -911,20 +888,27 @@ packages:
       wrap-ansi: 6.2.0
     dev: false
 
+  /lru-cache/6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: false
+
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: false
 
-  /mime-db/1.51.0:
-    resolution: {integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==}
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
     dev: false
 
-  /mime-types/2.1.34:
-    resolution: {integrity: sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==}
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-db: 1.51.0
+      mime-db: 1.52.0
     dev: false
 
   /mimic-fn/2.1.0:
@@ -942,6 +926,10 @@ packages:
     resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
     dev: false
 
+  /minimist/1.2.6:
+    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+    dev: false
+
   /mkdirp/0.5.5:
     resolution: {integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==}
     hasBin: true
@@ -975,11 +963,6 @@ packages:
       path-key: 3.1.1
     dev: false
 
-  /object-assign/4.1.1:
-    resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /once/1.4.0:
     resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=}
     dependencies:
@@ -1113,26 +1096,16 @@ packages:
       once: 1.4.0
     dev: false
 
-  /punycode/1.3.2:
-    resolution: {integrity: sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=}
-    dev: false
-
   /punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
     dev: false
 
-  /qs/6.5.2:
-    resolution: {integrity: sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==}
+  /qs/6.5.3:
+    resolution: {integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==}
     engines: {node: '>=0.6'}
     dev: false
 
-  /querystring/0.2.0:
-    resolution: {integrity: sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=}
-    engines: {node: '>=0.4.x'}
-    deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
-    dev: false
-
   /request-progress/3.0.0:
     resolution: {integrity: sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=}
     dependencies:
@@ -1144,7 +1117,11 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       onetime: 5.1.2
-      signal-exit: 3.0.5
+      signal-exit: 3.0.7
+    dev: false
+
+  /rfdc/1.3.0:
+    resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
     dev: false
 
   /rimraf/2.7.1:
@@ -1161,10 +1138,10 @@ packages:
       glob: 7.2.0
     dev: false
 
-  /rxjs/7.4.0:
-    resolution: {integrity: sha512-7SQDi7xeTMCJpqViXh8gL/lebcwlp3d831F05+9B44A4B0WfsEwUQHR64gsH1kvJ+Ep/J9K2+n1hVl1CsGN23w==}
+  /rxjs/7.5.5:
+    resolution: {integrity: sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==}
     dependencies:
-      tslib: 2.1.0
+      tslib: 2.3.1
     dev: false
 
   /safe-buffer/5.2.1:
@@ -1180,6 +1157,14 @@ packages:
     hasBin: true
     dev: false
 
+  /semver/7.3.7:
+    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: false
+
   /shebang-command/1.2.0:
     resolution: {integrity: sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=}
     engines: {node: '>=0.10.0'}
@@ -1204,8 +1189,8 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /signal-exit/3.0.5:
-    resolution: {integrity: sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==}
+  /signal-exit/3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: false
 
   /slice-ansi/3.0.0:
@@ -1226,8 +1211,8 @@ packages:
       is-fullwidth-code-point: 3.0.0
     dev: false
 
-  /sshpk/1.16.1:
-    resolution: {integrity: sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==}
+  /sshpk/1.17.0:
+    resolution: {integrity: sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==}
     engines: {node: '>=0.10.0'}
     hasBin: true
     dependencies:
@@ -1336,8 +1321,8 @@ packages:
       punycode: 2.1.1
     dev: false
 
-  /tslib/2.1.0:
-    resolution: {integrity: sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==}
+  /tslib/2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: false
 
   /tunnel-agent/0.6.0:
@@ -1370,19 +1355,6 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /uri-js/4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.1.1
-    dev: false
-
-  /url/0.11.0:
-    resolution: {integrity: sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=}
-    dependencies:
-      punycode: 1.3.2
-      querystring: 0.2.0
-    dev: false
-
   /uuid/8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -1439,6 +1411,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: false
 
+  /yallist/4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: false
+
   /yauzl/2.10.0:
     resolution: {integrity: sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=}
     dependencies:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dozzle",
-  "version": "3.12.0",
+  "version": "3.12.2",
   "description": "Realtime log viewer for docker containers. ",
   "homepage": "https://github.com/amir20/dozzle#readme",
   "bugs": {
@@ -32,6 +32,7 @@
     "@vitejs/plugin-vue": "^2.3.1",
     "@vue/compiler-sfc": "^3.2.33",
     "@vueuse/core": "^8.2.6",
+    "@vueuse/router": "^8.2.6",
     "ansi-to-html": "^0.7.2",
     "bulma": "^0.9.3",
     "date-fns": "^2.28.0",

pnpm-lock.yaml

@@ -17,6 +17,7 @@ specifiers:
   '@vue/compiler-sfc': ^3.2.33
   '@vue/test-utils': ^2.0.0-rc.20
   '@vueuse/core': ^8.2.6
+  '@vueuse/router': ^8.2.6
   ansi-to-html: ^0.7.2
   bulma: ^0.9.3
   c8: ^7.11.0
@@ -57,6 +58,7 @@ dependencies:
   '@vitejs/plugin-vue': 2.3.1_vite@2.9.5+vue@3.2.33
   '@vue/compiler-sfc': 3.2.33
   '@vueuse/core': 8.2.6_vue@3.2.33
+  '@vueuse/router': 8.2.6_vue-router@4.0.14+vue@3.2.33
   ansi-to-html: 0.7.2
   bulma: 0.9.3
   date-fns: 2.28.0
@@ -580,6 +582,19 @@ packages:
     resolution: {integrity: sha512-OBKtafCt+4RcEJlYDCjp1vl65pBCL2g4TmipEtdZ8/qphKlW6nakJbkY7XRN5grPmjqU99/ahJGtyGk5NHS2hw==}
     dev: false
 
+  /@vueuse/router/8.2.6_vue-router@4.0.14+vue@3.2.33:
+    resolution: {integrity: sha512-7HKFR7VNfqXVB/N6sIP6hq7zn+XgWWOPdpWlgcTbbzyiDwzHu2dHjUx1LMn7o1GbQAyMFlJdiXqvuvqjS8Xb8A==}
+    peerDependencies:
+      vue-router: '>=4.0.0-rc.1'
+    dependencies:
+      '@vueuse/shared': 8.2.6_vue@3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+      vue-router: 4.0.14_vue@3.2.33
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared/8.2.6_vue@3.2.33:
     resolution: {integrity: sha512-J/W4CMfdL8TahELuSOgtfVO4eQXTjhigp7dVWIBsLUVFCeY9d49gvHUcQN3y5xYLZ6iNP57TjTQjMMT/zhklkw==}
     peerDependencies: