ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-02-23 03:55:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: lint problems

Browse source
This commit is contained in:
Hiago Silva Souza 2025-01-25 00:36:59 -03:00
parent 5bd98353af
commit a9e59fded6
4 changed files with 228 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
server/model/status_page.js
View file

@ -63,19 +63,19 @@ class StatusPage extends BeanModel {
} }
/** /**
* Handle responses to status page * Generate SVG Status
* @param {Response} response Response object * @param {response} response express response
* @param {string} slug Status page slug * @param {slug} slug from router
* @param {object} config Config for badge * @param {config} config config for the svg
* @returns {Promise<void>} * @returns {Promise<string>} returns a svg file
*/ */
static async handleStatusPageSVGResponse(response, slug, config) { static async handleStatusPageSVGResponse(response, slug, config) {
slug = slug.replace('.svg', '') slug = slug.replace(".svg", "");
let statusPage = await R.findOne("status_page", " slug = ? ", [ let statusPage = await R.findOne("status_page", " slug = ? ", [
slug.replace('.svg', '') slug.replace(".svg", "")
]); ]);
if (statusPage) { if (statusPage) {
response.set('Content-Type', 'image/svg+xml') response.set("Content-Type", "image/svg+xml");
response.send(await StatusPage.renderSVG(slug, config, statusPage)); response.send(await StatusPage.renderSVG(slug, config, statusPage));
} else { } else {
response.status(404).send(await StatusPage.renderSVG(slug, config, null)); response.status(404).send(await StatusPage.renderSVG(slug, config, null));
@ -173,15 +173,28 @@ class StatusPage extends BeanModel {
return $.root().html(); return $.root().html();
} }
/**
* render SVG file
* @param {slug} slug from router
* @param {userConfig} userConfig generated by user
* @param {statusPage} statusPage object
* @returns {Promise<string>} a SVG string
*/
static async renderSVG(slug, userConfig = {}, statusPage) { static async renderSVG(slug, userConfig = {}, statusPage) {
let allowedBadgeStyles = ['flat', 'flat-square', 'for-the-badge', 'plastic', 'social']; let allowedBadgeStyles = [ "flat", "flat-square", "for-the-badge", "plastic", "social" ];
if (!allowedBadgeStyles.includes(userConfig.badgeStyle)) { if (!allowedBadgeStyles.includes(userConfig.badgeStyle)) {
userConfig.badgeStyle = 'flat' userConfig.badgeStyle = "flat";
} }
// returns unknown svg // returns unknown svg
if (statusPage === null) { if (statusPage === null) {
return makeBadge({ message: userConfig.notFoundText || 'not found', color: 'red', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' }) return makeBadge({
message: userConfig.notFoundText || "not found",
color: "red",
style: userConfig.badgeStyle,
label: slug,
labelColor: "gray"
});
} else { } else {
// get all heartbeats that correspond to this statusPage // get all heartbeats that correspond to this statusPage
@ -199,7 +212,7 @@ class StatusPage extends BeanModel {
for (let groupBean of list) { for (let groupBean of list) {
let monitorGroup = await groupBean.toPublicJSON(showTags, config?.showCertificateExpiry); let monitorGroup = await groupBean.toPublicJSON(showTags, config?.showCertificateExpiry);
for (const monitor of monitorGroup.monitorList) { 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) { if (heartbeat) {
heartbeats.push({ heartbeats.push({
...monitor, ...monitor,
@ -215,15 +228,45 @@ class StatusPage extends BeanModel {
switch (status) { switch (status) {
case STATUS_PAGE_ALL_DOWN: case STATUS_PAGE_ALL_DOWN:
return makeBadge({ message: userConfig.allDownText ?? 'all down', color: 'red', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' }); return makeBadge({
message: userConfig.allDownText ?? "all down",
color: "red",
style: userConfig.badgeStyle,
label: slug,
labelColor: "gray"
});
case STATUS_PAGE_ALL_UP: case STATUS_PAGE_ALL_UP:
return makeBadge({ message: userConfig.allOperationalText ?? 'all operational', color: 'green', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' }); return makeBadge({
message: userConfig.allOperationalText ?? "all operational",
color: "green",
style: userConfig.badgeStyle,
label: slug,
labelColor: "gray"
});
case STATUS_PAGE_PARTIAL_DOWN: case STATUS_PAGE_PARTIAL_DOWN:
return makeBadge({ message: userConfig.partialDownText ?? 'partial down', color: 'orange', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' }); return makeBadge({
message: userConfig.partialDownText ?? "partial down",
color: "orange",
style: userConfig.badgeStyle,
label: slug,
labelColor: "gray"
});
case STATUS_PAGE_MAINTENANCE: case STATUS_PAGE_MAINTENANCE:
return makeBadge({ message: userConfig.maintenanceText || 'maintenance', color: 'yellow', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' }); return makeBadge({
message: userConfig.maintenanceText || "maintenance",
color: "yellow",
style: userConfig.badgeStyle,
label: slug,
labelColor: "gray"
});
default: default:
return makeBadge({ message: userConfig.unknownText || 'unknown', color: 'lightgray', style: userConfig.badgeStyle, label: slug, labelColor: 'gray' }); return makeBadge({
message: userConfig.unknownText || "unknown",
color: "lightgray",
style: userConfig.badgeStyle,
label: slug,
labelColor: "gray"
});
} }
} }
@ -308,7 +351,7 @@ class StatusPage extends BeanModel {
for (let groupBean of list) { for (let groupBean of list) {
let monitorGroup = await groupBean.toPublicJSON(showTags, config?.showCertificateExpiry); let monitorGroup = await groupBean.toPublicJSON(showTags, config?.showCertificateExpiry);
for (const monitor of monitorGroup.monitorList) { 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) { if (heartbeat) {
heartbeats.push({ heartbeats.push({
...monitor, ...monitor,
@ -548,7 +591,7 @@ class StatusPage extends BeanModel {
SELECT DISTINCT maintenance_id SELECT DISTINCT maintenance_id
FROM maintenance_status_page FROM maintenance_status_page
WHERE status_page_id = ? WHERE status_page_id = ?
`, [statusPageId]); `, [ statusPageId ]);
for (const maintenanceID of maintenanceIDList) { for (const maintenanceID of maintenanceIDList) {
let maintenance = UptimeKumaServer.getInstance().getMaintenance(maintenanceID); let maintenance = UptimeKumaServer.getInstance().getMaintenance(maintenanceID);

4
server/routers/status-page-router.js
View file

@ -17,8 +17,8 @@ router.get("/status/:slug", cache("5 minutes"), async (request, response) => {
let slug = request.params.slug; let slug = request.params.slug;
slug = slug.toLowerCase(); slug = slug.toLowerCase();
if (slug.endsWith('.svg')) { if (slug.endsWith(".svg")) {
await StatusPage.handleStatusPageSVGResponse(response, slug, JSON.parse(request.query.config || '{}')); await StatusPage.handleStatusPageSVGResponse(response, slug, JSON.parse(request.query.config || "{}"));
} else { } else {
await StatusPage.handleStatusPageResponse(response, server.indexHTML, slug); await StatusPage.handleStatusPageResponse(response, server.indexHTML, slug);
} }

70
src/components/BadgeBuilderDialog.vue
View file

@ -23,50 +23,56 @@
<div class="mb-3"> <div class="mb-3">
<label for="badge-not-found-text" class="form-label">{{ $t("Return to not found") }}</label> <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" <input
class="form-control"> id="badge-not-found-text" v-model="config.notFoundText" type="text"
class="form-control"
>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="badge-operational-text" class="form-label">{{ $t("Return to operational") <label for="badge-operational-text" class="form-label">{{ $t("Return to operational")
}}</label> }}</label>
<input id="badge-operational-text" v-model="config.allOperationalText" type="text" <input
class="form-control"> id="badge-operational-text" v-model="config.allOperationalText" type="text"
class="form-control"
>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="badge-partial-down-text" class="form-label">{{ $t("Return to partial down") <label for="badge-partial-down-text" class="form-label">{{ $t("Return to partial down")
}}</label> }}</label>
<input id="badge-partial-down-text" v-model="config.partialDownText" type="text" <input
class="form-control"> id="badge-partial-down-text" v-model="config.partialDownText" type="text"
class="form-control"
>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="badge-maintenance-text" class="form-label">{{ $t("Return to maintenance") <label for="badge-maintenance-text" class="form-label">{{ $t("Return to maintenance")
}}</label> }}</label>
<input id="badge-maintenance-text" v-model="config.maintenanceText" type="text" <input
class="form-control"> id="badge-maintenance-text" v-model="config.maintenanceText" type="text"
class="form-control"
>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="badge-unknown-text" class="form-label">{{ $t("Return to unknown") <label for="badge-unknown-text" class="form-label">{{ $t("Return to unknown")
}}</label> }}</label>
<input id="badge-unknown-text" v-model="config.unknownText" type="text" <input
class="form-control"> id="badge-unknown-text" v-model="config.unknownText" type="text"
class="form-control"
>
</div> </div>
<div class="Preview" v-if="slug"> <div v-if="slug" class="Preview">
<div>{{ $t("Preview") }}</div> <div>{{ $t("Preview") }}</div>
<img :src="getSvgURL(true)" class="mt-2" /> <img :src="getSvgURL(true)" class="mt-2" />
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" @click="copyImageURL()" class="btn btn-primary"> <button type="button" class="btn btn-primary" @click="copyImageURL()">
<!-- <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div> --> <!-- <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div> -->
{{ $t("Copy Image URL") }} {{ $t("Copy Image URL") }}
</button> </button>
@ -75,13 +81,12 @@
</div> </div>
</div> </div>
</form> </form>
</template> </template>
<script> <script>
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
import axios from 'axios'; import axios from "axios";
const toast = useToast(); const toast = useToast();
export default { export default {
@ -93,13 +98,13 @@ export default {
model: null, model: null,
slug: null, slug: null,
config: { config: {
badgeStyle: 'flat', badgeStyle: "flat",
notFoundText: this.$t('not found'), notFoundText: this.$t("not found"),
allDownText: this.$t('all down'), allDownText: this.$t("all down"),
allOperationalText: this.$t('operational'), allOperationalText: this.$t("operational"),
partialDownText: this.$t('partial down'), partialDownText: this.$t("partial down"),
maintenanceText: this.$t('maintenance'), maintenanceText: this.$t("maintenance"),
unknownText: this.$t('unknown') unknownText: this.$t("unknown")
} }
}; };
}, },
@ -114,18 +119,13 @@ export default {
this.modal = new Modal(this.$refs.modal); this.modal = new Modal(this.$refs.modal);
}, },
methods: { methods: {
/**
* Show settings for specified notification
* @param {number} notificationID ID of notification to show
* @returns {void}
*/
show(slug) { show(slug) {
this.slug = slug; this.slug = slug;
this.modal.show(); this.modal.show();
}, },
getSvgURL(disableCache = false) { 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() : ''); 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() { copyImageURL() {

195
src/pages/StatusPage.vue
View file

@ -19,8 +19,10 @@
<!-- Description --> <!-- Description -->
<div class="my-3"> <div class="my-3">
<label for="description" class="form-label">{{ $t("Description") }}</label> <label for="description" class="form-label">{{ $t("Description") }}</label>
<textarea id="description" v-model="config.description" class="form-control" <textarea
data-testid="description-input"></textarea> id="description" v-model="config.description" class="form-control"
data-testid="description-input"
></textarea>
<div class="form-text"> <div class="form-text">
{{ $t("markdownSupported") }} {{ $t("markdownSupported") }}
</div> </div>
@ -29,8 +31,10 @@
<!-- Footer Text --> <!-- Footer Text -->
<div class="my-3"> <div class="my-3">
<label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label> <label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label>
<textarea id="footer-text" v-model="config.footerText" class="form-control" <textarea
data-testid="footer-text-input"></textarea> id="footer-text" v-model="config.footerText" class="form-control"
data-testid="footer-text-input"
></textarea>
<div class="form-text"> <div class="form-text">
{{ $t("markdownSupported") }} {{ $t("markdownSupported") }}
</div> </div>
@ -38,8 +42,10 @@
<div class="my-3"> <div class="my-3">
<label for="auto-refresh-interval" class="form-label">{{ $t("Refresh Interval") }}</label> <label for="auto-refresh-interval" class="form-label">{{ $t("Refresh Interval") }}</label>
<input id="auto-refresh-interval" v-model="config.autoRefreshInterval" type="number" <input
class="form-control" :min="5" data-testid="refresh-interval-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"> <div class="form-text">
{{ $t("Refresh Interval Description", [config.autoRefreshInterval]) }} {{ $t("Refresh Interval Description", [config.autoRefreshInterval]) }}
</div> </div>
@ -55,49 +61,63 @@
</div> </div>
<div class="my-3 form-check form-switch"> <div class="my-3 form-check form-switch">
<input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox" <input
data-testid="show-tags-checkbox"> 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> <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
</div> </div>
<!-- Show Powered By --> <!-- Show Powered By -->
<div class="my-3 form-check form-switch"> <div class="my-3 form-check form-switch">
<input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox" <input
data-testid="show-powered-by-checkbox"> 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> <label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
</div> </div>
<!-- Show certificate expiry --> <!-- Show certificate expiry -->
<div class="my-3 form-check form-switch"> <div class="my-3 form-check form-switch">
<input id="show-certificate-expiry" v-model="config.showCertificateExpiry" class="form-check-input" <input
type="checkbox" data-testid="show-certificate-expiry-checkbox"> 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 class="form-check-label" for="show-certificate-expiry">{{ $t("showCertificateExpiry")
}}</label> }}</label>
</div> </div>
<div v-if="false" class="my-3"> <div v-if="false" class="my-3">
<label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon") <label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon")
}}</sup></label> }}</sup></label>
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" <input
class="form-control"> id="password" v-model="config.password" disabled type="password" autocomplete="new-password"
class="form-control"
>
</div> </div>
<!-- Domain Name List --> <!-- Domain Name List -->
<div class="my-3"> <div class="my-3">
<label class="form-label"> <label class="form-label">
{{ $t("Domain Names") }} {{ $t("Domain Names") }}
<button class="p-0 bg-transparent border-0" :aria-label="$t('Add a domain')" <button
@click="addDomainField"> 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" /> <font-awesome-icon icon="plus-circle" class="action text-primary" />
</button> </button>
</label> </label>
<ul class="list-group domain-name-list"> <ul class="list-group domain-name-list">
<li v-for="(domain, index) in config.domainNameList" :key="index" class="list-group-item"> <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" <input
placeholder="example.com" /> v-model="config.domainNameList[index]" type="text" class="no-bg domain-input"
<button class="p-0 bg-transparent border-0" :aria-label="$t('Remove domain', [domain])" placeholder="example.com"
@click="removeDomain(index)"> />
<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" /> <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" />
</button> </button>
</li> </li>
@ -107,15 +127,19 @@
<!-- Google Analytics --> <!-- Google Analytics -->
<div class="my-3"> <div class="my-3">
<label for="googleAnalyticsTag" class="form-label">{{ $t("Google Analytics ID") }}</label> <label for="googleAnalyticsTag" class="form-label">{{ $t("Google Analytics ID") }}</label>
<input id="googleAnalyticsTag" v-model="config.googleAnalyticsId" type="text" class="form-control" <input
data-testid="google-analytics-input"> id="googleAnalyticsTag" v-model="config.googleAnalyticsId" type="text" class="form-control"
data-testid="google-analytics-input"
>
</div> </div>
<!-- Custom CSS --> <!-- Custom CSS -->
<div class="my-3"> <div class="my-3">
<div class="mb-1">{{ $t("Custom CSS") }}</div> <div class="mb-1">{{ $t("Custom CSS") }}</div>
<prism-editor v-model="config.customCSS" class="css-editor" data-testid="custom-css-input" <prism-editor
:highlight="highlighter" line-numbers></prism-editor> v-model="config.customCSS" class="css-editor" data-testid="custom-css-input"
:highlight="highlighter" line-numbers
></prism-editor>
</div> </div>
<div class="danger-zone"> <div class="danger-zone">
@ -152,9 +176,11 @@
<!-- Uploader --> <!-- Uploader -->
<!-- url="/api/status-page/upload-logo" --> <!-- url="/api/status-page/upload-logo" -->
<ImageCropUpload v-model="showImageCropUpload" field="img" :width="128" :height="128" <ImageCropUpload
v-model="showImageCropUpload" field="img" :width="128" :height="128"
:langType="$i18n.locale" img-format="png" :noCircle="true" :noSquare="false" :langType="$i18n.locale" img-format="png" :noCircle="true" :noSquare="false"
@crop-success="cropSuccess" /> @crop-success="cropSuccess"
/>
<!-- Title --> <!-- Title -->
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" /> <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
@ -173,15 +199,17 @@
{{ $t("Go to Dashboard") }} {{ $t("Go to Dashboard") }}
</a> </a>
<a href='#' @click="$refs.badgeBuilderDialog.show(slug)" class="btn btn-info"> <a href="#" class="btn btn-info" @click="$refs.badgeBuilderDialog.show(slug)">
<font-awesome-icon icon="tag" /> <font-awesome-icon icon="tag" />
{{ $t("Generate Badge") }} {{ $t("Generate Badge") }}
</a> </a>
</div> </div>
<div v-else> <div v-else>
<button class="btn btn-primary btn-add-group me-2" data-testid="create-incident-button" <button
@click="createIncident"> class="btn btn-primary btn-add-group me-2" data-testid="create-incident-button"
@click="createIncident"
>
<font-awesome-icon icon="bullhorn" /> <font-awesome-icon icon="bullhorn" />
{{ $t("Create Incident") }} {{ $t("Create Incident") }}
</button> </button>
@ -189,15 +217,21 @@
</div> </div>
<!-- Incident --> <!-- Incident -->
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass" <div
data-testid="incident"> 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> <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" <Editable
class="alert-heading" data-testid="incident-title" /> v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true"
class="alert-heading" data-testid="incident-title"
/>
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong> <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
<Editable v-if="editIncidentMode" v-model="incident.content" tag="div" <Editable
:contenteditable="editIncidentMode" class="content" data-testid="incident-content-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"> <div v-if="editIncidentMode" class="form-text">
{{ $t("markdownSupported") }} {{ $t("markdownSupported") }}
</div> </div>
@ -216,8 +250,10 @@
</div> </div>
<div v-if="editMode" class="mt-3"> <div v-if="editMode" class="mt-3">
<button v-if="editIncidentMode" class="btn btn-light me-2" data-testid="post-incident-button" <button
@click="postIncident"> v-if="editIncidentMode" class="btn btn-light me-2" data-testid="post-incident-button"
@click="postIncident"
>
<font-awesome-icon icon="bullhorn" /> <font-awesome-icon icon="bullhorn" />
{{ $t("Post") }} {{ $t("Post") }}
</button> </button>
@ -233,22 +269,34 @@
</button> </button>
<div v-if="editIncidentMode" class="dropdown d-inline-block me-2"> <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" <button
data-bs-toggle="dropdown" aria-expanded="false"> id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false"
>
{{ $t("Style") }}: {{ $t(incident.style) }} {{ $t("Style") }}: {{ $t(incident.style) }}
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a> <li>
<a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a>
</li> </li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") <li>
}}</a></li> <a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning")
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a>
}}</a></li> </li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") <li>
}}</a></li> <a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger")
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a>
}}</a></li> </li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a> <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>
</ul> </ul>
</div> </div>
@ -296,8 +344,10 @@
<!-- Maintenance --> <!-- Maintenance -->
<template v-if="maintenanceList.length > 0"> <template v-if="maintenanceList.length > 0">
<div v-for="maintenance in maintenanceList" :key="maintenance.id" <div
class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert"> 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> <h4 class="alert-heading">{{ maintenance.title }}</h4>
<!-- eslint-disable-next-line vue/no-v-html--> <!-- eslint-disable-next-line vue/no-v-html-->
<div class="content" v-html="maintenanceHTML(maintenance.description)"></div> <div class="content" v-html="maintenanceHTML(maintenance.description)"></div>
@ -307,8 +357,10 @@
<!-- Description --> <!-- Description -->
<strong v-if="editMode">{{ $t("Description") }}:</strong> <strong v-if="editMode">{{ $t("Description") }}:</strong>
<Editable v-if="enableEditMode" v-model="config.description" :contenteditable="editMode" tag="div" <Editable
class="mb-4 description" data-testid="description-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--> <!-- eslint-disable-next-line vue/no-v-html-->
<div v-if="!enableEditMode" class="alert-heading p-2" data-testid="description" v-html="descriptionHTML"> <div v-if="!enableEditMode" class="alert-heading p-2" data-testid="description" v-html="descriptionHTML">
</div> </div>
@ -324,9 +376,11 @@
<div class="mt-3"> <div class="mt-3">
<div v-if="sortedMonitorList.length > 0 && loadedData"> <div v-if="sortedMonitorList.length > 0 && loadedData">
<label>{{ $t("Add a monitor") }}:</label> <label>{{ $t("Add a monitor") }}:</label>
<VueMultiselect v-model="selectedMonitor" :options="sortedMonitorList" :multiple="false" <VueMultiselect
v-model="selectedMonitor" :options="sortedMonitorList" :multiple="false"
:searchable="true" :placeholder="$t('Add a monitor')" label="name" trackBy="name" :searchable="true" :placeholder="$t('Add a monitor')" label="name" trackBy="name"
class="mt-3" data-testid="monitor-select"> class="mt-3" data-testid="monitor-select"
>
<template #option="{ option }"> <template #option="{ option }">
<div class="d-inline-flex"> <div class="d-inline-flex">
<span>{{ option.pathName }} <span>{{ option.pathName }}
@ -348,35 +402,44 @@
👀 {{ $t("statusPageNothing") }} 👀 {{ $t("statusPageNothing") }}
</div> </div>
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" <PublicGroupList
:show-certificate-expiry="config.showCertificateExpiry" /> :edit-mode="enableEditMode" :show-tags="config.showTags"
:show-certificate-expiry="config.showCertificateExpiry"
/>
</div> </div>
<footer class="mt-5 mb-4"> <footer class="mt-5 mb-4">
<div class="custom-footer-text text-start"> <div class="custom-footer-text text-start">
<strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong> <strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
</div> </div>
<Editable v-if="enableEditMode" v-model="config.footerText" tag="div" :contenteditable="enableEditMode" <Editable
:noNL="false" class="alert-heading p-2" data-testid="custom-footer-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--> <!-- 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 v-if="!enableEditMode" class="alert-heading p-2" data-testid="footer-text" v-html="footerHTML">
</div> </div>
<p v-if="config.showPoweredBy" data-testid="powered-by"> <p v-if="config.showPoweredBy" data-testid="powered-by">
{{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer" {{ $t("Powered by") }} <a
href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma") }}</a> target="_blank" rel="noopener noreferrer"
href="https://github.com/louislam/uptime-kuma"
>{{ $t("Uptime Kuma") }}</a>
</p> </p>
<div class="refresh-info mb-2"> <div class="refresh-info mb-2">
<div>{{ $t("Last Updated") }}: {{ lastUpdateTimeDisplay }}</div> <div>{{ $t("Last Updated") }}: {{ lastUpdateTimeDisplay }}</div>
<div data-testid="update-countdown-text">{{ $tc("statusPageRefreshIn", [updateCountdownText]) }} <div data-testid="update-countdown-text">
{{ $tc("statusPageRefreshIn", [updateCountdownText]) }}
</div> </div>
</div> </div>
</footer> </footer>
</div> </div>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" <Confirm
@yes="deleteStatusPage"> ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')"
@yes="deleteStatusPage"
>
{{ $t("deleteStatusPageMsg") }} {{ $t("deleteStatusPageMsg") }}
</Confirm> </Confirm>