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

Merge branch 'master' into feature/screenshot-delay-6471

Browse Source
This commit is contained in:
bitloi 2026-01-17 07:43:33 -05:00 committed by GitHub
commit 3127f9817c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 236 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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