Database Setup Page (#2738)

* WIP

* WIP: Database setup process

* Add database setup page

.dockerignore

@@ -1,6 +1,6 @@
 /.idea
 /node_modules
-/data
+/data*
 /cypress
 /out
 /test

.gitignore

@@ -7,6 +7,7 @@ dist-ssr
 
 /data
 !/data/.gitkeep
+/data*
 .vscode
 
 /private

docker/debian-base.dockerfile

@@ -33,4 +33,4 @@ RUN apt update && \
     rm -rf /var/lib/apt/lists/* && \
     apt --yes autoremove
 RUN chown -R node:node /var/lib/mysql
-
+ENV UPTIME_KUMA_ENABLE_EMBEDDED_MARIADB=1

extra/remove-2fa.js

@@ -12,7 +12,7 @@ const rl = readline.createInterface({
 });
 
 const main = async () => {
-    Database.init(args);
+    Database.initDataDir(args);
     await Database.connect();
 
     try {

extra/reset-password.js

@@ -13,7 +13,7 @@ const rl = readline.createInterface({
 
 const main = async () => {
     console.log("Connecting the database");
-    Database.init(args);
+    Database.initDataDir(args);
     await Database.connect(false, false, true);
 
     try {

server/database.js

@@ -25,7 +25,7 @@ class Database {
      */
     static uploadDir;
 
-    static path;
+    static sqlitePath;
 
     /**
      * @type {boolean}
@@ -83,10 +83,10 @@ class Database {
     static noReject = true;
 
     /**
-     * Initialize the database
+     * Initialize the data directory
      * @param {Object} args Arguments to initialize DB with
      */
-    static init(args) {
+    static initDataDir(args) {
         // Data Directory (must be end with "/")
         Database.dataDir = process.env.DATA_DIR || args["data-dir"] || "./data/";
 
@@ -96,7 +96,7 @@ class Database {
             PluginsManager.disable = true;
         }
 
-        Database.path = Database.dataDir + "kuma.db";
+        Database.sqlitePath = Database.dataDir + "kuma.db";
         if (! fs.existsSync(Database.dataDir)) {
             fs.mkdirSync(Database.dataDir, { recursive: true });
         }
@@ -110,6 +110,26 @@ class Database {
         log.info("db", `Data Dir: ${Database.dataDir}`);
     }
 
+    static readDBConfig() {
+        let dbConfig;
+
+        let dbConfigString = fs.readFileSync(path.join(Database.dataDir, "db-config.json")).toString("utf-8");
+        dbConfig = JSON.parse(dbConfigString);
+
+        if (typeof dbConfig !== "object") {
+            throw new Error("Invalid db-config.json, it must be an object");
+        }
+
+        if (typeof dbConfig.type !== "string") {
+            throw new Error("Invalid db-config.json, type must be a string");
+        }
+        return dbConfig;
+    }
+
+    static writeDBConfig(dbConfig) {
+        fs.writeFileSync(path.join(Database.dataDir, "db-config.json"), JSON.stringify(dbConfig, null, 4));
+    }
+
     /**
      * Connect to the database
      * @param {boolean} [testMode=false] Should the connection be
@@ -121,21 +141,11 @@ class Database {
      */
     static async connect(testMode = false, autoloadModels = true, noLog = false) {
         const acquireConnectionTimeout = 120 * 1000;
-
         let dbConfig;
-
         try {
-            let dbConfigString = fs.readFileSync(path.join(Database.dataDir, "db-config.json")).toString("utf-8");
-            dbConfig = JSON.parse(dbConfigString);
-
-            if (typeof dbConfig !== "object") {
-                throw new Error("Invalid db-config.json, it must be an object");
-            }
-
-            if (typeof dbConfig.type !== "string") {
-                throw new Error("Invalid db-config.json, type must be a string");
-            }
-        } catch (_) {
+            dbConfig = this.readDBConfig();
+        } catch (err) {
+            log.warn("db", err.message);
             dbConfig = {
                 type: "sqlite",
                 //type: "embedded-mariadb",
@@ -151,7 +161,7 @@ class Database {
             config = {
                 client: Dialect,
                 connection: {
-                    filename: Database.path,
+                    filename: Database.sqlitePath,
                     acquireConnectionTimeout: acquireConnectionTimeout,
                 },
                 useNullAsDefault: true,
@@ -497,15 +507,15 @@ class Database {
         if (! this.backupPath) {
             log.info("db", "Backing up the database");
             this.backupPath = this.dataDir + "kuma.db.bak" + version;
-            fs.copyFileSync(Database.path, this.backupPath);
+            fs.copyFileSync(Database.sqlitePath, this.backupPath);
 
-            const shmPath = Database.path + "-shm";
+            const shmPath = Database.sqlitePath + "-shm";
             if (fs.existsSync(shmPath)) {
                 this.backupShmPath = shmPath + ".bak" + version;
                 fs.copyFileSync(shmPath, this.backupShmPath);
             }
 
-            const walPath = Database.path + "-wal";
+            const walPath = Database.sqlitePath + "-wal";
             if (fs.existsSync(walPath)) {
                 this.backupWalPath = walPath + ".bak" + version;
                 fs.copyFileSync(walPath, this.backupWalPath);
@@ -535,13 +545,13 @@ class Database {
         if (this.backupPath) {
             log.error("db", "Patching the database failed!!! Restoring the backup");
 
-            const shmPath = Database.path + "-shm";
-            const walPath = Database.path + "-wal";
+            const shmPath = Database.sqlitePath + "-shm";
+            const walPath = Database.sqlitePath + "-wal";
 
             // Delete patch failed db
             try {
-                if (fs.existsSync(Database.path)) {
-                    fs.unlinkSync(Database.path);
+                if (fs.existsSync(Database.sqlitePath)) {
+                    fs.unlinkSync(Database.sqlitePath);
                 }
 
                 if (fs.existsSync(shmPath)) {
@@ -557,7 +567,7 @@ class Database {
             }
 
             // Restore backup
-            fs.copyFileSync(this.backupPath, Database.path);
+            fs.copyFileSync(this.backupPath, Database.sqlitePath);
 
             if (this.backupShmPath) {
                 fs.copyFileSync(this.backupShmPath, shmPath);
@@ -575,7 +585,7 @@ class Database {
     /** Get the size of the database */
     static getSize() {
         log.debug("db", "Database.getSize()");
-        let stats = fs.statSync(Database.path);
+        let stats = fs.statSync(Database.sqlitePath);
         log.debug("db", stats);
         return stats.size;
     }

server/jobs/util-worker.js

@@ -36,7 +36,7 @@ const connectDb = async function () {
         process.env.DATA_DIR || workerData["data-dir"] || "./data/"
     );
 
-    Database.init({
+    Database.initDataDir({
         "data-dir": dbPath,
     });
 

server/server.js

@@ -143,6 +143,7 @@ const { Settings } = require("./settings");
 const { CacheableDnsHttpAgent } = require("./cacheable-dns-http-agent");
 const { pluginsHandler } = require("./socket-handlers/plugins-handler");
 const { EmbeddedMariaDB } = require("./embedded-mariadb");
+const { SetupDatabase } = require("./setup-database");
 
 app.use(express.json());
 
@@ -168,8 +169,20 @@ let jwtSecret = null;
 let needSetup = false;
 
 (async () => {
-    Database.init(args);
+    // Create a data directory
+    Database.initDataDir(args);
+
+    // Check if is chosen a database type
+    let setupDatabase = new SetupDatabase(args, server);
+    if (setupDatabase.isNeedSetup()) {
+        // Hold here and start a special setup page until user choose a database type
+        await setupDatabase.start(hostname, port);
+    }
+
+    // Connect to database
     await initDatabase(testMode);
+
+    // Database should be ready now
     await server.initAfterDatabaseReady();
     server.loadPlugins();
     server.entryPage = await Settings.get("entryPage");
@@ -809,9 +822,10 @@ let needSetup = false;
                 }
 
                 let list = await R.getAll(`
-                    SELECT * FROM heartbeat
-                    WHERE monitor_id = ? AND
-                    time > DATETIME('now', '-' || ? || ' hours')
+                    SELECT *
+                    FROM heartbeat
+                    WHERE monitor_id = ?
+                      AND time > DATETIME('now', '-' || ? || ' hours')
                     ORDER BY time ASC
                 `, [
                     monitorID,
@@ -1644,9 +1658,9 @@ async function afterLogin(socket, user) {
  * @returns {Promise<void>}
  */
 async function initDatabase(testMode = false) {
-    if (! fs.existsSync(Database.path)) {
+    if (! fs.existsSync(Database.sqlitePath)) {
         log.info("server", "Copying Database");
-        fs.copyFileSync(Database.templatePath, Database.path);
+        fs.copyFileSync(Database.templatePath, Database.sqlitePath);
     }
 
     log.info("server", "Connecting to the Database");

server/setup-database.js

@@ -0,0 +1,194 @@
+const express = require("express");
+const { log } = require("../src/util");
+const expressStaticGzip = require("express-static-gzip");
+const fs = require("fs");
+const path = require("path");
+const Database = require("./database");
+const { allowDevAllOrigin } = require("./util-server");
+
+/**
+ *  A standalone express app that is used to setup database
+ *  It is used when db-config.json and kuma.db are not found or invalid
+ *  Once it is configured, it will shutdown and start the main server
+ */
+class SetupDatabase {
+
+    /**
+     * Show Setup Page
+     * @type {boolean}
+     */
+    needSetup = true;
+
+    server;
+
+    constructor(args, server) {
+        this.server = server;
+
+        // Priority: env > db-config.json
+        // If env is provided, write it to db-config.json
+        // If db-config.json is found, check if it is valid
+        // If db-config.json is not found or invalid, check if kuma.db is found
+        // If kuma.db is not found, show setup page
+
+        let dbConfig;
+
+        try {
+            dbConfig = Database.readDBConfig();
+        } catch (e) {
+            log.info("setup-database", "db-config.json is not found or invalid: " + e.message);
+
+            // Check if kuma.db is found (1.X.X users)
+            if (fs.existsSync(path.join(Database.dataDir, "kuma.db"))) {
+                this.needSetup = false;
+            } else {
+                this.needSetup = true;
+            }
+            dbConfig = {};
+        }
+
+        if (process.env.UPTIME_KUMA_DB_TYPE) {
+            this.needSetup = false;
+            log.info("setup-database", "UPTIME_KUMA_DB_TYPE is provided by env, try to override db-config.json");
+            dbConfig.type = process.env.UPTIME_KUMA_DB_TYPE;
+            dbConfig.hostname = process.env.UPTIME_KUMA_DB_HOSTNAME;
+            dbConfig.port = process.env.UPTIME_KUMA_DB_PORT;
+            dbConfig.database = process.env.UPTIME_KUMA_DB_NAME;
+            dbConfig.username = process.env.UPTIME_KUMA_DB_USERNAME;
+            dbConfig.password = process.env.UPTIME_KUMA_DB_PASSWORD;
+            Database.writeDBConfig(dbConfig);
+        }
+
+    }
+
+    /**
+     * Show Setup Page
+     */
+    isNeedSetup() {
+        return this.needSetup;
+    }
+
+    isEnabledEmbeddedMariaDB() {
+        return process.env.UPTIME_KUMA_ENABLE_EMBEDDED_MARIADB === "1";
+    }
+
+    start(hostname, port) {
+        return new Promise((resolve) => {
+            const app = express();
+            let tempServer;
+            app.use(express.json());
+
+            app.get("/", async (request, response) => {
+                response.redirect("/setup-database");
+            });
+
+            app.get("/api/entry-page", async (request, response) => {
+                allowDevAllOrigin(response);
+                response.json({
+                    type: "setup-database",
+                });
+            });
+
+            app.get("/info", (request, response) => {
+                allowDevAllOrigin(response);
+                response.json({
+                    isEnabledEmbeddedMariaDB: this.isEnabledEmbeddedMariaDB(),
+                });
+            });
+
+            app.post("/setup-database", async (request, response) => {
+                allowDevAllOrigin(response);
+
+                console.log(request);
+
+                let dbConfig = request.body.dbConfig;
+
+                let supportedDBTypes = [ "mariadb", "sqlite" ];
+
+                if (this.isEnabledEmbeddedMariaDB()) {
+                    supportedDBTypes.push("embedded-mariadb");
+                }
+
+                // Validate input
+                if (typeof dbConfig !== "object") {
+                    response.status(400).json("Invalid dbConfig");
+                    return;
+                }
+
+                if (!dbConfig.type) {
+                    response.status(400).json("Database Type is required");
+                    return;
+                }
+
+                if (!supportedDBTypes.includes(dbConfig.type)) {
+                    response.status(400).json("Unsupported Database Type");
+                    return;
+                }
+
+                if (dbConfig.type === "mariadb") {
+                    if (!dbConfig.hostname) {
+                        response.status(400).json("Hostname is required");
+                        return;
+                    }
+
+                    if (!dbConfig.port) {
+                        response.status(400).json("Port is required");
+                        return;
+                    }
+
+                    if (!dbConfig.dbName) {
+                        response.status(400).json("Database name is required");
+                        return;
+                    }
+
+                    if (!dbConfig.username) {
+                        response.status(400).json("Username is required");
+                        return;
+                    }
+
+                    if (!dbConfig.password) {
+                        response.status(400).json("Password is required");
+                        return;
+                    }
+                }
+
+                // Write db-config.json
+                Database.writeDBConfig(dbConfig);
+
+                response.json({
+                    ok: true,
+                });
+
+                // 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.");
+                if (tempServer) {
+                    tempServer.close();
+                }
+                resolve();
+            });
+
+            app.use("/", expressStaticGzip("dist", {
+                enableBrotli: true,
+            }));
+
+            app.get("*", async (_request, response) => {
+                response.send(this.server.indexHTML);
+            });
+
+            app.options("*", async (_request, response) => {
+                allowDevAllOrigin(response);
+                response.end();
+            });
+
+            tempServer = app.listen(port, hostname, () => {
+                log.info("setup-database", `Starting Setup Database on ${port}`);
+                let domain = (hostname) ? hostname : "localhost";
+                log.info("setup-database", `Open http://${domain}:${port} in your browser`);
+                log.info("setup-database", "Waiting for user action...");
+            });
+        });
+    }
+}
+
+module.exports = {
+    SetupDatabase,
+};

server/util-server.js

@@ -613,6 +613,7 @@ exports.allowDevAllOrigin = (res) => {
  */
 exports.allowAllOrigin = (res) => {
     res.header("Access-Control-Allow-Origin", "*");
+    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
 };
 

src/lang/en.json

@@ -1,5 +1,10 @@
 {
     "languageName": "English",
+    "setupDatabaseChooseDatabase": "Which database do you want to use?",
+    "setupDatabaseEmbeddedMariaDB": "You don't need to set anything. This docker image have embedded and configured a MariaDB for you automatically. Uptime Kuma will connect to this database via unix socket.",
+    "setupDatabaseMariaDB": "Connect to an external MariaDB database. You need to set the database connection information.",
+    "setupDatabaseSQLite": "A simple database file. It is recommended for small scale deployment. Before 2.0.0, Uptime Kuma used SQLite by default.",
+    "dbName": "Database Name",
     "Settings": "Settings",
     "Dashboard": "Dashboard",
     "Help": "Help",

src/mixins/socket.js

@@ -86,6 +86,11 @@ export default {
                 }
             }
 
+            // Also don't need to connect to the socket.io for setup database page
+            if (location.pathname === "/setup-database") {
+                return;
+            }
+
             this.socket.initedSocketIO = true;
 
             let protocol = (location.protocol === "https:") ? "wss://" : "ws://";

src/pages/Entry.vue

@@ -19,10 +19,13 @@ export default {
     },
     async mounted() {
 
-        // There are only 2 cases that could come in here.
+        // There are only 3 cases that could come in here.
         // 1. Matched status Page domain name
         // 2. Vue Frontend Dev
-        let res = (await axios.get("/api/entry-page")).data;
+        // 3. Vue Frontend Dev (not setup database yet)
+        let res;
+        try {
+            res = (await axios.get("/api/entry-page")).data;
 
             if (res.type === "statusPageMatchedDomain") {
                 this.statusPageSlug = res.statusPageSlug;
@@ -36,9 +39,14 @@ export default {
                 } else {
                     this.$router.push("/dashboard");
                 }
+            } else if (res.type === "setup-database") {
+                this.$router.push("/setup-database");
             } else {
                 this.$router.push("/dashboard");
             }
+        } catch (e) {
+            alert("Cannot connect to the backend server. Did you start the backend server? (npm run start-server-dev)");
+        }
 
     },
 

src/pages/SetupDatabase.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="form-container">
+        <form @submit.prevent="submit">
+            <div>
+                <object width="64" height="64" data="/icon.svg" />
+                <div style="font-size: 28px; font-weight: bold; margin-top: 5px;">
+                    Uptime Kuma
+                </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>
+
+            <p class="mt-5 short">
+                {{ $t("setupDatabaseChooseDatabase") }}
+            </p>
+
+            <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">
+
+                    <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>
+
+            <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>
+
+<script>
+import axios from "axios";
+import { useToast } from "vue-toastification";
+import { sleep } from "../util.ts";
+const toast = useToast();
+
+export default {
+    data() {
+        return {
+            processing: false,
+            isEnabledEmbeddedMariaDB: false,
+            dbConfig: {
+                type: undefined,
+                port: 3306,
+                hostname: "",
+                username: "",
+                password: "",
+                dbName: "kuma",
+            },
+        };
+    },
+    computed: {
+        disabledButton() {
+            return this.dbConfig.type === undefined || this.processing;
+        },
+    },
+    async mounted() {
+        let res = await axios.get("/info");
+        this.isEnabledEmbeddedMariaDB = res.data.isEnabledEmbeddedMariaDB;
+    },
+    methods: {
+        async submit() {
+            this.processing = true;
+
+            try {
+                let res = await axios.post("/setup-database", {
+                    dbConfig: this.dbConfig,
+                });
+
+                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;
+            }
+
+        },
+
+        async goToMainServerWhenReady() {
+            try {
+                console.log("Trying...");
+                let res = await axios.get("/api/entry-page");
+                if (res.data && res.data.type === "entryPage") {
+                    location.href = "/";
+                } else {
+                    throw new Error("not ready");
+                }
+            } catch (e) {
+                console.log("Not ready yet");
+                await sleep(2000);
+                await this.goToMainServerWhenReady();
+            }
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.btn-group {
+    label {
+        width: 200px;
+        line-height: 55px;
+        font-size: 16px;
+        font-weight: bold;
+    }
+}
+
+.form-floating {
+    > .form-select {
+        padding-left: 1.3rem;
+        padding-top: 1.525rem;
+        line-height: 1.35;
+
+        ~ label {
+            padding-left: 1.3rem;
+        }
+    }
+
+    > label {
+        padding-left: 1.3rem;
+    }
+
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
+.short {
+    width: 300px;
+}
+
+form {
+    max-width: 800px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+</style>

src/router.js

@@ -19,6 +19,7 @@ import DockerHosts from "./components/settings/Docker.vue";
 import MaintenanceDetails from "./pages/MaintenanceDetails.vue";
 import ManageMaintenance from "./pages/ManageMaintenance.vue";
 import Plugins from "./components/settings/Plugins.vue";
+import SetupDatabase from "./pages/SetupDatabase.vue";
 
 // Settings - Sub Pages
 import Appearance from "./components/settings/Appearance.vue";
@@ -163,6 +164,10 @@ const routes = [
         path: "/setup",
         component: Setup,
     },
+    {
+        path: "/setup-database",
+        component: SetupDatabase,
+    },
     {
         path: "/status-page",
         component: StatusPage,

test/backend.spec.js

@@ -235,13 +235,13 @@ describe("The function filterAndJoin", () => {
 
 describe("Test uptimeKumaServer.getClientIP()", () => {
     it("should able to get a correct client IP", async () => {
-        Database.init({
+        Database.initDataDir({
             "data-dir": "./data/test"
         });
 
-        if (! fs.existsSync(Database.path)) {
+        if (! fs.existsSync(Database.sqlitePath)) {
             log.info("server", "Copying Database");
-            fs.copyFileSync(Database.templatePath, Database.path);
+            fs.copyFileSync(Database.templatePath, Database.sqlitePath);
         }
 
         await Database.connect(true);