logster 2.4.2 → 2.5.0

data/assets/stylesheets/client-app.css

@@ -1 +1 @@
-.divider,.message-info{border-bottom:1px solid #ddd}body{font-family:Arial,"Liberation Sans","DejaVu Sans",sans-serif;font-size:12px}body.mobile,body.mobile .message{font-size:14px}pre{font-family:"Roboto Mono",Consolas,Monaco,Ubuntu Mono,monospace}table.env-table tbody tr td{border-top:none;line-height:18px;height:18px;vertical-align:top}table.env-table,table.env-table table{border-spacing:0;border-collapse:collapse}table.env-table td{padding-right:5px}tbody tr{width:98%}.message-row{font-family:Roboto;display:flex}.pattern-wrapper .pattern-input,.settings-section .api-error{font-family:Consolas,"Roboto Mono",Monaco,Ubuntu Mono,monospace}.message-row .protected,.message-row .severity{text-align:center;width:25px;flex-grow:0;flex-shrink:0;font-size:12px}.message-row div{border-top:.5px #e9e9e9 solid;padding-top:1px;padding-bottom:1px;line-height:25px}.message-row .count{width:30px;flex-grow:0;flex-shrink:0;padding-right:4px;box-sizing:border-box;font-size:11px;font-weight:700;text-align:right}.message-row .message-body{flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.message-row .time{flex-grow:0;flex-shrink:0;color:#999;vertical-align:top;font-size:12px;padding-right:8px}.action-panel .search,.action-panel i.fa,.btn .fa,.btn span,.pattern-wrapper .shrink,.search-clear-all .clear,input,label span{vertical-align:middle}.message-row:hover{background-color:#f8f8f8;cursor:pointer}.message-row.selected{background-color:#dfdfdf}i.fatal{color:#e00}i.error{color:#900}i.warning{color:#feb800}.debug{color:#777}.btn,.tabs a{text-decoration:none;color:#333}.action-panel .search{border:1px solid #ddd;padding:3px;box-sizing:border-box}#log-table .show-more{text-align:center;height:30px;line-height:30px;text-decoration:none;background-color:#ddd;cursor:pointer;margin-top:8px}#overlay,.divider{cursor:row-resize}#bottom-panel{position:fixed;bottom:0;left:0;right:0;height:300px;background-color:#f1f1f1;padding:0 8px 8px;z-index:2}#bottom-panel.full{position:static;background-color:inherit;height:90%}#bottom-panel.full>div{padding-bottom:40px}#bottom-panel.full .tabs{display:none}#bottom-panel.full .message-info{position:static}#bottom-panel.full .message-info .content{display:block;position:static}#bottom-panel.full button.delete,.hidden{display:none}#bottom-panel.full .save,#bottom-panel.full .share{bottom:10px}#bottom-panel.full .message-actions button{margin-top:8px}#bottom-panel.full .message-actions{position:fixed;height:40px;width:100%;left:0;bottom:0;background-color:#eee;border-top:1px solid #dfdfdf;padding-left:10px}.divider,.tabs{border-top:1px solid #ddd}.message-actions{position:absolute;bottom:5px;right:0;margin-right:10px}.message-actions button{margin-left:5px}.divider{position:fixed;bottom:310px;left:0;right:0;height:15px;background-color:#fafafa}.divider div{margin:auto;width:24px;height:1px;background-color:#ccc;position:relative}.divider .line-1{top:5px}.divider .line-2{top:6px}.divider .line-3{top:7px}#top-panel{position:fixed;top:0;left:0;right:0;bottom:320px;overflow:auto}.action-panel,.message-info{position:absolute;left:0;right:0}.message-info{top:0}.action-panel{bottom:0;font-weight:700}.action-panel input{margin:0}.severity-filters label{margin-right:18px}.search-clear-all .clear{float:right}#log-table{margin:auto;width:99%}.message-info .env-table,.message-info pre{position:relative;margin:5px 10px 10px}#overlay{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;opacity:0}.message-info .content,.tabs{position:absolute;left:0;right:0}.message-info .content{top:0;bottom:35px;overflow:auto;display:none}.message-info .content.active{display:block}.tabs{bottom:13px;list-style-type:none;margin:0 0 5px;padding:0 0 0 10px}.tabs a,.tabs li{position:relative}.tabs li{float:left;padding-right:5px;margin:0}.tabs a{top:6px;border:1px solid #ddd;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:6px;background-color:#e1e1e1}.tabs a.active{border-top:1px solid #f1f1f1;background-color:#f1f1f1}.btn{display:inline-block;margin:0;padding:5px 12px;font-size:1em;line-height:0;text-align:center;cursor:pointer;transition:all .25s;background-color:#ddd;border:none;font-weight:400}.btn:hover{color:#000;background-color:#ccc}.btn .fa{margin-right:7px}.btn:active{text-shadow:none}.btn.danger:hover{background-color:#c63c1b;color:#eee}.btn.ok{background-color:#3781dc;color:#fff}.btn.ok:hover{background-color:#286dc2;color:#fff}.search-clear-all .clear,.search-clear-all .search{height:100%}.search-clear-all .clear,.search-clear-all .search,.severity-filters label{align-self:center}.search-clear-all .footer-btns .settings{margin:0 7px}.search-clear-all{display:flex;justify-content:space-between}.search-clear-all .search{min-width:0;flex-shrink:2}.footer-btns{flex-grow:0;flex-shrink:0}@media (min-width:770px){.search-clear-all,.severity-filters{height:100%}.more-wrapping,.severity-filters{display:flex}.severity-filters{float:left}.action-panel{padding:10px;box-sizing:border-box;height:42px}.message-info{bottom:42px}}@media (max-width:770px){.severity-filters{padding:10px}.search-clear-all{padding:0 10px 10px}.action-panel{height:69px}.message-info{bottom:69px}}@media (max-width:430px){.severity-filters{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.more-wrapping:after,.more-wrapping:before{content:"";position:absolute;height:18px}.more-wrapping:before{width:15px;margin-left:-10px;background:linear-gradient(to right,#f1f1f1 0,rgba(241,241,241,.001) 100%)}.more-wrapping:after{right:0;width:23px;background:linear-gradient(to left,#f1f1f1 0,rgba(241,241,241,.001) 100%)}}.btn.no-text .fa{margin:0}.btn[disabled]{opacity:.5}.actions-menu{position:absolute;background:#fafafa;display:inline-flex;flex-direction:column;bottom:27px;right:45px;width:115px;padding:5px 5px 0;box-shadow:0 4px 14px rgba(0,0,0,.15);z-index:3}.actions-menu button{margin:0 0 5px;height:27px}.nav-controls{padding:10px}#bottom-panel:not(.full) .nav-controls{position:sticky;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;top:0;background:#f1f1f1;z-index:1;border-bottom:1px solid #ddd}.env-number{margin:0 7px}.expand-list{text-decoration:underline;color:#00f;cursor:pointer}.settings-page{max-width:1110px;margin-right:auto;margin-left:auto;font-size:15px;padding:0 10px 70px}.settings-header{display:flex;align-items:center;margin-bottom:5px}.settings-header .header-title{flex-grow:1}.settings-header .header-logo{width:50px;height:50px}.settings-section{border-top:1px solid #ddd;padding-top:15px}.settings-section .section-title{margin-top:0}.settings-section .subsection-title{margin-bottom:10px}.settings-section .tip{font-style:italic;font-size:13px;color:grey}.settings-section .pattern-wrapper{margin-top:10px;font-size:16px;display:flex;height:33px}.settings-section .api-error{margin-top:5px;color:red}.pattern-wrapper .pattern-input{width:600px;font-size:inherit;padding:5px 0;height:100%;box-sizing:border-box;vertical-align:middle;flex-grow:1;flex-shrink:1}.retro-checkbox .checkbox{margin:0}.retro-checkbox{margin-top:7px;margin-bottom:15px}.btn.new-pattern{height:100%;line-height:18px}.pattern-wrapper .shrink{height:100%;width:40px;text-align:center;box-sizing:border-box;flex-grow:0;flex-shrink:0;margin-left:10px}.fa{opacity:.7}.pattern-wrapper .shrink.reset{background:unset;width:unset;padding:0;margin-left:8px}
+.divider,.message-info,.nav-controls.group-nav{border-bottom:1px solid #ddd}body{font-family:Arial,"Liberation Sans","DejaVu Sans",sans-serif;font-size:12px}body.mobile,body.mobile .message{font-size:14px}pre{font-family:"Roboto Mono",Consolas,Monaco,Ubuntu Mono,monospace}table.env-table tbody tr td{border-top:none;line-height:18px;height:18px;vertical-align:top}table.env-table,table.env-table table{border-spacing:0;border-collapse:collapse}table.env-table td{padding-right:5px}tbody tr{width:98%}.message-row{font-family:Roboto;display:flex}.pattern-wrapper .pattern-input,.settings-section .api-error{font-family:Consolas,"Roboto Mono",Monaco,Ubuntu Mono,monospace}.message-row .protected,.message-row .severity{text-align:center;width:25px;flex-grow:0;flex-shrink:0;font-size:12px}.message-row div{border-top:.5px #e9e9e9 solid;padding-top:1px;padding-bottom:1px;line-height:25px}.message-row .count{width:30px;flex-grow:0;flex-shrink:0;padding-right:4px;box-sizing:border-box;font-size:11px;font-weight:700;text-align:right}.message-row .message-body{flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.message-row .time{flex-grow:0;flex-shrink:0;color:#999;vertical-align:top;font-size:12px;padding-right:8px}.action-panel .search,.action-panel i.fa,.btn .fa,.btn span,.pattern-wrapper .shrink,.search-clear-all .clear,input,label span{vertical-align:middle}.message-row:hover{background-color:#f8f8f8;cursor:pointer}.message-row.selected{background-color:#dfdfdf}i.fatal{color:#e00}i.error{color:#900}i.warning{color:#feb800}.debug{color:#777}.btn,.tabs a{text-decoration:none;color:#333}.action-panel .search{border:1px solid #ddd;padding:3px;box-sizing:border-box}#log-table .show-more{text-align:center;height:30px;line-height:30px;text-decoration:none;background-color:#ddd;cursor:pointer;margin-top:8px}#overlay,.divider{cursor:row-resize}#bottom-panel{position:fixed;bottom:0;left:0;right:0;height:300px;background-color:#f1f1f1;padding:0 8px 8px;z-index:2}#bottom-panel.full{position:static;background-color:inherit;height:90%}#bottom-panel.full>div{padding-bottom:40px}#bottom-panel.full .tabs{display:none}#bottom-panel.full .message-info{position:static}#bottom-panel.full .message-info .content{display:block;position:static}#bottom-panel.full button.delete,.hidden{display:none}#bottom-panel.full .save,#bottom-panel.full .share{bottom:10px}#bottom-panel.full .message-actions button{margin-top:8px}#bottom-panel.full .message-actions{position:fixed;height:40px;width:100%;left:0;bottom:0;background-color:#eee;border-top:1px solid #dfdfdf;padding-left:10px}.divider,.tabs{border-top:1px solid #ddd}.message-actions{position:absolute;bottom:5px;right:0;margin-right:10px}.message-actions button{margin-left:5px}.divider{position:fixed;bottom:310px;left:0;right:0;height:15px;background-color:#fafafa}.divider div{margin:auto;width:24px;height:1px;background-color:#ccc;position:relative}.divider .line-1{top:5px}.divider .line-2{top:6px}.divider .line-3{top:7px}#top-panel{position:fixed;top:0;left:0;right:0;bottom:320px;overflow:auto}.action-panel,.message-info,.nav-controls.group-nav{position:absolute;left:0;right:0}.message-info{top:0}#bottom-panel.group-view .message-info{top:43px}.action-panel{bottom:0;font-weight:700}.action-panel input{margin:0}.severity-filters label{margin-right:18px}.search-clear-all .clear{float:right}#log-table{margin:auto;width:99%}.message-info .env-table,.message-info pre{position:relative;margin:5px 10px 10px}#overlay{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;opacity:0}.message-info .content,.tabs{position:absolute;left:0;right:0}.message-info .content{top:0;bottom:35px;overflow:auto;display:none}.message-info .content.active{display:block}.tabs{bottom:13px;list-style-type:none;margin:0 0 5px;padding:0 0 0 10px}.tabs a,.tabs li{position:relative}.tabs li{float:left;padding-right:5px;margin:0}.tabs a{top:6px;border:1px solid #ddd;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:6px;background-color:#e1e1e1}.tabs a.active{border-top:1px solid #f1f1f1;background-color:#f1f1f1}.btn{display:inline-block;margin:0;padding:5px 12px;font-size:1em;line-height:0;text-align:center;cursor:pointer;transition:all .25s;background-color:#ddd;border:none;font-weight:400}.btn:hover{color:#000;background-color:#ccc}.btn .fa{margin-right:7px}.btn:active{text-shadow:none}.btn.danger:hover{background-color:#c63c1b;color:#eee}.btn.ok{background-color:#3781dc;color:#fff}.btn.ok:hover{background-color:#286dc2;color:#fff}.search-clear-all .clear,.search-clear-all .search{height:100%}.search-clear-all .clear,.search-clear-all .search,.severity-filters label{align-self:center}.search-clear-all .footer-btns .settings{margin:0 7px}.search-clear-all{display:flex;justify-content:space-between}.search-clear-all .search{min-width:0;flex-shrink:2}.footer-btns{flex-grow:0;flex-shrink:0}@media (min-width:770px){.search-clear-all,.severity-filters{height:100%}.more-wrapping,.severity-filters{display:flex}.severity-filters{float:left}.action-panel{padding:10px;box-sizing:border-box;height:42px}.message-info{bottom:42px}}@media (max-width:770px){.severity-filters{padding:10px}.search-clear-all{padding:0 10px 10px}.action-panel{height:69px}.message-info{bottom:69px}}@media (max-width:430px){.severity-filters{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.more-wrapping:after,.more-wrapping:before{content:"";position:absolute;height:18px}.more-wrapping:before{width:15px;margin-left:-10px;background:linear-gradient(to right,#f1f1f1 0,rgba(241,241,241,.001) 100%)}.more-wrapping:after{right:0;width:23px;background:linear-gradient(to left,#f1f1f1 0,rgba(241,241,241,.001) 100%)}}.btn.no-text .fa{margin:0}.btn[disabled]{opacity:.5}.actions-menu{position:absolute;background:#fafafa;display:inline-flex;flex-direction:column;bottom:27px;right:45px;width:115px;padding:5px 5px 0;box-shadow:0 4px 14px rgba(0,0,0,.15);z-index:3}.actions-menu button{margin:0 0 5px;height:27px}.nav-controls{padding:10px}#bottom-panel:not(.full) .nav-controls.env-nav{position:sticky;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;top:0;background:#f1f1f1;z-index:1;border-bottom:1px solid #ddd}.current-number{margin:0 7px}.expand-list{text-decoration:underline;color:#00f;cursor:pointer}.settings-page{max-width:1110px;margin-right:auto;margin-left:auto;font-size:15px;padding:0 10px 70px}.settings-header{display:flex;align-items:center;margin-bottom:5px}.settings-header .header-title{flex-grow:1}.settings-header .header-logo{width:50px;height:50px}.settings-section{border-top:1px solid #ddd;padding-top:15px}.settings-section .section-title{margin-top:0}.settings-section .subsection-title{margin-bottom:10px}.settings-section .tip{font-style:italic;font-size:13px;color:grey}.settings-section .pattern-wrapper{margin-top:10px;font-size:16px;display:flex;height:33px}.settings-section .api-error{margin-top:5px;color:red}.pattern-wrapper .pattern-input{width:600px;font-size:inherit;padding:5px 0;height:100%;box-sizing:border-box;vertical-align:middle;flex-grow:1;flex-shrink:1}.retro-checkbox .checkbox{margin:0}.retro-checkbox{margin-top:7px;margin-bottom:15px}.btn.new-pattern{height:100%;line-height:18px}.pattern-wrapper .shrink{height:100%;width:40px;text-align:center;box-sizing:border-box;flex-grow:0;flex-shrink:0;margin-left:10px}.fa{opacity:.7}.pattern-wrapper .shrink.reset{background:unset;width:unset;padding:0;margin-left:8px}.grouping-patterns button.new-pattern{margin-top:10px}

data/client-app/README.md

@@ -21,8 +21,8 @@ You will need the following things properly installed on your computer.
 ## Running / Development
 
 * `ember serve`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
-* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+* Visit your app at [http://localhost:4200/logs](http://localhost:4200).
+* Visit your tests at [http://localhost:4200/logs/tests](http://localhost:4200/tests).
 
 ### Code Generators
 

data/client-app/app/components/env-tab.js

@@ -4,32 +4,32 @@ import { buildHashString } from "client-app/lib/utilities";
 import Preload from "client-app/lib/preload";
 
 export default Component.extend({
-  current: 1,
-
   didUpdateAttrs() {
-    this.setProperties({
-      current: 1,
-      expanded: null
-    });
+    this.set("expanded", null);
   },
 
+  currentEnv: computed("isEnvArray", "currentEnvPosition", function() {
+    if (this.isEnvArray) {
+      return this.message.env[this.currentEnvPosition];
+    } else {
+      return this.message.env;
+    }
+  }),
+
   isEnvArray: computed("message.env", function() {
     return Array.isArray(this.get("message.env"));
   }),
 
-  html: computed("isEnvArray", "current", "expanded.[]", function() {
-    if (!this.get("isEnvArray")) {
+  html: computed("isEnvArray", "currentEnv", "expanded.[]", function() {
+    if (!this.isEnvArray) {
       return buildHashString(this.get("message.env"));
     } else {
-      const currentEnv = Em.$.extend(
-        {},
-        this.get("message.env")[this.get("current") - 1]
-      );
+      const currentEnv = Em.$.extend({}, this.currentEnv);
       const expandableKeys = Preload.get("env_expandable_keys") || [];
       expandableKeys.forEach(key => {
         if (currentEnv.hasOwnProperty(key) && !Array.isArray(currentEnv[key])) {
           const list = [currentEnv[key]];
-          this.get("message.env").forEach(env => {
+          this.message.env.forEach(env => {
             if (env[key] && list.indexOf(env[key]) === -1) {
               list.push(env[key]);
             }
@@ -37,7 +37,7 @@ export default Component.extend({
           currentEnv[key] = list.length > 1 ? list : list[0];
         }
       });
-      return buildHashString(currentEnv, false, this.get("expanded") || []);
+      return buildHashString(currentEnv, false, this.expanded || []);
     }
   }),
 
@@ -50,31 +50,11 @@ export default Component.extend({
       $elem.hasClass("expand-list")
     ) {
       e.preventDefault();
-      if (!this.get("expanded")) {
+      if (!this.expanded) {
         this.set("expanded", [dataKey]);
       } else {
-        this.get("expanded").pushObject(dataKey);
+        this.expanded.pushObject(dataKey);
       }
     }
-  },
-
-  disableBackButtons: computed("current", function() {
-    return this.get("current") === 1;
-  }),
-
-  disableForwardButtons: computed("current", "message.env.length", function() {
-    return this.get("current") === this.get("message.env.length");
-  }),
-
-  actions: {
-    takeStep(dir) {
-      const amount = dir === "back" ? -1 : 1;
-      this.set("current", this.get("current") + amount);
-    },
-
-    bigJump(dir) {
-      const newCurrent = dir === "back" ? 1 : this.get("message.env.length");
-      this.set("current", newCurrent);
-    }
   }
 });

data/client-app/app/components/message-row.js

@@ -13,7 +13,7 @@ export default Component.extend({
   ],
 
   click() {
-    this.selectedMessage(this.get("model"));
+    this.selectRow();
   },
 
   willInsertElement() {

data/client-app/app/components/page-nav.js

@@ -0,0 +1,30 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { equal } from "@ember/object/computed";
+
+export default Component.extend({
+  classNames: ["nav-controls"],
+  classNameBindings: ["extraClasses"],
+  disableBackButtons: equal("position", 0),
+
+  disableForwardButtons: computed("position", "list.length", function() {
+    return this.position === this.get("list.length") - 1;
+  }),
+
+  displayNumber: computed("position", function() {
+    return this.position + 1;
+  }),
+
+  actions: {
+    takeStep(dir) {
+      const amount = dir === "back" ? -1 : 1;
+      const newPos = this.position + amount;
+      this.navigate(newPos);
+    },
+
+    bigJump(dir) {
+      const newPos = dir === "back" ? 0 : this.get("list.length") - 1;
+      this.navigate(newPos);
+    }
+  }
+});

data/client-app/app/components/patterns-list.js

@@ -1,11 +1,12 @@
 import Component from "@ember/component";
-import { not } from "@ember/object/computed";
+import { not, equal } from "@ember/object/computed";
 import { computed } from "@ember/object";
 import Pattern from "client-app/models/pattern-item";
 import { ajax } from "client-app/lib/utilities";
 
 export default Component.extend({
   immutable: not("mutable"),
+  showCounter: equal("key", "suppression"),
 
   init() {
     this._super(...arguments);

data/client-app/app/controllers/index.js

@@ -1,6 +1,6 @@
 import Controller from "@ember/controller";
 import { ajax } from "client-app/lib/utilities";
-import { observer, computed } from "@ember/object";
+import { computed } from "@ember/object";
 import Preload from "client-app/lib/preload";
 import { debounce } from "@ember/runloop";
 
@@ -11,8 +11,7 @@ export default Controller.extend({
   showErr: true,
   showFatal: true,
   search: "",
-  currentMessage: Em.computed.alias("model.currentMessage"),
-  currentTab: null,
+  queryParams: ["search"],
 
   showSettings: computed(function() {
     return Preload.get("patterns_enabled");
@@ -27,131 +26,108 @@ export default Controller.extend({
     return this.site.isMobile;
   }),
 
-  fetchEnv() {
-    const message = this.get("currentMessage");
-    if (message) {
-      this.set("loadingEnv", true);
-      return ajax(`/fetch-env/${message.key}.json`)
-        .then(env => message.set("env", env))
-        .always(() => this.set("loadingEnv", false));
-    }
-  },
-
   actions: {
     expandMessage(message) {
       message.expand();
     },
 
-    selectMessage(message) {
-      const old = this.get("currentMessage");
-      if (old) {
-        old.set("selected", false);
-      }
-
-      message.set("selected", true);
-      this.setProperties({
-        currentMessage: message,
-        loadingEnv: false
-      });
-      if (!message.env && this.currentTab === "env") {
-        this.fetchEnv();
-      }
+    selectRowAction(row, opts = {}) {
+      this.model.selectRow(row, opts);
     },
 
-    tabChanged(newTab) {
-      this.setProperties({
-        currentTab: newTab,
-        loadingEnv: false
-      });
-      if (newTab === "env" && !this.get("currentMessage.env")) {
-        this.fetchEnv();
-      }
+    tabChangedAction(newTab) {
+      this.model.tabChanged(newTab);
     },
 
     showMoreBefore() {
-      this.get("model").showMoreBefore();
+      this.model.showMoreBefore();
     },
 
     loadMore() {
-      return this.get("model").loadMore();
+      return this.model.loadMore();
     },
 
     clear() {
       if (confirm("Clear the logs?\n\nCancel = No, OK = Clear")) {
         ajax("/clear", { type: "POST" }).then(() => {
-          this.get("model").reload();
+          this.model.reload();
         });
       }
     },
 
     removeMessage(msg) {
-      const messages = this.get("model");
-      messages.destroy(msg);
+      const group = this.model.currentRow.group ? this.model.currentRow : null;
+      const rows = this.model.rows;
+      const idx = group ? rows.indexOf(group) : rows.indexOf(msg);
+
+      msg.destroy();
+      msg.set("selected", false);
+      this.model.set("total", this.model.total - 1);
+      let removedRow = false;
+      let messageIndex = 0;
+
+      if (group) {
+        messageIndex = group.messages.indexOf(msg);
+        group.messages.removeObject(msg);
+        messageIndex = Math.min(messageIndex, group.messages.length - 1);
+        group.decrementProperty("count");
+        if (group.messages.length === 0) {
+          rows.removeObject(group);
+          removedRow = true;
+        }
+      } else {
+        rows.removeObject(msg);
+        removedRow = true;
+      }
+
+      if (removedRow) {
+        if (idx > 0) {
+          this.model.selectRow(rows[idx - 1]);
+        } else if (this.model.total > 0) {
+          this.model.selectRow(rows[0]);
+        } else {
+          this.model.reload();
+        }
+      } else if (group) {
+        this.model.selectRow(rows[idx], { messageIndex });
+      }
     },
 
     solveMessage(msg) {
-      const messages = this.get("model");
-      messages.solve(msg);
-    }
-  },
+      this.model.solve(msg);
+    },
 
-  updateSelectedMessage() {
-    const currentKey = this.get("currentMessage.key");
-    const messages = this.get("model.messages");
-    if (currentKey && messages) {
-      const match = messages.find(m => m.key === currentKey);
-      if (match) {
-        match.set("selected", true);
-      } else {
-        this.set("currentMessage", null);
-      }
-    }
-  },
+    groupedMessageChangedAction(newPosition) {
+      this.model.groupedMessageChanged(newPosition);
+    },
 
-  filter: computed(
-    "showDebug",
-    "showInfo",
-    "showWarn",
-    "showErr",
-    "showFatal",
-    function() {
+    envChangedAction(newPosition) {
+      this.model.envChanged(newPosition);
+    },
+
+    updateFilter(name) {
+      this.toggleProperty(name);
       const filter = [];
       ["Debug", "Info", "Warn", "Err", "Fatal"].forEach((severity, index) => {
         if (this.get(`show${severity}`)) {
           filter.push(index);
         }
       });
+      filter.push(5); // always show unknown, rare
+      this.model.set("filter", filter);
+      this.model.reload().then(() => this.model.updateSelectedRow());
+    },
 
-      // always show unknown, rare
-      filter.push(5);
-      return filter;
-    }
-  ),
-
-  filterChanged: observer("filter.length", function() {
-    const filter = this.get("filter");
-    const model = this.get("model");
-    model.set("filter", filter);
-    if (filter && this.get("initialized")) {
-      model.reload().then(() => this.updateSelectedMessage());
-    }
-  }),
-
-  doSearch(term) {
-    const model = this.get("model");
-    model.set("search", term);
-
-    if (this.get("initialized")) {
-      model.reload().then(() => this.updateSelectedMessage());
+    updateSearch(term) {
+      if (term && term.length === 1) {
+        return;
+      }
+      debounce(this, this.doSearch, term, 250);
     }
   },
 
-  searchChanged: observer("search", function() {
-    const term = this.search;
-    const termSize = term && term.length;
-    if (termSize && termSize === 1) {
-      return;
-    }
-    debounce(this, this.doSearch, term, 250);
-  })
+  doSearch(term) {
+    this.model.set("search", term);
+    this.model.reload().then(() => this.model.updateSelectedRow());
+  }
 });

data/client-app/app/controllers/show.js

@@ -1,6 +1,8 @@
 import Controller from "@ember/controller";
 
 export default Controller.extend({
+  envPosition: 0,
+
   actions: {
     protect() {
       this.get("model").protect();
@@ -8,6 +10,10 @@ export default Controller.extend({
 
     unprotect() {
       this.get("model").unprotect();
+    },
+
+    envChanged(newPosition) {
+      this.set("envPosition", newPosition);
     }
   }
 });

data/client-app/app/models/group.js

@@ -0,0 +1,20 @@
+import Message from "client-app/models/message";
+import { default as EmberObject, computed } from "@ember/object";
+import { reads } from "@ember/object/computed";
+
+export default EmberObject.extend({
+  selected: false,
+  showCount: true,
+  key: reads("regex"),
+  displayMessage: reads("messages.firstObject.message"),
+
+  init() {
+    this._super(...arguments);
+    const messages = this.messages.map(m => Message.create(m));
+    this.set("messages", messages);
+  },
+
+  glyph: computed(function() {
+    return "<i class='fa fa-clone group'></i>";
+  })
+});

data/client-app/app/models/message-collection.js

@@ -1,14 +1,43 @@
 import { ajax, increaseTitleCount } from "client-app/lib/utilities";
 import Message from "client-app/models/message";
+import Group from "client-app/models/group";
 import { compare } from "@ember/utils";
-import { computed } from "@ember/object";
+import { default as EmberObject, computed } from "@ember/object";
+import { A } from "@ember/array";
 
 const BATCH_SIZE = 50;
+const DEFAULT_FILTER = [0, 1, 2, 3, 4, 5];
 
-export default Em.Object.extend({
-  messages: Em.A(),
-  currentMessage: null,
+export default EmberObject.extend({
   total: 0,
+  rows: null,
+  currentRow: null,
+  currentTab: null,
+  currentEnvPosition: 0,
+  currentGroupedMessagesPosition: 0,
+
+  init() {
+    this._super(...arguments);
+    this.setProperties({
+      filter: DEFAULT_FILTER,
+      search: "",
+      rows: A()
+    });
+  },
+
+  currentMessage: computed(
+    "currentRow",
+    "currentGroupedMessagesPosition",
+    function() {
+      const row = this.currentRow;
+      const position = this.currentGroupedMessagesPosition;
+      if (row && row.group) {
+        return row.messages[position];
+      } else {
+        return row;
+      }
+    }
+  ),
 
   solve(message) {
     message.solve().then(() => {
@@ -16,25 +45,85 @@ export default Em.Object.extend({
     });
   },
 
-  destroy(message) {
-    const messages = this.get("messages");
-    const idx = messages.indexOf(message);
-    message.destroy();
-    message.set("selected", false);
-    this.set("total", this.get("total") - 1);
-    this.get("messages").removeObject(message);
-
-    if (idx > 0) {
-      message = messages[idx - 1];
-      message.set("selected", true);
-      this.set("currentMessage", message);
-    } else {
-      if (this.get("total") > 0) {
-        message = messages[0];
-        message.set("selected", true);
-        this.set("currentMessage", message);
+  selectRow(row, opts = {}) {
+    const old = this.currentRow;
+    if (old) {
+      old.set("selected", false);
+    }
+    row.set("selected", true);
+    const currentGroupedMessagesPosition = opts["messageIndex"] || 0;
+    const shouldRefresh =
+      currentGroupedMessagesPosition === this.currentGroupedMessagesPosition;
+    this.setProperties({
+      currentRow: row,
+      loadingEnv: false,
+      currentGroupedMessagesPosition,
+      currentEnvPosition: 0
+    });
+    if (shouldRefresh)
+      this.notifyPropertyChange("currentGroupedMessagesPosition");
+    this.fetchEnv();
+  },
+
+  tabChanged(newTab) {
+    this.setProperties({
+      currentTab: newTab,
+      loadingEnv: false
+    });
+    this.fetchEnv();
+  },
+
+  groupedMessageChanged(newPosition) {
+    this.setProperties({
+      currentGroupedMessagesPosition: newPosition,
+      currentEnvPosition: 0
+    });
+    this.fetchEnv();
+  },
+
+  envChanged(newPosition) {
+    this.set("currentEnvPosition", newPosition);
+    this.fetchEnv();
+  },
+
+  fetchEnv() {
+    const message = this.currentMessage;
+    if (message && !message.env && this.currentTab === "env") {
+      this.set("loadingEnv", true);
+      return ajax(`/fetch-env/${message.key}.json`)
+        .then(env => message.set("env", env))
+        .always(() => this.set("loadingEnv", false));
+    }
+  },
+
+  findEquivalentMessageIndex(row) {
+    let messageIndex = 0;
+    if (
+      row &&
+      row.group &&
+      this.currentRow &&
+      this.currentRow.group &&
+      row.key === this.currentRow.key
+    ) {
+      messageIndex = row.messages.mapBy("key").indexOf(this.currentMessage.key);
+      messageIndex = Math.max(0, messageIndex);
+    }
+    return messageIndex;
+  },
+
+  updateSelectedRow() {
+    const currentKey = this.get("currentRow.key");
+    if (currentKey && this.rows) {
+      const match = this.rows.find(m => m.key === currentKey);
+      if (match) {
+        const messageIndex = this.findEquivalentMessageIndex(match);
+        this.selectRow(match, { messageIndex });
       } else {
-        this.reload();
+        this.setProperties({
+          currentRow: null,
+          currentEnvPosition: 0,
+          currentGroupedMessagesPosition: 0
+        });
       }
     }
   },
@@ -43,13 +132,12 @@ export default Em.Object.extend({
     opts = opts || {};
 
     const data = {
-      filter: this.get("filter").join("_")
+      filter: this.filter.join("_")
     };
 
-    const search = this.get("search");
-    if (!_.isEmpty(search)) {
-      data.search = search;
-      const regexSearch = this.get("regexSearch");
+    if (!_.isEmpty(this.search)) {
+      data.search = this.search;
+      const regexSearch = this.regexSearch;
       if (regexSearch) {
         data.regex_search = "true";
       }
@@ -57,6 +145,9 @@ export default Em.Object.extend({
 
     if (opts.before) {
       data.before = opts.before;
+      if (opts.knownGroups) {
+        data.known_groups = opts.knownGroups;
+      }
     }
 
     if (opts.after) {
@@ -70,32 +161,32 @@ export default Em.Object.extend({
       .then(data => {
         // guard against race: ensure the results we're trying to apply
         //                     match the current search terms
-        if (compare(data.filter, this.get("filter")) != 0) {
+        if (compare(data.filter, this.filter) != 0) {
           return;
         }
-        if (compare(data.search, this.get("search")) != 0) {
+        if (compare(data.search, this.search) != 0) {
           return;
         }
 
         if (data.messages.length > 0) {
-          const newRows = this.toMessages(data.messages);
-          const messages = this.get("messages");
+          const newRows = this.toObjects(data.messages);
+          const rows = this.rows;
           if (opts.before) {
-            messages.unshiftObjects(newRows);
+            rows.unshiftObjects(newRows);
           } else {
-            newRows.forEach(nmsg => {
-              messages.forEach(emsg => {
-                if (emsg.key == nmsg.key) {
-                  messages.removeObject(emsg);
-                  if (this.get("currentMessage") === emsg) {
+            newRows.forEach(nrow => {
+              rows.forEach(erow => {
+                if (erow.key === nrow.key) {
+                  rows.removeObject(erow);
+                  if (this.currentRow === erow) {
                     // TODO would updateFromJson() work here?
-                    this.set("currentMessage", nmsg);
-                    nmsg.set("selected", emsg.get("selected"));
+                    const messageIndex = this.findEquivalentMessageIndex(nrow);
+                    this.selectRow(nrow, { messageIndex });
                   }
                 }
               });
             });
-            messages.addObjects(newRows);
+            rows.addObjects(newRows);
             if (newRows.length > 0) {
               increaseTitleCount(newRows.length);
             }
@@ -109,7 +200,7 @@ export default Em.Object.extend({
 
   reload() {
     this.set("total", 0);
-    this.get("messages").clear();
+    this.rows.clear();
 
     return this.load().then(data => this.updateCanLoadMore(data));
   },
@@ -126,43 +217,48 @@ export default Em.Object.extend({
   },
 
   loadMore() {
-    const messages = this.get("messages");
-    if (messages.length === 0) {
+    const rows = this.rows;
+    if (rows.length === 0) {
       this.load({});
       return;
     }
 
-    const lastKey = messages[messages.length - 1].get("key");
+    const lastLog = rows[rows.length - 1];
+    const lastKey = lastLog.group ? lastLog.row_id : lastLog.key;
     this.load({
       after: lastKey
     });
   },
 
   hideCountInLoadMore: computed("search", "filter", function() {
-    const search = this.get("search");
-    const filter = this.get("filter");
-    return (search && search.length > 0) || (filter && filter.length < 6);
+    const filter = this.filter;
+    return (
+      (this.search && this.search.length > 0) || (filter && filter.length < 6)
+    );
   }),
 
-  moreBefore: computed("messages.length", "canLoadMore", function() {
-    return this.get("messages.length") >= BATCH_SIZE && this.get("canLoadMore");
+  moreBefore: computed("rows.length", "canLoadMore", function() {
+    return this.get("rows.length") >= BATCH_SIZE && this.canLoadMore;
   }),
 
-  totalBefore: computed("total", "messages.length", function() {
-    return this.get("total") - this.get("messages").length;
+  totalBefore: computed("total", "rows.length", function() {
+    return this.total - this.rows.length;
   }),
 
   showMoreBefore: function() {
-    const messages = this.get("messages");
-    const firstKey = messages[0].get("key");
+    const rows = this.rows;
+    const firstLog = rows[0];
+    const firstKey = firstLog.group ? firstLog.row_id : firstLog.key;
+    const knownGroups = rows.filterBy("group").mapBy("regex");
 
     this.load({
-      before: firstKey
+      before: firstKey,
+      knownGroups
     }).then(data => this.updateCanLoadMore(data));
   },
 
   regexSearch: computed("search", function() {
-    const search = this.get("search");
+    const search = this.search;
     if (search && search.length > 2 && search[0] === "/") {
       const match = search.match(/\/(.*)\/(.*)/);
       if (match && match.length === 3) {
@@ -175,7 +271,13 @@ export default Em.Object.extend({
     }
   }),
 
-  toMessages(messages) {
-    return messages.map(m => Message.create(m));
+  toObjects(rows) {
+    return rows.map(m => {
+      if (m.group) {
+        return Group.create(m);
+      } else {
+        return Message.create(m);
+      }
+    });
   }
 });