[status page] developing

pull/124/head
LouisLam 3 years ago
parent f47f7758f9
commit e205adfd7b

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

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

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

@ -20,6 +20,19 @@ const version = require("../../package.json").version;
* 2 = PENDING * 2 = PENDING
*/ */
class Monitor extends BeanModel { 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() { async toJSON() {
let notificationIDList = {}; let notificationIDList = {};

@ -3,21 +3,36 @@
<h1><img src="/icon.svg" alt /> Uptime Kuma</h1> <h1><img src="/icon.svg" alt /> Uptime Kuma</h1>
<div v-if="hasToken" class="mt-3"> <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" /> <font-awesome-icon icon="edit" />
Edit Status Page Edit Status Page
</button> </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" /> <font-awesome-icon icon="tachometer-alt" />
Go to Dashboard Go to Dashboard
</router-link> </router-link>
</div> </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 <font-awesome-icon icon="check-circle" class="ok" /> All Systems Operational
</div> </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 class="shadow-box monitor-list mt-4">
<div v-if="Object.keys(monitorList).length === 0" class="text-center my-3"> <div v-if="Object.keys(monitorList).length === 0" class="text-center my-3">
{{ $t("No Monitors") }} {{ $t("No Monitors") }}
@ -45,6 +60,7 @@
</template> </template>
<script> <script>
import VueMultiselect from "vue-multiselect"
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
const toast = useToast(); const toast = useToast();
@ -63,16 +79,24 @@ export default {
components: { components: {
HeartbeatBar, HeartbeatBar,
Uptime, Uptime,
VueMultiselect,
}, },
data() { data() {
return { return {
enableEditMode: false,
hasToken: false, hasToken: false,
config: {}, config: {},
monitorList: {}, monitorList: {},
selectedMonitor: null,
} }
}, },
computed: { computed: {
allMonitorList() {
return Object.values(this.$root.monitorList);
},
showEditFeature() {
return this.enableEditMode && this.$root.socket.connected;
}
}, },
watch: { watch: {
@ -88,9 +112,28 @@ export default {
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data; this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
}, },
methods: { methods: {
edit() { edit() {
this.$root.initSocketIO(true); 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> </script>

Loading…
Cancel
Save