7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-10-26 16:49:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/http-method-push-monitor

Browse Source 
# Conflicts:
#	src/pages/EditMonitor.vue
This commit is contained in:
Stefan Ottosson
2024-05-23 17:34:45 +02:00
parent f89ed0a3a4 4df71af34f
commit 1ac5696463
549 changed files with 68374 additions and 39624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/assets/app.scss
View File

@@ -22,6 +22,24 @@ textarea.form-control {
width: 10px;
}
.bg-maintenance {
color: white !important;
background-color: $maintenance !important;
}
.bg-dark {
color: white;
}
.text-maintenance {
color: $maintenance !important;
}
.incident a,
.bg-maintenance a {
color: inherit;
}
.list-group {
border-radius: 0.75rem;
@@ -93,6 +111,10 @@ optgroup {
padding-right: 20px;
}
.btn-sm {
border-radius: 25px;
}
.btn-primary {
color: white;
@@ -107,6 +129,19 @@ optgroup {
}
}
.btn-normal {
$bg-color: #F5F5F5;
background-color: $bg-color;
border-color: $bg-color;
&:hover {
$hover-color: darken($bg-color, 3%);
background-color: $hover-color;
border-color: $hover-color;
}
}
.btn-warning {
color: white;
@@ -127,6 +162,26 @@ optgroup {
background-color: #161B22;
}
.btn-outline-normal {
padding: 4px 10px;
border: 1px solid #ced4da;
border-radius: 25px;
background-color: transparent;
.dark & {
color: $dark-font-color;
border: 1px solid $dark-font-color2;
}
&.active {
background-color: $highlight-white;
.dark & {
background-color: $dark-font-color2;
}
}
}
@media (max-width: 550px) {
.table-shadow-box {
padding: 10px !important;
@@ -222,6 +277,11 @@ optgroup {
}
}
.incident a,
.bg-maintenance a {
color: inherit;
}
.form-control,
.form-control:focus,
.form-select,
@@ -230,6 +290,11 @@ optgroup {
background-color: $dark-bg2;
}
.form-select:disabled {
color: rgba($dark-font-color, 0.7);
background-color: $dark-bg;
}
.form-control, .form-select {
border-color: $dark-border-color;
}
@@ -256,6 +321,20 @@ optgroup {
color: white;
}
.btn-normal {
$bg-color: $dark-header-bg;
color: $dark-font-color;
background-color: $bg-color;
border-color: $bg-color;
&:hover {
$hover-color: darken($bg-color, 3%);
background-color: $hover-color;
border-color: $hover-color;
}
}
.btn-warning {
color: $dark-font-color2;
@@ -323,6 +402,7 @@ optgroup {
&.bg-info,
&.bg-warning,
&.bg-danger,
&.bg-maintenance,
&.bg-light {
color: $dark-font-color2;
}
@@ -380,12 +460,11 @@ optgroup {
.monitor-list {
&.scrollbar {
overflow-y: auto;
height: calc(100% - 65px);
}
@media (max-width: 770px) {
&.scrollbar {
height: calc(100% - 40px);
height: calc(100% - 97px);
}
}
@@ -403,7 +482,6 @@ optgroup {
.info {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
@@ -506,6 +584,61 @@ h5.settings-subheading::after {
border-bottom: 1px solid $dark-border-color;
}
/* required class */
.code-editor, .css-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
border-radius: 1rem;
padding: 10px 5px;
border: 1px solid #ced4da;
.dark & {
background: $dark-bg2;
border: 1px solid $dark-border-color;
}
}
$shadow-box-padding: 20px;
.shadow-box-with-fixed-bottom-bar {
padding-top: $shadow-box-padding;
padding-bottom: 0;
padding-right: $shadow-box-padding;
padding-left: $shadow-box-padding;
}
.fixed-bottom-bar {
position: sticky;
bottom: 0;
margin-left: -$shadow-box-padding;
margin-right: -$shadow-box-padding;
z-index: 100;
background-color: rgba(white, 0.2);
backdrop-filter: blur(2px);
border-radius: 0 0 10px 10px;
.dark & {
background-color: rgba($dark-header-bg, 0.9);
}
}
@media (max-width: 770px) {
.toast-container {
margin-bottom: 100px !important;
}
}
@media (max-width: 550px) {
.toast-container {
margin-bottom: 126px !important;
}
}
.zoom-cursor {
cursor: zoom-in;
}
// Localization
@import "localization.scss";

6
src/assets/localization.scss
View File

@@ -2,4 +2,8 @@ html[lang='fa'] {
#app {
font-family: 'IRANSans', 'Iranian Sans','B Nazanin', 'Tahoma', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}
}
}
ul.multiselect__content {
padding-left: 0 !important;
}

9
src/assets/multiselect.scss
View File

@@ -1,6 +1,12 @@
@import "vars.scss";
@import "node_modules/vue-multiselect/dist/vue-multiselect";
.multiselect {
.dark & {
color: $dark-font-color;
}
}
.multiselect__tags {
border-radius: 1.5rem;
border: 1px solid #ced4da;
@@ -14,10 +20,12 @@
.multiselect__option--highlight {
background: $primary !important;
color: $dark-font-color2 !important;
}
.multiselect__option--highlight::after {
background: $primary !important;
color: $dark-font-color2 !important;
}
.multiselect__tag {
@@ -61,6 +69,7 @@
.multiselect__content-wrapper {
background-color: $dark-bg2;
border-color: $dark-border-color;
z-index: 150;
}
.multiselect--above .multiselect__content-wrapper {

2
src/assets/vars.scss
View File

@@ -1,8 +1,10 @@
$primary: #5cdd8b;
$danger: #dc3545;
$warning: #f8a306;
$maintenance: #1747f5;
$link-color: #111;
$border-radius: 50rem;
$secondary-text: #aaa;
$highlight: #7ce8a4;
$highlight-white: #e7faec;

39
src/assets/vue-datepicker.scss Normal file
View File

@@ -0,0 +1,39 @@
@import "@vuepic/vue-datepicker/dist/main.css";
@import "vars.scss";
// Must use #{ }
// Remark: https://stackoverflow.com/questions/50202991/unable-to-set-scss-variable-to-css-variable
.dp__theme_dark {
--dp-background-color: #{$dark-bg2};
--dp-text-color: #{$dark-font-color};
--dp-hover-color: #484848;
--dp-hover-text-color: #ffffff;
--dp-hover-icon-color: #959595;
--dp-primary-color: #{#5cdd8b};
--dp-primary-text-color: #ffffff;
--dp-secondary-color: #494949;
--dp-border-color: #{$dark-border-color};
--dp-menu-border-color: #2d2d2d;
--dp-border-color-hover: #{$dark-border-color};
--dp-disabled-color: #212121;
--dp-scroll-bar-background: #212121;
--dp-scroll-bar-color: #484848;
--dp-success-color: #{$primary};
--dp-success-color-disabled: #428f59;
--dp-icon-color: #959595;
--dp-danger-color: #e53935;
--dp-highlight-color: rgba(0, 92, 178, 0.2);
}
.dp__input {
border-radius: $border-radius;
}
// Fix: Full width of text input when using "inline textInput inlineWithInput" mode
.dp__main > div[aria-label="Datepicker input"] {
width: 100%;
}
.dp__main > div[aria-label="Datepicker menu"]:nth-child(2) {
margin-top: 20px;
}

233
src/components/APIKeyDialog.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<form @submit.prevent="submit">
<div ref="keyaddmodal" 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("Add API Key") }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body">
<!-- Name -->
<div class="mb-3">
<label for="name" class="form-label">{{ $t("Name") }}</label>
<input
id="name" v-model="key.name" type="text" class="form-control"
required
>
</div>
<!-- Expiry -->
<div class="my-3">
<label class="form-label">{{ $t("Expiry date") }}</label>
<div class="d-flex flex-row align-items-center">
<div class="col-6">
<Datepicker
v-model="key.expires"
:dark="$root.isDark"
:monthChangeOnScroll="false"
:minDate="minDate"
format="yyyy-MM-dd HH:mm"
modelType="yyyy-MM-dd HH:mm:ss"
:required="!noExpire"
:disabled="noExpire"
/>
</div>
<div class="col-6 ms-3">
<div class="form-check mb-0">
<input
id="no-expire" v-model="noExpire" class="form-check-input"
type="checkbox"
>
<label class="form-check-label" for="no-expire">{{
$t("Don't expire")
}}</label>
</div>
</div>
</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>
</div>
<div ref="keymodal" 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("Key Added") }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body">
<div class="mb-3">
{{ $t("apiKeyAddedMsg") }}
</div>
<div class="mb-3">
<CopyableInput v-model="clearKey" disabled="disabled" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">
{{ $t('Continue') }}
</button>
</div>
</div>
</div>
</div>
</form>
</template>
<script lang="ts">
import { Modal } from "bootstrap";
import dayjs from "dayjs";
import Datepicker from "@vuepic/vue-datepicker";
import CopyableInput from "./CopyableInput.vue";
export default {
components: {
CopyableInput,
Datepicker
},
props: {},
// emits: [ "added" ],
data() {
return {
keyaddmodal: null,
keymodal: null,
processing: false,
key: {},
dark: (this.$root.theme === "dark"),
minDate: this.$root.date(dayjs()) + " 00:00",
clearKey: null,
noExpire: false,
};
},
mounted() {
this.keyaddmodal = new Modal(this.$refs.keyaddmodal);
this.keymodal = new Modal(this.$refs.keymodal);
},
methods: {
/**
* Show modal
* @returns {void}
*/
show() {
this.id = null;
this.key = {
name: "",
expires: this.minDate,
active: 1,
};
this.keyaddmodal.show();
},
/**
* Submit data to server
* @returns {Promise<void>}
*/
async submit() {
this.processing = true;
if (this.noExpire) {
this.key.expires = null;
}
this.$root.addAPIKey(this.key, async (res) => {
this.keyaddmodal.hide();
this.processing = false;
if (res.ok) {
this.clearKey = res.key;
this.keymodal.show();
this.clearForm();
} else {
this.$root.toastError(res.msg);
}
});
},
/**
* Clear Form inputs
* @returns {void}
*/
clearForm() {
this.key = {
name: "",
expires: this.minDate,
active: 1,
};
this.noExpire = false;
},
}
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
.shadow-box {
padding: 20px;
}
textarea {
min-height: 150px;
}
.dark-calendar::-webkit-calendar-picker-indicator {
filter: invert(1);
}
.weekday-picker {
display: flex;
gap: 10px;
& > div {
display: flex;
flex-direction: column;
align-items: center;
width: 40px;
.form-check-inline {
margin-right: 0;
}
}
}
.day-picker {
display: flex;
gap: 10px;
flex-wrap: wrap;
& > div {
display: flex;
flex-direction: column;
align-items: center;
width: 40px;
.form-check-inline {
margin-right: 0;
}
}
}
</style>

11
src/components/ActionInput.vue
View File

@@ -8,9 +8,9 @@
:placeholder="placeholder"
:disabled="!enabled"
>
<a class="btn btn-outline-primary" @click="action()">
<button type="button" class="btn btn-outline-primary" :aria-label="actionAriaLabel" @click="action()">
<font-awesome-icon :icon="icon" />
</a>
</button>
</div>
</template>
@@ -66,6 +66,13 @@ export default {
action: {
type: Function,
default: () => {},
},
/**
* The aria-label of the action button
*/
actionAriaLabel: {
type: String,
required: true,
}
},
emits: [ "update:modelValue" ],

100
src/components/ActionSelect.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div class="input-group mb-3">
<select :id="id" ref="select" v-model="model" class="form-select" :disabled="disabled" :required="required">
<option v-for="option in options" :key="option" :value="option.value" :disabled="option.disabled">{{ option.label }}</option>
</select>
<button type="button" class="btn btn-outline-primary" :class="{ disabled: actionDisabled }" :aria-label="actionAriaLabel" @click="action()">
<font-awesome-icon :icon="icon" aria-hidden="true" />
</button>
</div>
</template>
<script>
/**
* Generic select field with a customizable action on the right.
* Action is passed in as a function.
*/
export default {
props: {
options: {
type: Array,
default: () => [],
},
/**
* The id of the form which will be targeted by a <label for=..
*/
id: {
type: String,
required: true,
},
/**
* The value of the select field.
*/
modelValue: {
type: Number,
default: null,
},
/**
* Whether the select field is enabled / disabled.
*/
disabled: {
type: Boolean,
default: false
},
/**
* The icon displayed in the right button of the select field.
* Accepts a Font Awesome icon string identifier.
* @example "plus"
*/
icon: {
type: String,
required: true,
},
/**
* The action to be performed when the button is clicked.
* Action is passed in as a function.
*/
action: {
type: Function,
default: () => {},
},
/**
* The aria-label of the action button
*/
actionAriaLabel: {
type: String,
required: true,
},
/**
* Whether the action button is disabled.
* @example true
*/
actionDisabled: {
type: Boolean,
default: false
},
/**
* Whether the select field is required.
* @example true
*/
required: {
type: Boolean,
default: false,
}
},
emits: [ "update:modelValue" ],
computed: {
/**
* Send value update to parent on change.
*/
model: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
}
}
},
};
</script>

306
src/components/BadgeGeneratorDialog.vue Normal file
View File

@@ -0,0 +1,306 @@
<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 (in hours)") }}</label>
<input id="duration" v-model="badge.duration" type="number" min="0" placeholder="24" class="form-control">
</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">
</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">
</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" placeholder="%" class="form-control">
</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" placeholder="#555" class="form-control">
</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" :placeholder="badgeConstants.defaultUpColor" class="form-control">
</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">
</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" placeholder="h" class="form-control">
</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" :placeholder="badgeConstants.defaultUpColor">
</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" :placeholder="badgeConstants.defaultDownColor">
</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" :placeholder="badgeConstants.defaultPendingColor">
</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" :placeholder="badgeConstants.defaultMaintenanceColor">
</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="text" class="form-control" :placeholder="badgeConstants.defaultMaintenanceColor">
</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" :placeholder="badgeConstants.defaultCertExpireWarnDays">
</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" :placeholder="badgeConstants.defaultCertExpireDownDays">
</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">
</div>
<div class="mb-3 pt-3 d-flex justify-content-center">
<img :src="badgeURL" :alt="$t('Badge Preview')">
</div>
<div class="my-3">
<label for="badge-url" class="form-label">{{ $t("Badge URL") }}</label>
<CopyableInput id="badge-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";
import { badgeConstants } from "../util.ts";
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",
],
},
badgeConstants,
};
},
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
* @returns {void}
*/
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>

4
src/components/CertificateInfoRow.vue
View File

@@ -65,9 +65,9 @@ export default {
methods: {
/**
* Format the subject of the certificate
* @param {Object} subject Object representing the certificates
* @param {object} subject Object representing the certificates
* subject
* @returns {string}
* @returns {string} Certificate subject
*/
formatSubject(subject) {
if (subject.O && subject.CN && subject.C) {

26
src/components/Confirm.vue
View File

@@ -4,7 +4,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">
{{ $t("Confirm") }}
{{ title || $t("Confirm") }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
@@ -15,7 +15,7 @@
<button type="button" class="btn" :class="btnStyle" data-bs-dismiss="modal" @click="yes">
{{ yesText }}
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="no">
{{ noText }}
</button>
</div>
@@ -44,8 +44,13 @@ export default {
type: String,
default: "No",
},
/** Title to show on modal. Defaults to translated version of "Config" */
title: {
type: String,
default: null,
}
},
emits: [ "yes" ],
emits: [ "yes", "no" ],
data: () => ({
modal: null,
}),
@@ -53,16 +58,27 @@ export default {
this.modal = new Modal(this.$refs.modal);
},
methods: {
/** Show the confirm dialog */
/**
* Show the confirm dialog
* @returns {void}
*/
show() {
this.modal.show();
},
/**
* @emits string "yes" Notify the parent when Yes is pressed
* @fires string "yes" Notify the parent when Yes is pressed
* @returns {void}
*/
yes() {
this.$emit("yes");
},
/**
* @fires string "no" Notify the parent when No is pressed
* @returns {void}
*/
no() {
this.$emit("no");
}
},
};
</script>

24
src/components/CopyableInput.vue
View File

@@ -13,6 +13,9 @@
:disabled="disabled"
>
<!-- A hidden textarea for copying text on non-https -->
<textarea ref="hiddenTextarea" style="position: fixed; left: -999999px; top: -999999px;"></textarea>
<a class="btn btn-outline-primary" @click="copyToClipboard(model)">
<font-awesome-icon :icon="icon" />
</a>
@@ -87,19 +90,25 @@ export default {
},
methods: {
/** Show the input */
/**
* Show the input
* @returns {void}
*/
showInput() {
this.visibility = "text";
},
/** Hide the input */
/**
* Hide the input
* @returns {void}
*/
hideInput() {
this.visibility = "password";
},
/**
* Copy the provided text to the users clipboard
* @param {string} textToCopy
* @param {string} textToCopy Text to copy to clipboard
* @returns {Promise<void>}
*/
copyToClipboard(textToCopy) {
@@ -111,24 +120,19 @@ export default {
}, 3000);
// navigator clipboard api needs a secure context (https)
// For http, use the text area method (else part)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method'
return navigator.clipboard.writeText(textToCopy);
} else {
// text area method
let textArea = document.createElement("textarea");
let textArea = this.$refs.hiddenTextarea;
textArea.value = textToCopy;
// make the textarea out of viewport
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// here the magic happens
document.execCommand("copy") ? res() : rej();
textArea.remove();
});
}
}

15
src/components/CountUp.vue
View File

@@ -1,5 +1,5 @@
<template>
<span v-if="isNum" ref="output">{{ output }}</span> <span v-if="isNum">{{ unit }}</span>
<span v-if="isNum" ref="output">{{ outputFixed }}</span> <span v-if="isNum">{{ unit }}</span>
<span v-else>{{ value }}</span>
</template>
@@ -37,6 +37,19 @@ export default {
isNum() {
return typeof this.value === "number";
},
outputFixed() {
if (typeof this.output === "number") {
if (this.output < 1) {
return "<1";
} else if (Number.isInteger(this.output)) {
return this.output;
} else {
return this.output.toFixed(2);
}
} else {
return this.output;
}
}
},
watch: {

63
src/components/CreateGroupDialog.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div ref="modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ $t("New Group") }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body">
<form @submit.prevent="confirm">
<div>
<label for="draftGroupName" class="form-label">{{ $t("Group Name") }}</label>
<input id="draftGroupName" v-model="groupName" type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
{{ $t("Cancel") }}
</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" :disabled="groupName == '' || groupName == null" @click="confirm">
{{ $t("Confirm") }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from "bootstrap";
export default {
props: {},
emits: [ "added" ],
data: () => ({
modal: null,
groupName: null,
}),
mounted() {
this.modal = new Modal(this.$refs.modal);
},
methods: {
/**
* Show the confirm dialog
* @returns {void}
*/
show() {
this.modal.show();
},
/**
* Dialog confirmed
* @returns {void}
*/
confirm() {
this.$emit("added", this.groupName);
this.modal.hide();
},
},
};
</script>

8
src/components/Datetime.vue
View File

@@ -3,14 +3,6 @@
</template>
<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import timezone from "dayjs/plugin/timezone"; // dependent on utc plugin
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(relativeTime);
export default {
props: {
/** Value of date time */

33
src/components/DockerHostDialog.vue
View File

@@ -30,7 +30,8 @@
{{ $t("Examples") }}:
<ul>
<li>/var/run/docker.sock</li>
<li>tcp://localhost:2375</li>
<li>http://localhost:2375</li>
<li>https://localhost:2376 (TLS)</li>
</ul>
</div>
</div>
@@ -61,18 +62,16 @@
<script lang="ts">
import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
Confirm,
},
props: {},
emits: [ "added" ],
emits: [ "added", "deleted" ],
data() {
return {
model: null,
modal: null,
processing: false,
id: null,
connectionTypes: [ "socket", "tcp" ],
@@ -90,11 +89,20 @@ export default {
},
methods: {
/**
* Confirm deletion of docker host
* @returns {void}
*/
deleteConfirm() {
this.modal.hide();
this.$refs.confirmDelete.show();
},
/**
* Show specified docker host
* @param {number} dockerHostID ID of host to show
* @returns {void}
*/
show(dockerHostID) {
if (dockerHostID) {
let found = false;
@@ -110,7 +118,7 @@ export default {
}
if (!found) {
toast.error("Docker Host not found!");
this.$root.toastError("Docker Host not found!");
}
} else {
@@ -125,6 +133,10 @@ export default {
this.modal.show();
},
/**
* Add docker host
* @returns {void}
*/
submit() {
this.processing = true;
this.$root.getSocket().emit("addDockerHost", this.dockerHost, this.id, (res) => {
@@ -143,6 +155,10 @@ export default {
});
},
/**
* Test the docker host
* @returns {void}
*/
test() {
this.processing = true;
this.$root.getSocket().emit("testDockerHost", this.dockerHost, (res) => {
@@ -151,6 +167,10 @@ export default {
});
},
/**
* Delete this docker host
* @returns {void}
*/
deleteDockerHost() {
this.processing = true;
this.$root.getSocket().emit("deleteDockerHost", this.id, (res) => {
@@ -158,6 +178,7 @@ export default {
this.processing = false;
if (res.ok) {
this.$emit("deleted", this.id);
this.modal.hide();
}
});

118
src/components/HeartbeatBar.vue
View File

@@ -5,15 +5,24 @@
v-for="(beat, index) in shortBeatList"
:key="index"
class="beat"
:class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
:class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
:style="beatStyle"
:title="getBeatTitle(beat)"
/>
</div>
<div
v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
class="d-flex justify-content-between align-items-center word" :style="timeStyle"
>
<div>{{ timeSinceFirstBeat }} ago</div>
<div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
<div>{{ timeSinceLastBeat }}</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
export default {
props: {
@@ -47,6 +56,7 @@ export default {
/**
* If heartbeatList is null, get it from $root.heartbeatList
* @returns {object} Heartbeat list
*/
beatList() {
if (this.heartbeatList === null) {
@@ -56,8 +66,29 @@ export default {
}
},
/**
* Calculates the amount of beats of padding needed to fill the length of shortBeatList.
* @returns {number} The amount of beats of padding needed to fill the length of shortBeatList.
*/
numPadding() {
if (!this.beatList) {
return 0;
}
let num = this.beatList.length - this.maxBeat;
if (this.move) {
num = num - 1;
}
if (num > 0) {
return 0;
}
return -1 * num;
},
shortBeatList() {
if (! this.beatList) {
if (!this.beatList) {
return [];
}
@@ -115,6 +146,51 @@ export default {
};
},
/**
* Returns the style object for positioning the time element.
* @returns {object} The style object containing the CSS properties for positioning the time element.
*/
timeStyle() {
return {
"margin-left": this.numPadding * (this.beatWidth + this.beatMargin * 2) + "px",
};
},
/**
* Calculates the time elapsed since the first valid beat.
* @returns {string} The time elapsed in minutes or hours.
*/
timeSinceFirstBeat() {
const firstValidBeat = this.shortBeatList.at(this.numPadding);
const minutes = dayjs().diff(dayjs.utc(firstValidBeat?.time), "minutes");
if (minutes > 60) {
return (minutes / 60).toFixed(0) + "h";
} else {
return minutes + "m";
}
},
/**
* Calculates the elapsed time since the last valid beat was registered.
* @returns {string} The elapsed time in a minutes, hours or "now".
*/
timeSinceLastBeat() {
const lastValidBeat = this.shortBeatList.at(-1);
const seconds = dayjs().diff(dayjs.utc(lastValidBeat?.time), "seconds");
let tolerance = 60 * 2; // default for when monitorList not available
if (this.$root.monitorList[this.monitorId] != null) {
tolerance = this.$root.monitorList[this.monitorId].interval * 2;
}
if (seconds < tolerance) {
return "now";
} else if (seconds < 60 * 60) {
return (seconds / 60).toFixed(0) + "m ago";
} else {
return (seconds / 60 / 60).toFixed(0) + "h ago";
}
}
},
watch: {
beatList: {
@@ -133,14 +209,14 @@ export default {
},
beforeMount() {
if (this.heartbeatList === null) {
if (! (this.monitorId in this.$root.heartbeatList)) {
if (!(this.monitorId in this.$root.heartbeatList)) {
this.$root.heartbeatList[this.monitorId] = [];
}
}
},
mounted() {
if (this.size === "small") {
if (this.size !== "big") {
this.beatWidth = 5;
this.beatHeight = 16;
this.beatMargin = 2;
@@ -151,11 +227,11 @@ export default {
const actualWidth = this.beatWidth * window.devicePixelRatio;
const actualMargin = this.beatMargin * window.devicePixelRatio;
if (! Number.isInteger(actualWidth)) {
if (!Number.isInteger(actualWidth)) {
this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
}
if (! Number.isInteger(actualMargin)) {
if (!Number.isInteger(actualMargin)) {
this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
}
@@ -163,7 +239,10 @@ export default {
this.resize();
},
methods: {
/** Resize the heartbeat bar */
/**
* Resize the heartbeat bar
* @returns {void}
*/
resize() {
if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
@@ -173,8 +252,8 @@ export default {
/**
* Get the title of the beat.
* Used as the hover tooltip on the heartbeat bar.
* @param {Object} beat Beat to get title from
* @returns {string}
* @param {object} beat Beat to get title from
* @returns {string} Beat title
*/
getBeatTitle(beat) {
return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
@@ -211,6 +290,10 @@ export default {
background-color: $warning;
}
&.maintenance {
background-color: $maintenance;
}
&:not(.empty):hover {
transition: all ease-in-out 0.15s;
opacity: 0.8;
@@ -225,4 +308,21 @@ export default {
}
}
.word {
color: $secondary-text;
font-size: 12px;
}
.connecting-line {
flex-grow: 1;
height: 1px;
background-color: #ededed;
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
.dark & {
background-color: #333;
}
}
</style>

12
src/components/HiddenInput.vue
View File

@@ -42,7 +42,7 @@ export default {
/** Should the field auto complete */
autocomplete: {
type: String,
default: undefined,
default: "new-password",
},
/** Is the input required? */
required: {
@@ -74,11 +74,17 @@ export default {
},
methods: {
/** Show users input in plain text */
/**
* Show users input in plain text
* @returns {void}
*/
showInput() {
this.visibility = "text";
},
/** Censor users input */
/**
* Censor users input
* @returns {void}
*/
hideInput() {
this.visibility = "password";
},

22
src/components/Login.vue
View File

@@ -5,18 +5,18 @@
<h1 class="h3 mb-3 fw-normal" />
<div v-if="!tokenRequired" class="form-floating">
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username">
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" autocomplete="username" required>
<label for="floatingInput">{{ $t("Username") }}</label>
</div>
<div v-if="!tokenRequired" class="form-floating mt-3">
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password">
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" autocomplete="current-password" required>
<label for="floatingPassword">{{ $t("Password") }}</label>
</div>
<div v-if="tokenRequired">
<div class="form-floating mt-3">
<input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
<input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456" autocomplete="one-time-code" required>
<label for="otp">{{ $t("Token") }}</label>
</div>
</div>
@@ -35,7 +35,7 @@
</button>
<div v-if="res && !res.ok" class="alert alert-danger mt-3" role="alert">
{{ res.msg }}
{{ $t(res.msg) }}
</div>
</form>
</div>
@@ -54,8 +54,20 @@ export default {
tokenRequired: false,
};
},
mounted() {
document.title += " - Login";
},
unmounted() {
document.title = document.title.replace(" - Login", "");
},
methods: {
/** Submit the user details and attempt to log in */
/**
* Submit the user details and attempt to log in
* @returns {void}
*/
submit() {
this.processing = true;

60
src/components/MaintenanceTime.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div>
<div v-if="maintenance.strategy === 'manual'" class="timeslot">
{{ $t("Manual") }}
</div>
<div v-else-if="maintenance.timeslotList.length > 0">
<div class="timeslot">
{{ startDateTime }}
<span class="to">-</span>
{{ endDateTime }}
</div>
<div class="timeslot">
UTC{{ maintenance.timezoneOffset }} <span v-if="maintenance.timezone !== 'UTC'">{{ maintenance.timezone }}</span>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
import { SQL_DATETIME_FORMAT_WITHOUT_SECOND } from "../util.ts";
export default {
props: {
maintenance: {
type: Object,
required: true
},
},
computed: {
startDateTime() {
return dayjs(this.maintenance.timeslotList[0].startDate).tz(this.maintenance.timezone, true).format(SQL_DATETIME_FORMAT_WITHOUT_SECOND);
},
endDateTime() {
return dayjs(this.maintenance.timeslotList[0].endDate).tz(this.maintenance.timezone, true).format(SQL_DATETIME_FORMAT_WITHOUT_SECOND);
}
},
};
</script>
<style lang="scss">
.timeslot {
margin-top: 5px;
display: inline-block;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: 0 10px;
margin-right: 5px;
.to {
margin: 0 6px;
}
.dark & {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
}
</style>

405
src/components/MonitorList.vue
View File

@@ -1,61 +1,85 @@
<template>
<div class="shadow-box mb-3" :style="boxStyle">
<div class="list-header">
<div class="placeholder"></div>
<div class="search-wrapper">
<a v-if="searchText == ''" class="search-icon">
<font-awesome-icon icon="search" />
</a>
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
</a>
<form>
<input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" autocomplete="off" />
</form>
<div class="header-top">
<button class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button" @click="selectMode = !selectMode">
{{ $t("Select") }}
</button>
<div class="placeholder"></div>
<div class="search-wrapper">
<a v-if="searchText == ''" class="search-icon">
<font-awesome-icon icon="search" />
</a>
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
</a>
<form>
<input
v-model="searchText"
class="form-control search-input"
:placeholder="$t('Search...')"
:aria-label="$t('Search monitored sites')"
autocomplete="off"
/>
</form>
</div>
</div>
<div class="header-filter">
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
</div>
<!-- Selection Controls -->
<div v-if="selectMode" class="selection-controls px-2 pt-2">
<input
v-model="selectAll"
class="form-check-input select-input"
type="checkbox"
/>
<button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button>
<button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button>
<span v-if="selectedMonitorCount > 0">
{{ $t("selectedMonitorCount", [ selectedMonitorCount ]) }}
</span>
</div>
</div>
<div class="monitor-list" :class="{ scrollbar: scrollbar }">
<div ref="monitorList" class="monitor-list" :class="{ scrollbar: scrollbar }" :style="monitorListStyle">
<div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
{{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
</div>
<router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
<div class="row">
<div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
<div class="info">
<Uptime :monitor="item" type="24" :pill="true" />
{{ item.name }}
</div>
<div class="tags">
<Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
<div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
</div>
<div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
<div class="col-12 bottom-style">
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
</div>
</router-link>
<MonitorListItem
v-for="(item, index) in sortedMonitorList"
:key="index"
:monitor="item"
:isSelectMode="selectMode"
:isSelected="isSelected"
:select="select"
:deselect="deselect"
:filter-func="filterFunc"
:sort-func="sortFunc"
/>
</div>
</div>
<Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">
{{ $t("pauseMonitorMsg") }}
</Confirm>
</template>
<script>
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Tag from "../components/Tag.vue";
import Uptime from "../components/Uptime.vue";
import Confirm from "../components/Confirm.vue";
import MonitorListItem from "../components/MonitorListItem.vue";
import MonitorListFilter from "./MonitorListFilter.vue";
import { getMonitorRelativeURL } from "../util.ts";
export default {
components: {
Uptime,
HeartbeatBar,
Tag,
Confirm,
MonitorListItem,
MonitorListFilter,
},
props: {
/** Should the scrollbar be shown */
@@ -66,7 +90,16 @@ export default {
data() {
return {
searchText: "",
selectMode: false,
selectAll: false,
disableSelectAllWatcher: false,
selectedMonitors: {},
windowTop: 0,
filterState: {
status: null,
active: null,
tags: null,
}
};
},
computed: {
@@ -74,6 +107,7 @@ export default {
* Improve the sticky appearance of the list by increasing its
* height as user scrolls down.
* Not used on mobile.
* @returns {object} Style for monitor list
*/
boxStyle() {
if (window.innerWidth > 550) {
@@ -88,47 +122,87 @@ export default {
},
/**
* Returns a sorted list of monitors based on the applied filters and search text.
* @returns {Array} The sorted list of monitors.
*/
sortedMonitorList() {
let result = Object.values(this.$root.monitorList);
result.sort((m1, m2) => {
if (m1.active !== m2.active) {
if (m1.active === 0) {
return 1;
}
if (m2.active === 0) {
return -1;
}
result = result.filter(monitor => {
// The root list does not show children
if (monitor.parent !== null) {
return false;
}
if (m1.weight !== m2.weight) {
if (m1.weight > m2.weight) {
return -1;
}
if (m1.weight < m2.weight) {
return 1;
}
}
return m1.name.localeCompare(m2.name);
return true;
});
// Simple filter by search text
// finds monitor name, tag name or tag value
if (this.searchText !== "") {
const loweredSearchText = this.searchText.toLowerCase();
result = result.filter(monitor => {
return monitor.name.toLowerCase().includes(loweredSearchText)
|| monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
|| tag.value?.toLowerCase().includes(loweredSearchText));
});
}
result = result.filter(this.filterFunc);
result.sort(this.sortFunc);
return result;
},
isDarkTheme() {
return document.body.classList.contains("dark");
},
monitorListStyle() {
let listHeaderHeight = 107;
if (this.selectMode) {
listHeaderHeight += 42;
}
return {
"height": `calc(100% - ${listHeaderHeight}px)`
};
},
selectedMonitorCount() {
return Object.keys(this.selectedMonitors).length;
},
/**
* Determines if any filters are active.
* @returns {boolean} True if any filter is active, false otherwise.
*/
filtersActive() {
return this.filterState.status != null || this.filterState.active != null || this.filterState.tags != null || this.searchText !== "";
}
},
watch: {
searchText() {
for (let monitor of this.sortedMonitorList) {
if (!this.selectedMonitors[monitor.id]) {
if (this.selectAll) {
this.disableSelectAllWatcher = true;
this.selectAll = false;
}
break;
}
}
},
selectAll() {
if (!this.disableSelectAllWatcher) {
this.selectedMonitors = {};
if (this.selectAll) {
this.sortedMonitorList.forEach((item) => {
this.selectedMonitors[item.id] = true;
});
}
} else {
this.disableSelectAllWatcher = false;
}
},
selectMode() {
if (!this.selectMode) {
this.selectAll = false;
this.selectedMonitors = {};
}
},
},
mounted() {
window.addEventListener("scroll", this.onScroll);
@@ -137,7 +211,10 @@ export default {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
/** Handle user scroll */
/**
* Handle user scroll
* @returns {void}
*/
onScroll() {
if (window.top.scrollY <= 133) {
this.windowTop = window.top.scrollY;
@@ -153,9 +230,160 @@ export default {
monitorURL(id) {
return getMonitorRelativeURL(id);
},
/** Clear the search bar */
/**
* Clear the search bar
* @returns {void}
*/
clearSearchText() {
this.searchText = "";
},
/**
* Update the MonitorList Filter
* @param {object} newFilter Object with new filter
* @returns {void}
*/
updateFilter(newFilter) {
this.filterState = newFilter;
},
/**
* Deselect a monitor
* @param {number} id ID of monitor
* @returns {void}
*/
deselect(id) {
delete this.selectedMonitors[id];
},
/**
* Select a monitor
* @param {number} id ID of monitor
* @returns {void}
*/
select(id) {
this.selectedMonitors[id] = true;
},
/**
* Determine if monitor is selected
* @param {number} id ID of monitor
* @returns {bool} Is the monitor selected?
*/
isSelected(id) {
return id in this.selectedMonitors;
},
/**
* Disable select mode and reset selection
* @returns {void}
*/
cancelSelectMode() {
this.selectMode = false;
this.selectedMonitors = {};
},
/**
* Show dialog to confirm pause
* @returns {void}
*/
pauseDialog() {
this.$refs.confirmPause.show();
},
/**
* Pause each selected monitor
* @returns {void}
*/
pauseSelected() {
Object.keys(this.selectedMonitors)
.filter(id => this.$root.monitorList[id].active)
.forEach(id => this.$root.getSocket().emit("pauseMonitor", id, () => {}));
this.cancelSelectMode();
},
/**
* Resume each selected monitor
* @returns {void}
*/
resumeSelected() {
Object.keys(this.selectedMonitors)
.filter(id => !this.$root.monitorList[id].active)
.forEach(id => this.$root.getSocket().emit("resumeMonitor", id, () => {}));
this.cancelSelectMode();
},
/**
* Whether a monitor should be displayed based on the filters
* @param {object} monitor Monitor to check
* @returns {boolean} Should the monitor be displayed
*/
filterFunc(monitor) {
// Group monitors bypass filter if at least 1 of children matched
if (monitor.type === "group") {
const children = Object.values(this.$root.monitorList).filter(m => m.parent === monitor.id);
if (children.some((child, index, children) => this.filterFunc(child))) {
return true;
}
}
// filter by search text
// finds monitor name, tag name or tag value
let searchTextMatch = true;
if (this.searchText !== "") {
const loweredSearchText = this.searchText.toLowerCase();
searchTextMatch =
monitor.name.toLowerCase().includes(loweredSearchText)
|| monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
|| tag.value?.toLowerCase().includes(loweredSearchText));
}
// filter by status
let statusMatch = true;
if (this.filterState.status != null && this.filterState.status.length > 0) {
if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
}
statusMatch = this.filterState.status.includes(monitor.status);
}
// filter by active
let activeMatch = true;
if (this.filterState.active != null && this.filterState.active.length > 0) {
activeMatch = this.filterState.active.includes(monitor.active);
}
// filter by tags
let tagsMatch = true;
if (this.filterState.tags != null && this.filterState.tags.length > 0) {
tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs
.filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
.length > 0;
}
return searchTextMatch && statusMatch && activeMatch && tagsMatch;
},
/**
* Function used in Array.sort to order monitors in a list.
* @param {*} m1 monitor 1
* @param {*} m2 monitor 2
* @returns {number} -1, 0 or 1
*/
sortFunc(m1, m2) {
if (m1.active !== m2.active) {
if (m1.active === false) {
return 1;
}
if (m2.active === false) {
return -1;
}
}
if (m1.weight !== m2.weight) {
if (m1.weight > m2.weight) {
return -1;
}
if (m1.weight < m2.weight) {
return 1;
}
}
return m1.name.localeCompare(m2.name);
}
},
};
@@ -181,8 +409,6 @@ export default {
margin: -10px;
margin-bottom: 10px;
padding: 10px;
display: flex;
justify-content: space-between;
.dark & {
background-color: $dark-header-bg;
@@ -190,6 +416,17 @@ export default {
}
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-filter {
display: flex;
align-items: center;
}
@media (max-width: 770px) {
.list-header {
margin: -20px;
@@ -206,6 +443,16 @@ export default {
.search-icon {
padding: 10px;
color: #c0c0c0;
// Clear filter button (X)
svg[data-icon="times"] {
cursor: pointer;
transition: all ease-in-out 0.1s;
&:hover {
opacity: 0.5;
}
}
}
.search-input {
@@ -229,4 +476,10 @@ export default {
margin-top: 5px;
}
.selection-controls {
margin-top: 5px;
display: flex;
align-items: center;
gap: 10px;
}
</style>

293
src/components/MonitorListFilter.vue Normal file
View File

@@ -0,0 +1,293 @@
<template>
<div class="px-2 pt-2 d-flex">
<button
type="button"
:title="$t('Clear current filters')"
class="clear-filters-btn btn"
:class="{ 'active': numFiltersActive > 0}"
tabindex="0"
:disabled="numFiltersActive === 0"
@click="clearFilters"
>
<font-awesome-icon icon="stream" />
<span v-if="numFiltersActive > 0" class="px-1 fw-bold">{{ numFiltersActive }}</span>
<font-awesome-icon v-if="numFiltersActive > 0" icon="times" />
</button>
<MonitorListFilterDropdown
:filterActive="filterState.status?.length > 0"
>
<template #status>
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
<span v-else>
{{ $t('Status') }}
</span>
</template>
<template #dropdown>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
<div class="d-flex align-items-center justify-content-between">
<Status :status="1" />
<span class="ps-3">
{{ $root.stats.up }}
<span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
<div class="d-flex align-items-center justify-content-between">
<Status :status="0" />
<span class="ps-3">
{{ $root.stats.down }}
<span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
<div class="d-flex align-items-center justify-content-between">
<Status :status="2" />
<span class="ps-3">
{{ $root.stats.pending }}
<span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
<div class="d-flex align-items-center justify-content-between">
<Status :status="3" />
<span class="ps-3">
{{ $root.stats.maintenance }}
<span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
</template>
</MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
<template #status>
<span v-if="filterState.active?.length === 1">
<span v-if="filterState.active[0]">{{ $t("Running") }}</span>
<span v-else>{{ $t("filterActivePaused") }}</span>
</span>
<span v-else>
{{ $t("filterActive") }}
</span>
</template>
<template #dropdown>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
<div class="d-flex align-items-center justify-content-between">
<span>{{ $t("Running") }}</span>
<span class="ps-3">
{{ $root.stats.active }}
<span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
<div class="d-flex align-items-center justify-content-between">
<span>{{ $t("filterActivePaused") }}</span>
<span class="ps-3">
{{ $root.stats.pause }}
<span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
</template>
</MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
<template #status>
<Tag
v-if="filterState.tags?.length === 1"
:item="tagsList.find(tag => tag.id === filterState.tags[0])"
:size="'sm'"
/>
<span v-else>
{{ $t('Tags') }}
</span>
</template>
<template #dropdown>
<li v-for="tag in tagsList" :key="tag.id">
<div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
<div class="d-flex align-items-center justify-content-between">
<span><Tag :item="tag" :size="'sm'" /></span>
<span class="ps-3">
{{ getTaggedMonitorCount(tag) }}
<span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
</div>
</div>
</li>
<li v-if="tagsList.length === 0">
<div class="dropdown-item disabled px-3">
{{ $t('No tags found.') }}
</div>
</li>
</template>
</MonitorListFilterDropdown>
</div>
</template>
<script>
import MonitorListFilterDropdown from "./MonitorListFilterDropdown.vue";
import Status from "./Status.vue";
import Tag from "./Tag.vue";
export default {
components: {
MonitorListFilterDropdown,
Status,
Tag,
},
props: {
filterState: {
type: Object,
required: true,
}
},
emits: [ "updateFilter" ],
data() {
return {
tagsList: [],
};
},
computed: {
numFiltersActive() {
let num = 0;
Object.values(this.filterState).forEach(item => {
if (item != null && item.length > 0) {
num += 1;
}
});
return num;
}
},
mounted() {
this.getExistingTags();
},
methods: {
toggleStatusFilter(status) {
let newFilter = {
...this.filterState
};
if (newFilter.status == null) {
newFilter.status = [ status ];
} else {
if (newFilter.status.includes(status)) {
newFilter.status = newFilter.status.filter(item => item !== status);
} else {
newFilter.status.push(status);
}
}
this.$emit("updateFilter", newFilter);
},
toggleActiveFilter(active) {
let newFilter = {
...this.filterState
};
if (newFilter.active == null) {
newFilter.active = [ active ];
} else {
if (newFilter.active.includes(active)) {
newFilter.active = newFilter.active.filter(item => item !== active);
} else {
newFilter.active.push(active);
}
}
this.$emit("updateFilter", newFilter);
},
toggleTagFilter(tag) {
let newFilter = {
...this.filterState
};
if (newFilter.tags == null) {
newFilter.tags = [ tag.id ];
} else {
if (newFilter.tags.includes(tag.id)) {
newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
} else {
newFilter.tags.push(tag.id);
}
}
this.$emit("updateFilter", newFilter);
},
clearFilters() {
this.$emit("updateFilter", {
status: null,
});
},
getExistingTags() {
this.$root.getSocket().emit("getTags", (res) => {
if (res.ok) {
this.tagsList = res.tags;
}
});
},
getTaggedMonitorCount(tag) {
return Object.values(this.$root.monitorList).filter(monitor => {
return monitor.tags.find(monitorTag => monitorTag.tag_id === tag.id);
}).length;
}
}
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dropdown-item {
cursor: pointer;
}
.clear-filters-btn {
font-size: 0.8em;
margin-right: 5px;
display: flex;
align-items: center;
padding: 2px 10px;
border-radius: 16px;
background-color: transparent;
.dark & {
color: $dark-font-color;
border: 1px solid $dark-font-color2;
}
&.active {
border: 1px solid $highlight;
background-color: $highlight-white;
.dark & {
background-color: $dark-font-color2;
}
}
}
</style>

137
src/components/MonitorListFilterDropdown.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<div tabindex="-1" class="dropdown" @focusin="open = true" @focusout="handleFocusOut">
<button type="button" class="filter-dropdown-status" :class="{ 'active': filterActive }" tabindex="0">
<div class="px-1 d-flex align-items-center">
<slot name="status"></slot>
</div>
<span class="px-1">
<font-awesome-icon icon="angle-down" />
</span>
</button>
<ul class="filter-dropdown-menu" :class="{ 'open': open }">
<slot name="dropdown"></slot>
</ul>
</div>
</template>
<script>
export default {
components: {
},
props: {
filterActive: {
type: Boolean,
required: true,
}
},
data() {
return {
open: false
};
},
methods: {
handleFocusOut(e) {
if (e.relatedTarget != null && this.$el.contains(e.relatedTarget)) {
return;
}
this.open = false;
}
}
};
</script>
<style lang="scss">
@import "../assets/vars.scss";
@import "../assets/app.scss";
.filter-dropdown-menu {
z-index: 100;
transition: all 0.2s;
padding: 5px 0 !important;
border-radius: 16px;
overflow: hidden;
position: absolute;
inset: 0 auto auto 0;
margin: 0;
transform: translate(0, 36px);
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
visibility: hidden;
list-style: none;
height: 0;
opacity: 0;
background: white;
&.open {
height: unset;
visibility: inherit;
opacity: 1;
}
.dropdown-item {
padding: 5px 15px;
}
.dropdown-item:focus {
background: $highlight-white;
.dark & {
background: $dark-bg2;
}
}
.dark & {
background-color: $dark-bg;
color: $dark-font-color;
border-color: $dark-border-color;
.dropdown-item {
color: $dark-font-color;
&.active {
color: $dark-font-color2;
background-color: $highlight !important;
}
&:hover {
background-color: $dark-bg2;
}
}
}
}
.filter-dropdown-status {
@extend .btn-outline-normal;
display: flex;
align-items: center;
margin-left: 5px;
color: $link-color;
.dark & {
color: $dark-font-color;
}
&:focus {
background-color: $highlight-white;
.dark & {
background-color: $dark-font-color2;
}
}
&.active {
border: 1px solid $highlight;
background-color: $highlight-white;
.dark & {
background-color: $dark-font-color2;
}
}
}
.filter-active {
color: $highlight;
}
</style>

253
src/components/MonitorListItem.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<div>
<div :style="depthMargin">
<!-- Checkbox -->
<div v-if="isSelectMode" class="select-input-wrapper">
<input
class="form-check-input select-input"
type="checkbox"
:aria-label="$t('Check/Uncheck')"
:checked="isSelected(monitor.id)"
@click.stop="toggleSelection"
/>
</div>
<router-link :to="monitorURL(monitor.id)" class="item" :class="{ 'disabled': ! monitor.active }">
<div class="row">
<div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
<div class="info">
<Uptime :monitor="monitor" type="24" :pill="true" />
<span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
<font-awesome-icon icon="chevron-down" class="animated" :class="{ collapsed: isCollapsed}" />
</span>
{{ monitor.name }}
</div>
<div v-if="monitor.tags.length > 0" class="tags">
<Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
<div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
</div>
</div>
<div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
<div class="col-12 bottom-style">
<HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
</div>
</div>
</router-link>
</div>
<transition name="slide-fade-up">
<div v-if="!isCollapsed" class="childs">
<MonitorListItem
v-for="(item, index) in sortedChildMonitorList"
:key="index" :monitor="item"
:isSelectMode="isSelectMode"
:isSelected="isSelected"
:select="select"
:deselect="deselect"
:depth="depth + 1"
/>
</div>
</transition>
</div>
</template>
<script>
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Tag from "../components/Tag.vue";
import Uptime from "../components/Uptime.vue";
import { getMonitorRelativeURL } from "../util.ts";
export default {
name: "MonitorListItem",
components: {
Uptime,
HeartbeatBar,
Tag,
},
props: {
/** Monitor this represents */
monitor: {
type: Object,
default: null,
},
/** If the user is in select mode */
isSelectMode: {
type: Boolean,
default: false,
},
/** How many ancestors are above this monitor */
depth: {
type: Number,
default: 0,
},
/** Callback to determine if monitor is selected */
isSelected: {
type: Function,
default: () => {}
},
/** Callback fired when monitor is selected */
select: {
type: Function,
default: () => {}
},
/** Callback fired when monitor is deselected */
deselect: {
type: Function,
default: () => {}
},
/** Function to filter child monitors */
filterFunc: {
type: Function,
default: () => {}
},
/** Function to sort child monitors */
sortFunc: {
type: Function,
default: () => {},
}
},
data() {
return {
isCollapsed: true,
};
},
computed: {
sortedChildMonitorList() {
let result = Object.values(this.$root.monitorList);
// Get children
result = result.filter(childMonitor => childMonitor.parent === this.monitor.id);
// Run filter on children
result = result.filter(this.filterFunc);
result.sort(this.sortFunc);
return result;
},
hasChildren() {
return this.sortedChildMonitorList.length > 0;
},
depthMargin() {
return {
marginLeft: `${31 * this.depth}px`,
};
},
},
watch: {
isSelectMode() {
// TODO: Resize the heartbeat bar, but too slow
// this.$refs.heartbeatBar.resize();
}
},
beforeMount() {
// Always unfold if monitor is accessed directly
if (this.monitor.childrenIDs.includes(parseInt(this.$route.params.id))) {
this.isCollapsed = false;
return;
}
// Set collapsed value based on local storage
let storage = window.localStorage.getItem("monitorCollapsed");
if (storage === null) {
return;
}
let storageObject = JSON.parse(storage);
if (storageObject[`monitor_${this.monitor.id}`] == null) {
return;
}
this.isCollapsed = storageObject[`monitor_${this.monitor.id}`];
},
methods: {
/**
* Changes the collapsed value of the current monitor and saves
* it to local storage
* @returns {void}
*/
changeCollapsed() {
this.isCollapsed = !this.isCollapsed;
// Save collapsed value into local storage
let storage = window.localStorage.getItem("monitorCollapsed");
let storageObject = {};
if (storage !== null) {
storageObject = JSON.parse(storage);
}
storageObject[`monitor_${this.monitor.id}`] = this.isCollapsed;
window.localStorage.setItem("monitorCollapsed", JSON.stringify(storageObject));
},
/**
* Get URL of monitor
* @param {number} id ID of monitor
* @returns {string} Relative URL of monitor
*/
monitorURL(id) {
return getMonitorRelativeURL(id);
},
/**
* Toggle selection of monitor
* @returns {void}
*/
toggleSelection() {
if (this.isSelected(this.monitor.id)) {
this.deselect(this.monitor.id);
} else {
this.select(this.monitor.id);
}
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.small-padding {
padding-left: 5px !important;
padding-right: 5px !important;
}
.collapse-padding {
padding-left: 8px !important;
padding-right: 2px !important;
}
// .monitor-item {
// width: 100%;
// }
.tags {
margin-top: 4px;
padding-left: 67px;
display: flex;
flex-wrap: wrap;
gap: 0;
}
.collapsed {
transform: rotate(-90deg);
}
.animated {
transition: all 0.2s $easing-in;
}
.select-input-wrapper {
float: left;
margin-top: 15px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
position: relative;
z-index: 15;
}
</style>

125
src/components/MonitorSettingDialog.vue Normal file
View File

@@ -0,0 +1,125 @@
<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
* @returns {void}
*/
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
* @returns {void}
*/
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 Should the presence of the sendUrl
* property be ignored. This will only work in edit mode.
* @returns {boolean} Should the link be shown?
*/
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" || this.$root.monitorList[monitor.element.id].type === "json-query";
}
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>

136
src/components/NotificationDialog.vue
View File

@@ -13,7 +13,10 @@
<div class="mb-3">
<label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
<select id="notification-type" v-model="notification.type" class="form-select">
<option v-for="type in notificationTypes" :key="type" :value="type">{{ $t(type) }}</option>
<option v-for="(name, type) in notificationNameList.regularList" :key="type" :value="type">{{ name }}</option>
<optgroup :label="$t('notificationRegional')">
<option v-for="(name, type) in notificationNameList.regionalList" :key="type" :value="type">{{ name }}</option>
</optgroup>
</select>
</div>
@@ -67,7 +70,7 @@
</Confirm>
</template>
<script lang="ts">
<script>
import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue";
@@ -103,7 +106,107 @@ export default {
return null;
}
return NotificationFormList[this.notification.type];
}
},
notificationNameList() {
let regularList = {
"alerta": "Alerta",
"AlertNow": "AlertNow",
"apprise": this.$t("apprise"),
"Bark": "Bark",
"Bitrix24": "Bitrix24",
"clicksendsms": "ClickSend SMS",
"CallMeBot": "CallMeBot (WhatsApp, Telegram Call, Facebook Messanger)",
"discord": "Discord",
"GoogleChat": "Google Chat (Google Workspace)",
"gorush": "Gorush",
"gotify": "Gotify",
"GrafanaOncall": "Grafana Oncall",
"HeiiOnCall": "Heii On-Call",
"HomeAssistant": "Home Assistant",
"Keep": "Keep",
"Kook": "Kook",
"line": "LINE Messenger",
"LineNotify": "LINE Notify",
"lunasea": "LunaSea",
"matrix": "Matrix",
"mattermost": "Mattermost",
"nostr": "Nostr",
"ntfy": "Ntfy",
"octopush": "Octopush",
"OneBot": "OneBot",
"Opsgenie": "Opsgenie",
"PagerDuty": "PagerDuty",
"PagerTree": "PagerTree",
"pushbullet": "Pushbullet",
"PushByTechulus": "Push by Techulus",
"pushover": "Pushover",
"pushy": "Pushy",
"rocket.chat": "Rocket.Chat",
"signal": "Signal",
"slack": "Slack",
"squadcast": "SquadCast",
"SMSEagle": "SMSEagle",
"SMSPartner": "SMS Partner",
"smtp": this.$t("smtp"),
"stackfield": "Stackfield",
"teams": "Microsoft Teams",
"telegram": "Telegram",
"twilio": "Twilio",
"Splunk": "Splunk",
"webhook": "Webhook",
"GoAlert": "GoAlert",
"ZohoCliq": "ZohoCliq",
"SevenIO": "SevenIO",
"whapi": "WhatsApp (Whapi)",
"gtxmessaging": "GtxMessaging",
"Cellsynt": "Cellsynt",
};
// Put notifications here if it's not supported in most regions or its documentation is not in English
let regionalList = {
"AliyunSMS": "AliyunSMS (阿里云短信服务)",
"DingDing": "DingDing (钉钉自定义机器人)",
"Feishu": "Feishu (飞书)",
"FlashDuty": "FlashDuty (快猫星云)",
"FreeMobile": "FreeMobile (mobile.free.fr)",
"PushDeer": "PushDeer",
"promosms": "PromoSMS",
"serwersms": "SerwerSMS.pl",
"SMSManager": "SmsManager (smsmanager.cz)",
"WeCom": "WeCom (企业微信群机器人)",
"ServerChan": "ServerChan (Server酱)",
"smsc": "SMSC",
};
// Sort by notification name
// No idea how, but it works
// https://stackoverflow.com/questions/1069666/sorting-object-property-by-values
let sort = (list2) => {
return Object.entries(list2)
.sort(([ , a ], [ , b ]) => a.localeCompare(b))
.reduce((r, [ k, v ]) => ({
...r,
[k]: v
}), {});
};
return {
regularList: sort(regularList),
regionalList: sort(regionalList),
};
},
notificationFullNameList() {
let list = {};
for (let [ key, value ] of Object.entries(this.notificationNameList.regularList)) {
list[key] = value;
}
for (let [ key, value ] of Object.entries(this.notificationNameList.regionalList)) {
list[key] = value;
}
return list;
},
},
watch: {
@@ -125,7 +228,10 @@ export default {
},
methods: {
/** Show dialog to confirm deletion */
/**
* Show dialog to confirm deletion
* @returns {void}
*/
deleteConfirm() {
this.modal.hide();
this.$refs.confirmDelete.show();
@@ -134,6 +240,7 @@ export default {
/**
* Show settings for specified notification
* @param {number} notificationID ID of notification to show
* @returns {void}
*/
show(notificationID) {
if (notificationID) {
@@ -157,7 +264,10 @@ export default {
this.modal.show();
},
/** Submit the form to the server */
/**
* Submit the form to the server
* @returns {void}
*/
submit() {
this.processing = true;
this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => {
@@ -176,7 +286,10 @@ export default {
});
},
/** Test the notification endpoint */
/**
* Test the notification endpoint
* @returns {void}
*/
test() {
this.processing = true;
this.$root.getSocket().emit("testNotification", this.notification, (res) => {
@@ -185,7 +298,10 @@ export default {
});
},
/** Delete the notification endpoint */
/**
* Delete the notification endpoint
* @returns {void}
*/
deleteNotification() {
this.processing = true;
this.$root.getSocket().emit("deleteNotification", this.id, (res) => {
@@ -200,14 +316,16 @@ export default {
/**
* Get a unique default name for the notification
* @param {keyof NotificationFormList} notificationKey
* @return {string}
* Notification to retrieve
* @returns {string} Default name
*/
getUniqueDefaultName(notificationKey) {
let index = 1;
let name = "";
do {
name = this.$t("defaultNotificationName", {
notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
notification: this.notificationFullNameList[notificationKey].replace(/\(.+\)/, "").trim(),
number: index++
});
} while (this.$root.notificationList.find(it => it.name === name));

446
src/components/PingChart.vue
View File

@@ -1,39 +1,39 @@
<template>
<div>
<div class="period-options">
<button type="button" class="btn btn-light dropdown-toggle btn-period-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<button
type="button" class="btn btn-light dropdown-toggle btn-period-toggle" data-bs-toggle="dropdown"
aria-expanded="false"
>
{{ chartPeriodOptions[chartPeriodHrs] }}&nbsp;
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li v-for="(item, key) in chartPeriodOptions" :key="key">
<a class="dropdown-item" :class="{ active: chartPeriodHrs == key }" href="#" @click="chartPeriodHrs = key">{{ item }}</a>
<button
type="button" class="dropdown-item" :class="{ active: chartPeriodHrs == key }"
@click="chartPeriodHrs = key"
>
{{ item }}
</button>
</li>
</ul>
</div>
<div class="chart-wrapper" :class="{ loading : loading}">
<LineChart :chart-data="chartData" :options="chartOptions" />
<div class="chart-wrapper" :class="{ loading: loading }">
<Line :data="chartData" :options="chartOptions" />
</div>
</div>
</template>
<script lang="ts">
<script lang="js">
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
import "chartjs-adapter-dayjs";
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { LineChart } from "vue-chart-3";
import { useToast } from "vue-toastification";
import { DOWN, log } from "../util.ts";
dayjs.extend(utc);
dayjs.extend(timezone);
const toast = useToast();
import "chartjs-adapter-dayjs-4";
import { Line } from "vue-chartjs";
import { UP, DOWN, PENDING, MAINTENANCE } from "../util.ts";
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
export default {
components: { LineChart },
components: { Line },
props: {
/** ID of monitor */
monitorId: {
@@ -46,8 +46,9 @@ export default {
loading: false,
// Configurable filtering on top of the returned data
chartPeriodHrs: 0,
// Time period for the chart to display, in hours
// Initial value is 0 as a workaround for triggering a data fetch on created()
chartPeriodHrs: "0",
chartPeriodOptions: {
0: this.$t("recent"),
@@ -57,9 +58,8 @@ export default {
168: "1w",
},
// A heartbeatList for 3h, 6h, 24h, 1w
// Uses the $root.heartbeatList when value is null
heartbeatList: null
chartRawData: null,
chartDataFetchInterval: null,
};
},
computed: {
@@ -108,8 +108,10 @@ export default {
}
},
ticks: {
sampleSize: 3,
maxRotation: 0,
autoSkipPadding: 30,
padding: 3,
},
grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
@@ -162,33 +164,198 @@ export default {
};
},
chartData() {
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
let downData = []; // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
if (this.chartPeriodHrs === "0") {
return this.getChartDatapointsFromHeartbeatList();
} else {
return this.getChartDatapointsFromStats();
}
},
},
watch: {
// Update chart data when the selected chart period changes
chartPeriodHrs: function (newPeriod) {
if (this.chartDataFetchInterval) {
clearInterval(this.chartDataFetchInterval);
this.chartDataFetchInterval = null;
}
let heartbeatList = this.heartbeatList ||
(this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
[];
// eslint-disable-next-line eqeqeq
if (newPeriod == "0") {
this.heartbeatList = null;
this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
} else {
this.loading = true;
heartbeatList
.filter(
// Filtering as data gets appended
// not the most efficient, but works for now
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(
dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")
)
)
.map((beat) => {
const x = this.$root.datetime(beat.time);
pingData.push({
x,
y: beat.ping,
});
downData.push({
x,
y: beat.status === DOWN ? 1 : 0,
});
let period;
try {
period = parseInt(newPeriod);
} catch (e) {
// Invalid period
period = 24;
}
this.$root.getMonitorChartData(this.monitorId, period, (res) => {
if (!res.ok) {
this.$root.toastError(res.msg);
} else {
this.chartRawData = res.data;
this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
}
this.loading = false;
});
this.chartDataFetchInterval = setInterval(() => {
this.$root.getMonitorChartData(this.monitorId, period, (res) => {
if (res.ok) {
this.chartRawData = res.data;
}
});
}, 5 * 60 * 1000);
}
}
},
created() {
// Load chart period from storage if saved
let period = this.$root.storage()[`chart-period-${this.monitorId}`];
if (period != null) {
// Has this ever been not a string?
if (typeof period !== "string") {
period = period.toString();
}
this.chartPeriodHrs = period;
} else {
this.chartPeriodHrs = "24";
}
},
beforeUnmount() {
if (this.chartDataFetchInterval) {
clearInterval(this.chartDataFetchInterval);
}
},
methods: {
// Get color of bar chart for this datapoint
getBarColorForDatapoint(datapoint) {
if (datapoint.maintenance != null) {
// Target is in maintenance
return "rgba(23,71,245,0.41)";
} else if (datapoint.down === 0) {
// Target is up, no need to display a bar
return "#000";
} else if (datapoint.up === 0) {
// Target is down
return "rgba(220, 53, 69, 0.41)";
} else {
// Show yellow for mixed status
return "rgba(245, 182, 23, 0.41)";
}
},
// push datapoint to chartData
pushDatapoint(datapoint, avgPingData, minPingData, maxPingData, downData, colorData) {
const x = this.$root.unixToDateTime(datapoint.timestamp);
// Show ping values if it was up in this period
avgPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.avgPing : null,
});
minPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.minPing : null,
});
maxPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.maxPing : null,
});
downData.push({
x,
y: datapoint.down + (datapoint.maintenance || 0),
});
colorData.push(this.getBarColorForDatapoint(datapoint));
},
// get the average of a set of datapoints
getAverage(datapoints) {
const totalUp = datapoints.reduce((total, current) => total + current.up, 0);
const totalDown = datapoints.reduce((total, current) => total + current.down, 0);
const totalMaintenance = datapoints.reduce((total, current) => total + (current.maintenance || 0), 0);
const totalPing = datapoints.reduce((total, current) => total + current.avgPing * current.up, 0);
const minPing = datapoints.reduce((min, current) => Math.min(min, current.minPing), Infinity);
const maxPing = datapoints.reduce((max, current) => Math.max(max, current.maxPing), 0);
// Find the middle timestamp to use
let midpoint = Math.floor(datapoints.length / 2);
return {
timestamp: datapoints[midpoint].timestamp,
up: totalUp,
down: totalDown,
maintenance: totalMaintenance > 0 ? totalMaintenance : undefined,
avgPing: totalUp > 0 ? totalPing / totalUp : 0,
minPing,
maxPing,
};
},
getChartDatapointsFromHeartbeatList() {
// Render chart using heartbeatList
let lastHeartbeatTime;
const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
let downData = []; // Down Data for Bar Chart, y-axis is 1 if target is down (red color), under maintenance (blue color) or pending (orange color), 0 if target is up
let colorData = []; // Color Data for Bar Chart
let heartbeatList = (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) || [];
for (const beat of heartbeatList) {
const beatTime = this.$root.toDayjs(beat.time);
const x = beatTime.format("YYYY-MM-DD HH:mm:ss");
// Insert empty datapoint to separate big gaps
if (lastHeartbeatTime && monitorInterval) {
const diff = Math.abs(beatTime.diff(lastHeartbeatTime));
if (diff > monitorInterval * 1000 * 10) {
// Big gap detected
const gapX = [
lastHeartbeatTime.add(monitorInterval, "second").format("YYYY-MM-DD HH:mm:ss"),
beatTime.subtract(monitorInterval, "second").format("YYYY-MM-DD HH:mm:ss")
];
for (const x of gapX) {
pingData.push({
x,
y: null,
});
downData.push({
x,
y: null,
});
colorData.push("#000");
}
}
}
pingData.push({
x,
y: beat.status === UP ? beat.ping : null,
});
downData.push({
x,
y: (beat.status === DOWN || beat.status === MAINTENANCE || beat.status === PENDING) ? 1 : 0,
});
switch (beat.status) {
case MAINTENANCE:
colorData.push("rgba(23 ,71, 245, 0.41)");
break;
case PENDING:
colorData.push("rgba(245, 182, 23, 0.41)");
break;
default:
colorData.push("rgba(220, 53, 69, 0.41)");
}
lastHeartbeatTime = beatTime;
}
return {
datasets: [
{
@@ -199,69 +366,173 @@ export default {
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B38",
yAxisID: "y",
label: "ping",
},
{
// Bar Chart
type: "bar",
data: downData,
borderColor: "#00000000",
backgroundColor: "#DC354568",
backgroundColor: colorData,
yAxisID: "y1",
barThickness: "flex",
barPercentage: 1,
categoryPercentage: 1,
inflateAmount: 0.05,
label: "status",
},
],
};
},
},
watch: {
// Update chart data when the selected chart period changes
chartPeriodHrs: function (newPeriod) {
getChartDatapointsFromStats() {
// Render chart using UptimeCalculator data
let lastHeartbeatTime;
const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;
// eslint-disable-next-line eqeqeq
if (newPeriod == "0") {
this.heartbeatList = null;
this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
} else {
this.loading = true;
let avgPingData = []; // Ping Data for Line Chart, y-axis contains ping time
let minPingData = []; // Ping Data for Line Chart, y-axis contains ping time
let maxPingData = []; // Ping Data for Line Chart, y-axis contains ping time
let downData = []; // Down Data for Bar Chart, y-axis is number of down datapoints in this period
let colorData = []; // Color Data for Bar Chart
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) {
toast.error(res.msg);
const period = parseInt(this.chartPeriodHrs);
let aggregatePoints = period > 6 ? 12 : 4;
let aggregateBuffer = [];
if (this.chartRawData) {
for (const datapoint of this.chartRawData) {
// Empty datapoints are ignored
if (datapoint.up === 0 && datapoint.down === 0 && datapoint.maintenance === 0) {
continue;
}
const beatTime = this.$root.unixToDayjs(datapoint.timestamp);
// Insert empty datapoint to separate big gaps
if (lastHeartbeatTime && monitorInterval) {
const diff = Math.abs(beatTime.diff(lastHeartbeatTime));
const oneSecond = 1000;
const oneMinute = oneSecond * 60;
const oneHour = oneMinute * 60;
if ((period <= 24 && diff > Math.max(oneMinute * 10, monitorInterval * oneSecond * 10)) ||
(period > 24 && diff > Math.max(oneHour * 10, monitorInterval * oneSecond * 10))) {
// Big gap detected
// Clear the aggregate buffer
if (aggregateBuffer.length > 0) {
const average = this.getAverage(aggregateBuffer);
this.pushDatapoint(average, avgPingData, minPingData, maxPingData, downData, colorData);
aggregateBuffer = [];
}
const gapX = [
lastHeartbeatTime.subtract(monitorInterval, "second").format("YYYY-MM-DD HH:mm:ss"),
this.$root.unixToDateTime(datapoint.timestamp + 60),
];
for (const x of gapX) {
avgPingData.push({
x,
y: null,
});
minPingData.push({
x,
y: null,
});
maxPingData.push({
x,
y: null,
});
downData.push({
x,
y: null,
});
colorData.push("#000");
}
}
}
if (datapoint.up > 0 && this.chartRawData.length > aggregatePoints * 2) {
// Aggregate Up data using a sliding window
aggregateBuffer.push(datapoint);
if (aggregateBuffer.length === aggregatePoints) {
const average = this.getAverage(aggregateBuffer);
this.pushDatapoint(average, avgPingData, minPingData, maxPingData, downData, colorData);
// Remove the first half of the buffer
aggregateBuffer = aggregateBuffer.slice(Math.floor(aggregatePoints / 2));
}
} else {
this.heartbeatList = res.data;
this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
}
this.loading = false;
});
}
}
},
created() {
// Setup Watcher on the root heartbeatList,
// And mirror latest change to this.heartbeatList
this.$watch(() => this.$root.heartbeatList[this.monitorId],
(heartbeatList) => {
// datapoint is fully down or too few datapoints, no need to aggregate
// Clear the aggregate buffer
if (aggregateBuffer.length > 0) {
const average = this.getAverage(aggregateBuffer);
this.pushDatapoint(average, avgPingData, minPingData, maxPingData, downData, colorData);
aggregateBuffer = [];
}
log.debug("ping_chart", `this.chartPeriodHrs type ${typeof this.chartPeriodHrs}, value: ${this.chartPeriodHrs}`);
// eslint-disable-next-line eqeqeq
if (this.chartPeriodHrs != "0") {
const newBeat = heartbeatList.at(-1);
if (newBeat && dayjs.utc(newBeat.time) > dayjs.utc(this.heartbeatList.at(-1)?.time)) {
this.heartbeatList.push(heartbeatList.at(-1));
this.pushDatapoint(datapoint, avgPingData, minPingData, maxPingData, downData, colorData);
}
lastHeartbeatTime = beatTime;
}
},
{ deep: true }
);
// Clear the aggregate buffer if there are still datapoints
if (aggregateBuffer.length > 0) {
const average = this.getAverage(aggregateBuffer);
this.pushDatapoint(average, avgPingData, minPingData, maxPingData, downData, colorData);
aggregateBuffer = [];
}
}
// Load chart period from storage if saved
let period = this.$root.storage()[`chart-period-${this.monitorId}`];
if (period != null) {
this.chartPeriodHrs = Math.min(period, 6);
}
return {
datasets: [
{
// average ping chart
data: avgPingData,
fill: "origin",
tension: 0.2,
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B06",
yAxisID: "y",
label: "avg-ping",
},
{
// minimum ping chart
data: minPingData,
fill: "origin",
tension: 0.2,
borderColor: "#3CBD6B38",
backgroundColor: "#5CDD8B06",
yAxisID: "y",
label: "min-ping",
},
{
// maximum ping chart
data: maxPingData,
fill: "origin",
tension: 0.2,
borderColor: "#7CBD6B38",
backgroundColor: "#5CDD8B06",
yAxisID: "y",
label: "max-ping",
},
{
// Bar Chart
type: "bar",
data: downData,
borderColor: "#00000000",
backgroundColor: colorData,
yAxisID: "y1",
barThickness: "flex",
barPercentage: 1,
categoryPercentage: 1,
inflateAmount: 0.05,
label: "status",
},
],
};
},
}
};
</script>
@@ -296,6 +567,7 @@ export default {
.dark & {
background: $dark-bg;
color: $dark-font-color;
}
.dark &:hover {

17
src/components/ProxyDialog.vue
View File

@@ -17,6 +17,7 @@
<option value="http">HTTP</option>
<option value="socks">SOCKS</option>
<option value="socks5">SOCKS v5</option>
<option value="socks5h">SOCKS v5 (+DNS)</option>
<option value="socks4">SOCKS v4</option>
</select>
</div>
@@ -130,7 +131,10 @@ export default {
},
methods: {
/** Show dialog to confirm deletion */
/**
* Show dialog to confirm deletion
* @returns {void}
*/
deleteConfirm() {
this.modal.hide();
this.$refs.confirmDelete.show();
@@ -139,6 +143,7 @@ export default {
/**
* Show settings for specified proxy
* @param {number} proxyID ID of proxy to show
* @returns {void}
*/
show(proxyID) {
if (proxyID) {
@@ -168,7 +173,10 @@ export default {
this.modal.show();
},
/** Submit form data for saving */
/**
* Submit form data for saving
* @returns {void}
*/
submit() {
this.processing = true;
this.$root.getSocket().emit("addProxy", this.proxy, this.id, (res) => {
@@ -186,7 +194,10 @@ export default {
});
},
/** Delete this proxy */
/**
* Delete this proxy
* @returns {void}
*/
deleteProxy() {
this.processing = true;
this.$root.getSocket().emit("deleteProxy", this.id, (res) => {

91
src/components/PublicGroupList.vue
View File

@@ -44,29 +44,34 @@
:href="monitor.element.url"
class="item-name"
target="_blank"
rel="noopener noreferrer"
>
{{ 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>
<div v-if="showTags" class="tags">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
<div class="extra-info">
<div v-if="showCertificateExpiry && monitor.element.certExpiryDaysRemaining">
<Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
</div>
<div v-if="showTags">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
</div>
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
<HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
</div>
</div>
</div>
@@ -76,9 +81,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";
@@ -86,6 +93,7 @@ import Tag from "./Tag.vue";
export default {
components: {
MonitorSettingDialog,
Draggable,
HeartbeatBar,
Uptime,
@@ -100,6 +108,10 @@ export default {
/** Should tags be shown? */
showTags: {
type: Boolean,
},
/** Should expiry be shown? */
showCertificateExpiry: {
type: Boolean,
}
},
data() {
@@ -119,6 +131,7 @@ export default {
/**
* Remove the specified group
* @param {number} index Index of group to remove
* @returns {void}
*/
removeGroup(index) {
this.$root.publicGroupList.splice(index, 1);
@@ -129,36 +142,55 @@ export default {
* @param {number} groupIndex Index of group to remove monitor
* from
* @param {number} index Index of monitor to remove
* @returns {void}
*/
removeMonitor(groupIndex, index) {
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
* 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
* @param {object} monitor Monitor to check
* @param {boolean} ignoreSendUrl Should the presence of the sendUrl
* property be ignored. This will only work in edit mode.
* @returns {boolean}
* @returns {boolean} Should the link be shown
*/
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 this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
}
return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://";
},
/**
* Returns formatted certificate expiry or Bad cert message
* @param {object} monitor Monitor to show expiry for
* @returns {string} Certificate expiry message
*/
formattedCertExpiryMessage(monitor) {
if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
} else if (monitor?.element?.validCert === false) {
return this.$t("noOrBadCertificate");
} else {
return this.$t("Unknown") + " " + this.$tc("day", 2);
}
},
/**
* Returns certificate expiry color based on days remaining
* @param {object} monitor Monitor to show expiry for
* @returns {string} Color for certificate expiry
*/
certExpiryColor(monitor) {
if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
return "#059669";
}
return "#DC2626";
},
}
};
@@ -167,6 +199,15 @@ export default {
<style lang="scss" scoped>
@import "../assets/vars";
.extra-info {
display: flex;
margin-bottom: 0.5rem;
}
.extra-info > div > div:first-child {
margin-left: 0 !important;
}
.no-monitor-msg {
position: absolute;
width: 100%;
@@ -224,4 +265,8 @@ export default {
}
}
.bg-maintenance {
background-color: $maintenance;
}
</style>

185
src/components/RemoteBrowserDialog.vue Normal file
View File

@@ -0,0 +1,185 @@
<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("Add a Remote Browser") }}
</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="remote-browser-name" class="form-label">{{ $t("Friendly Name") }}</label>
<input id="remote-browser-name" v-model="remoteBrowser.name" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="remote-browser-url" class="form-label">{{ $t("URL") }}</label>
<input id="remote-browser-url" v-model="remoteBrowser.url" type="text" class="form-control" required>
<div class="form-text mt-3">
{{ $t("Examples") }}:
<ul>
<li>ws://chrome.browserless.io/playwright?token=YOUR-API-TOKEN</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
{{ $t("Delete") }}
</button>
<button type="button" class="btn btn-warning" :disabled="processing" @click="test">
{{ $t("Test") }}
</button>
<button type="submit" class="btn btn-primary" :disabled="processing">
<div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
{{ $t("Save") }}
</button>
</div>
</div>
</div>
</div>
</form>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteDockerHost">
{{ $t("deleteRemoteBrowserMessage") }}
</Confirm>
</template>
<script>
import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue";
export default {
components: {
Confirm,
},
props: {},
emits: [ "added" ],
data() {
return {
modal: null,
processing: false,
id: null,
remoteBrowser: {
name: "",
url: "",
// Do not set default value here, please scroll to show()
}
};
},
mounted() {
this.modal = new Modal(this.$refs.modal);
},
methods: {
/**
* Confirm deletion of docker host
* @returns {void}
*/
deleteConfirm() {
this.modal.hide();
this.$refs.confirmDelete.show();
},
/**
* Show specified docker host
* @param {number} remoteBrowserID ID of host to show
* @returns {void}
*/
show(remoteBrowserID) {
if (remoteBrowserID) {
let found = false;
this.id = remoteBrowserID;
for (let n of this.$root.remoteBrowserList) {
if (n.id === remoteBrowserID) {
this.remoteBrowser = n;
found = true;
break;
}
}
if (!found) {
this.$root.toastError(this.$t("Remote Browser not found!"));
}
} else {
this.id = null;
this.remoteBrowser = {
name: "",
url: "",
};
}
this.modal.show();
},
/**
* Add docker host
* @returns {void}
*/
submit() {
this.processing = true;
this.$root.getSocket().emit("addRemoteBrowser", this.remoteBrowser, this.id, (res) => {
this.$root.toastRes(res);
this.processing = false;
if (res.ok) {
this.modal.hide();
// Emit added event, doesn't emit edit.
if (! this.id) {
this.$emit("added", res.id);
}
}
});
},
/**
* Test the docker host
* @returns {void}
*/
test() {
this.processing = true;
this.$root.getSocket().emit("testRemoteBrowser", this.remoteBrowser, (res) => {
this.$root.toastRes(res);
this.processing = false;
});
},
/**
* Delete this docker host
* @returns {void}
*/
deleteDockerHost() {
this.processing = true;
this.$root.getSocket().emit("deleteRemoteBrowser", this.id, (res) => {
this.$root.toastRes(res);
this.processing = false;
if (res.ok) {
this.modal.hide();
}
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
</style>

52
src/components/ScreenshotDialog.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div ref="modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ $t("Browser Screenshot") }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body"></div>
<img :src="imageURL" alt="screenshot of the website">
</div>
</div>
</div>
</template>
<script lang="ts">
import { Modal } from "bootstrap";
export default {
props: {
imageURL: {
type: String,
required: true,
},
},
data() {
return {
modal: null,
};
},
mounted() {
this.modal = new Modal(this.$refs.modal);
},
methods: {
show() {
this.modal.show();
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
</style>

8
src/components/Status.vue
View File

@@ -26,6 +26,10 @@ export default {
return "warning";
}
if (this.status === 3) {
return "maintenance";
}
return "secondary";
},
@@ -42,6 +46,10 @@ export default {
return this.$t("Pending");
}
if (this.status === 3) {
return this.$t("statusMaintenance");
}
return this.$t("Unknown");
},
},

15
src/components/Tag.vue
View File

@@ -6,7 +6,7 @@
'm-2': size == 'normal',
'px-2': size == 'sm',
'py-0': size == 'sm',
'm-1': size == 'sm',
'mx-1': size == 'sm',
}"
:style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
>
@@ -18,9 +18,16 @@
</template>
<script>
/**
* @typedef {import('./TagsManager.vue').Tag} Tag
*/
export default {
props: {
/** Object representing tag */
/**
* Object representing tag
* @type {Tag}
*/
item: {
type: Object,
required: true,
@@ -32,7 +39,7 @@ export default {
},
/**
* Size of tag
* @values normal, small
* @type {"normal" | "small"}
*/
size: {
type: String,
@@ -41,7 +48,7 @@ export default {
},
computed: {
displayText() {
if (this.item.value === "") {
if (this.item.value === "" || this.item.value === undefined) {
return this.item.name;
} else {
return `${this.item.name}: ${this.item.value}`;

485
src/components/TagEditDialog.vue Normal file
View File

@@ -0,0 +1,485 @@
<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("Edit Tag") }}
</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="tag-name" class="form-label">{{ $t("Name") }}</label>
<input
id="tag-name"
v-model="tag.name"
type="text"
class="form-control"
:class="{'is-invalid': nameInvalid}"
required
>
<div class="invalid-feedback">
{{ $t("Tag with this name already exist.") }}
</div>
</div>
<div class="mb-3">
<label for="tag-color" class="form-label">{{ $t("color") }}</label>
<div class="d-flex">
<div class="col-8 pe-1">
<vue-multiselect
v-model="selectedColor"
:options="colorOptions"
:multiple="false"
:searchable="true"
:placeholder="$t('color')"
track-by="color"
label="name"
select-label=""
deselect-label=""
>
<template #option="{ option }">
<div
class="mx-2 py-1 px-3 rounded d-inline-flex"
style="height: 24px; color: white;"
:style="{ backgroundColor: option.color + ' !important' }"
>
<span>{{ option.name }}</span>
</div>
</template>
<template #singleLabel="{ option }">
<div
class="py-1 px-3 rounded d-inline-flex"
style="height: 24px; color: white;"
:style="{ backgroundColor: option.color + ' !important' }"
>
<span>{{ option.name }}</span>
</div>
</template>
</vue-multiselect>
</div>
<div class="col-4 ps-1">
<input id="tag-color-hex" v-model="tag.color" type="text" class="form-control">
</div>
</div>
</div>
<div class="mb-3">
<label for="tag-monitors" class="form-label">{{ $tc("Monitor", selectedMonitors.length) }}</label>
<div class="tag-monitors-list">
<router-link v-for="monitor in selectedMonitors" :key="monitor.id" class="d-flex align-items-center justify-content-between text-decoration-none tag-monitors-list-row py-2 px-3" :to="monitorURL(monitor.id)" @click="modal.hide()">
<span>{{ monitor.name }}</span>
<button type="button" class="btn-rm-monitor btn btn-outline-danger ms-2 py-1" @click.stop.prevent="removeMonitor(monitor.id)">
<font-awesome-icon class="" icon="times" />
</button>
</router-link>
</div>
<div v-if="allMonitorList.length > 0" class="pt-3">
<label class="form-label">{{ $t("Add a monitor") }}:</label>
<VueMultiselect
v-model="selectedAddMonitor"
:options="allMonitorList"
:multiple="false"
:searchable="true"
:placeholder="$t('Add a monitor')"
label="name"
trackBy="name"
class="mt-1"
>
<template #option="{ option }">
<div class="d-inline-flex">
<span>{{ option.name }} <Tag v-for="monitorTag in option.tags" :key="monitorTag" :item="monitorTag" :size="'sm'" /></span>
</div>
</template>
</VueMultiselect>
</div>
</div>
</div>
<div class="modal-footer">
<button v-if="tag && tag.id !== null" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
{{ $t("Delete") }}
</button>
<button type="submit" class="btn btn-primary" :disabled="processing">
<div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
{{ $t("Save") }}
</button>
</div>
</div>
</div>
</div>
</form>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
{{ $t("confirmDeleteTagMsg") }}
</Confirm>
</template>
<script>
import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue";
import Tag from "./Tag.vue";
import VueMultiselect from "vue-multiselect";
import { colorOptions } from "../util-frontend";
import { getMonitorRelativeURL } from "../util.ts";
export default {
components: {
VueMultiselect,
Confirm,
Tag,
},
props: {
updated: {
type: Function,
default: () => {},
},
existingTags: {
type: Array,
default: () => [],
},
},
data() {
return {
modal: null,
processing: false,
selectedColor: {
name: null,
color: null,
},
tag: {
id: null,
name: "",
color: "",
// Do not set default value here, please scroll to show()
},
monitors: [],
removingMonitor: [],
addingMonitor: [],
selectedAddMonitor: null,
nameInvalid: false,
};
},
computed: {
colorOptions() {
if (!colorOptions(this).find(option => option.color === this.tag.color)) {
return colorOptions(this).concat(
{
name: "custom",
color: this.tag.color
});
} else {
return colorOptions(this);
}
},
selectedMonitors() {
return this.monitors
.concat(Object.values(this.$root.monitorList).filter(monitor => this.addingMonitor.includes(monitor.id)))
.filter(monitor => !this.removingMonitor.includes(monitor.id));
},
allMonitorList() {
return Object.values(this.$root.monitorList).filter(monitor => !this.selectedMonitors.includes(monitor));
},
},
watch: {
// Set color option to "Custom" when a unknown color is entered
"tag.color"(to, from) {
if (to !== "" && colorOptions(this).find(x => x.color === to) == null) {
this.selectedColor.name = this.$t("Custom");
this.selectedColor.color = to;
}
},
"tag.name"(to, from) {
if (to != null) {
this.validate();
}
},
selectedColor(to, from) {
if (to != null) {
this.tag.color = to.color;
}
},
/**
* Selected a monitor and add to the list.
* @param {object} monitor Monitor to add
* @returns {void}
*/
selectedAddMonitor(monitor) {
if (monitor) {
if (this.removingMonitor.includes(monitor.id)) {
this.removingMonitor = this.removingMonitor.filter(id => id !== monitor.id);
} else {
this.addingMonitor.push(monitor.id);
}
this.selectedAddMonitor = null;
}
},
},
mounted() {
this.modal = new Modal(this.$refs.modal);
},
methods: {
/**
* Show confirmation for deleting a tag
* @returns {void}
*/
deleteConfirm() {
this.$refs.confirmDelete.show();
},
/**
* Reset the editTag form
* @returns {void}
*/
reset() {
this.selectedColor = null;
this.tag = {
id: null,
name: "",
color: "",
};
this.monitors = [];
this.removingMonitor = [];
this.addingMonitor = [];
},
/**
* Check for existing tags of the same name, set invalid input
* @returns {boolean} True if editing tag is valid
*/
validate() {
this.nameInvalid = false;
const sameName = this.existingTags.find((existingTag) => existingTag.name === this.tag.name);
if (sameName != null && sameName.id !== this.tag.id) {
this.nameInvalid = true;
return false;
}
return true;
},
/**
* Load tag information for display in the edit dialog
* @param {object} tag tag object to edit
* @returns {void}
*/
show(tag) {
if (tag) {
this.selectedColor = this.colorOptions.find(x => x.color === tag.color) ?? {
name: this.$t("Custom"),
color: tag.color
};
this.tag.id = tag.id;
this.tag.name = tag.name;
this.tag.color = tag.color;
this.monitors = this.monitorsByTag(tag.id);
this.removingMonitor = [];
this.addingMonitor = [];
this.selectedAddMonitor = null;
}
this.modal.show();
},
/**
* Submit tag and monitorTag changes to server
* @returns {Promise<void>}
*/
async submit() {
this.processing = true;
let editResult = true;
if (!this.validate()) {
this.processing = false;
return;
}
if (this.tag.id == null) {
await this.addTagAsync(this.tag).then((res) => {
if (!res.ok) {
this.$root.toastRes(res.msg);
editResult = false;
} else {
this.tag.id = res.tag.id;
this.updated();
}
});
}
if (!editResult) {
return;
}
for (let addId of this.addingMonitor) {
await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
if (!res.ok) {
this.$root.toastError(res.msg);
editResult = false;
}
});
}
for (let removeId of this.removingMonitor) {
this.monitors.find(monitor => monitor.id === removeId)?.tags.forEach(async (monitorTag) => {
await this.deleteMonitorTagAsync(this.tag.id, removeId, monitorTag.value).then((res) => {
if (!res.ok) {
this.$root.toastError(res.msg);
editResult = false;
}
});
});
}
this.$root.getSocket().emit("editTag", this.tag, (res) => {
this.$root.toastRes(res);
this.processing = false;
if (res.ok && editResult) {
this.updated();
this.modal.hide();
}
});
},
/**
* Delete the editing tag from server
* @returns {Promise<void>}
*/
async deleteTag() {
this.processing = true;
await this.deleteTagAsync(this.tag.id).then((res) => {
this.$root.toastRes(res);
this.processing = false;
if (res.ok) {
this.updated();
this.modal.hide();
}
});
},
/**
* Remove a monitor from the monitors list locally
* @param {number} id id of the tag to remove
* @returns {void}
*/
removeMonitor(id) {
if (this.addingMonitor.includes(id)) {
this.addingMonitor = this.addingMonitor.filter(x => x !== id);
} else {
this.removingMonitor.push(id);
}
},
/**
* Get monitors which has a specific tag locally
* @param {number} tagId id of the tag to filter
* @returns {object[]} list of monitors which has a specific tag
*/
monitorsByTag(tagId) {
return Object.values(this.$root.monitorList).filter((monitor) => {
return monitor.tags.find(monitorTag => monitorTag.tag_id === tagId);
});
},
/**
* Get URL of monitor
* @param {number} id ID of monitor
* @returns {string} Relative URL of monitor
*/
monitorURL(id) {
return getMonitorRelativeURL(id);
},
/**
* Add a tag asynchronously
* @param {object} newTag Object representing new tag to add
* @returns {Promise<void>}
*/
addTagAsync(newTag) {
return new Promise((resolve) => {
this.$root.getSocket().emit("addTag", newTag, resolve);
});
},
/**
* Delete a tag asynchronously
* @param {number} tagId ID of tag to delete
* @returns {Promise<void>}
*/
deleteTagAsync(tagId) {
return new Promise((resolve) => {
this.$root.getSocket().emit("deleteTag", tagId, resolve);
});
},
/**
* Add a tag to a monitor asynchronously
* @param {number} tagId ID of tag to add
* @param {number} monitorId ID of monitor to add tag to
* @param {string} value Value of tag
* @returns {Promise<void>}
*/
addMonitorTagAsync(tagId, monitorId, value) {
return new Promise((resolve) => {
this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
});
},
/**
* Delete a tag from a monitor asynchronously
* @param {number} tagId ID of tag to remove
* @param {number} monitorId ID of monitor to remove tag from
* @param {string} value Value of tag
* @returns {Promise<void>}
*/
deleteMonitorTagAsync(tagId, monitorId, value) {
return new Promise((resolve) => {
this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
.btn-rm-monitor {
padding-left: 11px;
padding-right: 11px;
}
.tag-monitors-list {
max-height: 40vh;
overflow-y: scroll;
}
.tag-monitors-list .tag-monitors-list-row {
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
.dark & {
border-bottom: 1px solid $dark-border-color;
}
&:hover {
background-color: $highlight-white;
}
.dark &:hover {
background-color: $dark-bg2;
}
}
</style>

90
src/components/TagsManager.vue
View File

@@ -129,9 +129,21 @@
<script>
import { Modal } from "bootstrap";
import VueMultiselect from "vue-multiselect";
import { useToast } from "vue-toastification";
import { colorOptions } from "../util-frontend";
import Tag from "../components/Tag.vue";
const toast = useToast();
/**
* @typedef Tag
* @type {object}
* @property {number | undefined} id ID of tag assignment
* @property {number | undefined} monitor_id ID of monitor tag is
* assigned to
* @property {number | undefined} tag_id ID of tag
* @property {string} value Value given to tag
* @property {string} name Name of tag
* @property {string} color Colour of tag
* @property {boolean | undefined} new Should a new tag be created?
*/
export default {
components: {
@@ -139,7 +151,10 @@ export default {
VueMultiselect,
},
props: {
/** Array of tags to be pre-selected */
/**
* Array of tags to be pre-selected
* @type {Tag[]}
*/
preSelectedTags: {
type: Array,
default: () => [],
@@ -147,10 +162,14 @@ export default {
},
data() {
return {
/** @type {Modal | null} */
modal: null,
/** @type {Tag[]} */
existingTags: [],
processing: false,
/** @type {Tag[]} */
newTags: [],
/** @type {Tag[]} */
deleteTags: [],
newDraftTag: {
name: null,
@@ -176,24 +195,7 @@ export default {
return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id === tag.id));
},
colorOptions() {
return [
{ name: this.$t("Gray"),
color: "#4B5563" },
{ name: this.$t("Red"),
color: "#DC2626" },
{ name: this.$t("Orange"),
color: "#D97706" },
{ name: this.$t("Green"),
color: "#059669" },
{ name: this.$t("Blue"),
color: "#2563EB" },
{ name: this.$t("Indigo"),
color: "#4F46E5" },
{ name: this.$t("Purple"),
color: "#7C3AED" },
{ name: this.$t("Pink"),
color: "#DB2777" },
];
return colorOptions(this);
},
validateDraftTag() {
let nameInvalid = false;
@@ -204,7 +206,7 @@ export default {
nameInvalid = false;
valueInvalid = false;
invalid = false;
} else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0) {
} else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0 && this.newDraftTag.select == null) {
// Try to create new tag with existing name
nameInvalid = true;
invalid = true;
@@ -242,23 +244,30 @@ export default {
this.getExistingTags();
},
methods: {
/** Show the add tag dialog */
/**
* Show the add tag dialog
* @returns {void}
*/
showAddDialog() {
this.modal.show();
},
/** Get all existing tags */
/**
* Get all existing tags
* @returns {void}
*/
getExistingTags() {
this.$root.getSocket().emit("getTags", (res) => {
if (res.ok) {
this.existingTags = res.tags;
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
/**
* Delete the specified tag
* @param {Object} tag Object representing tag to delete
* @param {object} item Object representing tag to delete
* @returns {void}
*/
deleteTag(item) {
if (item.new) {
@@ -271,10 +280,10 @@ export default {
},
/**
* Get colour of text inside the tag
* @param {Object} option The tag that needs to be displayed.
* @param {object} option The tag that needs to be displayed.
* Defaults to "white" unless the tag has no color, which will
* then return the body color (based on application theme)
* @returns string
* @returns {string} Text color
*/
textColor(option) {
if (option.color) {
@@ -283,7 +292,10 @@ export default {
return this.$root.theme === "light" ? "var(--bs-body-color)" : "inherit";
}
},
/** Add a draft tag */
/**
* Add a draft tag
* @returns {void}
*/
addDraftTag() {
console.log("Adding Draft Tag: ", this.newDraftTag);
if (this.newDraftTag.select != null) {
@@ -311,7 +323,10 @@ export default {
}
this.clearDraftTag();
},
/** Remove a draft tag */
/**
* Remove a draft tag
* @returns {void}
*/
clearDraftTag() {
this.newDraftTag = {
name: null,
@@ -325,7 +340,7 @@ export default {
},
/**
* Add a tag asynchronously
* @param {Object} newTag Object representing new tag to add
* @param {object} newTag Object representing new tag to add
* @returns {Promise<void>}
*/
addTagAsync(newTag) {
@@ -357,7 +372,10 @@ export default {
this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
});
},
/** Handle pressing Enter key when inside the modal */
/**
* Handle pressing Enter key when inside the modal
* @returns {void}
*/
onEnter() {
if (!this.validateDraftTag.invalid) {
this.addDraftTag();
@@ -366,7 +384,7 @@ export default {
/**
* Submit the form data
* @param {number} monitorId ID of monitor this change affects
* @returns {void}
* @returns {Promise<void>}
*/
async submit(monitorId) {
console.log(`Submitting tag changes for monitor ${monitorId}...`);
@@ -379,7 +397,7 @@ export default {
let newTagResult;
await this.addTagAsync(newTag).then((res) => {
if (!res.ok) {
toast.error(res.msg);
this.$root.toastError(res.msg);
newTagResult = false;
}
newTagResult = res.tag;
@@ -404,7 +422,7 @@ export default {
// Assign tag to monitor
await this.addMonitorTagAsync(tagId, monitorId, newTag.value).then((res) => {
if (!res.ok) {
toast.error(res.msg);
this.$root.toastError(res.msg);
newMonitorTagResult = false;
}
newMonitorTagResult = true;
@@ -420,7 +438,7 @@ export default {
let deleteMonitorTagResult;
await this.deleteMonitorTagAsync(deleteTag.tag_id, deleteTag.monitor_id, deleteTag.value).then((res) => {
if (!res.ok) {
toast.error(res.msg);
this.$root.toastError(res.msg);
deleteMonitorTagResult = false;
}
deleteMonitorTagResult = true;

55
src/components/TwoFADialog.vue
View File

@@ -28,6 +28,7 @@
v-model="currentPassword"
type="password"
class="form-control"
autocomplete="current-password"
required
/>
</div>
@@ -43,7 +44,7 @@
<div v-if="uri && twoFAStatus == false" class="mt-3">
<label for="basic-url" class="form-label">{{ $t("twoFAVerifyLabel") }}</label>
<div class="input-group">
<input v-model="token" type="text" maxlength="6" class="form-control">
<input v-model="token" type="text" maxlength="6" class="form-control" autocomplete="one-time-code" required>
<button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
</div>
<p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p>
@@ -75,8 +76,6 @@
import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue";
import VueQrcode from "vue-qrcode";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
@@ -100,22 +99,34 @@ export default {
this.getStatus();
},
methods: {
/** Show the dialog */
/**
* Show the dialog
* @returns {void}
*/
show() {
this.modal.show();
},
/** Show dialog to confirm enabling 2FA */
/**
* Show dialog to confirm enabling 2FA
* @returns {void}
*/
confirmEnableTwoFA() {
this.$refs.confirmEnableTwoFA.show();
},
/** Show dialog to confirm disabling 2FA */
/**
* Show dialog to confirm disabling 2FA
* @returns {void}
*/
confirmDisableTwoFA() {
this.$refs.confirmDisableTwoFA.show();
},
/** Prepare 2FA configuration */
/**
* Prepare 2FA configuration
* @returns {void}
*/
prepare2FA() {
this.processing = true;
@@ -125,12 +136,15 @@ export default {
if (res.ok) {
this.uri = res.uri;
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
/** Save the current 2FA configuration */
/**
* Save the current 2FA configuration
* @returns {void}
*/
save2FA() {
this.processing = true;
@@ -143,12 +157,15 @@ export default {
this.currentPassword = "";
this.modal.hide();
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
/** Disable 2FA for this user */
/**
* Disable 2FA for this user
* @returns {void}
*/
disable2FA() {
this.processing = true;
@@ -161,29 +178,35 @@ export default {
this.currentPassword = "";
this.modal.hide();
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
/** Verify the token generated by the user */
/**
* Verify the token generated by the user
* @returns {void}
*/
verifyToken() {
this.$root.getSocket().emit("verifyToken", this.token, this.currentPassword, (res) => {
if (res.ok) {
this.tokenValid = res.valid;
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
/** Get current status of 2FA */
/**
* Get current status of 2FA
* @returns {void}
*/
getStatus() {
this.$root.getSocket().emit("twoFAStatus", (res) => {
if (res.ok) {
this.twoFAStatus = res.status;
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},

35
src/components/Uptime.vue
View File

@@ -1,8 +1,10 @@
<template>
<span :class="className" :title="24 + $t('-hour')">{{ uptime }}</span>
<span :class="className" :title="title">{{ uptime }}</span>
</template>
<script>
import { DOWN, MAINTENANCE, PENDING, UP } from "../util.ts";
export default {
props: {
/** Monitor this represents */
@@ -24,26 +26,39 @@ export default {
computed: {
uptime() {
if (this.type === "maintenance") {
return this.$t("statusMaintenance");
}
let key = this.monitor.id + "_" + this.type;
if (this.$root.uptimeList[key] !== undefined) {
return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
let result = Math.round(this.$root.uptimeList[key] * 10000) / 100;
// Only perform sanity check on status page. See louislam/uptime-kuma#2628
if (this.$route.path.startsWith("/status") && result > 100) {
return "100%";
} else {
return result + "%";
}
}
return this.$t("notAvailableShort");
},
color() {
if (this.lastHeartBeat.status === 0) {
if (this.lastHeartBeat.status === MAINTENANCE) {
return "maintenance";
}
if (this.lastHeartBeat.status === DOWN) {
return "danger";
}
if (this.lastHeartBeat.status === 1) {
if (this.lastHeartBeat.status === UP) {
return "primary";
}
if (this.lastHeartBeat.status === 2) {
if (this.lastHeartBeat.status === PENDING) {
return "warning";
}
@@ -67,6 +82,16 @@ export default {
return "";
},
title() {
if (this.type === "1y") {
return `1${this.$t("-year")}`;
}
if (this.type === "720") {
return `30${this.$t("-day")}`;
}
return `24${this.$t("-hour")}`;
}
},
};
</script>

7
src/components/notifications/Bark.vue
View File

@@ -1,4 +1,11 @@
<template>
<div class="mb-3">
<label for="Bark API Version" class="form-label">{{ $t("Bark API Version") }}</label>
<select id="Bark API Version" v-model="$parent.notification.apiVersion" class="form-select" required>
<option value="v1">v1</option>
<option value="v2">v2</option>
</select>
</div>
<div class="mb-3">
<label for="Bark Endpoint" class="form-label">{{ $t("Bark Endpoint") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="Bark Endpoint" v-model="$parent.notification.barkEndpoint" type="text" class="form-control" required>

24
src/components/notifications/Bitrix24.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="mb-3">
<label for="bitrix24-webhook-url" class="form-label">{{ $t("Bitrix24 Webhook URL") }}</label>
<HiddenInput id="bitrix24-webhook-url" v-model="$parent.notification.bitrix24WebhookURL" :required="true" autocomplete="new-password"></HiddenInput>
<i18n-t tag="div" keypath="wayToGetBitrix24Webhook" class="form-text">
<a href="https://helpdesk.bitrix24.com/open/12357038/" target="_blank">https://helpdesk.bitrix24.com/open/12357038/</a>
</i18n-t>
</div>
<div class="mb-3">
<label for="bitrix24-user-id" class="form-label">{{ $t("User ID") }}</label>
<input id="bitrix24-user-id" v-model="$parent.notification.bitrix24UserID" type="text" class="form-control" required>
<div class="form-text">{{ $t("bitrix24SupportUserID") }}</div>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
}
};
</script>

13
src/components/notifications/CallMeBot.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="mb-3">
<label for="callmebot-endpoint" class="form-label">{{ $t("Endpoint") }}</label>
<input id="callmebot-endpoint" v-model="$parent.notification.callMeBotEndpoint" type="text" class="form-control" required>
<i18n-t tag="div" keypath="callMeBotGet" class="form-text">
<a href="https://www.callmebot.com/blog/free-api-facebook-messenger/" target="_blank">Facebook Messenger</a>
<a href="https://www.callmebot.com/blog/test-whatsapp-api/" target="_blank">WhatsApp</a>
<a href="https://www.callmebot.com/blog/telegram-phone-call-using-your-browser/" target="_blank">Telegram Call</a>
1 message / 10 sec; 1 call / 65 sec
<!--There is no public documentation available. This data is based on testing!-->
</i18n-t>
</div>
</template>

54
src/components/notifications/Cellsynt.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div class="mb-3">
<label for="cellsynt-login" class="form-label">{{ $t("Username") }}</label>
<input id="cellsynt-login" v-model="$parent.notification.cellsyntLogin" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="cellsynt-key" class="form-label">{{ $t("Password") }}</label>
<HiddenInput id="cellsynt-key" v-model="$parent.notification.cellsyntPassword" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<label for="cellsynt-Originatortype" class="form-label">{{ $t("Originator type") }}</label>
<select id="cellsynt-Originatortype" v-model="$parent.notification.cellsyntOriginatortype" :required="true" class="form-select">
<option value="alpha">{{ $t("Alphanumeric (recommended)") }}</option>
<option value="numeric">{{ $t("Telephone number") }}</option>
</select>
<div class="form-text">
<p><b>{{ $t("Alphanumeric (recommended)") }}:</b><br /> {{ $t("Alphanumeric string (max 11 alphanumeric characters). Recipients can not reply to the message.") }}</p>
<p><b>{{ $t("Telephone number") }}:</b><br /> {{ $t("Numeric value (max 15 digits) with telephone number on international format without leading 00 (example UK number 07920 110 000 should be set as 447920110000). Recipients can reply to the message.") }}</p>
</div>
</div>
<div class="mb-3">
<label for="cellsynt-originator" class="form-label">{{ $t("Originator") }} <small>({{ $parent.notification.cellsyntOriginatortype === 'alpha' ? $t("max 11 alphanumeric characters") : $t("max 15 digits") }})</small></label>
<input v-if="$parent.notification.cellsyntOriginatortype === 'alpha'" id="cellsynt-originator" v-model="$parent.notification.cellsyntOriginator" type="text" class="form-control" pattern="[a-zA-Z0-9\s]+" maxlength="11" required>
<input v-else id="cellsynt-originator" v-model="$parent.notification.cellsyntOriginator" type="number" class="form-control" pattern="[0-9]+" maxlength="15" required>
<div class="form-text"><p>{{ $t("Visible on recipient's mobile phone as originator of the message. Allowed values and function depends on parameter originatortype.") }}</p></div>
</div>
<div class="mb-3">
<label for="cellsynt-destination" class="form-label">{{ $t("Destination") }}</label>
<input id="cellsynt-destination" v-model="$parent.notification.cellsyntDestination" type="text" class="form-control" required>
<div class="form-text"><p>{{ $t("Recipient's telephone number using international format with leading 00 followed by country code, e.g. 00447920110000 for the UK number 07920 110 000 (max 17 digits in total). Max 25000 comma separated recipients per HTTP request.") }}</p></div>
</div>
<div class="form-check form-switch">
<input id="cellsynt-allow-long" v-model="$parent.notification.cellsyntAllowLongSMS" type="checkbox" class="form-check-input">
<label for="cellsynt-allow-long" class="form-label">{{ $t("Allow Long SMS") }}</label>
<div class="form-text">{{ $t("Split long messages into up to 6 parts. 153 x 6 = 918 characters.") }}</div>
</div>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://www.cellsynt.com/en/" target="_blank">https://www.cellsynt.com/en/</a>
</i18n-t>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput
},
mounted() {
this.$parent.notification.cellsyntOriginatortype ||= "alpha";
this.$parent.notification.cellsyntOriginator ||= "uptimekuma";
}
};
</script>

2
src/components/notifications/ClickSendSMS.vue
View File

@@ -6,7 +6,7 @@
</i18n-t>
<input id="clicksendsms-login" v-model="$parent.notification.clicksendsmsLogin" type="text" class="form-control" required>
<label for="clicksendsms-key" class="form-label">{{ $t("API Key") }}</label>
<HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<div class="form-text">

25
src/components/notifications/DingDing.vue
View File

@@ -2,9 +2,10 @@
<div class="mb-3">
<label for="WebHookUrl" class="form-label">{{ $t("WebHookUrl") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="WebHookUrl" v-model="$parent.notification.webHookUrl" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="secretKey" class="form-label">{{ $t("SecretKey") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="secretKey" v-model="$parent.notification.secretKey" type="text" class="form-control" required>
<HiddenInput id="secretKey" v-model="$parent.notification.secretKey" :required="true" autocomplete="new-password"></HiddenInput>
<div class="form-text">
<p>{{ $t("For safety, must use secret key") }}</p>
@@ -13,4 +14,24 @@
</i18n-t>
</div>
</div>
<div class="mb-3">
<label for="mentioning" class="form-label">{{ $t("Mentioning") }}<span style="color: red;"><sup>*</sup></span></label>
<select id="mentioning" v-model="$parent.notification.mentioning" class="form-select" required>
<option value="nobody">{{ $t("Don't mention people") }}</option>
<option value="everyone">{{ $t("Mention group", { group: "@everyone" }) }}</option>
</select>
</div>
</template>
<script lang="ts">
import HiddenInput from "../HiddenInput.vue";
export default {
components: { HiddenInput },
mounted() {
if (typeof this.$parent.notification.mentioning === "undefined") {
this.$parent.notification.mentioning = "nobody";
}
}
};
</script>

46
src/components/notifications/Discord.vue
View File

@@ -16,4 +16,50 @@
<label for="discord-prefix-message" class="form-label">{{ $t("Prefix Custom Message") }}</label>
<input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" :placeholder="$t('Hello @everyone is...')">
</div>
<div class="mb-3">
<label for="discord-message-type" class="form-label">{{ $t("Select message type") }}</label>
<select id="discord-message-type" v-model="$parent.notification.discordChannelType" class="form-select">
<option value="channel">{{ $t("Send to channel") }}</option>
<option value="createNewForumPost">{{ $t("Create new forum post") }}</option>
<option value="postToThread">{{ $t("postToExistingThread") }}</option>
</select>
</div>
<div v-if="$parent.notification.discordChannelType === 'createNewForumPost'">
<div class="mb-3">
<label for="discord-target" class="form-label">
{{ $t("forumPostName") }}
</label>
<input id="discord-target" v-model="$parent.notification.postName" type="text" class="form-control" autocomplete="false">
<div class="form-text">
{{ $t("whatHappensAtForumPost", { option: $t("postToExistingThread") }) }}
</div>
</div>
</div>
<div v-if="$parent.notification.discordChannelType === 'postToThread'">
<div class="mb-3">
<label for="discord-target" class="form-label">
{{ $t("threadForumPostID") }}
</label>
<input id="discord-target" v-model="$parent.notification.threadId" type="text" class="form-control" autocomplete="false" :placeholder="$t('e.g. {discordThreadID}', { discordThreadID: 1177566663751782411 })">
<div class="form-text">
<i18n-t keypath="wayToGetDiscordThreadId">
<a
href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
target="_blank"
>{{ $t("here") }}</a>
</i18n-t>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
if (!this.$parent.notification.discordChannelType) {
this.$parent.notification.discordChannelType = "channel";
}
}
};
</script>

29
src/components/notifications/FlashDuty.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div class="mb-3">
<label for="flashduty-integration-url" class="form-label">Integration Key</label>
<HiddenInput id="flashduty-integration-url" v-model="$parent.notification.flashdutyIntegrationKey" autocomplete="false"></HiddenInput>
<i18n-t tag="div" keypath="wayToGetFlashDutyKey" class="form-text">
<a href="https://flashcat.cloud/product/flashduty?from=kuma" target="_blank">{{ $t("here") }}</a>
</i18n-t>
</div>
<div class="mb-3">
<label for="flashduty-severity" class="form-label">{{ $t("FlashDuty Severity") }}</label>
<select id="flashduty-severity" v-model="$parent.notification.flashdutySeverity" class="form-select" :required="true">
<option value="Info" selected>Info</option>
<option value="Warning" selected>Warning</option>
<option value="Critical">Critical</option>
</select>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
mounted() {
}
};
</script>

12
src/components/notifications/FreeMobile.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="mb-3">
<label for="freemobileUser" class="form-label">{{ $t("Free Mobile User Identifier") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="freemobileUser" v-model="$parent.notification.freemobileUser" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="freemobilePass" class="form-label">{{ $t("Free Mobile API Key") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="freemobilePass" v-model="$parent.notification.freemobilePass" type="text" class="form-control" required>
</div>
</template>

28
src/components/notifications/GoAlert.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="mb-3">
<label for="goalert-base-url" class="form-label">{{ $t("Base URL") }}</label>
<input id="goalert-base-url" v-model="$parent.notification.goAlertBaseURL" type="text" class="form-control" required>
<i18n-t tag="div" keypath="goAlertInfo" class="form-text">
<a href="https://goalert.me" target="_blank">https://goalert.me</a>
</i18n-t>
</div>
<div class="mb-3">
<label for="goalert-token" class="form-label">{{ $t("Token") }}</label>
<HiddenInput id="goalert-token" v-model="$parent.notification.goAlertToken" autocomplete="new-password" :required="true"></HiddenInput>
<div class="form-text">
{{ $t("goAlertIntegrationKeyInfo") }}
</div>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

12
src/components/notifications/Gorush.vue
View File

@@ -1,23 +1,19 @@
<template>
<div class="mb-3">
<label for="gorush-device-token" class="form-label">{{ $t("Device Token") }}</label><span style="color: red;"><sup>*</sup></span>
<div class="input-group mb-3">
<input id="gorush-device-token" v-model="$parent.notification.gorushDeviceToken" type="text" class="form-control" required>
</div>
<input id="gorush-device-token" v-model="$parent.notification.gorushDeviceToken" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="gorush-server-url" class="form-label">{{ $t("Server URL") }}</label><span style="color: red;"><sup>*</sup></span>
<div class="input-group mb-3">
<input id="gorush-server-url" v-model="$parent.notification.gorushServerURL" type="text" class="form-control" required>
</div>
<input id="gorush-server-url" v-model="$parent.notification.gorushServerURL" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="gorush-platform" class="form-label">{{ $t("Platform") }}</label><span style="color: red;"><sup>*</sup></span>
<select id="gorush-platform" v-model="$parent.notification.gorushPlatform" class="form-select">
<option value="ios">{{ $t("iOS") }}</option>
<option value="android">{{ $t("Android") }}</option>
<option value="ios">iOS</option>
<option value="android">Android</option>
<option value="huawei">{{ $t("Huawei") }}</option>
</select>
</div>

6
src/components/notifications/Gotify.vue
View File

@@ -1,13 +1,11 @@
<template>
<div class="mb-3">
<label for="gotify-application-token" class="form-label">{{ $t("Application Token") }}</label>
<HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<label for="gotify-server-url" class="form-label">{{ $t("Server URL") }}</label>
<div class="input-group mb-3">
<input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required>
</div>
<input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required>
</div>
<div class="mb-3">

7
src/components/notifications/GrafanaOncall.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<div class="mb-3">
<label for="GrafanaOncallURL" class="form-label">{{ $t("GrafanaOncallURL") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="GrafanaOncallURL" v-model="$parent.notification.GrafanaOncallURL" type="text" class="form-control" required>
</div>
</template>

49
src/components/notifications/GtxMessaging.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="mb-3">
<label for="gtxmessaging-api-key" class="form-label">{{ $t("API Key") }}</label>
<HiddenInput id="gtxmessaging-api-key" v-model="$parent.notification.gtxMessagingApiKey" :required="true"></HiddenInput>
<div class="form-text">
{{ $t("gtxMessagingApiKeyHint") }}
</div>
</div>
<div class="mb-3">
<label for="gtxmessaging-from" class="form-label">{{ $t("From Phone Number / Transmission Path Originating Address (TPOA)") }}</label>
<input id="gtxmessaging-from" v-model="$parent.notification.gtxMessagingFrom" type="text" class="form-control" required>
<i18n-t tag="div" keypath="gtxMessagingFromHint" class="form-text">
<template #e164>
<a href="https://wikipedia.org/wiki/E.164">E.164</a>
</template>
<template #e212>
<a href="https://wikipedia.org/wiki/E.212">E.212</a>
</template>
<template #e214>
<a href="https://wikipedia.org/wiki/E.214">E.214</a>
</template>
</i18n-t>
</div>
<div class="mb-3">
<label for="gtxmessaging-to" class="form-label">{{ $t("To Phone Number") }}</label>
<input id="gtxmessaging-to" v-model="$parent.notification.gtxMessagingTo" type="text" pattern="^\+\d+$" class="form-control" required>
<i18n-t tag="div" keypath="gtxMessagingToHint" class="form-text">
<template #e164>
<a href="https://wikipedia.org/wiki/E.164">E.164</a>
</template>
<template #e212>
<a href="https://wikipedia.org/wiki/E.212">E.212</a>
</template>
<template #e214>
<a href="https://wikipedia.org/wiki/E.214">E.214</a>
</template>
</i18n-t>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput
}
};
</script>

34
src/components/notifications/HeiiOnCall.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="mb-3">
<label for="heiioncall-apikey" class="form-label">{{ $t("API Key") }}<span
style="color: red;"
><sup>*</sup></span></label>
<HiddenInput
id="heiioncall-apikey" v-model="$parent.notification.heiiOnCallApiKey" required="true"
autocomplete="false"
></HiddenInput>
</div>
<div class="mb-3">
<label for="heiioncall-trigger-id" class="form-label">Trigger ID<span
style="color: red;"
><sup>*</sup></span></label>
<HiddenInput
id="heiioncall-trigger-id" v-model="$parent.notification.heiiOnCallTriggerId" required="true"
autocomplete="false"
></HiddenInput>
</div>
<i18n-t tag="p" keypath="wayToGetHeiiOnCallDetails" class="form-text mt-3">
<template #documentation>
<a href="https://heiioncall.com/docs" target="_blank">{{ $t("documentationOf", ["Heii On-Call"]) }}</a>
</template>
</i18n-t>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

2
src/components/notifications/HomeAssistant.vue
View File

@@ -18,7 +18,7 @@
<input id="notificationService" v-model="$parent.notification.notificationService" type="text" :placeholder="$t('default: notify all devices')" class="form-control">
<div class="form-text">
<p>{{ $t("A list of Notification Services can be found in Home Assistant under \"Developer Tools > Services\" search for \"notification\" to find your device/phone name.") }}</p>
<p>{{ $t('A list of Notification Services can be found in Home Assistant under "Developer Tools > Services" search for "notification" to find your device/phone name.') }}</p>
<p>{{ $t("Automations can optionally be triggered in Home Assistant:") }}</p>
<p>
{{ $t("Trigger type:") }} <code>Event</code><br />

42
src/components/notifications/Keep.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="mb-3">
<label for="webhook-url" class="form-label">{{ $t("Host URL") }}</label>
<input
id="webhook-url"
v-model="$parent.notification.webhookURL"
type="url"
pattern="https?://.+"
class="form-control"
required
/>
<div class="form-text">
<i18n-t tag="p" keypath="Read more:">
<a href="https://docs.keephq.dev/providers/documentation/uptimekuma-provider" target="_blank">https://docs.keephq.dev/providers/documentation/uptimekuma-provider</a>
</i18n-t>
</div>
</div>
<div class="mb-3">
<label for="webhook-apikey" class="form-label">{{
$t("API Key")
}}</label>
<HiddenInput
id="webhook-apikey"
v-model="$parent.notification.webhookAPIKey"
:required="true"
></HiddenInput>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
mounted() {
this.$parent.notification.webhookURL ||= "";
},
};
</script>

33
src/components/notifications/Kook.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="mb-3">
<label for="kook-bot-token" class="form-label">{{ $t("Bot Token") }}</label>
<HiddenInput id="kook-bot-token" v-model="$parent.notification.kookBotToken" :required="true" autocomplete="new-password"></HiddenInput>
<i18n-t tag="div" keypath="wayToGetKookBotToken" class="form-text">
<a href="https://developer.kookapp.cn/bot" target="_blank">https://developer.kookapp.cn/bot</a>
</i18n-t>
</div>
<div class="mb-3">
<label for="kook-guild-id" class="form-label">{{ $t("Guild ID") }}</label>
<input id="kook-guild-id" v-model="$parent.notification.kookGuildID" type="text" class="form-control" required>
<div class="form-text">
<p style="margin-top: 8px;">
{{ $t("wayToGetKookGuildID") }}
</p>
</div>
</div>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://developer.kookapp.cn" target="_blank">https://developer.kookapp.cn</a>
</i18n-t>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
}
};
</script>

18
src/components/notifications/Line.vue
View File

@@ -1,18 +1,18 @@
<template>
<div class="mb-3">
<label for="line-channel-access-token" class="form-label">{{ $t("Channel access token") }}</label>
<HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
</div>
<i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
<b>{{ $t("Basic Settings") }}</b>
</i18n-t>
<div class="mb-3" style="margin-top: 12px;">
<label for="line-user-id" class="form-label">{{ $t("User ID") }}</label>
<input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
<label for="line-channel-access-token" class="form-label">{{ $t("Channel access token (Long-lived)") }}</label>
<HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
<b>{{ $t("Messaging API") }}</b>
</i18n-t>
<div class="mb-3" style="margin-top: 12px;">
<label for="line-user-id" class="form-label">{{ $t("Your User ID") }}</label>
<input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
</div>
<i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
<b>{{ $t("Basic Settings") }}</b>
</i18n-t>
<i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
<a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
</i18n-t>

30
src/components/notifications/LunaSea.vue
View File

@@ -1,9 +1,33 @@
<template>
<div class="mb-3">
<label for="lunasea-device" class="form-label">{{ $t("LunaSea Device ID") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control" required>
<label for="lunasea-notification-target" class="form-label">{{ $t("lunaseaTarget") }}<span style="color: red;"><sup>*</sup></span></label>
<div class="form-text">
<p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
<p>
<select id="lunasea-notification-target" v-model="$parent.notification.lunaseaTarget" class="form-select" required>
<option value="device">{{ $t("lunaseaDeviceID") }}</option>
<option value="user">{{ $t("lunaseaUserID") }}</option>
</select>
</p>
</div>
<div v-if="$parent.notification.lunaseaTarget === 'device'">
<label for="lunasea-device" class="form-label">{{ $t("lunaseaDeviceID") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control">
</div>
<div v-if="$parent.notification.lunaseaTarget === 'user'">
<label for="lunasea-device" class="form-label">{{ $t("lunaseaUserID") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="lunasea-device" v-model="$parent.notification.lunaseaUserID" type="text" class="form-control">
</div>
</div>
</template>
<script lang="ts">
export default {
mounted() {
if (typeof this.$parent.notification.lunaseaTarget === "undefined") {
this.$parent.notification.lunaseaTarget = "device";
}
}
};
</script>

2
src/components/notifications/Matrix.vue
View File

@@ -9,7 +9,7 @@
</div>
<div class="mb-3">
<label for="access-token" class="form-label">{{ $t("Access Token") }}</label><span style="color: red;"><sup>*</sup></span>
<HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="one-time-code" :maxlength="500"></HiddenInput>
<HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="new-password" :maxlength="500"></HiddenInput>
</div>
<div class="form-text">

2
src/components/notifications/Mattermost.vue
View File

@@ -13,7 +13,7 @@
<div class="form-text">
<span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
<i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
<a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
<a href="https://developers.mattermost.com/integrate/webhooks/incoming/" target="_blank">https://developers.mattermost.com/integrate/webhooks/incoming/</a>
</i18n-t>
<p style="margin-top: 8px;">
{{ $t("aboutMattermostChannelName") }}

26
src/components/notifications/Nostr.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="mb-3">
<label for="nostr-relays" class="form-label">{{ $t("nostrRelays") }}<span style="color: red;"><sup>*</sup></span></label>
<textarea id="nostr-relays" v-model="$parent.notification.relays" class="form-control" :required="true" placeholder="wss://127.0.0.1:7777/"></textarea>
<small class="form-text text-muted">{{ $t("nostrRelaysHelp") }}</small>
</div>
<div class="mb-3">
<label for="nostr-sender" class="form-label">{{ $t("nostrSender") }}<span style="color: red;"><sup>*</sup></span></label>
<HiddenInput id="nostr-sender" v-model="$parent.notification.sender" autocomplete="new-password" :required="true"></HiddenInput>
</div>
<div class="mb-3">
<label for="nostr-recipients" class="form-label">{{ $t("nostrRecipients") }}<span style="color: red;"><sup>*</sup></span></label>
<textarea id="nostr-recipients" v-model="$parent.notification.recipients" class="form-control" :required="true" placeholder="npub123...&#10;npub789..."></textarea>
<small class="form-text text-muted">{{ $t("nostrRecipientsHelp") }}</small>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

64
src/components/notifications/Ntfy.vue
View File

@@ -1,30 +1,82 @@
<template>
<div class="mb-3">
<label for="ntfy-ntfytopic" class="form-label">{{ $t("ntfy Topic") }}</label>
<div class="input-group mb-3">
<input id="ntfy-ntfytopic" v-model="$parent.notification.ntfytopic" type="text" class="form-control" required>
</div>
<input id="ntfy-ntfytopic" v-model="$parent.notification.ntfytopic" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="ntfy-server-url" class="form-label">{{ $t("Server URL") }}</label>
<div class="input-group mb-3">
<input id="ntfy-server-url" v-model="$parent.notification.ntfyserverurl" type="text" class="form-control" required>
<input id="ntfy-server-url" v-model="$parent.notification.ntfyserverurl" type="text" class="form-control" required>
<div class="form-text">
{{ $t("Server URL should not contain the nfty topic") }}
</div>
</div>
<div class="mb-3">
<label for="ntfy-priority" class="form-label">{{ $t("Priority") }}</label>
<input id="ntfy-priority" v-model="$parent.notification.ntfyPriority" type="number" class="form-control" required min="1" max="5" step="1">
<div class="form-text">
<p v-if="$parent.notification.ntfyPriority >= 5">
{{ $t("ntfyPriorityHelptextAllEvents") }}
</p>
<i18n-t v-else tag="p" keypath="ntfyPriorityHelptextAllExceptDown">
<code>DOWN</code>
<code>{{ $parent.notification.ntfyPriority + 1 }}</code>
</i18n-t>
</div>
</div>
<div class="mb-3">
<label for="authentication-method" class="form-label">{{ $t("ntfyAuthenticationMethod") }}</label>
<select id="authentication-method" v-model="$parent.notification.ntfyAuthenticationMethod" class="form-select">
<option v-for="(name, type) in authenticationMethods" :key="type" :value="type">{{ name }}</option>
</select>
</div>
<div v-if="$parent.notification.ntfyAuthenticationMethod === 'usernamePassword'" class="mb-3">
<label for="ntfy-username" class="form-label">{{ $t("Username") }}</label>
<input id="ntfy-username" v-model="$parent.notification.ntfyusername" type="text" class="form-control">
</div>
<div v-if="$parent.notification.ntfyAuthenticationMethod === 'usernamePassword'" class="mb-3">
<label for="ntfy-password" class="form-label">{{ $t("Password") }}</label>
<HiddenInput id="ntfy-password" v-model="$parent.notification.ntfypassword" autocomplete="new-password"></HiddenInput>
</div>
<div v-if="$parent.notification.ntfyAuthenticationMethod === 'accessToken'" class="mb-3">
<label for="ntfy-access-token" class="form-label">{{ $t("Access Token") }}</label>
<HiddenInput id="ntfy-access-token" v-model="$parent.notification.ntfyaccesstoken"></HiddenInput>
</div>
<div class="mb-3">
<label for="ntfy-icon" class="form-label">{{ $t("IconUrl") }}</label>
<input id="ntfy-icon" v-model="$parent.notification.ntfyIcon" type="text" class="form-control">
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
computed: {
authenticationMethods() {
return {
none: this.$t("None"),
usernamePassword: this.$t("ntfyUsernameAndPassword"),
accessToken: this.$t("Access Token")
};
}
},
mounted() {
if (typeof this.$parent.notification.ntfyPriority === "undefined") {
this.$parent.notification.ntfyserverurl = "https://ntfy.sh";
this.$parent.notification.ntfyPriority = 5;
}
// Handling notifications that added before 1.22.0
if (typeof this.$parent.notification.ntfyAuthenticationMethod === "undefined") {
if (!this.$parent.notification.ntfyusername) {
this.$parent.notification.ntfyAuthenticationMethod = "none";
} else {
this.$parent.notification.ntfyAuthenticationMethod = "usernamePassword";
}
}
},
};
</script>

2
src/components/notifications/Octopush.vue
View File

@@ -11,7 +11,7 @@
</div>
<div class="mb-3">
<label for="octopush-key" class="form-label">{{ $t("octopushAPIKey") }}</label>
<HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
<label for="octopush-login" class="form-label">{{ $t("octopushLogin") }}</label>
<input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required>
</div>

36
src/components/notifications/Opsgenie.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="mb-3">
<label for="opsgenie-region" class="form-label">{{ $t("Region") }}<span style="color: red;"><sup>*</sup></span></label>
<select id="opsgenie-region" v-model="$parent.notification.opsgenieRegion" class="form-select" required>
<option value="us">
US (Default)
</option>
<option value="eu">
EU
</option>
</select>
</div>
<div class="mb-3">
<label for="opsgenie-apikey" class="form-label">{{ $t("API Key") }}<span style="color: red;"><sup>*</sup></span></label>
<HiddenInput id="opsgenie-apikey" v-model="$parent.notification.opsgenieApiKey" required="true" autocomplete="false"></HiddenInput>
</div>
<div class="mb-3">
<label for="opsgenie-priority" class="form-label">{{ $t("Priority") }}</label>
<input id="opsgenie-priority" v-model="$parent.notification.opsgeniePriority" type="number" class="form-control" min="1" max="5" step="1">
</div>
<div class="form-text">
<span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
<i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
<a href="https://docs.opsgenie.com/docs/alert-api" target="_blank">https://docs.opsgenie.com/docs/alert-api</a>
</i18n-t>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

31
src/components/notifications/PagerTree.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="mb-3">
<label for="pagertree-integration-url" class="form-label">{{ $t("pagertreeIntegrationUrl") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="pagertree-integration-url" v-model="$parent.notification.pagertreeIntegrationUrl" type="text" class="form-control" autocomplete="false">
<i18n-t tag="div" keypath="wayToGetPagerTreeIntegrationURL" class="form-text">
<a href="https://pagertree.com/docs/integration-guides/introduction#copy-the-endpoint-url" target="_blank">{{ $t("here") }}</a>
</i18n-t>
</div>
<div class="mb-3">
<label for="pagertree-urgency" class="form-label">{{ $t("pagertreeUrgency") }}</label>
<select id="pagertree-urgency" v-model="$parent.notification.pagertreeUrgency" class="form-select">
<option value="silent">{{ $t("pagertreeSilent") }}</option>
<option value="low">{{ $t("pagertreeLow") }}</option>
<option value="medium" selected="selected">{{ $t("pagertreeMedium") }}</option>
<option value="high">{{ $t("pagertreeHigh") }}</option>
<option value="critical">{{ $t("pagertreeCritical") }}</option>
</select>
</div>
<div class="mb-3">
<label for="pagertree-resolve" class="form-label">{{ $t("pagertreeResolve") }}</label>
<select id="pagertree-resolve" v-model="$parent.notification.pagertreeAutoResolve" class="form-select">
<option value="resolve" selected="selected">{{ $t("pagertreeResolve") }}</option>
<option value="0">{{ $t("pagertreeDoNothing") }}</option>
</select>
</div>
</template>
<script>
export default {
};
</script>

6
src/components/notifications/PromoSMS.vue
View File

@@ -3,7 +3,7 @@
<label for="promosms-login" class="form-label">{{ $t("promosmsLogin") }}</label>
<input id="promosms-login" v-model="$parent.notification.promosmsLogin" type="text" class="form-control" required>
<label for="promosms-key" class="form-label">{{ $t("promosmsPassword") }}</label>
<HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<label for="promosms-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
@@ -26,6 +26,10 @@
<label for="promosms-sender-name" class="form-label">{{ $t("promosmsSMSSender") }}</label>
<input id="promosms-sender-name" v-model="$parent.notification.promosmsSenderName" type="text" minlength="3" maxlength="11" class="form-control">
</div>
<div class="form-check form-switch">
<input id="promosms-allow-long" v-model="$parent.notification.promosmsAllowLongSMS" type="checkbox" class="form-check-input">
<label for="promosms-allow-long" class="form-label">{{ $t("promosmsAllowLongSMS") }}</label>
</div>
</template>
<script>

7
src/components/notifications/PushDeer.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="mb-3">
<label for="pushdeer-server" class="form-label">{{ $t("PushDeer Server URL") }}</label>
<input id="pushdeer-server" v-model="$parent.notification.pushdeerServer" type="text" class="form-control" placeholder="https://api2.pushdeer.com">
<div class="form-text">{{ $t("pushDeerServerDescription") }}</div>
</div>
<div class="mb-3">
<label for="pushdeer-key" class="form-label">{{ $t("PushDeer Key") }}</label>
<HiddenInput id="pushdeer-key" v-model="$parent.notification.pushdeerKey" :required="true" autocomplete="one-time-code" placeholder="PDUxxxx"></HiddenInput>
<HiddenInput id="pushdeer-key" v-model="$parent.notification.pushdeerKey" :required="true" autocomplete="new-password" placeholder="PDUxxxx"></HiddenInput>
</div>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">

2
src/components/notifications/Pushbullet.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mb-3">
<label for="pushbullet-access-token" class="form-label">{{ $t("Access Token") }}</label>
<HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">

6
src/components/notifications/Pushover.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="mb-3">
<label for="pushover-user" class="form-label">{{ $t("User Key") }}<span style="color: red;"><sup>*</sup></span></label>
<HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="new-password"></HiddenInput>
<label for="pushover-app-token" class="form-label">{{ $t("Application Token") }}<span style="color: red;"><sup>*</sup></span></label>
<HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="new-password"></HiddenInput>
<label for="pushover-device" class="form-label">{{ $t("Device") }}</label>
<input id="pushover-device" v-model="$parent.notification.pushoverdevice" type="text" class="form-control">
<label for="pushover-device" class="form-label">{{ $t("Message Title") }}</label>
@@ -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;">

6
src/components/notifications/Pushy.vue
View File

@@ -1,14 +1,12 @@
<template>
<div class="mb-3">
<label for="pushy-app-token" class="form-label">{{ $t("pushyAPIKey") }}</label>
<HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<label for="pushy-user-key" class="form-label">{{ $t("pushyToken") }}</label>
<div class="input-group mb-3">
<HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
</div>
<HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>

43
src/components/notifications/SMSC.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div class="mb-3">
<label for="smsc-login" class="form-label">{{ $t("API Username") }}</label>
<i18n-t tag="div" class="form-text" keypath="wayToGetClickSendSMSToken">
<a href="https://smsc.kz/" target="_blank">{{ $t("here") }}</a>
</i18n-t>
<input id="smsc-login" v-model="$parent.notification.smscLogin" type="text" class="form-control" required>
<label for="smsc-key" class="form-label">{{ $t("API Key") }}</label>
<HiddenInput id="smsc-key" v-model="$parent.notification.smscPassword" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<div class="form-text">
{{ $t("checkPrice", ['СМСЦ']) }}
<a href="https://smsc.kz/tariffs/" target="_blank">https://smsc.kz/tariffs/</a>
</div>
</div>
<div class="mb-3">
<label for="smsc-to-number" class="form-label">{{ $t("Recipient Number") }}</label>
<input id="smsc-to-number" v-model="$parent.notification.smscToNumber" type="text" minlength="11" class="form-control" required>
</div>
<div class="mb-3">
<label for="smsc-sender-name" class="form-label">{{ $t("From Name/Number") }}</label>
<input id="smsc-sender-name" v-model="$parent.notification.smscSenderName" type="text" minlength="1" maxlength="15" class="form-control">
<div class="form-text">{{ $t("Leave blank to use a shared sender number.") }}</div>
</div>
<div class="mb-3">
<label for="smsc-platform" class="form-label">{{ $t("smscTranslit") }}</label><span style="color: red;"><sup>*</sup></span>
<select id="smsc-platform" v-model="$parent.notification.smscTranslit" class="form-select">
<option value="0">{{ $t("Default") }}</option>
<option value="1">Translit</option>
<option value="2">MpaHc/Ium</option>
</select>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

40
src/components/notifications/SMSEagle.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="mb-3">
<label for="smseagle-url" class="form-label">{{ $t("smseagleUrl") }}</label>
<input id="smseagle-url" v-model="$parent.notification.smseagleUrl" type="text" minlength="7" class="form-control" placeholder="http://127.0.0.1" required>
</div>
<div class="mb-3">
<label for="smseagle-token" class="form-label">{{ $t("smseagleToken") }}</label>
<HiddenInput id="smseagle-token" v-model="$parent.notification.smseagleToken" :required="true"></HiddenInput>
</div>
<div class="mb-3">
<label for="smseagle-recipient-type" class="form-label">{{ $t("smseagleRecipientType") }}</label>
<select id="smseagle-recipient-type" v-model="$parent.notification.smseagleRecipientType" class="form-select">
<option value="smseagle-to" selected>{{ $t("smseagleTo") }}</option>
<option value="smseagle-group">{{ $t("smseagleGroup") }}</option>
<option value="smseagle-contact">{{ $t("smseagleContact") }}</option>
</select>
</div>
<div class="mb-3">
<label for="smseagle-recipient" class="form-label">{{ $t("smseagleRecipient") }}</label>
<input id="smseagle-recipient" v-model="$parent.notification.smseagleRecipient" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="smseagle-priority" class="form-label">{{ $t("smseaglePriority") }}</label>
<input id="smseagle-priority" v-model="$parent.notification.smseaglePriority" type="number" class="form-control" min="0" max="9" step="1" placeholder="0">
</div>
<div class="mb-3 form-check form-switch">
<label for="smseagle-encoding" class="form-label">{{ $t("smseagleEncoding") }}</label>
<input id="smseagle-encoding" v-model="$parent.notification.smseagleEncoding" type="checkbox" class="form-check-input">
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

31
src/components/notifications/SMSManager.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="mb-3">
<label for="smsmanager-key" class="form-label">{{ $t("API Key") }}</label>
<div class="form-text">
{{ $t("SMSManager API Docs") }}
<a href="https://smsmanager.cz/api/http#send" target="_blank">{{ $t("here") }}</a>
</div>
<input id="smsmanager-key" v-model="$parent.notification.smsmanagerApiKey" type="text" class="form-control">
</div>
<div class="mb-3">
<label for="smsmanager-numbers" class="form-label"> {{ $t("Recipients") }}</label>
<div class="form-text">
{{ $t("You can divide numbers with") }} <b>,</b> {{ $t("or") }} <b>;</b>
</div>
<input id="smsmanager-numbers" v-model="$parent.notification.numbers" type="text" class="form-control">
</div>
<div class="mb-3">
<label for="smsmanager-messageType" class="form-label">{{ $t("Gateway Type") }}</label>
<select id="smsmanager-messageType" v-model="$parent.notification.messageType" class="form-select">
<option value="economy">{{ $t("Economy") }}</option>
<option value="lowcost">{{ $t("Lowcost") }}</option>
<option value="high" selected>{{ $t("High") }}</option>
</select>
</div>
<div class="mb-3">
<div class="form-text">
{{ $t("checkPrice", [$t("SMSManager")]) }}
<a href="https://smsmanager.cz/rozesilani-sms/ceny/ceska-republika/" target="_blank">{{ $t("here") }}</a>
</div>
</div>
</template>

39
src/components/notifications/SMSPartner.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="mb-3">
<label for="smspartner-key" class="form-label">{{ $t("API Key") }}</label>
<HiddenInput id="smspartner-key" v-model="$parent.notification.smspartnerApikey" :required="true" autocomplete="new-password"></HiddenInput>
<div class="form-text">
<i18n-t keypath="smspartnerApiurl" as="div" class="form-text">
<a href="https://my.smspartner.fr/dashboard/api" target="_blank">my.smspartner.fr/dashboard/api</a>
</i18n-t>
</div>
</div>
<div class="mb-3">
<label for="smspartner-phone-number" class="form-label">{{ $t("smspartnerPhoneNumber") }}</label>
<input id="smspartner-phone-number" v-model="$parent.notification.smspartnerPhoneNumber" type="text" minlength="3" maxlength="20" pattern="^[\d+,]+$" class="form-control" required>
<div class="form-text">
<i18n-t keypath="smspartnerPhoneNumberHelptext" as="div" class="form-text">
<code>+336xxxxxxxx</code>
<code>+496xxxxxxxx</code>
<code>,</code>
</i18n-t>
</div>
</div>
<div class="mb-3">
<label for="smspartner-sender-name" class="form-label">{{ $t("smspartnerSenderName") }}</label>
<input id="smspartner-sender-name" v-model="$parent.notification.smspartnerSenderName" type="text" minlength="3" maxlength="11" pattern="^[a-zA-Z0-9]*$" class="form-control" required>
<div class="form-text">
{{ $t("smspartnerSenderNameInfo") }}
</div>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

44
src/components/notifications/SMTP.vue
View File

@@ -5,6 +5,14 @@
<input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
</div>
<i18n-t tag="div" keypath="Either enter the hostname of the server you want to connect to or localhost if you intend to use a locally configured mail transfer agent" class="form-text">
<template #localhost>
<code>localhost</code>
</template>
<template #local_mta>
<a href="https://wikipedia.org/wiki/Mail_Transfer_Agent" target="_blank">{{ $t("locally configured mail transfer agent") }}</a>
</template>
</i18n-t>
<div class="mb-3">
<label for="port" class="form-label">{{ $t("Port") }}</label>
<input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
@@ -34,7 +42,7 @@
<div class="mb-3">
<label for="password" class="form-label">{{ $t("Password") }}</label>
<HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
@@ -59,6 +67,28 @@
<input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
</div>
<p class="form-text">
<i18n-t tag="div" keypath="smtpLiquidIntroduction" class="form-text mb-3">
<a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
</i18n-t>
<code v-pre>{{name}}</code>: {{ $t("emailTemplateServiceName") }}<br />
<code v-pre>{{msg}}</code>: {{ $t("emailTemplateMsg") }}<br />
<code v-pre>{{status}}</code>: {{ $t("emailTemplateStatus") }}<br />
<code v-pre>{{heartbeatJSON}}</code>: {{ $t("emailTemplateHeartbeatJSON") }}<b>{{ $t("emailTemplateLimitedToUpDownNotification") }}</b><br />
<code v-pre>{{monitorJSON}}</code>: {{ $t("emailTemplateMonitorJSON") }} <b>{{ $t("emailTemplateLimitedToUpDownNotification") }}</b><br />
<code v-pre>{{hostnameOrURL}}</code>: {{ $t("emailTemplateHostnameOrURL") }}<br />
</p>
<div class="mb-3">
<label for="subject-email" class="form-label">{{ $t("emailCustomSubject") }}</label>
<input id="subject-email" v-model="$parent.notification.customSubject" type="text" class="form-control" autocomplete="false" placeholder="">
<div class="form-text">{{ $t("leave blank for default subject") }}</div>
</div>
<div class="mb-3">
<label for="body-email" class="form-label">{{ $t("emailCustomBody") }}</label>
<textarea id="body-email" v-model="$parent.notification.customBody" type="text" class="form-control" autocomplete="false" placeholder=""></textarea>
<div class="form-text">{{ $t("leave blank for default body") }}</div>
</div>
<ToggleSection :heading="$t('smtpDkimSettings')">
<i18n-t tag="div" keypath="smtpDkimDesc" class="form-text mb-3">
<a href="https://nodemailer.com/dkim/" target="_blank">{{ $t("documentation") }}</a>
@@ -89,18 +119,6 @@
<input id="dkim-skip-fields" v-model="$parent.notification.smtpDkimskipFields" type="text" class="form-control" autocomplete="false" placeholder="message-id:date">
</div>
</ToggleSection>
<div class="mb-3">
<label for="subject-email" class="form-label">{{ $t("emailCustomSubject") }}</label>
<input id="subject-email" v-model="$parent.notification.customSubject" type="text" class="form-control" autocomplete="false" placeholder="">
<div v-pre class="form-text">
(leave blank for default one)<br />
{{NAME}}: Service Name<br />
{{HOSTNAME_OR_URL}}: Hostname or URL<br />
{{URL}}: URL<br />
{{STATUS}}: Status<br />
</div>
</div>
</div>
</template>

16
src/components/notifications/ServerChan.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="mb-3">
<label for="serverchan-sendkey" class="form-label">{{ $t("SendKey") }}</label>
<HiddenInput id="serverchan-sendkey" v-model="$parent.notification.serverChanSendKey" :required="true" autocomplete="new-password"></HiddenInput>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

2
src/components/notifications/SerwerSMS.vue
View File

@@ -5,7 +5,7 @@
</div>
<div class="mb-3">
<label for="serwersms-key" class="form-label">{{ $t('serwersmsAPIPassword') }}</label>
<HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<div class="mb-3">
<label for="serwersms-phone-number" class="form-label">{{ $t("serwersmsPhoneNumber") }}</label>

31
src/components/notifications/SevenIO.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="mb-3">
<label for="sevenio-api-key" class="form-label">{{ $t("apiKeySevenIO") }}</label>
<HiddenInput id="sevenio-api-key" v-model="$parent.notification.sevenioApiKey" :required="true" autocomplete="new-password"></HiddenInput>
<div class="form-text">
{{ $t("wayToGetSevenIOApiKey") }}
</div>
</div>
<div class="mb-3">
<label for="sevenio-sender" class="form-label">{{ $t("senderSevenIO") }}</label>
<input id="sevenio-sender" v-model="$parent.notification.sevenioSender" type="text" class="form-control" autocomplete="false" placeholder="Uptime Kuma">
</div>
<div class="mb-3">
<label for="sevenio-receiver" class="form-label">{{ $t("receiverSevenIO") }}</label>
<input id="sevenio-receiver" v-model="$parent.notification.sevenioReceiver" type="number" class="form-control" required autocomplete="false" placeholder="0123456789">
<div class="form-text">
{{ $t("receiverInfoSevenIO") }}
</div>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

8
src/components/notifications/Slack.vue
View File

@@ -24,5 +24,13 @@
<a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
</i18n-t>
</div>
<div class="form-check form-switch">
<input id="slack-channel-notify" v-model="$parent.notification.slackchannelnotify" type="checkbox" class="form-check-input">
<label for="slack-channel-notify" class="form-label">{{ $t("Notify Channel") }}</label>
</div>
<div class="form-text">
{{ $t("aboutNotifyChannel") }}
</div>
</div>
</template>

32
src/components/notifications/Splunk.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="mb-3">
<label for="splunk-rest-url" class="form-label">{{ $t("Splunk Rest URL") }}</label>
<HiddenInput id="splunk-rest-url" v-model="$parent.notification.splunkRestURL" :required="true" autocomplete="false"></HiddenInput>
</div>
<div class="mb-3">
<label for="splunk-severity" class="form-label">{{ $t("Severity") }}</label>
<select id="splunk-severity" v-model="$parent.notification.splunkSeverity" class="form-select">
<option value="INFO">{{ $t("info") }}</option>
<option value="WARNING">{{ $t("warning") }}</option>
<option value="CRITICAL" selected="selected">{{ $t("critical") }}</option>
</select>
</div>
<div class="mb-3">
<label for="splunk-resolve" class="form-label">{{ $t("Auto resolve or acknowledged") }}</label>
<select id="splunk-resolve" v-model="$parent.notification.splunkAutoResolve" class="form-select">
<option value="0" selected="selected">{{ $t("do nothing") }}</option>
<option value="ACKNOWLEDGEMENT">{{ $t("auto acknowledged") }}</option>
<option value="RECOVERY">{{ $t("auto resolve") }}</option>
</select>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
},
};
</script>

6
src/components/notifications/Squadcast.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="mb-3">
<label for="webhook-url" class="form-label">{{ $t("Post URL") }}</label>
<input id="webhook-url" v-model="$parent.notification.squadcastWebhookURL" type="url" pattern="https?://.+" class="form-control" required>
</div>
</template>

2
src/components/notifications/TechulusPush.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mb-3">
<label for="push-api-key" class="form-label">{{ $t("API Key") }}</label>
<HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
</div>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">

41
src/components/notifications/Telegram.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mb-3">
<label for="telegram-bot-token" class="form-label">{{ $t("Bot Token") }}</label>
<HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
<HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="new-password"></HiddenInput>
<i18n-t tag="div" keypath="wayToGetTelegramToken" class="form-text">
<a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>
</i18n-t>
@@ -28,20 +28,47 @@
<a :href="telegramGetUpdatesURL('withToken')" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL("masked") }}</a>
</p>
</div>
<label for="message_thread_id" class="form-label">{{ $t("telegramMessageThreadID") }}</label>
<input id="message_thread_id" v-model="$parent.notification.telegramMessageThreadID" type="text" class="form-control">
<p class="form-text">{{ $t("telegramMessageThreadIDDescription") }}</p>
<div class="form-check form-switch">
<input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
<label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
</div>
<div class="form-text">
{{ $t("telegramSendSilentlyDescription") }}
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input v-model="$parent.notification.telegramProtectContent" class="form-check-input" type="checkbox">
<label class="form-check-label">{{ $t("telegramProtectContent") }}</label>
</div>
<div class="form-text">
{{ $t("telegramProtectContentDescription") }}
</div>
</div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
import axios from "axios";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
HiddenInput,
},
methods: {
/**
* Get the URL for telegram updates
* @param {string} mode Should the token be masked?
* @returns {string} formatted URL
*/
telegramGetUpdatesURL(mode = "masked") {
let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`;
@@ -55,6 +82,12 @@ export default {
return `https://api.telegram.org/bot${token}/getUpdates`;
},
/**
* Get the telegram chat ID
* @returns {Promise<void>}
* @throws The chat ID could not be found
*/
async autoGetTelegramChatID() {
try {
let res = await axios.get(this.telegramGetUpdatesURL("withToken"));
@@ -75,7 +108,7 @@ export default {
}
} catch (error) {
toast.error(error.message);
this.$root.toastError(error.message);
}
},

38
src/components/notifications/Twilio.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="mb-3">
<label for="twilio-account-sid" class="form-label">{{ $t("Account SID") }}</label>
<input id="twilio-account-sid" v-model="$parent.notification.twilioAccountSID" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="twilio-apikey-token" class="form-label">{{ $t("Api Key (optional)") }}</label>
<input id="twilio-apikey-token" v-model="$parent.notification.twilioApiKey" type="text" class="form-control">
<div class="form-text">
<p>
The API key is optional but recommended. You can provide either Account SID and AuthToken
from the may TwilioConsole page or Account SID and the pair of Api Key and Api Key secret
</p>
</div>
</div>
<div class="mb-3">
<label for="twilio-auth-token" class="form-label">{{ $t("Auth Token / Api Key Secret") }}</label>
<input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="twilio-from-number" class="form-label">{{ $t("From Number") }}</label>
<input id="twilio-from-number" v-model="$parent.notification.twilioFromNumber" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="twilio-to-number" class="form-label">{{ $t("To Number") }}</label>
<input id="twilio-to-number" v-model="$parent.notification.twilioToNumber" type="text" class="form-control" required>
</div>
<div class="mb-3">
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://www.twilio.com/docs/sms" target="_blank">https://www.twilio.com/docs/sms</a>
</i18n-t>
</div>
</template>

104
src/components/notifications/Webhook.vue
View File

@@ -1,28 +1,100 @@
<template>
<div class="mb-3">
<label for="webhook-url" class="form-label">{{ $t("Post URL") }}</label>
<input id="webhook-url" v-model="$parent.notification.webhookURL" type="url" pattern="https?://.+" class="form-control" required>
<input
id="webhook-url"
v-model="$parent.notification.webhookURL"
type="url"
pattern="https?://.+"
class="form-control"
required
/>
</div>
<div class="mb-3">
<label for="webhook-content-type" class="form-label">{{ $t("Content Type") }}</label>
<select id="webhook-content-type" v-model="$parent.notification.webhookContentType" class="form-select" required>
<option value="json">
application/json
</option>
<option value="form-data">
multipart/form-data
</option>
<label for="webhook-request-body" class="form-label">{{ $t("Request Body") }}</label>
<select
id="webhook-request-body"
v-model="$parent.notification.webhookContentType"
class="form-select"
required
>
<option value="json">{{ $t("webhookBodyPresetOption", ["application/json"]) }}</option>
<option value="form-data">{{ $t("webhookBodyPresetOption", ["multipart/form-data"]) }}</option>
<option value="custom">{{ $t("webhookBodyCustomOption") }}</option>
</select>
<div class="form-text">
<p>{{ $t("webhookJsonDesc", ["\"application/json\""]) }}</p>
<i18n-t tag="p" keypath="webhookFormDataDesc">
<template #multipart>"multipart/form-data"</template>
<template #decodeFunction>
<strong>json_decode($_POST['data'])</strong>
</template>
<div v-if="$parent.notification.webhookContentType == 'json'" class="form-text">{{ $t("webhookJsonDesc", ['"application/json"']) }}</div>
<i18n-t v-else-if="$parent.notification.webhookContentType == 'form-data'" tag="div" keypath="webhookFormDataDesc" class="form-text">
<template #multipart>multipart/form-data"</template>
<template #decodeFunction>
<strong>json_decode($_POST['data'])</strong>
</template>
</i18n-t>
<template v-else-if="$parent.notification.webhookContentType == 'custom'">
<i18n-t tag="div" keypath="liquidIntroduction" class="form-text">
<a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
</i18n-t>
<code v-pre>{{msg}}</code>: {{ $t("templateMsg") }}<br />
<code v-pre>{{heartbeatJSON}}</code>: {{ $t("templateHeartbeatJSON") }} <b>({{ $t("templateLimitedToUpDownNotifications") }})</b><br />
<code v-pre>{{monitorJSON}}</code>: {{ $t("templateMonitorJSON") }} <b>({{ $t("templateLimitedToUpDownCertNotifications") }})</b><br />
<textarea
id="customBody"
v-model="$parent.notification.webhookCustomBody"
class="form-control"
:placeholder="customBodyPlaceholder"
required
></textarea>
</template>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input v-model="showAdditionalHeadersField" class="form-check-input" type="checkbox">
<label class="form-check-label">{{ $t("webhookAdditionalHeadersTitle") }}</label>
</div>
<div class="form-text">{{ $t("webhookAdditionalHeadersDesc") }}</div>
<textarea
v-if="showAdditionalHeadersField"
id="additionalHeaders"
v-model="$parent.notification.webhookAdditionalHeaders"
class="form-control"
:placeholder="headersPlaceholder"
:required="showAdditionalHeadersField"
></textarea>
</div>
</template>
<script>
export default {
data() {
return {
showAdditionalHeadersField: this.$parent.notification.webhookAdditionalHeaders != null,
};
},
computed: {
headersPlaceholder() {
return this.$t("Example:", [
`{
"Authorization": "Authorization Token"
}`,
]);
},
customBodyPlaceholder() {
return this.$t("Example:", [
`{
"Title": "Uptime Kuma Alert{% if monitorJSON %} - {{ monitorJSON['name'] }}{% endif %}",
"Body": "{{ msg }}"
}`
]);
}
},
};
</script>
<style lang="scss" scoped>
textarea {
min-height: 200px;
}
</style>

33
src/components/notifications/Whapi.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="mb-3">
<label for="whapi-api-url" class="form-label">{{ $t("API URL") }}</label>
<input id="whapi-api-url" v-model="$parent.notification.whapiApiUrl" placeholder="https://gate.whapi.cloud/" type="text" class="form-control">
</div>
<div class="mb-3">
<label for="whapi-auth-token" class="form-label">{{ $t("Token") }}</label>
<HiddenInput id="whapi-auth-token" v-model="$parent.notification.whapiAuthToken" :required="true" autocomplete="new-password"></HiddenInput>
<i18n-t tag="div" keypath="wayToGetWhapiUrlAndToken" class="form-text">
<a href="https://panel.whapi.cloud/dashboard" target="_blank">https://panel.whapi.cloud/dashboard</a>
</i18n-t>
</div>
<div class="mb-3">
<label for="whapi-recipient" class="form-label">{{ $t("whapiRecipient") }}</label>
<input id="whapi-recipient" v-model="$parent.notification.whapiRecipient" type="text" pattern="^[\d-]{10,31}(@[\w\.]{1,})?$" class="form-control" required>
<div class="form-text">{{ $t("wayToWriteWhapiRecipient", ["00117612345678", "00117612345678@s.whatsapp.net", "123456789012345678@g.us"]) }}</div>
</div>
<i18n-t tag="div" keypath="More info on:" class="mb-3 form-text">
<a href="https://whapi.cloud/" target="_blank">https://whapi.cloud/</a>
</i18n-t>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";
export default {
components: {
HiddenInput,
}
};
</script>

18
src/components/notifications/ZohoCliq.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="mb-3">
<label for="zcliq-webhookurl" class="form-label">{{ $t("Webhook URL") }}</label>
<input
id="zcliq-webhookurl"
v-model="$parent.notification.webhookUrl"
type="text"
class="form-control"
required
/>
<i18n-t tag="div" keypath="wayToGetZohoCliqURL" class="form-text">
<a
href="https://www.zoho.com/cliq/help/platform/webhook-tokens.html"
target="_blank"
>{{ $t("here") }}</a>
</i18n-t>
</div>
</template>

51
src/components/notifications/index.js
View File

@@ -3,43 +3,67 @@ import AlertNow from "./AlertNow.vue";
import AliyunSMS from "./AliyunSms.vue";
import Apprise from "./Apprise.vue";
import Bark from "./Bark.vue";
import Bitrix24 from "./Bitrix24.vue";
import ClickSendSMS from "./ClickSendSMS.vue";
import CallMeBot from "./CallMeBot.vue";
import SMSC from "./SMSC.vue";
import DingDing from "./DingDing.vue";
import Discord from "./Discord.vue";
import Feishu from "./Feishu.vue";
import FreeMobile from "./FreeMobile.vue";
import GoogleChat from "./GoogleChat.vue";
import Gorush from "./Gorush.vue";
import Gotify from "./Gotify.vue";
import GrafanaOncall from "./GrafanaOncall.vue";
import GtxMessaging from "./GtxMessaging.vue";
import HomeAssistant from "./HomeAssistant.vue";
import HeiiOnCall from "./HeiiOnCall.vue";
import Keep from "./Keep.vue";
import Kook from "./Kook.vue";
import Line from "./Line.vue";
import LineNotify from "./LineNotify.vue";
import LunaSea from "./LunaSea.vue";
import Matrix from "./Matrix.vue";
import Mattermost from "./Mattermost.vue";
import Nostr from "./Nostr.vue";
import Ntfy from "./Ntfy.vue";
import Octopush from "./Octopush.vue";
import OneBot from "./OneBot.vue";
import Opsgenie from "./Opsgenie.vue";
import PagerDuty from "./PagerDuty.vue";
import FlashDuty from "./FlashDuty.vue";
import PagerTree from "./PagerTree.vue";
import PromoSMS from "./PromoSMS.vue";
import Pushbullet from "./Pushbullet.vue";
import PushDeer from "./PushDeer.vue";
import Pushover from "./Pushover.vue";
import Pushy from "./Pushy.vue";
import RocketChat from "./RocketChat.vue";
import ServerChan from "./ServerChan.vue";
import SerwerSMS from "./SerwerSMS.vue";
import Signal from "./Signal.vue";
import SMSManager from "./SMSManager.vue";
import SMSPartner from "./SMSPartner.vue";
import Slack from "./Slack.vue";
import Squadcast from "./Squadcast.vue";
import SMSEagle from "./SMSEagle.vue";
import Stackfield from "./Stackfield.vue";
import STMP from "./SMTP.vue";
import Teams from "./Teams.vue";
import TechulusPush from "./TechulusPush.vue";
import Telegram from "./Telegram.vue";
import Twilio from "./Twilio.vue";
import Webhook from "./Webhook.vue";
import WeCom from "./WeCom.vue";
import GoAlert from "./GoAlert.vue";
import ZohoCliq from "./ZohoCliq.vue";
import Splunk from "./Splunk.vue";
import SevenIO from "./SevenIO.vue";
import Whapi from "./Whapi.vue";
import Cellsynt from "./Cellsynt.vue";
/**
* Manage all notification form.
*
* @type { Record<string, any> }
*/
const NotificationFormList = {
@@ -48,23 +72,35 @@ const NotificationFormList = {
"AliyunSMS": AliyunSMS,
"apprise": Apprise,
"Bark": Bark,
"Bitrix24": Bitrix24,
"clicksendsms": ClickSendSMS,
"CallMeBot": CallMeBot,
"smsc": SMSC,
"DingDing": DingDing,
"discord": Discord,
"Feishu": Feishu,
"FreeMobile": FreeMobile,
"GoogleChat": GoogleChat,
"gorush": Gorush,
"gotify": Gotify,
"GrafanaOncall": GrafanaOncall,
"HomeAssistant": HomeAssistant,
"HeiiOnCall": HeiiOnCall,
"Keep": Keep,
"Kook": Kook,
"line": Line,
"LineNotify": LineNotify,
"lunasea": LunaSea,
"matrix": Matrix,
"mattermost": Mattermost,
"nostr": Nostr,
"ntfy": Ntfy,
"octopush": Octopush,
"OneBot": OneBot,
"Opsgenie": Opsgenie,
"PagerDuty": PagerDuty,
"FlashDuty": FlashDuty,
"PagerTree": PagerTree,
"promosms": PromoSMS,
"pushbullet": Pushbullet,
"PushByTechulus": TechulusPush,
@@ -74,13 +110,26 @@ const NotificationFormList = {
"rocket.chat": RocketChat,
"serwersms": SerwerSMS,
"signal": Signal,
"SMSManager": SMSManager,
"SMSPartner": SMSPartner,
"slack": Slack,
"squadcast": Squadcast,
"SMSEagle": SMSEagle,
"smtp": STMP,
"stackfield": Stackfield,
"teams": Teams,
"telegram": Telegram,
"twilio": Twilio,
"Splunk": Splunk,
"webhook": Webhook,
"WeCom": WeCom,
"GoAlert": GoAlert,
"ServerChan": ServerChan,
"ZohoCliq": ZohoCliq,
"SevenIO": SevenIO,
"whapi": Whapi,
"gtxmessaging": GtxMessaging,
"Cellsynt": Cellsynt,
};
export default NotificationFormList;

258
src/components/settings/APIKeys.vue Normal file
View File

@@ -0,0 +1,258 @@
<template>
<div>
<div class="add-btn">
<button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
<font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
</button>
</div>
<div>
<span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
{{ $t("No API Keys") }}
</span>
<div
v-for="(item, index) in keyList"
:key="index"
class="item"
:class="item.status"
>
<div class="left-part">
<div
class="circle"
></div>
<div class="info">
<div class="title">{{ item.name }}</div>
<div class="status">
{{ $t("apiKey-" + item.status) }}
</div>
<div class="date">
{{ $t("Created") }}: {{ item.createdDate }}
</div>
<div class="date">
{{ $t("Expires") }}: {{ item.expires || $t("Never") }}
</div>
</div>
</div>
<div class="buttons">
<div class="btn-group" role="group">
<button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
<font-awesome-icon icon="pause" /> {{ $t("Disable") }}
</button>
<button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
<font-awesome-icon icon="play" /> {{ $t("Enable") }}
</button>
<button class="btn btn-danger" @click="deleteDialog(item.id)">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-3" style="font-size: 13px;">
<a href="https://github.com/louislam/uptime-kuma/wiki/API-Keys" target="_blank">{{ $t("Learn More") }}</a>
</div>
<Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="disableKey">
{{ $t("disableAPIKeyMsg") }}
</Confirm>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteKey">
{{ $t("deleteAPIKeyMsg") }}
</Confirm>
<APIKeyDialog ref="apiKeyDialog" />
</div>
</template>
<script>
import APIKeyDialog from "../../components/APIKeyDialog.vue";
import Confirm from "../Confirm.vue";
export default {
components: {
APIKeyDialog,
Confirm,
},
data() {
return {
selectedKeyID: null,
};
},
computed: {
keyList() {
let result = Object.values(this.$root.apiKeyList);
return result;
},
},
methods: {
/**
* Show dialog to confirm deletion
* @param {number} keyID ID of monitor that is being deleted
* @returns {void}
*/
deleteDialog(keyID) {
this.selectedKeyID = keyID;
this.$refs.confirmDelete.show();
},
/**
* Delete a key
* @returns {void}
*/
deleteKey() {
this.$root.deleteAPIKey(this.selectedKeyID, (res) => {
this.$root.toastRes(res);
});
},
/**
* Show dialog to confirm pause
* @param {number} keyID ID of key to pause
* @returns {void}
*/
disableDialog(keyID) {
this.selectedKeyID = keyID;
this.$refs.confirmPause.show();
},
/**
* Pause API key
* @returns {void}
*/
disableKey() {
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
this.$root.toastRes(res);
});
},
/**
* Resume API key
* @param {number} id Key to resume
* @returns {void}
*/
enableKey(id) {
this.$root.getSocket().emit("enableAPIKey", id, (res) => {
this.$root.toastRes(res);
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../../assets/vars.scss";
.mobile {
.item {
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
}
.add-btn {
padding-top: 20px;
padding-bottom: 20px;
}
.item {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
border-radius: 10px;
transition: all ease-in-out 0.15s;
justify-content: space-between;
padding: 10px;
min-height: 90px;
margin-bottom: 5px;
&:hover {
background-color: $highlight-white;
}
&.active {
.circle {
background-color: $primary;
}
}
&.inactive {
.circle {
background-color: $danger;
}
}
&.expired {
.left-part {
opacity: 0.3;
}
.circle {
background-color: $dark-font-color;
}
}
.left-part {
display: flex;
gap: 12px;
align-items: center;
.circle {
width: 25px;
height: 25px;
border-radius: 50rem;
}
.info {
.title {
font-weight: bold;
font-size: 20px;
}
.status {
font-size: 14px;
}
}
}
.buttons {
display: flex;
gap: 8px;
flex-direction: row-reverse;
.btn-group {
width: 310px;
}
}
}
.date {
margin-top: 5px;
display: block;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: 0 10px;
width: fit-content;
.dark & {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
}
.dark {
.item {
&:hover {
background-color: $dark-bg2;
}
}
}
</style>

47
src/components/settings/Appearance.vue
View File

@@ -112,6 +112,53 @@
</div>
</div>
</div>
<!-- Timeline -->
<div class="my-4">
<label class="form-label">{{ $t("styleElapsedTime") }}</label>
<div>
<div class="btn-group" role="group">
<input
id="styleElapsedTimeShowNoLine"
v-model="$root.styleElapsedTime"
type="radio"
class="btn-check"
name="styleElapsedTime"
autocomplete="off"
value="no-line"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine">
{{ $t("styleElapsedTimeShowNoLine") }}
</label>
<input
id="styleElapsedTimeShowWithLine"
v-model="$root.styleElapsedTime"
type="radio"
class="btn-check"
name="styleElapsedTime"
autocomplete="off"
value="with-line"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine">
{{ $t("styleElapsedTimeShowWithLine") }}
</label>
<input
id="styleElapsedTimeNone"
v-model="$root.styleElapsedTime"
type="radio"
class="btn-check"
name="styleElapsedTime"
autocomplete="off"
value="none"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeNone">
{{ $t("None") }}
</label>
</div>
</div>
</div>
</div>
</template>

222
src/components/settings/Backup.vue
View File

@@ -1,222 +0,0 @@
<template>
<div>
<div class="my-4">
<h4 class="mt-4 mb-2">{{ $t("Export Backup") }}</h4>
<p>
{{ $t("backupDescription") }} <br />
({{ $t("backupDescription2") }}) <br />
</p>
<div class="mb-2">
<button class="btn btn-primary" @click="downloadBackup">
{{ $t("Export") }}
</button>
</div>
<p>
<strong>{{ $t("backupDescription3") }}</strong>
</p>
</div>
<div class="my-4">
<h4 class="mt-4 mb-2">{{ $t("Import Backup") }}</h4>
<label class="form-label">{{ $t("Options") }}:</label>
<br />
<div class="form-check form-check-inline">
<input
id="radioKeep"
v-model="importHandle"
class="form-check-input"
type="radio"
name="radioImportHandle"
value="keep"
/>
<label class="form-check-label" for="radioKeep">
{{ $t("Keep both") }}
</label>
</div>
<div class="form-check form-check-inline">
<input
id="radioSkip"
v-model="importHandle"
class="form-check-input"
type="radio"
name="radioImportHandle"
value="skip"
/>
<label class="form-check-label" for="radioSkip">
{{ $t("Skip existing") }}
</label>
</div>
<div class="form-check form-check-inline">
<input
id="radioOverwrite"
v-model="importHandle"
class="form-check-input"
type="radio"
name="radioImportHandle"
value="overwrite"
/>
<label class="form-check-label" for="radioOverwrite">
{{ $t("Overwrite") }}
</label>
</div>
<div class="form-text mb-2">
{{ $t("importHandleDescription") }}
</div>
<div class="mb-2">
<input
id="import-backend"
type="file"
class="form-control"
accept="application/json"
/>
</div>
<div class="input-group mb-2 justify-content-end">
<button
type="button"
class="btn btn-outline-primary"
:disabled="processing"
@click="confirmImport"
>
<div
v-if="processing"
class="spinner-border spinner-border-sm me-1"
></div>
{{ $t("Import") }}
</button>
</div>
<div
v-if="importAlert"
class="alert alert-danger mt-3"
style="padding: 6px 16px;"
>
{{ importAlert }}
</div>
</div>
<Confirm
ref="confirmImport"
btn-style="btn-danger"
:yes-text="$t('Yes')"
:no-text="$t('No')"
@yes="importBackup"
>
{{ $t("confirmImportMsg") }}
</Confirm>
</div>
</template>
<script>
import Confirm from "../../components/Confirm.vue";
import dayjs from "dayjs";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
Confirm,
},
data() {
return {
processing: false,
importHandle: "skip",
importAlert: null,
};
},
methods: {
/**
* Show the confimation dialog confirming the configuration
* be imported
*/
confirmImport() {
this.$refs.confirmImport.show();
},
/** Download a backup of the configuration */
downloadBackup() {
let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
let fileName = `Uptime_Kuma_Backup_${time}.json`;
let monitorList = Object.values(this.$root.monitorList);
let exportData = {
version: this.$root.info.version,
notificationList: this.$root.notificationList,
monitorList: monitorList,
};
exportData = JSON.stringify(exportData, null, 4);
let downloadItem = document.createElement("a");
downloadItem.setAttribute(
"href",
"data:application/json;charset=utf-8," +
encodeURIComponent(exportData)
);
downloadItem.setAttribute("download", fileName);
downloadItem.click();
},
/**
* Import the specified backup file
* @returns {?string}
*/
importBackup() {
this.processing = true;
let uploadItem = document.getElementById("import-backend").files;
if (uploadItem.length <= 0) {
this.processing = false;
return (this.importAlert = this.$t("alertNoFile"));
}
if (uploadItem.item(0).type !== "application/json") {
this.processing = false;
return (this.importAlert = this.$t("alertWrongFileType"));
}
let fileReader = new FileReader();
fileReader.readAsText(uploadItem.item(0));
fileReader.onload = (item) => {
this.$root.uploadBackup(
item.target.result,
this.importHandle,
(res) => {
this.processing = false;
if (res.ok) {
toast.success(res.msg);
} else {
toast.error(res.msg);
}
}
);
};
},
},
};
</script>
<style lang="scss" scoped>
@import "../../assets/vars.scss";
.dark {
#import-backend {
&::file-selector-button {
color: $primary;
background-color: $dark-bg;
}
&:hover:not(:disabled):not([readonly])::file-selector-button {
color: $dark-font-color2;
background-color: $primary;
}
}
}
</style>

114
src/components/settings/General.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<form class="my-4" @submit.prevent="saveGeneral">
<!-- Timezone -->
<form class="my-4" autocomplete="off" @submit.prevent="saveGeneral">
<!-- Client side Timezone -->
<div class="mb-4">
<label for="timezone" class="form-label">
{{ $t("Timezone") }}
{{ $t("Display Timezone") }}
</label>
<select id="timezone" v-model="$root.userTimezone" class="form-select">
<option value="auto">
@@ -20,6 +20,23 @@
</select>
</div>
<!-- Server Timezone -->
<div class="mb-4">
<label for="timezone" class="form-label">
{{ $t("Server Timezone") }}
</label>
<select id="timezone" v-model="settings.serverTimezone" class="form-select">
<option value="UTC">UTC</option>
<option
v-for="(timezone, index) in timezoneList"
:key="index"
:value="timezone.value"
>
{{ timezone.name }}
</option>
</select>
</div>
<!-- Search Engine -->
<div class="mb-4">
<label class="form-label">
@@ -32,7 +49,7 @@
v-model="settings.searchEngineIndex"
class="form-check-input"
type="radio"
name="flexRadioDefault"
name="searchEngineIndex"
:value="true"
required
/>
@@ -46,7 +63,7 @@
v-model="settings.searchEngineIndex"
class="form-check-input"
type="radio"
name="flexRadioDefault"
name="searchEngineIndex"
:value="false"
required
/>
@@ -105,6 +122,7 @@
name="primaryBaseURL"
placeholder="https://"
pattern="https?://.+"
autocomplete="new-password"
/>
<button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">
{{ $t("Auto Get") }}
@@ -122,7 +140,7 @@
<HiddenInput
id="steamAPIKey"
v-model="settings.steamAPIKey"
autocomplete="one-time-code"
autocomplete="new-password"
/>
<div class="form-text">
{{ $t("steamApiKeyDescription") }}
@@ -132,6 +150,67 @@
</div>
</div>
<!-- DNS Cache (nscd) -->
<div v-if="$root.info.isContainer" class="mb-4">
<label class="form-label">
{{ $t("enableNSCD") }}
</label>
<div class="form-check">
<input
id="nscdEnable"
v-model="settings.nscd"
class="form-check-input"
type="radio"
name="nscd"
:value="true"
required
/>
<label class="form-check-label" for="nscdEnable">
{{ $t("Enable") }}
</label>
</div>
<div class="form-check">
<input
id="nscdDisable"
v-model="settings.nscd"
class="form-check-input"
type="radio"
name="nscd"
:value="false"
required
/>
<label class="form-check-label" for="nscdDisable">
{{ $t("Disable") }}
</label>
</div>
</div>
<!-- Chrome Executable -->
<div class="mb-4">
<label class="form-label" for="primaryBaseURL">
{{ $t("chromeExecutable") }}
</label>
<div class="input-group mb-3">
<input
id="primaryBaseURL"
v-model="settings.chromeExecutable"
class="form-control"
name="primaryBaseURL"
:placeholder="$t('chromeExecutableAutoDetect')"
/>
<button class="btn btn-outline-primary" type="button" @click="testChrome">
{{ $t("Test") }}
</button>
</div>
<div class="form-text">
{{ $t("chromeExecutableDescription") }}
</div>
</div>
<!-- Save Button -->
<div>
<button class="btn btn-primary" type="submit">
@@ -145,11 +224,7 @@
<script>
import HiddenInput from "../../components/HiddenInput.vue";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import { timezoneList } from "../../util-frontend";
dayjs.extend(utc);
dayjs.extend(timezone);
export default {
components: {
@@ -178,15 +253,30 @@ export default {
},
methods: {
/** Save the settings */
/**
* Save the settings
* @returns {void}
*/
saveGeneral() {
localStorage.timezone = this.$root.userTimezone;
this.saveSettings();
},
/** Get the base URL of the application */
/**
* Get the base URL of the application
* @returns {void}
*/
autoGetPrimaryBaseURL() {
this.settings.primaryBaseURL = location.protocol + "//" + location.host;
},
/**
* Test the chrome executable
* @returns {void}
*/
testChrome() {
this.$root.getSocket().emit("testChrome", this.settings.chromeExecutable, (res) => {
this.$root.toastRes(res);
});
},
},
};
</script>

35
src/components/settings/MonitorHistory.vue
View File

@@ -7,6 +7,7 @@
settings.keepDataPeriodDays,
])
}}
{{ $t("infiniteRetention") }}
</label>
<input
id="keepDataPeriodDays"
@@ -14,9 +15,12 @@
type="number"
class="form-control"
required
min="1"
min="0"
step="1"
/>
<div v-if="settings.keepDataPeriodDays < 0" class="form-text">
{{ $t("dataRetentionTimeError") }}
</div>
</div>
<div class="my-4">
<button class="btn btn-primary" type="button" @click="saveSettings()">
@@ -24,7 +28,7 @@
</button>
</div>
<div class="my-4">
<div class="my-3">
<div v-if="$root.info.dbType === 'sqlite'" class="my-3">
<button class="btn btn-outline-info me-2" @click="shrinkDatabase">
{{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})
</button>
@@ -53,9 +57,6 @@
<script>
import Confirm from "../../components/Confirm.vue";
import { log } from "../../util.ts";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
@@ -90,7 +91,10 @@ export default {
},
methods: {
/** Get the current size of the database */
/**
* Get the current size of the database
* @returns {void}
*/
loadDatabaseSize() {
log.debug("monitorhistory", "load database size");
this.$root.getSocket().emit("getDatabaseSize", (res) => {
@@ -103,30 +107,39 @@ export default {
});
},
/** Request that the database is shrunk */
/**
* Request that the database is shrunk
* @returns {void}
*/
shrinkDatabase() {
this.$root.getSocket().emit("shrinkDatabase", (res) => {
if (res.ok) {
this.loadDatabaseSize();
toast.success("Done");
this.$root.toastSuccess("Done");
} else {
log.debug("monitorhistory", res);
}
});
},
/** Show the dialog to confirm clearing stats */
/**
* Show the dialog to confirm clearing stats
* @returns {void}
*/
confirmClearStatistics() {
this.$refs.confirmClearStatistics.show();
},
/** Send the request to clear stats */
/**
* Send the request to clear stats
* @returns {void}
*/
clearStatistics() {
this.$root.clearStatistics((res) => {
if (res.ok) {
this.$router.go();
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},

85
src/components/settings/Notifications.vue
View File

@@ -20,6 +20,39 @@
</button>
</div>
<div class="my-4 pt-4">
<h5 class="my-4 settings-subheading">{{ $t("monitorToastMessagesLabel") }}</h5>
<p>{{ $t("monitorToastMessagesDescription") }}</p>
<div class="my-4">
<label for="toastErrorTimeoutSecs" class="form-label">
{{ $t("toastErrorTimeout") }}
</label>
<input
id="toastErrorTimeoutSecs"
v-model="toastErrorTimeoutSecs"
type="number"
class="form-control"
min="-1"
step="1"
/>
</div>
<div class="my-4">
<label for="toastSuccessTimeoutSecs" class="form-label">
{{ $t("toastSuccessTimeout") }}
</label>
<input
id="toastSuccessTimeoutSecs"
v-model="toastSuccessTimeoutSecs"
type="number"
class="form-control"
min="-1"
step="1"
/>
</div>
</div>
<div class="my-4 pt-4">
<h5 class="my-4 settings-subheading">{{ $t("settingsCertificateExpiry") }}</h5>
<p>{{ $t("certificationExpiryDescription") }}</p>
@@ -27,13 +60,13 @@
<div class="mt-1 mb-3 ps-2 cert-exp-days col-12 col-xl-6">
<div v-for="day in settings.tlsExpiryNotifyDays" :key="day" class="d-flex align-items-center justify-content-between cert-exp-day-row py-2">
<span>{{ day }} {{ $tc("day", day) }}</span>
<button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)">
<font-awesome-icon class="" icon="times" />
<button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" :aria-label="$t('Remove the expiry notification')" @click="removeExpiryNotifDay(day)">
<font-awesome-icon icon="times" />
</button>
</div>
</div>
<div class="col-12 col-xl-6">
<ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" />
<ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" :action-aria-label="$t('Add a new expiry notification day')" />
</div>
<div>
<button class="btn btn-primary" type="button" @click="saveSettings()">
@@ -58,6 +91,8 @@ export default {
data() {
return {
toastSuccessTimeoutSecs: 20,
toastErrorTimeoutSecs: -1,
/**
* Variable to store the input for new certificate expiry day.
*/
@@ -77,10 +112,31 @@ export default {
},
},
watch: {
// Parse, store and apply new timeout settings.
toastSuccessTimeoutSecs(newTimeout) {
const parsedTimeout = parseInt(newTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
localStorage.toastSuccessTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
}
},
toastErrorTimeoutSecs(newTimeout) {
const parsedTimeout = parseInt(newTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
localStorage.toastErrorTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
}
}
},
mounted() {
this.loadToastTimeoutSettings();
},
methods: {
/**
* Remove a day from expiry notification days.
* @param {number} day The day to remove.
* @returns {void}
*/
removeExpiryNotifDay(day) {
this.settings.tlsExpiryNotifyDays = this.settings.tlsExpiryNotifyDays.filter(d => d !== day);
@@ -93,6 +149,7 @@ export default {
* - day is > 0.
* - The day is not already in the list.
* @param {number} day The day number to add.
* @returns {void}
*/
addExpiryNotifDay(day) {
if (day != null && day !== "") {
@@ -106,6 +163,28 @@ export default {
}
}
},
/**
* Loads toast timeout settings from storage to component data.
* @returns {void}
*/
loadToastTimeoutSettings() {
const successTimeout = localStorage.toastSuccessTimeout;
if (successTimeout !== undefined) {
const parsedTimeout = parseInt(successTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
this.toastSuccessTimeoutSecs = parsedTimeout > 0 ? parsedTimeout / 1000 : parsedTimeout;
}
}
const errorTimeout = localStorage.toastErrorTimeout;
if (errorTimeout !== undefined) {
const parsedTimeout = parseInt(errorTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
this.toastErrorTimeoutSecs = parsedTimeout > 0 ? parsedTimeout / 1000 : parsedTimeout;
}
}
},
},
};
</script>

53
src/components/settings/RemoteBrowsers.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div>
<div class="dockerHost-list my-4">
<p v-if="$root.remoteBrowserList.length === 0">
{{ $t("Not available, please setup.") }}
</p>
<ul class="list-group mb-3" style="border-radius: 1rem;">
<li v-for="(remoteBrowser, index) in $root.remoteBrowserList" :key="index" class="list-group-item">
{{ remoteBrowser.name }}<br>
<a href="#" @click="$refs.remoteBrowserDialog.show(remoteBrowser.id)">{{ $t("Edit") }}</a>
</li>
</ul>
<button class="btn btn-primary me-2" type="button" @click="$refs.remoteBrowserDialog.show()">
<font-awesome-icon icon="plus" /> {{ $t("Add Remote Browser") }}
</button>
</div>
<div class="my-4 pt-4">
<h5 class="my-4 settings-subheading">{{ $t("What is a Remote Browser?") }}</h5>
<p>{{ $t("remoteBrowsersDescription") }} <a href="https://hub.docker.com/r/browserless/chrome">{{ $t("self-hosted container") }}</a></p>
</div>
<RemoteBrowserDialog ref="remoteBrowserDialog" />
</div>
</template>
<script>
import RemoteBrowserDialog from "../../components/RemoteBrowserDialog.vue";
export default {
components: {
RemoteBrowserDialog,
},
data() {
return {};
},
computed: {
settings() {
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.$parent.saveSettings;
},
settingsLoaded() {
return this.$parent.$parent.$parent.settingsLoaded;
},
}
};
</script>

17
src/components/settings/ReverseProxy.vue
View File

@@ -41,7 +41,7 @@
<HiddenInput
id="cloudflareTunnelToken"
v-model="cloudflareTunnelToken"
autocomplete="one-time-code"
autocomplete="new-password"
:readonly="running"
/>
<div class="form-text">
@@ -175,17 +175,26 @@ export default {
this.$root.getSocket().emit(prefix + "leave");
},
methods: {
/** Start the Cloudflare tunnel */
/**
* Start the Cloudflare tunnel
* @returns {void}
*/
start() {
this.$root.getSocket().emit(prefix + "start", this.cloudflareTunnelToken);
},
/** Stop the Cloudflare tunnel */
/**
* Stop the Cloudflare tunnel
* @returns {void}
*/
stop() {
this.$root.getSocket().emit(prefix + "stop", this.currentPassword, (res) => {
this.$root.toastRes(res);
});
},
/** Remove the token for the Cloudflare tunnel */
/**
* Remove the token for the Cloudflare tunnel
* @returns {void}
*/
removeToken() {
this.$root.getSocket().emit(prefix + "removeToken");
this.cloudflareTunnelToken = "";

42
src/components/settings/Security.vue
View File

@@ -19,6 +19,7 @@
v-model="password.currentPassword"
type="password"
class="form-control"
autocomplete="current-password"
required
/>
</div>
@@ -32,6 +33,7 @@
v-model="password.newPassword"
type="password"
class="form-control"
autocomplete="new-password"
required
/>
</div>
@@ -46,6 +48,7 @@
type="password"
class="form-control"
:class="{ 'is-invalid': invalidPassword }"
autocomplete="new-password"
required
/>
<div class="invalid-feedback">
@@ -90,10 +93,16 @@
<TwoFADialog ref="TwoFADialog" />
<Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-html="$t('disableauth.message1')"></p>
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-html="$t('disableauth.message2')"></p>
<i18n-t tag="p" keypath="disableauth.message1">
<template #disableAuth>
<strong>{{ $t('disable authentication') }}</strong>
</template>
</i18n-t>
<i18n-t tag="p" keypath="disableauth.message2">
<template #intendThirdPartyAuth>
<strong>{{ $t('intend to implement third-party authentication') }}</strong>
</template>
</i18n-t>
<p>{{ $t("Please use this option carefully!") }}</p>
<div class="mb-3">
@@ -152,7 +161,10 @@ export default {
},
methods: {
/** Check new passwords match before saving them */
/**
* Check new passwords match before saving them
* @returns {void}
*/
savePassword() {
if (this.password.newPassword !== this.password.repeatNewPassword) {
this.invalidPassword = true;
@@ -165,12 +177,21 @@ export default {
this.password.currentPassword = "";
this.password.newPassword = "";
this.password.repeatNewPassword = "";
// Update token of the current session
if (res.token) {
this.$root.storage().token = res.token;
this.$root.socket.token = res.token;
}
}
});
}
},
/** Disable authentication for web app access */
/**
* Disable authentication for web app access
* @returns {void}
*/
disableAuth() {
this.settings.disableAuth = true;
@@ -183,7 +204,10 @@ export default {
}, this.password.currentPassword);
},
/** Enable authentication for web app access */
/**
* Enable authentication for web app access
* @returns {void}
*/
enableAuth() {
this.settings.disableAuth = false;
this.saveSettings();
@@ -191,6 +215,10 @@ export default {
location.reload();
},
/**
* Show confirmation dialog for disable auth
* @returns {void}
*/
confirmDisableAuth() {
this.$refs.confirmDisableAuth.show();
},

175
src/components/settings/Tags.vue Normal file
View File

@@ -0,0 +1,175 @@
<template>
<div class="my-4">
<div class="mx-0 mx-lg-4 pt-1 mb-4">
<button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
</div>
<div class="tags-list my-3">
<div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-0 mx-lg-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
<div class="col-10 col-sm-5">
<Tag :item="tag" />
</div>
<div class="col-5 px-1 d-none d-sm-block">
<div>{{ monitorsByTag(tag.id).length }} {{ $tc("Monitor", monitorsByTag(tag.id).length) }}</div>
</div>
<div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
<button type="button" class="btn-rm-tag btn btn-outline-danger ms-2 py-1" :disabled="processing" @click.stop="deleteConfirm(index)">
<font-awesome-icon class="" icon="trash" />
</button>
</div>
</div>
</div>
<TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" :existing-tags="tagsList" />
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
{{ $t("confirmDeleteTagMsg") }}
</Confirm>
</div>
</template>
<script>
import TagEditDialog from "../../components/TagEditDialog.vue";
import Tag from "../Tag.vue";
import Confirm from "../Confirm.vue";
export default {
components: {
Confirm,
TagEditDialog,
Tag,
},
data() {
return {
processing: false,
tagsList: null,
deletingTag: null,
};
},
computed: {
settings() {
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.$parent.saveSettings;
},
settingsLoaded() {
return this.$parent.$parent.$parent.settingsLoaded;
},
},
mounted() {
this.getExistingTags();
},
methods: {
/**
* Reflect tag changes in the UI by fetching data. Callback for the edit tag dialog.
* @returns {void}
*/
tagsUpdated() {
this.getExistingTags();
this.$root.getMonitorList();
},
/**
* Get list of tags from server
* @returns {void}
*/
getExistingTags() {
this.processing = true;
this.$root.getSocket().emit("getTags", (res) => {
this.processing = false;
if (res.ok) {
this.tagsList = res.tags;
} else {
this.$root.toastError(res.msg);
}
});
},
/**
* Show confirmation for deleting a tag
* @param {number} index index of the tag to delete in the local tagsList
* @returns {void}
*/
deleteConfirm(index) {
this.deletingTag = this.tagsList[index];
this.$refs.confirmDelete.show();
},
/**
* Show dialog for adding a new tag
* @returns {void}
*/
addTag() {
this.$refs.tagEditDialog.reset();
this.$refs.tagEditDialog.show();
},
/**
* Show dialog for editing a tag
* @param {number} index index of the tag to edit in the local tagsList
* @returns {void}
*/
editTag(index) {
this.$refs.tagEditDialog.show(this.tagsList[index]);
},
/**
* Delete the tag "deletingTag" from server
* @returns {void}
*/
deleteTag() {
this.processing = true;
this.$root.getSocket().emit("deleteTag", this.deletingTag.id, (res) => {
this.$root.toastRes(res);
this.processing = false;
if (res.ok) {
this.tagsUpdated();
}
});
},
/**
* Get monitors which has a specific tag locally
* @param {number} tagId id of the tag to filter
* @returns {object[]} list of monitors which has a specific tag
*/
monitorsByTag(tagId) {
return Object.values(this.$root.monitorList).filter((monitor) => {
return monitor.tags.find(monitorTag => monitorTag.tag_id === tagId);
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../../assets/vars.scss";
.btn-rm-tag {
padding-left: 9px;
padding-right: 9px;
}
.tags-list .tags-list-row {
cursor: pointer;
border-top: 1px solid rgba(0, 0, 0, 0.125);
.dark & {
border-top: 1px solid $dark-border-color;
}
&:hover {
background-color: $highlight-white;
}
.dark &:hover {
background-color: $dark-bg2;
}
}
</style>

46
src/i18n.js
View File

@@ -1,11 +1,13 @@
import { createI18n } from "vue-i18n/index";
import en from "./languages/en";
import { createI18n } from "vue-i18n/dist/vue-i18n.esm-browser.prod.js";
import en from "./lang/en.json";
const languageList = {
"ar-SY": "العربية",
"cs-CZ": "Čeština",
"zh-HK": "繁體中文 (香港)",
"bg-BG": "Български",
"de-DE": "Deutsch (Deutschland)",
"de-CH": "Deutsch (Schweiz)",
"nl-NL": "Nederlands",
"nb-NO": "Norsk",
"es-ES": "Español",
@@ -13,7 +15,9 @@ const languageList = {
"fa": "Farsi",
"pt-PT": "Português (Portugal)",
"pt-BR": "Português (Brasileiro)",
"fi": "Suomi",
"fr-FR": "Français (France)",
"he-IL": "עברית",
"hu": "Magyar",
"hr-HR": "Hrvatski",
"it-IT": "Italiano (Italian)",
@@ -32,8 +36,15 @@ const languageList = {
"et-EE": "eesti",
"vi-VN": "Tiếng Việt",
"zh-TW": "繁體中文 (台灣)",
"uk-UA": "Український",
"uk-UA": "Українська",
"th-TH": "ไทย",
"el-GR": "Ελληνικά",
"yue": "繁體中文 (廣東話 / 粵語)",
"ro": "Limba română",
"ur": "Urdu",
"ge": "ქართული",
"uz": "O'zbek tili",
"ga": "Gaeilge",
};
let messages = {
@@ -46,12 +57,31 @@ for (let lang in languageList) {
};
}
const rtlLangs = [ "fa" ];
const rtlLangs = [ "he-IL", "fa", "ar-SY", "ur" ];
export const currentLocale = () => localStorage.locale
|| languageList[navigator.language] && navigator.language
|| languageList[navigator.language.substring(0, 2)] && navigator.language.substring(0, 2)
|| "en";
/**
* Find the best matching locale to display
* If no locale can be matched, the default is "en"
* @returns {string} the locale that should be displayed
*/
export function currentLocale() {
for (const locale of [ localStorage.locale, navigator.language, ...navigator.languages ]) {
// localstorage might not have a value or there might not be a language in `navigator.language`
if (!locale) {
continue;
}
if (locale in messages) {
return locale;
}
// some locales are further specified such as "en-US".
// If we only have a generic locale for this, we can use it too
const genericLocale = locale.split("-")[0];
if (genericLocale in messages) {
return genericLocale;
}
}
return "en";
}
export const localeDirection = () => {
return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr";

15
src/icon.js
View File

@@ -3,6 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// Add Free Font Awesome Icons
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
// In order to add an icon, you have to:
// 1) add the icon name in the import statement below;
// 2) add the icon name to the library.add() statement below.
import {
faArrowAltCircleUp,
faCog,
@@ -41,6 +44,12 @@ import {
faUndo,
faPlusCircle,
faAngleDown,
faWrench,
faHeartbeat,
faFilter,
faInfoCircle,
faClone,
faCertificate,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@@ -82,6 +91,12 @@ library.add(
faPlusCircle,
faAngleDown,
faLink,
faWrench,
faHeartbeat,
faFilter,
faInfoCircle,
faClone,
faCertificate,
);
export { FontAwesomeIcon };

20
src/lang/README.md Normal file
View File

@@ -0,0 +1,20 @@
# Translations
## How to translate
(2023-01-24 Updated)
1. Go to [https://weblate.kuma.pet](https://weblate.kuma.pet/projects/uptime-kuma/uptime-kuma/)
2. Register an account on Weblate
3. Make sure your GitHub email is matched with Weblate's account, so that it could show you as a contributor on GitHub
4. Choose your language on Weblate and start translating.
## How to add a new language in the dropdown
1. Add your language at https://weblate.kuma.pet/projects/uptime-kuma/uptime-kuma/
2. Find the language code (You can find it at the end of the URL)
3. Go to https://github.com/louislam/uptime-kuma/blob/master/src/i18n.js and click `Edit` icon
4. Add your language at the end of `languageList`, format: `"zh-TW": "繁體中文 (台灣)",`
5. Commit and make a pull request for me to approve
If you do not have programming skills, let me know in [the issues section](https://github.com/louislam/uptime-kuma/issues). I will assist you. 😏

Some files were not shown because too many files have changed in this diff Show More