many update

package.json

@@ -3,6 +3,7 @@
     "version": "0.0.0",
     "scripts": {
         "dev": "vite",
+        "dev-server": "node server/server.js",
         "build": "vite build",
         "serve": "vite preview"
     },

server/model/monitor.js

@@ -1,6 +1,18 @@
 const dayjs = require("dayjs");
+const utc = require('dayjs/plugin/utc')
+var timezone = require('dayjs/plugin/timezone')
+dayjs.extend(utc)
+dayjs.extend(timezone)
+const axios = require("axios");
+const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
 
+
+/**
+ * status:
+ *      0 = DOWN
+ *      1 = UP
+ */
 class Monitor extends BeanModel {
 
     toJSON() {
@@ -16,9 +28,36 @@ class Monitor extends BeanModel {
     }
 
     start(io) {
-        const beat = () => {
+        const beat = async () => {
             console.log(`Monitor ${this.id}: Heartbeat`)
-            io.to(this.user_id).emit("heartbeat", dayjs().unix());
+
+            let bean = R.dispense("heartbeat")
+            bean.monitor_id = this.id;
+            bean.time = R.isoDateTime(dayjs.utc());
+            bean.status = 0;
+
+            try {
+                if (this.type === "http") {
+                    let startTime = dayjs().valueOf();
+                    let res = await axios.get(this.url)
+                    bean.msg = `${res.status} - ${res.statusText}`
+                    bean.ping = dayjs().valueOf() - startTime;
+                    bean.status = 1;
+                }
+
+            } catch (error) {
+                bean.msg = error.message;
+            }
+
+            io.to(this.user_id).emit("heartbeat", {
+                monitorID: this.id,
+                status: bean.status,
+                time: bean.time,
+                msg: bean.msg,
+                ping: bean.ping,
+            });
+
+            await R.store(bean)
         }
 
         beat();

server/server.js

@@ -4,7 +4,6 @@ const http = require('http');
 const server = http.createServer(app);
 const { Server } = require("socket.io");
 const io = new Server(server);
-const axios = require('axios');
 const dayjs = require("dayjs");
 const {R} = require("redbean-node");
 const passwordHash = require('password-hash');
@@ -12,7 +11,6 @@ const jwt = require('jsonwebtoken');
 const Monitor = require("./model/monitor");
 const {sleep} = require("./util");
 
-
 let stop = false;
 let interval = 6000;
 let totalClient = 0;
@@ -21,12 +19,11 @@ let loadFromDatabase = true;
 let monitorList = {};
 
 (async () => {
-
     R.setup('sqlite', {
-        filename: '../data/kuma.db'
+        filename: './data/kuma.db'
     });
     R.freeze(true)
-    await R.autoloadModels("./model");
+    await R.autoloadModels("./server/model");
 
     await initDatabase();
 
@@ -118,15 +115,54 @@ let monitorList = {};
                 bean.user_id = socket.userID
                 await R.store(bean)
 
+                await startMonitor(socket.userID, bean.id);
+                await sendMonitorList(socket);
+
                 callback({
                     ok: true,
                     msg: "Added Successfully.",
                     monitorID: bean.id
                 });
 
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
+        socket.on("editMonitor", async (monitor, callback) => {
+            try {
+                checkLogin(socket)
+
+                let bean = await R.findOne("monitor", " id = ? ", [ monitor.id ])
+
+                if (bean.user_id !== socket.userID) {
+                    throw new Error("Permission denied.")
+                }
+
+                bean.name = monitor.name
+                bean.type = monitor.type
+                bean.url = monitor.url
+                bean.interval = monitor.interval
+
+                await R.store(bean)
+
+                if (bean.active) {
+                    await restartMonitor(socket.userID, bean.id)
+                }
+
                 await sendMonitorList(socket);
 
+                callback({
+                    ok: true,
+                    msg: "Saved.",
+                    monitorID: bean.id
+                });
+
             } catch (e) {
+                console.log(e)
                 callback({
                     ok: false,
                     msg: e.message
@@ -294,14 +330,14 @@ async function afterLogin(socket, user) {
 }
 
 async function getMonitorJSONList(userID) {
-    let result = [];
+    let result = {};
 
-    let monitorList = await R.find("monitor", " user_id = ? ORDER BY weight DESC ", [
+    let monitorList = await R.find("monitor", " user_id = ? ORDER BY active DESC, name ASC ", [
         userID
     ])
 
     for (let monitor of monitorList) {
-        result.push(monitor.toJSON())
+        result[monitor.id] = monitor.toJSON();
     }
 
     return result;
@@ -346,10 +382,18 @@ async function startMonitor(userID, monitorID) {
         monitorID
     ])
 
+    if (monitor.id in monitorList) {
+        monitorList[monitor.id].stop();
+    }
+
     monitorList[monitor.id] = monitor;
     monitor.start(io)
 }
 
+async function restartMonitor(userID, monitorID) {
+    return await startMonitor(userID, monitorID)
+}
+
 async function pauseMonitor(userID, monitorID) {
     await checkOwner(userID, monitorID)
 

src/assets/vars.scss

@@ -1,4 +1,5 @@
 $primary: #5CDD8B;
+$danger: #DC3545;
 $link-color: #111;
 $border-radius: 50rem;
 

src/components/HeartbeatBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="wrap" :style="wrapStyle" ref="wrap">
         <div class="hp-bar-big" :style="barStyle">
-            <div class="beat"  :style="beatStyle" v-for="(beat, index) in shortBeatList" :key="index">
+            <div class="beat" :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0) }" :style="beatStyle" v-for="(beat, index) in shortBeatList" :key="index">
             </div>
         </div>
     </div>
@@ -11,12 +11,15 @@
 
 
 export default {
+    props: {
+        size: {
+            type: String,
+            default: "big"
+        },
+        monitorId: Number
+    },
     data() {
         return {
-            i: 1,
-            beatList: [
-
-            ],
             beatWidth: 10,
             beatHeight: 30,
             hoverScale: 1.5,
@@ -25,26 +28,38 @@ export default {
             maxBeat: -1,
         }
     },
-    destroyed() {
+    unmounted() {
         window.removeEventListener("resize", this.resize);
     },
     mounted() {
+        if (this.size === "small") {
+            this.beatWidth = 5.6;
+            this.beatMargin = 2.4;
+            this.beatHeight = 16
+        }
+
         window.addEventListener("resize", this.resize);
         this.resize();
-
-        setInterval(() => {
-            this.beatList.push(this.i++)
-        }, 3000)
-
     },
     methods: {
         resize() {
-            this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
+            if (this.$refs.wrap) {
+                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
+            }
         }
     },
     computed: {
 
+        beatList() {
+            if (! (this.monitorId in this.$root.heartbeatList)) {
+                this.$root.heartbeatList[this.monitorId] = [];
+            }
+            return this.$root.heartbeatList[this.monitorId]
+        },
+
         shortBeatList() {
+            let placeholders = []
+
             let start = this.beatList.length - this.maxBeat;
 
             if (this.move) {
@@ -52,10 +67,16 @@ export default {
             }
 
             if (start < 0) {
+                // Add empty placeholder
+                for (let i = start; i < 0; i++) {
+                    placeholders.push(0)
+                }
                 start = 0;
             }
 
-            return this.beatList.slice(start)
+
+
+            return placeholders.concat(this.beatList.slice(start))
         },
 
         wrapStyle() {
@@ -104,7 +125,6 @@ export default {
     watch: {
         beatList: {
             handler(val, oldVal) {
-                console.log("add beat2")
                 this.move = true;
 
                 setTimeout(() => {
@@ -131,14 +151,17 @@ export default {
         display: inline-block;
         background-color: $primary;
         border-radius: 50rem;
-        transition: all ease-in-out 0.15s;
 
-        &.new-beat {
+        &.empty {
             background-color: aliceblue;
         }
 
+        &.down {
+            background-color: $danger;
+        }
 
-        &:hover {
+        &:not(.empty):hover {
+            transition: all ease-in-out 0.15s;
             opacity: 0.8;
             transform: scale(var(--hover-scale));
         }

src/layouts/EmptyLayout.vue

@@ -0,0 +1,13 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -3,6 +3,7 @@ import {createRouter, createWebHistory} from 'vue-router'
 
 import App from './App.vue'
 import Layout from './layouts/Layout.vue'
+import EmptyLayout from './layouts/EmptyLayout.vue'
 import Settings from "./pages/Settings.vue";
 import Dashboard from "./pages/Dashboard.vue";
 import DashboardHome from "./pages/DashboardHome.vue";
@@ -30,17 +31,23 @@ const routes = [
                         component: DashboardHome,
                         children: [
                             {
-                                path: ':id',
+                                path: '/dashboard/:id',
-                                component: Details,
+                                component: EmptyLayout,
+                                children: [
+                                    {
+                                        path: '',
+                                        component: Details,
+                                    },
+                                    {
+                                        path: '/edit/:id',
+                                        component: EditMonitor,
+                                    },
+                                ]
                             },
                             {
                                 path: '/add',
                                 component: EditMonitor,
                             },
-                            {
-                                path: '/edit/:id',
-                                component: EditMonitor,
-                            },
                         ]
                     },
                     {

src/mixins/socket.js

@@ -21,7 +21,10 @@ export default {
             ],
             importantHeartbeatList: [
 
-            ]
+            ],
+            heartbeatList: {
+
+            },
         }
     },
 
@@ -34,6 +37,16 @@ export default {
             this.monitorList = data;
         });
 
+        socket.on('heartbeat', (data) => {
+
+            if (! (data.monitorID in this.heartbeatList)) {
+                this.heartbeatList[data.monitorID] = [];
+            }
+
+            this.heartbeatList[data.monitorID].push(data)
+        });
+
+
         socket.on('disconnect', () => {
             this.socket.connected = false;
         });
@@ -53,9 +66,11 @@ export default {
     },
 
     methods: {
+
         getSocket() {
           return socket;
         },
+
         toastRes(res) {
             if (res.ok) {
                 toast.success(res.msg);
@@ -63,6 +78,7 @@ export default {
                 toast.error(res.msg);
             }
         },
+
         login(username, password, callback) {
             socket.emit("login", {
                 username,
@@ -81,18 +97,19 @@ export default {
                 callback(res)
             })
         },
+
         loginByToken(token) {
             socket.emit("loginByToken", token, (res) => {
                 this.allowLoginDialog = true;
 
                 if (! res.ok) {
                     this.logout()
-                    console.log(res.msg)
                 } else {
                     this.loggedIn = true;
                 }
             })
         },
+
         logout() {
             storage.removeItem("token");
             this.socket.token = null;
@@ -102,19 +119,59 @@ export default {
                 toast.success("Logout Successfully")
             })
         },
+
         add(monitor, callback) {
             socket.emit("add", monitor, callback)
         },
+
         deleteMonitor(monitorID, callback) {
             socket.emit("deleteMonitor", monitorID, callback)
         },
-        loadMonitor(monitorID) {
 
-        }
     },
 
     computed: {
+        lastHeartbeatList() {
+            let result = {}
 
+            for (let monitorID in this.heartbeatList) {
+                let index = this.heartbeatList[monitorID].length - 1;
+                result[monitorID] = this.heartbeatList[monitorID][index];
+            }
+
+            return result;
+        },
+
+        statusList() {
+            let result = {}
+
+            let unknown = {
+                text: "Unknown",
+                color: "secondary"
+            }
+
+            for (let monitorID in this.lastHeartbeatList) {
+                let lastHeartBeat = this.lastHeartbeatList[monitorID]
+
+                if (! lastHeartBeat) {
+                    result[monitorID] = unknown;
+                } else if (lastHeartBeat.status === 1) {
+                    result[monitorID] = {
+                        text: "Up",
+                        color: "primary"
+                    };
+                } else if (lastHeartBeat.status === 0) {
+                    result[monitorID] = {
+                        text: "Down",
+                        color: "danger"
+                    };
+                } else {
+                    result[monitorID] = unknown;
+                }
+            }
+
+            return result;
+        }
     }
 
 }

src/pages/Dashboard.vue

@@ -23,20 +23,7 @@
 
                             </div>
                         	<div class="col-6">
-                                <div class="hp-bar">
+                                <HeartbeatBar size="small" :monitor-id="item.id" />
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                    <div></div>
-                                </div>
                             </div>
                         </div>
 
@@ -54,8 +41,11 @@
 
 <script>
 
+import HeartbeatBar from "../components/HeartbeatBar.vue";
+
 export default {
     components: {
+        HeartbeatBar
     },
     data() {
         return {
@@ -78,6 +68,8 @@ export default {
 
 .list {
     margin-top: 25px;
+    height: auto;
+    min-height: calc(100vh - 200px);
 
     .item {
         display: block;
@@ -92,6 +84,8 @@ export default {
 
         .info {
             white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         &:hover {
@@ -118,6 +112,10 @@ export default {
         border-radius: 50rem;
         transition: all ease-in-out 0.15s;
 
+        &.empty {
+            background-color: aliceblue;
+        }
+
         &:hover {
             opacity: 0.8;
             transform: scale(1.5);

src/pages/DashboardHome.vue

@@ -61,15 +61,19 @@
 
             	<div class="col">
                     <h3>Up</h3>
-                    <span class="num">2</span>
+                    <span class="num">{{ stats.up }}</span>
                 </div>
             	<div class="col">
                     <h3>Down</h3>
-                    <span class="num text-danger">0</span>
+                    <span class="num text-danger">{{ stats.down }}</span>
+                </div>
+                <div class="col">
+                    <h3>Unknown</h3>
+                    <span class="num text-secondary">{{ stats.unknown }}</span>
                 </div>
                 <div class="col">
                     <h3>Pause</h3>
-                    <span class="num">0</span>
+                    <span class="num text-secondary">{{ stats.pause }}</span>
                 </div>
             </div>
         </div>
@@ -107,7 +111,37 @@
 <script>
 export default {
     computed: {
+        stats() {
+            let result = {
+                up: 0,
+                down: 0,
+                unknown: 0,
+                pause: 0,
+            };
 
+            for (let monitorID in this.$root.monitorList) {
+                let beat = this.$root.lastHeartbeatList[monitorID];
+                let monitor = this.$root.monitorList[monitorID]
+
+                if (monitor && ! monitor.active) {
+                    result.pause++;
+                } else if (beat) {
+                    if (beat.status === 1) {
+                        result.up++;
+                    } else if (beat.status === 0) {
+                        result.down++;
+                    } else {
+                        result.unknown++;
+                    }
+                } else {
+                    console.log(monitorID + " Unknown?")
+                    console.log(beat)
+                    result.unknown++;
+                }
+            }
+
+            return result;
+        },
     }
 }
 </script>

src/pages/Details.vue

@@ -1,6 +1,6 @@
 <template>
-    <h1>{{ monitor.name }}</h1>
+    <h1> {{ monitor.name }}</h1>
-    <h2>{{ monitor.url }}</h2>
+    <p class="url"><a :href="monitor.url" target="_blank" v-if="monitor.type === 'http'">{{ monitor.url }}</a></p>
 
     <div class="functions">
         <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
@@ -11,14 +11,15 @@
 
     <div class="shadow-box">
 
-        <HeartbeatBar />
+
 
         <div class="row">
             <div class="col-md-8">
-
+                <HeartbeatBar :monitor-id="monitor.id" />
+                <span class="word">Check every {{ monitor.interval }} seconds.</span>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 text-center">
-
+                <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span>
             </div>
         </div>
     </div>
@@ -53,15 +54,28 @@ export default {
     },
     computed: {
         monitor() {
-            let id = parseInt(this.$route.params.id)
+            let id = this.$route.params.id
+            return this.$root.monitorList[id];
+        },
+
+        lastHeartBeat() {
+            if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
+                return this.$root.lastHeartbeatList[this.monitor.id]
+            } else {
+                return { status: -1 }
+            }
+        },
+
+        status() {
+            if (this.$root.statusList[this.monitor.id]) {
+                return this.$root.statusList[this.monitor.id]
+            } else {
+                return {
 
-            for (let monitor of this.$root.monitorList) {
-                if (monitor.id === id) {
-                    return monitor;
                 }
             }
-            return {};
+        }
-        },
+
     },
     methods: {
         pauseDialog() {
@@ -97,9 +111,14 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
-h2 {
+.url {
     color: $primary;
     margin-bottom: 20px;
+    font-weight: bold;
+
+    a {
+        color: $primary;
+    }
 }
 
 .functions {
@@ -112,4 +131,9 @@ h2 {
     padding: 20px;
     margin-top: 25px;
 }
+
+.word {
+    color: #AAA;
+    font-size: 14px;
+}
 </style>

src/pages/EditMonitor.vue

@@ -29,7 +29,7 @@
 
                     <div class="mb-3">
                         <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
-                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="20">
+                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20">
                     </div>
 
                     <div>
@@ -59,24 +59,7 @@ export default {
 
     },
     mounted() {
-
+        this.init();
-        if (this.isAdd) {
-            this.monitor = {
-                type: "http",
-                name: "",
-                url: "https://",
-                interval: 60,
-            }
-        } else {
-            this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
-                if (res.ok) {
-                    this.monitor = res.monitor;
-                } else {
-                    toast.error(res.msg)
-                }
-            })
-        }
-
     },
     data() {
         return {
@@ -90,9 +73,33 @@ export default {
         },
         isAdd() {
             return this.$route.path === "/add";
+        },
+        isEdit() {
+            return this.$route.path.startsWith("/edit");
         }
     },
     methods: {
+        init() {
+            if (this.isAdd) {
+                console.log("??????")
+                this.monitor = {
+                    type: "http",
+                    name: "",
+                    url: "https://",
+                    interval: 60,
+                }
+            } else if (this.isEdit) {
+                this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
+                    if (res.ok) {
+                        this.monitor = res.monitor;
+                    } else {
+                        toast.error(res.msg)
+                    }
+                })
+            }
+
+        },
+
         submit() {
             this.processing = true;
 
@@ -109,10 +116,18 @@ export default {
 
                 })
             } else {
-
+                this.$root.getSocket().emit("editMonitor", this.monitor, (res) => {
+                    this.processing = false;
+                    this.$root.toastRes(res)
+                })
             }
         }
-    }
+    },
+    watch: {
+        '$route.fullPath' () {
+            this.init();
+        }
+    },
 }
 </script>