Skip to content

Commit 85f927c

Browse files
krystalmonolithkrystalmonolith
committed
Displaying FileService exceptions.
Removed debugging/taps.
1 parent 6e994a7 commit 85f927c

File tree

5 files changed

+105
-32
lines changed

5 files changed

+105
-32
lines changed

‎src/app/components/image-grid/image-grid.component.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<mat-card><h3>{{title}}</h3></mat-card>
2-
<mat-card><app-parameter-form (refreshEvent)="refresh()"></app-parameter-form></mat-card>
2+
<mat-card >
3+
<app-parameter-form (refreshEvent)="refresh()"></app-parameter-form>
4+
</mat-card>
5+
<div class="exceptionContainer">
6+
<mat-card *ngIf="imageFetchError" class="exceptionOuter">
7+
<mat-card-title class="exception">{{imageFetchError}}</mat-card-title>
8+
<mat-card-subtitle class="exception">{{imageFetchErrorFilename}}</mat-card-subtitle>
9+
</mat-card>
10+
</div>
311
<mat-grid-list cols="12" rowHeight="50px">
4-
<mat-grid-tile *ngFor="let image of images"><img src="{{image}}" alt="test image"/></mat-grid-tile>
12+
<mat-grid-tile *ngFor="let image of images">
13+
<img src="{{image}}" alt="test image"/>
14+
</mat-grid-tile>
515
</mat-grid-list>
616

7-
<ul>
8-
<li *ngFor="let file of fileList">{{file}}</li>
9-
</ul>
10-

‎src/app/components/image-grid/image-grid.component.scss

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1-
.outer {
1+
.exception {
2+
color: orangered;
3+
background: darkblue;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
padding: 2px;
8+
}
9+
10+
.exceptionOuter {
11+
background: darkcyan;
212
margin-bottom: 1em;
313
}
14+
15+
.exceptionContainer {
16+
margin-top: 1em;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}

‎src/app/components/image-grid/image-grid.component.ts

+54-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Component, Input, OnInit} from '@angular/core';
22
import {FileService} from '../../services/file.service';
33
import {defer, from, Observable} from 'rxjs';
4-
import {map, mergeAll} from 'rxjs/operators';
4+
import {concatAll, map, mergeAll, retry} from 'rxjs/operators';
55
import {Base64ArrayBuffer} from './Base64ArrayBuffer';
66

77
@Component({
@@ -13,6 +13,8 @@ export class ImageGridComponent implements OnInit {
1313

1414
fileList: Array<string> = [];
1515

16+
static readonly RETRY_COUNT = 5;
17+
1618
static readonly FETCH_MODE_CONCAT = 'CONCAT';
1719
static readonly FETCH_MODE_MERGE = 'MERGE';
1820
static readonly FETCH_MODE_MERGERETRY = 'MERGE RETRY';
@@ -21,6 +23,8 @@ export class ImageGridComponent implements OnInit {
2123
@Input() title: string = '';
2224

2325
images: Array<string> = [];
26+
imageFetchError?: string;
27+
imageFetchErrorFilename?: string;
2428

2529
constructor(private fileService: FileService) {
2630
}
@@ -29,24 +33,64 @@ export class ImageGridComponent implements OnInit {
2933
this.loadList();
3034
}
3135

32-
loadImages(): Observable<void> {
36+
loadImagesConcatAll(): Observable<void> {
37+
return new Observable(subscriber => {
38+
from(this.fileList)
39+
.pipe(
40+
map((file: string) => defer(() => this.fileService.getFile(file))),
41+
concatAll()
42+
)
43+
.subscribe(
44+
(fileResponse: ArrayBuffer) => {
45+
this.images.push('data:image/png;base64,' + Base64ArrayBuffer.encode(fileResponse));
46+
},
47+
(err: any) => {
48+
subscriber.error(err);
49+
},
50+
() => {
51+
console.log(`loadImagesConcatAll() COMPLETE!`);
52+
}
53+
);
54+
});
55+
}
56+
57+
loadImagesMergeAll(): Observable<void> {
3358
return new Observable(subscriber => {
3459
from(this.fileList)
3560
.pipe(
3661
map((file: string) => defer(() => this.fileService.getFile(file))),
37-
//concatAll()
3862
mergeAll(20)
3963
)
4064
.subscribe(
4165
(fileResponse: ArrayBuffer) => {
4266
this.images.push('data:image/png;base64,' + Base64ArrayBuffer.encode(fileResponse));
4367
},
4468
(err: any) => {
45-
console.error(`LOADIMAGES ERROR1: ${JSON.stringify(err, null, 2)}`);
4669
subscriber.error(err);
4770
},
4871
() => {
49-
console.log(`LOADIMAGES COMPLETE!`);
72+
console.log(`loadImagesMergeAll() COMPLETE!`);
73+
}
74+
);
75+
});
76+
}
77+
78+
loadImagesMergeAllWithRetry(): Observable<void> {
79+
return new Observable(subscriber => {
80+
from(this.fileList)
81+
.pipe(
82+
map((file: string) => defer(() => this.fileService.getFile(file).pipe(retry(ImageGridComponent.RETRY_COUNT)))),
83+
mergeAll(20)
84+
)
85+
.subscribe(
86+
(fileResponse: ArrayBuffer) => {
87+
this.images.push('data:image/png;base64,' + Base64ArrayBuffer.encode(fileResponse));
88+
},
89+
(err: any) => {
90+
subscriber.error(err);
91+
},
92+
() => {
93+
console.log(`loadImagesMergeAllWithRetry() COMPLETE!`);
5094
}
5195
);
5296
});
@@ -55,13 +99,15 @@ export class ImageGridComponent implements OnInit {
5599
loadList(): void {
56100
this.fileList = [];
57101
this.images = [];
102+
this.imageFetchError = undefined;
103+
this.imageFetchErrorFilename = undefined;
58104
this.fileService.getFileList()
59105
.subscribe(s => {
60106
this.fileList = s;
61-
this.loadImages().subscribe({
107+
this.loadImagesMergeAll().subscribe({
62108
error: err => {
63-
console.error(`LOADIMAGES ERROR2: ${JSON.stringify(err, null, 2)}`);
64-
throw err;
109+
this.imageFetchError = `${err['status']} ${err['statusText']}`;
110+
this.imageFetchErrorFilename = err['url'];
65111
}
66112
});
67113
});

‎src/app/components/parameter-form/parameter-form.component.ts

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import {Component, OnInit, Output, EventEmitter} from '@angular/core';
1+
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
22
import {FormBuilder, FormControl, Validators} from '@angular/forms';
33
import {FileService} from '../../services/file.service';
4-
import {tap} from 'rxjs/operators';
54

65
const PERCENT_MIN = 0;
76
const PERCENT_MAX = 100;
@@ -29,22 +28,21 @@ export class ParameterFormComponent implements OnInit {
2928
[Validators.required, Validators.min(DELAY_MSEC_MIN), Validators.max(DELAY_MSEC_MAX)])
3029
});
3130

32-
constructor(private formBuilder: FormBuilder, private fileService: FileService) { }
31+
constructor(private formBuilder: FormBuilder, private fileService: FileService) {
32+
}
3333

3434
ngOnInit(): void {
35-
this.fileService.getFileFailPercent().pipe(tap(v => console.log(`P: ${v}`))).subscribe(percent => this.parametersForm.controls.fileFailPercentageControl.setValue(percent));
36-
this.fileService.getFileDelayMsec().pipe(tap(v => console.log(`D: ${v}`))).subscribe(delay => this.parametersForm.controls.fileDelayMsecControl.setValue(delay));
37-
this.parametersForm.valueChanges.subscribe(v => {
38-
const formValid = this.parametersForm.valid;
35+
this.fileService.getFileFailPercent()
36+
.subscribe(percent => this.parametersForm.controls.fileFailPercentageControl.setValue(percent));
37+
this.fileService.getFileDelayMsec()
38+
.subscribe(delay => this.parametersForm.controls.fileDelayMsecControl.setValue(delay));
39+
this.parametersForm.valueChanges.subscribe(() => {
3940
const percentValid = this.parametersForm.controls.fileFailPercentageControl.valid;
4041
const delayValid = this.parametersForm.controls.fileDelayMsecControl.valid;
41-
console.log(JSON.stringify(v,null,2) + ` Valid: ${formValid} FFPValid: ${percentValid} FDValid: ${delayValid}`);
4242
if (percentValid) {
43-
console.log(`PUTPERCENT: ${this.parametersForm.controls.fileFailPercentageControl.value}`)
4443
this.fileService.putFileFailPercent(this.parametersForm.controls.fileFailPercentageControl.value);
4544
}
4645
if (delayValid) {
47-
console.log(`PUTDELAY: ${this.parametersForm.controls.fileDelayMsecControl.value}`)
4846
this.fileService.putFileDelayMsec(this.parametersForm.controls.fileDelayMsecControl.value);
4947
}
5048
});

‎src/app/services/file.service.ts

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Injectable} from '@angular/core';
22
import {HttpClient} from '@angular/common/http';
33
import {Observable} from 'rxjs';
4-
import {catchError, map} from 'rxjs/operators';
4+
import {map} from 'rxjs/operators';
55

66
const BASEURL = 'http://localhost:3000/';
77

@@ -35,18 +35,24 @@ export class FileService {
3535
}
3636

3737
putFileFailPercent(percent: number): void {
38-
this.http.put<number>(BASEURL + 'filefailpercent/'+ percent, {})
39-
.subscribe({ next: v => console.log(`DELAY: ${JSON.stringify(v,null,2)}`),
40-
error: err => { throw `PUT PERCENT Error: ${JSON.stringify(err, null, 2)}`;}});
38+
this.http.put<number>(BASEURL + 'filefailpercent/' + percent, {})
39+
.subscribe({
40+
error: err => {
41+
throw `PUT PERCENT Error: ${JSON.stringify(err, null, 2)}`;
42+
}
43+
});
4144
}
4245

4346
getFileDelayMsec(): Observable<number> {
4447
return this.http.get<FileDelayMsec>(BASEURL + 'filedelaymsec').pipe(map(v => v['fileDelayMsec']));
4548
}
4649

4750
putFileDelayMsec(delay: number): void {
48-
this.http.put<number>(BASEURL + 'filedelaymsec/'+ delay, {})
49-
.subscribe({ next: v => console.log(`DELAY: ${JSON.stringify(v,null,2)}`),
50-
error: err => { throw `PUT Delay Error: ${JSON.stringify(err, null, 2)}`; }});
51+
this.http.put<number>(BASEURL + 'filedelaymsec/' + delay, {})
52+
.subscribe({
53+
error: err => {
54+
throw `PUT Delay Error: ${JSON.stringify(err, null, 2)}`;
55+
}
56+
});
5157
}
5258
}

0 commit comments

Comments
 (0)