mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-02-22 19:45:56 +00:00
feat: generate badge from a status page
This commit is contained in:
Hiago Silva Souza
parent
7dc6191b0a
commit
5bd98353af
8 changed files with 382 additions and 85 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "uptime-kuma",
|
||||
"version": "2.0.0-beta.0",
|
||||
"version": "2.0.0-beta.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "uptime-kuma",
|
||||
"version": "2.0.0-beta.0",
|
||||
"version": "2.0.0-beta.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@grpc/grpc-js": "~1.8.22",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const { Feed } = require("feed");
|
|||
const config = require("../config");
|
||||
|
||||
const { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE, DOWN } = require("../../src/util");
|
||||
const { makeBadge } = require("badge-maker");
|
||||
|
||||
class StatusPage extends BeanModel {
|
||||
|
||||
|
|
@ -16,7 +17,7 @@ class StatusPage extends BeanModel {
|
|||
* Like this: { "test-uptime.kuma.pet": "default" }
|
||||
* @type {{}}
|
||||
*/
|
||||
static domainMappingList = { };
|
||||
static domainMappingList = {};
|
||||
|
||||
/**
|
||||
* Handle responses to RSS pages
|
||||
|
|
@ -61,6 +62,26 @@ class StatusPage extends BeanModel {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle responses to status page
|
||||
* @param {Response} response Response object
|
||||
* @param {string} slug Status page slug
|
||||
* @param {object} config Config for badge
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
static async handleStatusPageSVGResponse(response, slug, config) {
|
||||
slug = slug.replace('.svg', '')
|
||||
let statusPage = await R.findOne("status_page", " slug = ? ", [
|
||||
slug.replace('.svg', '')
|
||||
]);
|
||||
if (statusPage) {
|
||||
response.set('Content-Type', 'image/svg+xml')
|
||||
response.send(await StatusPage.renderSVG(slug, config, statusPage));
|
||||
} else {
|
||||
response.status(404).send(await StatusPage.renderSVG(slug, config, null));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SSR for RSS feed
|
||||
* @param {statusPage} statusPage object
|
||||
|
|
@ -152,6 +173,62 @@ class StatusPage extends BeanModel {
|
|||
return $.root().html();
|
||||
}
|
||||
|
||||
static async renderSVG(slug, userConfig = {}, statusPage) {
|
||||
let allowedBadgeStyles = ['flat', 'flat-square', 'for-the-badge', 'plastic', 'social'];
|
||||
if (!allowedBadgeStyles.includes(userConfig.badgeStyle)) {
|
||||
userConfig.badgeStyle = 'flat'
|
||||
}
|
||||
|
||||
// returns unknown svg
|
||||
if (statusPage === null) {
|
||||
return makeBadge({ message: userConfig.notFoundText || 'not found', color: 'red', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' })
|
||||
} else {
|
||||
|
||||
// get all heartbeats that correspond to this statusPage
|
||||
const config = await statusPage.toPublicJSON();
|
||||
|
||||
// Public Group List
|
||||
const showTags = !!statusPage.show_tags;
|
||||
|
||||
const list = await R.find("group", " public = 1 AND status_page_id = ? ORDER BY weight ", [
|
||||
statusPage.id
|
||||
]);
|
||||
|
||||
let heartbeats = [];
|
||||
|
||||
for (let groupBean of list) {
|
||||
let monitorGroup = await groupBean.toPublicJSON(showTags, config?.showCertificateExpiry);
|
||||
for (const monitor of monitorGroup.monitorList) {
|
||||
const heartbeat = await R.findOne("heartbeat", "monitor_id = ? ORDER BY time DESC", [monitor.id]);
|
||||
if (heartbeat) {
|
||||
heartbeats.push({
|
||||
...monitor,
|
||||
status: heartbeat.status,
|
||||
time: heartbeat.time
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// calculate RSS feed description
|
||||
let status = StatusPage.overallStatus(heartbeats);
|
||||
|
||||
switch (status) {
|
||||
case STATUS_PAGE_ALL_DOWN:
|
||||
return makeBadge({ message: userConfig.allDownText ?? 'all down', color: 'red', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' });
|
||||
case STATUS_PAGE_ALL_UP:
|
||||
return makeBadge({ message: userConfig.allOperationalText ?? 'all operational', color: 'green', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' });
|
||||
case STATUS_PAGE_PARTIAL_DOWN:
|
||||
return makeBadge({ message: userConfig.partialDownText ?? 'partial down', color: 'orange', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' });
|
||||
case STATUS_PAGE_MAINTENANCE:
|
||||
return makeBadge({ message: userConfig.maintenanceText || 'maintenance', color: 'yellow', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' });
|
||||
default:
|
||||
return makeBadge({ message: userConfig.unknownText || 'unknown', color: 'lightgray', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' });
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {heartbeats} heartbeats from getRSSPageData
|
||||
* @returns {number} status_page constant from util.ts
|
||||
|
|
@ -174,7 +251,7 @@ class StatusPage extends BeanModel {
|
|||
}
|
||||
}
|
||||
|
||||
if (! hasUp) {
|
||||
if (!hasUp) {
|
||||
status = STATUS_PAGE_ALL_DOWN;
|
||||
}
|
||||
|
||||
|
|
@ -231,7 +308,7 @@ class StatusPage extends BeanModel {
|
|||
for (let groupBean of list) {
|
||||
let monitorGroup = await groupBean.toPublicJSON(showTags, config?.showCertificateExpiry);
|
||||
for (const monitor of monitorGroup.monitorList) {
|
||||
const heartbeat = await R.findOne("heartbeat", "monitor_id = ? ORDER BY time DESC", [ monitor.id ]);
|
||||
const heartbeat = await R.findOne("heartbeat", "monitor_id = ? ORDER BY time DESC", [monitor.id]);
|
||||
if (heartbeat) {
|
||||
heartbeats.push({
|
||||
...monitor,
|
||||
|
|
@ -471,7 +548,7 @@ class StatusPage extends BeanModel {
|
|||
SELECT DISTINCT maintenance_id
|
||||
FROM maintenance_status_page
|
||||
WHERE status_page_id = ?
|
||||
`, [ statusPageId ]);
|
||||
`, [statusPageId]);
|
||||
|
||||
for (const maintenanceID of maintenanceIDList) {
|
||||
let maintenance = UptimeKumaServer.getInstance().getMaintenance(maintenanceID);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,13 @@ const server = UptimeKumaServer.getInstance();
|
|||
router.get("/status/:slug", cache("5 minutes"), async (request, response) => {
|
||||
let slug = request.params.slug;
|
||||
slug = slug.toLowerCase();
|
||||
await StatusPage.handleStatusPageResponse(response, server.indexHTML, slug);
|
||||
|
||||
if (slug.endsWith('.svg')) {
|
||||
await StatusPage.handleStatusPageSVGResponse(response, slug, JSON.parse(request.query.config || '{}'));
|
||||
} else {
|
||||
await StatusPage.handleStatusPageResponse(response, server.indexHTML, slug);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
router.get("/status/:slug/rss", cache("5 minutes"), async (request, response) => {
|
||||
|
|
|
|||
153
src/components/BadgeBuilderDialog.vue
Normal file
153
src/components/BadgeBuilderDialog.vue
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<form @submit.prevent="submit">
|
||||
<div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="exampleModalLabel" class="modal-title">
|
||||
{{ $t("Generate Badge") }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="badge-builder-badge-style" class="form-label">{{ $t("Badge Style") }}</label>
|
||||
<select id="badge-builder-badge-style" v-model="config.badgeStyle" class="form-select">
|
||||
<option value="flat">Flat</option>
|
||||
<option value="flat-square">Flat Square</option>
|
||||
<option value="for-the-badge">For The Badge</option>
|
||||
<option value="plastic">Plastic</option>
|
||||
<option value="social">Social</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="badge-not-found-text" class="form-label">{{ $t("Return to not found") }}</label>
|
||||
<input id="badge-not-found-text" v-model="config.notFoundText" type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="badge-operational-text" class="form-label">{{ $t("Return to operational")
|
||||
}}</label>
|
||||
<input id="badge-operational-text" v-model="config.allOperationalText" type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="badge-partial-down-text" class="form-label">{{ $t("Return to partial down")
|
||||
}}</label>
|
||||
<input id="badge-partial-down-text" v-model="config.partialDownText" type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="badge-maintenance-text" class="form-label">{{ $t("Return to maintenance")
|
||||
}}</label>
|
||||
<input id="badge-maintenance-text" v-model="config.maintenanceText" type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="badge-unknown-text" class="form-label">{{ $t("Return to unknown")
|
||||
}}</label>
|
||||
<input id="badge-unknown-text" v-model="config.unknownText" type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="Preview" v-if="slug">
|
||||
<div>{{ $t("Preview") }}</div>
|
||||
<img :src="getSvgURL(true)" class="mt-2" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" @click="copyImageURL()" class="btn btn-primary">
|
||||
<!-- <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div> -->
|
||||
{{ $t("Copy Image URL") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal } from "bootstrap";
|
||||
import { useToast } from "vue-toastification";
|
||||
import axios from 'axios';
|
||||
const toast = useToast();
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
emits: [],
|
||||
data() {
|
||||
return {
|
||||
model: null,
|
||||
slug: null,
|
||||
config: {
|
||||
badgeStyle: 'flat',
|
||||
notFoundText: this.$t('not found'),
|
||||
allDownText: this.$t('all down'),
|
||||
allOperationalText: this.$t('operational'),
|
||||
partialDownText: this.$t('partial down'),
|
||||
maintenanceText: this.$t('maintenance'),
|
||||
unknownText: this.$t('unknown')
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
|
||||
watch: {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.modal = new Modal(this.$refs.modal);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Show settings for specified notification
|
||||
* @param {number} notificationID ID of notification to show
|
||||
* @returns {void}
|
||||
*/
|
||||
show(slug) {
|
||||
this.slug = slug;
|
||||
this.modal.show();
|
||||
},
|
||||
|
||||
getSvgURL(disableCache = false) {
|
||||
return axios.defaults.baseURL + '/status/' + this.slug + '.svg?config=' + encodeURIComponent(JSON.stringify(this.config)).replace(/%5B/g, '[').replace(/%5D/g, ']') + (disableCache ? '&noCache=' + Date.now() : '');
|
||||
},
|
||||
|
||||
copyImageURL() {
|
||||
const text = this.getSvgURL();
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
toast.success(this.$t("Image url copied to clipboard."));
|
||||
}).catch(err => {
|
||||
toast.error(this.$t("Unable to copy image URL."));
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.dark {
|
||||
|
||||
.modal-dialog .form-text,
|
||||
.modal-dialog p {
|
||||
color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,6 +18,7 @@ import {
|
|||
faPlus,
|
||||
faSearch,
|
||||
faTachometerAlt,
|
||||
faTag,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faTrash,
|
||||
|
|
@ -64,6 +65,7 @@ library.add(
|
|||
faPlus,
|
||||
faSearch,
|
||||
faTachometerAlt,
|
||||
faTag,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faTrash,
|
||||
|
|
|
|||
|
|
@ -1051,5 +1051,20 @@
|
|||
"RabbitMQ Password": "RabbitMQ Password",
|
||||
"rabbitmqHelpText": "To use the monitor, you will need to enable the Management Plugin in your RabbitMQ setup. For more information, please consult the {rabitmq_documentation}.",
|
||||
"SendGrid API Key": "SendGrid API Key",
|
||||
"Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
|
||||
}
|
||||
"Separate multiple email addresses with commas": "Separate multiple email addresses with commas",
|
||||
"Generate Badge": "Generate Badge",
|
||||
"Return to not found": "Return to not found",
|
||||
"Return to operational": "Return to operational",
|
||||
"Return to partial down": "Return to partial down",
|
||||
"Return to maintenance": "Return to maintenance",
|
||||
"Return to unknown": "Return to unknown",
|
||||
"not found": "not found",
|
||||
"operational": "operational",
|
||||
"partial down": "partial down",
|
||||
"maintenance": "maintenance",
|
||||
"unknown": "unknown",
|
||||
"Preview": "Preview",
|
||||
"Copy Image URL": "Copy Image URL",
|
||||
"Image url copied to clipboard.": "Image url copied to clipboard.",
|
||||
"Unable to copy image URL.": "Unable to copy image URL."
|
||||
}
|
||||
|
|
@ -994,5 +994,20 @@
|
|||
"aboutSlackUsername": "Altera o nome de exibição do remetente da mensagem. Se quiser mencionar alguém, inclua a menção no nome amigável.",
|
||||
"Send rich messages": "Enviar mensagens ricas",
|
||||
"Host Onesender": "Servidor Onesender",
|
||||
"Token Onesender": "Chave Onesender"
|
||||
}
|
||||
"Token Onesender": "Chave Onesender",
|
||||
"Generate Badge": "Gerar Distintivo",
|
||||
"Return to not found": "Retorno para não encontrado",
|
||||
"Return to operational": "Retorno para operacional",
|
||||
"Return to partial down": "Retorno para parcialmente degradado",
|
||||
"Return to maintenance": "Retorno para em manutenção",
|
||||
"Return to unknown": "Retorno para desconhecido",
|
||||
"not found": "não encontrado",
|
||||
"operational": "operacional",
|
||||
"partial down": "parcialmente fora",
|
||||
"maintenance": "manutenção",
|
||||
"unknown": "desconhecido",
|
||||
"Preview": "Pré-visualizar",
|
||||
"Copy Image URL": "Copiar URL da imagem",
|
||||
"Image url copied to clipboard.": "URL da imagem copiada para área de transferência.",
|
||||
"Unable to copy image URL.": "Não é possível copiar o URL da imagem para área de transferência."
|
||||
}
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
<!-- Description -->
|
||||
<div class="my-3">
|
||||
<label for="description" class="form-label">{{ $t("Description") }}</label>
|
||||
<textarea id="description" v-model="config.description" class="form-control" data-testid="description-input"></textarea>
|
||||
<textarea id="description" v-model="config.description" class="form-control"
|
||||
data-testid="description-input"></textarea>
|
||||
<div class="form-text">
|
||||
{{ $t("markdownSupported") }}
|
||||
</div>
|
||||
|
|
@ -28,7 +29,8 @@
|
|||
<!-- Footer Text -->
|
||||
<div class="my-3">
|
||||
<label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label>
|
||||
<textarea id="footer-text" v-model="config.footerText" class="form-control" data-testid="footer-text-input"></textarea>
|
||||
<textarea id="footer-text" v-model="config.footerText" class="form-control"
|
||||
data-testid="footer-text-input"></textarea>
|
||||
<div class="form-text">
|
||||
{{ $t("markdownSupported") }}
|
||||
</div>
|
||||
|
|
@ -36,7 +38,8 @@
|
|||
|
||||
<div class="my-3">
|
||||
<label for="auto-refresh-interval" class="form-label">{{ $t("Refresh Interval") }}</label>
|
||||
<input id="auto-refresh-interval" v-model="config.autoRefreshInterval" type="number" class="form-control" :min="5" data-testid="refresh-interval-input">
|
||||
<input id="auto-refresh-interval" v-model="config.autoRefreshInterval" type="number"
|
||||
class="form-control" :min="5" data-testid="refresh-interval-input">
|
||||
<div class="form-text">
|
||||
{{ $t("Refresh Interval Description", [config.autoRefreshInterval]) }}
|
||||
</div>
|
||||
|
|
@ -52,40 +55,49 @@
|
|||
</div>
|
||||
|
||||
<div class="my-3 form-check form-switch">
|
||||
<input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox" data-testid="show-tags-checkbox">
|
||||
<input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox"
|
||||
data-testid="show-tags-checkbox">
|
||||
<label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
|
||||
</div>
|
||||
|
||||
<!-- Show Powered By -->
|
||||
<div class="my-3 form-check form-switch">
|
||||
<input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox" data-testid="show-powered-by-checkbox">
|
||||
<input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox"
|
||||
data-testid="show-powered-by-checkbox">
|
||||
<label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
|
||||
</div>
|
||||
|
||||
<!-- Show certificate expiry -->
|
||||
<div class="my-3 form-check form-switch">
|
||||
<input id="show-certificate-expiry" v-model="config.showCertificateExpiry" class="form-check-input" type="checkbox" data-testid="show-certificate-expiry-checkbox">
|
||||
<label class="form-check-label" for="show-certificate-expiry">{{ $t("showCertificateExpiry") }}</label>
|
||||
<input id="show-certificate-expiry" v-model="config.showCertificateExpiry" class="form-check-input"
|
||||
type="checkbox" data-testid="show-certificate-expiry-checkbox">
|
||||
<label class="form-check-label" for="show-certificate-expiry">{{ $t("showCertificateExpiry")
|
||||
}}</label>
|
||||
</div>
|
||||
|
||||
<div v-if="false" class="my-3">
|
||||
<label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon") }}</sup></label>
|
||||
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
|
||||
<label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon")
|
||||
}}</sup></label>
|
||||
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Domain Name List -->
|
||||
<div class="my-3">
|
||||
<label class="form-label">
|
||||
{{ $t("Domain Names") }}
|
||||
<button class="p-0 bg-transparent border-0" :aria-label="$t('Add a domain')" @click="addDomainField">
|
||||
<button class="p-0 bg-transparent border-0" :aria-label="$t('Add a domain')"
|
||||
@click="addDomainField">
|
||||
<font-awesome-icon icon="plus-circle" class="action text-primary" />
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<ul class="list-group domain-name-list">
|
||||
<li v-for="(domain, index) in config.domainNameList" :key="index" class="list-group-item">
|
||||
<input v-model="config.domainNameList[index]" type="text" class="no-bg domain-input" placeholder="example.com" />
|
||||
<button class="p-0 bg-transparent border-0" :aria-label="$t('Remove domain', [ domain ])" @click="removeDomain(index)">
|
||||
<input v-model="config.domainNameList[index]" type="text" class="no-bg domain-input"
|
||||
placeholder="example.com" />
|
||||
<button class="p-0 bg-transparent border-0" :aria-label="$t('Remove domain', [domain])"
|
||||
@click="removeDomain(index)">
|
||||
<font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" />
|
||||
</button>
|
||||
</li>
|
||||
|
|
@ -95,13 +107,15 @@
|
|||
<!-- Google Analytics -->
|
||||
<div class="my-3">
|
||||
<label for="googleAnalyticsTag" class="form-label">{{ $t("Google Analytics ID") }}</label>
|
||||
<input id="googleAnalyticsTag" v-model="config.googleAnalyticsId" type="text" class="form-control" data-testid="google-analytics-input">
|
||||
<input id="googleAnalyticsTag" v-model="config.googleAnalyticsId" type="text" class="form-control"
|
||||
data-testid="google-analytics-input">
|
||||
</div>
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<div class="my-3">
|
||||
<div class="mb-1">{{ $t("Custom CSS") }}</div>
|
||||
<prism-editor v-model="config.customCSS" class="css-editor" data-testid="custom-css-input" :highlight="highlighter" line-numbers></prism-editor>
|
||||
<prism-editor v-model="config.customCSS" class="css-editor" data-testid="custom-css-input"
|
||||
:highlight="highlighter" line-numbers></prism-editor>
|
||||
</div>
|
||||
|
||||
<div class="danger-zone">
|
||||
|
|
@ -127,7 +141,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Main Status Page -->
|
||||
<div :class="{ edit: enableEditMode}" class="main">
|
||||
<div :class="{ edit: enableEditMode }" class="main">
|
||||
<!-- Logo & Title -->
|
||||
<h1 class="mb-4 title-flex">
|
||||
<!-- Logo -->
|
||||
|
|
@ -138,17 +152,9 @@
|
|||
|
||||
<!-- Uploader -->
|
||||
<!-- url="/api/status-page/upload-logo" -->
|
||||
<ImageCropUpload
|
||||
v-model="showImageCropUpload"
|
||||
field="img"
|
||||
:width="128"
|
||||
:height="128"
|
||||
:langType="$i18n.locale"
|
||||
img-format="png"
|
||||
:noCircle="true"
|
||||
:noSquare="false"
|
||||
@crop-success="cropSuccess"
|
||||
/>
|
||||
<ImageCropUpload v-model="showImageCropUpload" field="img" :width="128" :height="128"
|
||||
:langType="$i18n.locale" img-format="png" :noCircle="true" :noSquare="false"
|
||||
@crop-success="cropSuccess" />
|
||||
|
||||
<!-- Title -->
|
||||
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
||||
|
|
@ -162,14 +168,20 @@
|
|||
{{ $t("Edit Status Page") }}
|
||||
</button>
|
||||
|
||||
<a href="/manage-status-page" class="btn btn-info">
|
||||
<font-awesome-icon icon="tachometer-alt" />
|
||||
<a href="/manage-status-page" class="btn btn-info me-2">
|
||||
<font-awesome-icon icon="tag" />
|
||||
{{ $t("Go to Dashboard") }}
|
||||
</a>
|
||||
|
||||
<a href='#' @click="$refs.badgeBuilderDialog.show(slug)" class="btn btn-info">
|
||||
<font-awesome-icon icon="tag" />
|
||||
{{ $t("Generate Badge") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<button class="btn btn-primary btn-add-group me-2" data-testid="create-incident-button" @click="createIncident">
|
||||
<button class="btn btn-primary btn-add-group me-2" data-testid="create-incident-button"
|
||||
@click="createIncident">
|
||||
<font-awesome-icon icon="bullhorn" />
|
||||
{{ $t("Create Incident") }}
|
||||
</button>
|
||||
|
|
@ -177,28 +189,35 @@
|
|||
</div>
|
||||
|
||||
<!-- Incident -->
|
||||
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass" data-testid="incident">
|
||||
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass"
|
||||
data-testid="incident">
|
||||
<strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
|
||||
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" data-testid="incident-title" />
|
||||
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true"
|
||||
class="alert-heading" data-testid="incident-title" />
|
||||
|
||||
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
|
||||
<Editable v-if="editIncidentMode" v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" data-testid="incident-content-editable" />
|
||||
<Editable v-if="editIncidentMode" v-model="incident.content" tag="div"
|
||||
:contenteditable="editIncidentMode" class="content" data-testid="incident-content-editable" />
|
||||
<div v-if="editIncidentMode" class="form-text">
|
||||
{{ $t("markdownSupported") }}
|
||||
</div>
|
||||
<!-- eslint-disable-next-line vue/no-v-html-->
|
||||
<div v-if="! editIncidentMode" class="content" data-testid="incident-content" v-html="incidentHTML"></div>
|
||||
<div v-if="!editIncidentMode" class="content" data-testid="incident-content" v-html="incidentHTML">
|
||||
</div>
|
||||
|
||||
<!-- Incident Date -->
|
||||
<div class="date mt-3">
|
||||
{{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
|
||||
{{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{
|
||||
dateFromNow(incident.createdDate) }})<br />
|
||||
<span v-if="incident.lastUpdatedDate">
|
||||
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
|
||||
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{
|
||||
dateFromNow(incident.lastUpdatedDate) }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="editMode" class="mt-3">
|
||||
<button v-if="editIncidentMode" class="btn btn-light me-2" data-testid="post-incident-button" @click="postIncident">
|
||||
<button v-if="editIncidentMode" class="btn btn-light me-2" data-testid="post-incident-button"
|
||||
@click="postIncident">
|
||||
<font-awesome-icon icon="bullhorn" />
|
||||
{{ $t("Post") }}
|
||||
</button>
|
||||
|
|
@ -214,16 +233,23 @@
|
|||
</button>
|
||||
|
||||
<div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
|
||||
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ $t("Style") }}: {{ $t(incident.style) }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning")
|
||||
}}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger")
|
||||
}}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary")
|
||||
}}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light")
|
||||
}}</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -270,10 +296,8 @@
|
|||
|
||||
<!-- Maintenance -->
|
||||
<template v-if="maintenanceList.length > 0">
|
||||
<div
|
||||
v-for="maintenance in maintenanceList" :key="maintenance.id"
|
||||
class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert"
|
||||
>
|
||||
<div v-for="maintenance in maintenanceList" :key="maintenance.id"
|
||||
class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert">
|
||||
<h4 class="alert-heading">{{ maintenance.title }}</h4>
|
||||
<!-- eslint-disable-next-line vue/no-v-html-->
|
||||
<div class="content" v-html="maintenanceHTML(maintenance.description)"></div>
|
||||
|
|
@ -283,9 +307,11 @@
|
|||
|
||||
<!-- Description -->
|
||||
<strong v-if="editMode">{{ $t("Description") }}:</strong>
|
||||
<Editable v-if="enableEditMode" v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" data-testid="description-editable" />
|
||||
<Editable v-if="enableEditMode" v-model="config.description" :contenteditable="editMode" tag="div"
|
||||
class="mb-4 description" data-testid="description-editable" />
|
||||
<!-- eslint-disable-next-line vue/no-v-html-->
|
||||
<div v-if="! enableEditMode" class="alert-heading p-2" data-testid="description" v-html="descriptionHTML"></div>
|
||||
<div v-if="!enableEditMode" class="alert-heading p-2" data-testid="description" v-html="descriptionHTML">
|
||||
</div>
|
||||
|
||||
<div v-if="editMode" class="mb-4">
|
||||
<div>
|
||||
|
|
@ -298,26 +324,20 @@
|
|||
<div class="mt-3">
|
||||
<div v-if="sortedMonitorList.length > 0 && loadedData">
|
||||
<label>{{ $t("Add a monitor") }}:</label>
|
||||
<VueMultiselect
|
||||
v-model="selectedMonitor"
|
||||
:options="sortedMonitorList"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:placeholder="$t('Add a monitor')"
|
||||
label="name"
|
||||
trackBy="name"
|
||||
class="mt-3"
|
||||
data-testid="monitor-select"
|
||||
>
|
||||
<VueMultiselect v-model="selectedMonitor" :options="sortedMonitorList" :multiple="false"
|
||||
:searchable="true" :placeholder="$t('Add a monitor')" label="name" trackBy="name"
|
||||
class="mt-3" data-testid="monitor-select">
|
||||
<template #option="{ option }">
|
||||
<div class="d-inline-flex">
|
||||
<span>{{ option.pathName }} <Tag v-for="tag in option.tags" :key="tag" :item="tag" :size="'sm'" /></span>
|
||||
<span>{{ option.pathName }}
|
||||
<Tag v-for="tag in option.tags" :key="tag" :item="tag" :size="'sm'" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
<div v-else class="text-center">
|
||||
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
|
||||
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -328,29 +348,35 @@
|
|||
👀 {{ $t("statusPageNothing") }}
|
||||
</div>
|
||||
|
||||
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" />
|
||||
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags"
|
||||
:show-certificate-expiry="config.showCertificateExpiry" />
|
||||
</div>
|
||||
|
||||
<footer class="mt-5 mb-4">
|
||||
<div class="custom-footer-text text-start">
|
||||
<strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
|
||||
</div>
|
||||
<Editable v-if="enableEditMode" v-model="config.footerText" tag="div" :contenteditable="enableEditMode" :noNL="false" class="alert-heading p-2" data-testid="custom-footer-editable" />
|
||||
<Editable v-if="enableEditMode" v-model="config.footerText" tag="div" :contenteditable="enableEditMode"
|
||||
:noNL="false" class="alert-heading p-2" data-testid="custom-footer-editable" />
|
||||
<!-- eslint-disable-next-line vue/no-v-html-->
|
||||
<div v-if="! enableEditMode" class="alert-heading p-2" data-testid="footer-text" v-html="footerHTML"></div>
|
||||
<div v-if="!enableEditMode" class="alert-heading p-2" data-testid="footer-text" v-html="footerHTML">
|
||||
</div>
|
||||
|
||||
<p v-if="config.showPoweredBy" data-testid="powered-by">
|
||||
{{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
||||
{{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer"
|
||||
href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma") }}</a>
|
||||
</p>
|
||||
|
||||
<div class="refresh-info mb-2">
|
||||
<div>{{ $t("Last Updated") }}: {{ lastUpdateTimeDisplay }}</div>
|
||||
<div data-testid="update-countdown-text">{{ $tc("statusPageRefreshIn", [ updateCountdownText]) }}</div>
|
||||
<div>{{ $t("Last Updated") }}: {{ lastUpdateTimeDisplay }}</div>
|
||||
<div data-testid="update-countdown-text">{{ $tc("statusPageRefreshIn", [updateCountdownText]) }}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')"
|
||||
@yes="deleteStatusPage">
|
||||
{{ $t("deleteStatusPageMsg") }}
|
||||
</Confirm>
|
||||
|
||||
|
|
@ -358,6 +384,8 @@
|
|||
{{ config.customCSS }}
|
||||
</component>
|
||||
</div>
|
||||
|
||||
<BadgeBuilderDialog ref="badgeBuilderDialog" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -383,6 +411,7 @@ import { getResBaseURL } from "../util-frontend";
|
|||
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
|
||||
import Tag from "../components/Tag.vue";
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import BadgeBuilderDialog from "../components/BadgeBuilderDialog.vue";
|
||||
|
||||
const toast = useToast();
|
||||
dayjs.extend(duration);
|
||||
|
|
@ -405,6 +434,7 @@ export default {
|
|||
PrismEditor,
|
||||
MaintenanceTime,
|
||||
Tag,
|
||||
BadgeBuilderDialog,
|
||||
VueMultiselect
|
||||
},
|
||||
|
||||
|
|
@ -471,7 +501,7 @@ export default {
|
|||
let result = [];
|
||||
|
||||
for (let id in this.$root.monitorList) {
|
||||
if (this.$root.monitorList[id] && ! (id in this.$root.publicMonitorList)) {
|
||||
if (this.$root.monitorList[id] && !(id in this.$root.publicMonitorList)) {
|
||||
let monitor = this.$root.monitorList[id];
|
||||
result.push(monitor);
|
||||
}
|
||||
|
|
@ -555,7 +585,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
if (! hasUp) {
|
||||
if (!hasUp) {
|
||||
status = STATUS_PAGE_ALL_DOWN;
|
||||
}
|
||||
|
||||
|
|
@ -723,7 +753,7 @@ export default {
|
|||
}, (this.config.autoRefreshInterval + 10) * 1000);
|
||||
|
||||
this.updateUpdateTimer();
|
||||
}).catch( function (error) {
|
||||
}).catch(function (error) {
|
||||
if (error.response.status === 404) {
|
||||
location.href = "/page-not-found";
|
||||
}
|
||||
|
|
@ -770,7 +800,7 @@ export default {
|
|||
*/
|
||||
updateHeartbeatList() {
|
||||
// If editMode, it will use the data from websocket.
|
||||
if (! this.editMode) {
|
||||
if (!this.editMode) {
|
||||
axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
|
||||
const { heartbeatList, uptimeList } = res.data;
|
||||
|
||||
|
|
@ -1267,5 +1297,4 @@ footer {
|
|||
.refresh-info {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue