mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-09-28 01:49:19 +08:00
Merge branch 'master' into feature/add-channel-notification-for-slack
This commit is contained in:
duane
GitHub
@@ -48,15 +48,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{ $t("Generate") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{ $t("Generate") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
299
src/components/BadgeGeneratorDialog.vue
Normal file
299
src/components/BadgeGeneratorDialog.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
{{ $t("Badge Generator", [monitor.name]) }}
|
||||
</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="type" class="form-label">{{ $t("Badge Type") }}</label>
|
||||
<select id="type" v-model="badge.type" class="form-select">
|
||||
<option value="status">status</option>
|
||||
<option value="uptime">uptime</option>
|
||||
<option value="ping">ping</option>
|
||||
<option value="avg-response">avg-response</option>
|
||||
<option value="cert-exp">cert-exp</option>
|
||||
<option value="response">response</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
|
||||
<label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
|
||||
<input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
|
||||
<label for="label" class="form-label">{{ $t("Badge Label") }}</label>
|
||||
<input id="label" v-model="badge.label" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
|
||||
<label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
|
||||
<input id="prefix" v-model="badge.prefix" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
|
||||
<label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
|
||||
<input id="suffix" v-model="badge.suffix" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
|
||||
<label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
|
||||
<input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
|
||||
<label for="color" class="form-label">{{ $t("Badge Color") }}</label>
|
||||
<input id="color" v-model="badge.color" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
|
||||
<label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
|
||||
<input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
|
||||
<label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
|
||||
<input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
|
||||
<label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
|
||||
<input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
|
||||
<label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
|
||||
<input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
|
||||
<label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
|
||||
<input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
|
||||
<label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
|
||||
<input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
|
||||
<label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
|
||||
<input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
|
||||
<label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
|
||||
<input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
|
||||
<label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
|
||||
<input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="style" class="form-label">{{ $t("Badge Style") }}</label>
|
||||
<select id="style" v-model="badge.style" class="form-select">
|
||||
<option value="plastic">plastic</option>
|
||||
<option value="flat">flat</option>
|
||||
<option value="flat-square">flat-square</option>
|
||||
<option value="for-the-badge">for-the-badge</option>
|
||||
<option value="social">social</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
|
||||
<input id="value" v-model="badge.value" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="my-3">
|
||||
<label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
|
||||
<CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
|
||||
{{ $t("Close") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Modal } from "bootstrap";
|
||||
import CopyableInput from "./CopyableInput.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CopyableInput
|
||||
},
|
||||
props: {},
|
||||
emits: [],
|
||||
data() {
|
||||
return {
|
||||
model: null,
|
||||
processing: false,
|
||||
monitor: {
|
||||
id: null,
|
||||
name: null,
|
||||
},
|
||||
badge: {
|
||||
type: "status",
|
||||
duration: null,
|
||||
label: null,
|
||||
prefix: null,
|
||||
suffix: null,
|
||||
labelColor: null,
|
||||
color: null,
|
||||
labelPrefix: null,
|
||||
labelSuffix: null,
|
||||
upColor: null,
|
||||
downColor: null,
|
||||
pendingColor: null,
|
||||
maintenanceColor: null,
|
||||
warnColor: null,
|
||||
warnDays: null,
|
||||
downDays: null,
|
||||
style: "flat",
|
||||
value: null,
|
||||
},
|
||||
parameters: {
|
||||
status: [
|
||||
"upLabel",
|
||||
"downLabel",
|
||||
"pendingLabel",
|
||||
"maintenanceLabel",
|
||||
"upColor",
|
||||
"downColor",
|
||||
"pendingColor",
|
||||
"maintenanceColor",
|
||||
],
|
||||
uptime: [
|
||||
"duration",
|
||||
"labelPrefix",
|
||||
"labelSuffix",
|
||||
"prefix",
|
||||
"suffix",
|
||||
"color",
|
||||
"labelColor",
|
||||
],
|
||||
ping: [
|
||||
"duration",
|
||||
"labelPrefix",
|
||||
"labelSuffix",
|
||||
"prefix",
|
||||
"suffix",
|
||||
"color",
|
||||
"labelColor",
|
||||
],
|
||||
"avg-response": [
|
||||
"duration",
|
||||
"labelPrefix",
|
||||
"labelSuffix",
|
||||
"prefix",
|
||||
"suffix",
|
||||
"color",
|
||||
"labelColor",
|
||||
],
|
||||
"cert-exp": [
|
||||
"labelPrefix",
|
||||
"labelSuffix",
|
||||
"prefix",
|
||||
"suffix",
|
||||
"upColor",
|
||||
"warnColor",
|
||||
"downColor",
|
||||
"warnDays",
|
||||
"downDays",
|
||||
"labelColor",
|
||||
],
|
||||
response: [
|
||||
"labelPrefix",
|
||||
"labelSuffix",
|
||||
"prefix",
|
||||
"suffix",
|
||||
"color",
|
||||
"labelColor",
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
badgeURL() {
|
||||
if (!this.monitor.id || !this.badge.type) {
|
||||
return;
|
||||
}
|
||||
let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type;
|
||||
|
||||
let parameterList = {};
|
||||
|
||||
for (let parameter of this.parameters[this.badge.type] || []) {
|
||||
if (parameter === "duration" && this.badge.duration) {
|
||||
badgeURL += "/" + this.badge.duration;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (this.badge[parameter]) {
|
||||
parameterList[parameter] = this.badge[parameter];
|
||||
}
|
||||
}
|
||||
|
||||
for (let parameter of [ "label", "style", "value" ]) {
|
||||
if (parameter === "style" && this.badge.style === "flat") {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (this.badge[parameter]) {
|
||||
parameterList[parameter] = this.badge[parameter];
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(parameterList).length > 0) {
|
||||
return badgeURL + "?" + new URLSearchParams(parameterList);
|
||||
}
|
||||
|
||||
return badgeURL;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.BadgeGeneratorModal = new Modal(this.$refs.BadgeGeneratorModal);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Setting monitor
|
||||
* @param {number} monitorId ID of monitor
|
||||
* @param {string} monitorName Name of monitor
|
||||
*/
|
||||
show(monitorId, monitorName) {
|
||||
this.monitor = {
|
||||
id: monitorId,
|
||||
name: monitorName,
|
||||
};
|
||||
|
||||
this.BadgeGeneratorModal.show();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.dark {
|
||||
.modal-dialog .form-text, .modal-dialog p {
|
||||
color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/components/MonitorSettingDialog.vue
Normal file
123
src/components/MonitorSettingDialog.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div ref="MonitorSettingDialog" class="modal fade" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
{{ $t("Monitor Setting", [monitor.name]) }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="my-3 form-check">
|
||||
<input id="show-clickable-link" v-model="monitor.isClickAble" class="form-check-input" type="checkbox" @click="toggleLink(monitor.group_index, monitor.monitor_index)" />
|
||||
<label class="form-check-label" for="show-clickable-link">
|
||||
{{ $t("Show Clickable Link") }}
|
||||
</label>
|
||||
<div class="form-text">
|
||||
{{ $t("Show Clickable Link Description") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-primary btn-add-group me-2"
|
||||
@click="$refs.badgeGeneratorDialog.show(monitor.id, monitor.name)"
|
||||
>
|
||||
<font-awesome-icon icon="certificate" />
|
||||
{{ $t("Open Badge Generator") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
|
||||
{{ $t("Close") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BadgeGeneratorDialog ref="badgeGeneratorDialog" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Modal } from "bootstrap";
|
||||
import BadgeGeneratorDialog from "./BadgeGeneratorDialog.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BadgeGeneratorDialog
|
||||
},
|
||||
props: {},
|
||||
emits: [],
|
||||
data() {
|
||||
return {
|
||||
monitor: {
|
||||
id: null,
|
||||
name: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
mounted() {
|
||||
this.MonitorSettingDialog = new Modal(this.$refs.MonitorSettingDialog);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Setting monitor
|
||||
* @param {Object} group Data of monitor
|
||||
* @param {Object} monitor Data of monitor
|
||||
*/
|
||||
show(group, monitor) {
|
||||
this.monitor = {
|
||||
id: monitor.element.id,
|
||||
name: monitor.element.name,
|
||||
monitor_index: monitor.index,
|
||||
group_index: group.index,
|
||||
isClickAble: this.showLink(monitor),
|
||||
};
|
||||
|
||||
this.MonitorSettingDialog.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the value of sendUrl
|
||||
* @param {number} groupIndex Index of group monitor is member of
|
||||
* @param {number} index Index of monitor within group
|
||||
*/
|
||||
toggleLink(groupIndex, index) {
|
||||
this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
|
||||
},
|
||||
|
||||
/**
|
||||
* Should a link to the monitor be shown?
|
||||
* Attempts to guess if a link should be shown based upon if
|
||||
* sendUrl is set and if the URL is default or not.
|
||||
* @param {Object} monitor Monitor to check
|
||||
* @param {boolean} [ignoreSendUrl=false] Should the presence of the sendUrl
|
||||
* property be ignored. This will only work in edit mode.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
showLink(monitor, ignoreSendUrl = false) {
|
||||
// We must check if there are any elements in monitorList to
|
||||
// prevent undefined errors if it hasn't been loaded yet
|
||||
if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
|
||||
return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword";
|
||||
}
|
||||
return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.dark {
|
||||
.modal-dialog .form-text, .modal-dialog p {
|
||||
color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -49,16 +49,15 @@
|
||||
{{ monitor.element.name }}
|
||||
</a>
|
||||
<p v-else class="item-name"> {{ monitor.element.name }} </p>
|
||||
|
||||
<span
|
||||
v-if="showLink(monitor, true)"
|
||||
title="Toggle Clickable Link"
|
||||
title="Setting"
|
||||
>
|
||||
<font-awesome-icon
|
||||
v-if="editMode"
|
||||
:class="{'link-active': monitor.element.sendUrl, 'btn-link': true}"
|
||||
icon="link" class="action me-3"
|
||||
|
||||
@click="toggleLink(group.index, monitor.index)"
|
||||
:class="{'link-active': true, 'btn-link': true}"
|
||||
icon="cog" class="action me-3"
|
||||
@click="$refs.monitorSettingDialog.show(group, monitor)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@@ -77,9 +76,11 @@
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
<MonitorSettingDialog ref="monitorSettingDialog" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MonitorSettingDialog from "./MonitorSettingDialog.vue";
|
||||
import Draggable from "vuedraggable";
|
||||
import HeartbeatBar from "./HeartbeatBar.vue";
|
||||
import Uptime from "./Uptime.vue";
|
||||
@@ -87,6 +88,7 @@ import Tag from "./Tag.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MonitorSettingDialog,
|
||||
Draggable,
|
||||
HeartbeatBar,
|
||||
Uptime,
|
||||
@@ -135,15 +137,6 @@ export default {
|
||||
this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the value of sendUrl
|
||||
* @param {number} groupIndex Index of group monitor is member of
|
||||
* @param {number} index Index of monitor within group
|
||||
*/
|
||||
toggleLink(groupIndex, index) {
|
||||
this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
|
||||
},
|
||||
|
||||
/**
|
||||
* Should a link to the monitor be shown?
|
||||
* Attempts to guess if a link should be shown based upon if
|
||||
|
||||
@@ -42,6 +42,8 @@
|
||||
<option value="vibrate">{{ $t("pushoversounds vibrate") }}</option>
|
||||
<option value="none">{{ $t("pushoversounds none") }}</option>
|
||||
</select>
|
||||
<label for="pushover-ttl" class="form-label">{{ $t("pushoverMessageTtl") }}</label>
|
||||
<input id="pushover-ttl" v-model="$parent.notification.pushoverttl" type="number" min="0" step="1" class="form-control">
|
||||
<div class="form-text">
|
||||
<span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
|
||||
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
|
||||
|
||||
@@ -49,6 +49,7 @@ import {
|
||||
faFilter,
|
||||
faInfoCircle,
|
||||
faClone,
|
||||
faCertificate,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
@@ -95,6 +96,7 @@ library.add(
|
||||
faFilter,
|
||||
faInfoCircle,
|
||||
faClone,
|
||||
faCertificate,
|
||||
);
|
||||
|
||||
export { FontAwesomeIcon };
|
||||
|
||||
@@ -259,6 +259,7 @@
|
||||
"More info on:": "Mehr Infos auf: {0}",
|
||||
"pushoverDesc1": "Notfallpriorität (2) hat standardmässig 30 Sekunden Auszeit zwischen den Versuchen und läuft nach 1 Stunde ab.",
|
||||
"pushoverDesc2": "Fülle das Geräte Feld aus, wenn du Benachrichtigungen an verschiedene Geräte senden möchtest.",
|
||||
"pushoverMessageTtl": "Message TTL (Sekunden)",
|
||||
"SMS Type": "SMS Typ",
|
||||
"octopushTypePremium": "Premium (Schnell - zur Benachrichtigung empfohlen)",
|
||||
"octopushTypeLowCost": "Kostengünstig (Langsam - manchmal vom Betreiber gesperrt)",
|
||||
|
||||
@@ -259,6 +259,7 @@
|
||||
"More info on:": "Mehr Infos auf: {0}",
|
||||
"pushoverDesc1": "Notfallpriorität (2) hat standardmäßig 30 Sekunden Auszeit zwischen den Versuchen und läuft nach 1 Stunde ab.",
|
||||
"pushoverDesc2": "Fülle das Geräte Feld aus, wenn du Benachrichtigungen an verschiedene Geräte senden möchtest.",
|
||||
"pushoverMessageTtl": "Message TTL (Sekunden)",
|
||||
"SMS Type": "SMS Typ",
|
||||
"octopushTypePremium": "Premium (Schnell - zur Benachrichtigung empfohlen)",
|
||||
"octopushTypeLowCost": "Kostengünstig (Langsam - manchmal vom Betreiber gesperrt)",
|
||||
|
||||
@@ -556,6 +556,7 @@
|
||||
"More info on:": "More info on: {0}",
|
||||
"pushoverDesc1": "Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour.",
|
||||
"pushoverDesc2": "If you want to send notifications to different devices, fill out Device field.",
|
||||
"pushoverMessageTtl": "Message TTL (Seconds)",
|
||||
"SMS Type": "SMS Type",
|
||||
"octopushTypePremium": "Premium (Fast - recommended for alerting)",
|
||||
"octopushTypeLowCost": "Low Cost (Slow - sometimes blocked by operator)",
|
||||
@@ -720,5 +721,29 @@
|
||||
"twilioAccountSID": "Account SID",
|
||||
"twilioAuthToken": "Auth Token",
|
||||
"twilioFromNumber": "From Number",
|
||||
"twilioToNumber": "To Number"
|
||||
"twilioToNumber": "To Number",
|
||||
"Monitor Setting": "{0}'s Monitor Setting",
|
||||
"Show Clickable Link": "Show Clickable Link",
|
||||
"Show Clickable Link Description": "If checked everyone who have access to this status page can have access to monitor URL.",
|
||||
"Open Badge Generator": "Open Badge Generator",
|
||||
"Badge Generator": "{0}'s Badge Generator",
|
||||
"Badge Type": "Badge Type",
|
||||
"Badge Duration": "Badge Duration",
|
||||
"Badge Label": "Badge Label",
|
||||
"Badge Prefix": "Badge Prefix",
|
||||
"Badge Suffix": "Badge Suffix",
|
||||
"Badge Label Color": "Badge Label Color",
|
||||
"Badge Color": "Badge Color",
|
||||
"Badge Label Prefix": "Badge Label Prefix",
|
||||
"Badge Label Suffix": "Badge Label Suffix",
|
||||
"Badge Up Color": "Badge Up Color",
|
||||
"Badge Down Color": "Badge Down Color",
|
||||
"Badge Pending Color": "Badge Pending Color",
|
||||
"Badge Maintenance Color": "Badge Maintenance Color",
|
||||
"Badge Warn Color": "Badge Warn Color",
|
||||
"Badge Warn Days": "Badge Warn Days",
|
||||
"Badge Down Days": "Badge Down Days",
|
||||
"Badge Style": "Badge Style",
|
||||
"Badge value (For Testing only.)": "Badge value (For Testing only.)",
|
||||
"Badge URL": "Badge URL"
|
||||
}
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
</main>
|
||||
|
||||
<!-- Mobile Only -->
|
||||
<div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
|
||||
<div v-if="$root.isMobile" style="width: 100%; height: calc(60px + env(safe-area-inset-bottom));" />
|
||||
<nav v-if="$root.isMobile && $root.loggedIn" class="bottom-nav">
|
||||
<router-link to="/dashboard" class="nav-link">
|
||||
<div><font-awesome-icon icon="tachometer-alt" /></div>
|
||||
@@ -182,14 +182,14 @@ export default {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
height: calc(60px + env(safe-area-inset-bottom));
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 0 10px;
|
||||
padding: 0 10px env(safe-area-inset-bottom);
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
|
||||
</div>
|
||||
<p class="url">
|
||||
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ monitor.url }}</a>
|
||||
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'mp-health' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ filterPassword(monitor.url) }}</a>
|
||||
<span v-if="monitor.type === 'port'">TCP Port {{ monitor.hostname }}:{{ monitor.port }}</span>
|
||||
<span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
|
||||
<span v-if="monitor.type === 'keyword'">
|
||||
@@ -18,6 +18,21 @@
|
||||
<br>
|
||||
<span>{{ $t("Last Result") }}:</span> <span class="keyword">{{ monitor.dns_last_result }}</span>
|
||||
</span>
|
||||
<span v-if="monitor.type === 'docker'">Docker container: {{ monitor.docker_container }}</span>
|
||||
<span v-if="monitor.type === 'gamedig'">Gamedig - {{ monitor.game }}: {{ monitor.hostname }}:{{ monitor.port }}</span>
|
||||
<span v-if="monitor.type === 'grpc-keyword'">gRPC - {{ filterPassword(monitor.grpcUrl) }}
|
||||
<br>
|
||||
<span>{{ $t("Keyword") }}:</span> <span class="keyword">{{ monitor.keyword }}</span>
|
||||
</span>
|
||||
<span v-if="monitor.type === 'mongodb'">{{ filterPassword(monitor.databaseConnectionString) }}</span>
|
||||
<span v-if="monitor.type === 'mqtt'">MQTT: {{ monitor.hostname }}:{{ monitor.port }}/{{ monitor.mqttTopic }}</span>
|
||||
<span v-if="monitor.type === 'mysql'">{{ filterPassword(monitor.databaseConnectionString) }}</span>
|
||||
<span v-if="monitor.type === 'postgres'">{{ filterPassword(monitor.databaseConnectionString) }}</span>
|
||||
<span v-if="monitor.type === 'push'">Push: <a :href="pushURL" target="_blank" rel="noopener noreferrer">{{ pushURL }}</a></span>
|
||||
<span v-if="monitor.type === 'radius'">Radius: {{ filterPassword(monitor.hostname) }}</span>
|
||||
<span v-if="monitor.type === 'redis'">{{ filterPassword(monitor.databaseConnectionString) }}</span>
|
||||
<span v-if="monitor.type === 'sqlserver'">SQL Server: {{ filterPassword(monitor.databaseConnectionString) }}</span>
|
||||
<span v-if="monitor.type === 'steam'">Steam Game Server: {{ monitor.hostname }}:{{ monitor.port }}</span>
|
||||
</p>
|
||||
|
||||
<div class="functions">
|
||||
@@ -54,35 +69,41 @@
|
||||
|
||||
<div class="shadow-box big-padding text-center stats">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4>{{ pingTitle() }}</h4>
|
||||
<p>({{ $t("Current") }})</p>
|
||||
<span class="num">
|
||||
<div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
|
||||
<h4 class="col-4 col-sm-12">{{ pingTitle() }}</h4>
|
||||
<p class="col-4 col-sm-12 mb-0 mb-sm-2">({{ $t("Current") }})</p>
|
||||
<span class="col-4 col-sm-12 num">
|
||||
<a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
|
||||
<CountUp :value="ping" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4>{{ pingTitle(true) }}</h4>
|
||||
<p>(24{{ $t("-hour") }})</p>
|
||||
<span class="num"><CountUp :value="avgPing" /></span>
|
||||
<div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
|
||||
<h4 class="col-4 col-sm-12">{{ pingTitle(true) }}</h4>
|
||||
<p class="col-4 col-sm-12 mb-0 mb-sm-2">(24{{ $t("-hour") }})</p>
|
||||
<span class="col-4 col-sm-12 num">
|
||||
<CountUp :value="avgPing" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4>{{ $t("Uptime") }}</h4>
|
||||
<p>(24{{ $t("-hour") }})</p>
|
||||
<span class="num"><Uptime :monitor="monitor" type="24" /></span>
|
||||
<div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
|
||||
<h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
|
||||
<p class="col-4 col-sm-12 mb-0 mb-sm-2">(24{{ $t("-hour") }})</p>
|
||||
<span class="col-4 col-sm-12 num">
|
||||
<Uptime :monitor="monitor" type="24" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4>{{ $t("Uptime") }}</h4>
|
||||
<p>(30{{ $t("-day") }})</p>
|
||||
<span class="num"><Uptime :monitor="monitor" type="720" /></span>
|
||||
<div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
|
||||
<h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
|
||||
<p class="col-4 col-sm-12 mb-0 mb-sm-2">(30{{ $t("-day") }})</p>
|
||||
<span class="col-4 col-sm-12 num">
|
||||
<Uptime :monitor="monitor" type="720" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="tlsInfo" class="col">
|
||||
<h4>{{ $t("Cert Exp.") }}</h4>
|
||||
<p>(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
|
||||
<span class="num">
|
||||
<div v-if="tlsInfo" class="col-12 col-sm col row d-flex align-items-center d-sm-block">
|
||||
<h4 class="col-4 col-sm-12">{{ $t("Cert Exp.") }}</h4>
|
||||
<p class="col-4 col-sm-12 mb-0 mb-sm-2">(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
|
||||
<span class="col-4 col-sm-12 num">
|
||||
<a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $tc("day", tlsInfo.certInfo.daysRemaining) }}</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -136,7 +157,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}" style="padding: 10px;">
|
||||
<tr v-for="(beat, index) in displayedRecords" :key="index" style="padding: 10px;">
|
||||
<td><Status :status="beat.status" /></td>
|
||||
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
|
||||
<td class="border-0">{{ beat.msg }}</td>
|
||||
@@ -193,6 +214,7 @@ import Pagination from "v-pagination-3";
|
||||
const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
|
||||
import Tag from "../components/Tag.vue";
|
||||
import CertificateInfo from "../components/CertificateInfo.vue";
|
||||
import { URL } from "whatwg-url";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -290,6 +312,10 @@ export default {
|
||||
const endIndex = startIndex + this.perPage;
|
||||
return this.heartBeatList.slice(startIndex, endIndex);
|
||||
},
|
||||
|
||||
pushURL() {
|
||||
return this.$root.baseURL + "/api/push/" + this.monitor.pushToken + "?status=up&msg=OK&ping=";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -376,12 +402,26 @@ export default {
|
||||
translationPrefix = "Avg. ";
|
||||
}
|
||||
|
||||
if (this.monitor.type === "http") {
|
||||
if (this.monitor.type === "http" || this.monitor.type === "keyword") {
|
||||
return this.$t(translationPrefix + "Response");
|
||||
}
|
||||
|
||||
return this.$t(translationPrefix + "Ping");
|
||||
},
|
||||
|
||||
/** Filter and hide password in URL for display */
|
||||
filterPassword(urlString) {
|
||||
try {
|
||||
let parsedUrl = new URL(urlString);
|
||||
if (parsedUrl.password !== "") {
|
||||
parsedUrl.password = "******";
|
||||
}
|
||||
return parsedUrl.toString();
|
||||
} catch (e) {
|
||||
// Handle SQL Server
|
||||
return urlString.replaceAll(/Password=(.+);/ig, "Password=******;");
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -415,6 +455,7 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
@@ -471,6 +512,18 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.stats {
|
||||
.col {
|
||||
margin: 10px 0 !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keyword {
|
||||
color: black;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user