FEATURE: Copy button for messages (#106)

* UX: Remove logster's method calls from backtrace * FEATURE: Copy button for messages * Show unique HTTP_HOST
discourse · Jan 16, 2020 · d0d967f · d0d967f
1 parent 0e45201
commit d0d967f
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 69 deletions.
diff --git a/assets/javascript/client-app.js b/assets/javascript/client-app.js
diff --git a/assets/stylesheets/client-app.css b/assets/stylesheets/client-app.css
diff --git a/client-app/app/components/message-info.js b/client-app/app/components/message-info.js
@@ -55,6 +55,12 @@ export default Component.extend({
       });
     }
 
+    buttons.push({
+      klass: "copy",
+      action: "copyAction",
+      icon: "clipboard",
+      label: "Copy"
+    });
     return buttons;
   }),
 
@@ -72,6 +78,34 @@ export default Component.extend({
     }
   ),
 
+  copy() {
+    const temp = document.createElement("TEXTAREA");
+    document.body.appendChild(temp);
+    const header = this.currentMessage.showCount
+      ? `Message (${this.currentMessage.count} copies reported)`
+      : "Message";
+    const message = `${header}\n\n${this.currentMessage.message}`;
+
+    const backtrace = `Backtrace\n\n${this.currentMessage.backtrace
+      .split("\n")
+      .slice(0, 10)
+      .join("\n")}`;
+
+    const httpHosts = Array.isArray(this.currentMessage.env)
+      ? this.currentMessage.env
+          .map(e => e["HTTP_HOST"])
+          .filter((e, i, a) => e && a.indexOf(e) === i)
+          .join(", ")
+      : this.currentMessage.env["HTTP_HOST"];
+
+    const env = httpHosts ? `Env\n\nHTTP HOSTS: ${httpHosts}` : "";
+    const lines = [message, backtrace, env].filter(l => l).join("\n\n");
+    temp.value = lines;
+    temp.select();
+    document.execCommand("copy");
+    document.body.removeChild(temp);
+  },
+
   actions: {
     tabChanged(newTab) {
       if (this.onTabChange) {
@@ -80,19 +114,19 @@ export default Component.extend({
     },
 
     protect() {
-      this.get("currentMessage").protect();
+      this.currentMessage.protect();
     },
 
     unprotect() {
-      this.get("currentMessage").unprotect();
+      this.currentMessage.unprotect();
     },
 
     remove() {
-      this.removeMessage(this.get("currentMessage"));
+      this.removeMessage(this.currentMessage);
     },
 
     solve() {
-      this.solveMessage(this.get("currentMessage"));
+      this.solveMessage(this.currentMessage);
     },
 
     solveAll() {
@@ -101,6 +135,14 @@ export default Component.extend({
 
     share() {
       window.location.pathname = this.get("currentMessage.shareUrl");
+    },
+
+    copyAction() {
+      if (this.fetchEnv && !this.currentMessage.env) {
+        this.fetchEnv({ force: true }).then(() => this.copy());
+      } else {
+        this.copy();
+      }
     }
   }
 });
diff --git a/client-app/app/models/message-collection.js b/client-app/app/models/message-collection.js
@@ -86,9 +86,12 @@ export default EmberObject.extend({
     this.fetchEnv();
   },
 
-  fetchEnv() {
+  fetchEnv(opts = {}) {
     const message = this.currentMessage;
-    if (message && !message.env && this.currentTab === "env") {
+    if (
+      opts["force"] ||
+      (message && !message.env && this.currentTab === "env")
+    ) {
       this.set("loadingEnv", true);
       return message.fetchEnv().always(() => this.set("loadingEnv", false));
     }

diff --git a/client-app/app/styles/app.css b/client-app/app/styles/app.css
@@ -175,9 +175,20 @@ i.warning {
   margin-top: 8px;
 }
 
+@media (max-width: 382px) {
+  #bottom-panel.full .message-actions {
+    height: 73px;
+  }
+}
+
+@media (min-width: 383px) {
+  #bottom-panel.full .message-actions {
+    height: 40px;
+  }
+}
+
 #bottom-panel.full .message-actions {
   position: fixed;
-  height: 40px;
   width: 100%;
   left: 0;
   bottom: 0;
@@ -439,7 +450,7 @@ label span {
   flex-shrink: 0;
 }
 
-@media (min-width: 770px) {
+@media (min-width: 771px) {
   .severity-filters,
   .search-clear-all {
     height: 100%;

diff --git a/client-app/app/templates/components/actions-menu.hbs b/client-app/app/templates/components/actions-menu.hbs
@@ -5,8 +5,12 @@
     </div>
   {{/if}}
   <button {{action 'expandMenu'}} class="expand btn no-text"><i class='fa fa-ellipsis-h'></i></button>
-  <button {{action "share"}} class="share btn"><i class='fa fa-share'></i><span>Share</span></button>
+  {{#if showShare}}
+    <button {{action "share"}} class="share btn"><i class='fa fa-share'></i><span>Share</span></button>
+  {{/if}}
 {{else}}
   {{yield}}
-  <button {{action "share"}} class="share btn"><i class='fa fa-share'></i><span>Share</span></button>
+  {{#if showShare}}
+    <button {{action "share"}} class="share btn"><i class='fa fa-share'></i><span>Share</span></button>
+  {{/if}}
 {{/if}}
diff --git a/client-app/app/templates/components/message-info.hbs b/client-app/app/templates/components/message-info.hbs
@@ -42,7 +42,7 @@
 
   {{#if currentMessage}}
     <div class='message-actions'>
-      {{#actions-menu actionsInMenu=actionsInMenu share=(action "share")}}
+      {{#actions-menu actionsInMenu=actionsInMenu showShare=showShare share=(action "share")}}
         {{#each buttons as |btn|}}
           <button {{action btn.action}} class="{{btn.klass}} btn {{if btn.danger 'danger' ''}}">
             <i class="fa fa-{{btn.icon}}"></i>

diff --git a/client-app/app/templates/index.hbs b/client-app/app/templates/index.hbs
@@ -31,7 +31,9 @@
     onTabChange=(action "tabChangedAction")
     envChangedAction=(action "envChangedAction")
     currentEnvPosition=model.currentEnvPosition
-    actionsInMenu=actionsInMenu}}
+    actionsInMenu=actionsInMenu
+    showShare=true
+    fetchEnv=model.fetchEnv}}
 
   <div class="action-panel">
     <div class="severity-filters">