Database Setup Page (#2738)
* WIP * WIP: Database setup process * Add database setup pagepull/3017/head
Louis Lam
2 years ago
committed by
GitHub
parent
db4663d6be
commit
e4183ee2b7
@ -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,
|
||||||
|
};
|
||||||
@ -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>
|
||||||
Loading…
Reference in new issue