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

refactor: simplify filters components (#6749)

Browse Source 
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Dorian Grasset 2026-01-17 13:38:10 +01:00 committed by GitHub
parent 81ae0af7e1
commit 18331eaf33
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> <template>
<div class="shadow-box mb-3 p-0" :style="boxStyle"> <div class="shadow-box mb-3 p-0" :style="boxStyle">
<div class="list-header"> <div class="list-header">
<div class="header-top"> <!-- Line 1: Checkbox + Status + Tags + Search Bar -->
<div class="select-checkbox-wrapper"> <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 <input
v-if="!selectMode" v-if="!selectMode"
v-model="selectMode" v-model="selectMode"
@ -18,33 +34,17 @@
type="checkbox" type="checkbox"
:aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')" :aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
/> />
</div>
<div class="header-filter">
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" /> <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
</div> </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>
<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"> <button class="btn btn-outline-normal" @click="cancelSelectMode">
{{ $t("Cancel") }} {{ $t("Cancel") }}
</button> </button>
<div class="actions-wrapper ms-2"> <div class="actions-wrapper">
<div class="dropdown"> <div class="dropdown">
<button <button
class="btn btn-outline-normal dropdown-toggle" class="btn btn-outline-normal dropdown-toggle"
@ -82,7 +82,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<span class="selected-count ms-2"> <span class="selected-count">
{{ $t("selectedMonitorCountMsg", selectedMonitorCount) }} {{ $t("selectedMonitorCountMsg", selectedMonitorCount) }}
</span> </span>
</div> </div>
@ -538,6 +538,9 @@ export default {
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
.dark & { .dark & {
background-color: $dark-header-bg; background-color: $dark-header-bg;
@ -545,37 +548,26 @@ export default {
} }
} }
.search-row { .filter-row {
display: flex;
padding: 10px;
padding-bottom: 5px;
}
.header-top {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 10px; flex-wrap: nowrap;
width: 100%;
@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;
.form-check-input { .form-check-input {
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
margin-left: 6px;
flex-shrink: 0;
} }
} }
.header-filter { .filters-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px;
} }
.actions-wrapper { .actions-wrapper {
@ -642,6 +634,13 @@ export default {
} }
} }
.selection-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.selected-count { .selected-count {
white-space: nowrap; white-space: nowrap;
font-size: 0.9em; font-size: 0.9em;
@ -652,8 +651,7 @@ export default {
} }
} }
.selected-count-row { .actions-row {
padding: 5px 10px 0 10px;
display: flex; display: flex;
align-items: center; 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) { @media (max-width: 770px) {
.list-header { .list-header {
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 20px;
} }
} }
@ -687,15 +704,14 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; 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) { form {
order: -1;
width: 100%; width: 100%;
margin-bottom: 8px;
form {
width: 100%;
}
} }
} }
@ -713,13 +729,8 @@ export default {
} }
.search-input { .search-input {
max-width: 15em; width: 100%;
padding-right: 30px; 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 { .monitor-item {

289
src/components/MonitorListFilter.vue
View File

@ -1,139 +1,142 @@
<template> <template>
<div class="d-flex align-items-center flex-wrap gap-1"> <MonitorListFilterDropdown :filterActive="filterState.status?.length > 0 || filterState.active?.length > 0">
<MonitorListFilterDropdown :filterActive="filterState.status?.length > 0"> <template #status>
<template #status> <Status
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" /> v-if="filterState.status?.length === 1 && !filterState.active?.length"
<span v-else> :status="filterState.status[0]"
{{ $t("Status") }} />
</span> <span
</template> v-else-if="!filterState.status?.length && filterState.active?.length === 1"
<template #dropdown> class="badge status-pill"
<li> :class="filterState.active[0] ? 'running' : 'paused'"
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)"> >
<div class="d-flex align-items-center justify-content-between"> <font-awesome-icon :icon="filterState.active[0] ? 'play' : 'pause'" class="icon-small" />
<Status :status="1" /> {{ filterState.active[0] ? $t("Running") : $t("filterActivePaused") }}
<span class="ps-3"> </span>
{{ $root.stats.up }} <span v-else>
<span v-if="filterState.status?.includes(1)" class="px-1 filter-active"> {{ $t("Status") }}
<font-awesome-icon icon="check" /> </span>
</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> </span>
</div> </div>
</li> </div>
<li> </li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)"> <li>
<div class="d-flex align-items-center justify-content-between"> <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
<Status :status="0" /> <div class="d-flex align-items-center justify-content-between">
<span class="ps-3"> <Status :status="0" />
{{ $root.stats.down }} <span class="ps-3">
<span v-if="filterState.status?.includes(0)" class="px-1 filter-active"> {{ $root.stats.down }}
<font-awesome-icon icon="check" /> <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
</span> <font-awesome-icon icon="check" />
</span> </span>
</div> </span>
</div> </div>
</li> </div>
<li> </li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)"> <li>
<div class="d-flex align-items-center justify-content-between"> <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
<Status :status="2" /> <div class="d-flex align-items-center justify-content-between">
<span class="ps-3"> <Status :status="2" />
{{ $root.stats.pending }} <span class="ps-3">
<span v-if="filterState.status?.includes(2)" class="px-1 filter-active"> {{ $root.stats.pending }}
<font-awesome-icon icon="check" /> <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
</span> <font-awesome-icon icon="check" />
</span> </span>
</div> </span>
</div> </div>
</li> </div>
<li> </li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)"> <li>
<div class="d-flex align-items-center justify-content-between"> <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
<Status :status="3" /> <div class="d-flex align-items-center justify-content-between">
<span class="ps-3"> <Status :status="3" />
{{ $root.stats.maintenance }} <span class="ps-3">
<span v-if="filterState.status?.includes(3)" class="px-1 filter-active"> {{ $root.stats.maintenance }}
<font-awesome-icon icon="check" /> <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
</span> <font-awesome-icon icon="check" />
</span> </span>
</div> </span>
</div> </div>
</li> </div>
</template> </li>
</MonitorListFilterDropdown> <li><hr class="dropdown-divider" /></li>
<MonitorListFilterDropdown :filterActive="filterState.active?.length > 0"> <li>
<template #status> <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
<span v-if="filterState.active?.length === 1"> <div class="d-flex align-items-center justify-content-between">
<span v-if="filterState.active[0]">{{ $t("Running") }}</span> <span class="badge status-pill running">
<span v-else>{{ $t("filterActivePaused") }}</span> <font-awesome-icon icon="play" class="icon-small" />
</span> {{ $t("Running") }}
<span v-else> </span>
{{ $t("filterActive") }} <span class="ps-3">
</span> {{ $root.stats.active }}
</template> <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
<template #dropdown> <font-awesome-icon icon="check" />
<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> </span>
</div> </span>
</div> </div>
</li> </div>
<li> </li>
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)"> <li>
<div class="d-flex align-items-center justify-content-between"> <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
<span>{{ $t("filterActivePaused") }}</span> <div class="d-flex align-items-center justify-content-between">
<span class="ps-3"> <span class="badge status-pill paused">
{{ $root.stats.pause }} <font-awesome-icon icon="pause" class="icon-small" />
<span v-if="filterState.active?.includes(false)" class="px-1 filter-active"> {{ $t("filterActivePaused") }}
<font-awesome-icon icon="check" /> </span>
</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> </span>
</div> </div>
</li> </div>
</template> </li>
</MonitorListFilterDropdown> </template>
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0"> </MonitorListFilterDropdown>
<template #status> <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
<Tag <template #status>
v-if="filterState.tags?.length === 1" <Tag
:item="tagsList.find((tag) => tag.id === filterState.tags[0])" v-if="filterState.tags?.length === 1"
:size="'sm'" :item="tagsList.find((tag) => tag.id === filterState.tags[0])"
/> :size="'sm'"
<span v-else> />
{{ $t("Tags") }} <span v-else>
</span> {{ $t("Tags") }}
</template> </span>
<template #dropdown> </template>
<li v-for="tag in tagsList" :key="tag.id"> <template #dropdown>
<div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)"> <li v-for="tag in tagsList" :key="tag.id">
<div class="d-flex align-items-center justify-content-between"> <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
<span><Tag :item="tag" :size="'sm'" /></span> <div class="d-flex align-items-center justify-content-between">
<span class="ps-3"> <span><Tag :item="tag" :size="'sm'" /></span>
{{ getTaggedMonitorCount(tag) }} <span class="ps-3">
<span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active"> {{ getTaggedMonitorCount(tag) }}
<font-awesome-icon icon="check" /> <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
</span> <font-awesome-icon icon="check" />
</span> </span>
</div> </span>
</div> </div>
</li> </div>
<li v-if="tagsList.length === 0"> </li>
<div class="dropdown-item disabled px-3"> <li v-if="tagsList.length === 0">
{{ $t("No tags found.") }} <div class="dropdown-item disabled px-3">
</div> {{ $t("No tags found.") }}
</li> </div>
</template> </li>
</MonitorListFilterDropdown> </template>
</div> </MonitorListFilterDropdown>
</template> </template>
<script> <script>
@ -252,6 +255,17 @@ export default {
cursor: pointer; 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 { .clear-filters-btn {
font-size: 0.8em; font-size: 0.8em;
margin-right: 5px; 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> </style>

2
src/components/MonitorListFilterDropdown.vue
View File

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