Reduce monitor minimum interval to 1 second

src/languages/en.js

@@ -5,6 +5,7 @@ export default {
     resendEveryXTimes: "Resend every {0} times",
     resendDisabled: "Resend disabled",
     retriesDescription: "Maximum retries before the service is marked as down and a notification is sent",
+    minimumIntervalWarning: "Warning: Intervals below 20 seconds may result in poor performance.",
     ignoreTLSError: "Ignore TLS/SSL error for HTTPS websites",
     upsideDownModeDescription: "Flip the status upside down. If the service is reachable, it is DOWN.",
     maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.",
@@ -575,6 +576,11 @@ export default {
     "Go back to the previous page.": "Go back to the previous page.",
     "Coming Soon": "Coming Soon",
     wayToGetClickSendSMSToken: "You can get API Username and API Key from {0} .",
+    lowIntervalWarning: "Are you sure want to set the interval value below 20 seconds? This is NOT supported and may make Uptime Kuma unstable.",
+    enterConfirmationString: "To confirm, please enter the following: {0}",
+    confirmLowIntervalRequired: "You must confirm you want to use such a low interval before saving.",
+    errCodeMismatch: "Confirmation code did not match",
+    "Confirmed": "Confirmed",
     "Connection String": "Connection String",
     Query: "Query",
     settingsCertificateExpiry: "TLS Certificate Expiry",

src/pages/EditMonitor.vue

@@ -271,7 +271,21 @@
                             <!-- Interval -->
                             <div class="my-3">
                                 <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
-                                <input id="interval" v-model="monitor.interval" type="number" class="form-control" required :min="minInterval" step="1" :max="maxInterval">
+                                <input
+                                    id="interval"
+                                    v-model="monitor.interval"
+                                    type="number"
+                                    class="form-control"
+                                    required
+                                    :min="minInterval"
+                                    step="1"
+                                    :max="maxInterval"
+                                    @focus="lowIntervalConfirmation.editedValue=true"
+                                    @blur="checkIntervalValue"
+                                >
+                                <div v-if="monitor.interval < 20" class="form-text">
+                                    {{ $t("minimumIntervalWarning") }}
+                                </div>
                             </div>
 
                             <div class="my-3">
@@ -288,6 +302,9 @@
                                     <span>({{ $t("retryCheckEverySecond", [ monitor.retryInterval ]) }})</span>
                                 </label>
                                 <input id="retry-interval" v-model="monitor.retryInterval" type="number" class="form-control" required :min="minInterval" step="1">
+                                <div v-if="monitor.retryInterval < 20" class="form-text">
+                                    {{ $t("minimumIntervalWarning") }}
+                                </div>
                             </div>
 
                             <div class="my-3">
@@ -563,6 +580,24 @@
             <NotificationDialog ref="notificationDialog" @added="addedNotification" />
             <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
             <ProxyDialog ref="proxyDialog" @added="addedProxy" />
+
+            <Confirm ref="confirmLowIntervalValue" btn-style="btn-danger" :yes-text="$t('Confirm')" :no-text="$t('Cancel')" @yes="validateConfirmationString">
+                <p>{{ $t("lowIntervalWarning") }}</p>
+                <p>{{ $t("Please use this option carefully!") }}</p>
+
+                <div class="mb-3">
+                    <i18n-t tag="label" keypath="enterConfirmationString" for="confirmation-string" class="form-label user-select-none">
+                        {{ lowIntervalConfirmation.testString }}
+                    </i18n-t>
+                    <input
+                        id="confirmation-string"
+                        v-model="lowIntervalConfirmation.userString"
+                        type="text"
+                        class="form-control"
+                        required
+                    />
+                </div>
+            </Confirm>
         </div>
     </transition>
 </template>
@@ -571,6 +606,7 @@
 import VueMultiselect from "vue-multiselect";
 import { useToast } from "vue-toastification";
 import CopyableInput from "../components/CopyableInput.vue";
+import Confirm from "../components/Confirm.vue";
 import NotificationDialog from "../components/NotificationDialog.vue";
 import DockerHostDialog from "../components/DockerHostDialog.vue";
 import ProxyDialog from "../components/ProxyDialog.vue";
@@ -583,6 +619,7 @@ export default {
     components: {
         ProxyDialog,
         CopyableInput,
+        Confirm,
         NotificationDialog,
         DockerHostDialog,
         TagsManager,
@@ -600,6 +637,12 @@ export default {
             },
             acceptedStatusCodeOptions: [],
             dnsresolvetypeOptions: [],
+            lowIntervalConfirmation: {
+                testString: "",
+                userString: "",
+                confirmed: false,
+                editedValue: false,
+            },
 
             // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
             ipRegexPattern: "((^\\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\\s*$)|(^\\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?\\s*$))",
@@ -758,6 +801,7 @@ message HealthCheckResponse {
 
         this.acceptedStatusCodeOptions = acceptedStatusCodeOptions;
         this.dnsresolvetypeOptions = dnsresolvetypeOptions;
+        this.lowIntervalConfirmation.testString = Math.random().toString(36).substring(2, 9);
     },
     methods: {
         /** Initialize the edit monitor form */
@@ -846,6 +890,28 @@ message HealthCheckResponse {
         },
 
         /**
+         * Show popup if the interval value is less than 20
+         */
+        checkIntervalValue() {
+            if (this.monitor.interval < 20) {
+                this.$refs.confirmLowIntervalValue.show();
+            }
+        },
+
+        /**
+         * Check that the user inputed code is correct
+         */
+        validateConfirmationString() {
+            if (this.lowIntervalConfirmation.testString === this.lowIntervalConfirmation.userString) {
+                this.lowIntervalConfirmation.confirmed = true;
+                toast.success(this.$t("Confirmed"));
+            } else {
+                this.lowIntervalConfirmation.confirmed = false;
+                toast.error(this.$t("errCodeMismatch"));
+            }
+        },
+
+        /*
          * Submit the form data for processing
          * @returns {void}
          */
@@ -857,6 +923,16 @@ message HealthCheckResponse {
                 return;
             }
 
+            // Check user has confirmed use of low interval value. Only
+            // do this if the interval value has changed since last save
+            if (this.lowIntervalConfirmation.editedValue && this.monitor.interval < 20 && !this.lowIntervalConfirmation.confirmed) {
+                toast.error(this.$t("confirmLowIntervalRequired"));
+                this.processing = false;
+                return;
+            }
+            this.lowIntervalConfirmation.confirmed = false;
+            this.lowIntervalConfirmation.editedValue = false;
+
             // Beautify the JSON format
             if (this.monitor.body) {
                 this.monitor.body = JSON.stringify(JSON.parse(this.monitor.body), null, 4);

src/util.js

@@ -23,7 +23,7 @@ exports.SQL_DATE_FORMAT = "YYYY-MM-DD";
 exports.SQL_DATETIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
 exports.SQL_DATETIME_FORMAT_WITHOUT_SECOND = "YYYY-MM-DD HH:mm";
 exports.MAX_INTERVAL_SECOND = 2073600; // 24 days
-exports.MIN_INTERVAL_SECOND = 20; // 20 seconds
+exports.MIN_INTERVAL_SECOND = 1; // 1 second
 /** Flip the status of s */
 function flipStatus(s) {
     if (s === exports.UP) {

src/util.ts

@@ -27,7 +27,7 @@ export const SQL_DATETIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
 export const SQL_DATETIME_FORMAT_WITHOUT_SECOND = "YYYY-MM-DD HH:mm";
 
 export const MAX_INTERVAL_SECOND = 2073600; // 24 days
-export const MIN_INTERVAL_SECOND = 20; // 20 seconds
+export const MIN_INTERVAL_SECOND = 1; // 1 second
 
 /** Flip the status of s */
 export function flipStatus(s: number) {