Skip to content

Commit

Permalink
Error summary (#336)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeknovy
ludeknovy committed Jul 14, 2023
1 parent 985a080 commit 14c332d
Show file tree
Hide file tree
Showing 9 changed files with 333 additions and 104 deletions.
10 changes: 10 additions & 0 deletions src/app/item-detail/error-summary/error-summary.component.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.card {
margin-top: 20px;
}

.error-break-line {
max-width: 25rem;
word-wrap:break-word;
}


112 changes: 112 additions & 0 deletions src/app/item-detail/error-summary/error-summary.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<div class="row" *ngIf="errorSummary && errorSummary.groupedErrors.length > 0">
<div class="col">
<div class="card table-stats card-shadow">
<h6 class="card-header bg-transparent">Error Summary <span class="compare">
</span></h6>
<div class="card-body card-body-request-stats">
<div class="labels-detail table-responsive">
<table class="table" [mfData]="errorSummary.groupedErrors" #mf="mfDataTable">
<thead>
<tr>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="count">#Error</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="failureMessage">Failure Message</mfDefaultSorter>
</th>

<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="responseMessage">Response Message</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="statusCode">Status Code</mfDefaultSorter>
</th>

</tr>
</thead>
<tbody>
<tr *ngFor="let _ of mf.data">
<td>{{_.count}}</td>
<td class="error-break-line">{{_.failureMessage}}</td>
<td class="error-break-line">{{_.responseMessage}}</td>
<td>{{_.statusCode}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="row" *ngIf="errorSummary && errorSummary.topErrorsByLabel.length > 0">
<div class="col">
<div class="card table-stats card-shadow">
<h6 class="card-header bg-transparent">Top 5 Errors by Label <span class="compare">
</span></h6>
<div class="card-body card-body-request-stats">
<div class="labels-detail table-responsive">
<table class="table" [mfData]="errorSummary.topErrorsByLabel" #mf="mfDataTable">
<thead>
<tr>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="label">Label</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error1.error">Error1</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error1.count">#Error1</mfDefaultSorter>
</th>

<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error2.error">Error2</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error2.count">#Error2</mfDefaultSorter>
</th>

<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error3.error">Error3</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error3.count">#Error3</mfDefaultSorter>
</th>

<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error4.error">Error4</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error4.count">#Error4</mfDefaultSorter>
</th>

<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error5.error">Error5</mfDefaultSorter>
</th>
<th scope="col" class="hd jtl-head-color">
<mfDefaultSorter by="error5.count">#Error5</mfDefaultSorter>
</th>

</tr>
</thead>
<tbody>
<tr *ngFor="let _ of mf.data">
<td class="label">{{_.label}}</td>
<td class="error-break-line">{{_?.error1?.error}}</td>
<td>{{_?.error1?.count}}</td>
<td class="error-break-line ">{{_?.error2?.error}}</td>
<td>{{_?.error2?.count}}</td>
<td class="error-break-line ">{{_?.error3?.error}}</td>
<td>{{_?.error3?.count}}</td>
<td class="error-break-line ">{{_?.error4?.error}}</td>
<td>{{_?.error4?.count}}</td>
<td class="error-break-line ">{{_?.error5?.error}}</td>
<td >{{_?.error5?.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
25 changes: 25 additions & 0 deletions src/app/item-detail/error-summary/error-summary.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";

import { ErrorSummaryComponent } from "./error-summary.component";

describe("ErrorSummaryComponent", () => {
let component: ErrorSummaryComponent;
let fixture: ComponentFixture<ErrorSummaryComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ErrorSummaryComponent]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(ErrorSummaryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it("should create", () => {
expect(component).toBeTruthy();
});
});
18 changes: 18 additions & 0 deletions src/app/item-detail/error-summary/error-summary.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component, Input, OnInit } from "@angular/core";
import { ErrorSummary } from "../../items.service.model";

@Component({
selector: "app-error-summary",
templateUrl: "./error-summary.component.html",
styleUrls: ["./error-summary.component.css", "../../shared-styles.css", "../item-detail.component.scss"]
})
export class ErrorSummaryComponent implements OnInit {

@Input() errorSummary: ErrorSummary;


// eslint-disable-next-line @typescript-eslint/no-empty-function
ngOnInit(): void {
}

}
Loading

0 comments on commit 14c332d

Please sign in to comment.