From b83c59e308c1f97e5c3d305d5f7e96d0f7b6f2c4 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Mon, 18 Oct 2021 19:00:39 +0800
Subject: [PATCH 1/7] WIP: Add options for chart period

Fix: Fix callback, add toast on error

Fix: Improve styling

Fix: Restore default chart behavior

Fix: Replace 1h with 3h

draft only
---
 server/client.js             | 37 ++++++++++++++------
 server/server.js             | 19 ++++++++++
 src/components/PingChart.vue | 67 ++++++++++++++++++++++++++++++++----
 src/mixins/socket.js         |  4 +++
 4 files changed, 111 insertions(+), 16 deletions(-)

diff --git a/server/client.js b/server/client.js
index c7b3bc16..951ffd8a 100644
--- a/server/client.js
+++ b/server/client.js
@@ -31,19 +31,36 @@ async function sendNotificationList(socket) {
  * @param toUser  True = send to all browsers with the same user id, False = send to the current browser only
  * @param overwrite Overwrite client-side's heartbeat list
  */
-async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
+async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false, period = null) {
     const timeLogger = new TimeLogger();
 
-    let list = await R.getAll(`
-        SELECT * FROM heartbeat
-        WHERE monitor_id = ?
-        ORDER BY time DESC
-        LIMIT 100
-    `, [
-        monitorID,
-    ]);
+    let result;
 
-    let result = list.reverse();
+    if (period) {
+        let list = await R.getAll(`
+            SELECT * FROM heartbeat
+            WHERE monitor_id = ? AND
+            time > DATETIME('now', '-' || ? || ' hours')
+            ORDER BY time ASC
+        `, [
+            monitorID,
+            period,
+        ]);
+
+        result = list;
+
+    } else {
+        let list = await R.getAll(`
+            SELECT * FROM heartbeat
+            WHERE monitor_id = ?
+            ORDER BY time DESC
+            LIMIT 100
+        `, [
+            monitorID,
+        ]);
+
+        result = list.reverse();
+    }
 
     if (toUser) {
         io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
diff --git a/server/server.js b/server/server.js
index 3084cad2..4209b45c 100644
--- a/server/server.js
+++ b/server/server.js
@@ -644,6 +644,25 @@ exports.entryPage = "dashboard";
             }
         });
 
+        socket.on("getMonitorBeats", async (monitorID, period, callback) => {
+            try {
+                checkLogin(socket);
+
+                console.log(`Get Monitor Beats: ${monitorID} User ID: ${socket.userID}`);
+
+                await sendHeartbeatList(socket, monitorID, true, true, period);
+
+                callback({
+                    ok: true
+                });
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
         // Start or Resume the monitor
         socket.on("resumeMonitor", async (monitorID, callback) => {
             try {
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 0baa9881..4818bba2 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -1,5 +1,18 @@
 <template>
-    <LineChart :chart-data="chartData" :options="chartOptions" />
+    <div>
+        <div class="period-options">
+            {{ $t("show") }}: <select id="chart-period-select" v-model="chartPeriodHrs" class="form-select form-select-sm ms-1">
+                <option value="0">{{ $t("recent") }}</option>
+                <option value="3">3h</option>
+                <option value="6">6h</option>
+                <option value="24">24h</option>
+                <option value="168">1w</option>
+            </select>
+        </div>
+        <div class="chart-wrapper">
+            <LineChart :chart-data="chartData" :options="chartOptions" />
+        </div>
+    </div>
 </template>
 
 <script>
@@ -9,8 +22,11 @@ import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import "chartjs-adapter-dayjs";
 import { LineChart } from "vue-chart-3";
+import { useToast } from "vue-toastification";
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
+const toast = useToast();
 
 Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
 
@@ -25,7 +41,12 @@ export default {
     data() {
         return {
             // Configurable filtering on top of the returned data
-            chartPeriodHrs: 6,
+            chartPeriodHrs: 0,
+
+            // Just Draft:
+            // A heartbeatList for 3h, 6h, 24h, 1w
+            // Set it to null, switch back to realtime (last 100 beats)
+            heartbeatList: null
         };
     },
     computed: {
@@ -117,7 +138,7 @@ export default {
                         },
                         callbacks: {
                             label: (context) => {
-                                return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`
+                                return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
                             },
                         }
                     },
@@ -125,7 +146,7 @@ export default {
                         display: false,
                     },
                 },
-            }
+            };
         },
         chartData() {
             let pingData = [];  // Ping Data for Line Chart, y-axis contains ping time
@@ -133,7 +154,7 @@ export default {
             if (this.monitorId in this.$root.heartbeatList) {
                 this.$root.heartbeatList[this.monitorId]
                     .filter(
-                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
+                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
                     .map((beat) => {
                         const x = this.$root.datetime(beat.time);
                         pingData.push({
@@ -143,7 +164,7 @@ export default {
                         downData.push({
                             x,
                             y: beat.status === 0 ? 1 : 0,
-                        })
+                        });
                     });
             }
             return {
@@ -172,5 +193,39 @@ export default {
             };
         },
     },
+    watch: {
+        chartPeriodHrs: function (newPeriod) {
+            if (newPeriod == "0") {
+                newPeriod = null;
+            }
+            this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
+                if (!res.ok) {
+                    toast.error(res.msg);
+                }
+            });
+        }
+    },
 };
 </script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.form-select {
+    width: unset;
+    display: inline-flex;
+}
+
+.period-options {
+    padding: 0.3em 1.5em;
+    margin-bottom: -1.5em;
+    float: right;
+    position: relative;
+    z-index: 10;
+    font-size: 0.8em;
+}
+
+.chart-wrapper {
+    margin-bottom: 1.5em;
+}
+</style>
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index d7ac8bcb..67979449 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -328,6 +328,10 @@ export default {
         clearStatistics(callback) {
             socket.emit("clearStatistics", callback);
         },
+
+        getMonitorBeats(monitorID, period, callback) {
+            socket.emit("getMonitorBeats", monitorID, period, callback);
+        }
     },
 
     computed: {

From 2f7b60f5e50b6c2c370739e376580d74b172f39e Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 22 Oct 2021 18:38:41 +0800
Subject: [PATCH 2/7] Feat: Use separate storage for custom chart period

Fix: Fix import error
---
 server/client.js             | 37 ++++++---------------
 server/server.js             | 17 ++++++++--
 src/components/PingChart.vue | 64 +++++++++++++++++++++++-------------
 3 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/server/client.js b/server/client.js
index 951ffd8a..c7b3bc16 100644
--- a/server/client.js
+++ b/server/client.js
@@ -31,36 +31,19 @@ async function sendNotificationList(socket) {
  * @param toUser  True = send to all browsers with the same user id, False = send to the current browser only
  * @param overwrite Overwrite client-side's heartbeat list
  */
-async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false, period = null) {
+async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
     const timeLogger = new TimeLogger();
 
-    let result;
-
-    if (period) {
-        let list = await R.getAll(`
-            SELECT * FROM heartbeat
-            WHERE monitor_id = ? AND
-            time > DATETIME('now', '-' || ? || ' hours')
-            ORDER BY time ASC
-        `, [
-            monitorID,
-            period,
-        ]);
-
-        result = list;
+    let list = await R.getAll(`
+        SELECT * FROM heartbeat
+        WHERE monitor_id = ?
+        ORDER BY time DESC
+        LIMIT 100
+    `, [
+        monitorID,
+    ]);
 
-    } else {
-        let list = await R.getAll(`
-            SELECT * FROM heartbeat
-            WHERE monitor_id = ?
-            ORDER BY time DESC
-            LIMIT 100
-        `, [
-            monitorID,
-        ]);
-
-        result = list.reverse();
-    }
+    let result = list.reverse();
 
     if (toUser) {
         io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
diff --git a/server/server.js b/server/server.js
index 4209b45c..49e867da 100644
--- a/server/server.js
+++ b/server/server.js
@@ -650,10 +650,23 @@ exports.entryPage = "dashboard";
 
                 console.log(`Get Monitor Beats: ${monitorID} User ID: ${socket.userID}`);
 
-                await sendHeartbeatList(socket, monitorID, true, true, period);
+                if (period == null) {
+                    throw new Error("Invalid period.");
+                }
+
+                let list = await R.getAll(`
+                    SELECT * FROM heartbeat
+                    WHERE monitor_id = ? AND
+                    time > DATETIME('now', '-' || ? || ' hours')
+                    ORDER BY time ASC
+                `, [
+                    monitorID,
+                    period,
+                ]);
 
                 callback({
-                    ok: true
+                    ok: true,
+                    data: list,
                 });
             } catch (e) {
                 callback({
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 4818bba2..0c76721c 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -15,7 +15,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -23,6 +23,7 @@ import timezone from "dayjs/plugin/timezone";
 import "chartjs-adapter-dayjs";
 import { LineChart } from "vue-chart-3";
 import { useToast } from "vue-toastification";
+import { UP, DOWN, PENDING } from "../util.ts";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -151,22 +152,28 @@ export default {
         chartData() {
             let pingData = [];  // Ping Data for Line Chart, y-axis contains ping time
             let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
-            if (this.monitorId in this.$root.heartbeatList) {
-                this.$root.heartbeatList[this.monitorId]
-                    .filter(
-                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
-                    .map((beat) => {
-                        const x = this.$root.datetime(beat.time);
-                        pingData.push({
-                            x,
-                            y: beat.ping,
-                        });
-                        downData.push({
-                            x,
-                            y: beat.status === 0 ? 1 : 0,
-                        });
+
+            let heartbeatList = this.heartbeatList ||
+             (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
+             [];
+
+            heartbeatList
+                .filter(
+                    // Filtering as data gets appended
+                    // not the most efficient, but works for now
+                    (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
+                .map((beat) => {
+                    const x = this.$root.datetime(beat.time);
+                    pingData.push({
+                        x,
+                        y: beat.ping,
                     });
-            }
+                    downData.push({
+                        x,
+                        y: beat.status === DOWN ? 1 : 0,
+                    });
+                });
+
             return {
                 datasets: [
                     {
@@ -197,14 +204,27 @@ export default {
         chartPeriodHrs: function (newPeriod) {
             if (newPeriod == "0") {
                 newPeriod = null;
+                this.heartbeatList = null;
+            } else {
+                this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
+                    if (!res.ok) {
+                        toast.error(res.msg);
+                    } else {
+                        this.heartbeatList = res.data;
+                    }
+                });
             }
-            this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
-                if (!res.ok) {
-                    toast.error(res.msg);
-                }
-            });
         }
     },
+    created() {
+        // Setup Watcher on the root heartbeatList,
+        // And mirror latest change to this.heartbeatList
+        this.$watch(() => this.$root.heartbeatList[this.monitorId], (heartbeatList) => {
+            if (this.chartPeriodHrs != 0) {
+                this.heartbeatList.push(heartbeatList.at(-1));
+            }
+        }, { deep: true });
+    }
 };
 </script>
 
@@ -217,7 +237,7 @@ export default {
 }
 
 .period-options {
-    padding: 0.3em 1.5em;
+    padding: 0.3em 2.2em;
     margin-bottom: -1.5em;
     float: right;
     position: relative;

From 445674aacb0c58ca5eb96dc2c7c033a4d70c8670 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 22 Oct 2021 18:44:11 +0800
Subject: [PATCH 3/7] Chore: Improve code formatting & comments

---
 src/components/PingChart.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 0c76721c..cd5e239c 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -1,7 +1,12 @@
 <template>
     <div>
         <div class="period-options">
-            {{ $t("show") }}: <select id="chart-period-select" v-model="chartPeriodHrs" class="form-select form-select-sm ms-1">
+            {{ $t("show") }}:
+            <select
+                id="chart-period-select"
+                v-model="chartPeriodHrs"
+                class="form-select form-select-sm ms-1"
+            >
                 <option value="0">{{ $t("recent") }}</option>
                 <option value="3">3h</option>
                 <option value="6">6h</option>
@@ -44,9 +49,8 @@ export default {
             // Configurable filtering on top of the returned data
             chartPeriodHrs: 0,
 
-            // Just Draft:
             // A heartbeatList for 3h, 6h, 24h, 1w
-            // Set it to null, switch back to realtime (last 100 beats)
+            // Uses the $root.heartbeatList when value is null
             heartbeatList: null
         };
     },
@@ -161,7 +165,10 @@ export default {
                 .filter(
                     // Filtering as data gets appended
                     // not the most efficient, but works for now
-                    (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
+                    (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(
+                        dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")
+                    )
+                )
                 .map((beat) => {
                     const x = this.$root.datetime(beat.time);
                     pingData.push({
@@ -201,6 +208,7 @@ export default {
         },
     },
     watch: {
+        // Update chart data when the selected chart period changes
         chartPeriodHrs: function (newPeriod) {
             if (newPeriod == "0") {
                 newPeriod = null;
@@ -219,11 +227,14 @@ export default {
     created() {
         // Setup Watcher on the root heartbeatList,
         // And mirror latest change to this.heartbeatList
-        this.$watch(() => this.$root.heartbeatList[this.monitorId], (heartbeatList) => {
-            if (this.chartPeriodHrs != 0) {
-                this.heartbeatList.push(heartbeatList.at(-1));
-            }
-        }, { deep: true });
+        this.$watch(() => this.$root.heartbeatList[this.monitorId],
+            (heartbeatList) => {
+                if (this.chartPeriodHrs != 0) {
+                    this.heartbeatList.push(heartbeatList.at(-1));
+                }
+            },
+            { deep: true }
+        );
     }
 };
 </script>

From e4be28a9e748086d12b50799f151b35a7e09e091 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 22 Oct 2021 19:07:11 +0800
Subject: [PATCH 4/7] Fix: Validate beat time before appending

---
 src/components/PingChart.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index cd5e239c..adbca1b6 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -230,7 +230,10 @@ export default {
         this.$watch(() => this.$root.heartbeatList[this.monitorId],
             (heartbeatList) => {
                 if (this.chartPeriodHrs != 0) {
-                    this.heartbeatList.push(heartbeatList.at(-1));
+                    const newBeat = heartbeatList.at(-1);
+                    if (newBeat && dayjs.utc(newBeat.time) > dayjs.utc(this.heartbeatList.at(-1)?.time)) {
+                        this.heartbeatList.push(heartbeatList.at(-1));
+                    }
                 }
             },
             { deep: true }

From 665bae08061d19a08877504fefca9917bcb3335f Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Sun, 24 Oct 2021 01:26:56 +0800
Subject: [PATCH 5/7] UI: Simplify dropdown design

---
 src/components/PingChart.vue | 80 ++++++++++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index adbca1b6..7f4043c0 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -1,18 +1,14 @@
 <template>
     <div>
         <div class="period-options">
-            {{ $t("show") }}:
-            <select
-                id="chart-period-select"
-                v-model="chartPeriodHrs"
-                class="form-select form-select-sm ms-1"
-            >
-                <option value="0">{{ $t("recent") }}</option>
-                <option value="3">3h</option>
-                <option value="6">6h</option>
-                <option value="24">24h</option>
-                <option value="168">1w</option>
-            </select>
+            <button type="button" class="btn btn-light dropdown-toggle btn-period-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                {{ chartPeriodOptions[chartPeriodHrs] }}&nbsp;
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+                <li v-for="(item, key) in chartPeriodOptions" :key="key">
+                    <a class="dropdown-item" :class="{ active: chartPeriodHrs == key }" href="#" @click="chartPeriodHrs = key">{{ item }}</a>
+                </li>
+            </ul>
         </div>
         <div class="chart-wrapper">
             <LineChart :chart-data="chartData" :options="chartOptions" />
@@ -49,6 +45,14 @@ export default {
             // Configurable filtering on top of the returned data
             chartPeriodHrs: 0,
 
+            chartPeriodOptions: {
+                0: this.$t("recent"),
+                3: "3h",
+                6: "6h",
+                24: "24h",
+                168: "1w",
+            },
+
             // A heartbeatList for 3h, 6h, 24h, 1w
             // Uses the $root.heartbeatList when value is null
             heartbeatList: null
@@ -251,15 +255,59 @@ export default {
 }
 
 .period-options {
-    padding: 0.3em 2.2em;
-    margin-bottom: -1.5em;
+    padding: 0.1em 1.0em;
+    margin-bottom: -2em;
     float: right;
     position: relative;
     z-index: 10;
-    font-size: 0.8em;
+
+    .dropdown-menu {
+        padding: 0;
+        min-width: 50px;
+        font-size: 0.9em;
+
+        .dark & {
+            background: $dark-bg;
+        }
+
+        .dropdown-item {
+            border-radius: 0.3rem;
+            padding: 2px 16px 4px 16px;
+
+            .dark & {
+                background: $dark-bg;
+            }
+
+            .dark &:hover {
+                background: $dark-font-color;
+            }
+        }
+
+        .dark & .dropdown-item.active {
+            background: $primary;
+            color: $dark-font-color2;
+        }
+    }
+
+    .btn-period-toggle {
+        padding: 2px 15px;
+        background: transparent;
+        border: 0;
+        color: $link-color;
+        opacity: 0.7;
+        font-size: 0.9em;
+
+        &::after {
+            vertical-align: 0.155em;
+        }
+
+        .dark & {
+            color: $dark-font-color;
+        }
+    }
 }
 
 .chart-wrapper {
-    margin-bottom: 1.5em;
+    margin-bottom: 0.5em;
 }
 </style>

From f8055ed03dd82140f1de9e7af3dd165cec671aa7 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 26 Oct 2021 12:33:46 +0800
Subject: [PATCH 6/7] minor css

---
 src/components/PingChart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 7f4043c0..04c00ca8 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -255,8 +255,8 @@ export default {
 }
 
 .period-options {
-    padding: 0.1em 1.0em;
-    margin-bottom: -2em;
+    padding: 0.1em 1em;
+    margin-bottom: -1.2em;
     float: right;
     position: relative;
     z-index: 10;

From 78424b4f2de893de574b28a677b2d5bf55556e10 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 26 Oct 2021 12:48:21 +0800
Subject: [PATCH 7/7] add simple loading chart effect

---
 src/components/PingChart.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 04c00ca8..aa209fab 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -10,7 +10,7 @@
                 </li>
             </ul>
         </div>
-        <div class="chart-wrapper">
+        <div class="chart-wrapper" :class="{ loading : loading}">
             <LineChart :chart-data="chartData" :options="chartOptions" />
         </div>
     </div>
@@ -42,6 +42,9 @@ export default {
     },
     data() {
         return {
+
+            loading: false,
+
             // Configurable filtering on top of the returned data
             chartPeriodHrs: 0,
 
@@ -218,12 +221,15 @@ export default {
                 newPeriod = null;
                 this.heartbeatList = null;
             } else {
+                this.loading = true;
+
                 this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
                     if (!res.ok) {
                         toast.error(res.msg);
                     } else {
                         this.heartbeatList = res.data;
                     }
+                    this.loading = false;
                 });
             }
         }
@@ -309,5 +315,9 @@ export default {
 
 .chart-wrapper {
     margin-bottom: 0.5em;
+
+    &.loading {
+        filter: blur(10px);
+    }
 }
 </style>