1.3.2

Makes aside scrollable
Removes tips
2026-08-07 11:54:44 +00:00 · 2018-11-26 16:10:13 -08:00 · 2018-11-26 16:09:59 -08:00 · 2018-11-26 16:06:17 -08:00 · 2018-11-26 14:53:38 -08:00 · 2018-11-26 14:52:20 -08:00
11 changed files with 234 additions and 84 deletions
@@ -35,7 +35,7 @@ will bind to `localhost` on port `1224`. You can then use a reverse proxy to con
 dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
 then you can override by using `--base /foobar`.

-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest --base /foobar
+    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar

 dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).

@@ -1,6 +1,6 @@
 <template lang="html">
  <div class="columns is-marginless">
-    <aside class="column menu is-2">
+    <aside class="column menu is-2-desktop is-3-tablet">
      <a
        role="button"
        class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
@@ -13,32 +13,44 @@
      <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 containers">
-          <router-link
-            :to="{ name: 'container', params: { id: item.Id } }"
-            active-class="is-active"
-            class="tooltip is-tooltip-right is-tooltip-info"
-            :data-tooltip="item.Names[0]"
-          >
-            <div class="hide-overflow">{{ item.Names[0] }}</div>
+          <router-link :to="{ name: 'container', params: { id: item.id, name: item.name } }" active-class="is-active">
+            <div class="hide-overflow">{{ item.name }}</div>
          </router-link>
        </li>
      </ul>
    </aside>
-    <div class="column is-offset-2"><router-view></router-view></div>
+    <div class="column is-offset-2-desktop is-offset-3-tablet"><router-view></router-view></div>
+    <vue-headful :title="title" />
  </div>
 </template>

 <script>
+let es;
 export default {
  name: "App",
  data() {
    return {
+      title: "Dozzle",
      containers: [],
      showNav: false
    };
  },
  async created() {
-    this.containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
+    await this.fetchContainerList();
+    this.title = `${this.containers.length} containers - Dozzle`;
+    es = new EventSource(`${BASE_PATH}/api/events/stream`);
+    es.addEventListener("containers-changed", e => setTimeout(this.fetchContainerList, 1000), false);
+  },
+  beforeDestroy() {
+    if (es) {
+      es.close();
+      es = null;
+    }
+  },
+  methods: {
+    async fetchContainerList() {
+      this.containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
+    }
  }
 };
 </script>
@@ -57,6 +69,12 @@ aside {
  z-index: 2;
  padding: 1em;

+  @media screen and (min-width: 769px) {
+    & {
+      height: 100vh;
+      overflow: auto;
+    }
+  }
  @media screen and (max-width: 768px) {
    & {
      position: sticky;
@@ -3,12 +3,11 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{{ .Hostname }} - Dozzle</title>
+    <title>Dozzle</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />
    <link href="styles.scss" rel="stylesheet" />
    <script>
      window["BASE_PATH"] = "{{ .Base }}";
-      window["SSL_ENABLED"] = "{{ .SSL }}".toLowerCase() === "true";
    </script>
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
@@ -1,10 +1,12 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import vueHeadful from "vue-headful";
 import App from "./App.vue";
 import Container from "./pages/Container.vue";
 import Index from "./pages/Index.vue";

 Vue.use(VueRouter);
+Vue.component("vue-headful", vueHeadful);

 const routes = [
  {
@@ -6,6 +6,7 @@
      </li>
    </ul>
    <scrollbar-notification :messages="messages"></scrollbar-notification>
+    <vue-headful :title="title" />
  </div>
 </template>

@@ -13,7 +14,7 @@
 import { formatRelative } from "date-fns";
 import ScrollbarNotification from "../components/ScrollbarNotification";

-let ws = null;
+let es = null;
 let nextId = 0;
 const parseMessage = data => {
  const date = new Date(data.substring(0, 30));
@@ -29,22 +30,25 @@ const parseMessage = data => {
 };

 export default {
-  props: ["id"],
+  props: ["id", "name"],
  name: "Container",
  components: {
    ScrollbarNotification
  },
  data() {
    return {
-      messages: []
+      messages: [],
+      title: ""
    };
  },
  created() {
    this.loadLogs(this.id);
  },
  beforeDestroy() {
-    ws.close();
-    ws = null;
+    if (es) {
+      es.close();
+      es = null;
+    }
  },
  watch: {
    id(newValue, oldValue) {
@@ -55,20 +59,14 @@ export default {
  },
  methods: {
    loadLogs(id) {
-      if (ws) {
-        ws.close();
-        ws = null;
+      if (es) {
+        es.close();
+        es = null;
        this.messages = [];
      }
-      const protocol = SSL_ENABLED ? "wss" : "ws";
-      ws = new WebSocket(`${protocol}://${window.location.host}${BASE_PATH}/api/logs?id=${this.id}`);
-      ws.onopen = e => console.log("Connection opened.");
-      ws.onclose = e => console.log("Connection closed.");
-      ws.onerror = e => console.error("Connection error: " + e.data);
-      ws.onmessage = e => {
-        const message = parseMessage(e.data);
-        this.messages.push(message);
-      };
+      es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${id}`);
+      es.onmessage = e => this.messages.push(parseMessage(e.data));
+      this.title = `${this.name} - Dozzle`;
    }
  }
 };
@@ -4,7 +4,6 @@ $menu-item-active-background-color: hsl(171, 100%, 41%);
 $menu-item-color: hsl(0, 6%, 87%);

@import "../node_modules/bulma/bulma.sass";
-@import "../node_modules/bulma-tooltip/src/sass";

 .is-dark {
    color: #ddd;
@@ -0,0 +1,69 @@
+package docker
+
+import (
+    "context"
+    "github.com/docker/docker/api/types"
+    "github.com/docker/docker/api/types/events"
+    "github.com/docker/docker/client"
+    "io"
+    "log"
+    "sort"
+    "strings"
+)
+
+type dockerClient struct {
+    cli *client.Client
+}
+
+type DockerClient interface {
+    ListContainers() ([]Container, error)
+    ContainerLogs(ctx context.Context, id string) (io.ReadCloser, error)
+    Events(ctx context.Context) (<-chan events.Message, <-chan error)
+}
+
+func NewDockerClient() DockerClient {
+    cli, err := client.NewClientWithOpts(client.FromEnv)
+    if err != nil {
+        log.Fatal(err)
+    }
+    return &dockerClient{cli}
+}
+
+func (d *dockerClient) ListContainers() ([]Container, error) {
+    list, err := d.cli.ContainerList(context.Background(), types.ContainerListOptions{})
+    if err != nil {
+        return nil, err
+    }
+
+    var containers []Container
+    for _, c := range list {
+
+        container := Container{
+            ID:      c.ID[:12],
+            Names:   c.Names,
+            Name:    strings.TrimPrefix(c.Names[0], "/"),
+            Image:   c.Image,
+            ImageID: c.ImageID,
+            Command: c.Command,
+            Created: c.Created,
+            State:   c.State,
+            Status:  c.Status,
+        }
+        containers = append(containers, container)
+    }
+
+    sort.Slice(containers, func(i, j int) bool {
+        return containers[i].Name < containers[j].Name
+    })
+
+    return containers, nil
+}
+
+func (d *dockerClient) ContainerLogs(ctx context.Context, id string) (io.ReadCloser, error) {
+    options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
+    return d.cli.ContainerLogs(ctx, id, options)
+}
+
+func (d *dockerClient) Events(ctx context.Context) (<-chan events.Message, <-chan error) {
+    return d.cli.Events(ctx, types.EventsOptions{})
+}
@@ -0,0 +1,13 @@
+package docker
+
+type Container struct {
+    ID      string   `json:"id"`
+    Names   []string `json:"names"`
+    Name    string   `json:"name"`
+    Image   string   `json:"image"`
+    ImageID string   `json:"imageId"`
+    Command string   `json:"command"`
+    Created int64    `json:"created"`
+    State   string   `json:"state"`
+    Status  string   `json:"status"`
+}
@@ -5,41 +5,30 @@ import (
    "encoding/binary"
    "encoding/json"
    "fmt"
+    "github.com/amir20/dozzle/docker"
+    "github.com/gobuffalo/packr"
+    "github.com/gorilla/mux"
+    flag "github.com/spf13/pflag"
    "html/template"
    "log"
    "net/http"
-    "os"
    "strings"
-
-    "github.com/docker/docker/api/types"
-    "github.com/docker/docker/client"
-    "github.com/gobuffalo/packr"
-    "github.com/gorilla/mux"
-    "github.com/gorilla/websocket"
-    flag "github.com/spf13/pflag"
 )

 var (
-    cli      *client.Client
-    addr     = ""
-    ssl      = false
-    base     = "/"
-    upgrader = websocket.Upgrader{}
-    version  = "dev"
-    commit   = "none"
-    date     = "unknown"
+    dockerClient docker.DockerClient
+    addr         = ""
+    base         = "/"
+    version      = "dev"
+    commit       = "none"
+    date         = "unknown"
 )

 func init() {
    flag.StringVar(&addr, "addr", ":8080", "http service address")
    flag.StringVar(&base, "base", "/", "base address of the application to mount")
-    flag.BoolVarP(&ssl, "ssl", "s", false, "Uses websockets over ssl if enabled")

-    var err error
-    cli, err = client.NewClientWithOpts(client.FromEnv)
-    if err != nil {
-        log.Fatal(err)
-    }
+    dockerClient = docker.NewDockerClient()
    flag.Parse()
 }

@@ -56,7 +45,8 @@ func main() {
    box := packr.NewBox("./static")

    s.HandleFunc("/api/containers.json", listContainers)
-    s.HandleFunc("/api/logs", logs)
+    s.HandleFunc("/api/logs/stream", streamLogs)
+    s.HandleFunc("/api/events/stream", streamEvents)
    s.HandleFunc("/version", versionHandler)
    s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
        fileServer := http.FileServer(box)
@@ -67,6 +57,7 @@ func main() {
        }
    })))

+    log.Printf("Accepting connections on %s", addr)
    log.Fatal(http.ListenAndServe(addr, r))
 }

@@ -77,11 +68,16 @@ func versionHandler(w http.ResponseWriter, r *http.Request) {
 }

 func listContainers(w http.ResponseWriter, r *http.Request) {
-    containers, err := cli.ContainerList(context.Background(), types.ContainerListOptions{})
+    containers, err := dockerClient.ListContainers()
    if err != nil {
-        log.Fatal(err)
+        http.Error(w, err.Error(), http.StatusInternalServerError)
+        return
+    }
+    err = json.NewEncoder(w).Encode(containers)
+    if err != nil {
+        http.Error(w, err.Error(), http.StatusInternalServerError)
+        return
    }
-    json.NewEncoder(w).Encode(containers)
 }

 func handleIndex(box packr.Box, w http.ResponseWriter) {
@@ -96,34 +92,42 @@ func handleIndex(box packr.Box, w http.ResponseWriter) {
    if base != "/" {
        path = base
    }
-    hostname, _ := os.Hostname()
-    data := struct {
-        Base     string
-        SSL      bool
-        Hostname string
-    }{path, ssl, hostname}
+
+    data := struct{ Base string }{path}
    err = tmpl.Execute(w, data)
    if err != nil {
        panic(err)
    }
 }

-func logs(w http.ResponseWriter, r *http.Request) {
+func streamLogs(w http.ResponseWriter, r *http.Request) {
    id := r.URL.Query().Get("id")
-    c, err := upgrader.Upgrade(w, r, nil)
-    if err != nil {
-        log.Fatal(err)
+    if id == "" {
+        http.Error(w, "id is required", http.StatusBadRequest)
        return
    }
-    defer c.Close()

-    options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
-    reader, err := cli.ContainerLogs(context.Background(), id, options)
-    defer reader.Close()
-    if err != nil {
-        log.Fatal(err)
+    f, ok := w.(http.Flusher)
+    if !ok {
+        http.Error(w, "Streaming unsupported!", http.StatusInternalServerError)
+        return
    }

+    ctx, cancel := context.WithCancel(context.Background())
+    defer cancel()
+    reader, err := dockerClient.ContainerLogs(ctx, id)
+    if err != nil {
+        log.Println(err)
+        http.Error(w, err.Error(), http.StatusInternalServerError)
+        return
+    }
+    defer reader.Close()
+
+    w.Header().Set("Content-Type", "text/event-stream")
+    w.Header().Set("Cache-Control", "no-cache")
+    w.Header().Set("Connection", "keep-alive")
+    w.Header().Set("Transfer-Encoding", "chunked")
+
    hdr := make([]byte, 8)
    content := make([]byte, 1024, 1024*1024)
    for {
@@ -137,10 +141,50 @@ func logs(w http.ResponseWriter, r *http.Request) {
            log.Println(err)
            break
        }
-        err = c.WriteMessage(websocket.TextMessage, content[:n])
+        _, err = fmt.Fprintf(w, "data: %s\n\n", content[:n])
        if err != nil {
            log.Println(err)
            break
        }
+        f.Flush()
+    }
+}
+
+func streamEvents(w http.ResponseWriter, r *http.Request) {
+    f, ok := w.(http.Flusher)
+    if !ok {
+        http.Error(w, "Streaming unsupported!", http.StatusInternalServerError)
+        return
+    }
+
+    w.Header().Set("Content-Type", "text/event-stream")
+    w.Header().Set("Cache-Control", "no-cache")
+    w.Header().Set("Connection", "keep-alive")
+    w.Header().Set("Transfer-Encoding", "chunked")
+
+    ctx, cancel := context.WithCancel(context.Background())
+    defer cancel()
+    messages, _ := dockerClient.Events(ctx)
+
+    for message := range messages {
+        switch message.Action {
+        case "connect":
+            fallthrough
+        case "disconnect":
+            fallthrough
+        case "create":
+            fallthrough
+        case "destroy":
+            _, err := fmt.Fprintf(w, "event: containers-changed\n")
+            _, err = fmt.Fprintf(w, "data: %s\n\n", message.Action)
+
+            if err != nil {
+                log.Println(err)
+                break
+            }
+            f.Flush()
+        default:
+            // Do nothing
+        }
    }
 }
@@ -1,6 +1,6 @@
 {
  "name": "dozzle",
-  "version": "1.2.5",
+  "version": "1.3.2",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1264,7 +1264,7 @@
    },
    "ansi-escapes": {
      "version": "3.1.0",
-      "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
      "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==",
      "dev": true
    },
@@ -1823,11 +1823,6 @@
      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.2.tgz",
      "integrity": "sha512-6JHEu8U/1xsyOst/El5ImLcZIiE2JFXgvrz8GGWbnDLwTNRPJzdAM0aoUM1Ns0avALcVb6KZz9NhzmU53dGDcQ=="
    },
-    "bulma-tooltip": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-2.0.2.tgz",
-      "integrity": "sha512-xsqWeWV7tsUn3uH04SqJeP7/CyC1RaDVIyVzr4/sIO3friIIOi7L6jc5g7qUwDxuBQl72yH/yRPuefpXoQ4hWg=="
-    },
    "cache-base": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
@@ -4001,7 +3996,7 @@
    },
    "globby": {
      "version": "6.1.0",
-      "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
      "dev": true,
      "requires": {
@@ -4130,6 +4125,11 @@
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
      "dev": true
    },
+    "headful": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/headful/-/headful-1.0.3.tgz",
+      "integrity": "sha512-vF9Vfddn1QWmziliht2mji6ayI78+hUuSC+Kt0GEqLw/51zWgi1KF7oLtIQf3nlkg8sQQOlznkkIaF4W9lIt9w=="
+    },
    "hex-color-regex": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -9126,6 +9126,14 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
      "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
    },
+    "vue-headful": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-headful/-/vue-headful-2.0.1.tgz",
+      "integrity": "sha512-h2G/jXCi2hAx6O3gwWN8uTj1eQlSKNHgvkCVZcokZneGczWCRghAUCFYrOvZQM+F+SyFB3YXqoI62rE0Sc8QsA==",
+      "requires": {
+        "headful": "^1.0.3"
+      }
+    },
    "vue-hot-reload-api": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz",
@@ -1,6 +1,6 @@
 {
 "name": "dozzle",
- "version": "1.2.5",
+ "version": "1.3.2",
 "description": "",
 "main": "index.js",
 "scripts": {
@@ -23,9 +23,9 @@
 "homepage": "https://github.com/amir20/dozzle#readme",
 "dependencies": {
  "bulma": "^0.7.2",
-  "bulma-tooltip": "^2.0.2",
  "date-fns": "^2.0.0-alpha.25",
  "vue": "^2.5.17",
+  "vue-headful": "^2.0.1",
  "vue-router": "^3.0.2"
 },
 "devDependencies": {
Author	SHA1	Message	Date
Amir Raminfar	3eec6cdd14	1.3.2	2018-11-26 16:10:13 -08:00
Amir Raminfar	3b9adf8260	Makes aside scrollable	2018-11-26 16:09:59 -08:00
Amir Raminfar	dde707a97a	Removes tips	2018-11-26 16:06:17 -08:00
Amir Raminfar	50ccf6311b	1.3.1	2018-11-26 14:53:38 -08:00
Amir Raminfar	705a339e49	Adds sorting and cleans up ids and names	2018-11-26 14:52:20 -08:00
Amir Raminfar	f81c240a47	1.3.0	2018-11-26 11:15:53 -08:00
Amir Raminfar	262095e5bb	Update README.md	2018-11-26 11:15:32 -08:00
Amir Raminfar	ba900c4374	Uses EventSource instead of websockets (#8 ) * Replaces websockets with event-stream * Adds base_path * Removes SSL * Adds event listener for events * Adds more logging * Adds event listener to home page	2018-11-26 11:05:16 -08:00
Amir Raminfar	9dc6b3790d	1.2.8	2018-11-25 16:15:59 -08:00
Amir Raminfar	b96785f2be	Adds title for pages	2018-11-25 16:14:55 -08:00
Amir Raminfar	dd6f4b1e31	1.2.7	2018-11-25 12:24:15 -08:00
Amir Raminfar	651291ecad	Removes hostname from title	2018-11-25 12:23:29 -08:00
Amir Raminfar	a5bcec68cb	1.2.6	2018-11-25 12:14:12 -08:00