PERF: Introduce custom quote system, and collapse tables using widgets

PERF: Introduce custom quote system, and collapse tables using widgets

diff --git a/assets/javascripts/discourse/initializers/initialize-discourse-prometheus-alert-receiver.js.es6 b/assets/javascripts/discourse/initializers/initialize-discourse-prometheus-alert-receiver.js.es6
index e37ac8a..0ca4dfe 100644
--- a/assets/javascripts/discourse/initializers/initialize-discourse-prometheus-alert-receiver.js.es6
+++ b/assets/javascripts/discourse/initializers/initialize-discourse-prometheus-alert-receiver.js.es6
@@ -36,6 +36,21 @@ export default {
               id: this.model.postStream.firstPostId
             });
           }
+        },
+
+        _quoteAlert(text) {
+          this.quoteState.selected(this.model.postStream.firstPostId, text, {});
+          this.send("selectText");
+        },
+
+        init() {
+          this._super(...arguments);
+          this.appEvents.on("alerts:quote-alert", this, "_quoteAlert");
+        },
+
+        willDestroy() {
+          this._super(...arguments);
+          this.appEvents.off("alerts:quote-alert", this, "_quoteAlert");
         }
       });
     });
diff --git a/assets/javascripts/discourse/widgets/alert-receiver.js.es6 b/assets/javascripts/discourse/widgets/alert-receiver.js.es6
index 6db0fb6..174aaa5 100644
--- a/assets/javascripts/discourse/widgets/alert-receiver.js.es6
+++ b/assets/javascripts/discourse/widgets/alert-receiver.js.es6
@@ -15,7 +15,7 @@ const COLLAPSE_THRESHOLD = 30;
 createWidget("alert-receiver-data", {
   tagName: "div",
   buildClasses() {
-    return "cooked prometheus-alert-receiver";
+    return "prometheus-alert-receiver";
   },
 
   html(attrs) {
@@ -66,6 +66,8 @@ createWidget("alert-receiver-data", {
           toAppend = this.attach("alert-receiver-collapsible-table", {
             alerts: alerts,
             heading: dcName,
+            status: statusName,
+            headingLink: alerts[0].external_url,
             contents: () => {
               return table;
             }
@@ -206,6 +208,18 @@ createWidget("alert-receiver-row", {
     return url.toString();
   },
 
+  quoteAlert(val) {
+    let alertString = `**${val.identifier}** - ${val.datacenter}`;
+
+    alertString += ` - [date=${val.starts_at.split("T")[0]} time=${
+      val.starts_at.split("T")[1]
+    } displayedTimezone=UTC format="YYYY-MM-DD HH:mm"]`;
+
+    if (val.description) alertString += ` - ${val.description}`;
+
+    this.appEvents.trigger("alerts:quote-alert", alertString);
+  },
+
   template: hbs`
     <td><a href={{transformed.graphUrl}}>{{attrs.alert.identifier}}</a></td>
     <td>
@@ -219,7 +233,17 @@ createWidget("alert-receiver-row", {
     {{/if}}
     <td>
       <div>
-        <a href={{transformed.logsUrl}}>{{emoji name='file_folder'}}</a>
+        {{flat-button 
+          action="quoteAlert"
+          icon="quote-left"
+          actionParam=attrs.alert
+          title="prom_alert_receiver.actions.quote"
+        }}
+        <a class='btn-flat no-text btn-icon' 
+           href={{transformed.logsUrl}}
+           title={{i18n "prom_alert_receiver.actions.logs"}}>
+           {{d-icon 'far-list-alt'}}
+        </a>
         {{#if transformed.grafanaUrl}}
           <a href={{transformed.grafanaUrl}}>{{emoji name='bar_chart'}}</a>
         {{/if}}
@@ -230,12 +254,38 @@ createWidget("alert-receiver-row", {
 
 createWidget("alert-receiver-collapsible-table", {
   tagName: "div.collapsible-table",
+  buildKey: attrs => `collapsible-${attrs.status}-${attrs.headingLink}`,
+
+  defaultState() {
+    return { collapsed: true };
+  },
 
   template: hbs`
-    <details>
-      <summary>{{attrs.heading}} ({{attrs.alerts.length}})</summary>
+    {{alert-receiver-collapse-toggle collapsed=state.collapsed heading=attrs.heading count=attrs.alerts.length}}
+      
+    {{#unless state.collapsed}}
       {{yield}}
-    </details>
+    {{/unless}}
+  `,
+
+  toggleCollapse() {
+    this.state.collapsed = !this.state.collapsed;
+  }
+});
+
+createWidget("alert-receiver-collapse-toggle", {
+  tagName: "div",
+
+  buildClasses() {
+    return "alert-receiver-collapse-toggle";
+  },
+
+  click() {
+    this.sendWidgetAction("toggleCollapse");
+  },
+
+  template: hbs`
+    {{#if attrs.collapsed}}►{{else}}▼{{/if}} {{attrs.heading}} ({{attrs.count}})
   `
 });
 
diff --git a/assets/stylesheets/topic-post.scss b/assets/stylesheets/topic-post.scss
index 5dfade4..baef079 100644
--- a/assets/stylesheets/topic-post.scss
+++ b/assets/stylesheets/topic-post.scss
@@ -8,19 +8,44 @@
   & > .cooked {
     order: 1;
   }
+  & > .prometheus-alert-receiver {
+    order: 2;
+  }
 }
 
-[data-plugin="prom-alerts-table"],
 .prometheus-alert-receiver {
+  padding: 0 $topic-body-width-padding;
+
+  & > h2 {
+    margin: 1em 0 0.5em;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  .alert-receiver-collapse-toggle {
+    cursor: pointer;
+  }
+
   table {
     position: relative;
   }
 
-  th {
-    &:last-child {
-      display: none;
+  thead {
+    th {
+      text-align: left;
+      padding-bottom: 2px;
+      font-weight: bold;
+      color: var(--primary);
     }
+  }
+
+  td {
+    padding: 3px 3px 3px 0.5em;
+  }
 
+  th {
     a {
       color: var(--primary, $primary);
     }
@@ -30,29 +55,7 @@
     position: relative;
 
     td:last-child {
-      position: relative;
-      width: 20px;
-
-      > div {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        padding: 3px;
-        max-width: 20px;
-        height: 20px;
-        overflow: hidden;
-        white-space: nowrap;
-
-        .badge-notification.clicks {
-          display: none;
-        }
-      }
-
-      &:hover > div {
-        background-color: var(--secondary, $secondary);
-        max-width: none;
-      }
+      white-space: nowrap;
     }
   }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index f31d82e..2b79c60 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -6,6 +6,9 @@ en:
         resolved: "History"
         stale: "Stale"
         suppressed: "Silenced"
+      actions:
+        quote: Quote Alert
+        logs: Open Kibana
     filters:
       alerts-category:
         title_with_count:

GitHub sha: 3763cadc