Adds new javascript and makes it prettier

amir20 · Oct 31, 2018 · 07ffc18 · 07ffc18
1 parent 9773d39
commit 07ffc18
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 143 deletions.
diff --git a/assets/App.vue b/assets/App.vue
@@ -1,15 +1,15 @@
 <template lang="html">
-   <router-view></router-view>
+    <router-view></router-view>
 </template>
 
 <script>
-export default {
-  name: "App"
-};
+    export default {
+        name: "App"
+    };
 </script>
 
 <style lang="css">
-.section.is-fullwidth {
-  padding: 0 !important;
-}
+    .section.is-fullwidth {
+        padding: 0 !important;
+    }
 </style>
diff --git a/assets/index.html b/assets/index.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Dozzle!</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-  </head>
-  <body>
-  <section class="section is-fullwidth">
+</head>
+<body>
+<section class="section is-fullwidth">
     <div id="app"></div>
-  </section>
-  <script src="/main.js"></script>
-  </body>
+</section>
+<script src="/main.js"></script>
+</body>
 </html>
diff --git a/assets/main.js b/assets/main.js
@@ -1,27 +1,27 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-Vue.use(VueRouter);
-
 import App from "./App.vue";
 import Index from "./pages/Index.vue";
 import Container from "./pages/Container.vue";
 
+Vue.use(VueRouter);
+
 const routes = [
-  { path: "/", component: Index },
-  {
-    path: "/container/:id",
-    component: Container,
-    name: "container",
-    props: true
-  }
+    {path: "/", component: Index},
+    {
+        path: "/container/:id",
+        component: Container,
+        name: "container",
+        props: true
+    }
 ];
 
 const router = new VueRouter({
-  mode: "history",
-  routes
+    mode: "history",
+    routes
 });
 
 new Vue({
-  router,
-  render: h => h(App)
+    router,
+    render: h => h(App)
 }).$mount("#app");
diff --git a/assets/pages/Container.vue b/assets/pages/Container.vue
@@ -1,41 +1,70 @@
 <template lang="html">
-  <ul ref="events" class="events">
-
-  </ul>
+    <ul ref="events" class="events"></ul>
 </template>
 
 <script>
-let ws;
-export default {
-  props: ["id"],
-  name: "Container",
-  mounted() {
-    ws = new WebSocket(`ws://${window.location.host}/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 parent = this.$refs.events;
-      const item = document.createElement("li");
-      item.classList.add("event");
-      item.innerHTML = e.data;
-      parent.appendChild(item);
-      item.scrollIntoView();
+    import {  formatRelative } from 'date-fns'
+    let ws;
+
+    const parseMessage = (data) => {
+        const date = new Date(data.substring(0, 30));
+        const dateRelative = formatRelative(date, new Date());
+        const message = data.substring(30);
+        return {
+            date,
+            dateRelative,
+            message
+        }
+    };
+
+    export default {
+        props: ["id"],
+        name: "Container",
+        mounted() {
+            ws = new WebSocket(`ws://${window.location.host}/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 data = parseMessage(e.data);
+                const parent = this.$refs.events;
+                const item = document.createElement("li");
+                item.className = "event";
+
+                const date = document.createElement("span");
+                date.className = "date";
+                date.innerHTML = data.dateRelative;
+                item.appendChild(date);
+
+                const message = document.createElement("span");
+                message.className = "text";
+                message.innerHTML = data.message;
+                item.appendChild(message);
+
+                parent.appendChild(item);
+
+                this.$nextTick(() => item.scrollIntoView());
+            };
+        }
     };
-  }
-};
 </script>
 <style>
-.events {
-  color: #ddd;
-  background-color: #111;
-  padding: 10px;
-}
-.event {
-  font-family: monaco, monospace;
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 15px 0 30px;
-  word-wrap: break-word;  
-}
+    .events {
+        color: #ddd;
+        background-color: #111;
+        padding: 10px;
+    }
+
+    .event {
+        font-family: monaco, monospace;
+        font-size: 12px;
+        line-height: 16px;
+        padding: 0 15px 0 30px;
+        word-wrap: break-word;
+    }
+
+    .date {
+        background-color: #262626;
+        color: #258CCD;
+    }
 </style>
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
@@ -1,44 +1,56 @@
 <template lang="html">
-  <div class="container">
-    <div class="content">
-      <section class="section">
-        <ul class="is-marginless is-paddless">
-      <li v-for="item in containers" class="columns unstyled box">
-        <div class="column is-4">
-          <router-link :to="{name: 'container', params: {id: item.Id}}"><h2 class="is-2">{{ item.Names[0] }}</h2></router-link>
-          <span class="subtitle is-6">{{ item.Command}}</span>
-        </div>
-        <div class="column is-4 image-name">
-          <code>{{ item.Image }} {{ item.Image }}</code>
-        </div>
-        <div class="column is-4">
-          <span class="subtitle is-7">{{ item.Status}}</span>
+    <div class="container">
+        <div class="content">
+            <section class="section">
+                <ul class="is-marginless is-paddless">
+                    <li v-for="item in containers" class=" unstyled box">
+                        <router-link :to="{name: 'container', params: {id: item.Id}}" class="columns">
+                            <div class="column">
+
+                                <h2 class="is-2">{{ item.Names[0] }}</h2>
+                                <span class="subtitle is-6 code">{{ item.Command}}</span>
+
+
+                            </div>
+                            <div class="column is-4">
+                                <span class="code">{{ item.Image }}</span>
+                            </div>
+                            <div class="column is-narrow">
+                                <span class="subtitle is-7">{{ item.Status}}</span>
+                            </div>
+                        </router-link>
+                    </li>
+                </ul>
+            </section>
         </div>
-      </li>
-    </ul>
-      </section>
     </div>
-  </div>
 </template>
 
 <script>
-export default {
-  name: "Index",
-  data() {
-    return {
-      containers: []
+    export default {
+        name: "Index",
+        data() {
+            return {
+                containers: []
+            };
+        },
+        async created() {
+            this.containers = await (await fetch(`/api/containers.json`)).json();
+        }
     };
-  },
-  async created() {
-    this.containers = await (await fetch(`/api/containers.json`)).json();
-  }
-};
 </script>
 
 <style lang="css">
-.image-name {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+    .code {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: #f5f5f5;
+        color: #ff3860;
+        font-size: .875em;
+        font-weight: 400;
+        padding: .25em .5em .25em;
+        display: block;
+        border-radius: 2px;
+    }
 </style>
diff --git a/main.go b/main.go
@@ -66,7 +66,7 @@ func logs(w http.ResponseWriter, r *http.Request) {
 	}
 	defer c.Close()
 
-	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "40"}
+	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "500", Timestamps: true}
 	reader, err := cli.ContainerLogs(context.Background(), id, options)
 	defer reader.Close()
 	if err != nil {