Skip to content

Commit d160b4d

Browse files
roncodesroncodes
committed
improve webhook attempts UI
1 parent 2ba75a3 commit d160b4d

3 files changed

Lines changed: 80 additions & 108 deletions

File tree

‎addon/components/webhook/attempts.hbs‎

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<div class="flex items-center section-header-actions">
1515
<div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
1616
<div class="rounded-lg flex items-center justify-between px-2 py-1 text-sm bg-white dark:bg-gray-900">
17-
<a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if this.noAttemptStatus 'font-semibold text-blue-400'}}" {{on "click" this.changeAttemptStatus}}>
17+
<a href="javascript:;" class="mx-4 no-underline text-gray-400 {{unless this.attemptStatus 'font-semibold text-blue-400'}}" {{on "click" this.changeAttemptStatus}}>
1818
{{t "developers.common.all"}}
1919
</a>
2020
<a
@@ -36,65 +36,71 @@
3636
</div>
3737
</div>
3838
<div class="content-panel-body table-wrapper table-fluid">
39-
<Table @rows={{this.webhookRequestLogs}} @columns={{this.columns}} @canExpand={{true}} as |Table|>
40-
<Table.head />
41-
<Table.body as |body|>
42-
<body.expanded-row as |row|>
43-
<table class="border-none table-fixed sub-table dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
44-
<tbody>
45-
<tr>
46-
<td class="w-64">
47-
{{t "developers.component.webhook.attempts.http-code"}}
48-
</td>
49-
<td>
50-
{{row.status_code}}
51-
({{row.reason_phrase}})
52-
</td>
53-
</tr>
54-
<tr>
55-
<td class="w-64">
56-
{{t "developers.component.webhook.attempts.response-time"}}
57-
</td>
58-
<td>
59-
{{format-milliseconds row.duration}}
60-
</td>
61-
</tr>
62-
<tr>
63-
<td>
64-
{{t "developers.component.webhook.attempts.request-endpoint"}}
65-
</td>
66-
<td>
67-
{{#if row.api_event.data}}
68-
<CodeBlock @code={{or (json-stringify row.api_event.data) ""}} @language="json" class="line-numbers" />
69-
{{else}}
70-
<div class="flex items-center justify-center h-24">
71-
<span class="text-sm text-gray-600">
72-
{{t "developers.component.webhook.attempts.no-request-body"}}
73-
</span>
74-
</div>
75-
{{/if}}
76-
</td>
77-
</tr>
78-
<tr>
79-
<td>
80-
{{t "developers.component.webhook.attempts.response"}}
81-
</td>
82-
<td>
83-
{{#if row.response}}
84-
<CodeBlock @code={{or (json-stringify row.response) ""}} @language="json" class="line-numbers" />
85-
{{else}}
86-
<div class="flex items-center justify-center h-24">
87-
<span class="text-sm text-gray-600">
88-
{{t "developers.component.webhook.attempts.no-response-body"}}
89-
</span>
90-
</div>
91-
{{/if}}
92-
</td>
93-
</tr>
94-
</tbody>
95-
</table>
96-
</body.expanded-row>
97-
</Table.body>
98-
</Table>
39+
{{#if this.getWebhookRequestLogs.isRunning}}
40+
<div class="p-4 flex">
41+
<Spinner />
42+
</div>
43+
{{else}}
44+
<Table @rows={{this.webhookRequestLogs}} @columns={{this.columns}} @canExpand={{true}} as |Table|>
45+
<Table.head />
46+
<Table.body as |body|>
47+
<body.expanded-row as |row|>
48+
<table class="border-none table-fixed sub-table dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
49+
<tbody>
50+
<tr>
51+
<td class="w-64">
52+
{{t "developers.component.webhook.attempts.http-code"}}
53+
</td>
54+
<td>
55+
{{row.status_code}}
56+
({{row.reason_phrase}})
57+
</td>
58+
</tr>
59+
<tr>
60+
<td class="w-64">
61+
{{t "developers.component.webhook.attempts.response-time"}}
62+
</td>
63+
<td>
64+
{{format-milliseconds row.duration}}
65+
</td>
66+
</tr>
67+
<tr>
68+
<td>
69+
{{t "developers.component.webhook.attempts.request-endpoint"}}
70+
</td>
71+
<td>
72+
{{#if row.api_event.data}}
73+
<CodeBlock @code={{or (json-stringify row.api_event.data) ""}} @language="json" class="line-numbers" />
74+
{{else}}
75+
<div class="flex items-center justify-center h-24">
76+
<span class="text-sm text-gray-600">
77+
{{t "developers.component.webhook.attempts.no-request-body"}}
78+
</span>
79+
</div>
80+
{{/if}}
81+
</td>
82+
</tr>
83+
<tr>
84+
<td>
85+
{{t "developers.component.webhook.attempts.response"}}
86+
</td>
87+
<td>
88+
{{#if row.response}}
89+
<CodeBlock @code={{or (json-stringify row.response) ""}} @language="json" class="line-numbers" />
90+
{{else}}
91+
<div class="flex items-center justify-center h-24">
92+
<span class="text-sm text-gray-600">
93+
{{t "developers.component.webhook.attempts.no-response-body"}}
94+
</span>
95+
</div>
96+
{{/if}}
97+
</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
</body.expanded-row>
102+
</Table.body>
103+
</Table>
104+
{{/if}}
99105
</div>
100106
</div>

‎addon/components/webhook/attempts.js‎

Lines changed: 12 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,17 @@ import Component from '@glimmer/component';
22
import { inject as service } from '@ember/service';
33
import { tracked } from '@glimmer/tracking';
44
import { action } from '@ember/object';
5-
import { none } from '@ember/object/computed';
5+
import { task } from 'ember-concurrency';
66
import copyToClipboard from '@fleetbase/ember-core/utils/copy-to-clipboard';
77

88
export default class WebhookAttemptsComponent extends Component {
99
@service store;
1010
@service intl;
1111
@service hostRouter;
12-
13-
/**
14-
* The current viewing webhook status
15-
*
16-
* @var {String}
17-
*/
12+
@service notifications;
1813
@tracked attemptStatus = null;
19-
20-
/**
21-
* The webhook request logs for this endpoint.
22-
*
23-
* @var {String}
24-
*/
2514
@tracked webhookRequestLogs = [];
26-
27-
/**
28-
* The loading state for webhook request logs.
29-
*
30-
* @var {Boolean}
31-
*/
32-
@tracked isLoading = false;
33-
34-
/**
35-
* If not attempt status is set
36-
*
37-
* @var {Boolean}
38-
*/
39-
@none('attemptStatus') noAttemptStatus;
15+
@tracked webhook;
4016

4117
/**
4218
* All columns applicable for orders
@@ -89,29 +65,19 @@ export default class WebhookAttemptsComponent extends Component {
8965
* Creates an instance of WebhookAttemptsComponent.
9066
* @memberof WebhookAttemptsComponent
9167
*/
92-
constructor() {
68+
constructor(owner, { webhook }) {
9369
super(...arguments);
94-
this.loadWebhookRequestLogs();
70+
this.webhook = webhook;
71+
this.getWebhookRequestLogs.perform();
9572
}
9673

97-
/**
98-
* Load webhook request logs for this webhook
99-
*
100-
* @memberof WebhookAttemptsComponent
101-
*/
102-
@action loadWebhookRequestLogs(params = {}, options = {}) {
103-
const { webhook } = this.args;
10474

105-
this.isLoading = true;
106-
107-
return this.store
108-
.query('webhook-request-log', { limit: -1, webhook_uuid: webhook.id, ...params }, options)
109-
.then((webhookRequestLogs) => {
110-
this.webhookRequestLogs = webhookRequestLogs;
111-
})
112-
.finally(() => {
113-
this.isLoading = false;
114-
});
75+
@task *getWebhookRequestLogs(params = {}, options = {}) {
76+
try {
77+
this.webhookRequestLogs = yield this.store.query('webhook-request-log', { limit: -1, sort: '-created_at', webhook_uuid: this.webhook.id, ...params }, options);
78+
} catch (error) {
79+
this.notifications.serverError(error);
80+
}
11581
}
11682

11783
/**

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fleetbase/dev-engine",
3-
"version": "0.2.8",
3+
"version": "0.2.9",
44
"description": "Fleetbase Developers extension provides a module for managing developer resources such as API keys, webhooks, sockets, events and logs.",
55
"fleetbase": {
66
"route": "developers"

0 commit comments

Comments
 (0)