Makes changes to show all containers and event streams (#448)

__snapshots__/dozzle.snapshot

@@ -66,7 +66,7 @@ event: containers-changed
 data: start
 
 /* snapshot: Test_handler_streamLogs_error_finding_container */
-HTTP/1.1 500 Internal Server Error
+HTTP/1.1 404 Not Found
 Connection: close
 Content-Type: text/plain; charset=utf-8
 X-Content-Type-Options: nosniff

assets/components/LogEventSource.spec.js

@@ -134,7 +134,7 @@ describe("<LogEventSource />", () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events medium">
-        <li><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
+        <li class=""><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
       </ul>
     `);
   });
@@ -149,7 +149,7 @@ describe("<LogEventSource />", () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events medium">
-        <li><span class="date">today at 10:55 AM</span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
+        <li class=""><span class="date">today at 10:55 AM</span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
       </ul>
     `);
   });
@@ -164,7 +164,7 @@ describe("<LogEventSource />", () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events medium">
-        <li><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+        <li class=""><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
       </ul>
     `);
   });
@@ -182,7 +182,7 @@ describe("<LogEventSource />", () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events medium">
-        <li><span class="date">today at 10:55 AM</span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+        <li class=""><span class="date">today at 10:55 AM</span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
       </ul>
     `);
   });

assets/components/LogEventSource.vue

@@ -35,19 +35,23 @@ export default {
         this.es = null;
       }
       this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}`);
-      const flushBuffer = debounce(
+
-        () => {
+      this.es.addEventListener("container-stopped", (e) => {
-          this.messages.push(...this.buffer);
+        this.es.close();
-          this.buffer = [];
+        this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
-        },
+        flushNow();
-        250,
+      });
-        { maxWait: 1000 }
+      this.es.addEventListener("error", (e) => console.log("EventSource failed: " + JSON.stringify(e)));
-      );
+
+      const flushBuffer = debounce(() => flushNow(), 250, { maxWait: 1000 });
+      const flushNow = () => {
+        this.messages.push(...this.buffer);
+        this.buffer = [];
+      };
       this.es.onmessage = (e) => {
         this.buffer.push(this.parseMessage(e.data));
         flushBuffer();
       };
-      this.es.onerror = (e) => console.log("EventSource failed." + e);
       this.$once("hook:beforeDestroy", () => this.es.close());
     },
     async loadOlderLogs() {

assets/components/LogViewer.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <ul class="events" :class="settings.size">
-    <li v-for="item in filtered" :key="item.key">
+    <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
       <span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
@@ -103,6 +103,10 @@ export default {
   white-space: pre-wrap;
 }
 
+li.event {
+  color: #f14668;
+}
+
 ::v-deep mark {
   border-radius: 2px;
   background-color: #ffdd57;

assets/components/MobileMenu.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   props: [],
@@ -37,13 +37,8 @@ export default {
       showNav: false,
     };
   },
-
   computed: {
-    ...mapState(["containers"]),
+    ...mapGetters(["activeContainersById", "visibleContainers"]),
-    ...mapGetters(["activeContainersById"]),
-  },
-  methods: {
-    ...mapActions({}),
   },
   watch: {
     $route(to, from) {

assets/components/SideMenu.vue

@@ -18,7 +18,7 @@
     </div>
     <p class="menu-label is-hidden-mobile">Containers</p>
     <ul class="menu-list is-hidden-mobile">
-      <li v-for="item in containers">
+      <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"
@@ -55,8 +55,8 @@ export default {
     return {};
   },
   computed: {
-    ...mapState(["containers", "activeContainers"]),
+    ...mapState(["activeContainers"]),
-    ...mapGetters(["activeContainersById"]),
+    ...mapGetters(["activeContainersById", "visibleContainers"]),
   },
   methods: {
     ...mapActions({
@@ -88,6 +88,10 @@ aside {
   }
 }
 
+li.exited a {
+  color: #777;
+}
+
 .will-append-container.icon {
   transition: transform 0.2s ease-out;
   &.is-active {

assets/pages/Settings.vue

@@ -37,6 +37,12 @@
         </b-switch>
       </div>
 
+      <div class="item">
+        <b-switch v-model="showAllContainers">
+          Show stopped containers
+        </b-switch>
+      </div>
+
       <div class="item">
         <h2 class="title is-6 is-marginless">Font size</h2>
         Modify the font size when viewing logs.
@@ -104,7 +110,7 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp"].reduce((map, name) => {
+    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers"].reduce((map, name) => {
       map[name] = {
         get() {
           return this.settings[name];

assets/store/index.js

@@ -59,18 +59,22 @@ const actions = {
   },
 };
 const getters = {
-  activeContainersById(state) {
+  activeContainersById({ activeContainers }) {
-    return state.activeContainers.reduce((map, obj) => {
+    return activeContainers.reduce((map, obj) => {
       map[obj.id] = obj;
       return map;
     }, {});
   },
-  allContainersById(state) {
+  allContainersById({ containers }) {
-    return state.containers.reduce((map, obj) => {
+    return containers.reduce((map, obj) => {
       map[obj.id] = obj;
       return map;
     }, {});
   },
+  visibleContainers({ containers, settings: { showAllContainers } }) {
+    const filter = showAllContainers ? () => true : (c) => c.state === "running";
+    return containers.filter(filter);
+  },
 };
 
 const es = new EventSource(`${config.base}/api/events/stream`);

assets/store/settings.js

@@ -5,4 +5,5 @@ export const DEFAULT_SETTINGS = {
   menuWidth: 15,
   smallerScrollbars: false,
   showTimestamp: true,
+  showAllContainers: false,
 };

docker/client.go

@@ -33,7 +33,7 @@ type dockerProxy interface {
 
 // Client is a proxy around the docker client
 type Client interface {
-	ListContainers(showAll bool) ([]Container, error)
+	ListContainers() ([]Container, error)
 	FindContainer(string) (Container, error)
 	ContainerLogs(context.Context, string, int) (<-chan string, <-chan error)
 	Events(context.Context) (<-chan events.Message, <-chan error)
@@ -65,7 +65,7 @@ func NewClientWithFilters(f map[string]string) Client {
 
 func (d *dockerClient) FindContainer(id string) (Container, error) {
 	var container Container
-	containers, err := d.ListContainers(true)
+	containers, err := d.ListContainers()
 	if err != nil {
 		return container, err
 	}
@@ -85,10 +85,10 @@ func (d *dockerClient) FindContainer(id string) (Container, error) {
 	return container, nil
 }
 
-func (d *dockerClient) ListContainers(showAll bool) ([]Container, error) {
+func (d *dockerClient) ListContainers() ([]Container, error) {
 	containerListOptions := types.ContainerListOptions{
 		Filters: d.filters,
-		All:     showAll,
+		All:     true,
 	}
 	list, err := d.cli.ContainerList(context.Background(), containerListOptions)
 	if err != nil {

docker/client_test.go

@@ -55,7 +55,7 @@ func Test_dockerClient_ListContainers_null(t *testing.T) {
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, nil)
 	client := &dockerClient{proxy, filters.NewArgs()}
 
-	list, err := client.ListContainers(true)
+	list, err := client.ListContainers()
 	assert.Empty(t, list, "list should be empty")
 	require.NoError(t, err, "error should not return an error.")
 
@@ -67,7 +67,7 @@ func Test_dockerClient_ListContainers_error(t *testing.T) {
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, errors.New("test"))
 	client := &dockerClient{proxy, filters.NewArgs()}
 
-	list, err := client.ListContainers(true)
+	list, err := client.ListContainers()
 	assert.Nil(t, list, "list should be nil")
 	require.Error(t, err, "test.")
 
@@ -90,7 +90,7 @@ func Test_dockerClient_ListContainers_happy(t *testing.T) {
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
 	client := &dockerClient{proxy, filters.NewArgs()}
 
-	list, err := client.ListContainers(true)
+	list, err := client.ListContainers()
 	require.NoError(t, err, "error should not return an error.")
 
 	assert.Equal(t, list, []Container{

main.go

@@ -27,15 +27,13 @@ var (
 )
 
 type handler struct {
-	client  docker.Client
+	client docker.Client
-	showAll bool
+	box    packr.Box
-	box     packr.Box
 }
 
 func init() {
 	pflag.String("addr", ":8080", "http service address")
 	pflag.String("base", "/", "base address of the application to mount")
-	pflag.Bool("showAll", false, "show all containers, even stopped")
 	pflag.String("level", "info", "logging level")
 	pflag.Int("tailSize", 300, "Tail size to use for initial container logs")
 	pflag.StringToStringVar(&filters, "filter", map[string]string{}, "Container filters to use for showing logs")
@@ -49,10 +47,9 @@ func init() {
 	base = viper.GetString("base")
 	level = viper.GetString("level")
 	tailSize = viper.GetInt("tailSize")
-	showAll = viper.GetBool("showAll")
 
-	// Until https://github.com/spf13/viper/issues/608 is fixed. We have to use this hacky way.
+	// Until https://github.com/spf13/viper/issues/911 is fixed. We have to use this hacky way.
-	// filters = viper.GetStringSlice("filter")
+	// filters = viper.GetStringMapString("filter")
 	if value, ok := os.LookupEnv("DOZZLE_FILTER"); ok {
 		log.Infof("Parsing %s", value)
 		urlValues, err := url.ParseQuery(strings.ReplaceAll(value, ",", "&"))
@@ -77,7 +74,7 @@ func init() {
 func main() {
 	log.Infof("Dozzle version %s", version)
 	dockerClient := docker.NewClientWithFilters(filters)
-	_, err := dockerClient.ListContainers(true)
+	_, err := dockerClient.ListContainers()
 
 	if err != nil {
 		log.Fatalf("Could not connect to Docker Engine: %v", err)
@@ -85,9 +82,8 @@ func main() {
 
 	box := packr.NewBox("./static")
 	r := createRoutes(base, &handler{
-		client:  dockerClient,
+		client: dockerClient,
-		showAll: showAll,
+		box:    box,
-		box:     box,
 	})
 	srv := &http.Server{Addr: addr, Handler: r}
 

main_test.go

@@ -32,7 +32,7 @@ func (m *MockedClient) FindContainer(id string) (docker.Container, error) {
 	return container, args.Error(1)
 }
 
-func (m *MockedClient) ListContainers(showAll bool) ([]docker.Container, error) {
+func (m *MockedClient) ListContainers() ([]docker.Container, error) {
 	args := m.Called()
 	containers, ok := args.Get(0).([]docker.Container)
 	if !ok {
@@ -246,7 +246,7 @@ func Test_createRoutes_index(t *testing.T) {
 	box := packr.NewBox("./virtual")
 	require.NoError(t, box.AddString("index.html", "index page"), "AddString should have no error.")
 
-	handler := createRoutes("/", &handler{mockedClient, true, box})
+	handler := createRoutes("/", &handler{mockedClient, box})
 	req, err := http.NewRequest("GET", "/", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -259,7 +259,7 @@ func Test_createRoutes_redirect(t *testing.T) {
 	mockedClient := new(MockedClient)
 	box := packr.NewBox("./virtual")
 
-	handler := createRoutes("/foobar", &handler{mockedClient, true, box})
+	handler := createRoutes("/foobar", &handler{mockedClient, box})
 	req, err := http.NewRequest("GET", "/foobar", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -273,7 +273,7 @@ func Test_createRoutes_foobar(t *testing.T) {
 	box := packr.NewBox("./virtual")
 	require.NoError(t, box.AddString("index.html", "foo page"), "AddString should have no error.")
 
-	handler := createRoutes("/foobar", &handler{mockedClient, true, box})
+	handler := createRoutes("/foobar", &handler{mockedClient, box})
 	req, err := http.NewRequest("GET", "/foobar/", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -287,7 +287,7 @@ func Test_createRoutes_foobar_file(t *testing.T) {
 	box := packr.NewBox("./virtual")
 	require.NoError(t, box.AddString("/test", "test page"), "AddString should have no error.")
 
-	handler := createRoutes("/foobar", &handler{mockedClient, true, box})
+	handler := createRoutes("/foobar", &handler{mockedClient, box})
 	req, err := http.NewRequest("GET", "/foobar/test", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -300,7 +300,7 @@ func Test_createRoutes_version(t *testing.T) {
 	mockedClient := new(MockedClient)
 	box := packr.NewBox("./virtual")
 
-	handler := createRoutes("/", &handler{mockedClient, true, box})
+	handler := createRoutes("/", &handler{mockedClient, box})
 	req, err := http.NewRequest("GET", "/version", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()

routes.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"html/template"
+	"io"
 	"net/http"
 	"runtime"
 	"time"
@@ -68,7 +69,7 @@ func (h *handler) index(w http.ResponseWriter, req *http.Request) {
 }
 
 func (h *handler) listContainers(w http.ResponseWriter, r *http.Request) {
-	containers, err := h.client.ListContainers(h.showAll)
+	containers, err := h.client.ListContainers()
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -109,7 +110,7 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 
 	container, e := h.client.FindContainer(id)
 	if e != nil {
-		http.Error(w, e.Error(), http.StatusInternalServerError)
+		http.Error(w, e.Error(), http.StatusNotFound)
 		return
 	}
 
@@ -135,8 +136,14 @@ Loop:
 			}
 			f.Flush()
 		case e := <-err:
-			log.Debugf("Error while reading from log stream: %v", e)
+			if e == io.EOF {
-			break Loop
+				log.Debugf("Container stopped: %v", container.ID)
+				fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
+				f.Flush()
+			} else {
+				log.Debugf("Error while reading from log stream: %v", e)
+				break Loop
+			}
 		}
 	}