Merge pull request #815 from Fallstop/tags-on-status

Display Monitor Tags on Status Page
This commit is contained in:
Louis Lam 2021-11-07 17:05:21 +08:00 committed by GitHub
commit f952d283c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 3 deletions

View File

@ -101,6 +101,10 @@ router.get("/api/status-page/config", async (_request, response) => {
config.statusPagePublished = true; config.statusPagePublished = true;
} }
if (! config.statusPageTags) {
config.statusPageTags = false;
}
if (! config.title) { if (! config.title) {
config.title = "Uptime Kuma"; config.title = "Uptime Kuma";
} }
@ -140,10 +144,25 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request,
try { try {
await checkPublished(); await checkPublished();
const publicGroupList = []; const publicGroupList = [];
let list = await R.find("group", " public = 1 ORDER BY weight "); const tagsVisible = (await getSettings("statusPage")).statusPageTags;
const list = await R.find("group", " public = 1 ORDER BY weight ");
for (let groupBean of list) { for (let groupBean of list) {
publicGroupList.push(await groupBean.toPublicJSON()); 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}
}));
}
publicGroupList.push(monitorGroup);
} }
response.json(publicGroupList); response.json(publicGroupList);

View File

@ -346,6 +346,10 @@ textarea.form-control {
&.active { &.active {
background-color: #cdf8f4; background-color: #cdf8f4;
} }
.tags {
// Removes margin to line up tags list with uptime percentage
margin-left: -0.25rem;
}
} }
} }

View File

@ -41,6 +41,9 @@
<Uptime :monitor="monitor.element" type="24" :pill="true" /> <Uptime :monitor="monitor.element" type="24" :pill="true" />
{{ monitor.element.name }} {{ monitor.element.name }}
</div> </div>
<div class="tags">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div> </div>
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4"> <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<HeartbeatBar size="small" :monitor-id="monitor.element.id" /> <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
@ -59,12 +62,14 @@
import Draggable from "vuedraggable"; import Draggable from "vuedraggable";
import HeartbeatBar from "./HeartbeatBar.vue"; import HeartbeatBar from "./HeartbeatBar.vue";
import Uptime from "./Uptime.vue"; import Uptime from "./Uptime.vue";
import Tag from "./Tag.vue";
export default { export default {
components: { components: {
Draggable, Draggable,
HeartbeatBar, HeartbeatBar,
Uptime, Uptime,
Tag,
}, },
props: { props: {
editMode: { editMode: {

View File

@ -77,6 +77,17 @@
<font-awesome-icon icon="save" /> <font-awesome-icon icon="save" />
{{ $t("Switch to Dark Theme") }} {{ $t("Switch to Dark Theme") }}
</button> </button>
<button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
<template v-if="tagsVisible">
<font-awesome-icon icon="eye-slash" />
{{ $t("Hide Tags") }}
</template>
<template v-else>
<font-awesome-icon icon="eye" />
{{ $t("Show Tags") }}
</template>
</button>
</div> </div>
</div> </div>
@ -292,6 +303,10 @@ export default {
return this.config.statusPageTheme; return this.config.statusPageTheme;
}, },
tagsVisible() {
return this.config.statusPageTags
},
logoClass() { logoClass() {
if (this.editMode) { if (this.editMode) {
return { return {
@ -472,6 +487,25 @@ export default {
changeTheme(name) { changeTheme(name) {
this.config.statusPageTheme = name; this.config.statusPageTheme = name;
}, },
changeTagsVisibilty(newState) {
this.config.statusPageTags = newState;
// 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: newState ? this.$root.monitorList[monitor.id].tags : []
}
})
}
});
},
/** /**
* Crop Success * Crop Success