feat: add ability to group monitors in dashboard

src/components/MonitorList.vue

@@ -19,43 +19,18 @@
                 {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
             </div>
 
-            <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
-                <div class="row">
-                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
-                        <div class="info">
-                            <Uptime :monitor="item" type="24" :pill="true" />
-                            {{ item.name }}
-                        </div>
-                        <div class="tags">
-                            <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
-                        </div>
-                    </div>
-                    <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
-                        <HeartbeatBar size="small" :monitor-id="item.id" />
-                    </div>
-                </div>
-
-                <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
-                    <div class="col-12 bottom-style">
-                        <HeartbeatBar size="small" :monitor-id="item.id" />
-                    </div>
-                </div>
-            </router-link>
+            <MonitorListItem v-for="(item, index) in sortedMonitorList" :key="index" :monitor="item" :isSearch="searchText !== ''" />
         </div>
     </div>
 </template>
 
 <script>
-import HeartbeatBar from "../components/HeartbeatBar.vue";
-import Tag from "../components/Tag.vue";
-import Uptime from "../components/Uptime.vue";
+import MonitorListItem from "../components/MonitorListItem.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 
 export default {
     components: {
-        Uptime,
-        HeartbeatBar,
-        Tag,
+        MonitorListItem,
     },
     props: {
         /** Should the scrollbar be shown */
@@ -91,6 +66,19 @@ export default {
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
 
+            // 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));
+                });
+            } else {
+                result = result.filter(monitor => monitor.parent === null);
+            }
+
             result.sort((m1, m2) => {
 
                 if (m1.active !== m2.active) {
@@ -116,17 +104,6 @@ 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;
         },
     },

src/components/MonitorListItem.vue

@@ -0,0 +1,196 @@
+<template>
+    <div>
+        <router-link :to="monitorURL(monitor.id)" class="item" :class="{ 'disabled': ! monitor.active }">
+            <div class="row">
+                <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                    <div class="info" :style="depthMargin">
+                        <Uptime :monitor="monitor" type="24" :pill="true" />
+                        <span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
+                            <font-awesome-icon icon="chevron-down" class="animated" :class="{ collapsed: isCollapsed}" />
+                        </span>
+                        {{ monitorName }}
+                    </div>
+                    <div class="tags">
+                        <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
+                    </div>
+                </div>
+                <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                    <HeartbeatBar size="small" :monitor-id="monitor.id" />
+                </div>
+            </div>
+
+            <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
+                <div class="col-12 bottom-style">
+                    <HeartbeatBar size="small" :monitor-id="monitor.id" />
+                </div>
+            </div>
+        </router-link>
+
+        <transition name="slide-fade-up">
+            <div v-if="!isCollapsed" class="childs">
+                <MonitorListItem v-for="(item, index) in sortedChildMonitorList" :key="index" :monitor="item" :isSearch="isSearch" :depth="depth + 1" />
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import HeartbeatBar from "../components/HeartbeatBar.vue";
+import Tag from "../components/Tag.vue";
+import Uptime from "../components/Uptime.vue";
+import { getMonitorRelativeURL } from "../util.ts";
+
+export default {
+    name: "MonitorListItem",
+    components: {
+        Uptime,
+        HeartbeatBar,
+        Tag,
+    },
+    props: {
+        /** Monitor this represents */
+        monitor: {
+            type: Object,
+            default: null,
+        },
+        isSearch: {
+            type: Boolean,
+            default: false,
+        },
+        depth: {
+            type: Number,
+            default: 0,
+        },
+    },
+    data() {
+        return {
+            isCollapsed: true,
+        };
+    },
+    computed: {
+        sortedChildMonitorList() {
+            let result = Object.values(this.$root.monitorList);
+
+            result = result.filter(childMonitor => childMonitor.parent === this.monitor.id);
+
+            result.sort((m1, m2) => {
+
+                if (m1.active !== m2.active) {
+                    if (m1.active === 0) {
+                        return 1;
+                    }
+
+                    if (m2.active === 0) {
+                        return -1;
+                    }
+                }
+
+                if (m1.weight !== m2.weight) {
+                    if (m1.weight > m2.weight) {
+                        return -1;
+                    }
+
+                    if (m1.weight < m2.weight) {
+                        return 1;
+                    }
+                }
+
+                return m1.name.localeCompare(m2.name);
+            });
+
+            return result;
+        },
+        hasChildren() {
+            return this.sortedChildMonitorList.length > 0;
+        },
+        depthMargin() {
+            return {
+                marginLeft: `${31 * this.depth}px`,
+            };
+        },
+        monitorName() {
+            if (this.isSearch) {
+                return this.monitor.pathName;
+            } else {
+                return this.monitor.name;
+            }
+        }
+    },
+    beforeMount() {
+        // this.isCollapsed = localStorage.getItem(`monitor_${this.monitor.id}_collapsed`) === "true";
+
+        let storage = window.localStorage.getItem("monitorCollapsed");
+        if (storage === null) {
+            return;
+        }
+
+        let storageObject = JSON.parse(storage);
+        if (storageObject[`monitor_${this.monitor.id}`] === null) {
+            return;
+        }
+
+        this.isCollapsed = storageObject[`monitor_${this.monitor.id}`];
+    },
+    methods: {
+        changeCollapsed() {
+            this.isCollapsed = !this.isCollapsed;
+
+            let storage = window.localStorage.getItem("monitorCollapsed");
+            let storageObject = {};
+            if (storage !== null) {
+                storageObject = JSON.parse(storage);
+            }
+            storageObject[`monitor_${this.monitor.id}`] = this.isCollapsed;
+
+            window.localStorage.setItem("monitorCollapsed", JSON.stringify(storageObject));
+        },
+        /**
+         * Get URL of monitor
+         * @param {number} id ID of monitor
+         * @returns {string} Relative URL of monitor
+         */
+        monitorURL(id) {
+            return getMonitorRelativeURL(id);
+        },
+    //     /** Clear the search bar */
+    //     clearSearchText() {
+    //         this.searchText = "";
+    //     }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.small-padding {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+}
+
+.collapse-padding {
+    padding-left: 8px !important;
+	padding-right: 2px !important;
+}
+
+// .monitor-item {
+//     width: 100%;
+// }
+
+.tags {
+    margin-top: 4px;
+    padding-left: 67px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+}
+
+.collapsed {
+	transform: rotate(-90deg);
+}
+
+.animated {
+	transition: all 0.2s $easing-in;
+}
+
+</style>