ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-27 16:54:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[Status Page] Simplify show tags logic

Browse source
This commit is contained in:
Louis Lam 2022-03-18 17:56:46 +08:00
parent 37be7df9b0
commit aef0a66205
5 changed files with 36 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
server/model/group.js
View file

@ -3,12 +3,12 @@ const { R } = require("redbean-node");
class Group extends BeanModel {
async toPublicJSON() {
async toPublicJSON(showTags = false) {
let monitorBeanList = await this.getMonitorList();
let monitorList = [];
for (let bean of monitorBeanList) {
monitorList.push(await bean.toPublicJSON());
monitorList.push(await bean.toPublicJSON(showTags));
}
return {

18
server/model/monitor.js
View file

@ -24,18 +24,22 @@ const apicache = require("../modules/apicache");
class Monitor extends BeanModel {
/**
* Return a object that ready to parse to JSON for public
* Return an object that ready to parse to JSON for public
* Only show necessary data to public
*/
async toPublicJSON() {
return {
async toPublicJSON(showTags = false) {
let obj = {
id: this.id,
name: this.name,
};
if (showTags) {
obj.tags = await this.getTags();
}
return obj;
}
/**
* Return a object that ready to parse to JSON
* Return an object that ready to parse to JSON
*/
async toJSON() {
@ -49,7 +53,7 @@ class Monitor extends BeanModel {
notificationIDList[bean.notification_id] = true;
}
const tags = await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
const tags = await this.getTags();
return {
id: this.id,
@ -82,6 +86,10 @@ class Monitor extends BeanModel {
};
}
async getTags() {
return await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
}
/**
* Encode user and password to Base64 encoding
* for HTTP "basic" auth, as per RFC-7617

22
server/routers/api-router.js
View file

@ -113,30 +113,14 @@ router.get("/api/status-page/:slug", cache("5 minutes"), async (request, respons
// Public Group List
const publicGroupList = [];
const tagsVisible = !!statusPage.show_tags;
const showTags = !!statusPage.show_tags;
debug("Show Tags???" + showTags);
const list = await R.find("group", " public = 1 AND status_page_id = ? ORDER BY weight ", [
statusPage.id
]);
for (let groupBean of list) {
let monitorGroup = await groupBean.toPublicJSON();
if (tagsVisible) {
monitorGroup.monitorList = await Promise.all(monitorGroup.monitorList.map(async (monitor) => {
// Includes tags as an array in response, allows for tags to be displayed on public status page
const tags = await R.getAll(
`SELECT monitor_tag.monitor_id, monitor_tag.value, tag.name, tag.color
FROM monitor_tag
JOIN tag
ON monitor_tag.tag_id = tag.id
WHERE monitor_tag.monitor_id = ?`, [monitor.id]
);
return {
...monitor,
tags: tags
};
}));
}
let monitorGroup = await groupBean.toPublicJSON(showTags);
publicGroupList.push(monitorGroup);
}

5
src/components/PublicGroupList.vue
View file

@ -41,7 +41,7 @@
<Uptime :monitor="monitor.element" type="24" :pill="true" />
{{ monitor.element.name }}
</div>
<div class="tags">
<div v-if="showTags" class="tags">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
@ -76,6 +76,9 @@ export default {
type: Boolean,
required: true,
},
showTags: {
type: Boolean,
}
},
data() {
return {

50
src/pages/StatusPage.vue
View file

@ -223,7 +223,7 @@
👀 {{ $t("statusPageNothing") }}
</div>
<PublicGroupList :edit-mode="enableEditMode" />
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" />
</div>
<footer class="mt-5 mb-4">
@ -335,10 +335,6 @@ export default {
return this.config.published;
},
tagsVisible() {
return this.config.showTags;
},
logoClass() {
if (this.editMode) {
return {
@ -419,13 +415,20 @@ export default {
document.title = title;
},
"config.showTags"(value) {
this.changeTagsVisibility(value);
},
"$root.monitorList"() {
this.changeTagsVisibility(this.config.showTags);
},
let count = Object.keys(this.$root.monitorList).length;
// Since publicGroupList is getting from public rest api, monitors' tags may not present if showTags = false
if (count > 0) {
for (let group of this.$root.publicGroupList) {
for (let monitor of group.monitorList) {
if (monitor.tags === undefined && this.$root.monitorList[monitor.id]) {
monitor.tags = this.$root.monitorList[monitor.id].tags;
}
}
}
}
}
},
async created() {
@ -529,8 +532,6 @@ export default {
time = 0;
}
console.log(time);
setTimeout(() => {
location.href = "/status/" + this.config.slug;
}, time);
@ -577,29 +578,6 @@ export default {
location.href = "/status/" + this.slug;
},
changeTagsVisibility(show) {
// If Edit Mode
if (Object.keys(this.$root.monitorList).length > 0) {
// On load, the status page will not include tags if it's not enabled for security reasons
// Which means if we enable tags, it won't show in the UI until saved
// So we have this to enhance UX and load in the tags from the authenticated source instantly
this.$root.publicGroupList = this.$root.publicGroupList.map((group) => {
return {
...group,
monitorList: group.monitorList.map((monitor) => {
// We only include the tags if visible so we can reuse the logic to hide the tags on disable
return {
...monitor,
tags: show ? this.$root.monitorList[monitor.id].tags : []
};
})
};
});
}
},
/**
* Crop Success
*/