[status page] developing

This commit is contained in:
LouisLam 2021-09-13 02:26:45 +08:00
parent f47f7758f9
commit e205adfd7b
5 changed files with 69 additions and 5 deletions

View File

@ -0,0 +1,6 @@
BEGIN TRANSACTION;
alter table monitor
add public_weight BOOLEAN default 1000 not null;
COMMIT;

View File

@ -77,7 +77,8 @@
"vue-multiselect": "^3.0.0-alpha.2",
"vue-qrcode": "^1.0.0",
"vue-router": "^4.0.11",
"vue-toastification": "^2.0.0-rc.1"
"vue-toastification": "^2.0.0-rc.1",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.15.0",

View File

@ -32,6 +32,7 @@ class Database {
"patch-improve-performance.sql": true,
"patch-monitor-public.sql": true,
"patch-2fa.sql": true,
"patch-monitor-public-weight.sql": true,
}
/**

View File

@ -20,6 +20,19 @@ const version = require("../../package.json").version;
* 2 = PENDING
*/
class Monitor extends BeanModel {
/**
* Return a object that ready to parse to JSON for public
* Only show necessary data to public
*/
async toPublicJSON() {
// TODO Only show necessary
return this.toJSON();
}
/**
* Return a object that ready to parse to JSON
*/
async toJSON() {
let notificationIDList = {};

View File

@ -3,21 +3,36 @@
<h1><img src="/icon.svg" alt /> Uptime Kuma</h1>
<div v-if="hasToken" class="mt-3">
<button class="btn btn-info me-2" @click="edit">
<button v-if="!enableEditMode" class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" />
Edit Status Page
</button>
<router-link to="/dashboard" class="btn btn-info">
<button v-if="enableEditMode" class="btn btn-dark me-2" @click="leaveEditMode">
<font-awesome-icon icon="" />
Leave Edit Mode
</button>
<router-link v-if="!enableEditMode" to="/dashboard" class="btn btn-info">
<font-awesome-icon icon="tachometer-alt" />
Go to Dashboard
</router-link>
</div>
<div class="shadow-box list mt-4 p-4 overall-status">
<div class="shadow-box list p-4 overall-status mt-4">
<font-awesome-icon icon="check-circle" class="ok" /> All Systems Operational
</div>
<div v-if="showEditFeature" class="mt-4">
<VueMultiselect
v-model="selectedMonitor"
:options="allMonitorList"
:custom-label="monitorSelectorLabel"
:searchable="true"
@select="onSelectedMonitor"
></VueMultiselect>
</div>
<div class="shadow-box monitor-list mt-4">
<div v-if="Object.keys(monitorList).length === 0" class="text-center my-3">
{{ $t("No Monitors") }}
@ -45,6 +60,7 @@
</template>
<script>
import VueMultiselect from "vue-multiselect"
import { useToast } from "vue-toastification";
const toast = useToast();
@ -63,16 +79,24 @@ export default {
components: {
HeartbeatBar,
Uptime,
VueMultiselect,
},
data() {
return {
enableEditMode: false,
hasToken: false,
config: {},
monitorList: {},
selectedMonitor: null,
}
},
computed: {
allMonitorList() {
return Object.values(this.$root.monitorList);
},
showEditFeature() {
return this.enableEditMode && this.$root.socket.connected;
}
},
watch: {
@ -88,9 +112,28 @@ export default {
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
},
methods: {
edit() {
this.$root.initSocketIO(true);
this.enableEditMode = true;
},
leaveEditMode() {
this.enableEditMode = false;
},
monitorSelectorLabel(monitor) {
return `${monitor.name}`;
},
onSelectedMonitor(selectedOption, id) {
console.log(selectedOption);
console.log(id);
// TODO: emit socket cmd to set it public
// TODO: Reload monitor or add to list
}
},
}
</script>