Release 2.2.0

Bumps [caniuse-lite](https://github.com/ben-eb/caniuse-lite) from 1.0.30001116 to 1.0.30001117.
- [Release notes](https://github.com/ben-eb/caniuse-lite/releases)
- [Changelog](https://github.com/ben-eb/caniuse-lite/blob/master/CHANGELOG.md)
- [Commits](https://github.com/ben-eb/caniuse-lite/compare/v1.0.30001116...v1.0.30001117)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.github/workflows/deploy.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v1
         with:
-          go-version: 1.14.x
+          go-version: 1.15.x
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Run Go Tests with Coverage

.github/workflows/test.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v1
         with:
-          go-version: 1.14.x
+          go-version: 1.15.x
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Run Go Tests with Coverage

Dockerfile

@@ -18,7 +18,7 @@ COPY assets ./assets
 # Do the build
 RUN yarn build
 
-FROM golang:1.14-alpine AS builder
+FROM golang:1.15-alpine AS builder
 
 RUN apk add --no-cache git ca-certificates
 RUN mkdir /dozzle

assets/App.vue

@@ -13,12 +13,14 @@
             <router-view></router-view>
           </pane>
           <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
-            <scrollable-view>
-              <template v-slot:header>
-                <container-title :value="other.name" closable @close="removeActiveContainer(other)"></container-title>
-              </template>
-              <log-viewer-with-source :id="other.id"></log-viewer-with-source>
-            </scrollable-view>
+            <log-container
+              :id="other.id"
+              :title="other.name"
+              show-title
+              scrollable
+              closable
+              @close="removeActiveContainer(other)"
+            ></log-container>
           </pane>
         </splitpanes>
       </pane>
@@ -41,26 +43,22 @@
 import { mapActions, mapGetters, mapState } from "vuex";
 import { Splitpanes, Pane } from "splitpanes";
 
-import LogViewerWithSource from "./components/LogViewerWithSource";
-import ScrollableView from "./components/ScrollableView";
+import LogContainer from "./components/LogContainer";
 import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";
 import Search from "./components/Search";
-import ContainerTitle from "./components/ContainerTitle";
 import Icon from "./components/Icon";
 
 export default {
   name: "App",
   components: {
     Icon,
-    LogViewerWithSource,
     SideMenu,
+    LogContainer,
     MobileMenu,
-    ScrollableView,
     Splitpanes,
     Pane,
     Search,
-    ContainerTitle,
   },
   data() {
     return {

assets/components/InfiniteLoader.vue

@@ -1,5 +1,11 @@
 <template>
-  <div ref="observer" class="control" :class="{ 'is-loading': isLoading }"></div>
+  <div ref="observer" class="infinte-loader">
+    <div class="spinner" v-show="isLoading">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -36,4 +42,40 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.infinte-loader {
+  min-height: 1px;
+}
+.spinner {
+  margin: 10px auto 0;
+  width: 70px;
+  text-align: center;
+
+  & > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--primary-color);
+    border-radius: 100%;
+    display: inline-block;
+    animation: sk-bouncedelay 0.8s infinite ease-in-out both;
+  }
+  & .bounce1 {
+    animation-delay: -0.32s;
+  }
+
+  & .bounce2 {
+    animation-delay: -0.16s;
+  }
+}
+
+@keyframes sk-bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+</style>

assets/components/LogContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <scrollable-view :scrollable="scrollable">
+    <template v-slot:header v-if="showTitle">
+      <container-title :value="title" :closable="closable" @close="$emit('close')"></container-title>
+    </template>
+    <template v-slot="{ setLoading }">
+      <log-viewer-with-source :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>
+    </template>
+  </scrollable-view>
+</template>
+
+<script>
+import LogViewerWithSource from "./LogViewerWithSource";
+import ScrollableView from "./ScrollableView";
+import ContainerTitle from "./ContainerTitle";
+
+export default {
+  props: {
+    id: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    showTitle: {
+      type: Boolean,
+      default: false,
+    },
+    scrollable: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  name: "LogContainer",
+  components: {
+    LogViewerWithSource,
+    ScrollableView,
+    ContainerTitle,
+  },
+};
+</script>

assets/components/LogEventSource.vue

@@ -60,6 +60,7 @@ export default {
     async loadOlderLogs() {
       if (this.messages.length < 300) return;
 
+      this.$emit("loading-more", true);
       const to = this.messages[0].date;
       const last = this.messages[299].date;
       const delta = to - last;
@@ -74,6 +75,7 @@ export default {
           .map((line) => this.parseMessage(line));
         this.messages.unshift(...newMessages);
       }
+      this.$emit("loading-more", false);
     },
     parseMessage(data) {
       let i = data.indexOf(" ");

assets/components/LogViewerWithSource.vue

@@ -1,5 +1,5 @@
 <template>
-  <log-event-source :id="id" v-slot="eventSource">
+  <log-event-source :id="id" v-slot="eventSource" @loading-more="$emit('loading-more', $event)">
     <log-viewer :messages="eventSource.messages"></log-viewer>
   </log-event-source>
 </template>

assets/components/MobileMenu.vue

@@ -8,9 +8,11 @@
     >
       <span></span> <span></span> <span></span>
     </a>
-    <svg class="logo">
-      <use href="#logo"></use>
-    </svg>
+    <router-link :to="{ name: 'default' }">
+      <svg class="logo">
+        <use href="#logo"></use>
+      </svg>
+    </router-link>
     <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">

assets/components/ScrollProgress.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="scroll-progress">
-    <svg width="100" height="100" viewBox="0 0 100 100">
+    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
       <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
     </svg>
     <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
-      <span class="column is-narrow is-paddingless is-size-2">
-        {{ Math.ceil(scrollProgress * 100) }}
-      </span>
-      <span class="column is-narrow is-paddingless">
-        %
-      </span>
+      <template v-if="indeterminate">
+        <div class="column is-narrow is-paddingless is-size-2">
+          &#8734;
+        </div>
+      </template>
+      <template v-else>
+        <span class="column is-narrow is-paddingless is-size-2">
+          {{ Math.ceil(scrollProgress * 100) }}
+        </span>
+        <span class="column is-narrow is-paddingless">
+          %
+        </span>
+      </template>
     </div>
   </div>
 </template>
@@ -20,6 +27,16 @@ import throttle from "lodash.throttle";
 
 export default {
   name: "ScrollProgress",
+  props: {
+    indeterminate: {
+      default: false,
+      type: Boolean,
+    },
+    autoHide: {
+      default: true,
+      type: Boolean,
+    },
+  },
   data() {
     return {
       scrollProgress: 0,
@@ -39,6 +56,9 @@ export default {
       this.detachEvents();
       this.attachEvents();
     },
+    indeterminate() {
+      this.$nextTick(() => this.onScroll());
+    },
   },
   computed: {
     ...mapState(["activeContainers"]),
@@ -55,15 +75,17 @@ export default {
       const p = this.parentElement == document ? document.documentElement : this.parentElement;
       this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
       this.animation.cancel();
-      this.animation = this.$el.animate(
-        { opacity: [1, 0] },
-        {
-          duration: 500,
-          delay: 2000,
-          fill: "both",
-          easing: "ease-out",
-        }
-      );
+      if (this.autoHide) {
+        this.animation = this.$el.animate(
+          { opacity: [1, 0] },
+          {
+            duration: 500,
+            delay: 2000,
+            fill: "both",
+            easing: "ease-out",
+          }
+        );
+      }
     },
   },
 };
@@ -72,17 +94,57 @@ export default {
 .scroll-progress {
   display: inline-block;
   position: relative;
-  circle {
-    fill: var(--scheme-main-ter);
-    fill-opacity: 0.8;
-    transition: stroke-dashoffset 250ms ease-out;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    stroke: var(--primary-color);
-    stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
-    stroke-dasharray: 276.32px 276.32px;
-    stroke-width: 3;
-    will-change: stroke-dashoffset;
+
+  svg {
+    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
+    margin-top: 5px;
+    &.indeterminate {
+      animation: 2s linear infinite svg-animation;
+
+      circle {
+        animation: 1.4s ease-in-out infinite both circle-animation;
+      }
+    }
+    circle {
+      fill: var(--scheme-main-ter);
+      fill-opacity: 0.8;
+      transition: stroke-dashoffset 250ms ease-out;
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+      stroke: var(--primary-color);
+      stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+      stroke-dasharray: 276.32px 276.32px;
+      stroke-linecap: round;
+      stroke-width: 3;
+      will-change: stroke-dashoffset;
+    }
+  }
+}
+
+@keyframes svg-animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes circle-animation {
+  0%,
+  25% {
+    stroke-dashoffset: 275px;
+    transform: rotate(0);
+  }
+  50%,
+  75% {
+    stroke-dashoffset: 70px;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 275px;
+    transform: rotate(360deg);
   }
 }
 </style>

assets/components/ScrollableView.vue

@@ -5,9 +5,9 @@
     </header>
     <main ref="content" :data-scrolling="scrollable">
       <div class="is-scrollbar-progress is-hidden-mobile">
-        <scroll-progress v-show="paused"></scroll-progress>
+        <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
       </div>
-      <slot></slot>
+      <slot :setLoading="setLoading"></slot>
       <div ref="scrollObserver" class="is-scroll-observer"></div>
     </main>
 
@@ -41,6 +41,7 @@ export default {
     return {
       paused: false,
       hasMore: false,
+      loading: false,
     };
   },
   mounted() {
@@ -49,7 +50,12 @@ export default {
       if (!this.paused) {
         this.scrollToBottom("instant");
       } else {
-        this.hasMore = true;
+        const record = e[e.length - 1];
+        if (
+          record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]
+        ) {
+          this.hasMore = true;
+        }
       }
     });
     mutationObserver.observe(content, { childList: true, subtree: true });
@@ -68,6 +74,9 @@ export default {
       this.$refs.scrollObserver.scrollIntoView({ behavior });
       this.hasMore = false;
     },
+    setLoading(loading) {
+      this.loading = loading;
+    },
   },
 };
 </script>
@@ -111,6 +120,7 @@ section {
       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);
       border: none !important;
+      color: #222;
 
       &.has-more {
         background-color: var(--primary-color);

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

@@ -3,8 +3,25 @@
 exports[`<LogEventSource /> renders correctly 1`] = `
 <div>
   <div
-    class="control"
-  />
+    class="infinte-loader"
+  >
+    <div
+      class="spinner"
+      style="display: none;"
+    >
+      <div
+        class="bounce1"
+      />
+       
+      <div
+        class="bounce2"
+      />
+       
+      <div
+        class="bounce3"
+      />
+    </div>
+  </div>
    
   <ul
     class="events medium"

assets/pages/Container.vue

@@ -1,27 +1,24 @@
 <template>
-  <scrollable-view :scrollable="activeContainers.length > 0">
-    <template v-slot:header v-if="activeContainers.length > 0">
-      <container-title :value="allContainersById[id].name"></container-title>
-    </template>
-    <log-viewer-with-source :id="id"></log-viewer-with-source>
-  </scrollable-view>
+  <log-container
+    :id="id"
+    :title="title"
+    :show-title="activeContainers.length > 0"
+    :scrollable="activeContainers.length > 0"
+  >
+  </log-container>
 </template>
 
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
 
-import LogViewerWithSource from "../components/LogViewerWithSource";
-import ScrollableView from "../components/ScrollableView";
-import ContainerTitle from "../components/ContainerTitle";
+import LogContainer from "../components/LogContainer";
 import store from "../store";
 
 export default {
-  props: ["id", "name"],
+  props: ["id"],
   name: "Container",
   components: {
-    LogViewerWithSource,
-    ScrollableView,
-    ContainerTitle,
+    LogContainer,
   },
   data() {
     return {

assets/pages/Index.vue

@@ -30,7 +30,7 @@
       </div>
     </section>
 
-    <section class="columns is-centered">
+    <section class="columns is-centered section">
       <div class="column is-4">
         <div class="panel">
           <p class="panel-heading">
@@ -51,7 +51,7 @@
               </span>
             </p>
           </div>
-          <p class="panel-tabs">
+          <p class="panel-tabs" v-if="!search">
             <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">Running</a>
             <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">All</a>
           </p>

assets/pages/Settings.vue

@@ -52,30 +52,34 @@
       </div>
 
       <div class="item">
-        <h2 class="title is-6 is-marginless">Font size</h2>
-        Modify the font size when viewing logs.
-
-        <b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
-          <button class="button is-primary" type="button" slot="trigger">
-            <span class="is-capitalized">{{ size }}</span>
-            <span class="icon"><icon name="chevron-down"></icon></span>
-          </button>
-          <b-dropdown-item
-            :value="value"
-            aria-role="listitem"
-            v-for="value in ['small', 'medium', 'large']"
-            :key="value"
-          >
-            <div class="media">
-              <span class="icon keep-size">
-                <icon name="check" v-if="value == size"></icon>
-              </span>
-              <div class="media-content">
-                <h3 class="is-capitalized">{{ value }}</h3>
-              </div>
-            </div>
-          </b-dropdown-item>
-        </b-dropdown>
+        <div class="columns is-vcentered is-mobile is-variable is-2">
+          <div class="column is-narrow">
+            <b-dropdown v-model="size" aria-role="list">
+              <button class="button is-primary" type="button" slot="trigger">
+                <span class="is-capitalized">{{ size }}</span>
+                <span class="icon"><icon name="chevron-down"></icon></span>
+              </button>
+              <b-dropdown-item
+                :value="value"
+                aria-role="listitem"
+                v-for="value in ['small', 'medium', 'large']"
+                :key="value"
+              >
+                <div class="media">
+                  <span class="icon keep-size">
+                    <icon name="check" v-if="value == size"></icon>
+                  </span>
+                  <div class="media-content">
+                    <h3 class="is-capitalized">{{ value }}</h3>
+                  </div>
+                </div>
+              </b-dropdown-item>
+            </b-dropdown>
+          </div>
+          <div class="column">
+            Font size to use for logs
+          </div>
+        </div>
       </div>
     </section>
   </div>
@@ -103,7 +107,11 @@ export default {
   },
   async created() {
     const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
-    this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
+    if (this.currentVersion !== "dev") {
+      this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
+    } else {
+      this.hasUpdate = true;
+    }
     this.nextRelease = releases[0];
   },
   metaInfo() {

assets/store/config.js

@@ -2,5 +2,8 @@ const config = JSON.parse(document.querySelector("script#config__json").textCont
 if (config.version == "{{ .Version }}") {
   config.version = "dev";
   config.base = "";
+} else {
+  config.version = config.version.replace(/^v/, "");
 }
+
 export default config;

go.mod

@@ -39,7 +39,7 @@ require (
 	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.0
+	github.com/spf13/viper v1.7.1
 	github.com/stretchr/objx v0.2.0 // indirect
 	github.com/stretchr/testify v1.6.1
 	golang.org/x/net v0.0.0-20200226121028-0de0cce0169b // indirect

go.sum

@@ -305,6 +305,8 @@ github.com/spf13/viper v1.6.3 h1:pDDu1OyEDTKzpJwdq4TiuLyMsUgRa/BT5cn5O62NoHs=
 github.com/spf13/viper v1.6.3/go.mod h1:jUMtyi0/lB5yZH/FjyGAoH7IMNrIhlBf6pXZmbMDvzw=
 github.com/spf13/viper v1.7.0 h1:xVKxvI7ouOI5I+U9s2eeiUfMaWBVoXA3AWskkrqK0VM=
 github.com/spf13/viper v1.7.0/go.mod h1:8WkrPz2fc9jxqZNCJI/76HCieCp4Q8HaLFoCha5qpdg=
+github.com/spf13/viper v1.7.1 h1:pM5oEahlgWv/WnHXpgbKz7iLIxRf65tye2Ci+XFK5sk=
+github.com/spf13/viper v1.7.1/go.mod h1:8WkrPz2fc9jxqZNCJI/76HCieCp4Q8HaLFoCha5qpdg=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.2.0 h1:Hbg2NidpLE8veEBkEZTL3CvlkUIVzuU9jDplZO54c48=

package.json

@@ -1,6 +1,6 @@
 {
  "name": "dozzle",
- "version": "2.1.3",
+ "version": "2.2.0",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "prestart": "yarn clean",
@@ -28,7 +28,7 @@
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
   "ansi-to-html": "^0.6.14",
-  "buefy": "^0.8.20",
+  "buefy": "^0.9.1",
   "bulma": "^0.9.0",
   "date-fns": "^2.15.0",
   "dompurify": "^2.0.12",
@@ -38,42 +38,42 @@
   "semver": "^7.3.2",
   "splitpanes": "^2.2.1",
   "store": "^2.0.12",
-  "vue": "^2.6.11",
+  "vue": "^2.6.12",
   "vue-meta": "^2.4.0",
-  "vue-router": "^3.3.4",
+  "vue-router": "^3.4.3",
   "vuex": "^3.5.1"
  },
  "devDependencies": {
-  "@babel/core": "^7.10.5",
-  "@babel/plugin-transform-runtime": "^7.10.5",
-  "@vue/component-compiler-utils": "^3.1.2",
-  "@vue/test-utils": "^1.0.3",
+  "@babel/core": "^7.11.4",
+  "@babel/plugin-transform-runtime": "^7.11.0",
+  "@vue/component-compiler-utils": "^3.2.0",
+  "@vue/test-utils": "^1.0.4",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^26.1.0",
+  "babel-jest": "^26.3.0",
   "babel-preset-env": "^1.7.0",
-  "caniuse-lite": "^1.0.30001103",
-  "css-loader": "^3.6.0",
+  "caniuse-lite": "^1.0.30001117",
+  "css-loader": "^4.2.1",
   "eventsourcemock": "^2.0.0",
   "html-webpack-plugin": "^4.3.0",
   "husky": "^4.2.5",
-  "jest": "^26.1.0",
+  "jest": "^26.4.1",
   "jest-serializer-vue": "^2.0.2",
   "lint-staged": "^10.2.11",
-  "mini-css-extract-plugin": "^0.9.0",
+  "mini-css-extract-plugin": "^0.10.0",
   "npm-run-all": "^4.1.5",
   "postcss-cssnext": "^3.1.0",
   "postcss-import": "^12.0.1",
   "postcss-loader": "^3.0.0",
   "prettier": "^2.0.5",
-  "release-it": "^13.6.5",
+  "release-it": "^13.6.8",
   "sass": "^1.26.10",
-  "sass-loader": "^9.0.2",
+  "sass-loader": "^9.0.3",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.6",
   "vue-loader": "^15.9.3",
   "vue-style-loader": "^4.1.2",
-  "vue-template-compiler": "^2.6.11",
-  "webpack": "^4.43.0",
+  "vue-template-compiler": "^2.6.12",
+  "webpack": "^4.44.1",
   "webpack-cli": "^3.3.12",
   "webpack-dev-server": "^3.11.0",
   "webpack-pwa-manifest": "^4.2.0"