diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index 77097dc12..4dbf84af2 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -1,31 +1,45 @@ @@ -45,6 +59,11 @@ export default { type: Boolean, }, }, + data() { + return { + searchText: "", + } + }, computed: { sortedMonitorList() { let result = Object.values(this.$root.monitorList); @@ -74,6 +93,17 @@ export default { return m1.name.localeCompare(m2.name); }) + // Simple filter by search text + // finds monitor name, tag name or tag value + if (this.searchText != "") { + const loweredSearchText = this.searchText.toLowerCase(); + result = result.filter(monitor => { + return monitor.name.toLowerCase().includes(loweredSearchText) + || monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText) + || tag.value?.toLowerCase().includes(loweredSearchText)) + }) + } + return result; }, }, @@ -81,6 +111,9 @@ export default { monitorURL(id) { return "/dashboard/" + id; }, + clearSearchText() { + this.searchText = ""; + } }, } @@ -93,6 +126,35 @@ export default { padding-right: 5px !important; } +.list-header { + border-bottom: 1px solid #dee2e6; + border-radius: 10px 10px 0 0; + margin: -10px; + margin-bottom: 10px; + padding: 15px; + display: flex; + justify-content: space-between; + + .dark & { + background-color: #161b22; + border-bottom: 0; + } +} + +.search-wrapper { + display: flex; + align-items: center; +} + +.search-icon { + padding: 10px; + color: #c0c0c0; +} + +.search-input { + max-width: 15em; +} + .list { &.scrollbar { min-height: calc(100vh - 240px); diff --git a/src/icon.js b/src/icon.js index 56674f741..c824210b2 100644 --- a/src/icon.js +++ b/src/icon.js @@ -9,6 +9,7 @@ import { faPause, faPlay, faPlus, + faSearch, faTachometerAlt, faTimes, faTrash @@ -28,6 +29,7 @@ library.add( faPause, faPlay, faPlus, + faSearch, faTachometerAlt, faTimes, faTrash,