Andrey/uptime-kuma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into feat/snmp-v3

Browse Source
This commit is contained in:
Frank Elsinga 2026-01-17 15:25:12 +01:00 committed by GitHub
commit 4929fbbe1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 309 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
db/knex_migrations/2026-01-16-0000-add-screenshot-delay.js Normal file
View File

@ -0,0 +1,11 @@
exports.up = function (knex) {
return knex.schema.alterTable("monitor", function (table) {
table.integer("screenshot_delay").notNullable().unsigned().defaultTo(0);
});
};
exports.down = function (knex) {
return knex.schema.alterTable("monitor", function (table) {
table.dropColumn("screenshot_delay");
});
};

22
server/model/monitor.js
View File

@ -1764,6 +1764,28 @@ class Monitor extends BeanModel {
this.timeout = pingGlobalTimeout;
}
}
if (this.type === "real-browser") {
// screenshot_delay validation
if (this.screenshot_delay !== undefined && this.screenshot_delay !== null) {
const delay = Number(this.screenshot_delay);
if (isNaN(delay) || delay < 0) {
throw new Error("Screenshot delay must be a non-negative number");
}
// Must not exceed 0.8 * timeout (page.goto timeout is interval * 1000 * 0.8)
const maxDelayFromTimeout = this.interval * 1000 * 0.8;
if (delay >= maxDelayFromTimeout) {
throw new Error(`Screenshot delay must be less than ${maxDelayFromTimeout}ms (0.8 × interval)`);
}
// Must not exceed 0.5 * interval to prevent blocking next check
const maxDelayFromInterval = this.interval * 1000 * 0.5;
if (delay >= maxDelayFromInterval) {
throw new Error(`Screenshot delay must be less than ${maxDelayFromInterval}ms (0.5 × interval)`);
}
}
}
}
/**

5
server/monitor-types/real-browser-monitor-type.js
View File

@ -269,6 +269,11 @@ class RealBrowserMonitorType extends MonitorType {
timeout: monitor.interval * 1000 * 0.8,
});
// Wait for additional time before taking screenshot if configured
if (monitor.screenshot_delay > 0) {
await page.waitForTimeout(monitor.screenshot_delay);
}
let filename = jwt.sign(monitor.id, server.jwtSecret) + ".png";
await page.screenshot({

123
src/components/MonitorList.vue
View File

@ -1,8 +1,24 @@
<template>
<div class="shadow-box mb-3 p-0" :style="boxStyle">
<div class="list-header">
<div class="header-top">
<div class="select-checkbox-wrapper">
<!-- Line 1: Checkbox + Status + Tags + Search Bar -->
<div class="filter-row">
<div class="search-wrapper">
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
</a>
<form @submit.prevent>
<input
v-model="searchText"
class="form-control search-input"
:placeholder="$t('Search...')"
:aria-label="$t('Search monitored sites')"
autocomplete="off"
/>
</form>
</div>
<div class="filters-group">
<input
v-if="!selectMode"
v-model="selectMode"
@ -18,33 +34,17 @@
type="checkbox"
:aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
/>
</div>
<div class="header-filter">
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
</div>
<div class="search-wrapper ms-auto">
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
</a>
<form @submit.prevent>
<input
v-model="searchText"
class="form-control search-input"
:placeholder="$t('Search...')"
:aria-label="$t('Search monitored sites')"
autocomplete="off"
/>
</form>
</div>
</div>
<div v-if="selectMode && selectedMonitorCount > 0" class="selected-count-row">
<!-- Line 2: Cancel + Actions (shown when selection mode is active) -->
<div v-if="selectMode && selectedMonitorCount > 0" class="selection-row">
<button class="btn btn-outline-normal" @click="cancelSelectMode">
{{ $t("Cancel") }}
</button>
<div class="actions-wrapper ms-2">
<div class="actions-wrapper">
<div class="dropdown">
<button
class="btn btn-outline-normal dropdown-toggle"
@ -82,7 +82,7 @@
</ul>
</div>
</div>
<span class="selected-count ms-2">
<span class="selected-count">
{{ $t("selectedMonitorCountMsg", selectedMonitorCount) }}
</span>
</div>
@ -538,6 +538,9 @@ export default {
border-radius: 10px 10px 0 0;
margin-bottom: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
.dark & {
background-color: $dark-header-bg;
@ -545,37 +548,26 @@ export default {
}
}
.search-row {
display: flex;
padding: 10px;
padding-bottom: 5px;
}
.header-top {
.filter-row {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
padding: 10px;
@media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
flex-wrap: wrap;
}
}
.select-checkbox-wrapper {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
.form-check-input {
cursor: pointer;
margin: 0;
margin-left: 6px;
flex-shrink: 0;
}
}
.header-filter {
.filters-group {
display: flex;
align-items: center;
gap: 8px;
}
.actions-wrapper {
@ -642,6 +634,13 @@ export default {
}
}
.selection-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.selected-count {
white-space: nowrap;
font-size: 0.9em;
@ -652,8 +651,7 @@ export default {
}
}
.selected-count-row {
padding: 5px 10px 0 10px;
.actions-row {
display: flex;
align-items: center;
}
@ -676,10 +674,29 @@ export default {
}
}
@media (max-width: 975px) {
.filter-row {
flex-direction: column-reverse;
align-items: stretch;
gap: 8px;
}
.search-wrapper {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
flex: 1 1 100%;
}
.filters-group {
width: 100%;
}
}
@media (max-width: 770px) {
.list-header {
margin-bottom: 10px;
padding: 5px;
padding: 20px;
}
}
@ -687,15 +704,14 @@ export default {
display: flex;
align-items: center;
position: relative;
flex: 1 1 auto;
min-width: 0;
max-width: 300px;
margin-left: auto;
order: 1;
@media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
order: -1;
form {
width: 100%;
margin-bottom: 8px;
form {
width: 100%;
}
}
}
@ -713,13 +729,8 @@ export default {
}
.search-input {
max-width: 15em;
width: 100%;
padding-right: 30px;
@media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
max-width: 100%;
width: 100%;
}
}
.monitor-item {

289
src/components/MonitorListFilter.vue
View File

@ -1,139 +1,142 @@
<template>
<div class="d-flex align-items-center flex-wrap gap-1">
<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>
<MonitorListFilterDropdown :filterActive="filterState.status?.length > 0 || filterState.active?.length > 0">
<template #status>
<Status
v-if="filterState.status?.length === 1 && !filterState.active?.length"
:status="filterState.status[0]"
/>
<span
v-else-if="!filterState.status?.length && filterState.active?.length === 1"
class="badge status-pill"
:class="filterState.active[0] ? 'running' : 'paused'"
>
<font-awesome-icon :icon="filterState.active[0] ? 'play' : 'pause'" class="icon-small" />
{{ filterState.active[0] ? $t("Running") : $t("filterActivePaused") }}
</span>
<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>
</div>
</span>
</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>
</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>
</div>
</span>
</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>
</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>
</div>
</span>
</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>
</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>
</div>
</span>
</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>
</div>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
<div class="d-flex align-items-center justify-content-between">
<span class="badge status-pill running">
<font-awesome-icon icon="play" class="icon-small" />
{{ $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>
</div>
</span>
</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>
</div>
</li>
<li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
<div class="d-flex align-items-center justify-content-between">
<span class="badge status-pill paused">
<font-awesome-icon icon="pause" class="icon-small" />
{{ $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>
</div>
</span>
</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>
</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>
</div>
</span>
</div>
</li>
<li v-if="tagsList.length === 0">
<div class="dropdown-item disabled px-3">
{{ $t("No tags found.") }}
</div>
</li>
</template>
</MonitorListFilterDropdown>
</div>
</div>
</li>
<li v-if="tagsList.length === 0">
<div class="dropdown-item disabled px-3">
{{ $t("No tags found.") }}
</div>
</li>
</template>
</MonitorListFilterDropdown>
</template>
<script>
@ -252,6 +255,17 @@ export default {
cursor: pointer;
}
.simple-status {
min-width: 64px;
border: 1px solid #d1d5db;
background-color: transparent !important;
color: inherit !important;
.dark & {
border-color: #6b7280;
}
}
.clear-filters-btn {
font-size: 0.8em;
margin-right: 5px;
@ -275,4 +289,37 @@ export default {
}
}
}
.dropdown-divider {
margin: 0.5rem 0;
border-top: 1px solid #d1d5db;
.dark & {
border-top-color: #6b7280;
}
}
.status-pill {
min-width: 64px;
display: inline-block;
text-align: center;
&.running,
&.paused {
background-color: white !important;
border: 1px solid #d1d5db;
color: inherit;
.dark & {
background-color: transparent !important;
border-color: #6b7280;
color: $dark-font-color;
}
.icon-small {
font-size: 0.75em;
margin-right: 4px;
}
}
}
</style>

2
src/components/MonitorListFilterDropdown.vue
View File

@ -103,7 +103,7 @@ export default {
@extend .btn-outline-normal;
display: flex;
align-items: center;
margin-left: 5px;
margin-left: 0;
color: $link-color;
.dark & {

4
src/lang/en.json
View File

@ -1055,6 +1055,10 @@
"remoteBrowserToggle": "By default Chromium runs inside the Uptime Kuma container. You can use a remote browser by toggling this switch.",
"useRemoteBrowser": "Use a Remote Browser",
"deleteRemoteBrowserMessage": "Are you sure want to delete this Remote Browser for all monitors?",
"Screenshot Delay": "Screenshot Delay (waits {milliseconds})",
"milliseconds": "{n} millisecond | {n} milliseconds",
"screenshotDelayDescription": "Optionally wait this many milliseconds before taking the screenshot. Maximum: {maxValueMs}ms (0.5 × interval).",
"screenshotDelayWarning": "Higher values keep the browser open longer, which may increase memory usage with many concurrent monitors.",
"GrafanaOncallUrl": "Grafana Oncall URL",
"systemService": "System Service",
"systemServiceName": "Service Name",

31
src/pages/EditMonitor.vue
View File

@ -1278,6 +1278,36 @@
<div class="form-text"></div>
</div>
<!-- Screenshot Delay - Real Browser only -->
<div v-if="monitor.type === 'real-browser'" class="my-3">
<label for="screenshot-delay" class="form-label">
{{
$t("Screenshot Delay", {
milliseconds: $t("milliseconds", monitor.screenshot_delay),
})
}}
</label>
<input
id="screenshot-delay"
v-model="monitor.screenshot_delay"
type="number"
class="form-control"
min="0"
:max="Math.floor(monitor.interval * 1000 * 0.5)"
step="100"
/>
<div class="form-text">
{{
$t("screenshotDelayDescription", {
maxValueMs: Math.floor(monitor.interval * 1000 * 0.5),
})
}}
</div>
<div v-if="monitor.screenshot_delay" class="form-text text-warning">
{{ $t("screenshotDelayWarning") }}
</div>
</div>
<div v-if="showDomainExpiryNotification" class="my-3 form-check">
<input
id="domain-expiry-notification"
@ -2308,6 +2338,7 @@ const monitorDefaults = {
kafkaProducerAllowAutoTopicCreation: false,
gamedigGivenPortOnly: true,
remote_browser: null,
screenshot_delay: 0,
rabbitmqNodes: [],
rabbitmqUsername: "",
rabbitmqPassword: "",