diff --git a/addon/components/webhook/attempts.hbs b/addon/components/webhook/attempts.hbs index a941eeb..6c2d357 100644 --- a/addon/components/webhook/attempts.hbs +++ b/addon/components/webhook/attempts.hbs @@ -1,39 +1,61 @@
-
-
-

- {{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}} +
diff --git a/addon/components/webhook/attempts.js b/addon/components/webhook/attempts.js index 924858d..e3dde01 100644 --- a/addon/components/webhook/attempts.js +++ b/addon/components/webhook/attempts.js @@ -2,41 +2,25 @@ 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'; +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; - - /** - * The current viewing webhook status - * - * @var {String} - */ + @service notifications; + @service urlSearchParams; @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; + @tracked page = 1; + @tracked date = null; /** * All columns applicable for orders @@ -89,29 +73,78 @@ 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.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: 12, sort: '-created_at', webhook_uuid: this.webhook.id, page: this.page, ...params }, options); + } catch (error) { + this.notifications.serverError(error); + } } /** - * Load webhook request logs for this webhook + * Filter webhook attempt logs by date. * + * @param {Object} { formattedDate } * @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; - }); + @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(); } /** @@ -136,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; +} diff --git a/package.json b/package.json index 2aa4413..0553183 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" @@ -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