logster 2.1.2 → 2.2.0

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

@@ -1,100 +1,100 @@
-import { ajax } from "client-app/lib/utilities";
-import Preload from "client-app/lib/preload";
-import { computed } from "@ember/object";
-
-export default Em.Object.extend({
-  MAX_LEN: 200,
-
-  expand() {
-    this.set("expanded", true);
-  },
-
-  solve() {
-    return ajax("/solve/" + this.get("key"), { type: "PUT" });
-  },
-
-  destroy() {
-    return ajax("/message/" + this.get("key"), { type: "DELETE" });
-  },
-
-  protect() {
-    this.set("protected", true);
-    return ajax("/protect/" + this.get("key"), { type: "PUT" });
-  },
-  unprotect() {
-    this.set("protected", false);
-    return ajax("/unprotect/" + this.get("key"), { type: "DELETE" });
-  },
-
-  showCount: computed("count", function() {
-    return this.get("count") > 1;
-  }),
-
-  hasMore: computed("message", "expanded", function() {
-    const message = this.get("message");
-    const expanded = this.get("expanded");
-
-    return !expanded && message.length > this.MAX_LEN;
-  }),
-
-  shareUrl: computed("key", function() {
-    return Preload.get("rootPath") + "/show/" + this.get("key");
-  }),
-
-  displayMessage: computed("message", "expanded", function() {
-    let message = this.get("message");
-    const expanded = this.get("expanded");
-
-    if (!expanded && message.length > this.MAX_LEN) {
-      message = message.substr(0, this.MAX_LEN);
-    }
-    return message;
-  }),
-
-  updateFromObject(other) {
-    // XXX Only updatable property is count right now
-    this.set("count", other.get("count"));
-  },
-
-  canSolve: computed("env.{application_version,length}", function() {
-    const backtrace = this.get("backtrace");
-    const env = this.get("env");
-    const appVersion = Array.isArray(env)
-      ? env
-          .map(e => e.application_version)
-          .compact()
-          .join("")
-      : env && env.application_version;
-    return appVersion && backtrace && backtrace.length > 0;
-  }),
-
-  rowClass: computed("severity", function() {
-    switch (this.get("severity")) {
-      case 0:
-        return "debug";
-      case 1:
-        return "info";
-      case 2:
-        return "warn";
-      case 3:
-        return "error";
-      case 4:
-        return "fatal";
-    }
-  }),
-
-  glyph: computed("severity", function() {
-    switch (this.get("severity")) {
-      case 0:
-        return "";
-      case 1:
-        return "";
-      case 2:
-        return "<i class='fa fa-exclamation-circle warning'></i>";
-      case 3:
-        return "<i class='fa fa-times-circle error'></i>";
-      case 4:
-        return "<i class='fa fa-times-circle fatal'></i>";
-    }
-  })
-});
+import { ajax } from "client-app/lib/utilities";
+import Preload from "client-app/lib/preload";
+import { computed } from "@ember/object";
+
+export default Em.Object.extend({
+  MAX_LEN: 200,
+
+  expand() {
+    this.set("expanded", true);
+  },
+
+  solve() {
+    return ajax("/solve/" + this.get("key"), { type: "PUT" });
+  },
+
+  destroy() {
+    return ajax("/message/" + this.get("key"), { type: "DELETE" });
+  },
+
+  protect() {
+    this.set("protected", true);
+    return ajax("/protect/" + this.get("key"), { type: "PUT" });
+  },
+  unprotect() {
+    this.set("protected", false);
+    return ajax("/unprotect/" + this.get("key"), { type: "DELETE" });
+  },
+
+  showCount: computed("count", function() {
+    return this.get("count") > 1;
+  }),
+
+  hasMore: computed("message", "expanded", function() {
+    const message = this.get("message");
+    const expanded = this.get("expanded");
+
+    return !expanded && message.length > this.MAX_LEN;
+  }),
+
+  shareUrl: computed("key", function() {
+    return Preload.get("rootPath") + "/show/" + this.get("key");
+  }),
+
+  displayMessage: computed("message", "expanded", function() {
+    let message = this.get("message");
+    const expanded = this.get("expanded");
+
+    if (!expanded && message.length > this.MAX_LEN) {
+      message = message.substr(0, this.MAX_LEN);
+    }
+    return message;
+  }),
+
+  updateFromObject(other) {
+    // XXX Only updatable property is count right now
+    this.set("count", other.get("count"));
+  },
+
+  canSolve: computed("env.{application_version,length}", function() {
+    const backtrace = this.get("backtrace");
+    const env = this.get("env");
+    const appVersion = Array.isArray(env)
+      ? env
+          .map(e => e.application_version)
+          .compact()
+          .join("")
+      : env && env.application_version;
+    return appVersion && backtrace && backtrace.length > 0;
+  }),
+
+  rowClass: computed("severity", function() {
+    switch (this.get("severity")) {
+      case 0:
+        return "debug";
+      case 1:
+        return "info";
+      case 2:
+        return "warn";
+      case 3:
+        return "error";
+      case 4:
+        return "fatal";
+    }
+  }),
+
+  glyph: computed("severity", function() {
+    switch (this.get("severity")) {
+      case 0:
+        return "";
+      case 1:
+        return "";
+      case 2:
+        return "<i class='fa fa-exclamation-circle warning'></i>";
+      case 3:
+        return "<i class='fa fa-times-circle error'></i>";
+      case 4:
+        return "<i class='fa fa-times-circle fatal'></i>";
+    }
+  })
+});

data/client-app/app/models/pattern-item.js

@@ -0,0 +1,25 @@
+import { default as EmberObject, computed } from "@ember/object";
+
+export default EmberObject.extend({
+  isNew: false,
+  value: "",
+  valueBuffer: "",
+  error: null,
+  saving: false,
+
+  init() {
+    this._super(...arguments);
+    this.set("valueBuffer", this.get("value"));
+  },
+
+  updateValue(newValue) {
+    this.setProperties({
+      value: newValue,
+      valueBuffer: newValue
+    });
+  },
+
+  hasBuffer: computed("value", "valueBuffer", function() {
+    return this.get("value") !== this.get("valueBuffer");
+  })
+});

data/client-app/app/router.js

@@ -9,6 +9,7 @@ const Router = EmberRouter.extend({
 Router.map(function() {
   this.route("index", { path: "/" });
   this.route("show", { path: "/show/:id" });
+  this.route("settings");
 });
 
 export default Router;

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

@@ -10,16 +10,9 @@ export default Route.extend({
 
   setupController(controller, model) {
     this._super(controller, model);
-    controller.setProperties({
-      showDebug: true,
-      showInfo: true,
-      showWarn: true,
-      showErr: true,
-      showFatal: true,
-      search: "",
-      initialized: true
-    });
+    model.setProperties(controller.getProperties("filter", "search"));
     model.reload();
+    controller.set("initialized", true);
 
     let times = 0;
     let backoff = 1;

data/client-app/app/routes/settings.js

@@ -0,0 +1,15 @@
+import Route from "@ember/routing/route";
+import { ajax } from "client-app/lib/utilities";
+
+export default Route.extend({
+  model() {
+    return ajax("/settings.json");
+  },
+
+  setupController(controller, model) {
+    this._super(...arguments);
+    const showCodedPatterns =
+      model.coded_patterns && model.coded_patterns.length > 0;
+    controller.set("showCodedPatterns", showCodedPatterns);
+  }
+});

data/client-app/app/styles/app.css

@@ -1,527 +1,633 @@
-body {
-  font-family: "Roboto", 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 {
-  display: flex;
-}
-
-.message-row .severity,
-.message-row .protected {
-  text-align: center;
-  width: 25px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
-.message-row div {
-  border-top: 0.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;
-}
-
-.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;
-}
-
-.message-row .count {
-  text-align: right;
-}
-
-.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;
-}
-
-.action-panel .search {
-  border: 1px solid #ddd;
-  padding: 3px;
-  vertical-align: middle;
-  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;
-}
-
-#bottom-panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 300px;
-  background-color: #f1f1f1;
-  padding: 8px;
-  padding-top: 0;
-  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 .save,
-#bottom-panel.full .share {
-  bottom: 10px;
-}
-
-#bottom-panel.full button.delete {
-  display: none;
-}
-
-#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;
-}
-
-.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;
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  background-color: #fafafa;
-  cursor: row-resize;
-}
-
-.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;
-}
-
-.message-info {
-  position: absolute;
-  border-bottom: 1px solid #ddd;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.action-panel {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  font-weight: bold;
-}
-
-.action-panel input {
-  margin: 0;
-}
-
-.action-panel i.fa,
-input,
-label span {
-  vertical-align: middle;
-}
-
-.severity-filters label {
-  margin-right: 18px;
-}
-
-.action-panel .clear {
-  float: right;
-  vertical-align: middle;
-}
-
-#log-table {
-  margin: auto;
-  width: 99%;
-}
-
-.btn .fa,
-.btn span {
-  vertical-align: middle;
-}
-
-.hidden {
-  display: none;
-}
-
-.message-info pre,
-.message-info .env-table {
-  position: relative;
-  margin: 10px;
-  margin-top: 5px;
-}
-
-#overlay {
-  position: fixed;
-  z-index: 99999;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  cursor: row-resize;
-  opacity: 0;
-}
-
-.message-info .content {
-  position: absolute;
-  top: 0;
-  bottom: 35px;
-  left: 0;
-  right: 0;
-  overflow: auto;
-  display: none;
-}
-
-.message-info .content.active {
-  display: block;
-}
-
-.tabs {
-  position: absolute;
-  bottom: 13px;
-  left: 0;
-  right: 0;
-  list-style-type: none;
-  border-top: 1px solid #ddd;
-  margin: 0 0 5px;
-  padding: 0 0 0 10px;
-}
-.tabs li {
-  float: left;
-  position: relative;
-  padding-right: 5px;
-  margin: 0;
-}
-.tabs a {
-  position: relative;
-  top: 6px;
-  text-decoration: none;
-  color: #333;
-  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-weight: 500;
-  font-size: 1em;
-  line-height: 0;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.25s;
-  background-color: #ddd;
-  text-decoration: none;
-  border: none;
-  color: #333;
-  font-weight: normal;
-}
-
-.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;
-}
-
-.search-clear-all .search,
-.search-clear-all .clear {
-  height: 24px;
-}
-
-.severity-filters label,
-.search-clear-all .search,
-.search-clear-all .clear {
-  align-self: center;
-}
-
-.search-clear-all .clear {
-  margin-left: auto;
-}
-
-@media (min-width: 701px) {
-  .severity-filters,
-  .search-clear-all {
-    height: 100%;
-  }
-  .severity-filters,
-  .search-clear-all,
-  .more-wrapping {
-    display: flex;
-  }
-  .severity-filters {
-    float: left;
-  }
-  .action-panel {
-    padding: 10px;
-    box-sizing: border-box;
-    height: 42px;
-  }
-  .message-info {
-    bottom: 42px;
-  }
-}
-
-@media (max-width: 700px) {
-  .severity-filters {
-    padding: 10px;
-  }
-  .search-clear-all {
-    padding: 10px;
-    padding-top: 0;
-  }
-  .action-panel {
-    height: 69px;
-  }
-  .message-info {
-    bottom: 69px;
-  }
-}
-
-@media (max-width: 415px) {
-  .severity-filters {
-    overflow-x: scroll;
-    overflow-y: hidden;
-    white-space: nowrap;
-  }
-  .more-wrapping:before,
-  .more-wrapping:after {
-    content: "";
-    position: absolute;
-    height: 18px;
-  }
-  .more-wrapping:before {
-    width: 15px;
-    margin-left: -10px;
-    background: linear-gradient(
-      to right,
-      #f1f1f1 0%,
-      rgba(241, 241, 241, 0.001) 100%
-    );
-  }
-  .more-wrapping:after {
-    right: 0;
-    width: 23px;
-    background: linear-gradient(
-      to left,
-      #f1f1f1 0%,
-      rgba(241, 241, 241, 0.001) 100%
-    );
-  }
-}
-
-.btn.no-text .fa {
-  margin: 0;
-}
-
-.btn[disabled] {
-  opacity: 0.5;
-}
-
-.actions-menu {
-  position: absolute;
-  background: #fafafa;
-  display: inline-flex;
-  flex-direction: column;
-  bottom: 27px;
-  right: 45px;
-  width: 115px;
-  padding: 5px;
-  padding-bottom: 0px;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
-  z-index: 3;
-}
-
-.actions-menu button {
-  margin: 0 0 5px 0;
-  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: blue;
-  cursor: pointer;
-}
+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;
+}
+
+.message-row .severity,
+.message-row .protected {
+  text-align: center;
+  width: 25px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.message-row div {
+  border-top: 0.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;
+}
+
+.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;
+}
+
+.message-row .count {
+  text-align: right;
+}
+
+.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;
+}
+
+.action-panel .search {
+  border: 1px solid #ddd;
+  padding: 3px;
+  vertical-align: middle;
+  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;
+}
+
+#bottom-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 300px;
+  background-color: #f1f1f1;
+  padding: 8px;
+  padding-top: 0;
+  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 .save,
+#bottom-panel.full .share {
+  bottom: 10px;
+}
+
+#bottom-panel.full button.delete {
+  display: none;
+}
+
+#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;
+}
+
+.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;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  background-color: #fafafa;
+  cursor: row-resize;
+}
+
+.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;
+}
+
+.message-info {
+  position: absolute;
+  border-bottom: 1px solid #ddd;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.action-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-weight: bold;
+}
+
+.action-panel input {
+  margin: 0;
+}
+
+.action-panel i.fa,
+input,
+label span {
+  vertical-align: middle;
+}
+
+.severity-filters label {
+  margin-right: 18px;
+}
+
+.search-clear-all .clear {
+  float: right;
+  vertical-align: middle;
+}
+
+#log-table {
+  margin: auto;
+  width: 99%;
+}
+
+.btn .fa,
+.btn span {
+  vertical-align: middle;
+}
+
+.hidden {
+  display: none;
+}
+
+.message-info pre,
+.message-info .env-table {
+  position: relative;
+  margin: 10px;
+  margin-top: 5px;
+}
+
+#overlay {
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  cursor: row-resize;
+  opacity: 0;
+}
+
+.message-info .content {
+  position: absolute;
+  top: 0;
+  bottom: 35px;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  display: none;
+}
+
+.message-info .content.active {
+  display: block;
+}
+
+.tabs {
+  position: absolute;
+  bottom: 13px;
+  left: 0;
+  right: 0;
+  list-style-type: none;
+  border-top: 1px solid #ddd;
+  margin: 0 0 5px;
+  padding: 0 0 0 10px;
+}
+.tabs li {
+  float: left;
+  position: relative;
+  padding-right: 5px;
+  margin: 0;
+}
+.tabs a {
+  position: relative;
+  top: 6px;
+  text-decoration: none;
+  color: #333;
+  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-weight: 500;
+  font-size: 1em;
+  line-height: 0;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.25s;
+  background-color: #ddd;
+  text-decoration: none;
+  border: none;
+  color: #333;
+  font-weight: normal;
+}
+
+.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: white;
+}
+
+.btn.ok:hover {
+  background-color: #286dc2;
+  color: white;
+}
+
+.search-clear-all .search,
+.search-clear-all .clear {
+  height: 100%;
+}
+
+.severity-filters label,
+.search-clear-all .search,
+.search-clear-all .clear {
+  align-self: center;
+}
+
+.search-clear-all .footer-btns .settings {
+  margin: 0 7px 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) {
+  .severity-filters,
+  .search-clear-all {
+    height: 100%;
+  }
+  .severity-filters,
+  .more-wrapping {
+    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: 10px;
+    padding-top: 0;
+  }
+  .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:before,
+  .more-wrapping:after {
+    content: "";
+    position: absolute;
+    height: 18px;
+  }
+  .more-wrapping:before {
+    width: 15px;
+    margin-left: -10px;
+    background: linear-gradient(
+      to right,
+      #f1f1f1 0%,
+      rgba(241, 241, 241, 0.001) 100%
+    );
+  }
+  .more-wrapping:after {
+    right: 0;
+    width: 23px;
+    background: linear-gradient(
+      to left,
+      #f1f1f1 0%,
+      rgba(241, 241, 241, 0.001) 100%
+    );
+  }
+}
+
+.btn.no-text .fa {
+  margin: 0;
+}
+
+.btn[disabled] {
+  opacity: 0.5;
+}
+
+.actions-menu {
+  position: absolute;
+  background: #fafafa;
+  display: inline-flex;
+  flex-direction: column;
+  bottom: 27px;
+  right: 45px;
+  width: 115px;
+  padding: 5px;
+  padding-bottom: 0px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
+  z-index: 3;
+}
+
+.actions-menu button {
+  margin: 0 0 5px 0;
+  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: blue;
+  cursor: pointer;
+}
+
+.settings-page {
+  max-width: 1110px;
+  margin-right: auto;
+  margin-left: auto;
+  font-size: 15px;
+  padding: 0 10px;
+}
+
+.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 {
+  font-family: Consolas, "Roboto Mono", Monaco, Ubuntu Mono, monospace;
+  margin-top: 5px;
+  color: red;
+}
+
+.pattern-wrapper .pattern-input {
+  font-family: Consolas, "Roboto Mono", Monaco, Ubuntu Mono, monospace;
+  width: 600px;
+  font-size: inherit;
+  padding: 5px 0 5px 0;
+  height: 100%;
+  box-sizing: border-box;
+  vertical-align: middle;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.btn.new-pattern {
+  height: 100%;
+  line-height: 18px;
+}
+
+.pattern-wrapper .btn {
+  height: 100%;
+  box-sizing: border-box;
+  vertical-align: middle;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-left: 10px;
+}