Skip to content

Commit

Permalink
improve webhook attempts UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@roncodes
roncodes committed Nov 5, 2024
1 parent 2ba75a3 commit d160b4d
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 108 deletions.
128 changes: 67 additions & 61 deletions addon/components/webhook/attempts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<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 {{if this.noAttemptStatus 'font-semibold text-blue-400'}}" {{on "click" this.changeAttemptStatus}}>
<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
Expand All @@ -36,65 +36,71 @@
</div>
</div>
<div class="content-panel-body table-wrapper table-fluid">
<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 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}}
</div>
</div>
58 changes: 12 additions & 46 deletions addon/components/webhook/attempts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,17 @@ import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { none } from '@ember/object/computed';
import { task } from 'ember-concurrency';
import copyToClipboard from '@fleetbase/ember-core/utils/copy-to-clipboard';

export default class WebhookAttemptsComponent extends Component {
@service store;
@service intl;
@service hostRouter;

/**
* The current viewing webhook status
*
* @var {String}
*/
@service notifications;
@tracked attemptStatus = null;

/**
* The webhook request logs for this endpoint.
*
* @var {String}
*/
@tracked webhookRequestLogs = [];

/**
* The loading state for webhook request logs.
*
* @var {Boolean}
*/
@tracked isLoading = false;

/**
* If not attempt status is set
*
* @var {Boolean}
*/
@none('attemptStatus') noAttemptStatus;
@tracked webhook;

/**
* All columns applicable for orders
Expand Down Expand Up @@ -89,29 +65,19 @@ export default class WebhookAttemptsComponent extends Component {
* Creates an instance of WebhookAttemptsComponent.
* @memberof WebhookAttemptsComponent
*/
constructor() {
constructor(owner, { webhook }) {
super(...arguments);
this.loadWebhookRequestLogs();
this.webhook = webhook;
this.getWebhookRequestLogs.perform();
}

/**
* Load webhook request logs for this webhook
*
* @memberof WebhookAttemptsComponent
*/
@action loadWebhookRequestLogs(params = {}, options = {}) {
const { webhook } = this.args;

this.isLoading = true;

return this.store
.query('webhook-request-log', { limit: -1, webhook_uuid: webhook.id, ...params }, options)
.then((webhookRequestLogs) => {
this.webhookRequestLogs = webhookRequestLogs;
})
.finally(() => {
this.isLoading = false;
});
@task *getWebhookRequestLogs(params = {}, options = {}) {
try {
this.webhookRequestLogs = yield this.store.query('webhook-request-log', { limit: -1, sort: '-created_at', webhook_uuid: this.webhook.id, ...params }, options);
} catch (error) {
this.notifications.serverError(error);
}
}

/**
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@fleetbase/dev-engine",
"version": "0.2.8",
"version": "0.2.9",
"description": "Fleetbase Developers extension provides a module for managing developer resources such as API keys, webhooks, sockets, events and logs.",
"fleetbase": {
"route": "developers"
Expand Down

0 comments on commit d160b4d

Please sign in to comment.