Skip to content

Commit 45bed75

Browse files
subomihorlah
subomi
and
horlah
authored
Emmanuel/feature/add status filter (#239)
* Emmanuel/fix/0.3-fixes (#234) * WIP * undo push * remove dashboard filters from url persistence fix clear filter actions to remove filter in URL add group id query param to config API * clear filters on changing active group add filters to URL from their intializing methods * persist active logs tab with query parameter * implement status filter for event delieveries Co-authored-by: Emmanuel Aina <emmanuel.ainaj@gmail.com>
1 parent 4f2c1f6 commit 45bed75

File tree

6 files changed

+78
-6
lines changed

6 files changed

+78
-6
lines changed

‎web/ui/dashboard/src/app/private/pages/dashboard/dashboard.component.html

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,30 @@ <h2>Configuration</h2>
250250
<mat-date-range-picker #eventDeliveriesFilterPicker [disabled]="false"></mat-date-range-picker>
251251
<img src="/assets/img/angle-arrow-down.svg" alt="arrow down icon" />
252252
</button>
253-
253+
<div class="dropdown">
254+
<button
255+
class="filter--button dropdown--button"
256+
[ngClass]="{ active: eventDeliveryFilteredByStatus }"
257+
(click)="showOverlay = true; showEventDeliveriesStatusDropdown = !showEventDeliveriesStatusDropdown"
258+
>
259+
<img src="/assets/img/status-filter-icon.svg" alt="status filter icon" />
260+
<span>{{ eventDeliveryFilteredByStatus || 'Status' }}</span>
261+
<img src="/assets/img/angle-arrow-down.svg" alt="arrow down icon" />
262+
</button>
263+
<div class="dropdown--list" *ngIf="showEventDeliveriesStatusDropdown">
264+
<div class="dropdown--list--item" *ngFor="let status of eventDeliveryStatuses">
265+
<input
266+
type="radio"
267+
name="status"
268+
[value]="status"
269+
[(ngModel)]="eventDeliveryFilteredByStatus"
270+
[id]="status"
271+
(change)="showOverlay = false; showEventDeliveriesStatusDropdown = false; getEventDeliveries({ addToURL: true })"
272+
/>
273+
<label [for]="status">{{ status || 'None' }}</label>
274+
</div>
275+
</div>
276+
</div>
254277
<div class="select">
255278
<select [ngClass]="{ active: !!eventDeliveriesApp }" aria-label="frequency" [(ngModel)]="eventDeliveriesApp" (change)="getEventDeliveries({ addToURL: true })">
256279
<option value="">All Apps</option>
@@ -273,7 +296,8 @@ <h2>Configuration</h2>
273296
[disabled]="
274297
(eventDeliveriesFilterDateRange.value.startDate == '' || eventDeliveriesFilterDateRange.value.endDate == '') &&
275298
eventDeliveriesApp == '' &&
276-
eventDeliveryFilteredByEventId == ''
299+
eventDeliveryFilteredByEventId == '' &&
300+
!eventDeliveryFilteredByStatus
277301
"
278302
>
279303
Clear Filter
@@ -537,3 +561,5 @@ <h5>{{ endpoint.description }}</h5>
537561
</section>
538562
</div>
539563
</div>
564+
565+
<div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showEventDeliveriesStatusDropdown = false"></div>

‎web/ui/dashboard/src/app/private/pages/dashboard/dashboard.component.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ export class DashboardComponent implements OnInit {
8080
groups: GROUP[] = [];
8181
activeGroup!: string;
8282
allEventdeliveriesChecked = false;
83+
eventDeliveryStatuses = ['', 'Success', 'Failure', 'Retry', 'Scheduled', 'Processing', 'Discarded'];
84+
eventDeliveryFilteredByStatus: '' | 'Success' | 'Failure' | 'Retry' | 'Scheduled' | 'Processing' | 'Discarded' = '';
85+
showOverlay = false;
86+
showEventDeliveriesStatusDropdown = false;
8387

8488
constructor(private httpService: HttpService, private generalService: GeneralService, private router: Router, private formBuilder: FormBuilder, private route: ActivatedRoute) {}
8589

@@ -142,6 +146,7 @@ export class DashboardComponent implements OnInit {
142146
endDate: filters.eventDelsEndDate ? new Date(filters.eventDelsEndDate) : ''
143147
});
144148
this.eventDeliveriesApp = filters.eventDelsApp ?? '';
149+
this.eventDeliveryFilteredByStatus = filters.eventDelsStatus ?? null;
145150
}
146151

147152
async fetchDashboardData() {
@@ -278,6 +283,7 @@ export class DashboardComponent implements OnInit {
278283
if (startDate) queryParams.eventDelsStartDate = startDate;
279284
if (endDate) queryParams.eventDelsEndDate = endDate;
280285
if (this.eventDeliveriesApp) queryParams.eventDelsApp = this.eventDeliveriesApp;
286+
queryParams.eventDelsStatus = this.eventDeliveryFilteredByStatus || '';
281287
}
282288

283289
if (requestDetails.section === 'group') queryParams.group = this.activeGroup;
@@ -294,7 +300,7 @@ export class DashboardComponent implements OnInit {
294300
const eventDeliveriesResponse = await this.httpService.request({
295301
url: `/eventdeliveries?groupID=${this.activeGroup || ''}&eventId=${requestDetails.eventId || ''}&page=${this.eventDeliveriesPage || 1}&startDate=${startDate}&endDate=${endDate}&appId=${
296302
this.eventDeliveriesApp
297-
}`,
303+
}&status=${this.eventDeliveryFilteredByStatus || ''}`,
298304
method: 'get'
299305
});
300306

@@ -472,9 +478,10 @@ export class DashboardComponent implements OnInit {
472478

473479
case 'event deliveries':
474480
this.eventDeliveriesApp = '';
475-
filterItems = ['eventDelsStartDate', 'eventDelsEndDate', 'eventDelsApp'];
481+
filterItems = ['eventDelsStartDate', 'eventDelsEndDate', 'eventDelsApp', 'eventDelsStatus'];
476482
this.eventDeliveriesFilterDateRange.patchValue({ startDate: '', endDate: '' });
477483
this.eventDeliveryFilteredByEventId = '';
484+
this.eventDeliveryFilteredByStatus = '';
478485
this.getEventDeliveries();
479486
break;
480487

‎web/ui/dashboard/src/assets/img/status-filter-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎web/ui/dashboard/src/scss/_form.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,8 @@ datalist {
9090
appearance: none;
9191
}
9292

93-
input[type='checkbox'] {
93+
input[type='checkbox'],
94+
input[type='radio'] {
9495
padding: 7px;
9596
position: relative;
9697

@@ -121,7 +122,7 @@ input[type='checkbox'] {
121122
}
122123

123124
.filter--button {
124-
min-width: 145px;
125+
min-width: 130px;
125126
}
126127

127128
.filter--button,

‎web/ui/dashboard/src/scss/_page.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,11 @@
8888
}
8989
}
9090
}
91+
92+
.overlay {
93+
position: fixed;
94+
top: 0;
95+
left: 0;
96+
width: 100%;
97+
height: 100%;
98+
}

‎web/ui/dashboard/src/scss/_table.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,33 @@
2323
margin: 0 20px 0;
2424
}
2525
}
26+
27+
.dropdown {
28+
position: relative;
29+
30+
.dropdown--list {
31+
position: absolute;
32+
top: 110%;
33+
background: var(--primary-color-inverse);
34+
width: 95%;
35+
left: 5%;
36+
padding: 5px 10px;
37+
font-size: 14px;
38+
border: 1px solid #f3f5f9;
39+
border-radius: 8px;
40+
z-index: 5;
41+
42+
&--item {
43+
display: flex;
44+
align-items: center;
45+
margin: 5px 0;
46+
47+
input {
48+
margin-right: 10px;
49+
}
50+
}
51+
}
52+
}
2653
}
2754

2855
table {

0 commit comments

Comments
 (0)