From beced312e5ab331c48675bb00a8b1a943bf51dfb Mon Sep 17 00:00:00 2001
From: Gunther Konig <gunther.s.konig@gmail.com>
Date: Wed, 6 Sep 2017 17:38:43 +0300
Subject: [PATCH] group monitors by naming convention

e.g.: "a.b" and "a.c" would create a group "a" with two monitors
---
 src/daemon/public/style.css |  22 ++++--
 src/front/App.vue           | 130 +++++++++++++++++++++++++-----------
 2 files changed, 109 insertions(+), 43 deletions(-)

diff --git a/src/daemon/public/style.css b/src/daemon/public/style.css
index e2725830..79db7c72 100644
--- a/src/daemon/public/style.css
+++ b/src/daemon/public/style.css
@@ -63,7 +63,7 @@ main {
 }
 
 /* Used to avoid setting padding on aside and main (breaks layout) */
-ul, footer, .container {
+footer, .container {
   padding: 20px;
 }
 
@@ -90,18 +90,30 @@ a:hover {
 
 ul {
   margin: 0;
+  padding: 0;
 }
 
 #app li {
   list-style: none;
+  border-bottom: 1px solid #F0F0F0;
+  padding: 10px 20px;
+}
+#app li.monitor {
+  padding: 0;
+}
+#app li.group li {
+  padding-right: 0;
+}
+#app li li:last-child {
+  border-bottom: 0;
+}
+#app li li, #app div.group {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #F0F0F0;
-  height: 64px;
 }
 
-#app li div {
+#app li li div {
   flex-grow: 1;
 }
 
@@ -132,7 +144,7 @@ button.status.running {
   color: #14B8CC;
 }
 
-button.logs {
+button.logs, button.group-toggle {
   font-size: 14px;
 }
 
diff --git a/src/front/App.vue b/src/front/App.vue
index 0a6f308a..2bfb0ff7 100644
--- a/src/front/App.vue
+++ b/src/front/App.vue
@@ -15,35 +15,48 @@
 ~/app$ hotel add http://192.16.1.2:3000</code></pre>
       </div>
       <ul>
-        <!-- monitors list -->
-        <li class="fade-in" v-for="(item, id) in monitors">
-          <!-- monitor -->
-          <div class="item.status">
-            <a
-              :href="href(id)"
-              :title="title(id)"
-              :target="target">{{ id }}</a>
-            <br>
-            <small @click="select(id)">
-              {{item.status}}
-            </small>
+        <!-- groups list -->
+        <li class="fade-in" v-for="(group, id) in groups" :class="group.isGroup ? 'group' : 'monitor'">
+          <div v-show="group.isGroup" class="group">
+            {{group.groupName}}
+            <button
+                    title="toggle group"
+                    class="group-toggle"
+                    @click="toggleGroup(id)">
+              <i :class="isGroupOpen(id) ? 'ion-chevron-down' : 'ion-chevron-right'"></i>
+            </button>
           </div>
+          <!-- monitor -->
+          <ul v-show="isGroupOpen(id) || !group.isGroup">
+            <li class="fade-in" v-for="(item, id) in group.items">
+              <div :class="item.status">
+                <a
+                  :href="href(id)"
+                  :title="title(id)"
+                  :target="target">{{ id }}</a>
+                <br>
+                <small @click="select(id)">
+                  {{item.status}}
+                </small>
+              </div>
 
-          <!-- start/stop button -->
-          <button
-            :title="isRunning(id) ? 'stop' : 'start'"
-            :class="['status', isRunning(id) ? 'running' : '']"
-            @click="toggle(id)">
-            <i :class="isRunning(id) ? 'ion-toggle-filled' : 'ion-toggle'"></i>
-          </button>
+              <!-- start/stop button -->
+              <button
+                :title="isRunning(id) ? 'stop' : 'start'"
+                :class="['status', isRunning(id) ? 'running' : '']"
+                @click="toggle(id)">
+                <i :class="isRunning(id) ? 'ion-toggle-filled' : 'ion-toggle'"></i>
+              </button>
 
-          <!-- view logs button -->
-          <button
-            title="view logs"
-            :class="['logs', isSelected(id) ? 'selected' : '']"
-            @click="select(id)">
-            <i class="ion-chevron-right"></i>
-          </button>
+              <!-- view logs button -->
+              <button
+                title="view logs"
+                :class="['logs', isSelected(id) ? 'selected' : '']"
+                @click="select(id)">
+                <i class="ion-chevron-right"></i>
+              </button>
+            </li>
+          </ul>
         </li>
 
         <!-- proxies list -->
@@ -123,9 +136,18 @@ const target = window.location.hash === '#menu'
 
 export default {
   data () {
+    const getOpenGroups = () => {
+      try {
+        return JSON.parse(localStorage.getItem('openGroups') || '[]')
+      } catch (e) {
+        return []
+      }
+    }
+
     return {
       list: {},
       selected: null,
+      openGroups: getOpenGroups(),
       outputs: {},
       outputScroll: true,
       target,
@@ -245,7 +267,25 @@ export default {
     switchTheme () {
       this.isDark = !this.isDark
       localStorage.setItem('isDark', this.isDark)
-    }
+    },
+    isMonitor(key) {
+      return this.list[key].status
+    },
+    isProxy(key) {
+      return !this.list[key].status
+    },
+    isGroupOpen (id) {
+      return this.openGroups.includes(id)
+    },
+    toggleGroup (id) {
+      if (this.openGroups.includes(id)) {
+        this.openGroups.splice(this.openGroups.indexOf(id), 1)
+      } else {
+        this.openGroups.push(id)
+      }
+
+      localStorage.setItem('openGroups', JSON.stringify(this.openGroups))
+    },
   },
   watch: {
     list (list, oldList) {
@@ -279,17 +319,34 @@ export default {
 
       return []
     },
-    monitors () {
+    groups () {
       const obj = {}
 
-      Object
-        .keys(this.list)
+      const listKeys = Object.keys(this.list)
         .sort()
-        .filter((key) => {
-          const isMonitor = this.list[key].status
-          return isMonitor
+        .filter(this.isMonitor)
+
+      listKeys
+        .map((key) => key.split('.')[0])
+        .forEach(groupName => {
+          obj[groupName] = {
+            groupName,
+            isGroup: true,
+            isOpen: false,
+            items: {},
+          }
+
+          listKeys
+            .filter((key) => key.startsWith(`${groupName}.`))
+            .forEach((key) => {
+                obj[groupName].items[key] = this.list[key]
+              })
+
+          if (!Object.keys(obj[groupName].items).length) {
+            obj[groupName].items[groupName] = this.list[groupName]
+            obj[groupName].isGroup = false
+          }
         })
-        .forEach((key) => { obj[key] = this.list[key] })
 
       return obj
     },
@@ -299,10 +356,7 @@ export default {
       Object
         .keys(this.list)
         .sort()
-        .filter((key) => {
-          const isProxy = !this.list[key].status
-          return isProxy
-        })
+        .filter(this.isProxy)
         .forEach((key) => { obj[key] = this.list[key] })
 
       return obj