Skip to content

Commit

Permalink
Merge pull request #33 from fleetbase/dev-v0.2.9
Browse files Browse the repository at this point in the history 
v0.2.9 - Improved Webhooks UI
  • Loading branch information
@roncodes
roncodes authored Nov 7, 2024
2 parents 2ba75a3 + 8257847 commit 2361488
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 81 deletions.
82 changes: 52 additions & 30 deletions addon/components/webhook/attempts.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,61 @@
<div class="content-panel" ...attributes>
<div class="content-panel-header">
<div class="flex items-center">
<div>
<h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
{{t "developers.component.webhook.attempts.webhook-header"}}
</h3>
<p class="dark:text-gray-100 text-sm">
{{t "developers.component.webhook.attempts.webhook-message"}}
</p>
<div class="flex-1">
<div class="flex items-center mb-4">
<div>
<h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
{{t "developers.component.webhook.attempts.webhook-header"}}
</h3>
<p class="dark:text-gray-100 text-sm">
{{t "developers.component.webhook.attempts.webhook-message"}}
</p>
</div>
</div>
</div>

<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}}>
{{t "developers.common.all"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus 'successful') 'font-semibold text-blue-400'}}"
{{on "click" (fn this.changeAttemptStatus "successful")}}
>
{{t "developers.common.succeeded"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus 'failed') 'font-semibold text-blue-400'}}"
{{on "click" (fn this.changeAttemptStatus "failed")}}
>
{{t "developers.common.failed"}}
</a>
<div class="flex items-center section-header-actions space-x-2">
<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 {{unless this.attemptStatus 'font-semibold text-blue-400' 'text-gray-400'}}" {{on "click" this.changeAttemptStatus}}>
{{t "developers.common.all"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline {{if (eq this.attemptStatus 'successful') 'font-semibold text-blue-400' 'text-gray-400'}}"
{{on "click" (fn this.changeAttemptStatus "successful")}}
>
{{t "developers.common.succeeded"}}
</a>
<a
href="javascript:;"
class="mx-4 no-underline {{if (eq this.attemptStatus 'failed') 'font-semibold text-blue-400' 'text-gray-400'}}"
{{on "click" (fn this.changeAttemptStatus "failed")}}
>
{{t "developers.common.failed"}}
</a>
</div>
</div>
<div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
<div class="webhook-attempts-date-filter-container">
<div class="date-filter-label">Filter by date:</div>
<DatePicker @value={{this.date}} @onSelect={{this.filterByDate}} placeholder="Filter by date" class="form-input-sm" />
{{#if this.date}}
<Button @type="link" @icon="times" @helpText="Clear date" @onClick={{this.clearDate}} />
{{/if}}
</div>
</div>
</div>
</div>
<div class="flex-1">
{{#if this.webhookRequestLogs.meta}}
<Pagination
@meta={{this.webhookRequestLogs.meta}}
@currentPage={{this.page}}
@onPageChange={{this.changePage}}
@isLoading={{this.getWebhookRequestLogs.isRunning}}
@metaInfoClass="hidden"
class="webhook-attempts-pagination"
/>
{{/if}}
</div>
</div>
<div class="content-panel-body table-wrapper table-fluid">
<Table @rows={{this.webhookRequestLogs}} @columns={{this.columns}} @canExpand={{true}} as |Table|>
Expand Down
127 changes: 81 additions & 46 deletions addon/components/webhook/attempts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
}

/**
Expand All @@ -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();
}

/**
Expand Down
46 changes: 46 additions & 0 deletions addon/styles/dev-engine.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 2361488

Please sign in to comment.