UX: Add headers for webhook events

app/assets/javascripts/admin/components/admin-web-hook-event.js.es6

@@ -26,7 +26,7 @@ export default Ember.Component.extend({
   @computed('model.duration')
   completion(duration) {
     const seconds = Math.floor(duration / 10.0) / 100.0;
-    return I18n.t('admin.web_hooks.events.completion', { seconds });
+    return I18n.t('admin.web_hooks.events.completed_in', { count: seconds });
   },
 
   actions: {

app/assets/javascripts/admin/templates/components/admin-web-hook-event.hbs

@@ -1,4 +1,4 @@
-<div class="col first">
+<div class="col first status">
   <span class="{{statusColorClasses}}">{{model.status}}</span>
 </div>
 <div class="col event-id">{{model.id}}</div>

app/assets/javascripts/admin/templates/web-hooks-show-events.hbs

@@ -10,14 +10,22 @@
 
 <div class='web-hook-events-listing'>
 {{#if model}}
-  {{#if hasIncoming}}
-    <div class='alert alert-info clickable' {{action "showInserted"}}>
-      {{count-i18n key="admin.web_hooks.events.incoming" count=incomingCount}}
-      {{i18n 'click_to_show'}}
-    </div>
-  {{/if}}
   {{#load-more selector=".web-hook-events li" action="loadMore"}}
     <div class='web-hook-events content-list'>
+      <div class='heading-container'>
+        <div class='col heading first status'>{{i18n 'admin.web_hooks.events.status'}}</div>
+        <div class='col heading event-id'>{{i18n 'admin.web_hooks.events.event_id'}}</div>
+        <div class='col heading timestamp'>{{i18n 'admin.web_hooks.events.timestamp'}}</div>
+        <div class='col heading completion'>{{i18n 'admin.web_hooks.events.completion'}}</div>
+        <div class='col heading actions'>{{i18n 'admin.web_hooks.events.actions'}}</div>
+        <div class='clearfix'></div>
+      </div>
+      {{#if hasIncoming}}
+        <div class='alert alert-info clickable' {{action "showInserted"}}>
+          {{count-i18n key="admin.web_hooks.events.incoming" count=incomingCount}}
+          {{i18n 'click_to_show'}}
+        </div>
+      {{/if}}
       <ul>
         {{#each model as |webHookEvent|}}
           {{admin-web-hook-event model=webHookEvent}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -1419,7 +1419,7 @@ table.api-keys {
   position: absolute;
 }
 
-.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses, .permalinks {
+.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses, .permalinks, .web-hook-events {
 
   border-bottom: dotted 1px dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
 
@@ -1872,7 +1872,7 @@ table#user-badges {
   }
 
   .col.first {
-    width: 30px;
+    width: 90px;
   }
 
   .col.event-id {
@@ -1895,6 +1895,10 @@ table#user-badges {
     }
   }
 
+  .col.heading.actions {
+    padding: 4px 0;
+  }
+
   .details {
     display: block;
     margin-top: 10px;

config/locales/client.en.yml

@@ -2481,7 +2481,9 @@ en:
           incoming:
             one: "There is a new event."
             other: "There are {{count}} new events."
-          completion: "Completed in %{seconds} seconds."
+          completed_in:
+            one: "Completed in 1 second."
+            other: "Completed in {{count}} seconds."
           request: "Request"
           response: "Response"
           redeliver_confirm: "Are you sure you want to redeliver the same payload?"
@@ -2492,6 +2494,11 @@ en:
           go_details: "Edit webhook"
           go_events: "Go to events"
           ping: "Ping"
+          status: "Status Code"
+          event_id: "ID"
+          timestamp: "Created"
+          completion: "Completion Time"
+          actions: "Actions"
       plugins:
         title: "Plugins"
         installed: "Installed Plugins"