From d160b4d234b09dbcb775d9cd08fd46ba11819093 Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Tue, 5 Nov 2024 16:04:15 +0800 Subject: [PATCH 1/3] 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 @@
- + {{t "developers.common.all"}}
- - - - -
- - - - - - - - - - - - - - - - - - -
- {{t "developers.component.webhook.attempts.http-code"}} - - {{row.status_code}} - ({{row.reason_phrase}}) -
- {{t "developers.component.webhook.attempts.response-time"}} - - {{format-milliseconds row.duration}} -
- {{t "developers.component.webhook.attempts.request-endpoint"}} - - {{#if row.api_event.data}} - - {{else}} -
- - {{t "developers.component.webhook.attempts.no-request-body"}} - -
- {{/if}} -
- {{t "developers.component.webhook.attempts.response"}} - - {{#if row.response}} - - {{else}} -
- - {{t "developers.component.webhook.attempts.no-response-body"}} - -
- {{/if}} -
- - - + {{#if this.getWebhookRequestLogs.isRunning}} +
+ +
+ {{else}} + + + + +
+ + + + + + + + + + + + + + + + + + +
+ {{t "developers.component.webhook.attempts.http-code"}} + + {{row.status_code}} + ({{row.reason_phrase}}) +
+ {{t "developers.component.webhook.attempts.response-time"}} + + {{format-milliseconds row.duration}} +
+ {{t "developers.component.webhook.attempts.request-endpoint"}} + + {{#if row.api_event.data}} + + {{else}} +
+ + {{t "developers.component.webhook.attempts.no-request-body"}} + +
+ {{/if}} +
+ {{t "developers.component.webhook.attempts.response"}} + + {{#if row.response}} + + {{else}} +
+ + {{t "developers.component.webhook.attempts.no-response-body"}} + +
+ {{/if}} +
+ + + + {{/if}}
\ 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" From 4033420383370507951000df024f4465a97f366b Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Wed, 6 Nov 2024 10:28:37 +0800 Subject: [PATCH 2/3] added pagiantion and date filter to webhook attempts component --- addon/components/webhook/attempts.hbs | 208 ++++++++++++++------------ addon/components/webhook/attempts.js | 77 +++++++++- addon/styles/dev-engine.css | 46 ++++++ 3 files changed, 231 insertions(+), 100 deletions(-) create mode 100644 addon/styles/dev-engine.css diff --git a/addon/components/webhook/attempts.hbs b/addon/components/webhook/attempts.hbs index 2be2d59..6c2d357 100644 --- a/addon/components/webhook/attempts.hbs +++ b/addon/components/webhook/attempts.hbs @@ -1,106 +1,122 @@
-
-
-

- {{t "developers.component.webhook.attempts.webhook-header"}} -

-

- {{t "developers.component.webhook.attempts.webhook-message"}} -

+
+
+
+

+ {{t "developers.component.webhook.attempts.webhook-header"}} +

+

+ {{t "developers.component.webhook.attempts.webhook-message"}} +

+
-
- -
-
-
- - {{t "developers.common.all"}} - - - {{t "developers.common.succeeded"}} - - - {{t "developers.common.failed"}} - +
+
+
+ + {{t "developers.common.all"}} + + + {{t "developers.common.succeeded"}} + + + {{t "developers.common.failed"}} + +
+
+
+
+
Filter by date:
+ + {{#if this.date}} +
+
+ {{#if this.webhookRequestLogs.meta}} + + {{/if}} +
- {{#if this.getWebhookRequestLogs.isRunning}} -
- -
- {{else}} - - - - -
- - - - - - - - - - - - - - - - - - -
- {{t "developers.component.webhook.attempts.http-code"}} - - {{row.status_code}} - ({{row.reason_phrase}}) -
- {{t "developers.component.webhook.attempts.response-time"}} - - {{format-milliseconds row.duration}} -
- {{t "developers.component.webhook.attempts.request-endpoint"}} - - {{#if row.api_event.data}} - - {{else}} -
- - {{t "developers.component.webhook.attempts.no-request-body"}} - -
- {{/if}} -
- {{t "developers.component.webhook.attempts.response"}} - - {{#if row.response}} - - {{else}} -
- - {{t "developers.component.webhook.attempts.no-response-body"}} - -
- {{/if}} -
- - - - {{/if}} + + + + +
+ + + + + + + + + + + + + + + + + + +
+ {{t "developers.component.webhook.attempts.http-code"}} + + {{row.status_code}} + ({{row.reason_phrase}}) +
+ {{t "developers.component.webhook.attempts.response-time"}} + + {{format-milliseconds row.duration}} +
+ {{t "developers.component.webhook.attempts.request-endpoint"}} + + {{#if row.api_event.data}} + + {{else}} +
+ + {{t "developers.component.webhook.attempts.no-request-body"}} + +
+ {{/if}} +
+ {{t "developers.component.webhook.attempts.response"}} + + {{#if row.response}} + + {{else}} +
+ + {{t "developers.component.webhook.attempts.no-response-body"}} + +
+ {{/if}} +
+ + +
\ No newline at end of file diff --git a/addon/components/webhook/attempts.js b/addon/components/webhook/attempts.js index 21727df..e3dde01 100644 --- a/addon/components/webhook/attempts.js +++ b/addon/components/webhook/attempts.js @@ -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 @@ -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 */ @@ -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(); } /** diff --git a/addon/styles/dev-engine.css b/addon/styles/dev-engine.css new file mode 100644 index 0000000..a9ecbdd --- /dev/null +++ b/addon/styles/dev-engine.css @@ -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; +} From 8257847c2c6d2baa0c524a8972f993d751384852 Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Thu, 7 Nov 2024 17:45:33 +0800 Subject: [PATCH 3/3] always use the latest extension dev dependencies --- package.json | 4 ++-- pnpm-lock.yaml | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 5caaded..0553183 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,8 @@ }, "dependencies": { "@babel/core": "^7.23.2", - "@fleetbase/ember-core": "^0.2.21", - "@fleetbase/ember-ui": "^0.2.35", + "@fleetbase/ember-core": "latest", + "@fleetbase/ember-ui": "latest", "@fortawesome/ember-fontawesome": "^2.0.0", "@fortawesome/fontawesome-svg-core": "6.4.0", "@fortawesome/free-brands-svg-icons": "6.4.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4ffa1c3..8abdb95 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,10 +12,10 @@ importers: specifier: ^7.23.2 version: 7.25.2 '@fleetbase/ember-core': - specifier: ^0.2.21 + specifier: latest version: 0.2.21(@ember/string@3.1.1)(@ember/test-helpers@3.3.1(@babel/core@7.25.2)(ember-source@5.4.1(@babel/core@7.25.2)(@glimmer/component@1.1.2(@babel/core@7.25.2))(rsvp@4.8.5)(webpack@5.93.0))(webpack@5.93.0))(ember-resolver@11.0.1(ember-source@5.4.1(@babel/core@7.25.2)(@glimmer/component@1.1.2(@babel/core@7.25.2))(rsvp@4.8.5)(webpack@5.93.0)))(ember-source@5.4.1(@babel/core@7.25.2)(@glimmer/component@1.1.2(@babel/core@7.25.2))(rsvp@4.8.5)(webpack@5.93.0))(webpack@5.93.0) '@fleetbase/ember-ui': - specifier: ^0.2.35 + specifier: latest version: 0.2.35(@ember/test-helpers@3.3.1(@babel/core@7.25.2)(ember-source@5.4.1(@babel/core@7.25.2)(@glimmer/component@1.1.2(@babel/core@7.25.2))(rsvp@4.8.5)(webpack@5.93.0))(webpack@5.93.0))(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glimmer/tracking@1.1.2)(ember-resolver@11.0.1(ember-source@5.4.1(@babel/core@7.25.2)(@glimmer/component@1.1.2(@babel/core@7.25.2))(rsvp@4.8.5)(webpack@5.93.0)))(ember-source@5.4.1(@babel/core@7.25.2)(@glimmer/component@1.1.2(@babel/core@7.25.2))(rsvp@4.8.5)(webpack@5.93.0))(postcss@8.4.41)(rollup@2.79.1)(tracked-built-ins@3.3.0)(webpack@5.93.0) '@fortawesome/ember-fontawesome': specifier: ^2.0.0