From 972cbb8b2e2ad005c575f3e90cc9de5f84e76aa6 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 13 Nov 2018 16:32:26 -0800
Subject: [PATCH] Adds more vuejs

---
 assets/pages/Container.vue |  37 ++++----
 assets/pages/Index.vue     |  45 +++++-----
 package-lock.json          | 175 +++++++++++++++++++------------------
 package.json               |   6 +-
 4 files changed, 136 insertions(+), 127 deletions(-)

diff --git a/assets/pages/Container.vue b/assets/pages/Container.vue
index 9e83c7e9..211037cc 100644
--- a/assets/pages/Container.vue
+++ b/assets/pages/Container.vue
@@ -1,16 +1,23 @@
 <template lang="html">
-  <ul ref="events" class="events"></ul>
+  <ul ref="events" class="events">
+    <li v-for="item in messages" class="event">
+      <span class="date">{{ item.dateRelative }}</span>
+      <span class="text">{{ item.message }}</span>
+    </li>
+  </ul>
 </template>
 
 <script>
 import { formatRelative } from "date-fns";
-let ws;
-
+let ws = null;
+let nextId = 0;
 const parseMessage = data => {
   const date = new Date(data.substring(0, 30));
   const dateRelative = formatRelative(date, new Date());
   const message = data.substring(30);
+  const id = nextId++;
   return {
+    id,
     date,
     dateRelative,
     message
@@ -20,30 +27,20 @@ const parseMessage = data => {
 export default {
   props: ["id"],
   name: "Container",
+  data() {
+    return {
+      messages: []
+    };
+  },
   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 message = parseMessage(e.data);
 
-      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());
+      this.$nextTick(() => this.messages.push(message));
     };
   },
   beforeDestroy() {
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
index 7b652088..0d08df37 100644
--- a/assets/pages/Index.vue
+++ b/assets/pages/Index.vue
@@ -1,26 +1,31 @@
 <template lang="html">
-<div class="container">
+  <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 is-6">
-                            <h2 class="is-2 hide-overflow">{{ item.Names[0] }}</h2>
-                            <span class="subtitle is-6 code hide-overflow">{{ item.Command}}</span>
-                        </div>
-                        <div class="column is-4">
-                            <span class="code hide-overflow">{{ item.Image }}</span>
-                        </div>
-                        <div class="column is-narrow">
-                            <span class="subtitle is-7">{{ item.Status}}</span>
-                        </div>
-                    </router-link>
-                </li>
-            </ul>
-        </section>
+      <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 is-6">
+                <h2 class="is-2 hide-overflow">{{ item.Names[0] }}</h2>
+                <span class="subtitle is-6 code hide-overflow">{{
+                  item.Command
+                }}</span>
+              </div>
+              <div class="column is-4">
+                <span class="code hide-overflow">{{ item.Image }}</span>
+              </div>
+              <div class="column is-narrow">
+                <span class="subtitle is-7">{{ item.Status }}</span>
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </section>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
diff --git a/package-lock.json b/package-lock.json
index 03090714..38b51fc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,21 +14,21 @@
       }
     },
     "@babel/core": {
-      "version": "7.1.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.1.5.tgz",
-      "integrity": "sha512-vOyH020C56tQvte++i+rX2yokZcRfbv/kKcw+/BCRw/cK6dvsr47aCzm8oC1XHwMSEWbqrZKzZRLzLnq6SFMsg==",
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.1.6.tgz",
+      "integrity": "sha512-Hz6PJT6e44iUNpAn8AoyAs6B3bl60g7MJQaI0rZEar6ECzh6+srYO1xlIdssio34mPaUtAb1y+XlkkSJzok3yw==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
-        "@babel/generator": "^7.1.5",
+        "@babel/generator": "^7.1.6",
         "@babel/helpers": "^7.1.5",
-        "@babel/parser": "^7.1.5",
+        "@babel/parser": "^7.1.6",
         "@babel/template": "^7.1.2",
-        "@babel/traverse": "^7.1.5",
-        "@babel/types": "^7.1.5",
+        "@babel/traverse": "^7.1.6",
+        "@babel/types": "^7.1.6",
         "convert-source-map": "^1.1.0",
-        "debug": "^3.1.0",
-        "json5": "^0.5.0",
+        "debug": "^4.1.0",
+        "json5": "^2.1.0",
         "lodash": "^4.17.10",
         "resolve": "^1.3.2",
         "semver": "^5.4.1",
@@ -36,12 +36,12 @@
       },
       "dependencies": {
         "@babel/generator": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.1.5.tgz",
-          "integrity": "sha512-IO31r62xfMI+wBJVmgx0JR9ZOHty8HkoYpQAjRWUGG9vykBTlGHdArZ8zoFtpUu2gs17K7qTl/TtPpiSi6t+MA==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.1.6.tgz",
+          "integrity": "sha512-brwPBtVvdYdGxtenbQgfCdDPmtkmUBZPjUoK5SXJEBuHaA5BCubh9ly65fzXz7R6o5rA76Rs22ES8Z+HCc0YIQ==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.1.5",
+            "@babel/types": "^7.1.6",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.10",
             "source-map": "^0.5.0",
@@ -49,32 +49,32 @@
           }
         },
         "@babel/parser": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.5.tgz",
-          "integrity": "sha512-WXKf5K5HT6X0kKiCOezJZFljsfxKV1FpU8Tf1A7ZpGvyd/Q4hlrJm2EwoH2onaUq3O4tLDp+4gk0hHPsMyxmOg==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.6.tgz",
+          "integrity": "sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ==",
           "dev": true
         },
         "@babel/traverse": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.5.tgz",
-          "integrity": "sha512-eU6XokWypl0MVJo+MTSPUtlfPePkrqsF26O+l1qFGlCKWwmiYAYy2Sy44Qw8m2u/LbPCsxYt90rghmqhYMGpPA==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.6.tgz",
+          "integrity": "sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@babel/generator": "^7.1.5",
+            "@babel/generator": "^7.1.6",
             "@babel/helper-function-name": "^7.1.0",
             "@babel/helper-split-export-declaration": "^7.0.0",
-            "@babel/parser": "^7.1.5",
-            "@babel/types": "^7.1.5",
-            "debug": "^3.1.0",
+            "@babel/parser": "^7.1.6",
+            "@babel/types": "^7.1.6",
+            "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.10"
           }
         },
         "@babel/types": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.5.tgz",
-          "integrity": "sha512-sJeqa/d9eM/bax8Ivg+fXF7FpN3E/ZmTrWbkk6r+g7biVYfALMnLin4dKijsaqEhpd2xvOGfQTkQkD31YCVV4A==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.6.tgz",
+          "integrity": "sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==",
           "dev": true,
           "requires": {
             "esutils": "^2.0.2",
@@ -83,24 +83,33 @@
           }
         },
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.0.tgz",
+          "integrity": "sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
         },
         "jsesc": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-          "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
           "dev": true
         },
         "json5": {
-          "version": "0.5.1",
-          "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz",
+          "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
         "ms": {
@@ -352,12 +361,12 @@
       },
       "dependencies": {
         "@babel/generator": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.1.5.tgz",
-          "integrity": "sha512-IO31r62xfMI+wBJVmgx0JR9ZOHty8HkoYpQAjRWUGG9vykBTlGHdArZ8zoFtpUu2gs17K7qTl/TtPpiSi6t+MA==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.1.6.tgz",
+          "integrity": "sha512-brwPBtVvdYdGxtenbQgfCdDPmtkmUBZPjUoK5SXJEBuHaA5BCubh9ly65fzXz7R6o5rA76Rs22ES8Z+HCc0YIQ==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.1.5",
+            "@babel/types": "^7.1.6",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.10",
             "source-map": "^0.5.0",
@@ -365,32 +374,32 @@
           }
         },
         "@babel/parser": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.5.tgz",
-          "integrity": "sha512-WXKf5K5HT6X0kKiCOezJZFljsfxKV1FpU8Tf1A7ZpGvyd/Q4hlrJm2EwoH2onaUq3O4tLDp+4gk0hHPsMyxmOg==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.6.tgz",
+          "integrity": "sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ==",
           "dev": true
         },
         "@babel/traverse": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.5.tgz",
-          "integrity": "sha512-eU6XokWypl0MVJo+MTSPUtlfPePkrqsF26O+l1qFGlCKWwmiYAYy2Sy44Qw8m2u/LbPCsxYt90rghmqhYMGpPA==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.6.tgz",
+          "integrity": "sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@babel/generator": "^7.1.5",
+            "@babel/generator": "^7.1.6",
             "@babel/helper-function-name": "^7.1.0",
             "@babel/helper-split-export-declaration": "^7.0.0",
-            "@babel/parser": "^7.1.5",
-            "@babel/types": "^7.1.5",
-            "debug": "^3.1.0",
+            "@babel/parser": "^7.1.6",
+            "@babel/types": "^7.1.6",
+            "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.10"
           }
         },
         "@babel/types": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.5.tgz",
-          "integrity": "sha512-sJeqa/d9eM/bax8Ivg+fXF7FpN3E/ZmTrWbkk6r+g7biVYfALMnLin4dKijsaqEhpd2xvOGfQTkQkD31YCVV4A==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.6.tgz",
+          "integrity": "sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==",
           "dev": true,
           "requires": {
             "esutils": "^2.0.2",
@@ -399,18 +408,18 @@
           }
         },
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.0.tgz",
+          "integrity": "sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
         },
         "jsesc": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-          "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
           "dev": true
         },
         "ms": {
@@ -3930,9 +3939,9 @@
       "dev": true
     },
     "globals": {
-      "version": "11.8.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.8.0.tgz",
-      "integrity": "sha512-io6LkyPVuzCHBSQV9fmOwxZkUk6nIaGmxheLDgmuFv89j0fm2aqDbIXKAGfzCMHqz3HLF2Zf8WSG6VqMh2qFmA==",
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.9.0.tgz",
+      "integrity": "sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg==",
       "dev": true
     },
     "globby": {
@@ -4584,13 +4593,13 @@
       "dev": true
     },
     "husky": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-1.1.3.tgz",
-      "integrity": "sha512-6uc48B/A2Mqi65yeg37d/TPcTb0bZ1GTkMYOM0nXLOPuPaTRhXCeee80/noOrbavWd12x72Tusja7GJ5rzvV6g==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-1.1.4.tgz",
+      "integrity": "sha512-cZjGpS7qsaBSo3fOMUuR7erQloX3l5XzL1v/RkIqU6zrQImDdU70z5Re9fGDp7+kbYlM2EtS4aYMlahBeiCUGw==",
       "dev": true,
       "requires": {
         "cosmiconfig": "^5.0.6",
-        "execa": "^0.9.0",
+        "execa": "^1.0.0",
         "find-up": "^3.0.0",
         "get-stdin": "^6.0.0",
         "is-ci": "^1.2.1",
@@ -4601,31 +4610,29 @@
         "slash": "^2.0.0"
       },
       "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
         "execa": {
-          "version": "0.9.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.9.0.tgz",
-          "integrity": "sha512-BbUMBiX4hqiHZUA5+JujIjNb6TyAlp2D5KLheMjMluwOuzcnylDL4AxZYLLn1n2AGB49eSWwyKvvEQoRpnAtmA==",
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
           "dev": true,
           "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^4.0.0",
             "is-stream": "^1.1.0",
             "npm-run-path": "^2.0.0",
             "p-finally": "^1.0.0",
             "signal-exit": "^3.0.0",
             "strip-eof": "^1.0.0"
           }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
         }
       }
     },
@@ -7650,9 +7657,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.1.tgz",
-      "integrity": "sha512-4rgV2hyc/5Pk0XHH4VjJWHRgVjgRbpMfLQjREAhHBtyW1UvTFkjJEsueGYNYYZd9mn97K+1qv0EBwm11zoaSgA==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.2.tgz",
+      "integrity": "sha512-YgPLFFA0CdKL4Eg2IHtUSjzj/BWgszDHiNQAe0VAIBse34148whfdzLagRL+QiKS+YfK5ftB6X4v/MBw8yCoug==",
       "dev": true
     },
     "pretty-format": {
diff --git a/package.json b/package.json
index c8e41bdb..84d1b0d9 100644
--- a/package.json
+++ b/package.json
@@ -24,15 +24,15 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.5",
+    "@babel/core": "^7.1.6",
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@vue/component-compiler-utils": "^2.3.0",
     "concurrently": "^4.0.1",
     "date-fns": "^2.0.0-alpha.25",
-    "husky": "^1.1.3",
+    "husky": "^1.1.4",
     "lint-staged": "^8.0.4",
     "parcel-bundler": "^1.10.3",
-    "prettier": "^1.15.1",
+    "prettier": "^1.15.2",
     "vue-hot-reload-api": "^2.3.1",
     "vue-template-compiler": "^2.5.17"
   },