Skip to content

Commit

Permalink
added pagiantion and date filter to webhook attempts component
Browse files Browse the repository at this point in the history
  • Loading branch information
@roncodes
roncodes committed Nov 6, 2024
1 parent d160b4d commit 4033420
Show file tree
Hide file tree
Showing 3 changed files with 231 additions and 100 deletions.
208 changes: 112 additions & 96 deletions addon/components/webhook/attempts.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,122 @@
<div class="content-panel" ...attributes>
<div class="content-panel-header">
<div class="flex items-center">
<div>
<h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
{{t "developers.component.webhook.attempts.webhook-header"}}
</h3>
<p class="dark:text-gray-100 text-sm">
{{t "developers.component.webhook.attempts.webhook-message"}}
</p>
<div class="flex-1">
<div class="flex items-center mb-4">
<div>
<h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
{{t "developers.component.webhook.attempts.webhook-header"}}
</h3>
<p class="dark:text-gray-100 text-sm">
{{t "developers.component.webhook.attempts.webhook-message"}}
</p>
</div>
</div>
</div>

<div class="flex items-center section-header-actions">
<div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
<div class="rounded-lg flex items-center justify-between px-2 py-1 text-sm bg-white dark:bg-gray-900">
<a href="javascript:;" class="mx-4 no-underline text-gray-400 {{unless this.attemptStatus 'font-semibold text-blue-400'}}" {{on "click" this.changeAttemptStatus}}>
{{t "developers.common.all"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus 'successful') 'font-semibold text-blue-400'}}"
{{on "click" (fn this.changeAttemptStatus "successful")}}
>
{{t "developers.common.succeeded"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus 'failed') 'font-semibold text-blue-400'}}"
{{on "click" (fn this.changeAttemptStatus "failed")}}
>
{{t "developers.common.failed"}}
</a>
<div class="flex items-center section-header-actions space-x-2">
<div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
<div class="rounded-lg flex items-center justify-between px-2 py-1 text-sm bg-white dark:bg-gray-900">
<a href="javascript:;" class="mx-4 no-underline {{unless this.attemptStatus 'font-semibold text-blue-400' 'text-gray-400'}}" {{on "click" this.changeAttemptStatus}}>
{{t "developers.common.all"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline {{if (eq this.attemptStatus 'successful') 'font-semibold text-blue-400' 'text-gray-400'}}"
{{on "click" (fn this.changeAttemptStatus "successful")}}
>
{{t "developers.common.succeeded"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline {{if (eq this.attemptStatus 'failed') 'font-semibold text-blue-400' 'text-gray-400'}}"
{{on "click" (fn this.changeAttemptStatus "failed")}}
>
{{t "developers.common.failed"}}
</a>
</div>
</div>
<div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
<div class="webhook-attempts-date-filter-container">
<div class="date-filter-label">Filter by date:</div>
<DatePicker @value={{this.date}} @onSelect={{this.filterByDate}} placeholder="Filter by date" class="form-input-sm" />
{{#if this.date}}
<Button @type="link" @icon="times" @helpText="Clear date" @onClick={{this.clearDate}} />
{{/if}}
</div>
</div>
</div>
</div>
<div class="flex-1">
{{#if this.webhookRequestLogs.meta}}
<Pagination
@meta={{this.webhookRequestLogs.meta}}
@currentPage={{this.page}}
@onPageChange={{this.changePage}}
@isLoading={{this.getWebhookRequestLogs.isRunning}}
@metaInfoClass="hidden"
class="webhook-attempts-pagination"
/>
{{/if}}
</div>
</div>
<div class="content-panel-body table-wrapper table-fluid">
{{#if this.getWebhookRequestLogs.isRunning}}
<div class="p-4 flex">
<Spinner />
</div>
{{else}}
<Table @rows={{this.webhookRequestLogs}} @columns={{this.columns}} @canExpand={{true}} as |Table|>
<Table.head />
<Table.body as |body|>
<body.expanded-row as |row|>
<table class="border-none table-fixed sub-table dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
<tbody>
<tr>
<td class="w-64">
{{t "developers.component.webhook.attempts.http-code"}}
</td>
<td>
{{row.status_code}}
({{row.reason_phrase}})
</td>
</tr>
<tr>
<td class="w-64">
{{t "developers.component.webhook.attempts.response-time"}}
</td>
<td>
{{format-milliseconds row.duration}}
</td>
</tr>
<tr>
<td>
{{t "developers.component.webhook.attempts.request-endpoint"}}
</td>
<td>
{{#if row.api_event.data}}
<CodeBlock @code={{or (json-stringify row.api_event.data) ""}} @language="json" class="line-numbers" />
{{else}}
<div class="flex items-center justify-center h-24">
<span class="text-sm text-gray-600">
{{t "developers.component.webhook.attempts.no-request-body"}}
</span>
</div>
{{/if}}
</td>
</tr>
<tr>
<td>
{{t "developers.component.webhook.attempts.response"}}
</td>
<td>
{{#if row.response}}
<CodeBlock @code={{or (json-stringify row.response) ""}} @language="json" class="line-numbers" />
{{else}}
<div class="flex items-center justify-center h-24">
<span class="text-sm text-gray-600">
{{t "developers.component.webhook.attempts.no-response-body"}}
</span>
</div>
{{/if}}
</td>
</tr>
</tbody>
</table>
</body.expanded-row>
</Table.body>
</Table>
{{/if}}
<Table @rows={{this.webhookRequestLogs}} @columns={{this.columns}} @canExpand={{true}} as |Table|>
<Table.head />
<Table.body as |body|>
<body.expanded-row as |row|>
<table class="border-none table-fixed sub-table dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
<tbody>
<tr>
<td class="w-64">
{{t "developers.component.webhook.attempts.http-code"}}
</td>
<td>
{{row.status_code}}
({{row.reason_phrase}})
</td>
</tr>
<tr>
<td class="w-64">
{{t "developers.component.webhook.attempts.response-time"}}
</td>
<td>
{{format-milliseconds row.duration}}
</td>
</tr>
<tr>
<td>
{{t "developers.component.webhook.attempts.request-endpoint"}}
</td>
<td>
{{#if row.api_event.data}}
<CodeBlock @code={{or (json-stringify row.api_event.data) ""}} @language="json" class="line-numbers" />
{{else}}
<div class="flex items-center justify-center h-24">
<span class="text-sm text-gray-600">
{{t "developers.component.webhook.attempts.no-request-body"}}
</span>
</div>
{{/if}}
</td>
</tr>
<tr>
<td>
{{t "developers.component.webhook.attempts.response"}}
</td>
<td>
{{#if row.response}}
<CodeBlock @code={{or (json-stringify row.response) ""}} @language="json" class="line-numbers" />
{{else}}
<div class="flex items-center justify-center h-24">
<span class="text-sm text-gray-600">
{{t "developers.component.webhook.attempts.no-response-body"}}
</span>
</div>
{{/if}}
</td>
</tr>
</tbody>
</table>
</body.expanded-row>
</Table.body>
</Table>
</div>
</div>
77 changes: 73 additions & 4 deletions addon/components/webhook/attempts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,22 @@ import { action } from '@ember/object';
import { task } from 'ember-concurrency';
import copyToClipboard from '@fleetbase/ember-core/utils/copy-to-clipboard';

function filterParams(obj) {
// eslint-disable-next-line no-unused-vars
return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined));
}

export default class WebhookAttemptsComponent extends Component {
@service store;
@service intl;
@service hostRouter;
@service notifications;
@service urlSearchParams;
@tracked attemptStatus = null;
@tracked webhookRequestLogs = [];
@tracked webhook;
@tracked page = 1;
@tracked date = null;

/**
* All columns applicable for orders
Expand Down Expand Up @@ -68,18 +76,77 @@ export default class WebhookAttemptsComponent extends Component {
constructor(owner, { webhook }) {
super(...arguments);
this.webhook = webhook;
this.restoreParams();
this.getWebhookRequestLogs.perform();
}

restoreParams() {
if (this.urlSearchParams.has('page')) {
this.page = new Number(this.urlSearchParams.get('page'));
}

if (this.urlSearchParams.has('status')) {
this.status = this.urlSearchParams.get('status');
}

if (this.urlSearchParams.has('date')) {
this.status = this.urlSearchParams.get('date');
}
}

/**
* Load webhook request logs.
*
* @param {Object} [params={}]
* @param {Object} [options={}]
* @memberof WebhookAttemptsComponent
*/
@task *getWebhookRequestLogs(params = {}, options = {}) {
params = filterParams({ ...params, created_at: this.date, status: this.attemptStatus, page: this.page });

try {
this.webhookRequestLogs = yield this.store.query('webhook-request-log', { limit: -1, sort: '-created_at', webhook_uuid: this.webhook.id, ...params }, options);
this.webhookRequestLogs = yield this.store.query('webhook-request-log', { limit: 12, sort: '-created_at', webhook_uuid: this.webhook.id, page: this.page, ...params }, options);
} catch (error) {
this.notifications.serverError(error);
}
}

/**
* Filter webhook attempt logs by date.
*
* @param {Object} { formattedDate }
* @memberof WebhookAttemptsComponent
*/
@action filterByDate({ formattedDate }) {
this.date = formattedDate;
this.urlSearchParams.addParamToCurrentUrl('date', formattedDate);
this.getWebhookRequestLogs.perform();
}

/**
* Clear date filter.
*
* @memberof WebhookAttemptsComponent
*/
@action clearDate() {
this.date = null;
this.urlSearchParams.removeParamFromCurrentUrl('date');
this.getWebhookRequestLogs.perform();
}

/**
* Handle page change.
*
* @param {number} [page=1]
* @memberof WebhookAttemptsComponent
* @void
*/
@action changePage(page = 1) {
this.page = page;
this.urlSearchParams.addParamToCurrentUrl('page', page);
this.getWebhookRequestLogs.perform();
}

/**
* @void
*/
Expand All @@ -102,10 +169,12 @@ export default class WebhookAttemptsComponent extends Component {
status = typeof status === 'string' ? status : null;

this.attemptStatus = status;

if (status) {
this.loadWebhookRequestLogs({ status });
if (status === null) {
this.urlSearchParams.removeParamFromCurrentUrl('status');
} else {
this.urlSearchParams.addParamToCurrentUrl('status', status);
}
this.getWebhookRequestLogs.perform();
}

/**
Expand Down
46 changes: 46 additions & 0 deletions addon/styles/dev-engine.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.webhook-attempts-pagination.fleetbase-pagination,
.webhook-attempts-pagination {
padding-top: 0;
justify-content: end;
}

.webhook-attempts-pagination > .fleetbase-pagination-meta-info-wrapper {
flex: none;
}

.webhook-attempts-date-filter-container {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.25rem 0.75rem;
}

.webhook-attempts-date-filter-container > .date-picker-container input.fleetbase-date-picker {
width: 100%;
flex: 1;
padding: 0;
box-shadow: 0;
background-color: transparent;
font-size: 0.875rem;
line-height: 1.25rem;
border: 0;
outline: 0;
}

.webhook-attempts-date-filter-container > .date-picker-container input.fleetbase-date-picker:focus {
box-shadow: none;
border: 0;
outline: 0;
}

.webhook-attempts-date-filter-container > .date-filter-label {
margin-right: 0.25rem;
color: #000;
}

body[data-theme='dark'] .webhook-attempts-date-filter-container > .date-filter-label {
color: #9ca3af;
}

0 comments on commit 4033420

Please sign in to comment.