Merge be6e4264e4 into b638ae48ef

src/components/PublicGroupList.vue

@@ -2,7 +2,7 @@
     <!-- Group List -->
     <Draggable v-model="$root.publicGroupList" :disabled="!editMode" item-key="id" :animation="100">
         <template #item="group">
-            <div class="mb-5" data-testid="group">
+            <div v-if="shouldShowGroup(group.element)" class="mb-5" data-testid="group">
                 <!-- Group Title -->
                 <h2 class="group-title">
                     <div class="title-section">
@@ -49,7 +49,7 @@
                         item-key="id"
                     >
                         <template #item="monitor">
-                            <div class="item" data-testid="monitor">
+                            <div v-if="shouldShowMonitor(monitor.element)" class="item" data-testid="monitor">
                                 <div class="row">
                                     <div class="col-9 col-xl-6 small-padding">
                                         <div class="info">
@@ -167,6 +167,11 @@ export default {
         showOnlyLastHeartbeat: {
             type: Boolean,
         },
+        /** Search text for filtering monitors */
+        searchText: {
+            type: String,
+            default: "",
+        },
     },
     data() {
         return {};
@@ -192,6 +197,44 @@ export default {
             this.$root.publicGroupList.splice(index, 1);
         },
 
+        /**
+         * Check if a monitor should be shown based on search text
+         * @param {object} monitor Monitor to check
+         * @returns {boolean} Whether the monitor should be shown
+         */
+        shouldShowMonitor(monitor) {
+            if (!this.searchText || this.searchText.trim() === "") {
+                return true;
+            }
+            const loweredSearchText = this.searchText.toLowerCase().trim();
+            // Match by monitor name
+            if (monitor.name && monitor.name.toLowerCase().includes(loweredSearchText)) {
+                return true;
+            }
+            // Match by tags (name or value)
+            if (monitor.tags && monitor.tags.length > 0) {
+                return monitor.tags.some(
+                    (tag) =>
+                        (tag.name && tag.name.toLowerCase().includes(loweredSearchText)) ||
+                        (tag.value && tag.value.toLowerCase().includes(loweredSearchText))
+                );
+            }
+            return false;
+        },
+
+        /**
+         * Check if a group should be shown (has at least one matching monitor)
+         * @param {object} group Group to check
+         * @returns {boolean} Whether the group should be shown
+         */
+        shouldShowGroup(group) {
+            if (!this.searchText || this.searchText.trim() === "") {
+                return true;
+            }
+            // Show group if at least one monitor matches
+            return group.monitorList && group.monitorList.some((monitor) => this.shouldShowMonitor(monitor));
+        },
+
         /**
          * Remove a monitor from a group
          * @param {number} groupIndex Index of group to remove monitor from

src/pages/StatusPage.vue

@@ -541,6 +541,7 @@
                     :show-tags="config.showTags"
                     :show-certificate-expiry="config.showCertificateExpiry"
                     :show-only-last-heartbeat="config.showOnlyLastHeartbeat"
+                    :search-text="searchText"
                 />
             </div>
 
@@ -695,6 +696,7 @@ export default {
             updateCountdown: null,
             updateCountdownText: null,
             loading: true,
+            searchText: "",
         };
     },
     computed: {
@@ -1313,6 +1315,14 @@ export default {
                 return "";
             }
         },
+
+        /**
+         * Clear the search text
+         * @returns {void}
+         */
+        clearSearchText() {
+            this.searchText = "";
+        },
     },
 };
 </script>
@@ -1335,6 +1345,59 @@ export default {
     .danger {
         color: $danger;
     }
+
+    .overall-status-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .status-text {
+        flex-shrink: 0;
+    }
+
+    .search-section {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+
+    .search-divider {
+        width: 1px;
+        height: 30px;
+        background: linear-gradient(to bottom, transparent 0%, #d0d0d0 20%, #d0d0d0 80%, transparent 100%);
+
+        .dark & {
+            background: linear-gradient(to bottom, transparent 0%, #3a4450 20%, #3a4450 80%, transparent 100%);
+        }
+    }
+
+    .search-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    .search-icon {
+        padding: 10px;
+        color: #c0c0c0;
+
+        svg[data-icon="times"] {
+            cursor: pointer;
+            transition: all ease-in-out 0.1s;
+
+            &:hover {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .search-input {
+        max-width: 15em;
+        font-size: 16px;
+        font-weight: normal;
+    }
 }
 
 h1 {