From d160b4d234b09dbcb775d9cd08fd46ba11819093 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 5 Nov 2024 16:04:15 +0800
Subject: [PATCH] improve webhook attempts UI

---
 addon/components/webhook/attempts.hbs | 128 ++++++++++++++------------
 addon/components/webhook/attempts.js  |  58 +++---------
 package.json                          |   2 +-
 3 files changed, 80 insertions(+), 108 deletions(-)

diff --git a/addon/components/webhook/attempts.hbs b/addon/components/webhook/attempts.hbs
index a941eeb..2be2d59 100644
--- a/addon/components/webhook/attempts.hbs
+++ b/addon/components/webhook/attempts.hbs
@@ -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
@@ -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>
\ No newline at end of file
diff --git a/addon/components/webhook/attempts.js b/addon/components/webhook/attempts.js
index 924858d..21727df 100644
--- a/addon/components/webhook/attempts.js
+++ b/addon/components/webhook/attempts.js
@@ -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
@@ -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);
+        }
     }
 
     /**
diff --git a/package.json b/package.json
index 2aa4413..5caaded 100644
--- a/package.json
+++ b/package.json
@@ -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"