Improve the setup database for embedded MariaDB

docker/debian-base.dockerfile

@@ -23,6 +23,7 @@ RUN curl https://pkg.cloudflare.com/cloudflare-main.gpg --output /usr/share/keyr
 # Not working for armv7, so use the older version (10.5) of MariaDB from the debian repo
 # curl -LsS https://r.mariadb.com/downloads/mariadb_repo_setup | bash -s -- --mariadb-server-version="mariadb-11.1" && \
 FROM base2-slim AS base2
+ENV UPTIME_KUMA_ENABLE_EMBEDDED_MARIADB=1
 RUN apt update && \
     apt --yes --no-install-recommends install chromium fonts-indic fonts-noto fonts-noto-cjk mariadb-server && \
     apt --yes remove curl && \
@@ -30,4 +31,4 @@ RUN apt update && \
     apt --yes autoremove && \
     chown -R node:node /var/lib/mysql
 
-ENV UPTIME_KUMA_ENABLE_EMBEDDED_MARIADB=1
+

docker/docker-compose-dev.yml

@@ -5,7 +5,7 @@ services:
     container_name: uptime-kuma-dev
     image: louislam/uptime-kuma:nightly2
     volumes:
-      - ./data:/app/data
+      #- ./data:/app/data
       - ../server:/app/server
     ports:
       - "3001:3001"  # <Host Port>:<Container Port>

package.json

@@ -34,8 +34,8 @@
         "build-docker-builder-go": "docker buildx build -f docker/builder-go.dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:builder-go . --push",
         "build-docker-slim": "node ./extra/env2arg.js docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:2-slim -t louislam/uptime-kuma:$VERSION-slim --target release --build-arg BASE_IMAGE=louislam/uptime-kuma:base2-slim . --push",
         "build-docker-full": "node ./extra/env2arg.js docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:2 -t louislam/uptime-kuma:$VERSION --target release . --push",
-        "build-docker-nightly": "npm run build && docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly2 --target nightly --build-arg . --push",
-        "build-docker-nightly-local": "docker build -f docker/dockerfile -t louislam/uptime-kuma:nightly2 --target nightly .",
+        "build-docker-nightly": "npm run build && docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly2 --target nightly . --push",
+        "build-docker-nightly-local": "npm run build && docker build -f docker/dockerfile -t louislam/uptime-kuma:nightly2 --target nightly .",
         "build-docker-pr-test": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64 -t louislam/uptime-kuma:pr-test --target pr-test . --push",
         "upload-artifacts": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:upload-artifact --build-arg VERSION --build-arg GITHUB_TOKEN --target upload-artifact . --progress plain",
         "setup": "git checkout 1.22.0 && npm ci --production && npm run download-dist",
@@ -63,7 +63,7 @@
         "deploy-demo-server": "node extra/deploy-demo-server.js",
         "sort-contributors": "node extra/sort-contributors.js",
         "quick-run-nightly": "docker run --rm --env NODE_ENV=development -p 3001:3001 louislam/uptime-kuma:nightly2",
-        "start-dev-container": "cd docker && docker-compose -f docker-compose-dev.yml up"
+        "start-dev-container": "cd docker && docker-compose -f docker-compose-dev.yml up --force-recreate"
     },
     "dependencies": {
         "@grpc/grpc-js": "~1.7.3",

server/server.js

@@ -76,7 +76,9 @@ log.info("server", "Importing this project modules");
 log.debug("server", "Importing Monitor");
 const Monitor = require("./model/monitor");
 log.debug("server", "Importing Settings");
-const { getSettings, setSettings, setting, initJWTSecret, checkLogin, startUnitTest, FBSD, doubleCheckPassword, startE2eTests } = require("./util-server");
+const { getSettings, setSettings, setting, initJWTSecret, checkLogin, startUnitTest, FBSD, doubleCheckPassword, startE2eTests,
+    allowDevAllOrigin
+} = require("./util-server");
 
 log.debug("server", "Importing Notification");
 const { Notification } = require("./notification");
@@ -228,6 +230,14 @@ let needSetup = false;
         }
     });
 
+    app.get("/setup-database-info", (request, response) => {
+        allowDevAllOrigin(response);
+        response.json({
+            runningSetup: false,
+            needSetup: false,
+        });
+    });
+
     if (isDev) {
         app.post("/test-webhook", async (request, response) => {
             log.debug("test", request.headers);

server/setup-database.js

@@ -18,6 +18,7 @@ class SetupDatabase {
      * @type {boolean}
      */
     needSetup = true;
+    runningSetup = false;
 
     server;
 
@@ -80,6 +81,12 @@ class SetupDatabase {
             let tempServer;
             app.use(express.json());
 
+            // Disable Keep Alive, otherwise the server will not shutdown, as the client will keep the connection alive
+            app.use(function (req, res, next) {
+                res.setHeader("Connection", "close");
+                next();
+            });
+
             app.get("/", async (request, response) => {
                 response.redirect("/setup-database");
             });
@@ -91,9 +98,12 @@ class SetupDatabase {
                 });
             });
 
-            app.get("/info", (request, response) => {
+            app.get("/setup-database-info", (request, response) => {
                 allowDevAllOrigin(response);
+                console.log("Request /setup-database-info");
                 response.json({
+                    runningSetup: this.runningSetup,
+                    needSetup: this.needSetup,
                     isEnabledEmbeddedMariaDB: this.isEnabledEmbeddedMariaDB(),
                 });
             });
@@ -101,7 +111,12 @@ class SetupDatabase {
             app.post("/setup-database", async (request, response) => {
                 allowDevAllOrigin(response);
 
-                console.log(request);
+                if (this.runningSetup) {
+                    response.status(400).json("Setup is already running");
+                    return;
+                }
+
+                this.runningSetup = true;
 
                 let dbConfig = request.body.dbConfig;
 
@@ -114,42 +129,50 @@ class SetupDatabase {
                 // Validate input
                 if (typeof dbConfig !== "object") {
                     response.status(400).json("Invalid dbConfig");
+                    this.runningSetup = false;
                     return;
                 }
 
                 if (!dbConfig.type) {
                     response.status(400).json("Database Type is required");
+                    this.runningSetup = false;
                     return;
                 }
 
                 if (!supportedDBTypes.includes(dbConfig.type)) {
                     response.status(400).json("Unsupported Database Type");
+                    this.runningSetup = false;
                     return;
                 }
 
                 if (dbConfig.type === "mariadb") {
                     if (!dbConfig.hostname) {
                         response.status(400).json("Hostname is required");
+                        this.runningSetup = false;
                         return;
                     }
 
                     if (!dbConfig.port) {
                         response.status(400).json("Port is required");
+                        this.runningSetup = false;
                         return;
                     }
 
                     if (!dbConfig.dbName) {
                         response.status(400).json("Database name is required");
+                        this.runningSetup = false;
                         return;
                     }
 
                     if (!dbConfig.username) {
                         response.status(400).json("Username is required");
+                        this.runningSetup = false;
                         return;
                     }
 
                     if (!dbConfig.password) {
                         response.status(400).json("Password is required");
+                        this.runningSetup = false;
                         return;
                     }
                 }
@@ -162,11 +185,16 @@ class SetupDatabase {
                 });
 
                 // Shutdown down this express and start the main server
-                log.info("setup-database", "Database is configured, close setup-database server and start the main server now.");
+                log.info("setup-database", "Database is configured, close the setup-database server and start the main server now.");
                 if (tempServer) {
-                    tempServer.close();
+                    tempServer.close(() => {
+                        log.info("setup-database", "The setup-database server is closed");
+                        resolve();
+                    });
+                } else {
+                    resolve();
                 }
-                resolve();
+
             });
 
             app.use("/", expressStaticGzip("dist", {

src/pages/Setup.vue

@@ -62,6 +62,8 @@ export default {
 
     },
     mounted() {
+        // TODO: Check if it is a database setup
+
         this.$root.getSocket().emit("needSetup", (needSetup) => {
             if (! needSetup) {
                 this.$router.push("/");

src/pages/SetupDatabase.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="form-container">
+    <div v-if="show" class="form-container">
         <form @submit.prevent="submit">
             <div>
                 <object width="64" height="64" data="/icon.svg" />
@@ -8,83 +8,94 @@
                 </div>
             </div>
 
-            <div class="form-floating short mt-3">
-                <select id="language" v-model="$root.language" class="form-select">
-                    <option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
-                        {{ $i18n.messages[lang].languageName }}
-                    </option>
-                </select>
-                <label for="language" class="form-label">{{ $t("Language") }}</label>
+            <div v-if="info.runningSetup" class="mt-5">
+                <div class="alert alert-success" role="alert">
+                    <div class="d-flex align-items-center">
+                        <strong>Setting up the database. It may take a while, please be patient.</strong>
+                        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
+                    </div>
+                </div>
             </div>
 
-            <p class="mt-5 short">
-                {{ $t("setupDatabaseChooseDatabase") }}
-            </p>
+            <template v-if="!info.runningSetup">
+                <div class="form-floating short mt-3">
+                    <select id="language" v-model="$root.language" class="form-select">
+                        <option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
+                            {{ $i18n.messages[lang].languageName }}
+                        </option>
+                    </select>
+                    <label for="language" class="form-label">{{ $t("Language") }}</label>
+                </div>
 
-            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
-                <template v-if="isEnabledEmbeddedMariaDB">
-                    <input id="btnradio3" v-model="dbConfig.type" type="radio" class="btn-check" autocomplete="off" value="embedded-mariadb">
+                <p class="mt-5 short">
+                    {{ $t("setupDatabaseChooseDatabase") }}
+                </p>
 
-                    <label class="btn btn-outline-primary" for="btnradio3">
-                        Embedded MariaDB
+                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+                    <template v-if="info.isEnabledEmbeddedMariaDB">
+                        <input id="btnradio3" v-model="dbConfig.type" type="radio" class="btn-check" autocomplete="off" value="embedded-mariadb">
+
+                        <label class="btn btn-outline-primary" for="btnradio3">
+                            Embedded MariaDB
+                        </label>
+                    </template>
+
+                    <input id="btnradio2" v-model="dbConfig.type" type="radio" class="btn-check" autocomplete="off" value="mariadb">
+                    <label class="btn btn-outline-primary" for="btnradio2">
+                        MariaDB/MySQL
                     </label>
+
+                    <input id="btnradio1" v-model="dbConfig.type" type="radio" class="btn-check" autocomplete="off" value="sqlite">
+                    <label class="btn btn-outline-primary" for="btnradio1">
+                        SQLite
+                    </label>
+                </div>
+
+                <p v-if="dbConfig.type === 'embedded-mariadb'" class="mt-3">
+                    {{ $t("setupDatabaseEmbeddedMariaDB") }}
+                </p>
+
+                <p v-if="dbConfig.type === 'mariadb'" class="mt-3">
+                    {{ $t("setupDatabaseMariaDB") }}
+                </p>
+
+                <p v-if="dbConfig.type === 'sqlite'" class="mt-3">
+                    {{ $t("setupDatabaseSQLite") }}
+                </p>
+
+                <template v-if="dbConfig.type === 'mariadb'">
+                    <div class="form-floating mt-3 short">
+                        <input id="floatingInput" v-model="dbConfig.hostname" type="text" class="form-control" required>
+                        <label for="floatingInput">{{ $t("Hostname") }}</label>
+                    </div>
+
+                    <div class="form-floating mt-3 short">
+                        <input id="floatingInput" v-model="dbConfig.port" type="text" class="form-control" required>
+                        <label for="floatingInput">{{ $t("Port") }}</label>
+                    </div>
+
+                    <div class="form-floating mt-3 short">
+                        <input id="floatingInput" v-model="dbConfig.username" type="text" class="form-control" required>
+                        <label for="floatingInput">{{ $t("Username") }}</label>
+                    </div>
+
+                    <div class="form-floating mt-3 short">
+                        <input id="floatingInput" v-model="dbConfig.password" type="passwrod" class="form-control" required>
+                        <label for="floatingInput">{{ $t("Password") }}</label>
+                    </div>
+
+                    <div class="form-floating mt-3 short">
+                        <input id="floatingInput" v-model="dbConfig.dbName" type="text" class="form-control" required>
+                        <label for="floatingInput">{{ $t("dbName") }}</label>
+                    </div>
                 </template>
 
-                <input id="btnradio2" v-model="dbConfig.type" type="radio" class="btn-check" autocomplete="off" value="mariadb">
-                <label class="btn btn-outline-primary" for="btnradio2">
-                    MariaDB/MySQL
-                </label>
+                <button v-if="dbConfig.type === 'mariadb'" class="btn btn-warning mt-3" @submit.prevent="test">{{ $t("Test") }}</button>
 
-                <input id="btnradio1" v-model="dbConfig.type" type="radio" class="btn-check" autocomplete="off" value="sqlite">
-                <label class="btn btn-outline-primary" for="btnradio1">
-                    SQLite
-                </label>
-            </div>
-
-            <p v-if="dbConfig.type === 'embedded-mariadb'" class="mt-3">
-                {{ $t("setupDatabaseEmbeddedMariaDB") }}
-            </p>
-
-            <p v-if="dbConfig.type === 'mariadb'" class="mt-3">
-                {{ $t("setupDatabaseMariaDB") }}
-            </p>
-
-            <p v-if="dbConfig.type === 'sqlite'" class="mt-3">
-                {{ $t("setupDatabaseSQLite") }}
-            </p>
-
-            <template v-if="dbConfig.type === 'mariadb'">
-                <div class="form-floating mt-3 short">
-                    <input id="floatingInput" v-model="dbConfig.hostname" type="text" class="form-control" required>
-                    <label for="floatingInput">{{ $t("Hostname") }}</label>
-                </div>
-
-                <div class="form-floating mt-3 short">
-                    <input id="floatingInput" v-model="dbConfig.port" type="text" class="form-control" required>
-                    <label for="floatingInput">{{ $t("Port") }}</label>
-                </div>
-
-                <div class="form-floating mt-3 short">
-                    <input id="floatingInput" v-model="dbConfig.username" type="text" class="form-control" required>
-                    <label for="floatingInput">{{ $t("Username") }}</label>
-                </div>
-
-                <div class="form-floating mt-3 short">
-                    <input id="floatingInput" v-model="dbConfig.password" type="passwrod" class="form-control" required>
-                    <label for="floatingInput">{{ $t("Password") }}</label>
-                </div>
-
-                <div class="form-floating mt-3 short">
-                    <input id="floatingInput" v-model="dbConfig.dbName" type="text" class="form-control" required>
-                    <label for="floatingInput">{{ $t("dbName") }}</label>
-                </div>
+                <button class="btn btn-primary mt-4 short" type="submit" :disabled="disabledButton">
+                    {{ $t("Next") }}
+                </button>
             </template>
-
-            <button v-if="dbConfig.type === 'mariadb'" class="btn btn-warning mt-3" @submit.prevent="test">{{ $t("Test") }}</button>
-
-            <button class="btn btn-primary mt-4 short" type="submit" :disabled="disabledButton">
-                {{ $t("Next") }}
-            </button>
         </form>
     </div>
 </template>
@@ -98,8 +109,7 @@ const toast = useToast();
 export default {
     data() {
         return {
-            processing: false,
-            isEnabledEmbeddedMariaDB: false,
+            show: false,
             dbConfig: {
                 type: undefined,
                 port: 3306,
@@ -108,20 +118,31 @@ export default {
                 password: "",
                 dbName: "kuma",
             },
+            info: {
+                needSetup: false,
+                runningSetup: false,
+                isEnabledEmbeddedMariaDB: false,
+            },
         };
     },
     computed: {
         disabledButton() {
-            return this.dbConfig.type === undefined || this.processing;
+            return this.dbConfig.type === undefined || this.info.runningSetup;
         },
     },
     async mounted() {
-        let res = await axios.get("/info");
-        this.isEnabledEmbeddedMariaDB = res.data.isEnabledEmbeddedMariaDB;
+        let res = await axios.get("/setup-database-info");
+        this.info = res.data;
+
+        if (this.info && this.info.needSetup === false) {
+            location.href = "/setup";
+        } else {
+            this.show = true;
+        }
     },
     methods: {
         async submit() {
-            this.processing = true;
+            this.info.runningSetup = true;
 
             try {
                 let res = await axios.post("/setup-database", {
@@ -129,12 +150,11 @@ export default {
                 });
 
                 await sleep(2000);
-                // TODO: an interval to check if the main server is ready, it is ready, go to "/" again to continue the setup of admin account
                 await this.goToMainServerWhenReady();
             } catch (e) {
                 toast.error(e.response.data);
             } finally {
-                this.processing = false;
+                this.info.runningSetup = false;
             }
 
         },
@@ -142,10 +162,14 @@ export default {
         async goToMainServerWhenReady() {
             try {
                 console.log("Trying...");
-                let res = await axios.get("/api/entry-page");
-                if (res.data && res.data.type === "entryPage") {
-                    location.href = "/";
+                let res = await axios.get("/setup-database-info");
+                if (res.data && res.data.needSetup === false) {
+                    this.show = false;
+                    location.href = "/setup";
                 } else {
+                    if (res.data) {
+                        this.info = res.data;
+                    }
                     throw new Error("not ready");
                 }
             } catch (e) {
@@ -153,6 +177,10 @@ export default {
                 await sleep(2000);
                 await this.goToMainServerWhenReady();
             }
+        },
+
+        test() {
+            toast.error("not implemented");
         }
     },
 };