[Status Page] Fix monitors are deleted unexpectedly #1399

CONTRIBUTING.md

@@ -216,7 +216,6 @@ Checking:
 1. Draft a release note, check "This is a pre-release"
 2. Make sure the repo is cleared
 3. `npm run release-beta` with env vars: `VERSION` and `GITHUB_TOKEN`
-4. `git push`
 5. Publish the release note as 1.X.X-beta.X
 6. Press any key to continue
 

extra/beta/update-version.js

@@ -37,6 +37,9 @@ if (! exists) {
 function tag(version) {
     let res = child_process.spawnSync("git", ["tag", version]);
     console.log(res.stdout.toString().trim());
+
+    res = child_process.spawnSync("git", ["push", "origin", version]);
+    console.log(res.stdout.toString().trim());
 }
 
 function tagExists(version) {

extra/env2arg.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+const childProcess = require("child_process");
+let env = process.env;
+
+let cmd = process.argv[2];
+let args = process.argv.slice(3);
+let replacedArgs = [];
+
+for (let arg of args) {
+    for (let key in env) {
+        arg = arg.replaceAll(`$${key}`, env[key]);
+    }
+    replacedArgs.push(arg);
+}
+
+let child = childProcess.spawn(cmd, replacedArgs);
+child.stdout.pipe(process.stdout);
+child.stderr.pipe(process.stderr);

package.json

@@ -51,8 +51,10 @@
         "simple-dns-server": "node extra/simple-dns-server.js",
         "update-language-files-with-base-lang": "cd extra/update-language-files && node index.js %npm_config_base_lang% && eslint ../../src/languages/**.js --fix",
         "update-language-files": "cd extra/update-language-files && node index.js && eslint ../../src/languages/**.js --fix",
-        "ncu-patch": "ncu -u -t patch",
-        "release-beta": "cross-env-shell node extra/beta/update-version.js && npm run build && docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:$VERSION . --push &&  node extra/press-any-key.js && npm run upload-artifacts&& node extra/beta/reset-version.js"
+        "ncu-patch": "npm-check-updates -u -t patch",
+        "release-beta": "node extra/beta/update-version.js && npm run build && node ./extra/env2arg.js docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:$VERSION t louislam/uptime-kuma:beta .  --target release --push && node ./extra/press-any-key.js && npm run upload-artifacts && npm run reset-version",
+        "git-remove-tag": "git tag -d",
+        "reset-version": "node extra/beta/reset-version.js"
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "~1.2.36",
@@ -62,22 +64,22 @@
         "@louislam/sqlite3": "~6.0.1",
         "@popperjs/core": "~2.10.2",
         "args-parser": "~1.3.0",
-        "axios": "~0.26.0",
+        "axios": "~0.26.1",
         "bcryptjs": "~2.4.3",
         "bootstrap": "5.1.3",
-        "bree": "~7.1.0",
+        "bree": "~7.1.5",
         "chardet": "^1.3.0",
-        "chart.js": "~3.6.0",
+        "chart.js": "~3.6.2",
         "chartjs-adapter-dayjs": "~1.0.0",
         "check-password-strength": "^2.0.5",
         "command-exists": "~1.2.9",
         "compare-versions": "~3.6.0",
-        "dayjs": "~1.10.7",
-        "express": "~4.17.1",
-        "express-basic-auth": "~1.2.0",
+        "dayjs": "~1.10.8",
+        "express": "~4.17.3",
+        "express-basic-auth": "~1.2.1",
         "favico.js": "^0.3.10",
         "form-data": "~4.0.0",
-        "http-graceful-shutdown": "~3.1.5",
+        "http-graceful-shutdown": "~3.1.7",
         "iconv-lite": "^0.6.3",
         "jsonwebtoken": "~8.5.1",
         "jwt-decode": "^3.1.2",
@@ -86,9 +88,9 @@
         "notp": "~2.0.3",
         "password-hash": "~1.2.2",
         "postcss-rtlcss": "~3.4.1",
-        "postcss-scss": "~4.0.2",
+        "postcss-scss": "~4.0.3",
         "prom-client": "~13.2.0",
-        "prometheus-api-metrics": "~3.2.0",
+        "prometheus-api-metrics": "~3.2.1",
         "qrcode": "~1.5.0",
         "redbean-node": "0.1.3",
         "socket.io": "~4.4.1",
@@ -106,7 +108,7 @@
         "vue-image-crop-upload": "~3.0.3",
         "vue-multiselect": "~3.0.0-alpha.2",
         "vue-qrcode": "~1.0.0",
-        "vue-router": "~4.0.12",
+        "vue-router": "~4.0.14",
         "vue-toastification": "~2.0.0-rc.5",
         "vuedraggable": "~4.1.0"
     },
@@ -114,10 +116,10 @@
         "@actions/github": "~5.0.0",
         "@babel/eslint-parser": "~7.15.8",
         "@babel/preset-env": "^7.15.8",
-        "@types/bootstrap": "~5.1.6",
-        "@vitejs/plugin-legacy": "~1.6.3",
+        "@types/bootstrap": "~5.1.9",
+        "@vitejs/plugin-legacy": "~1.6.4",
         "@vitejs/plugin-vue": "~1.9.4",
-        "@vue/compiler-sfc": "~3.2.22",
+        "@vue/compiler-sfc": "~3.2.31",
         "babel-plugin-rewire": "~1.2.0",
         "core-js": "~3.18.3",
         "cross-env": "~7.0.3",
@@ -125,7 +127,8 @@
         "eslint": "~7.32.0",
         "eslint-plugin-vue": "~7.18.0",
         "jest": "~27.2.5",
-        "jest-puppeteer": "~6.0.0",
+        "jest-puppeteer": "~6.0.3",
+        "npm-check-updates": "^12.5.4",
         "puppeteer": "~13.1.3",
         "sass": "~1.42.1",
         "stylelint": "~14.2.0",

server/server.js

@@ -1404,6 +1404,8 @@ async function afterLogin(socket, user) {
 
     await sleep(500);
 
+    await StatusPage.sendStatusPageList(io, socket);
+
     for (let monitorID in monitorList) {
         await sendHeartbeatList(socket, monitorID);
     }
@@ -1415,8 +1417,6 @@ async function afterLogin(socket, user) {
     for (let monitorID in monitorList) {
         await Monitor.sendStats(io, monitorID, user.id);
     }
-
-    await StatusPage.sendStatusPageList(io, socket);
 }
 
 async function getMonitorJSONList(userID) {

server/socket-handlers/status-page-socket-handler.js

@@ -178,7 +178,12 @@ module.exports.statusPageSocketHandler = (socket) => {
             // Delete groups that not in the list
             debug("Delete groups that not in the list");
             const slots = groupIDList.map(() => "?").join(",");
-            await R.exec(`DELETE FROM \`group\` WHERE id NOT IN (${slots})`, groupIDList);
+
+            const data = [
+                ...groupIDList,
+                statusPage.id
+            ];
+            await R.exec(`DELETE FROM \`group\` WHERE id NOT IN (${slots}) AND status_page_id = ?`, data);
 
             // Also change entry page to new slug if it is the default one, and slug is changed.
             if (server.entryPage === "statusPage-" + slug && statusPage.slug !== slug) {

src/assets/app.scss

@@ -348,11 +348,8 @@ textarea.form-control {
 
 .monitor-list {
     &.scrollbar {
-        min-height: calc(100vh - 240px);
-        max-height: calc(100vh - 30px);
         overflow-y: auto;
-        position: sticky;
-        top: 10px;
+        height: calc(100% - 55px);
     }
 
     .item {

src/components/MonitorList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow-box mb-3">
+    <div class="shadow-box mb-3" :style="boxStyle">
         <div class="list-header">
             <div class="placeholder"></div>
             <div class="search-wrapper">
@@ -63,9 +63,16 @@ export default {
     data() {
         return {
             searchText: "",
+            windowTop: 0,
         };
     },
     computed: {
+        boxStyle() {
+            return {
+                height: `calc(100vh - 160px + ${this.windowTop}px)`,
+            };
+        },
+
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
 
@@ -108,7 +115,20 @@ export default {
             return result;
         },
     },
+    mounted() {
+        window.addEventListener("scroll", this.onScroll);
+    },
+    beforeUnmount() {
+        window.removeEventListener("scroll", this.onScroll);
+    },
     methods: {
+        onScroll() {
+            if (window.top.scrollY <= 133) {
+                this.windowTop = window.top.scrollY;
+            } else {
+                this.windowTop = 133;
+            }
+        },
         monitorURL(id) {
             return getMonitorRelativeURL(id);
         },
@@ -122,6 +142,12 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+.shadow-box {
+    height: calc(100vh - 150px);
+    position: sticky;
+    top: 10px;
+}
+
 .small-padding {
     padding-left: 5px !important;
     padding-right: 5px !important;
@@ -142,6 +168,12 @@ export default {
     }
 }
 
+.dark {
+    .footer {
+      //  background-color: $dark-bg;
+    }
+}
+
 @media (max-width: 770px) {
     .list-header {
         margin: -20px;