From 4033420383370507951000df024f4465a97f366b Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Wed, 6 Nov 2024 10:28:37 +0800 Subject: [PATCH] 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; +}