From ae07cd9c35d63b76fd7a244d8a22f1d053516149 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sun, 11 Jul 2021 14:20:31 +0800
Subject: [PATCH] prepare for docker

---
 .dockerignore             |  4 ++++
 README.md                 |  6 ++++--
 dockerfile                | 10 ++++++++++
 src/mixins/socket.js      |  9 ++++++++-
 src/pages/EditMonitor.vue |  9 +++++----
 src/pages/Settings.vue    |  1 +
 6 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 dockerfile

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 000000000..b97db4abb
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+/.idea
+/dist
+/node_modules
+/data/kuma.db
diff --git a/README.md b/README.md
index 34948fe59..71c226f60 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
 # Uptime Kuma
 
+It is a self-hosted monitoring tool like "Uptime Robot".
+
 # Features
 
 * Monitoring uptime for HTTP(s) / TCP / Ping.
 * Fancy, Reactive, Fast UI/UX.
-* Notifications via Webhook, Telegram, Discord and email (SMTP).
+* Notifications via Webhook, Telegram, Discord and email (SMTP). 
 * 20 seconds interval.
 
 # How to Use
@@ -17,7 +19,7 @@ One-click Deploy to DigitalOcean
 
 # Motivation
 
-* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one.
+* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one. One of the close one is statping. Unfortunately, it is not stable and unmaintained. 
 * Want to build a fancy UI.
 * Learn Vue 3 and vite.js.
 * Show the power of Bootstrap 5. 
diff --git a/dockerfile b/dockerfile
new file mode 100644
index 000000000..cf7dd5013
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,10 @@
+FROM node:14
+
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npm run build
+
+EXPOSE 3001
+VOLUME ["/app/data"]
+CMD ["npm", "run", "start-server"]
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 38d58136c..cd96672db 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -29,7 +29,14 @@ export default {
     },
 
     created() {
-        socket = io(":3001", {
+        let wsHost;
+        if (localStorage.dev === "dev") {
+            wsHost = ":3001"
+        } else {
+            wsHost = ""
+        }
+
+        socket = io(wsHost, {
             transports: ['websocket']
         });
 
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 1128ef5a8..f108b8ff2 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -27,10 +27,11 @@
                         <input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required>
                     </div>
 
-                <div class="mb-3" v-if="monitor.type === 'keyword' ">
-                    <label for="keyword" class="form-label">Keyword <span style="color: #AAA">(search keyword in plain html response)</span></label>
-                    <input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
-                </div>
+                    <div class="mb-3" v-if="monitor.type === 'keyword' ">
+                        <label for="keyword" class="form-label">Keyword</label>
+                        <input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
+                        <div class="form-text">Search keyword in plain html response and it is case-sensitive</div>
+                    </div>
 
                     <div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
                         <label for="hostname" class="form-label">Hostname</label>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 5c38de915..415baa489 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -53,6 +53,7 @@
             <div class="col-md-6">
                 <h2>Notifications</h2>
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
+                <p v-else>Please assign the notification to monitor(s) to get it works.</p>
 
                 <ul class="list-group mb-3" style="border-radius: 1rem;">
                     <li  class="list-group-item"  v-for="notification in $root.notificationList">