Add status filtering to GitHub events (#1669)

* Add status filtering to github events

Author: joshsmith

app/controllers/admin/github-events/index.js

@@ -1,7 +1,101 @@
 import Controller from '@ember/controller';
+import { computed, get, set } from '@ember/object';
 
 export default Controller.extend({
-  queryParams: ['page', 'size'],
+  queryParams: ['eventAction', 'page', 'size', 'status', 'type'],
+
+  eventAction: '',
   page: 1,
-  size: 20
+  size: 20,
+  status: '',
+  type: '',
+
+  statuses: [
+    'errored',
+    'processing',
+    'processed',
+    'reprocessing',
+    'unprocessed',
+    'unsupported'
+  ],
+
+  types: [
+    'installation',
+    'installation_repositories',
+    'issue_comment',
+    'issues',
+    'pull_request'
+  ],
+
+  actionOptions: {
+    'installation': [
+      'created',
+      'deleted'
+    ],
+    'installation_repositories': [
+      'added',
+      'removed'
+    ],
+    'issue_comment': [
+      'created',
+      'deleted',
+      'edited'
+    ],
+    'issues': [
+      'assigned',
+      'closed',
+      'demilestoned',
+      'edited',
+      'labeled',
+      'milestoned',
+      'opened',
+      'reopened',
+      'unassigned',
+      'unlabeled'
+    ],
+    'pull_request': [
+      'assigned',
+      'closed',
+      'edited',
+      'labeled',
+      'opened',
+      'reopened',
+      'review_requested',
+      'review_request_removed',
+      'synchronize',
+      'unassigned',
+      'unlabeled'
+    ]
+  },
+
+  selectableActions: computed('type', function() {
+    let type = get(this, 'type');
+
+    if (type) {
+      return get(this, 'actionOptions')[type];
+    } else {
+      return [];
+    }
+  }),
+
+  actions: {
+    changeAction(action) {
+      set(this, 'eventAction', action);
+    },
+
+    changeStatus(status) {
+      set(this, 'status', status);
+    },
+
+    changeType(type) {
+      set(this, 'eventAction', null);
+      set(this, 'type', type);
+    },
+
+    clearFilters() {
+      set(this, 'eventAction', null);
+      set(this, 'status', null);
+      set(this, 'type', null);
+    }
+  }
 });

app/routes/admin/github-events/index.js

@@ -2,20 +2,43 @@ import Route from '@ember/routing/route';
 
 export default Route.extend({
   model(params) {
-    return this.store.query('github-event', {
+    let queryParams = {
       page: {
         page: params.page,
         'page-size': params.size
       }
-    });
+    };
+
+    if (params.eventAction) {
+      queryParams.action = params.eventAction;
+    }
+
+    if (params.status) {
+      queryParams.status = params.status;
+    }
+
+    if (params.type) {
+      queryParams.type = params.type;
+    }
+
+    return this.store.query('github-event', queryParams);
   },
 
   queryParams: {
+    eventAction: {
+      refreshModel: true
+    },
     page: {
       refreshModel: true
     },
     size: {
       refreshModel: true
+    },
+    status: {
+      refreshModel: true
+    },
+    type: {
+      refreshModel: true
     }
   }
 });

app/styles/_buttons.scss

@@ -160,11 +160,8 @@
   }
 
   .fa {
-    &:first-child {
-      padding-right: 5px;
-    }
     &:last-child {
-      padding-left: 5px;
+      padding-right: 5px;
     }
   }
 

app/styles/layout/_forms.scss

@@ -364,7 +364,7 @@ select {
   border: 1px solid $gray;
   font-family: $body-font-family;
   font-size: $body-font-size-normal;
-  height: 41px;
+  height: 38px;
   padding: 0 16px;
   cursor: pointer;
 }

app/styles/templates/admin/admin.scss

@@ -38,6 +38,10 @@
   }
 }
 
+.log-actions {
+  margin: 0.7em 0;
+}
+
 .log-rows {
   display: table;
   width: 100%;
@@ -77,6 +81,10 @@ code.errored {
       border-bottom: 1px solid $border-gray;
     }
   }
+
+  &__empty {
+    text-align: center;
+  }
 }
 
 .log-cell {

app/templates/admin/github-events/index.hbs

@@ -1,3 +1,34 @@
+<div class="log-actions">
+  <span>{{fa-icon "filter"}}</span>
+
+  {{#x-select data-test-filter-status value=status action=(action "changeStatus") as |xs|}}
+    <option value=''>Status</option>
+    {{#each statuses as |status|}}
+      {{#xs.option value=status}}{{status}}{{/xs.option}}
+    {{/each}}
+  {{/x-select}}
+
+  {{#x-select data-test-filter-type value=type action=(action "changeType") as |xs|}}
+    <option value=''>Event Type</option>
+    {{#each types as |type|}}
+      {{#xs.option value=type}}{{type}}{{/xs.option}}
+    {{/each}}
+  {{/x-select}}
+
+  {{#if type}}
+    {{#x-select data-test-filter-action value=eventAction action=(action "changeAction") as |xs|}}
+      <option value=''>Action</option>
+      {{#each selectableActions as |eventAction|}}
+        {{#xs.option value=eventAction}}{{eventAction}}{{/xs.option}}
+      {{/each}}
+    {{/x-select}}
+  {{/if}}
+
+  {{#if (or status type)}}
+    <a data-test-clear-filters {{action "clearFilters"}} class="button clear">{{fa-icon "remove"}} Clear</a>
+  {{/if}}
+</div>
+
 <div class="log-rows">
   <div data-test-log-row-header class="log-row log-row--header">
     <span class="log-cell log-cell--shrink">Status</span>

mirage/config.js

@@ -174,8 +174,23 @@ export default function() {
   */
 
   this.get('/github-events', function(schema, request) {
-    let items = schema.githubEvents.all();
-    return paginate(items, '/github-events', request.queryParams);
+    let events = schema.githubEvents.all();
+
+    let { action, status, type } = request.queryParams;
+
+    if (action) {
+      events = events.filter((e) => e.action === action);
+    }
+
+    if (status) {
+      events = events.filter((e) => e.status === status);
+    }
+
+    if (type) {
+      events = events.filter((e) => e.eventType === type);
+    }
+
+    return paginate(events, '/github-events', request.queryParams);
   });
   this.get('/github-events/:id');
   this.patch('/github-events/:id', function(schema) {

tests/acceptance/admin-github-events-test.js

@@ -66,3 +66,51 @@ test('Displays all the logged events', function(assert) {
     assert.notOk(page.next.isDisabled, 'Next button is not disabled.');
   });
 });
+
+test('Filters the logged events', function(assert) {
+  assert.expect(17);
+
+  let user = server.create('user', { admin: true, id: 1 });
+  server.create('github-event');
+  let expectedEvent = server.create('github-event', { action: 'opened', status: 'errored', eventType: 'issues' });
+
+  authenticateSession(this.application, { user_id: user.id });
+
+  page.visit();
+
+  andThen(() => {
+    assert.equal(page.logItems().count, 2, 'There are 2 log rows by default.');
+    page.filterStatus.fillIn('errored');
+    assert.notOk(page.filterAction.isVisible, 'Action filter is not visible.');
+  });
+
+  andThen(() => {
+    assert.equal(page.logItems().count, 1, 'There are 1 log rows after filtering.');
+    assert.equal(page.logItems(0).action.text, expectedEvent.action);
+    assert.equal(page.logItems(0).eventType.text, expectedEvent.eventType);
+    assert.equal(page.logItems(0).status.text, expectedEvent.status);
+    assert.notOk(page.filterAction.isVisible, 'Action filter is not visible.');
+    page.filterType.fillIn('issues');
+  });
+
+  andThen(() => {
+    assert.equal(page.logItems().count, 1, 'There are 1 log rows after filtering.');
+    assert.equal(page.logItems(0).action.text, expectedEvent.action);
+    assert.equal(page.logItems(0).eventType.text, expectedEvent.eventType);
+    assert.equal(page.logItems(0).status.text, expectedEvent.status);
+    assert.ok(page.filterAction.isVisible, 'Action filter is visible.');
+    page.filterStatus.fillIn('opened');
+  });
+
+  andThen(() => {
+    assert.equal(page.logItems().count, 1, 'There are 1 log rows after filtering.');
+    assert.equal(page.logItems(0).action.text, expectedEvent.action);
+    assert.equal(page.logItems(0).eventType.text, expectedEvent.eventType);
+    assert.equal(page.logItems(0).status.text, expectedEvent.status);
+    page.clear.click();
+  });
+
+  andThen(() => {
+    assert.equal(page.logItems().count, 2, 'All items are listed again after clearing filters.');
+  });
+});

tests/pages/admin/github-events/index.js

@@ -1,8 +1,27 @@
-import { collection, create, hasClass, visitable } from 'ember-cli-page-object';
+import { collection, create, fillable, hasClass, visitable } from 'ember-cli-page-object';
 
 export default create({
   visit: visitable('/admin/github/events'),
 
+  clear: {
+    scope: '[data-test-clear-filters]'
+  },
+
+  filterAction: {
+    scope: '[data-test-filter-action]',
+    fillIn: fillable()
+  },
+
+  filterStatus: {
+    scope: '[data-test-filter-status]',
+    fillIn: fillable()
+  },
+
+  filterType: {
+    scope: '[data-test-filter-type]',
+    fillIn: fillable()
+  },
+
   flashErrors: collection({
     scope: '.flash-messages--full-width',
     itemScope: '.flash-message.alert-danger'