feat: filter by tag value

server/model/monitor_tag.js

@@ -0,0 +1,19 @@
+const { BeanModel } = require("redbean-node/dist/bean-model");
+
+class MonitorTag extends BeanModel {
+
+    /**
+     * Return an object that ready to parse to JSON
+     * @returns {object} Object ready to parse
+     */
+    toJSON() {
+        return {
+            id: this._id,
+            monitorId: this._monitorId,
+            tagId: this._tagId,
+            name: this._value,
+        };
+    }
+}
+
+module.exports = MonitorTag;

server/server.js

@@ -755,11 +755,11 @@ let needSetup = false;
                 bean.basic_auth_user = monitor.basic_auth_user;
                 bean.basic_auth_pass = monitor.basic_auth_pass;
                 bean.timeout = monitor.timeout;
-                bean.oauth_client_id = monitor.oauth_client_id,
-                bean.oauth_client_secret = monitor.oauth_client_secret,
-                bean.oauth_auth_method = this.oauth_auth_method,
-                bean.oauth_token_url = monitor.oauth_token_url,
-                bean.oauth_scopes = monitor.oauth_scopes,
+                bean.oauth_client_id = monitor.oauth_client_id;
+                bean.oauth_client_secret = monitor.oauth_client_secret;
+                bean.oauth_auth_method = this.oauth_auth_method;
+                bean.oauth_token_url = monitor.oauth_token_url;
+                bean.oauth_scopes = monitor.oauth_scopes;
                 bean.tlsCa = monitor.tlsCa;
                 bean.tlsCert = monitor.tlsCert;
                 bean.tlsKey = monitor.tlsKey;
@@ -1012,11 +1012,17 @@ let needSetup = false;
             try {
                 checkLogin(socket);
 
-                const list = await R.findAll("tag");
+                const list = (await R.findAll("tag")).map(bean => bean.toJSON());
+                const monitorTagList = (await R.findAll("monitor_tag")).map(bean => bean.toJSON());
+
+                const tagValueMap = list.map(tag => {
+                    tag.values = monitorTagList.filter(tagValue => tagValue.tagId === tag.id);
+                    return tag;
+                });
 
                 callback({
                     ok: true,
-                    tags: list.map(bean => bean.toJSON()),
+                    tags: tagValueMap,
                 });
 
             } catch (e) {

src/components/MonitorList.vue

@@ -160,6 +160,14 @@ export default {
                         .length > 0;
                 }
 
+                // filter by tag value
+                let tagValueMatch = true;
+                if (this.filterState.tagValues != null && this.filterState.tagValues.length > 0) {
+                    tagValueMatch = monitor.tags.map(tag => tag.id) // convert to array of tag values
+                        .filter(monitorTagValueId => this.filterState.tagValues.includes(monitorTagValueId)) // perform Array Intersaction between filter and monitor's tags
+                        .length > 0;
+                }
+
                 // Hide children if not filtering
                 let showChild = true;
                 if (this.filterState.status == null && this.filterState.active == null && this.filterState.tags == null && this.searchText === "") {
@@ -168,7 +176,7 @@ export default {
                     }
                 }
 
-                return searchTextMatch && statusMatch && activeMatch && tagsMatch && showChild;
+                return searchTextMatch && statusMatch && activeMatch && tagsMatch && showChild && tagValueMatch;
             });
 
             // Filter result by active state, weight and alphabetical

src/components/MonitorListFilter.vue

@@ -116,7 +116,7 @@
                 </li>
             </template>
         </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
+        <TagValueDropdown :filterActive="filterState.tags?.length > 0" :items="tagsList" @toggle-tag-filter="toggleTagFilter" @toggle-tag-value-filter="toggleTagValueFilter">
             <template #status>
                 <Tag
                     v-if="filterState.tags?.length === 1"
@@ -127,32 +127,19 @@
                     {{ $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>
-                            </span>
-                        </div>
-                    </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
+        </TagValueDropdown>
     </div>
 </template>
 
 <script>
 import MonitorListFilterDropdown from "./MonitorListFilterDropdown.vue";
+import TagValueDropdown from "./TagValueDropdown.vue";
 import Status from "./Status.vue";
 import Tag from "./Tag.vue";
 
 export default {
     components: {
+        TagValueDropdown,
         MonitorListFilterDropdown,
         Status,
         Tag,
@@ -234,6 +221,22 @@ export default {
             }
             this.$emit("updateFilter", newFilter);
         },
+        toggleTagValueFilter(tag) {
+            let newFilter = {
+                ...this.filterState
+            };
+
+            if (newFilter.tagValues == null) {
+                newFilter.tagValues = [ tag.id ];
+            } else {
+                if (newFilter.tagValues.includes(tag.id)) {
+                    newFilter.tagValues = newFilter.tagValues.filter(item => item !== tag.id);
+                } else {
+                    newFilter.tagValues.push(tag.id);
+                }
+            }
+            this.$emit("updateFilter", newFilter);
+        },
         clearFilters() {
             this.$emit("updateFilter", {
                 status: null,

src/components/Tag.vue

@@ -8,7 +8,7 @@
                   'py-0': size == 'sm',
                   'mx-1': size == 'sm',
         }"
-        :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
+        :style="{ backgroundColor: item?.color ?? '#636363', fontSize: size == 'sm' ? '0.7em' : '1em' }"
     >
         <span class="tag-text">{{ displayText }}</span>
         <span v-if="remove != null" class="ps-1 btn-remove" @click="remove(item)">
@@ -48,8 +48,8 @@ export default {
     },
     computed: {
         displayText() {
-            if (this.item.value === "" || this.item.value === undefined) {
-                return this.item.name;
+            if (this.item?.value === "" || this.item?.value === undefined) {
+                return this.item?.name;
             } else {
                 return `${this.item.name}: ${this.item.value}`;
             }

src/components/TagValueDropdown.vue

@@ -0,0 +1,170 @@
+<template>
+    <div tabindex="-1" class="dropdown" @focusin="open = true" @focusout="handleFocusOut">
+        <button type="button" class="filter-dropdown-status" :class="{ 'active': filterActive }" tabindex="0">
+            <div class="px-1 d-flex align-items-center">
+                <slot name="status"></slot>
+            </div>
+            <span class="px-1">
+                <font-awesome-icon icon="angle-down" />
+            </span>
+        </button>
+        <ul class="filter-dropdown-menu" :class="{ 'open': open }">
+            <li v-for="parent in items" :key="parent.id">
+                <div @click.stop="parent.values?.length > 1 ? toggleParent(parent) : toggleTagFilter(parent)">
+                    <span><Tag :item="parent" :size="'sm'" /></span>
+                    <span v-if="openParentId === parent.id && parent.values && parent.values.length > 1">
+                        <font-awesome-icon icon="angle-down" />
+                    </span>
+                </div>
+                <ul v-if="openParentId === parent.id && parent.values && parent.values.length > 1" class="filter-dropdown-menu-sub">
+                    <li v-for="tag in parent.values" :key="tag.id">
+                        <div @click.stop="toggleTagValueFilter(tag)">
+                            <span><Tag :item="tag" :size="'sm'" /></span>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import Tag from "./Tag.vue";
+
+export default {
+    components: { Tag },
+    props: {
+        filterActive: {
+            type: Boolean,
+            required: true,
+        },
+        items: {
+            type: Array,
+            required: true,
+        }
+    },
+    emits: {
+        "toggle-tag-filter": null,
+        "toggle-tag-value-filter": null
+    },
+    data() {
+        return {
+            open: false,
+            openParentId: null
+        };
+    },
+    methods: {
+        handleFocusOut(e) {
+            if (e.relatedTarget != null && this.$el.contains(e.relatedTarget)) {
+                return;
+            }
+            this.open = false;
+            this.openParentId = null;
+        },
+        toggleParent(parent) {
+            this.openParentId = this.openParentId === parent.id ? null : parent.id;
+        },
+        toggleTagFilter(tag) {
+            this.$emit("toggle-tag-filter", tag);
+        },
+        toggleTagValueFilter(tag) {
+            this.$emit("toggle-tag-value-filter", tag);
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../assets/vars.scss";
+@import "../assets/app.scss";
+
+.filter-dropdown-menu {
+    z-index: 100;
+    transition: all 0.2s;
+    padding: 5px 0 !important;
+    border-radius: 16px;
+    overflow: visible;
+
+    position: absolute;
+    inset: 0 auto auto 0;
+    margin: 0;
+    transform: translate(0, 36px);
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+    visibility: hidden;
+    list-style: none;
+    height: 0;
+    opacity: 0;
+    background: white;
+
+    &.open {
+        height: auto;
+        visibility: inherit;
+        display: block;
+        opacity: 1;
+    }
+
+    .dropdown-item {
+        padding: 5px 15px;
+    }
+
+    .dropdown-item:focus {
+        background: $highlight-white;
+
+        .dark & {
+            background: $dark-bg2;
+        }
+    }
+
+    .dark & {
+        background-color: $dark-bg;
+        color: $dark-font-color;
+        border-color: $dark-border-color;
+
+        .dropdown-item {
+            color: $dark-font-color;
+
+            &.active {
+                color: $dark-font-color2;
+                background-color: $highlight !important;
+            }
+
+            &:hover {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+}
+
+.filter-dropdown-status {
+    @extend .btn-outline-normal;
+    display: flex;
+    align-items: center;
+    margin-left: 5px;
+    color: $link-color;
+
+    .dark & {
+        color: $dark-font-color;
+    }
+
+    &:focus {
+        background-color: $highlight-white;
+
+        .dark & {
+            background-color: $dark-font-color2;
+        }
+    }
+
+    &.active {
+        border: 1px solid $highlight;
+        background-color: $highlight-white;
+
+        .dark & {
+            background-color: $dark-font-color2;
+        }
+    }
+}
+
+.filter-active {
+    color: $highlight;
+}
+</style>