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

Merge branch 'master' into 1.23.X-merge-to-2.X.X

Browse Source 
# Conflicts:
#	docker/debian-base.dockerfile
#	package-lock.json
#	server/database.js
#	server/model/monitor.js
#	server/uptime-kuma-server.js
#	server/util-server.js
This commit is contained in:
Louis Lam
2023-11-13 21:15:51 +08:00
parent d56bf08cd7 87b2e45fbf
commit ace1fe00c2
316 changed files with 9487 additions and 4997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/APIKeyDialog.vue
View File

@@ -92,11 +92,9 @@
<script lang="ts">
import { Modal } from "bootstrap";
import { useToast } from "vue-toastification";
import dayjs from "dayjs";
import Datepicker from "@vuepic/vue-datepicker";
import CopyableInput from "./CopyableInput.vue";
const toast = useToast();
export default {
components: {
@@ -126,6 +124,7 @@ export default {
methods: {
/**
* Show modal
* @returns {void}
*/
show() {
this.id = null;
@@ -138,7 +137,10 @@ export default {
this.keyaddmodal.show();
},
/** Submit data to server */
/**
* Submit data to server
* @returns {Promise<void>}
*/
async submit() {
this.processing = true;
@@ -154,12 +156,15 @@ export default {
this.keymodal.show();
this.clearForm();
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
/** Clear Form inputs */
/**
* Clear Form inputs
* @returns {void}
*/
clearForm() {
this.key = {
name: "",

5
src/components/BadgeGeneratorDialog.vue
View File

@@ -279,8 +279,9 @@ export default {
methods: {
/**
* Setting monitor
* @param {number} monitorId ID of monitor
* @param {string} monitorName Name of monitor
* @param {number} monitorId ID of monitor
* @param {string} monitorName Name of monitor
* @returns {void}
*/
show(monitorId, monitorName) {
this.monitor = {

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) {

11
src/components/Confirm.vue
View File

@@ -58,18 +58,23 @@ 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");
},
/**
* @emits string "no" Notify the parent when No is pressed
* @fires string "no" Notify the parent when No is pressed
* @returns {void}
*/
no() {
this.$emit("no");

12
src/components/CopyableInput.vue
View File

@@ -90,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) {

9
src/components/CreateGroupDialog.vue
View File

@@ -43,10 +43,17 @@ export default {
this.modal = new Modal(this.$refs.modal);
},
methods: {
/** Show the confirm dialog */
/**
* Show the confirm dialog
* @returns {void}
*/
show() {
this.modal.show();
},
/**
* Dialog confirmed
* @returns {void}
*/
confirm() {
this.$emit("added", this.groupName);
this.modal.hide();

27
src/components/DockerHostDialog.vue
View File

@@ -62,8 +62,6 @@
<script lang="ts">
import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
@@ -91,7 +89,10 @@ export default {
},
methods: {
/** Confirm deletion of docker host */
/**
* Confirm deletion of docker host
* @returns {void}
*/
deleteConfirm() {
this.modal.hide();
this.$refs.confirmDelete.show();
@@ -99,7 +100,8 @@ export default {
/**
* Show specified docker host
* @param {number} dockerHostID
* @param {number} dockerHostID ID of host to show
* @returns {void}
*/
show(dockerHostID) {
if (dockerHostID) {
@@ -116,7 +118,7 @@ export default {
}
if (!found) {
toast.error("Docker Host not found!");
this.$root.toastError("Docker Host not found!");
}
} else {
@@ -131,7 +133,10 @@ export default {
this.modal.show();
},
/** Add docker host */
/**
* Add docker host
* @returns {void}
*/
submit() {
this.processing = true;
this.$root.getSocket().emit("addDockerHost", this.dockerHost, this.id, (res) => {
@@ -150,7 +155,10 @@ export default {
});
},
/** Test the docker host */
/**
* Test the docker host
* @returns {void}
*/
test() {
this.processing = true;
this.$root.getSocket().emit("testDockerHost", this.dockerHost, (res) => {
@@ -159,7 +167,10 @@ export default {
});
},
/** Delete this docker host */
/**
* Delete this docker host
* @returns {void}
*/
deleteDockerHost() {
this.processing = true;
this.$root.getSocket().emit("deleteDockerHost", this.id, (res) => {

21
src/components/HeartbeatBar.vue
View File

@@ -56,6 +56,7 @@ export default {
/**
* If heartbeatList is null, get it from $root.heartbeatList
* @returns {object} Heartbeat list
*/
beatList() {
if (this.heartbeatList === null) {
@@ -67,8 +68,7 @@ export default {
/**
* Calculates the amount of beats of padding needed to fill the length of shortBeatList.
*
* @return {number} 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) {
@@ -148,7 +148,7 @@ export default {
/**
* Returns the style object for positioning the time element.
* @return {Object} The style object containing the CSS properties for positioning the time element.
* @returns {object} The style object containing the CSS properties for positioning the time element.
*/
timeStyle() {
return {
@@ -158,8 +158,7 @@ export default {
/**
* Calculates the time elapsed since the first valid beat.
*
* @return {string} The time elapsed in minutes or hours.
* @returns {string} The time elapsed in minutes or hours.
*/
timeSinceFirstBeat() {
const firstValidBeat = this.shortBeatList.at(this.numPadding);
@@ -173,8 +172,7 @@ export default {
/**
* Calculates the elapsed time since the last valid beat was registered.
*
* @return {string} The elapsed time in a minutes, hours or "now".
* @returns {string} The elapsed time in a minutes, hours or "now".
*/
timeSinceLastBeat() {
const lastValidBeat = this.shortBeatList.at(-1);
@@ -241,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));
@@ -251,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}` : "");

10
src/components/HiddenInput.vue
View File

@@ -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";
},

7
src/components/Login.vue
View File

@@ -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>
@@ -64,7 +64,10 @@ export default {
},
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;

46
src/components/MonitorList.vue
View File

@@ -103,6 +103,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) {
@@ -119,8 +120,7 @@ export default {
/**
* Returns a sorted list of monitors based on the applied filters and search text.
*
* @return {Array} The sorted list of monitors.
* @returns {Array} The sorted list of monitors.
*/
sortedMonitorList() {
let result = Object.values(this.$root.monitorList);
@@ -221,8 +221,7 @@ export default {
/**
* Determines if any filters are active.
*
* @return {boolean} True if any filter is active, false otherwise.
* @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 !== "";
@@ -267,7 +266,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;
@@ -283,13 +285,17 @@ 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;
@@ -297,6 +303,7 @@ export default {
/**
* Deselect a monitor
* @param {number} id ID of monitor
* @returns {void}
*/
deselect(id) {
delete this.selectedMonitors[id];
@@ -304,6 +311,7 @@ export default {
/**
* Select a monitor
* @param {number} id ID of monitor
* @returns {void}
*/
select(id) {
this.selectedMonitors[id] = true;
@@ -311,33 +319,45 @@ export default {
/**
* Determine if monitor is selected
* @param {number} id ID of monitor
* @returns {bool}
* @returns {bool} Is the monitor selected?
*/
isSelected(id) {
return id in this.selectedMonitors;
},
/** Disable select mode and reset selection */
/**
* Disable select mode and reset selection
* @returns {void}
*/
cancelSelectMode() {
this.selectMode = false;
this.selectedMonitors = {};
},
/** Show dialog to confirm pause */
/**
* Show dialog to confirm pause
* @returns {void}
*/
pauseDialog() {
this.$refs.confirmPause.show();
},
/** Pause each selected monitor */
/**
* 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));
.forEach(id => this.$root.getSocket().emit("pauseMonitor", id, () => {}));
this.cancelSelectMode();
},
/** Resume each selected monitor */
/**
* 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));
.forEach(id => this.$root.getSocket().emit("resumeMonitor", id, () => {}));
this.cancelSelectMode();
},

5
src/components/MonitorListFilter.vue
View File

@@ -141,6 +141,11 @@
</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>

5
src/components/MonitorListItem.vue
View File

@@ -189,7 +189,9 @@ export default {
},
methods: {
/**
* Changes the collapsed value of the current monitor and saves it to local storage
* Changes the collapsed value of the current monitor and saves
* it to local storage
* @returns {void}
*/
changeCollapsed() {
this.isCollapsed = !this.isCollapsed;
@@ -214,6 +216,7 @@ export default {
},
/**
* Toggle selection of monitor
* @returns {void}
*/
toggleSelection() {
if (this.isSelected(this.monitor.id)) {

12
src/components/MonitorSettingDialog.vue
View File

@@ -67,8 +67,9 @@ export default {
methods: {
/**
* Setting monitor
* @param {Object} group Data of monitor
* @param {Object} monitor Data of monitor
* @param {object} group Data of monitor
* @param {object} monitor Data of monitor
* @returns {void}
*/
show(group, monitor) {
this.monitor = {
@@ -86,6 +87,7 @@ export default {
* 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;
@@ -95,10 +97,10 @@ export default {
* 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

25
src/components/NotificationDialog.vue
View File

@@ -119,6 +119,7 @@ export default {
"GoogleChat": "Google Chat (Google Workspace)",
"gorush": "Gorush",
"gotify": "Gotify",
"GrafanaOncall": "Grafana Oncall",
"HomeAssistant": "Home Assistant",
"Kook": "Kook",
"line": "LINE Messenger",
@@ -218,7 +219,10 @@ export default {
},
methods: {
/** Show dialog to confirm deletion */
/**
* Show dialog to confirm deletion
* @returns {void}
*/
deleteConfirm() {
this.modal.hide();
this.$refs.confirmDelete.show();
@@ -227,6 +231,7 @@ export default {
/**
* Show settings for specified notification
* @param {number} notificationID ID of notification to show
* @returns {void}
*/
show(notificationID) {
if (notificationID) {
@@ -250,7 +255,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) => {
@@ -269,7 +277,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) => {
@@ -278,7 +289,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) => {
@@ -293,7 +307,8 @@ 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) {

5
src/components/PingChart.vue
View File

@@ -21,11 +21,8 @@ import { BarController, BarElement, Chart, Filler, LinearScale, LineController,
import "chartjs-adapter-dayjs-4";
import dayjs from "dayjs";
import { Line } from "vue-chartjs";
import { useToast } from "vue-toastification";
import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
const toast = useToast();
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
export default {
@@ -231,7 +228,7 @@ export default {
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) {
toast.error(res.msg);
this.$root.toastError(res.msg);
} else {
this.heartbeatList = res.data;
this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;

16
src/components/ProxyDialog.vue
View File

@@ -131,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();
@@ -140,6 +143,7 @@ export default {
/**
* Show settings for specified proxy
* @param {number} proxyID ID of proxy to show
* @returns {void}
*/
show(proxyID) {
if (proxyID) {
@@ -169,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) => {
@@ -187,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) => {

18
src/components/PublicGroupList.vue
View File

@@ -131,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);
@@ -141,6 +142,7 @@ 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);
@@ -150,10 +152,10 @@ export default {
* 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
@@ -166,8 +168,8 @@ export default {
/**
* Returns formatted certificate expiry or Bad cert message
* @param {Object} monitor Monitor to show expiry for
* @returns {string}
* @param {object} monitor Monitor to show expiry for
* @returns {string} Certificate expiry message
*/
formattedCertExpiryMessage(monitor) {
if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
@@ -180,9 +182,9 @@ export default {
},
/**
* Returns certificate expiry based on days remaining
* @param {Object} monitor Monitor to show expiry for
* @returns {string}
* 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) {

7
src/components/Tag.vue
View File

@@ -19,12 +19,13 @@
<script>
/**
* @typedef {import('./TagsManager.vue').Tag} Tag
*/
* @typedef {import('./TagsManager.vue').Tag} Tag
*/
export default {
props: {
/** Object representing tag
/**
* Object representing tag
* @type {Tag}
*/
item: {

16
src/components/TagEditDialog.vue
View File

@@ -123,9 +123,7 @@ import Confirm from "./Confirm.vue";
import Tag from "./Tag.vue";
import VueMultiselect from "vue-multiselect";
import { colorOptions } from "../util-frontend";
import { useToast } from "vue-toastification";
import { getMonitorRelativeURL } from "../util.ts";
const toast = useToast();
export default {
components: {
@@ -207,6 +205,8 @@ export default {
},
/**
* Selected a monitor and add to the list.
* @param {object} monitor Monitor to add
* @returns {void}
*/
selectedAddMonitor(monitor) {
if (monitor) {
@@ -227,6 +227,7 @@ export default {
methods: {
/**
* Show confirmation for deleting a tag
* @returns {void}
*/
deleteConfirm() {
this.$refs.confirmDelete.show();
@@ -234,6 +235,7 @@ export default {
/**
* Reset the editTag form
* @returns {void}
*/
reset() {
this.selectedColor = null;
@@ -263,7 +265,7 @@ export default {
/**
* Load tag information for display in the edit dialog
* @param {Object} tag tag object to edit
* @param {object} tag tag object to edit
* @returns {void}
*/
show(tag) {
@@ -316,7 +318,7 @@ export default {
for (let addId of this.addingMonitor) {
await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
if (!res.ok) {
toast.error(res.msg);
this.$root.toastError(res.msg);
editResult = false;
}
});
@@ -326,7 +328,7 @@ export default {
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) {
toast.error(res.msg);
this.$root.toastError(res.msg);
editResult = false;
}
});
@@ -377,7 +379,7 @@ export default {
/**
* 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
* @returns {object[]} list of monitors which has a specific tag
*/
monitorsByTag(tagId) {
return Object.values(this.$root.monitorList).filter((monitor) => {
@@ -396,7 +398,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) {

62
src/components/TagsManager.vue
View File

@@ -129,21 +129,20 @@
<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
* @property {number | undefined} monitor_id
* @property {number | undefined} tag_id
* @property {string} value
* @property {string} name
* @property {string} color
* @property {boolean | undefined} new
* @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 {
@@ -152,7 +151,8 @@ export default {
VueMultiselect,
},
props: {
/** Array of tags to be pre-selected
/**
* Array of tags to be pre-selected
* @type {Tag[]}
*/
preSelectedTags: {
@@ -244,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) {
@@ -273,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) {
@@ -285,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) {
@@ -313,7 +323,10 @@ export default {
}
this.clearDraftTag();
},
/** Remove a draft tag */
/**
* Remove a draft tag
* @returns {void}
*/
clearDraftTag() {
this.newDraftTag = {
name: null,
@@ -327,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) {
@@ -359,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();
@@ -381,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;
@@ -406,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;
@@ -422,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;

52
src/components/TwoFADialog.vue
View File

@@ -76,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: {
@@ -101,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;
@@ -126,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;
@@ -144,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;
@@ -162,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);
}
});
},

4
src/components/Uptime.vue
View File

@@ -84,10 +84,12 @@ export default {
},
title() {
if (this.type === "1y") {
return `1${this.$t("-year")}`;
}
if (this.type === "720") {
return `30${this.$t("-day")}`;
}
return `24${this.$t("-hour")}`;
}
},

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>

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>

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

@@ -59,6 +59,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,17 +111,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 />
{{STATUS}}: Status<br />
</div>
</div>
</div>
</template>

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

@@ -58,8 +58,6 @@
<script>
import HiddenInput from "../HiddenInput.vue";
import axios from "axios";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
@@ -68,7 +66,7 @@ export default {
methods: {
/**
* Get the URL for telegram updates
* @param {string} [mode=masked] Should the token be masked?
* @param {string} mode Should the token be masked?
* @returns {string} formatted URL
*/
telegramGetUpdatesURL(mode = "masked") {
@@ -85,7 +83,11 @@ export default {
return `https://api.telegram.org/bot${token}/getUpdates`;
},
/** Get the telegram chat ID */
/**
* Get the telegram chat ID
* @returns {void}
* @throws The chat ID could not be found
*/
async autoGetTelegramChatID() {
try {
let res = await axios.get(this.telegramGetUpdatesURL("withToken"));
@@ -106,7 +108,7 @@ export default {
}
} catch (error) {
toast.error(error.message);
this.$root.toastError(error.message);
}
},

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

@@ -12,9 +12,7 @@
</div>
<div class="mb-3">
<label for="webhook-request-body" class="form-label">{{
$t("Request Body")
}}</label>
<label for="webhook-request-body" class="form-label">{{ $t("Request Body") }}</label>
<select
id="webhook-request-body"
v-model="$parent.notification.webhookContentType"
@@ -26,40 +24,29 @@
<option value="custom">{{ $t("webhookBodyCustomOption") }}</option>
</select>
<div class="form-text">
<div v-if="$parent.notification.webhookContentType == 'json'">
<p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
</div>
<div v-if="$parent.notification.webhookContentType == 'form-data'">
<i18n-t tag="p" keypath="webhookFormDataDesc">
<template #multipart>multipart/form-data"</template>
<template #decodeFunction>
<strong>json_decode($_POST['data'])</strong>
</template>
</i18n-t>
</div>
<div v-if="$parent.notification.webhookContentType == 'custom'">
<i18n-t tag="p" keypath="webhookCustomBodyDesc">
<template #msg>
<code>msg</code>
</template>
<template #heartbeat>
<code>heartbeatJSON</code>
</template>
<template #monitor>
<code>monitorJSON</code>
</template>
</i18n-t>
</div>
</div>
<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
v-if="$parent.notification.webhookContentType == 'custom'"
id="customBody"
v-model="$parent.notification.webhookCustomBody"
class="form-control"
:placeholder="customBodyPlaceholder"
></textarea>
<textarea
id="customBody"
v-model="$parent.notification.webhookCustomBody"
class="form-control"
:placeholder="customBodyPlaceholder"
required
></textarea>
</template>
</div>
<div class="mb-3">
@@ -67,15 +54,14 @@
<input v-model="showAdditionalHeadersField" class="form-check-input" type="checkbox">
<label class="form-check-label">{{ $t("webhookAdditionalHeadersTitle") }}</label>
</div>
<div class="form-text">
<i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
</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>
@@ -90,18 +76,18 @@ export default {
computed: {
headersPlaceholder() {
return this.$t("Example:", [
`
{
`{
"Authorization": "Authorization Token"
}`,
]);
},
customBodyPlaceholder() {
return `Example:
{
"Title": "Uptime Kuma Alert - {{ monitorJSON['name'] }}",
return this.$t("Example:", [
`{
"Title": "Uptime Kuma Alert{% if monitorJSON %} - {{ monitorJSON['name'] }}{% endif %}",
"Body": "{{ msg }}"
}`;
}`
]);
}
},
};

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

@@ -12,6 +12,7 @@ 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 HomeAssistant from "./HomeAssistant.vue";
import Kook from "./Kook.vue";
import Line from "./Line.vue";
@@ -54,7 +55,6 @@ import Splunk from "./Splunk.vue";
/**
* Manage all notification form.
*
* @type { Record<string, any> }
*/
const NotificationFormList = {
@@ -72,6 +72,7 @@ const NotificationFormList = {
"GoogleChat": GoogleChat,
"gorush": Gorush,
"gotify": Gotify,
"GrafanaOncall": GrafanaOncall,
"HomeAssistant": HomeAssistant,
"Kook": Kook,
"line": Line,

19
src/components/settings/APIKeys.vue
View File

@@ -72,8 +72,6 @@
<script>
import APIKeyDialog from "../../components/APIKeyDialog.vue";
import Confirm from "../Confirm.vue";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
@@ -96,6 +94,7 @@ export default {
/**
* Show dialog to confirm deletion
* @param {number} keyID ID of monitor that is being deleted
* @returns {void}
*/
deleteDialog(keyID) {
this.selectedKeyID = keyID;
@@ -104,19 +103,18 @@ export default {
/**
* Delete a key
* @returns {void}
*/
deleteKey() {
this.$root.deleteAPIKey(this.selectedKeyID, (res) => {
if (res.ok) {
toast.success(res.msg);
} else {
toast.error(res.msg);
}
this.$root.toastRes(res);
});
},
/**
* Show dialog to confirm pause
* @param {number} keyID ID of key to pause
* @returns {void}
*/
disableDialog(keyID) {
this.selectedKeyID = keyID;
@@ -124,7 +122,8 @@ export default {
},
/**
* Pause maintenance
* Pause API key
* @returns {void}
*/
disableKey() {
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
@@ -133,7 +132,9 @@ export default {
},
/**
* Resume maintenance
* Resume API key
* @param {number} id Key to resume
* @returns {void}
*/
enableKey(id) {
this.$root.getSocket().emit("enableAPIKey", id, (res) => {

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

@@ -1,228 +0,0 @@
<template>
<div>
<div class="my-4">
<div class="alert alert-warning" role="alert" style="border-radius: 15px;">
{{ $t("backupOutdatedWarning") }}<br />
<br />
{{ $t("backupRecommend") }}
</div>
<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>

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

@@ -293,16 +293,25 @@ 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);

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

@@ -57,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: {
@@ -94,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) => {
@@ -107,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);
}
});
},

79
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>
@@ -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>

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

@@ -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 = "";

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

@@ -155,7 +155,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;
@@ -173,7 +176,10 @@ export default {
}
},
/** Disable authentication for web app access */
/**
* Disable authentication for web app access
* @returns {void}
*/
disableAuth() {
this.settings.disableAuth = true;
@@ -186,7 +192,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();
@@ -194,7 +203,10 @@ export default {
location.reload();
},
/** Show confirmation dialog for disable auth */
/**
* Show confirmation dialog for disable auth
* @returns {void}
*/
confirmDisableAuth() {
this.$refs.confirmDisableAuth.show();
},

6
src/components/settings/Tags.vue
View File

@@ -28,11 +28,9 @@
</template>
<script>
import { useToast } from "vue-toastification";
import TagEditDialog from "../../components/TagEditDialog.vue";
import Tag from "../Tag.vue";
import Confirm from "../Confirm.vue";
const toast = useToast();
export default {
components: {
@@ -86,7 +84,7 @@ export default {
if (res.ok) {
this.tagsList = res.tags;
} else {
toast.error(res.msg);
this.$root.toastError(res.msg);
}
});
},
@@ -138,7 +136,7 @@ export default {
/**
* 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
* @returns {object[]} list of monitors which has a specific tag
*/
monitorsByTag(tagId) {
return Object.values(this.$root.monitorList).filter((monitor) => {